@ataraui/ataraui-react 0.4.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.
Files changed (8) hide show
  1. package/README.md +201 -96
  2. package/dist/index.d.mts +67 -1
  3. package/dist/index.d.ts +67 -1
  4. package/dist/index.js +294 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +283 -1
  7. package/dist/index.mjs.map +1 -1
  8. 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,14 @@ 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,
82
98
  } from '@ataraui/ataraui-react'
83
99
 
84
100
  export default function Page() {
@@ -86,100 +102,114 @@ export default function Page() {
86
102
  const [drawerOpen, setDrawerOpen] = React.useState(false)
87
103
 
88
104
  return (
89
- <div>
90
- <Badge variant="default">New</Badge>
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
- ]}
125
- />
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>
182
- </div>
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>
183
213
  )
184
214
  }
185
215
  ```
@@ -203,6 +233,10 @@ export default function Page() {
203
233
  | `Drawer` | `left` `right` `top` `bottom` | ✅ Ready |
204
234
  | `Tooltip` | `top` `bottom` `left` `right` | ✅ Ready |
205
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 |
206
240
 
207
241
  ## Button Props
208
242
 
@@ -337,6 +371,77 @@ export default function Page() {
337
371
  | `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |
338
372
  | `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside the popover |
339
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
+
340
445
  ## Development
341
446
 
342
447
  ```bash
@@ -370,7 +475,7 @@ npm publish
370
475
  | **v0.2.0** ✅ | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
371
476
  | **v0.3.0** ✅ | `Select` `Checkbox` `Radio` `Switch` | Form components |
372
477
  | **v0.4.0** ✅ | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
373
- | **v0.5.0** | `Toast/Alert` `Progress` `Skeleton` | Feedback components |
478
+ | **v0.5.0** ✅ | `Toast` `Alert` `Progress` `Skeleton` | Feedback components |
374
479
  | **v0.6.0** | `Table` `Tabs` `Accordion` | Data display |
375
480
  | **v0.7.0** | Dark mode · Storybook docs | DX improvements |
376
481
  | **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |
@@ -383,4 +488,4 @@ Contributions are welcome! Feel free to open an issue or submit a pull request.
383
488
 
384
489
  ## License
385
490
 
386
- MIT © [AtaraUI](https://github.com/AtaraUI)
491
+ MIT © [AtaraUI](https://github.com/AtaraUI)
package/dist/index.d.mts CHANGED
@@ -262,4 +262,70 @@ interface PopoverProps {
262
262
  }
263
263
  declare const Popover: React.FC<PopoverProps>;
264
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 };
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
@@ -262,4 +262,70 @@ interface PopoverProps {
262
262
  }
263
263
  declare const Popover: React.FC<PopoverProps>;
264
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 };
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 };