.cursorrules

You are an expert React/TypeScript developer working with the Tiny Design UI library (`@tiny-design/react`).

## About Tiny Design

Tiny Design is a React component library with 80+ components. Package: `@tiny-design/react`. Docs: https://wangdicoder.github.io/tiny-design/

## Import Pattern

Always import from the package root:
```tsx
import { Button, Modal, Table, Input, Form } from '@tiny-design/react';
```

Icons are a separate package:
```tsx
import { SearchIcon, CloseIcon } from '@tiny-design/icons';
```

## Key Conventions

- **CSS prefix**: `ty-` (e.g., `.ty-btn`, `.ty-modal`), customizable via `ConfigProvider`
- **BEM naming**: `ty-component`, `ty-component__element`, `ty-component_modifier`
- **Sizes**: `'sm' | 'md' | 'lg'` — used by Button, Input, Select, Table, etc.
- **All components support**: `style`, `className`, `prefixCls`, and `ref` (via forwardRef)

## Component Quick Reference

### Buttons
```tsx
<Button btnType="primary" size="md" loading={isLoading} icon={<SearchIcon />}>
  Search
</Button>
<Button btnType="danger">Delete</Button>
<Button btnType="outline" round>Rounded</Button>
```
Button types: `'default' | 'primary' | 'outline' | 'ghost' | 'link' | 'info' | 'danger' | 'warning' | 'success'`

### Forms
```tsx
<Form layout="vertical" onFinish={handleSubmit}>
  <Form.Item label="Email" name="email" rules={[{ required: true, type: 'email' }]}>
    <Input prefix={<MailIcon />} allowClear />
  </Form.Item>
  <Form.Item label="Password" name="password" rules={[{ required: true }]}>
    <InputPassword />
  </Form.Item>
  <Form.Item>
    <Button btnType="primary" htmlType="submit">Submit</Button>
  </Form.Item>
</Form>
```

### Table
```tsx
<Table
  columns={[
    { title: 'Name', dataIndex: 'name' },
    { title: 'Age', dataIndex: 'age', sorter: (a, b) => a.age - b.age },
    { title: 'Action', render: (_, record) => <Button btnType="link">Edit</Button> },
  ]}
  dataSource={data}
  rowKey="id"
  rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
  pagination={{ current, pageSize: 10, total, onChange: setCurrent }}
  loading={isLoading}
/>
```

### Modal
```tsx
<Modal
  visible={visible}
  header="Title"
  centered
  onConfirm={() => handleOk()}
  onCancel={() => setVisible(false)}
  confirmLoading={loading}
>
  Content here
</Modal>
```

### Feedback (imperative)
```tsx
Message.success('Saved!');
Message.error('Something went wrong');
Notification.open({ title: 'Alert', description: 'Details here' });
```

### Select
```tsx
<Select
  options={[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]}
  mode="multiple"
  searchable
  placeholder="Choose..."
  onChange={(val) => setValue(val)}
/>
```

### Layout
```tsx
<Layout>
  <Layout.Header>Header</Layout.Header>
  <Layout>
    <Layout.Sider>Sidebar</Layout.Sider>
    <Layout.Content>Main</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>
```

### Drawer
```tsx
<Drawer visible={visible} placement="right" width={400} onClose={() => setVisible(false)}>
  Drawer content
</Drawer>
```

### Tabs
```tsx
<Tabs type="card" onChange={(key) => setActiveKey(key)}>
  <Tabs.TabPane tab="Tab 1" key="1">Content 1</Tabs.TabPane>
  <Tabs.TabPane tab="Tab 2" key="2">Content 2</Tabs.TabPane>
</Tabs>
```

### Alert
```tsx
<Alert type="warning" closable banner message="This is a warning" />
```

## Common Patterns

### ConfigProvider (theme/locale)
```tsx
<ConfigProvider prefixCls="my-app" themeMode="dark">
  <App />
</ConfigProvider>
```

### Grid Layout (24 columns)
```tsx
<Grid.Row gutter={16}>
  <Grid.Col span={8}>Col 1</Grid.Col>
  <Grid.Col span={8}>Col 2</Grid.Col>
  <Grid.Col span={8}>Col 3</Grid.Col>
</Grid.Row>
```

### Flex
```tsx
<Flex gap={12} align="center" justify="space-between">
  <span>Left</span>
  <Button btnType="primary">Right</Button>
</Flex>
```

## Rules When Generating Code

1. Always use `btnType` (not `type`) for Button variants
2. Modal uses `visible` (not `open`), `header` (not `title`), `onConfirm`/`onCancel`
3. Alert uses `type` for variant, not `severity`
4. Table columns use `dataIndex` to map to data fields
5. Form.Item uses `name` for field binding and `rules` for validation
6. Use `Message.success()` / `Message.error()` for toast-like feedback (imperative API)
7. Use `Notification.open()` for rich notifications (imperative API)
8. Drawer uses `visible` and `onClose`
9. All size props accept `'sm' | 'md' | 'lg'`, not `'small' | 'medium' | 'large'`
10. Import styles: `import '@tiny-design/react/es/style.css'`