@zentauri-ui/zentauri-components 0.0.7 → 0.0.81

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 (4) hide show
  1. package/README.md +128 -0
  2. package/dist/ui/index.d.cts +14 -14
  3. package/dist/ui/index.d.ts +14 -14
  4. package/package.json +2 -4
package/README.md ADDED
@@ -0,0 +1,128 @@
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
+
17
+ ## Requirements
18
+
19
+ - **React** and **React DOM** `>= 18` (peer dependencies)
20
+ - A Tailwind pipeline that can **scan** this package (see Step 2 below)
21
+
22
+ ## Components
23
+
24
+ Modules re-exported from the UI entry include:
25
+
26
+ - Accordion
27
+ - Alert
28
+ - Badge
29
+ - Button
30
+ - Card
31
+ - Divider
32
+ - Drawer
33
+ - Dropdown
34
+ - Empty state
35
+ - Input
36
+ - Modal
37
+ - Pagination
38
+ - Progress
39
+ - Select
40
+ - Skeleton
41
+ - Spinner
42
+ - Table
43
+ - Tabs
44
+ - Toast
45
+ - Toggle
46
+ - Tooltip
47
+
48
+ ## Installation
49
+
50
+ **Getting started** — Add the package, point Tailwind at the library sources, then import components from the UI entry.
51
+
52
+ ### Step 1 — Install the package
53
+
54
+ Choose your package manager.
55
+
56
+ ```bash
57
+ npm install @zentauri-ui/zentauri-components
58
+ ```
59
+
60
+ ```bash
61
+ pnpm install @zentauri-ui/zentauri-components
62
+ ```
63
+
64
+ ```bash
65
+ yarn add @zentauri-ui/zentauri-components
66
+ ```
67
+
68
+ ### Step 2 — Include library paths in globals.css
69
+
70
+ 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.
71
+
72
+ ```css
73
+ @import "tailwindcss";
74
+ @source "../node_modules/@zentauri-ui/zentauri-components";
75
+ ```
76
+
77
+ ### Step 3 — Import and use components
78
+
79
+ Import from the UI barrel, then compose primitives in your JSX.
80
+
81
+ #### Imports
82
+
83
+ ```tsx
84
+ import {
85
+ Accordion,
86
+ AccordionContent,
87
+ AccordionItem,
88
+ AccordionTrigger,
89
+ } from "@zentauri-ui/zentauri-components/ui";
90
+ ```
91
+
92
+ #### Usage
93
+
94
+ ```tsx
95
+ <div className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-slate-950/40 backdrop-blur-xl">
96
+ <Accordion type="single" defaultValue="item-1" appearance="separated" size="md">
97
+ <AccordionItem value="item-1">
98
+ <AccordionTrigger>Shipping</AccordionTrigger>
99
+ <AccordionContent>
100
+ <p className="text-sm text-slate-300">
101
+ Standard delivery in 3-5 business days. Express options at
102
+ checkout.
103
+ </p>
104
+ </AccordionContent>
105
+ </AccordionItem>
106
+ <AccordionItem value="item-2">
107
+ <AccordionTrigger>Returns</AccordionTrigger>
108
+ <AccordionContent>
109
+ <p className="text-sm text-slate-300">
110
+ Free returns within 30 days of delivery in original condition.
111
+ </p>
112
+ </AccordionContent>
113
+ </AccordionItem>
114
+ </Accordion>
115
+ </div>
116
+ ```
117
+
118
+ ## Development
119
+
120
+ From this package directory in the monorepo:
121
+
122
+ - `pnpm build` (or `npm run build`) — production bundle via `tsup`
123
+ - `pnpm dev` — `tsup` watch mode
124
+ - `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests
125
+
126
+ ## License
127
+
128
+ 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" | "success" | "warning" | "error" | "info" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "elevated" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "black" | "white" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "black" | "white" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "muted" | "subtle" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "muted" | "subtle" | null | undefined;
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" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
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" | "success" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
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" | "success" | "warning" | "error" | "info" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "elevated" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "amber" | "muted" | "primary" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "black" | "white" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "black" | "white" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "amber" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "muted" | "subtle" | null | undefined;
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" | "gray" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "amber" | "muted" | "subtle" | null | undefined;
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" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
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" | "success" | "gray" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "destructive" | "cyan" | "green" | "lime" | "neutral" | "slate" | "zinc" | "stone" | null | undefined;
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/package.json CHANGED
@@ -1,12 +1,11 @@
1
1
  {
2
2
  "name": "@zentauri-ui/zentauri-components",
3
3
  "type": "module",
4
- "version": "0.0.7",
4
+ "version": "0.0.81",
5
5
  "description": "A UI component library built with React and Tailwind CSS",
6
6
  "license": "MIT",
7
7
  "files": ["dist"],
8
8
  "main": "./dist/ui/index.js",
9
- "sideEffects": ["**/*.css"],
10
9
  "publishConfig": {
11
10
  "access": "public"
12
11
  },
@@ -15,8 +14,7 @@
15
14
  "types": "./dist/ui/index.d.ts",
16
15
  "import": "./dist/ui/index.js",
17
16
  "require": "./dist/ui/index.cjs"
18
- },
19
- "./styles.css": "./dist/ui/index.css"
17
+ }
20
18
  },
21
19
  "scripts": {
22
20
  "dev": "tsup --watch",