@ataraui/ataraui-react 0.3.0 → 0.5.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 +273 -56
- package/dist/index.d.mts +139 -1
- package/dist/index.d.ts +139 -1
- package/dist/index.js +852 -18
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +825 -19
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,14 +44,28 @@ Add the source and theme tokens to your `globals.css`:
|
|
|
44
44
|
}
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
+
> For the indeterminate `Progress` animation, also add this to your `globals.css`:
|
|
48
|
+
> ```css
|
|
49
|
+
> @keyframes indeterminate {
|
|
50
|
+
> 0% { transform: translateX(-100%); }
|
|
51
|
+
> 100% { transform: translateX(400%); }
|
|
52
|
+
> }
|
|
53
|
+
> ```
|
|
54
|
+
|
|
47
55
|
## Usage
|
|
48
56
|
|
|
49
57
|
```tsx
|
|
58
|
+
import React from 'react'
|
|
50
59
|
import {
|
|
51
60
|
Button,
|
|
52
61
|
Input,
|
|
53
62
|
Badge,
|
|
54
|
-
Card,
|
|
63
|
+
Card,
|
|
64
|
+
CardHeader,
|
|
65
|
+
CardTitle,
|
|
66
|
+
CardDescription,
|
|
67
|
+
CardContent,
|
|
68
|
+
CardFooter,
|
|
55
69
|
Avatar,
|
|
56
70
|
Separator,
|
|
57
71
|
Spinner,
|
|
@@ -59,62 +73,143 @@ import {
|
|
|
59
73
|
Checkbox,
|
|
60
74
|
RadioGroup,
|
|
61
75
|
Switch,
|
|
76
|
+
Modal,
|
|
77
|
+
ModalHeader,
|
|
78
|
+
ModalTitle,
|
|
79
|
+
ModalDescription,
|
|
80
|
+
ModalBody,
|
|
81
|
+
ModalFooter,
|
|
82
|
+
Drawer,
|
|
83
|
+
DrawerHeader,
|
|
84
|
+
DrawerTitle,
|
|
85
|
+
DrawerDescription,
|
|
86
|
+
DrawerBody,
|
|
87
|
+
DrawerFooter,
|
|
88
|
+
Tooltip,
|
|
89
|
+
Popover,
|
|
90
|
+
ToastProvider,
|
|
91
|
+
Toaster,
|
|
92
|
+
useToast,
|
|
93
|
+
Alert,
|
|
94
|
+
AlertTitle,
|
|
95
|
+
AlertDescription,
|
|
96
|
+
Progress,
|
|
97
|
+
Skeleton,
|
|
62
98
|
} from '@ataraui/ataraui-react'
|
|
63
99
|
|
|
64
100
|
export default function Page() {
|
|
101
|
+
const [modalOpen, setModalOpen] = React.useState(false)
|
|
102
|
+
const [drawerOpen, setDrawerOpen] = React.useState(false)
|
|
103
|
+
|
|
65
104
|
return (
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
{
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
105
|
+
<ToastProvider>
|
|
106
|
+
<div>
|
|
107
|
+
<Badge variant="default">New</Badge>
|
|
108
|
+
|
|
109
|
+
<Input label="Email" placeholder="you@example.com" hint="We will never spam you." />
|
|
110
|
+
|
|
111
|
+
<Button variant="primary" size="md">Ship it</Button>
|
|
112
|
+
<Button variant="outline" isLoading>Loading...</Button>
|
|
113
|
+
|
|
114
|
+
<Card variant="elevated">
|
|
115
|
+
<CardHeader>
|
|
116
|
+
<CardTitle>Card Title</CardTitle>
|
|
117
|
+
<CardDescription>Card description here.</CardDescription>
|
|
118
|
+
</CardHeader>
|
|
119
|
+
<CardContent>Content goes here.</CardContent>
|
|
120
|
+
<CardFooter>
|
|
121
|
+
<Button variant="primary" size="sm">Confirm</Button>
|
|
122
|
+
<Button variant="ghost" size="sm">Cancel</Button>
|
|
123
|
+
</CardFooter>
|
|
124
|
+
</Card>
|
|
125
|
+
|
|
126
|
+
<Avatar src="https://github.com/ryo.png" alt="Ryo" size="md" />
|
|
127
|
+
<Avatar fallback="Ryo Kurniawan" size="md" />
|
|
128
|
+
|
|
129
|
+
<Separator />
|
|
130
|
+
<Separator label="OR" />
|
|
131
|
+
|
|
132
|
+
<Spinner size="md" />
|
|
133
|
+
<Spinner size="md" label="Loading data..." />
|
|
134
|
+
|
|
135
|
+
<Select
|
|
136
|
+
label="Country"
|
|
137
|
+
placeholder="Select a country..."
|
|
138
|
+
options={[
|
|
139
|
+
{ value: 'id', label: 'Indonesia' },
|
|
140
|
+
{ value: 'sg', label: 'Singapore' },
|
|
141
|
+
]}
|
|
142
|
+
/>
|
|
143
|
+
|
|
144
|
+
<Checkbox label="Accept terms" />
|
|
145
|
+
<Checkbox label="Remember me" description="Stay logged in for 30 days." />
|
|
146
|
+
|
|
147
|
+
<RadioGroup
|
|
148
|
+
name="plan"
|
|
149
|
+
label="Billing Plan"
|
|
150
|
+
options={[
|
|
151
|
+
{ value: 'monthly', label: 'Monthly' },
|
|
152
|
+
{ value: 'yearly', label: 'Yearly' },
|
|
153
|
+
]}
|
|
154
|
+
/>
|
|
155
|
+
|
|
156
|
+
<Switch label="Notifications" description="Receive email notifications." />
|
|
157
|
+
|
|
158
|
+
<Button onClick={() => setModalOpen(true)}>Open modal</Button>
|
|
159
|
+
<Modal open={modalOpen} onClose={() => setModalOpen(false)}>
|
|
160
|
+
<ModalHeader onClose={() => setModalOpen(false)}>
|
|
161
|
+
<ModalTitle>Confirm action</ModalTitle>
|
|
162
|
+
<ModalDescription>This action can be reviewed before continuing.</ModalDescription>
|
|
163
|
+
</ModalHeader>
|
|
164
|
+
<ModalBody>Use modals for focused workflows.</ModalBody>
|
|
165
|
+
<ModalFooter>
|
|
166
|
+
<Button variant="ghost" onClick={() => setModalOpen(false)}>Cancel</Button>
|
|
167
|
+
<Button onClick={() => setModalOpen(false)}>Continue</Button>
|
|
168
|
+
</ModalFooter>
|
|
169
|
+
</Modal>
|
|
170
|
+
|
|
171
|
+
<Button variant="outline" onClick={() => setDrawerOpen(true)}>Open drawer</Button>
|
|
172
|
+
<Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} side="right">
|
|
173
|
+
<DrawerHeader onClose={() => setDrawerOpen(false)}>
|
|
174
|
+
<DrawerTitle>Settings</DrawerTitle>
|
|
175
|
+
<DrawerDescription>Manage preferences without leaving the page.</DrawerDescription>
|
|
176
|
+
</DrawerHeader>
|
|
177
|
+
<DrawerBody>Drawer content goes here.</DrawerBody>
|
|
178
|
+
<DrawerFooter>
|
|
179
|
+
<Button onClick={() => setDrawerOpen(false)}>Save</Button>
|
|
180
|
+
</DrawerFooter>
|
|
181
|
+
</Drawer>
|
|
182
|
+
|
|
183
|
+
<Tooltip content="Helpful context" side="top">
|
|
184
|
+
<Button variant="outline">Hover me</Button>
|
|
185
|
+
</Tooltip>
|
|
186
|
+
|
|
187
|
+
<Popover
|
|
188
|
+
side="bottom"
|
|
189
|
+
align="start"
|
|
190
|
+
content={({ close }) => (
|
|
191
|
+
<div className="flex w-56 flex-col gap-3">
|
|
192
|
+
<p className="font-medium">Account settings</p>
|
|
193
|
+
<Button size="sm" onClick={close}>Done</Button>
|
|
194
|
+
</div>
|
|
195
|
+
)}
|
|
196
|
+
>
|
|
197
|
+
<Button variant="outline">Open popover</Button>
|
|
198
|
+
</Popover>
|
|
199
|
+
|
|
200
|
+
<Alert variant="success" onClose={() => {}}>
|
|
201
|
+
<AlertTitle>Success!</AlertTitle>
|
|
202
|
+
<AlertDescription>Your changes have been saved.</AlertDescription>
|
|
203
|
+
</Alert>
|
|
204
|
+
|
|
205
|
+
<Progress value={75} size="md" label="Uploading..." showLabel />
|
|
206
|
+
|
|
207
|
+
<Skeleton variant="circle" width={40} height={40} />
|
|
208
|
+
<Skeleton variant="text" width="60%" />
|
|
209
|
+
<Skeleton variant="rect" height={120} />
|
|
210
|
+
</div>
|
|
211
|
+
<Toaster position="bottom-right" />
|
|
212
|
+
</ToastProvider>
|
|
118
213
|
)
|
|
119
214
|
}
|
|
120
215
|
```
|
|
@@ -134,6 +229,14 @@ export default function Page() {
|
|
|
134
229
|
| `Checkbox` | — | ✅ Ready |
|
|
135
230
|
| `RadioGroup` | `vertical` `horizontal` | ✅ Ready |
|
|
136
231
|
| `Switch` | — | ✅ Ready |
|
|
232
|
+
| `Modal` | `sm` `md` `lg` `xl` `full` | ✅ Ready |
|
|
233
|
+
| `Drawer` | `left` `right` `top` `bottom` | ✅ Ready |
|
|
234
|
+
| `Tooltip` | `top` `bottom` `left` `right` | ✅ Ready |
|
|
235
|
+
| `Popover` | `top` `bottom` `left` `right` · `start` `center` `end` | ✅ Ready |
|
|
236
|
+
| `Alert` | `default` `success` `warning` `destructive` | ✅ Ready |
|
|
237
|
+
| `Progress` | `sm` `md` `lg` | ✅ Ready |
|
|
238
|
+
| `Skeleton` | `text` `circle` `rect` | ✅ Ready |
|
|
239
|
+
| `ToastProvider` + `Toaster` | `default` `success` `warning` `destructive` | ✅ Ready |
|
|
137
240
|
|
|
138
241
|
## Button Props
|
|
139
242
|
|
|
@@ -225,6 +328,120 @@ export default function Page() {
|
|
|
225
328
|
| `defaultChecked` | `boolean` | Default checked state (uncontrolled) |
|
|
226
329
|
| `onChange` | `ChangeEventHandler` | Change handler |
|
|
227
330
|
|
|
331
|
+
## Modal Props
|
|
332
|
+
|
|
333
|
+
| Prop | Type | Default | Description |
|
|
334
|
+
|------|------|---------|-------------|
|
|
335
|
+
| `open` | `boolean` | — | Controls whether the modal is visible |
|
|
336
|
+
| `onClose` | `() => void` | — | Called when the modal should close |
|
|
337
|
+
| `children` | `ReactNode` | — | Modal content |
|
|
338
|
+
| `size` | `sm` \| `md` \| `lg` \| `xl` \| `full` | `md` | Modal width |
|
|
339
|
+
| `closeOnOverlayClick` | `boolean` | `true` | Close when the overlay is clicked |
|
|
340
|
+
|
|
341
|
+
## Drawer Props
|
|
342
|
+
|
|
343
|
+
| Prop | Type | Default | Description |
|
|
344
|
+
|------|------|---------|-------------|
|
|
345
|
+
| `open` | `boolean` | — | Controls whether the drawer is visible |
|
|
346
|
+
| `onClose` | `() => void` | — | Called when the drawer should close |
|
|
347
|
+
| `children` | `ReactNode` | — | Drawer content |
|
|
348
|
+
| `side` | `left` \| `right` \| `top` \| `bottom` | `right` | Drawer placement |
|
|
349
|
+
| `size` | `sm` \| `md` \| `lg` \| `full` | `md` | Drawer width for left/right placements |
|
|
350
|
+
| `closeOnOverlayClick` | `boolean` | `true` | Close when the overlay is clicked |
|
|
351
|
+
|
|
352
|
+
## Tooltip Props
|
|
353
|
+
|
|
354
|
+
| Prop | Type | Default | Description |
|
|
355
|
+
|------|------|---------|-------------|
|
|
356
|
+
| `content` | `ReactNode` | — | Tooltip content |
|
|
357
|
+
| `children` | `ReactNode` | — | Tooltip trigger |
|
|
358
|
+
| `side` | `top` \| `bottom` \| `left` \| `right` | `top` | Tooltip placement |
|
|
359
|
+
| `delay` | `number` | `300` | Delay before showing the tooltip, in milliseconds |
|
|
360
|
+
|
|
361
|
+
## Popover Props
|
|
362
|
+
|
|
363
|
+
| Prop | Type | Default | Description |
|
|
364
|
+
|------|------|---------|-------------|
|
|
365
|
+
| `content` | `ReactNode` \| `(controls) => ReactNode` | — | Popover content, optionally with `close`, `open`, and `setOpen` controls |
|
|
366
|
+
| `children` | `ReactNode` | — | Popover trigger |
|
|
367
|
+
| `side` | `top` \| `bottom` \| `left` \| `right` | `bottom` | Popover placement |
|
|
368
|
+
| `align` | `start` \| `center` \| `end` | `center` | Popover alignment relative to the trigger |
|
|
369
|
+
| `open` | `boolean` | — | Controlled open state |
|
|
370
|
+
| `defaultOpen` | `boolean` | `false` | Initial open state for uncontrolled usage |
|
|
371
|
+
| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |
|
|
372
|
+
| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside the popover |
|
|
373
|
+
|
|
374
|
+
## Alert Props
|
|
375
|
+
|
|
376
|
+
| Prop | Type | Default | Description |
|
|
377
|
+
|------|------|---------|-------------|
|
|
378
|
+
| `variant` | `default` \| `success` \| `warning` \| `destructive` | `default` | Visual style |
|
|
379
|
+
| `icon` | `ReactNode` | — | Icon displayed on the left |
|
|
380
|
+
| `onClose` | `() => void` | — | Show dismiss button and handle close |
|
|
381
|
+
|
|
382
|
+
## Progress Props
|
|
383
|
+
|
|
384
|
+
| Prop | Type | Default | Description |
|
|
385
|
+
|------|------|---------|-------------|
|
|
386
|
+
| `value` | `number` | — | Value between 0–100. Omit for indeterminate |
|
|
387
|
+
| `size` | `sm` \| `md` \| `lg` | `md` | Bar height |
|
|
388
|
+
| `label` | `string` | — | Text label above the bar |
|
|
389
|
+
| `showLabel` | `boolean` | `false` | Show percentage value on the right |
|
|
390
|
+
|
|
391
|
+
## Skeleton Props
|
|
392
|
+
|
|
393
|
+
| Prop | Type | Default | Description |
|
|
394
|
+
|------|------|---------|-------------|
|
|
395
|
+
| `variant` | `text` \| `circle` \| `rect` | `rect` | Shape of the skeleton |
|
|
396
|
+
| `width` | `string` \| `number` | — | Width (number → px, string → as-is) |
|
|
397
|
+
| `height` | `string` \| `number` | — | Height (number → px, string → as-is) |
|
|
398
|
+
|
|
399
|
+
## Toast
|
|
400
|
+
|
|
401
|
+
Wrap your app once with `ToastProvider` and place `Toaster` inside it:
|
|
402
|
+
|
|
403
|
+
```tsx
|
|
404
|
+
// layout.tsx or _app.tsx
|
|
405
|
+
import { ToastProvider, Toaster } from '@ataraui/ataraui-react'
|
|
406
|
+
|
|
407
|
+
export default function Layout({ children }) {
|
|
408
|
+
return (
|
|
409
|
+
<ToastProvider>
|
|
410
|
+
{children}
|
|
411
|
+
<Toaster position="bottom-right" />
|
|
412
|
+
</ToastProvider>
|
|
413
|
+
)
|
|
414
|
+
}
|
|
415
|
+
```
|
|
416
|
+
|
|
417
|
+
Then use the `useToast` hook anywhere inside the tree:
|
|
418
|
+
|
|
419
|
+
```tsx
|
|
420
|
+
import { useToast } from '@ataraui/ataraui-react'
|
|
421
|
+
|
|
422
|
+
const { toast, dismiss, dismissAll } = useToast()
|
|
423
|
+
|
|
424
|
+
toast({ title: 'Saved!', description: 'Your changes were saved.', variant: 'success' })
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
## Toaster Props
|
|
428
|
+
|
|
429
|
+
| Prop | Type | Default | Description |
|
|
430
|
+
|------|------|---------|-------------|
|
|
431
|
+
| `position` | `top-left` \| `top-center` \| `top-right` \| `bottom-left` \| `bottom-center` \| `bottom-right` | `bottom-right` | Toast position on screen |
|
|
432
|
+
| `defaultDuration` | `number` | `4000` | Auto-dismiss duration in ms. Pass `0` to disable |
|
|
433
|
+
|
|
434
|
+
## Toast Options (`useToast`)
|
|
435
|
+
|
|
436
|
+
| Option | Type | Description |
|
|
437
|
+
|--------|------|-------------|
|
|
438
|
+
| `title` | `string` | Main toast message |
|
|
439
|
+
| `description` | `string` | Supporting text below the title |
|
|
440
|
+
| `variant` | `default` \| `success` \| `warning` \| `destructive` | Visual style |
|
|
441
|
+
| `duration` | `number` | Override `defaultDuration` for this toast |
|
|
442
|
+
| `icon` | `ReactNode` | Icon on the left |
|
|
443
|
+
| `action` | `{ label: string, onClick: () => void }` | Action button inside the toast |
|
|
444
|
+
|
|
228
445
|
## Development
|
|
229
446
|
|
|
230
447
|
```bash
|
|
@@ -257,8 +474,8 @@ npm publish
|
|
|
257
474
|
| **v0.1.0** ✅ | `Button` `Input` `Badge` | Core + Tailwind v4 |
|
|
258
475
|
| **v0.2.0** ✅ | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
|
|
259
476
|
| **v0.3.0** ✅ | `Select` `Checkbox` `Radio` `Switch` | Form components |
|
|
260
|
-
| **v0.4.0** | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
261
|
-
| **v0.5.0** | `Toast
|
|
477
|
+
| **v0.4.0** ✅ | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
478
|
+
| **v0.5.0** ✅ | `Toast` `Alert` `Progress` `Skeleton` | Feedback components |
|
|
262
479
|
| **v0.6.0** | `Table` `Tabs` `Accordion` | Data display |
|
|
263
480
|
| **v0.7.0** | Dark mode · Storybook docs | DX improvements |
|
|
264
481
|
| **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |
|
|
@@ -271,4 +488,4 @@ Contributions are welcome! Feel free to open an issue or submit a pull request.
|
|
|
271
488
|
|
|
272
489
|
## License
|
|
273
490
|
|
|
274
|
-
MIT © [
|
|
491
|
+
MIT © [AtaraUI](https://github.com/AtaraUI)
|
package/dist/index.d.mts
CHANGED
|
@@ -190,4 +190,142 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
190
190
|
}
|
|
191
191
|
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
192
192
|
|
|
193
|
-
|
|
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
|
+
type ToastVariant = 'default' | 'success' | 'warning' | 'destructive';
|
|
266
|
+
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
267
|
+
interface ToastItem {
|
|
268
|
+
id: string;
|
|
269
|
+
title?: string;
|
|
270
|
+
description?: string;
|
|
271
|
+
variant?: ToastVariant;
|
|
272
|
+
duration?: number;
|
|
273
|
+
icon?: React.ReactNode;
|
|
274
|
+
action?: {
|
|
275
|
+
label: string;
|
|
276
|
+
onClick: () => void;
|
|
277
|
+
};
|
|
278
|
+
}
|
|
279
|
+
type ToastInput = Omit<ToastItem, 'id'>;
|
|
280
|
+
interface ToastContextValue {
|
|
281
|
+
toasts: ToastItem[];
|
|
282
|
+
toast: (input: ToastInput) => string;
|
|
283
|
+
dismiss: (id: string) => void;
|
|
284
|
+
dismissAll: () => void;
|
|
285
|
+
}
|
|
286
|
+
declare const ToastProvider: React.FC<{
|
|
287
|
+
children: React.ReactNode;
|
|
288
|
+
}>;
|
|
289
|
+
declare const useToast: () => ToastContextValue;
|
|
290
|
+
declare const toastVariants: (props?: ({
|
|
291
|
+
variant?: "destructive" | "default" | "success" | "warning" | null | undefined;
|
|
292
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
293
|
+
interface ToasterProps {
|
|
294
|
+
position?: ToastPosition;
|
|
295
|
+
defaultDuration?: number;
|
|
296
|
+
className?: string;
|
|
297
|
+
}
|
|
298
|
+
declare const Toaster: React.FC<ToasterProps>;
|
|
299
|
+
|
|
300
|
+
declare const alertVariants: (props?: ({
|
|
301
|
+
variant?: "destructive" | "default" | "success" | "warning" | null | undefined;
|
|
302
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
303
|
+
interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
304
|
+
icon?: React.ReactNode;
|
|
305
|
+
onClose?: () => void;
|
|
306
|
+
}
|
|
307
|
+
declare const Alert: React.FC<AlertProps>;
|
|
308
|
+
declare const AlertTitle: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
309
|
+
declare const AlertDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
310
|
+
|
|
311
|
+
declare const progressVariants: (props?: ({
|
|
312
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
313
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
314
|
+
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressVariants> {
|
|
315
|
+
/** Value between 0–100. Omit for indeterminate. */
|
|
316
|
+
value?: number;
|
|
317
|
+
label?: string;
|
|
318
|
+
showLabel?: boolean;
|
|
319
|
+
}
|
|
320
|
+
declare const Progress: React.FC<ProgressProps>;
|
|
321
|
+
|
|
322
|
+
declare const skeletonVariants: (props?: ({
|
|
323
|
+
variant?: "text" | "circle" | "rect" | null | undefined;
|
|
324
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
325
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
326
|
+
width?: string | number;
|
|
327
|
+
height?: string | number;
|
|
328
|
+
}
|
|
329
|
+
declare const Skeleton: React.FC<SkeletonProps>;
|
|
330
|
+
|
|
331
|
+
export { Alert, AlertDescription, type AlertProps, AlertTitle, 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, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, type ToastInput, type ToastItem, type ToastPosition, ToastProvider, type ToastVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, progressVariants, radius, selectVariants, separatorVariants, skeletonVariants, spinnerVariants, toastVariants, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -190,4 +190,142 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
190
190
|
}
|
|
191
191
|
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
192
192
|
|
|
193
|
-
|
|
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
|
+
type ToastVariant = 'default' | 'success' | 'warning' | 'destructive';
|
|
266
|
+
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
267
|
+
interface ToastItem {
|
|
268
|
+
id: string;
|
|
269
|
+
title?: string;
|
|
270
|
+
description?: string;
|
|
271
|
+
variant?: ToastVariant;
|
|
272
|
+
duration?: number;
|
|
273
|
+
icon?: React.ReactNode;
|
|
274
|
+
action?: {
|
|
275
|
+
label: string;
|
|
276
|
+
onClick: () => void;
|
|
277
|
+
};
|
|
278
|
+
}
|
|
279
|
+
type ToastInput = Omit<ToastItem, 'id'>;
|
|
280
|
+
interface ToastContextValue {
|
|
281
|
+
toasts: ToastItem[];
|
|
282
|
+
toast: (input: ToastInput) => string;
|
|
283
|
+
dismiss: (id: string) => void;
|
|
284
|
+
dismissAll: () => void;
|
|
285
|
+
}
|
|
286
|
+
declare const ToastProvider: React.FC<{
|
|
287
|
+
children: React.ReactNode;
|
|
288
|
+
}>;
|
|
289
|
+
declare const useToast: () => ToastContextValue;
|
|
290
|
+
declare const toastVariants: (props?: ({
|
|
291
|
+
variant?: "destructive" | "default" | "success" | "warning" | null | undefined;
|
|
292
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
293
|
+
interface ToasterProps {
|
|
294
|
+
position?: ToastPosition;
|
|
295
|
+
defaultDuration?: number;
|
|
296
|
+
className?: string;
|
|
297
|
+
}
|
|
298
|
+
declare const Toaster: React.FC<ToasterProps>;
|
|
299
|
+
|
|
300
|
+
declare const alertVariants: (props?: ({
|
|
301
|
+
variant?: "destructive" | "default" | "success" | "warning" | null | undefined;
|
|
302
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
303
|
+
interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
304
|
+
icon?: React.ReactNode;
|
|
305
|
+
onClose?: () => void;
|
|
306
|
+
}
|
|
307
|
+
declare const Alert: React.FC<AlertProps>;
|
|
308
|
+
declare const AlertTitle: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
309
|
+
declare const AlertDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
|
|
310
|
+
|
|
311
|
+
declare const progressVariants: (props?: ({
|
|
312
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
313
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
314
|
+
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressVariants> {
|
|
315
|
+
/** Value between 0–100. Omit for indeterminate. */
|
|
316
|
+
value?: number;
|
|
317
|
+
label?: string;
|
|
318
|
+
showLabel?: boolean;
|
|
319
|
+
}
|
|
320
|
+
declare const Progress: React.FC<ProgressProps>;
|
|
321
|
+
|
|
322
|
+
declare const skeletonVariants: (props?: ({
|
|
323
|
+
variant?: "text" | "circle" | "rect" | null | undefined;
|
|
324
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
325
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
326
|
+
width?: string | number;
|
|
327
|
+
height?: string | number;
|
|
328
|
+
}
|
|
329
|
+
declare const Skeleton: React.FC<SkeletonProps>;
|
|
330
|
+
|
|
331
|
+
export { Alert, AlertDescription, type AlertProps, AlertTitle, 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, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, type ToastInput, type ToastItem, type ToastPosition, ToastProvider, type ToastVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, progressVariants, radius, selectVariants, separatorVariants, skeletonVariants, spinnerVariants, toastVariants, useToast };
|