@ataraui/ataraui-react 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +262 -19
- package/dist/index.d.mts +123 -1
- package/dist/index.d.ts +123 -1
- package/dist/index.js +810 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +790 -15
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -47,23 +47,138 @@ Add the source and theme tokens to your `globals.css`:
|
|
|
47
47
|
## Usage
|
|
48
48
|
|
|
49
49
|
```tsx
|
|
50
|
-
import
|
|
50
|
+
import React from 'react'
|
|
51
|
+
import {
|
|
52
|
+
Button,
|
|
53
|
+
Input,
|
|
54
|
+
Badge,
|
|
55
|
+
Card,
|
|
56
|
+
CardHeader,
|
|
57
|
+
CardTitle,
|
|
58
|
+
CardDescription,
|
|
59
|
+
CardContent,
|
|
60
|
+
CardFooter,
|
|
61
|
+
Avatar,
|
|
62
|
+
Separator,
|
|
63
|
+
Spinner,
|
|
64
|
+
Select,
|
|
65
|
+
Checkbox,
|
|
66
|
+
RadioGroup,
|
|
67
|
+
Switch,
|
|
68
|
+
Modal,
|
|
69
|
+
ModalHeader,
|
|
70
|
+
ModalTitle,
|
|
71
|
+
ModalDescription,
|
|
72
|
+
ModalBody,
|
|
73
|
+
ModalFooter,
|
|
74
|
+
Drawer,
|
|
75
|
+
DrawerHeader,
|
|
76
|
+
DrawerTitle,
|
|
77
|
+
DrawerDescription,
|
|
78
|
+
DrawerBody,
|
|
79
|
+
DrawerFooter,
|
|
80
|
+
Tooltip,
|
|
81
|
+
Popover,
|
|
82
|
+
} from '@ataraui/ataraui-react'
|
|
51
83
|
|
|
52
84
|
export default function Page() {
|
|
85
|
+
const [modalOpen, setModalOpen] = React.useState(false)
|
|
86
|
+
const [drawerOpen, setDrawerOpen] = React.useState(false)
|
|
87
|
+
|
|
53
88
|
return (
|
|
54
89
|
<div>
|
|
55
90
|
<Badge variant="default">New</Badge>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
91
|
+
|
|
92
|
+
<Input label="Email" placeholder="you@example.com" hint="We will never spam you." />
|
|
93
|
+
|
|
94
|
+
<Button variant="primary" size="md">Ship it</Button>
|
|
95
|
+
<Button variant="outline" isLoading>Loading...</Button>
|
|
96
|
+
|
|
97
|
+
<Card variant="elevated">
|
|
98
|
+
<CardHeader>
|
|
99
|
+
<CardTitle>Card Title</CardTitle>
|
|
100
|
+
<CardDescription>Card description here.</CardDescription>
|
|
101
|
+
</CardHeader>
|
|
102
|
+
<CardContent>Content goes here.</CardContent>
|
|
103
|
+
<CardFooter>
|
|
104
|
+
<Button variant="primary" size="sm">Confirm</Button>
|
|
105
|
+
<Button variant="ghost" size="sm">Cancel</Button>
|
|
106
|
+
</CardFooter>
|
|
107
|
+
</Card>
|
|
108
|
+
|
|
109
|
+
<Avatar src="https://github.com/ryo.png" alt="Ryo" size="md" />
|
|
110
|
+
<Avatar fallback="Ryo Kurniawan" size="md" />
|
|
111
|
+
|
|
112
|
+
<Separator />
|
|
113
|
+
<Separator label="OR" />
|
|
114
|
+
|
|
115
|
+
<Spinner size="md" />
|
|
116
|
+
<Spinner size="md" label="Loading data..." />
|
|
117
|
+
|
|
118
|
+
<Select
|
|
119
|
+
label="Country"
|
|
120
|
+
placeholder="Select a country..."
|
|
121
|
+
options={[
|
|
122
|
+
{ value: 'id', label: 'Indonesia' },
|
|
123
|
+
{ value: 'sg', label: 'Singapore' },
|
|
124
|
+
]}
|
|
60
125
|
/>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
126
|
+
|
|
127
|
+
<Checkbox label="Accept terms" />
|
|
128
|
+
<Checkbox label="Remember me" description="Stay logged in for 30 days." />
|
|
129
|
+
|
|
130
|
+
<RadioGroup
|
|
131
|
+
name="plan"
|
|
132
|
+
label="Billing Plan"
|
|
133
|
+
options={[
|
|
134
|
+
{ value: 'monthly', label: 'Monthly' },
|
|
135
|
+
{ value: 'yearly', label: 'Yearly' },
|
|
136
|
+
]}
|
|
137
|
+
/>
|
|
138
|
+
|
|
139
|
+
<Switch label="Notifications" description="Receive email notifications." />
|
|
140
|
+
|
|
141
|
+
<Button onClick={() => setModalOpen(true)}>Open modal</Button>
|
|
142
|
+
<Modal open={modalOpen} onClose={() => setModalOpen(false)}>
|
|
143
|
+
<ModalHeader onClose={() => setModalOpen(false)}>
|
|
144
|
+
<ModalTitle>Confirm action</ModalTitle>
|
|
145
|
+
<ModalDescription>This action can be reviewed before continuing.</ModalDescription>
|
|
146
|
+
</ModalHeader>
|
|
147
|
+
<ModalBody>Use modals for focused workflows.</ModalBody>
|
|
148
|
+
<ModalFooter>
|
|
149
|
+
<Button variant="ghost" onClick={() => setModalOpen(false)}>Cancel</Button>
|
|
150
|
+
<Button onClick={() => setModalOpen(false)}>Continue</Button>
|
|
151
|
+
</ModalFooter>
|
|
152
|
+
</Modal>
|
|
153
|
+
|
|
154
|
+
<Button variant="outline" onClick={() => setDrawerOpen(true)}>Open drawer</Button>
|
|
155
|
+
<Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} side="right">
|
|
156
|
+
<DrawerHeader onClose={() => setDrawerOpen(false)}>
|
|
157
|
+
<DrawerTitle>Settings</DrawerTitle>
|
|
158
|
+
<DrawerDescription>Manage preferences without leaving the page.</DrawerDescription>
|
|
159
|
+
</DrawerHeader>
|
|
160
|
+
<DrawerBody>Drawer content goes here.</DrawerBody>
|
|
161
|
+
<DrawerFooter>
|
|
162
|
+
<Button onClick={() => setDrawerOpen(false)}>Save</Button>
|
|
163
|
+
</DrawerFooter>
|
|
164
|
+
</Drawer>
|
|
165
|
+
|
|
166
|
+
<Tooltip content="Helpful context" side="top">
|
|
167
|
+
<Button variant="outline">Hover me</Button>
|
|
168
|
+
</Tooltip>
|
|
169
|
+
|
|
170
|
+
<Popover
|
|
171
|
+
side="bottom"
|
|
172
|
+
align="start"
|
|
173
|
+
content={({ close }) => (
|
|
174
|
+
<div className="flex w-56 flex-col gap-3">
|
|
175
|
+
<p className="font-medium">Account settings</p>
|
|
176
|
+
<Button size="sm" onClick={close}>Done</Button>
|
|
177
|
+
</div>
|
|
178
|
+
)}
|
|
179
|
+
>
|
|
180
|
+
<Button variant="outline">Open popover</Button>
|
|
181
|
+
</Popover>
|
|
67
182
|
</div>
|
|
68
183
|
)
|
|
69
184
|
}
|
|
@@ -73,9 +188,21 @@ export default function Page() {
|
|
|
73
188
|
|
|
74
189
|
| Component | Variants | Status |
|
|
75
190
|
|-----------|----------|--------|
|
|
76
|
-
| `Button`
|
|
77
|
-
| `Input`
|
|
78
|
-
| `Badge`
|
|
191
|
+
| `Button` | `primary` `secondary` `outline` `ghost` `destructive` | ✅ Ready |
|
|
192
|
+
| `Input` | `default` `error` | ✅ Ready |
|
|
193
|
+
| `Badge` | `default` `secondary` `outline` `success` `warning` `destructive` | ✅ Ready |
|
|
194
|
+
| `Card` | `elevated` `outlined` `ghost` | ✅ Ready |
|
|
195
|
+
| `Avatar` | — | ✅ Ready |
|
|
196
|
+
| `Separator` | `horizontal` `vertical` | ✅ Ready |
|
|
197
|
+
| `Spinner` | — | ✅ Ready |
|
|
198
|
+
| `Select` | `default` `error` | ✅ Ready |
|
|
199
|
+
| `Checkbox` | — | ✅ Ready |
|
|
200
|
+
| `RadioGroup` | `vertical` `horizontal` | ✅ Ready |
|
|
201
|
+
| `Switch` | — | ✅ Ready |
|
|
202
|
+
| `Modal` | `sm` `md` `lg` `xl` `full` | ✅ Ready |
|
|
203
|
+
| `Drawer` | `left` `right` `top` `bottom` | ✅ Ready |
|
|
204
|
+
| `Tooltip` | `top` `bottom` `left` `right` | ✅ Ready |
|
|
205
|
+
| `Popover` | `top` `bottom` `left` `right` · `start` `center` `end` | ✅ Ready |
|
|
79
206
|
|
|
80
207
|
## Button Props
|
|
81
208
|
|
|
@@ -94,6 +221,122 @@ export default function Page() {
|
|
|
94
221
|
| `hint` | `string` | Helper text displayed below the input |
|
|
95
222
|
| `inputSize` | `sm` \| `md` \| `lg` | Input height size |
|
|
96
223
|
|
|
224
|
+
## Card Props
|
|
225
|
+
|
|
226
|
+
| Prop | Type | Default | Description |
|
|
227
|
+
|------|------|---------|-------------|
|
|
228
|
+
| `variant` | `elevated` \| `outlined` \| `ghost` | `elevated` | Visual style |
|
|
229
|
+
| `padding` | `none` \| `sm` \| `md` \| `lg` | `md` | Inner padding |
|
|
230
|
+
|
|
231
|
+
## Avatar Props
|
|
232
|
+
|
|
233
|
+
| Prop | Type | Default | Description |
|
|
234
|
+
|------|------|---------|-------------|
|
|
235
|
+
| `src` | `string` | — | Image URL |
|
|
236
|
+
| `alt` | `string` | — | Image alt text |
|
|
237
|
+
| `fallback` | `string` | — | Name for initials fallback |
|
|
238
|
+
| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Avatar size |
|
|
239
|
+
|
|
240
|
+
## Separator Props
|
|
241
|
+
|
|
242
|
+
| Prop | Type | Default | Description |
|
|
243
|
+
|------|------|---------|-------------|
|
|
244
|
+
| `orientation` | `horizontal` \| `vertical` | `horizontal` | Direction |
|
|
245
|
+
| `label` | `string` | — | Text label in the middle |
|
|
246
|
+
|
|
247
|
+
## Spinner Props
|
|
248
|
+
|
|
249
|
+
| Prop | Type | Default | Description |
|
|
250
|
+
|------|------|---------|-------------|
|
|
251
|
+
| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Spinner size |
|
|
252
|
+
| `label` | `string` | — | Text label below spinner |
|
|
253
|
+
|
|
254
|
+
## Select Props
|
|
255
|
+
|
|
256
|
+
| Prop | Type | Description |
|
|
257
|
+
|------|------|-------------|
|
|
258
|
+
| `label` | `string` | Label displayed above the select |
|
|
259
|
+
| `error` | `string` | Error message (also triggers error state) |
|
|
260
|
+
| `hint` | `string` | Helper text displayed below the select |
|
|
261
|
+
| `placeholder` | `string` | Placeholder option text |
|
|
262
|
+
| `options` | `SelectOption[]` | Array of `{ value, label, disabled? }` |
|
|
263
|
+
| `selectSize` | `sm` \| `md` \| `lg` | Select height size |
|
|
264
|
+
|
|
265
|
+
## Checkbox Props
|
|
266
|
+
|
|
267
|
+
| Prop | Type | Description |
|
|
268
|
+
|------|------|-------------|
|
|
269
|
+
| `label` | `string` | Label displayed next to the checkbox |
|
|
270
|
+
| `description` | `string` | Helper text below the label |
|
|
271
|
+
| `error` | `string` | Error message below the checkbox |
|
|
272
|
+
|
|
273
|
+
## RadioGroup Props
|
|
274
|
+
|
|
275
|
+
| Prop | Type | Default | Description |
|
|
276
|
+
|------|------|---------|-------------|
|
|
277
|
+
| `name` | `string` | — | Input group name (required) |
|
|
278
|
+
| `options` | `RadioOption[]` | — | Array of `{ value, label, description?, disabled? }` |
|
|
279
|
+
| `value` | `string` | — | Controlled value |
|
|
280
|
+
| `onChange` | `(value: string) => void` | — | Change handler |
|
|
281
|
+
| `label` | `string` | — | Group label |
|
|
282
|
+
| `orientation` | `vertical` \| `horizontal` | `vertical` | Layout direction |
|
|
283
|
+
| `error` | `string` | — | Error message |
|
|
284
|
+
| `hint` | `string` | — | Helper text |
|
|
285
|
+
|
|
286
|
+
## Switch Props
|
|
287
|
+
|
|
288
|
+
| Prop | Type | Description |
|
|
289
|
+
|------|------|-------------|
|
|
290
|
+
| `label` | `string` | Label displayed next to the switch |
|
|
291
|
+
| `description` | `string` | Helper text below the label |
|
|
292
|
+
| `error` | `string` | Error message below the switch |
|
|
293
|
+
| `checked` | `boolean` | Controlled checked state |
|
|
294
|
+
| `defaultChecked` | `boolean` | Default checked state (uncontrolled) |
|
|
295
|
+
| `onChange` | `ChangeEventHandler` | Change handler |
|
|
296
|
+
|
|
297
|
+
## Modal Props
|
|
298
|
+
|
|
299
|
+
| Prop | Type | Default | Description |
|
|
300
|
+
|------|------|---------|-------------|
|
|
301
|
+
| `open` | `boolean` | — | Controls whether the modal is visible |
|
|
302
|
+
| `onClose` | `() => void` | — | Called when the modal should close |
|
|
303
|
+
| `children` | `ReactNode` | — | Modal content |
|
|
304
|
+
| `size` | `sm` \| `md` \| `lg` \| `xl` \| `full` | `md` | Modal width |
|
|
305
|
+
| `closeOnOverlayClick` | `boolean` | `true` | Close when the overlay is clicked |
|
|
306
|
+
|
|
307
|
+
## Drawer Props
|
|
308
|
+
|
|
309
|
+
| Prop | Type | Default | Description |
|
|
310
|
+
|------|------|---------|-------------|
|
|
311
|
+
| `open` | `boolean` | — | Controls whether the drawer is visible |
|
|
312
|
+
| `onClose` | `() => void` | — | Called when the drawer should close |
|
|
313
|
+
| `children` | `ReactNode` | — | Drawer content |
|
|
314
|
+
| `side` | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement |
|
|
315
|
+
| `size` | `sm` \| `md` \| `lg` \| `full` | `md` | Drawer width for left/right placements |
|
|
316
|
+
| `closeOnOverlayClick` | `boolean` | `true` | Close when the overlay is clicked |
|
|
317
|
+
|
|
318
|
+
## Tooltip Props
|
|
319
|
+
|
|
320
|
+
| Prop | Type | Default | Description |
|
|
321
|
+
|------|------|---------|-------------|
|
|
322
|
+
| `content` | `ReactNode` | — | Tooltip content |
|
|
323
|
+
| `children` | `ReactNode` | — | Tooltip trigger |
|
|
324
|
+
| `side` | `top` \| `bottom` \| `left` \| `right` | `top` | Tooltip placement |
|
|
325
|
+
| `delay` | `number` | `300` | Delay before showing the tooltip, in milliseconds |
|
|
326
|
+
|
|
327
|
+
## Popover Props
|
|
328
|
+
|
|
329
|
+
| Prop | Type | Default | Description |
|
|
330
|
+
|------|------|---------|-------------|
|
|
331
|
+
| `content` | `ReactNode` \| `(controls) => ReactNode` | — | Popover content, optionally with `close`, `open`, and `setOpen` controls |
|
|
332
|
+
| `children` | `ReactNode` | — | Popover trigger |
|
|
333
|
+
| `side` | `top` \| `bottom` \| `left` \| `right` | `bottom` | Popover placement |
|
|
334
|
+
| `align` | `start` \| `center` \| `end` | `center` | Popover alignment relative to the trigger |
|
|
335
|
+
| `open` | `boolean` | — | Controlled open state |
|
|
336
|
+
| `defaultOpen` | `boolean` | `false` | Initial open state for uncontrolled usage |
|
|
337
|
+
| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |
|
|
338
|
+
| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside the popover |
|
|
339
|
+
|
|
97
340
|
## Development
|
|
98
341
|
|
|
99
342
|
```bash
|
|
@@ -124,12 +367,12 @@ npm publish
|
|
|
124
367
|
| Version | Components | Category |
|
|
125
368
|
|---------|-----------|----------|
|
|
126
369
|
| **v0.1.0** ✅ | `Button` `Input` `Badge` | Core + Tailwind v4 |
|
|
127
|
-
| **v0.2.0** | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
|
|
128
|
-
| **v0.3.0** | `Select` `Checkbox` `Radio` `Switch` | Form components |
|
|
129
|
-
| **v0.4.0** | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
370
|
+
| **v0.2.0** ✅ | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
|
|
371
|
+
| **v0.3.0** ✅ | `Select` `Checkbox` `Radio` `Switch` | Form components |
|
|
372
|
+
| **v0.4.0** ✅ | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
130
373
|
| **v0.5.0** | `Toast/Alert` `Progress` `Skeleton` | Feedback components |
|
|
131
374
|
| **v0.6.0** | `Table` `Tabs` `Accordion` | Data display |
|
|
132
|
-
| **v0.7.0** | Dark mode
|
|
375
|
+
| **v0.7.0** | Dark mode · Storybook docs | DX improvements |
|
|
133
376
|
| **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |
|
|
134
377
|
| **v0.9.0** | `DatePicker` `Combobox` `FileUpload` | Advanced inputs |
|
|
135
378
|
| **v1.0.0** 🎯 | API stable · Full docs · A11y tested · ataraui.com live | Stable release |
|
|
@@ -140,4 +383,4 @@ Contributions are welcome! Feel free to open an issue or submit a pull request.
|
|
|
140
383
|
|
|
141
384
|
## License
|
|
142
385
|
|
|
143
|
-
MIT © [
|
|
386
|
+
MIT © [AtaraUI](https://github.com/AtaraUI)
|
package/dist/index.d.mts
CHANGED
|
@@ -140,4 +140,126 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantPro
|
|
|
140
140
|
}
|
|
141
141
|
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
142
142
|
|
|
143
|
-
|
|
143
|
+
declare const selectVariants: (props?: ({
|
|
144
|
+
state?: "default" | "error" | null | undefined;
|
|
145
|
+
selectSize?: "sm" | "md" | "lg" | null | undefined;
|
|
146
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
147
|
+
interface SelectOption {
|
|
148
|
+
value: string;
|
|
149
|
+
label: string;
|
|
150
|
+
disabled?: boolean;
|
|
151
|
+
}
|
|
152
|
+
interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, VariantProps<typeof selectVariants> {
|
|
153
|
+
label?: string;
|
|
154
|
+
error?: string;
|
|
155
|
+
hint?: string;
|
|
156
|
+
placeholder?: string;
|
|
157
|
+
options?: SelectOption[];
|
|
158
|
+
}
|
|
159
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
160
|
+
|
|
161
|
+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
162
|
+
label?: string;
|
|
163
|
+
description?: string;
|
|
164
|
+
error?: string;
|
|
165
|
+
}
|
|
166
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
167
|
+
|
|
168
|
+
interface RadioOption {
|
|
169
|
+
value: string;
|
|
170
|
+
label: string;
|
|
171
|
+
description?: string;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
}
|
|
174
|
+
interface RadioGroupProps {
|
|
175
|
+
options: RadioOption[];
|
|
176
|
+
value?: string;
|
|
177
|
+
onChange?: (value: string) => void;
|
|
178
|
+
name: string;
|
|
179
|
+
label?: string;
|
|
180
|
+
error?: string;
|
|
181
|
+
hint?: string;
|
|
182
|
+
orientation?: "vertical" | "horizontal";
|
|
183
|
+
}
|
|
184
|
+
declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
185
|
+
|
|
186
|
+
interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
187
|
+
label?: string;
|
|
188
|
+
description?: string;
|
|
189
|
+
error?: string;
|
|
190
|
+
}
|
|
191
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
192
|
+
|
|
193
|
+
declare const modalVariants: (props?: ({
|
|
194
|
+
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
195
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
196
|
+
interface ModalProps extends VariantProps<typeof modalVariants> {
|
|
197
|
+
open: boolean;
|
|
198
|
+
onClose: () => void;
|
|
199
|
+
children: React.ReactNode;
|
|
200
|
+
className?: string;
|
|
201
|
+
closeOnOverlayClick?: boolean;
|
|
202
|
+
}
|
|
203
|
+
declare const Modal: React.FC<ModalProps>;
|
|
204
|
+
interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
205
|
+
onClose?: () => void;
|
|
206
|
+
}
|
|
207
|
+
declare const ModalHeader: React.FC<ModalHeaderProps>;
|
|
208
|
+
declare const ModalTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>>;
|
|
209
|
+
declare const ModalDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
210
|
+
declare const ModalBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
211
|
+
declare const ModalFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
212
|
+
|
|
213
|
+
declare const drawerVariants: (props?: ({
|
|
214
|
+
side?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
215
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
216
|
+
interface DrawerProps extends VariantProps<typeof drawerVariants> {
|
|
217
|
+
open: boolean;
|
|
218
|
+
onClose: () => void;
|
|
219
|
+
children: React.ReactNode;
|
|
220
|
+
className?: string;
|
|
221
|
+
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
222
|
+
closeOnOverlayClick?: boolean;
|
|
223
|
+
}
|
|
224
|
+
declare const Drawer: React.FC<DrawerProps>;
|
|
225
|
+
interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
226
|
+
onClose?: () => void;
|
|
227
|
+
}
|
|
228
|
+
declare const DrawerHeader: React.FC<DrawerHeaderProps>;
|
|
229
|
+
declare const DrawerTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>>;
|
|
230
|
+
declare const DrawerDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
231
|
+
declare const DrawerBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
232
|
+
declare const DrawerFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
233
|
+
|
|
234
|
+
type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
235
|
+
interface TooltipProps {
|
|
236
|
+
content: React.ReactNode;
|
|
237
|
+
children: React.ReactNode;
|
|
238
|
+
side?: TooltipSide;
|
|
239
|
+
delay?: number;
|
|
240
|
+
className?: string;
|
|
241
|
+
}
|
|
242
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
243
|
+
|
|
244
|
+
type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
|
|
245
|
+
type PopoverAlign = 'start' | 'center' | 'end';
|
|
246
|
+
type PopoverControls = {
|
|
247
|
+
close: () => void;
|
|
248
|
+
open: () => void;
|
|
249
|
+
setOpen: (open: boolean) => void;
|
|
250
|
+
};
|
|
251
|
+
type PopoverContent = React.ReactNode | ((controls: PopoverControls) => React.ReactNode);
|
|
252
|
+
interface PopoverProps {
|
|
253
|
+
content: PopoverContent;
|
|
254
|
+
children: React.ReactNode;
|
|
255
|
+
side?: PopoverSide;
|
|
256
|
+
align?: PopoverAlign;
|
|
257
|
+
open?: boolean;
|
|
258
|
+
defaultOpen?: boolean;
|
|
259
|
+
onOpenChange?: (open: boolean) => void;
|
|
260
|
+
className?: string;
|
|
261
|
+
closeOnOutsideClick?: boolean;
|
|
262
|
+
}
|
|
263
|
+
declare const Popover: React.FC<PopoverProps>;
|
|
264
|
+
|
|
265
|
+
export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Drawer, DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, Input, type InputProps, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tooltip, type TooltipProps, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, radius, selectVariants, separatorVariants, spinnerVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -140,4 +140,126 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantPro
|
|
|
140
140
|
}
|
|
141
141
|
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
142
142
|
|
|
143
|
-
|
|
143
|
+
declare const selectVariants: (props?: ({
|
|
144
|
+
state?: "default" | "error" | null | undefined;
|
|
145
|
+
selectSize?: "sm" | "md" | "lg" | null | undefined;
|
|
146
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
147
|
+
interface SelectOption {
|
|
148
|
+
value: string;
|
|
149
|
+
label: string;
|
|
150
|
+
disabled?: boolean;
|
|
151
|
+
}
|
|
152
|
+
interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, VariantProps<typeof selectVariants> {
|
|
153
|
+
label?: string;
|
|
154
|
+
error?: string;
|
|
155
|
+
hint?: string;
|
|
156
|
+
placeholder?: string;
|
|
157
|
+
options?: SelectOption[];
|
|
158
|
+
}
|
|
159
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
160
|
+
|
|
161
|
+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
162
|
+
label?: string;
|
|
163
|
+
description?: string;
|
|
164
|
+
error?: string;
|
|
165
|
+
}
|
|
166
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
167
|
+
|
|
168
|
+
interface RadioOption {
|
|
169
|
+
value: string;
|
|
170
|
+
label: string;
|
|
171
|
+
description?: string;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
}
|
|
174
|
+
interface RadioGroupProps {
|
|
175
|
+
options: RadioOption[];
|
|
176
|
+
value?: string;
|
|
177
|
+
onChange?: (value: string) => void;
|
|
178
|
+
name: string;
|
|
179
|
+
label?: string;
|
|
180
|
+
error?: string;
|
|
181
|
+
hint?: string;
|
|
182
|
+
orientation?: "vertical" | "horizontal";
|
|
183
|
+
}
|
|
184
|
+
declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
185
|
+
|
|
186
|
+
interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
187
|
+
label?: string;
|
|
188
|
+
description?: string;
|
|
189
|
+
error?: string;
|
|
190
|
+
}
|
|
191
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
192
|
+
|
|
193
|
+
declare const modalVariants: (props?: ({
|
|
194
|
+
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
195
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
196
|
+
interface ModalProps extends VariantProps<typeof modalVariants> {
|
|
197
|
+
open: boolean;
|
|
198
|
+
onClose: () => void;
|
|
199
|
+
children: React.ReactNode;
|
|
200
|
+
className?: string;
|
|
201
|
+
closeOnOverlayClick?: boolean;
|
|
202
|
+
}
|
|
203
|
+
declare const Modal: React.FC<ModalProps>;
|
|
204
|
+
interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
205
|
+
onClose?: () => void;
|
|
206
|
+
}
|
|
207
|
+
declare const ModalHeader: React.FC<ModalHeaderProps>;
|
|
208
|
+
declare const ModalTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>>;
|
|
209
|
+
declare const ModalDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
210
|
+
declare const ModalBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
211
|
+
declare const ModalFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
212
|
+
|
|
213
|
+
declare const drawerVariants: (props?: ({
|
|
214
|
+
side?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
215
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
216
|
+
interface DrawerProps extends VariantProps<typeof drawerVariants> {
|
|
217
|
+
open: boolean;
|
|
218
|
+
onClose: () => void;
|
|
219
|
+
children: React.ReactNode;
|
|
220
|
+
className?: string;
|
|
221
|
+
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
222
|
+
closeOnOverlayClick?: boolean;
|
|
223
|
+
}
|
|
224
|
+
declare const Drawer: React.FC<DrawerProps>;
|
|
225
|
+
interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
226
|
+
onClose?: () => void;
|
|
227
|
+
}
|
|
228
|
+
declare const DrawerHeader: React.FC<DrawerHeaderProps>;
|
|
229
|
+
declare const DrawerTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>>;
|
|
230
|
+
declare const DrawerDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
231
|
+
declare const DrawerBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
232
|
+
declare const DrawerFooter: React.FC<React.HTMLAttributes<HTMLDivElement>>;
|
|
233
|
+
|
|
234
|
+
type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
235
|
+
interface TooltipProps {
|
|
236
|
+
content: React.ReactNode;
|
|
237
|
+
children: React.ReactNode;
|
|
238
|
+
side?: TooltipSide;
|
|
239
|
+
delay?: number;
|
|
240
|
+
className?: string;
|
|
241
|
+
}
|
|
242
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
243
|
+
|
|
244
|
+
type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
|
|
245
|
+
type PopoverAlign = 'start' | 'center' | 'end';
|
|
246
|
+
type PopoverControls = {
|
|
247
|
+
close: () => void;
|
|
248
|
+
open: () => void;
|
|
249
|
+
setOpen: (open: boolean) => void;
|
|
250
|
+
};
|
|
251
|
+
type PopoverContent = React.ReactNode | ((controls: PopoverControls) => React.ReactNode);
|
|
252
|
+
interface PopoverProps {
|
|
253
|
+
content: PopoverContent;
|
|
254
|
+
children: React.ReactNode;
|
|
255
|
+
side?: PopoverSide;
|
|
256
|
+
align?: PopoverAlign;
|
|
257
|
+
open?: boolean;
|
|
258
|
+
defaultOpen?: boolean;
|
|
259
|
+
onOpenChange?: (open: boolean) => void;
|
|
260
|
+
className?: string;
|
|
261
|
+
closeOnOutsideClick?: boolean;
|
|
262
|
+
}
|
|
263
|
+
declare const Popover: React.FC<PopoverProps>;
|
|
264
|
+
|
|
265
|
+
export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Drawer, DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, Input, type InputProps, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Popover, type PopoverProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tooltip, type TooltipProps, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, radius, selectVariants, separatorVariants, spinnerVariants };
|