@ataraui/ataraui-react 0.4.0 → 0.6.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 +291 -105
- package/dist/index.d.mts +142 -1
- package/dist/index.d.ts +142 -1
- package/dist/index.js +693 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +662 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,6 +44,14 @@ 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
|
|
@@ -79,6 +87,30 @@ import {
|
|
|
79
87
|
DrawerFooter,
|
|
80
88
|
Tooltip,
|
|
81
89
|
Popover,
|
|
90
|
+
ToastProvider,
|
|
91
|
+
Toaster,
|
|
92
|
+
useToast,
|
|
93
|
+
Alert,
|
|
94
|
+
AlertTitle,
|
|
95
|
+
AlertDescription,
|
|
96
|
+
Progress,
|
|
97
|
+
Skeleton,
|
|
98
|
+
Tabs,
|
|
99
|
+
TabsList,
|
|
100
|
+
TabsTrigger,
|
|
101
|
+
TabsContent,
|
|
102
|
+
Accordion,
|
|
103
|
+
AccordionItem,
|
|
104
|
+
AccordionTrigger,
|
|
105
|
+
AccordionContent,
|
|
106
|
+
Table,
|
|
107
|
+
TableHeader,
|
|
108
|
+
TableBody,
|
|
109
|
+
TableFooter,
|
|
110
|
+
TableRow,
|
|
111
|
+
TableHead,
|
|
112
|
+
TableCell,
|
|
113
|
+
TableCaption,
|
|
82
114
|
} from '@ataraui/ataraui-react'
|
|
83
115
|
|
|
84
116
|
export default function Page() {
|
|
@@ -86,100 +118,152 @@ export default function Page() {
|
|
|
86
118
|
const [drawerOpen, setDrawerOpen] = React.useState(false)
|
|
87
119
|
|
|
88
120
|
return (
|
|
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
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
{
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
{
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<
|
|
144
|
-
<
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
<
|
|
157
|
-
<
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
<
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
121
|
+
<ToastProvider>
|
|
122
|
+
<div>
|
|
123
|
+
<Badge variant="default">New</Badge>
|
|
124
|
+
|
|
125
|
+
<Input label="Email" placeholder="you@example.com" hint="We will never spam you." />
|
|
126
|
+
|
|
127
|
+
<Button variant="primary" size="md">Ship it</Button>
|
|
128
|
+
<Button variant="outline" isLoading>Loading...</Button>
|
|
129
|
+
|
|
130
|
+
<Card variant="elevated">
|
|
131
|
+
<CardHeader>
|
|
132
|
+
<CardTitle>Card Title</CardTitle>
|
|
133
|
+
<CardDescription>Card description here.</CardDescription>
|
|
134
|
+
</CardHeader>
|
|
135
|
+
<CardContent>Content goes here.</CardContent>
|
|
136
|
+
<CardFooter>
|
|
137
|
+
<Button variant="primary" size="sm">Confirm</Button>
|
|
138
|
+
<Button variant="ghost" size="sm">Cancel</Button>
|
|
139
|
+
</CardFooter>
|
|
140
|
+
</Card>
|
|
141
|
+
|
|
142
|
+
<Avatar src="https://github.com/ryo.png" alt="Ryo" size="md" />
|
|
143
|
+
<Avatar fallback="Ryo Kurniawan" size="md" />
|
|
144
|
+
|
|
145
|
+
<Separator />
|
|
146
|
+
<Separator label="OR" />
|
|
147
|
+
|
|
148
|
+
<Spinner size="md" />
|
|
149
|
+
<Spinner size="md" label="Loading data..." />
|
|
150
|
+
|
|
151
|
+
<Select
|
|
152
|
+
label="Country"
|
|
153
|
+
placeholder="Select a country..."
|
|
154
|
+
options={[
|
|
155
|
+
{ value: 'id', label: 'Indonesia' },
|
|
156
|
+
{ value: 'sg', label: 'Singapore' },
|
|
157
|
+
]}
|
|
158
|
+
/>
|
|
159
|
+
|
|
160
|
+
<Checkbox label="Accept terms" />
|
|
161
|
+
<Checkbox label="Remember me" description="Stay logged in for 30 days." />
|
|
162
|
+
|
|
163
|
+
<RadioGroup
|
|
164
|
+
name="plan"
|
|
165
|
+
label="Billing Plan"
|
|
166
|
+
options={[
|
|
167
|
+
{ value: 'monthly', label: 'Monthly' },
|
|
168
|
+
{ value: 'yearly', label: 'Yearly' },
|
|
169
|
+
]}
|
|
170
|
+
/>
|
|
171
|
+
|
|
172
|
+
<Switch label="Notifications" description="Receive email notifications." />
|
|
173
|
+
|
|
174
|
+
<Button onClick={() => setModalOpen(true)}>Open modal</Button>
|
|
175
|
+
<Modal open={modalOpen} onClose={() => setModalOpen(false)}>
|
|
176
|
+
<ModalHeader onClose={() => setModalOpen(false)}>
|
|
177
|
+
<ModalTitle>Confirm action</ModalTitle>
|
|
178
|
+
<ModalDescription>This action can be reviewed before continuing.</ModalDescription>
|
|
179
|
+
</ModalHeader>
|
|
180
|
+
<ModalBody>Use modals for focused workflows.</ModalBody>
|
|
181
|
+
<ModalFooter>
|
|
182
|
+
<Button variant="ghost" onClick={() => setModalOpen(false)}>Cancel</Button>
|
|
183
|
+
<Button onClick={() => setModalOpen(false)}>Continue</Button>
|
|
184
|
+
</ModalFooter>
|
|
185
|
+
</Modal>
|
|
186
|
+
|
|
187
|
+
<Button variant="outline" onClick={() => setDrawerOpen(true)}>Open drawer</Button>
|
|
188
|
+
<Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} side="right">
|
|
189
|
+
<DrawerHeader onClose={() => setDrawerOpen(false)}>
|
|
190
|
+
<DrawerTitle>Settings</DrawerTitle>
|
|
191
|
+
<DrawerDescription>Manage preferences without leaving the page.</DrawerDescription>
|
|
192
|
+
</DrawerHeader>
|
|
193
|
+
<DrawerBody>Drawer content goes here.</DrawerBody>
|
|
194
|
+
<DrawerFooter>
|
|
195
|
+
<Button onClick={() => setDrawerOpen(false)}>Save</Button>
|
|
196
|
+
</DrawerFooter>
|
|
197
|
+
</Drawer>
|
|
198
|
+
|
|
199
|
+
<Tooltip content="Helpful context" side="top">
|
|
200
|
+
<Button variant="outline">Hover me</Button>
|
|
201
|
+
</Tooltip>
|
|
202
|
+
|
|
203
|
+
<Popover
|
|
204
|
+
side="bottom"
|
|
205
|
+
align="start"
|
|
206
|
+
content={({ close }) => (
|
|
207
|
+
<div className="flex w-56 flex-col gap-3">
|
|
208
|
+
<p className="font-medium">Account settings</p>
|
|
209
|
+
<Button size="sm" onClick={close}>Done</Button>
|
|
210
|
+
</div>
|
|
211
|
+
)}
|
|
212
|
+
>
|
|
213
|
+
<Button variant="outline">Open popover</Button>
|
|
214
|
+
</Popover>
|
|
215
|
+
|
|
216
|
+
<Alert variant="success" onClose={() => {}}>
|
|
217
|
+
<AlertTitle>Success!</AlertTitle>
|
|
218
|
+
<AlertDescription>Your changes have been saved.</AlertDescription>
|
|
219
|
+
</Alert>
|
|
220
|
+
|
|
221
|
+
<Progress value={75} size="md" label="Uploading..." showLabel />
|
|
222
|
+
|
|
223
|
+
<Skeleton variant="circle" width={40} height={40} />
|
|
224
|
+
<Skeleton variant="text" width="60%" />
|
|
225
|
+
<Skeleton variant="rect" height={120} />
|
|
226
|
+
|
|
227
|
+
<Tabs defaultValue="account">
|
|
228
|
+
<TabsList>
|
|
229
|
+
<TabsTrigger value="account">Account</TabsTrigger>
|
|
230
|
+
<TabsTrigger value="password">Password</TabsTrigger>
|
|
231
|
+
</TabsList>
|
|
232
|
+
<TabsContent value="account">Account content here.</TabsContent>
|
|
233
|
+
<TabsContent value="password">Password content here.</TabsContent>
|
|
234
|
+
</Tabs>
|
|
235
|
+
|
|
236
|
+
<Accordion type="single" defaultValue="item-1">
|
|
237
|
+
<AccordionItem value="item-1">
|
|
238
|
+
<AccordionTrigger>What is AtaraUI?</AccordionTrigger>
|
|
239
|
+
<AccordionContent>A calm, composable component library.</AccordionContent>
|
|
240
|
+
</AccordionItem>
|
|
241
|
+
<AccordionItem value="item-2">
|
|
242
|
+
<AccordionTrigger>Is it free?</AccordionTrigger>
|
|
243
|
+
<AccordionContent>Yes, MIT licensed.</AccordionContent>
|
|
244
|
+
</AccordionItem>
|
|
245
|
+
</Accordion>
|
|
246
|
+
|
|
247
|
+
<Table>
|
|
248
|
+
<TableHeader>
|
|
249
|
+
<TableRow>
|
|
250
|
+
<TableHead>Name</TableHead>
|
|
251
|
+
<TableHead>Email</TableHead>
|
|
252
|
+
<TableHead>Role</TableHead>
|
|
253
|
+
</TableRow>
|
|
254
|
+
</TableHeader>
|
|
255
|
+
<TableBody>
|
|
256
|
+
<TableRow>
|
|
257
|
+
<TableCell>Ryo Kurniawan</TableCell>
|
|
258
|
+
<TableCell>ryo@example.com</TableCell>
|
|
259
|
+
<TableCell>Admin</TableCell>
|
|
260
|
+
</TableRow>
|
|
261
|
+
</TableBody>
|
|
262
|
+
<TableCaption>A list of your team members.</TableCaption>
|
|
263
|
+
</Table>
|
|
264
|
+
</div>
|
|
265
|
+
<Toaster position="bottom-right" />
|
|
266
|
+
</ToastProvider>
|
|
183
267
|
)
|
|
184
268
|
}
|
|
185
269
|
```
|
|
@@ -203,6 +287,13 @@ export default function Page() {
|
|
|
203
287
|
| `Drawer` | `left` `right` `top` `bottom` | ✅ Ready |
|
|
204
288
|
| `Tooltip` | `top` `bottom` `left` `right` | ✅ Ready |
|
|
205
289
|
| `Popover` | `top` `bottom` `left` `right` · `start` `center` `end` | ✅ Ready |
|
|
290
|
+
| `Alert` | `default` `success` `warning` `destructive` | ✅ Ready |
|
|
291
|
+
| `Progress` | `sm` `md` `lg` | ✅ Ready |
|
|
292
|
+
| `Skeleton` | `text` `circle` `rect` | ✅ Ready |
|
|
293
|
+
| `ToastProvider` + `Toaster` | `default` `success` `warning` `destructive` | ✅ Ready |
|
|
294
|
+
| `Tabs` | `default` `outline` `pills` | ✅ Ready |
|
|
295
|
+
| `Accordion` | `default` `ghost` `outlined` | ✅ Ready |
|
|
296
|
+
| `Table` | `default` `striped` `bordered` | ✅ Ready |
|
|
206
297
|
|
|
207
298
|
## Button Props
|
|
208
299
|
|
|
@@ -337,6 +428,109 @@ export default function Page() {
|
|
|
337
428
|
| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |
|
|
338
429
|
| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside the popover |
|
|
339
430
|
|
|
431
|
+
## Alert Props
|
|
432
|
+
|
|
433
|
+
| Prop | Type | Default | Description |
|
|
434
|
+
|------|------|---------|-------------|
|
|
435
|
+
| `variant` | `default` \| `success` \| `warning` \| `destructive` | `default` | Visual style |
|
|
436
|
+
| `icon` | `ReactNode` | — | Icon displayed on the left |
|
|
437
|
+
| `onClose` | `() => void` | — | Show dismiss button and handle close |
|
|
438
|
+
|
|
439
|
+
## Progress Props
|
|
440
|
+
|
|
441
|
+
| Prop | Type | Default | Description |
|
|
442
|
+
|------|------|---------|-------------|
|
|
443
|
+
| `value` | `number` | — | Value between 0–100. Omit for indeterminate |
|
|
444
|
+
| `size` | `sm` \| `md` \| `lg` | `md` | Bar height |
|
|
445
|
+
| `label` | `string` | — | Text label above the bar |
|
|
446
|
+
| `showLabel` | `boolean` | `false` | Show percentage value on the right |
|
|
447
|
+
|
|
448
|
+
## Skeleton Props
|
|
449
|
+
|
|
450
|
+
| Prop | Type | Default | Description |
|
|
451
|
+
|------|------|---------|-------------|
|
|
452
|
+
| `variant` | `text` \| `circle` \| `rect` | `rect` | Shape of the skeleton |
|
|
453
|
+
| `width` | `string` \| `number` | — | Width (number → px, string → as-is) |
|
|
454
|
+
| `height` | `string` \| `number` | — | Height (number → px, string → as-is) |
|
|
455
|
+
|
|
456
|
+
## Toast
|
|
457
|
+
|
|
458
|
+
Wrap your app once with `ToastProvider` and place `Toaster` inside it:
|
|
459
|
+
|
|
460
|
+
```tsx
|
|
461
|
+
// layout.tsx or _app.tsx
|
|
462
|
+
import { ToastProvider, Toaster } from '@ataraui/ataraui-react'
|
|
463
|
+
|
|
464
|
+
export default function Layout({ children }) {
|
|
465
|
+
return (
|
|
466
|
+
<ToastProvider>
|
|
467
|
+
{children}
|
|
468
|
+
<Toaster position="bottom-right" />
|
|
469
|
+
</ToastProvider>
|
|
470
|
+
)
|
|
471
|
+
}
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
Then use the `useToast` hook anywhere inside the tree:
|
|
475
|
+
|
|
476
|
+
```tsx
|
|
477
|
+
import { useToast } from '@ataraui/ataraui-react'
|
|
478
|
+
|
|
479
|
+
const { toast, dismiss, dismissAll } = useToast()
|
|
480
|
+
|
|
481
|
+
toast({ title: 'Saved!', description: 'Your changes were saved.', variant: 'success' })
|
|
482
|
+
```
|
|
483
|
+
|
|
484
|
+
## Toaster Props
|
|
485
|
+
|
|
486
|
+
| Prop | Type | Default | Description |
|
|
487
|
+
|------|------|---------|-------------|
|
|
488
|
+
| `position` | `top-left` \| `top-center` \| `top-right` \| `bottom-left` \| `bottom-center` \| `bottom-right` | `bottom-right` | Toast position on screen |
|
|
489
|
+
| `defaultDuration` | `number` | `4000` | Auto-dismiss duration in ms. Pass `0` to disable |
|
|
490
|
+
|
|
491
|
+
## Toast Options (`useToast`)
|
|
492
|
+
|
|
493
|
+
| Option | Type | Description |
|
|
494
|
+
|--------|------|-------------|
|
|
495
|
+
| `title` | `string` | Main toast message |
|
|
496
|
+
| `description` | `string` | Supporting text below the title |
|
|
497
|
+
| `variant` | `default` \| `success` \| `warning` \| `destructive` | Visual style |
|
|
498
|
+
| `duration` | `number` | Override `defaultDuration` for this toast |
|
|
499
|
+
| `icon` | `ReactNode` | Icon on the left |
|
|
500
|
+
| `action` | `{ label: string, onClick: () => void }` | Action button inside the toast |
|
|
501
|
+
|
|
502
|
+
## Tabs Props
|
|
503
|
+
|
|
504
|
+
| Prop | Type | Default | Description |
|
|
505
|
+
|------|------|---------|-------------|
|
|
506
|
+
| `variant` | `default` \| `outline` \| `pills` | `default` | Visual style |
|
|
507
|
+
| `value` | `string` | — | Controlled active tab |
|
|
508
|
+
| `defaultValue` | `string` | — | Initial active tab (uncontrolled) |
|
|
509
|
+
| `onChange` | `(value: string) => void` | — | Called when active tab changes |
|
|
510
|
+
|
|
511
|
+
## Accordion Props
|
|
512
|
+
|
|
513
|
+
| Prop | Type | Default | Description |
|
|
514
|
+
|------|------|---------|-------------|
|
|
515
|
+
| `type` | `single` \| `multiple` | `single` | Allow one or multiple items open at once |
|
|
516
|
+
| `variant` | `default` \| `ghost` \| `outlined` | `default` | Visual style |
|
|
517
|
+
| `value` | `string` \| `string[]` | — | Controlled open item(s) |
|
|
518
|
+
| `defaultValue` | `string` \| `string[]` | — | Initial open item(s) (uncontrolled) |
|
|
519
|
+
| `onChange` | `(value: string \| string[]) => void` | — | Called when open state changes |
|
|
520
|
+
|
|
521
|
+
## AccordionItem Props
|
|
522
|
+
|
|
523
|
+
| Prop | Type | Default | Description |
|
|
524
|
+
|------|------|---------|-------------|
|
|
525
|
+
| `value` | `string` | — | Unique identifier for this item (required) |
|
|
526
|
+
| `disabled` | `boolean` | `false` | Disable this item |
|
|
527
|
+
|
|
528
|
+
## Table Props
|
|
529
|
+
|
|
530
|
+
| Prop | Type | Default | Description |
|
|
531
|
+
|------|------|---------|-------------|
|
|
532
|
+
| `variant` | `default` \| `striped` \| `bordered` | `default` | Visual style |
|
|
533
|
+
|
|
340
534
|
## Development
|
|
341
535
|
|
|
342
536
|
```bash
|
|
@@ -354,14 +548,6 @@ npm run build
|
|
|
354
548
|
npm run dev
|
|
355
549
|
```
|
|
356
550
|
|
|
357
|
-
## Publishing
|
|
358
|
-
|
|
359
|
-
```bash
|
|
360
|
-
# Bump version in package.json, then:
|
|
361
|
-
npm run build
|
|
362
|
-
npm publish
|
|
363
|
-
```
|
|
364
|
-
|
|
365
551
|
## Roadmap
|
|
366
552
|
|
|
367
553
|
| Version | Components | Category |
|
|
@@ -370,8 +556,8 @@ npm publish
|
|
|
370
556
|
| **v0.2.0** ✅ | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
|
|
371
557
|
| **v0.3.0** ✅ | `Select` `Checkbox` `Radio` `Switch` | Form components |
|
|
372
558
|
| **v0.4.0** ✅ | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
373
|
-
| **v0.5.0** | `Toast
|
|
374
|
-
| **v0.6.0** | `Table` `Tabs` `Accordion` | Data display |
|
|
559
|
+
| **v0.5.0** ✅ | `Toast` `Alert` `Progress` `Skeleton` | Feedback components |
|
|
560
|
+
| **v0.6.0** ✅ | `Table` `Tabs` `Accordion` | Data display |
|
|
375
561
|
| **v0.7.0** | Dark mode · Storybook docs | DX improvements |
|
|
376
562
|
| **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |
|
|
377
563
|
| **v0.9.0** | `DatePicker` `Combobox` `FileUpload` | Advanced inputs |
|
|
@@ -383,4 +569,4 @@ Contributions are welcome! Feel free to open an issue or submit a pull request.
|
|
|
383
569
|
|
|
384
570
|
## License
|
|
385
571
|
|
|
386
|
-
MIT © [AtaraUI](https://github.com/AtaraUI)
|
|
572
|
+
MIT © [AtaraUI](https://github.com/AtaraUI)
|
package/dist/index.d.mts
CHANGED
|
@@ -262,4 +262,145 @@ interface PopoverProps {
|
|
|
262
262
|
}
|
|
263
263
|
declare const Popover: React.FC<PopoverProps>;
|
|
264
264
|
|
|
265
|
-
|
|
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
|
+
declare const tabsListVariants: (props?: ({
|
|
332
|
+
variant?: "outline" | "default" | "pills" | null | undefined;
|
|
333
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
334
|
+
declare const tabsTriggerVariants: (props?: ({
|
|
335
|
+
variant?: "outline" | "default" | "pills" | null | undefined;
|
|
336
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
337
|
+
interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, VariantProps<typeof tabsListVariants> {
|
|
338
|
+
value?: string;
|
|
339
|
+
defaultValue?: string;
|
|
340
|
+
onChange?: (value: string) => void;
|
|
341
|
+
}
|
|
342
|
+
interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
343
|
+
}
|
|
344
|
+
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
345
|
+
value: string;
|
|
346
|
+
}
|
|
347
|
+
interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
348
|
+
value: string;
|
|
349
|
+
}
|
|
350
|
+
declare const Tabs: React.FC<TabsProps>;
|
|
351
|
+
declare const TabsList: React.FC<TabsListProps>;
|
|
352
|
+
declare const TabsTrigger: React.FC<TabsTriggerProps>;
|
|
353
|
+
declare const TabsContent: React.FC<TabsContentProps>;
|
|
354
|
+
|
|
355
|
+
declare const accordionVariants: (props?: ({
|
|
356
|
+
variant?: "ghost" | "default" | "outlined" | null | undefined;
|
|
357
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
358
|
+
type AccordionType = 'single' | 'multiple';
|
|
359
|
+
interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, VariantProps<typeof accordionVariants> {
|
|
360
|
+
type?: AccordionType;
|
|
361
|
+
value?: string | string[];
|
|
362
|
+
defaultValue?: string | string[];
|
|
363
|
+
onChange?: (value: string | string[]) => void;
|
|
364
|
+
}
|
|
365
|
+
interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
366
|
+
value: string;
|
|
367
|
+
disabled?: boolean;
|
|
368
|
+
}
|
|
369
|
+
interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
370
|
+
}
|
|
371
|
+
interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
372
|
+
}
|
|
373
|
+
declare const Accordion: React.FC<AccordionProps>;
|
|
374
|
+
declare const AccordionItem: React.FC<AccordionItemProps>;
|
|
375
|
+
declare const AccordionTrigger: React.FC<AccordionTriggerProps>;
|
|
376
|
+
declare const AccordionContent: React.FC<AccordionContentProps>;
|
|
377
|
+
|
|
378
|
+
declare const tableVariants: (props?: ({
|
|
379
|
+
variant?: "default" | "striped" | "bordered" | null | undefined;
|
|
380
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
381
|
+
interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
|
|
382
|
+
}
|
|
383
|
+
interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
384
|
+
}
|
|
385
|
+
interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
386
|
+
}
|
|
387
|
+
interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
388
|
+
}
|
|
389
|
+
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
390
|
+
}
|
|
391
|
+
interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
392
|
+
}
|
|
393
|
+
interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
394
|
+
}
|
|
395
|
+
interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
|
|
396
|
+
}
|
|
397
|
+
declare const Table: React.FC<TableProps>;
|
|
398
|
+
declare const TableHeader: React.FC<TableHeaderProps>;
|
|
399
|
+
declare const TableBody: React.FC<TableBodyProps>;
|
|
400
|
+
declare const TableFooter: React.FC<TableFooterProps>;
|
|
401
|
+
declare const TableRow: React.FC<TableRowProps>;
|
|
402
|
+
declare const TableHead: React.FC<TableHeadProps>;
|
|
403
|
+
declare const TableCell: React.FC<TableCellProps>;
|
|
404
|
+
declare const TableCaption: React.FC<TableCaptionProps>;
|
|
405
|
+
|
|
406
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, 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, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type ToastInput, type ToastItem, type ToastPosition, ToastProvider, type ToastVariant, Toaster, type ToasterProps, Tooltip, type TooltipProps, accordionVariants, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, drawerVariants, fontSize, inputVariants, modalVariants, progressVariants, radius, selectVariants, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, tabsListVariants, tabsTriggerVariants, toastVariants, useToast };
|