@zentauri-ui/zentauri-components 0.0.7 → 0.0.8
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 +109 -0
- package/dist/ui/index.d.cts +14 -14
- package/dist/ui/index.d.ts +14 -14
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# @zentauri-ui/zentauri-components
|
|
2
|
+
|
|
3
|
+
A React UI kit for building product interfaces with Tailwind CSS. Components are implemented in TypeScript, ship with declaration files, and are bundled as ESM and CommonJS for broad bundler compatibility.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The library targets **React 18+** apps that use **Tailwind CSS v4** (or an equivalent setup where Tailwind can scan this package via `@source`). Styling uses utility classes; **class-variance-authority** powers variant APIs (size, appearance, and similar props), with **clsx** and **tailwind-merge** for predictable `className` composition. **Framer Motion** backs motion where components animate, and **react-icons** is used for iconography where applicable.
|
|
8
|
+
|
|
9
|
+
Published artifacts live under `dist/`; consumers import the UI barrel at `@zentauri-ui/zentauri-components/ui`. A compiled stylesheet is also exposed at `@zentauri-ui/zentauri-components/styles.css` for setups that import CSS explicitly (many apps rely on Tailwind scanning alone—see installation).
|
|
10
|
+
|
|
11
|
+
## Package exports
|
|
12
|
+
|
|
13
|
+
| Subpath | Description |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| `@zentauri-ui/zentauri-components/ui` | Components, hooks, and types (ESM `.js`, CJS `.cjs`, `.d.ts`) |
|
|
16
|
+
| `@zentauri-ui/zentauri-components/styles.css` | Compiled CSS emitted by the build |
|
|
17
|
+
|
|
18
|
+
## Requirements
|
|
19
|
+
|
|
20
|
+
- **React** and **React DOM** `>= 18` (peer dependencies)
|
|
21
|
+
- A Tailwind pipeline that can **scan** this package (see Step 2 below)
|
|
22
|
+
|
|
23
|
+
## Components
|
|
24
|
+
|
|
25
|
+
Modules re-exported from the UI entry include:
|
|
26
|
+
|
|
27
|
+
Accordion, Alert, Badge, Button, Card, Divider, Drawer, Dropdown, Empty state, Input, Modal, Pagination, Progress, Select, Skeleton, Spinner, Table, Tabs, Toast, Toggle, Tooltip.
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
|
|
31
|
+
**Getting started** — Add the package, point Tailwind at the library sources, then import components from the UI entry.
|
|
32
|
+
|
|
33
|
+
### Step 1 — Install the package
|
|
34
|
+
|
|
35
|
+
Choose your package manager.
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @zentauri-ui/zentauri-components
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
pnpm install @zentauri-ui/zentauri-components
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
yarn add @zentauri-ui/zentauri-components
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Step 2 — Include library paths in globals.css
|
|
50
|
+
|
|
51
|
+
Add an `@source` entry so Tailwind scans class names inside `@zentauri-ui/zentauri-components`. The path is relative to this CSS file—adjust `../` if your file lives elsewhere.
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
@import "tailwindcss";
|
|
55
|
+
@source "../node_modules/@zentauri-ui/zentauri-components";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Step 3 — Import and use components
|
|
59
|
+
|
|
60
|
+
Import from the UI barrel, then compose primitives in your JSX.
|
|
61
|
+
|
|
62
|
+
#### Imports
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import {
|
|
66
|
+
Accordion,
|
|
67
|
+
AccordionContent,
|
|
68
|
+
AccordionItem,
|
|
69
|
+
AccordionTrigger,
|
|
70
|
+
} from "@zentauri-ui/zentauri-components/ui";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### Usage
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
<div className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-slate-950/40 backdrop-blur-xl">
|
|
77
|
+
<Accordion type="single" defaultValue="item-1" appearance="separated" size="md">
|
|
78
|
+
<AccordionItem value="item-1">
|
|
79
|
+
<AccordionTrigger>Shipping</AccordionTrigger>
|
|
80
|
+
<AccordionContent>
|
|
81
|
+
<p className="text-sm text-slate-300">
|
|
82
|
+
Standard delivery in 3-5 business days. Express options at
|
|
83
|
+
checkout.
|
|
84
|
+
</p>
|
|
85
|
+
</AccordionContent>
|
|
86
|
+
</AccordionItem>
|
|
87
|
+
<AccordionItem value="item-2">
|
|
88
|
+
<AccordionTrigger>Returns</AccordionTrigger>
|
|
89
|
+
<AccordionContent>
|
|
90
|
+
<p className="text-sm text-slate-300">
|
|
91
|
+
Free returns within 30 days of delivery in original condition.
|
|
92
|
+
</p>
|
|
93
|
+
</AccordionContent>
|
|
94
|
+
</AccordionItem>
|
|
95
|
+
</Accordion>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Development
|
|
100
|
+
|
|
101
|
+
From this package directory in the monorepo:
|
|
102
|
+
|
|
103
|
+
- `pnpm build` (or `npm run build`) — production bundle via `tsup`
|
|
104
|
+
- `pnpm dev` — `tsup` watch mode
|
|
105
|
+
- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests
|
|
106
|
+
|
|
107
|
+
## License
|
|
108
|
+
|
|
109
|
+
MIT
|
package/dist/ui/index.d.cts
CHANGED
|
@@ -70,7 +70,7 @@ declare namespace AccordionContent {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
declare const alertVariants: (props?: ({
|
|
73
|
-
appearance?: "default" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "
|
|
73
|
+
appearance?: "default" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "warning" | "error" | "info" | "gray" | "violet" | null | undefined;
|
|
74
74
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
75
75
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
76
76
|
declare const alertTitleVariants: (props?: ({
|
|
@@ -184,7 +184,7 @@ declare const Button: {
|
|
|
184
184
|
declare const buttonAnimationPresets: AnimationPresets;
|
|
185
185
|
|
|
186
186
|
declare const cardVariants: (props?: ({
|
|
187
|
-
appearance?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
187
|
+
appearance?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | "elevated" | null | undefined;
|
|
188
188
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
189
189
|
rounded?: "sm" | "md" | "lg" | "full" | null | undefined;
|
|
190
190
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -254,10 +254,10 @@ type CardAnimationPresets = Record<CardAnimation, CardPresetMotionProps>;
|
|
|
254
254
|
declare const cardAnimationPresets: CardAnimationPresets;
|
|
255
255
|
|
|
256
256
|
declare const dividerToneVariants: (props?: ({
|
|
257
|
-
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
257
|
+
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
|
|
258
258
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
259
259
|
declare const dividerVariants: (props?: ({
|
|
260
|
-
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
260
|
+
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
|
|
261
261
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
262
262
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
263
263
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -292,12 +292,12 @@ declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") =>
|
|
|
292
292
|
|
|
293
293
|
declare const drawerOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
294
294
|
declare const drawerTriggerVariants: (props?: ({
|
|
295
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
295
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
296
296
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
297
297
|
declare const drawerContentVariants: (props?: ({
|
|
298
298
|
side?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
299
299
|
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
300
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
300
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
301
301
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
302
302
|
|
|
303
303
|
type DrawerContentVariantProps = VariantProps<typeof drawerContentVariants>;
|
|
@@ -392,7 +392,7 @@ declare const DropdownContent: ({ children, className, placement, spacing, divid
|
|
|
392
392
|
declare const DropdownItem: ({ children, value, className, variant, onSelect, leftIcon, rightIcon, ...props }: DropdownItemProps) => react_jsx_runtime.JSX.Element;
|
|
393
393
|
|
|
394
394
|
declare const triggerVariants: (props?: ({
|
|
395
|
-
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
395
|
+
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "black" | "white" | null | undefined;
|
|
396
396
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
397
397
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
398
398
|
declare const contentVariants: (props?: ({
|
|
@@ -400,7 +400,7 @@ declare const contentVariants: (props?: ({
|
|
|
400
400
|
spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
401
401
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
402
402
|
declare const itemVariants: (props?: ({
|
|
403
|
-
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
403
|
+
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "black" | "white" | null | undefined;
|
|
404
404
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
405
405
|
|
|
406
406
|
declare const emptyStateVariants: (props?: ({
|
|
@@ -482,12 +482,12 @@ declare const Input: {
|
|
|
482
482
|
|
|
483
483
|
declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
484
484
|
declare const modalTriggerVariants: (props?: ({
|
|
485
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
485
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
486
486
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
487
487
|
declare const modalContentVariants: (props?: ({
|
|
488
488
|
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
489
489
|
position?: "bottom" | "top" | "center" | null | undefined;
|
|
490
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
490
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
491
491
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
492
492
|
|
|
493
493
|
type ModalAnimation = "none" | "fade" | "scale" | "slide-up" | "slide-down";
|
|
@@ -810,11 +810,11 @@ declare const skeletonShimmerGradientClasses: {
|
|
|
810
810
|
};
|
|
811
811
|
type SkeletonShimmerTone = keyof typeof skeletonShimmerGradientClasses;
|
|
812
812
|
declare const skeletonVariants: (props?: ({
|
|
813
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
813
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "muted" | "subtle" | null | undefined;
|
|
814
814
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
815
815
|
rounded?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
|
|
816
816
|
animation?: "none" | "shimmer" | "pulse" | null | undefined;
|
|
817
|
-
shimmerTone?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
817
|
+
shimmerTone?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "muted" | "subtle" | null | undefined;
|
|
818
818
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
819
819
|
declare const skeletonTextLineVariants: (props?: ({
|
|
820
820
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -1007,7 +1007,7 @@ declare const tabsListVariants: (props?: ({
|
|
|
1007
1007
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
1008
1008
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1009
1009
|
declare const tabsTriggerVariants: (props?: ({
|
|
1010
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
1010
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | null | undefined;
|
|
1011
1011
|
variant?: "default" | "underline" | "pills" | null | undefined;
|
|
1012
1012
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1013
1013
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -1097,7 +1097,7 @@ declare const toggleThumbAnimationPresets: ToggleAnimationPresets;
|
|
|
1097
1097
|
|
|
1098
1098
|
declare const toggleTrackVariants: (props?: ({
|
|
1099
1099
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1100
|
-
appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
1100
|
+
appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "gray" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
|
|
1101
1101
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1102
1102
|
declare const toggleThumbVariants: (props?: ({
|
|
1103
1103
|
size?: "sm" | "md" | "lg" | null | undefined;
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -70,7 +70,7 @@ declare namespace AccordionContent {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
declare const alertVariants: (props?: ({
|
|
73
|
-
appearance?: "default" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "
|
|
73
|
+
appearance?: "default" | "ghost" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "warning" | "error" | "info" | "gray" | "violet" | null | undefined;
|
|
74
74
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
75
75
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
76
76
|
declare const alertTitleVariants: (props?: ({
|
|
@@ -184,7 +184,7 @@ declare const Button: {
|
|
|
184
184
|
declare const buttonAnimationPresets: AnimationPresets;
|
|
185
185
|
|
|
186
186
|
declare const cardVariants: (props?: ({
|
|
187
|
-
appearance?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
187
|
+
appearance?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | "elevated" | null | undefined;
|
|
188
188
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
189
189
|
rounded?: "sm" | "md" | "lg" | "full" | null | undefined;
|
|
190
190
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -254,10 +254,10 @@ type CardAnimationPresets = Record<CardAnimation, CardPresetMotionProps>;
|
|
|
254
254
|
declare const cardAnimationPresets: CardAnimationPresets;
|
|
255
255
|
|
|
256
256
|
declare const dividerToneVariants: (props?: ({
|
|
257
|
-
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
257
|
+
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
|
|
258
258
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
259
259
|
declare const dividerVariants: (props?: ({
|
|
260
|
-
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
260
|
+
appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
|
|
261
261
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
262
262
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
263
263
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -292,12 +292,12 @@ declare const drawerPanelPresets: (side: "left" | "right" | "top" | "bottom") =>
|
|
|
292
292
|
|
|
293
293
|
declare const drawerOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
294
294
|
declare const drawerTriggerVariants: (props?: ({
|
|
295
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
295
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
296
296
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
297
297
|
declare const drawerContentVariants: (props?: ({
|
|
298
298
|
side?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
299
299
|
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
300
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
300
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
301
301
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
302
302
|
|
|
303
303
|
type DrawerContentVariantProps = VariantProps<typeof drawerContentVariants>;
|
|
@@ -392,7 +392,7 @@ declare const DropdownContent: ({ children, className, placement, spacing, divid
|
|
|
392
392
|
declare const DropdownItem: ({ children, value, className, variant, onSelect, leftIcon, rightIcon, ...props }: DropdownItemProps) => react_jsx_runtime.JSX.Element;
|
|
393
393
|
|
|
394
394
|
declare const triggerVariants: (props?: ({
|
|
395
|
-
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
395
|
+
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "black" | "white" | null | undefined;
|
|
396
396
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
397
397
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
398
398
|
declare const contentVariants: (props?: ({
|
|
@@ -400,7 +400,7 @@ declare const contentVariants: (props?: ({
|
|
|
400
400
|
spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
401
401
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
402
402
|
declare const itemVariants: (props?: ({
|
|
403
|
-
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
403
|
+
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "black" | "white" | null | undefined;
|
|
404
404
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
405
405
|
|
|
406
406
|
declare const emptyStateVariants: (props?: ({
|
|
@@ -482,12 +482,12 @@ declare const Input: {
|
|
|
482
482
|
|
|
483
483
|
declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
484
484
|
declare const modalTriggerVariants: (props?: ({
|
|
485
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
485
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
486
486
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
487
487
|
declare const modalContentVariants: (props?: ({
|
|
488
488
|
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
489
489
|
position?: "bottom" | "top" | "center" | null | undefined;
|
|
490
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
490
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "glass" | "amber" | null | undefined;
|
|
491
491
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
492
492
|
|
|
493
493
|
type ModalAnimation = "none" | "fade" | "scale" | "slide-up" | "slide-down";
|
|
@@ -810,11 +810,11 @@ declare const skeletonShimmerGradientClasses: {
|
|
|
810
810
|
};
|
|
811
811
|
type SkeletonShimmerTone = keyof typeof skeletonShimmerGradientClasses;
|
|
812
812
|
declare const skeletonVariants: (props?: ({
|
|
813
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
813
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "muted" | "subtle" | null | undefined;
|
|
814
814
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
815
815
|
rounded?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
|
|
816
816
|
animation?: "none" | "shimmer" | "pulse" | null | undefined;
|
|
817
|
-
shimmerTone?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
817
|
+
shimmerTone?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | "violet" | "amber" | "muted" | "subtle" | null | undefined;
|
|
818
818
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
819
819
|
declare const skeletonTextLineVariants: (props?: ({
|
|
820
820
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -1007,7 +1007,7 @@ declare const tabsListVariants: (props?: ({
|
|
|
1007
1007
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
1008
1008
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1009
1009
|
declare const tabsTriggerVariants: (props?: ({
|
|
1010
|
-
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
1010
|
+
appearance?: "default" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "gray" | null | undefined;
|
|
1011
1011
|
variant?: "default" | "underline" | "pills" | null | undefined;
|
|
1012
1012
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1013
1013
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -1097,7 +1097,7 @@ declare const toggleThumbAnimationPresets: ToggleAnimationPresets;
|
|
|
1097
1097
|
|
|
1098
1098
|
declare const toggleTrackVariants: (props?: ({
|
|
1099
1099
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1100
|
-
appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "
|
|
1100
|
+
appearance?: "default" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "gray" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
|
|
1101
1101
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1102
1102
|
declare const toggleThumbVariants: (props?: ({
|
|
1103
1103
|
size?: "sm" | "md" | "lg" | null | undefined;
|