@hex-core/components 1.3.1 → 1.4.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 (186) hide show
  1. package/README.md +183 -9
  2. package/dist/accordion.d.ts +13 -0
  3. package/dist/accordion.js +62 -0
  4. package/dist/accordion.js.map +1 -0
  5. package/dist/alert-dialog.d.ts +34 -0
  6. package/dist/alert-dialog.js +125 -0
  7. package/dist/alert-dialog.js.map +1 -0
  8. package/dist/alert.d.ts +17 -0
  9. package/dist/alert.js +54 -0
  10. package/dist/alert.js.map +1 -0
  11. package/dist/aspect-ratio.d.ts +7 -0
  12. package/dist/aspect-ratio.js +8 -0
  13. package/dist/aspect-ratio.js.map +1 -0
  14. package/dist/avatar.d.ts +11 -0
  15. package/dist/avatar.js +44 -0
  16. package/dist/avatar.js.map +1 -0
  17. package/dist/badge.d.ts +22 -0
  18. package/dist/badge.js +36 -0
  19. package/dist/badge.js.map +1 -0
  20. package/dist/breadcrumb.d.ts +27 -0
  21. package/dist/breadcrumb.js +120 -0
  22. package/dist/breadcrumb.js.map +1 -0
  23. package/dist/button-variants-Bx6gCUFp.d.ts +19 -0
  24. package/dist/button.d.ts +13 -0
  25. package/dist/button.js +113 -0
  26. package/dist/button.js.map +1 -0
  27. package/dist/calendar.d.ts +17 -0
  28. package/dist/calendar.js +126 -0
  29. package/dist/calendar.js.map +1 -0
  30. package/dist/card.d.ts +16 -0
  31. package/dist/card.js +68 -0
  32. package/dist/card.js.map +1 -0
  33. package/dist/checkbox.d.ts +11 -0
  34. package/dist/checkbox.js +65 -0
  35. package/dist/checkbox.js.map +1 -0
  36. package/dist/cluster.d.ts +34 -0
  37. package/dist/cluster.js +50 -0
  38. package/dist/cluster.js.map +1 -0
  39. package/dist/collapsible.d.ts +11 -0
  40. package/dist/collapsible.js +10 -0
  41. package/dist/collapsible.js.map +1 -0
  42. package/dist/color-picker.d.ts +44 -0
  43. package/dist/color-picker.js +321 -0
  44. package/dist/color-picker.js.map +1 -0
  45. package/dist/combobox.d.ts +45 -0
  46. package/dist/combobox.js +226 -0
  47. package/dist/combobox.js.map +1 -0
  48. package/dist/command.d.ts +111 -0
  49. package/dist/command.js +232 -0
  50. package/dist/command.js.map +1 -0
  51. package/dist/container.d.ts +41 -0
  52. package/dist/container.js +39 -0
  53. package/dist/container.js.map +1 -0
  54. package/dist/context-menu.d.ts +37 -0
  55. package/dist/context-menu.js +130 -0
  56. package/dist/context-menu.js.map +1 -0
  57. package/dist/data-table.d.ts +33 -0
  58. package/dist/data-table.js +103 -0
  59. package/dist/data-table.js.map +1 -0
  60. package/dist/date-picker.d.ts +43 -0
  61. package/dist/date-picker.js +221 -0
  62. package/dist/date-picker.js.map +1 -0
  63. package/dist/dialog.d.ts +46 -0
  64. package/dist/dialog.js +125 -0
  65. package/dist/dialog.js.map +1 -0
  66. package/dist/drawer.d.ts +41 -0
  67. package/dist/drawer.js +82 -0
  68. package/dist/drawer.js.map +1 -0
  69. package/dist/dropdown-menu.d.ts +39 -0
  70. package/dist/dropdown-menu.js +133 -0
  71. package/dist/dropdown-menu.js.map +1 -0
  72. package/dist/dropzone.d.ts +54 -0
  73. package/dist/dropzone.js +194 -0
  74. package/dist/dropzone.js.map +1 -0
  75. package/dist/file-tree.d.ts +53 -0
  76. package/dist/file-tree.js +322 -0
  77. package/dist/file-tree.js.map +1 -0
  78. package/dist/form.d.ts +45 -0
  79. package/dist/form.js +114 -0
  80. package/dist/form.js.map +1 -0
  81. package/dist/grid.d.ts +50 -0
  82. package/dist/grid.js +58 -0
  83. package/dist/grid.js.map +1 -0
  84. package/dist/hover-card.d.ts +11 -0
  85. package/dist/hover-card.js +34 -0
  86. package/dist/hover-card.js.map +1 -0
  87. package/dist/index.d.ts +98 -1571
  88. package/dist/index.js +527 -5536
  89. package/dist/index.js.map +1 -1
  90. package/dist/input-otp.d.ts +19 -0
  91. package/dist/input-otp.js +71 -0
  92. package/dist/input-otp.js.map +1 -0
  93. package/dist/input.d.ts +6 -0
  94. package/dist/input.js +40 -0
  95. package/dist/input.js.map +1 -0
  96. package/dist/label.d.ts +11 -0
  97. package/dist/label.js +22 -0
  98. package/dist/label.js.map +1 -0
  99. package/dist/menubar.d.ts +35 -0
  100. package/dist/menubar.js +106 -0
  101. package/dist/menubar.js.map +1 -0
  102. package/dist/multi-combobox.d.ts +51 -0
  103. package/dist/multi-combobox.js +258 -0
  104. package/dist/multi-combobox.js.map +1 -0
  105. package/dist/navigation-menu.d.ts +23 -0
  106. package/dist/navigation-menu.js +108 -0
  107. package/dist/navigation-menu.js.map +1 -0
  108. package/dist/pagination.d.ts +40 -0
  109. package/dist/pagination.js +195 -0
  110. package/dist/pagination.js.map +1 -0
  111. package/dist/popover.d.ts +13 -0
  112. package/dist/popover.js +35 -0
  113. package/dist/popover.js.map +1 -0
  114. package/dist/progress.d.ts +10 -0
  115. package/dist/progress.js +38 -0
  116. package/dist/progress.js.map +1 -0
  117. package/dist/radio-group.d.ts +9 -0
  118. package/dist/radio-group.js +44 -0
  119. package/dist/radio-group.js.map +1 -0
  120. package/dist/resizable.d.ts +28 -0
  121. package/dist/resizable.js +66 -0
  122. package/dist/resizable.js.map +1 -0
  123. package/dist/schemas.d.ts +121 -0
  124. package/dist/schemas.js +4643 -0
  125. package/dist/schemas.js.map +1 -0
  126. package/dist/scroll-area.d.ts +18 -0
  127. package/dist/scroll-area.js +55 -0
  128. package/dist/scroll-area.js.map +1 -0
  129. package/dist/select.d.ts +21 -0
  130. package/dist/select.js +136 -0
  131. package/dist/select.js.map +1 -0
  132. package/dist/separator.d.ts +11 -0
  133. package/dist/separator.js +29 -0
  134. package/dist/separator.js.map +1 -0
  135. package/dist/sheet.d.ts +39 -0
  136. package/dist/sheet.js +140 -0
  137. package/dist/sheet.js.map +1 -0
  138. package/dist/sidebar.d.ts +75 -0
  139. package/dist/sidebar.js +201 -0
  140. package/dist/sidebar.js.map +1 -0
  141. package/dist/skeleton.d.ts +11 -0
  142. package/dist/skeleton.js +21 -0
  143. package/dist/skeleton.js.map +1 -0
  144. package/dist/slider.d.ts +20 -0
  145. package/dist/slider.js +55 -0
  146. package/dist/slider.js.map +1 -0
  147. package/dist/sonner.d.ts +14 -0
  148. package/dist/sonner.js +27 -0
  149. package/dist/sonner.js.map +1 -0
  150. package/dist/spacer.d.ts +38 -0
  151. package/dist/spacer.js +43 -0
  152. package/dist/spacer.js.map +1 -0
  153. package/dist/stack.d.ts +34 -0
  154. package/dist/stack.js +49 -0
  155. package/dist/stack.js.map +1 -0
  156. package/dist/stepper.d.ts +48 -0
  157. package/dist/stepper.js +226 -0
  158. package/dist/stepper.js.map +1 -0
  159. package/dist/switch.d.ts +11 -0
  160. package/dist/switch.js +47 -0
  161. package/dist/switch.js.map +1 -0
  162. package/dist/table.d.ts +24 -0
  163. package/dist/table.js +85 -0
  164. package/dist/table.js.map +1 -0
  165. package/dist/tabs.d.ts +13 -0
  166. package/dist/tabs.js +57 -0
  167. package/dist/tabs.js.map +1 -0
  168. package/dist/textarea.d.ts +10 -0
  169. package/dist/textarea.js +36 -0
  170. package/dist/textarea.js.map +1 -0
  171. package/dist/time-picker.d.ts +34 -0
  172. package/dist/time-picker.js +50 -0
  173. package/dist/time-picker.js.map +1 -0
  174. package/dist/timeline.d.ts +42 -0
  175. package/dist/timeline.js +84 -0
  176. package/dist/timeline.js.map +1 -0
  177. package/dist/toggle-group.d.ts +17 -0
  178. package/dist/toggle-group.js +83 -0
  179. package/dist/toggle-group.js.map +1 -0
  180. package/dist/toggle.d.ts +19 -0
  181. package/dist/toggle.js +49 -0
  182. package/dist/toggle.js.map +1 -0
  183. package/dist/tooltip.d.ts +13 -0
  184. package/dist/tooltip.js +33 -0
  185. package/dist/tooltip.js.map +1 -0
  186. package/package.json +68 -16
package/README.md CHANGED
@@ -29,14 +29,30 @@ pnpm add @hex-core/components
29
29
 
30
30
  Without it, classes like `inset-ring-foreground/[0.06]` (used by Button outline, Input, Card, etc.) appear in the rendered HTML but have no CSS rule, and components render unstyled. Tailwind v4 doesn't auto-scan `node_modules`.
31
31
 
32
+ ## Imports — barrel vs deep (RSC)
33
+
32
34
  ```tsx
33
- import { Button } from "@hex-core/components";
35
+ // Deep import — RSC-safe for visual primitives, tree-shake friendly
36
+ import { Badge } from "@hex-core/components/badge";
37
+ import { Card, CardContent } from "@hex-core/components/card";
38
+ import { Stack } from "@hex-core/components/stack";
34
39
 
35
- export default function Page() {
36
- return <Button>Click me</Button>;
37
- }
40
+ // Barrel import — convenience, but always client-side
41
+ import { Button, Card, Stack } from "@hex-core/components";
38
42
  ```
39
43
 
44
+ Each component file declares its own `"use client"` directive — and only when it needs one. Deep imports of visual primitives (`Badge`, `Card`, `Stack`, …) render directly inside Next.js Server Components without forcing the subtree client-side. Deep imports of stateful components (`Dialog`, `Form`, `Calendar`, …) carry the directive automatically.
45
+
46
+ The barrel re-exports everything together, so it's marked client. Existing barrel imports keep working — but if you want RSC + tree-shake, prefer deep imports.
47
+
48
+ ### RSC-safe components (no `"use client"` needed)
49
+
50
+ `Alert`, `Badge`, `Card`, `Cluster`, `Grid`, `Input`, `Pagination`, `Skeleton`, `Spacer`, `Stack`, `Table`, `Textarea`, `Timeline`.
51
+
52
+ ### Client-only components
53
+
54
+ Everything else — anything backed by Radix portals/triggers, hooks, `react-hook-form`, `cmdk`, `vaul`, `sonner`, `react-day-picker`, `input-otp`, or `react-resizable-panels`. Each of those modules ships with its own `"use client"` so importing it from a Server Component still works (Next.js sees the directive at the import boundary).
55
+
40
56
  ## What's inside
41
57
 
42
58
  47 components across primitives (Button, Input, Checkbox, …) and compounds (Combobox, DataTable, Command, …). Every component ships with:
@@ -47,12 +63,170 @@ export default function Page() {
47
63
  - HSL design tokens — override via CSS vars, no JS config needed
48
64
  - A matching `.schema.ts` with AI hints (`whenToUse`, `whenNotToUse`, `commonMistakes`, `accessibilityNotes`, `tokenBudget`)
49
65
 
50
- ## Peer dependencies
66
+ ## Color utilities
67
+
68
+ Tailwind v4 generates utilities from `@theme {}` automatically. The bundled `tailwind.css` exposes the full semantic palette — use the short class names directly, no `text-[color:var(...)]` workaround required.
69
+
70
+ | Class | Token |
71
+ | --- | --- |
72
+ | `bg-background` / `text-background` | `--color-background` |
73
+ | `bg-foreground` / `text-foreground` | `--color-foreground` |
74
+ | `bg-card` / `text-card-foreground` | `--color-card` / `--color-card-foreground` |
75
+ | `bg-popover` / `text-popover-foreground` | `--color-popover` |
76
+ | `bg-primary` / `text-primary` / `text-primary-foreground` | `--color-primary` |
77
+ | `bg-secondary` / `text-secondary-foreground` | `--color-secondary` |
78
+ | `bg-muted` / `text-muted-foreground` | `--color-muted` |
79
+ | `bg-accent` / `text-accent-foreground` | `--color-accent` |
80
+ | `bg-destructive` / `text-destructive-foreground` | `--color-destructive` |
81
+ | `border-input` / `border-border` / `border-ring` | `--color-input` / `--color-border` / `--color-ring` |
82
+
83
+ Both forms produce identical output:
84
+
85
+ ```tsx
86
+ // Preferred — short and stable
87
+ <p className="text-muted-foreground">Helper</p>
88
+
89
+ // Equivalent — only use this if a class name is dynamically composed
90
+ <p className="text-[color:var(--color-muted-foreground)]">Helper</p>
91
+ ```
92
+
93
+ ## Setup: Toaster
94
+
95
+ ```tsx
96
+ // app/layout.tsx (Server Component is fine — Toaster declares its own "use client")
97
+ import { Toaster } from "@hex-core/components/sonner";
98
+
99
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
100
+ return (
101
+ <html lang="en">
102
+ <body>
103
+ {children}
104
+ <Toaster />
105
+ </body>
106
+ </html>
107
+ );
108
+ }
109
+ ```
110
+
111
+ ```tsx
112
+ // any client component
113
+ "use client";
114
+ import { toast } from "sonner";
115
+
116
+ export function SaveButton() {
117
+ return <button onClick={() => toast.success("Saved!")}>Save</button>;
118
+ }
119
+ ```
120
+
121
+ `sonner` is an optional peer — install it if you use the toaster: `pnpm add sonner`.
122
+
123
+ ## Setup: Form (`react-hook-form` integration)
124
+
125
+ ```tsx
126
+ "use client";
127
+ import { useForm } from "react-hook-form";
128
+ import {
129
+ Form,
130
+ FormField,
131
+ FormItem,
132
+ FormLabel,
133
+ FormControl,
134
+ FormMessage,
135
+ } from "@hex-core/components/form";
136
+ import { Input } from "@hex-core/components/input";
137
+ import { Button } from "@hex-core/components/button";
138
+
139
+ export function ContactForm() {
140
+ const form = useForm<{ email: string }>({ defaultValues: { email: "" } });
141
+ return (
142
+ <Form {...form}>
143
+ <form onSubmit={form.handleSubmit((v) => console.log(v))} className="space-y-4">
144
+ <FormField
145
+ control={form.control}
146
+ name="email"
147
+ render={({ field }) => (
148
+ <FormItem>
149
+ <FormLabel>Email</FormLabel>
150
+ <FormControl>
151
+ <Input type="email" {...field} />
152
+ </FormControl>
153
+ <FormMessage />
154
+ </FormItem>
155
+ )}
156
+ />
157
+ <Button type="submit">Submit</Button>
158
+ </form>
159
+ </Form>
160
+ );
161
+ }
162
+ ```
163
+
164
+ `react-hook-form` is an optional peer — install it if you use `<Form>`: `pnpm add react-hook-form`.
165
+
166
+ ## Layout primitives
167
+
168
+ Don't reach for `<div className="flex …">` — the layout primitives are typed and document their own intent.
169
+
170
+ | Instead of | Use |
171
+ | --- | --- |
172
+ | `<div className="flex flex-col gap-4">` | `<Stack gap="4">` |
173
+ | `<div className="flex items-center gap-2">` | `<Cluster gap="2">` |
174
+ | `<div className="grid grid-cols-3 gap-4">` | `<Grid cols={3} gap="4">` |
175
+ | `<div className="max-w-7xl mx-auto px-6">` | `<Container size="xl">` |
176
+ | `<div className="h-8" />` | `<Spacer size="8">` |
177
+ | `<div className="aspect-video">` | `<AspectRatio ratio={16 / 9}>` |
178
+
179
+ All layout primitives are RSC-safe — pure visual, zero hooks.
180
+
181
+ ## Card composition
182
+
183
+ ```tsx
184
+ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@hex-core/components/card";
185
+
186
+ <Card>
187
+ <CardHeader>
188
+ <CardTitle>Quarterly review</CardTitle>
189
+ <CardDescription>Q3 2025 — North America</CardDescription>
190
+ </CardHeader>
191
+ <CardContent>{/* body */}</CardContent>
192
+ <CardFooter>{/* actions */}</CardFooter>
193
+ </Card>
194
+ ```
195
+
196
+ `Card` and family are RSC-safe.
197
+
198
+ ## Schemas (tooling)
199
+
200
+ If you're building tooling that consumes the component manifest (an MCP server, a docs prop-table renderer, an AI assistant), import schemas from the dedicated subpath:
201
+
202
+ ```ts
203
+ import { buttonSchema, cardSchema } from "@hex-core/components/schemas";
204
+ ```
205
+
206
+ The schemas reference `ComponentSchemaDefinition` from `@hex-core/registry`, so install that as a dev dep alongside:
207
+
208
+ ```bash
209
+ pnpm add -D @hex-core/registry
210
+ ```
211
+
212
+ This entry is intentionally separate from the runtime barrel — `import { Button } from "@hex-core/components"` does NOT pull in registry types.
213
+
214
+ ## Peer dependency matrix
215
+
216
+ `@hex-core/components` keeps its install footprint small by listing optional dependencies as peers. Install only the ones backing the components you actually use.
217
+
218
+ | Component | Optional peer to install |
219
+ | --- | --- |
220
+ | `<Calendar>`, `<DatePicker>` | `react-day-picker`, `date-fns` |
221
+ | `<Toaster>`, `toast()` | `sonner` |
222
+ | `<Combobox>`, `<MultiCombobox>`, `<Command>` | `cmdk` |
223
+ | `<Drawer>` | `vaul` |
224
+ | `<InputOTP>` | `input-otp` |
225
+ | `<ResizableHandle>`, `<ResizablePanel>`, `<ResizablePanelGroup>` | `react-resizable-panels` |
226
+ | `<Form>`, `<FormField>`, `<FormItem>` | `react-hook-form` |
227
+ | `<DataTable>` | `@tanstack/react-table` |
51
228
 
52
- - `react` 18 or 19
53
- - `react-dom` 18 or 19
54
- - `react-hook-form` (only needed by `<Form>` — tree-shaken if unused)
55
- - `@tanstack/react-table` (only needed by `<DataTable>`)
229
+ Hard peers: `react` 18+/19, `react-dom` 18+/19.
56
230
 
57
231
  ## Docs
58
232
 
package/dist/accordion.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import * as AccordionPrimitive from '@radix-ui/react-accordion';
3
+
4
+ /** Root container for accordion items. Supports single or multiple open items. */
5
+ declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
6
+ /** A single collapsible item within an Accordion. */
7
+ declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
8
+ /** The clickable header that toggles an AccordionItem open/closed. */
9
+ declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
10
+ /** The collapsible content panel of an AccordionItem. */
11
+ declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
12
+
13
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
package/dist/accordion.js ADDED
@@ -0,0 +1,62 @@
1
+ "use client";
2
+ import * as React from 'react';
3
+ import * as AccordionPrimitive from '@radix-ui/react-accordion';
4
+ import { clsx } from 'clsx';
5
+ import { twMerge } from 'tailwind-merge';
6
+ import { jsx, jsxs } from 'react/jsx-runtime';
7
+
8
+ function cn(...inputs) {
9
+ return twMerge(clsx(inputs));
10
+ }
11
+ var Accordion = AccordionPrimitive.Root;
12
+ var AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn("border-b border-b-foreground/[0.08]", className), ...props }));
13
+ AccordionItem.displayName = "AccordionItem";
14
+ var AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
15
+ AccordionPrimitive.Trigger,
16
+ {
17
+ ref,
18
+ className: cn(
19
+ "flex flex-1 items-center justify-between py-[var(--space-4,1rem)] font-medium",
20
+ "transition-all duration-[var(--duration-normal,200ms)] ease-out",
21
+ "hover:underline",
22
+ "[&[data-state=open]>svg]:rotate-180",
23
+ className
24
+ ),
25
+ ...props,
26
+ children: [
27
+ children,
28
+ /* @__PURE__ */ jsx(
29
+ "svg",
30
+ {
31
+ xmlns: "http://www.w3.org/2000/svg",
32
+ width: "24",
33
+ height: "24",
34
+ viewBox: "0 0 24 24",
35
+ fill: "none",
36
+ stroke: "currentColor",
37
+ strokeWidth: "2",
38
+ strokeLinecap: "round",
39
+ strokeLinejoin: "round",
40
+ className: "h-4 w-4 shrink-0 transition-transform duration-[var(--duration-normal,200ms)]",
41
+ "aria-hidden": "true",
42
+ children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
43
+ }
44
+ )
45
+ ]
46
+ }
47
+ ) }));
48
+ AccordionTrigger.displayName = "AccordionTrigger";
49
+ var AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
50
+ AccordionPrimitive.Content,
51
+ {
52
+ ref,
53
+ className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
54
+ ...props,
55
+ children: /* @__PURE__ */ jsx("div", { className: cn("pb-[var(--space-4,1rem)] pt-0", className), children })
56
+ }
57
+ ));
58
+ AccordionContent.displayName = "AccordionContent";
59
+
60
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
61
+ //# sourceMappingURL=accordion.js.map
62
+ //# sourceMappingURL=accordion.js.map
package/dist/accordion.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/accordion/accordion.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,SAAA,GAA+B,kBAAA,CAAA;AAGrC,IAAM,aAAA,GAAsB,iBAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA,CAAoB,yBAAnB,EAAwB,GAAA,EAAU,WAAW,EAAA,CAAG,qCAAA,EAAuC,SAAS,CAAA,EAAI,GAAG,OAAO,CAC/G;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAG5B,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA,CAG7B,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACrC,GAAA,CAAoB,kBAAA,CAAA,MAAA,EAAnB,EAA0B,WAAU,MAAA,EACpC,QAAA,kBAAA,IAAA;AAAA,EAAoB,kBAAA,CAAA,OAAA;AAAA,EAAnB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,+EAAA;AAAA,MACA,iEAAA;AAAA,MACA,iBAAA;AAAA,MACA,qCAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,KAAA,EAAM,4BAAA;AAAA,UACN,KAAA,EAAM,IAAA;AAAA,UACN,MAAA,EAAO,IAAA;AAAA,UACP,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UACf,SAAA,EAAU,+EAAA;AAAA,UACV,aAAA,EAAY,MAAA;AAAA,UAEZ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,gBAAA,EAAiB;AAAA;AAAA;AACnC;AAAA;AACD,CAAA,EACD,CACA;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAG/B,IAAM,gBAAA,GAAyB,iBAG7B,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACrC,GAAA;AAAA,EAAoB,kBAAA,CAAA,OAAA;AAAA,EAAnB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAU,0HAAA;AAAA,IACT,GAAG,KAAA;AAAA,IAEJ,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,+BAAA,EAAiC,SAAS,GAAI,QAAA,EAAS;AAAA;AAC3E,CACA;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"accordion.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for accordion items. Supports single or multiple open items. */\nconst Accordion = AccordionPrimitive.Root;\n\n/** A single collapsible item within an Accordion. */\nconst AccordionItem = React.forwardRef<\n\tReact.ComponentRef<typeof AccordionPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<AccordionPrimitive.Item ref={ref} className={cn(\"border-b border-b-foreground/[0.08]\", className)} {...props} />\n));\nAccordionItem.displayName = \"AccordionItem\";\n\n/** The clickable header that toggles an AccordionItem open/closed. */\nconst AccordionTrigger = React.forwardRef<\n\tReact.ComponentRef<typeof AccordionPrimitive.Trigger>,\n\tReact.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Header className=\"flex\">\n\t\t<AccordionPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-1 items-center justify-between py-[var(--space-4,1rem)] font-medium\",\n\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\"hover:underline\",\n\t\t\t\t\"[&[data-state=open]>svg]:rotate-180\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<svg\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"24\"\n\t\t\t\theight=\"24\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tclassName=\"h-4 w-4 shrink-0 transition-transform duration-[var(--duration-normal,200ms)]\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\" />\n\t\t\t</svg>\n\t\t</AccordionPrimitive.Trigger>\n\t</AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = \"AccordionTrigger\";\n\n/** The collapsible content panel of an AccordionItem. */\nconst AccordionContent = React.forwardRef<\n\tReact.ComponentRef<typeof AccordionPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n\t<AccordionPrimitive.Content\n\t\tref={ref}\n\t\tclassName=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n\t\t{...props}\n\t>\n\t\t<div className={cn(\"pb-[var(--space-4,1rem)] pt-0\", className)}>{children}</div>\n\t</AccordionPrimitive.Content>\n));\nAccordionContent.displayName = \"AccordionContent\";\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"]}
package/dist/alert-dialog.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
3
+ import * as React from 'react';
4
+
5
+ /** Root container for a destructive-action confirmation dialog. */
6
+ declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
7
+ /** The element that opens the alert dialog. */
8
+ declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
9
+ /** Portals alert dialog content into the body. */
10
+ declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
11
+ /** Dimmed backdrop behind the alert dialog. */
12
+ declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
13
+ /** Content panel for the alert dialog. No close button — user must choose action or cancel. */
14
+ declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+ /**
16
+ * Header container for title + description.
17
+ * @returns A div wrapping title/description with vertical rhythm
18
+ */
19
+ declare function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
20
+ /**
21
+ * Footer container for Cancel/Action buttons.
22
+ * @returns A div stacking buttons on mobile and right-aligning on desktop
23
+ */
24
+ declare function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
25
+ /** Accessible title for the alert dialog. */
26
+ declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
27
+ /** Accessible description for the alert dialog. */
28
+ declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
29
+ /** The destructive action button (e.g. Delete). Receives focus by default. */
30
+ declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
31
+ /** The cancel button. Closes the dialog. */
32
+ declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
33
+
34
+ export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
package/dist/alert-dialog.js ADDED
@@ -0,0 +1,125 @@
1
+ "use client";
2
+ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
3
+ import * as React from 'react';
4
+ import { clsx } from 'clsx';
5
+ import { twMerge } from 'tailwind-merge';
6
+ import { jsx, jsxs } from 'react/jsx-runtime';
7
+
8
+ function cn(...inputs) {
9
+ return twMerge(clsx(inputs));
10
+ }
11
+ var AlertDialog = AlertDialogPrimitive.Root;
12
+ var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
13
+ var AlertDialogPortal = AlertDialogPrimitive.Portal;
14
+ var AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
15
+ AlertDialogPrimitive.Overlay,
16
+ {
17
+ ref,
18
+ className: cn(
19
+ "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
20
+ "data-[state=open]:animate-in data-[state=closed]:animate-out",
21
+ "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22
+ className
23
+ ),
24
+ ...props
25
+ }
26
+ ));
27
+ AlertDialogOverlay.displayName = "AlertDialogOverlay";
28
+ var AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
29
+ /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
30
+ /* @__PURE__ */ jsx(
31
+ AlertDialogPrimitive.Content,
32
+ {
33
+ ref,
34
+ className: cn(
35
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[var(--gap-md,1rem)]",
36
+ "border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
37
+ "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
38
+ "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
39
+ "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
40
+ className
41
+ ),
42
+ ...props
43
+ }
44
+ )
45
+ ] }));
46
+ AlertDialogContent.displayName = "AlertDialogContent";
47
+ function AlertDialogHeader({ className, ...props }) {
48
+ return /* @__PURE__ */ jsx(
49
+ "div",
50
+ {
51
+ className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
52
+ ...props
53
+ }
54
+ );
55
+ }
56
+ function AlertDialogFooter({ className, ...props }) {
57
+ return /* @__PURE__ */ jsx(
58
+ "div",
59
+ {
60
+ className: cn(
61
+ "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
62
+ className
63
+ ),
64
+ ...props
65
+ }
66
+ );
67
+ }
68
+ var AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
69
+ AlertDialogPrimitive.Title,
70
+ {
71
+ ref,
72
+ className: cn("text-lg font-semibold", className),
73
+ ...props
74
+ }
75
+ ));
76
+ AlertDialogTitle.displayName = "AlertDialogTitle";
77
+ var AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
78
+ AlertDialogPrimitive.Description,
79
+ {
80
+ ref,
81
+ className: cn("text-sm text-muted-foreground", className),
82
+ ...props
83
+ }
84
+ ));
85
+ AlertDialogDescription.displayName = "AlertDialogDescription";
86
+ var AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
87
+ AlertDialogPrimitive.Action,
88
+ {
89
+ ref,
90
+ className: cn(
91
+ "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium",
92
+ "bg-destructive text-destructive-foreground shadow-sm",
93
+ "transition-all duration-[var(--duration-normal,200ms)] ease-out",
94
+ "hover:bg-destructive/90 hover:shadow-md",
95
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
96
+ "disabled:pointer-events-none disabled:opacity-50",
97
+ "active:scale-[0.98]",
98
+ className
99
+ ),
100
+ ...props
101
+ }
102
+ ));
103
+ AlertDialogAction.displayName = "AlertDialogAction";
104
+ var AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
105
+ AlertDialogPrimitive.Cancel,
106
+ {
107
+ ref,
108
+ className: cn(
109
+ "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium",
110
+ "border border-input bg-background shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
111
+ "transition-all duration-[var(--duration-normal,200ms)] ease-out",
112
+ "hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12",
113
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
114
+ "mt-[var(--space-2,0.5rem)] sm:mt-0",
115
+ "active:scale-[0.98]",
116
+ className
117
+ ),
118
+ ...props
119
+ }
120
+ ));
121
+ AlertDialogCancel.displayName = "AlertDialogCancel";
122
+
123
+ export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
124
+ //# sourceMappingURL=alert-dialog.js.map
125
+ //# sourceMappingURL=alert-dialog.js.map
package/dist/alert-dialog.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"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","file":"alert-dialog.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a destructive-action confirmation dialog. */\nconst AlertDialog = AlertDialogPrimitive.Root;\n\n/** The element that opens the alert dialog. */\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\n/** Portals alert dialog content into the body. */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\n/** Dimmed backdrop behind the alert dialog. */\nconst AlertDialogOverlay = React.forwardRef<\n\tReact.ComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\",\n\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\n/** Content panel for the alert dialog. No close button — user must choose action or cancel. */\nconst AlertDialogContent = React.forwardRef<\n\tReact.ComponentRef<typeof AlertDialogPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[var(--gap-md,1rem)]\",\n\t\t\t\t\"border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg\",\n\t\t\t\t\"duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = \"AlertDialogContent\";\n\n/**\n * Header container for title + description.\n * @returns A div wrapping title/description with vertical rhythm\n */\nfunction AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex flex-col space-y-2 text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer container for Cancel/Action buttons.\n * @returns A div stacking buttons on mobile and right-aligning on desktop\n */\nfunction AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/** Accessible title for the alert dialog. */\nconst AlertDialogTitle = React.forwardRef<\n\tReact.ComponentRef<typeof AlertDialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = \"AlertDialogTitle\";\n\n/** Accessible description for the alert dialog. */\nconst AlertDialogDescription = React.forwardRef<\n\tReact.ComponentRef<typeof AlertDialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = \"AlertDialogDescription\";\n\n/** The destructive action button (e.g. Delete). Receives focus by default. */\nconst AlertDialogAction = React.forwardRef<\n\tReact.ComponentRef<typeof AlertDialogPrimitive.Action>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium\",\n\t\t\t\"bg-destructive text-destructive-foreground shadow-sm\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"hover:bg-destructive/90 hover:shadow-md\",\n\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\"active:scale-[0.98]\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = \"AlertDialogAction\";\n\n/** The cancel button. Closes the dialog. */\nconst AlertDialogCancel = React.forwardRef<\n\tReact.ComponentRef<typeof AlertDialogPrimitive.Cancel>,\n\tReact.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md px-[var(--space-4,1rem)] py-[var(--space-2,0.5rem)] text-sm font-medium\",\n\t\t\t\"border border-input bg-background shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"hover:bg-accent hover:text-accent-foreground hover:shadow-md hover:inset-ring-foreground/12\",\n\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\"mt-[var(--space-2,0.5rem)] sm:mt-0\",\n\t\t\t\"active:scale-[0.98]\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = \"AlertDialogCancel\";\n\nexport {\n\tAlertDialog,\n\tAlertDialogPortal,\n\tAlertDialogOverlay,\n\tAlertDialogTrigger,\n\tAlertDialogContent,\n\tAlertDialogHeader,\n\tAlertDialogFooter,\n\tAlertDialogTitle,\n\tAlertDialogDescription,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n};\n"]}
package/dist/alert.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ import * as React from 'react';
4
+
5
+ declare const alertVariants: (props?: ({
6
+ variant?: "default" | "destructive" | null | undefined;
7
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8
+ /** An inline notification banner for important messages. */
9
+ declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
10
+ variant?: "default" | "destructive" | null | undefined;
11
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
12
+ /** The alert title heading. */
13
+ declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
14
+ /** The alert description. Renders a div so paragraph children can be styled via [&_p]. */
15
+ declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
16
+
17
+ export { Alert, AlertDescription, AlertTitle, alertVariants };
package/dist/alert.js ADDED
@@ -0,0 +1,54 @@
1
+ import { cva } from 'class-variance-authority';
2
+ import * as React from 'react';
3
+ import { clsx } from 'clsx';
4
+ import { twMerge } from 'tailwind-merge';
5
+ import { jsx } from 'react/jsx-runtime';
6
+
7
+ // src/components/alert/alert.tsx
8
+ function cn(...inputs) {
9
+ return twMerge(clsx(inputs));
10
+ }
11
+ var alertVariants = cva(
12
+ [
13
+ "relative w-full rounded-lg border px-[var(--space-4,1rem)] py-[var(--space-3,0.75rem)] text-sm",
14
+ "transition-all duration-[var(--duration-normal,200ms)] ease-out",
15
+ "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-foreground",
16
+ "[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]"
17
+ ].join(" "),
18
+ {
19
+ variants: {
20
+ variant: {
21
+ default: "border-foreground/[0.08] bg-background text-foreground",
22
+ destructive: "border-destructive/50 text-destructive [&>svg]:text-destructive bg-destructive/5"
23
+ }
24
+ },
25
+ defaultVariants: { variant: "default" }
26
+ }
27
+ );
28
+ var Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
29
+ "div",
30
+ {
31
+ ref,
32
+ role: "alert",
33
+ className: cn(alertVariants({ variant }), className),
34
+ ...props
35
+ }
36
+ ));
37
+ Alert.displayName = "Alert";
38
+ var AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
39
+ "h5",
40
+ {
41
+ ref,
42
+ className: cn("mb-[var(--space-1,0.25rem)] font-medium leading-none tracking-tight", className),
43
+ ...props
44
+ }
45
+ ));
46
+ AlertTitle.displayName = "AlertTitle";
47
+ var AlertDescription = React.forwardRef(
48
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
49
+ );
50
+ AlertDescription.displayName = "AlertDescription";
51
+
52
+ export { Alert, AlertDescription, AlertTitle, alertVariants };
53
+ //# sourceMappingURL=alert.js.map
54
+ //# sourceMappingURL=alert.js.map
package/dist/alert.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/lib/utils.ts","../src/components/alert/alert.tsx"],"names":[],"mappings":";;;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACNA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACrB;AAAA,IACC,gGAAA;AAAA,IACA,iEAAA;AAAA,IACA,+FAAA;AAAA,IACA;AAAA,GACD,CAAE,KAAK,GAAG,CAAA;AAAA,EACV;AAAA,IACC,QAAA,EAAU;AAAA,MACT,OAAA,EAAS;AAAA,QACR,OAAA,EAAS,wDAAA;AAAA,QACT,WAAA,EACC;AAAA;AACF,KACD;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA;AAAU;AAExC;AAGA,IAAM,KAAA,GAAc,iBAGlB,CAAC,EAAE,WAAW,OAAA,EAAS,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpC,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA,EAAK,OAAA;AAAA,IACL,WAAW,EAAA,CAAG,aAAA,CAAc,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,IAClD,GAAG;AAAA;AACL,CACA;AACD,KAAA,CAAM,WAAA,GAAc,OAAA;AAGpB,IAAM,UAAA,GAAmB,iBAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,qEAAA,EAAuE,SAAS,CAAA;AAAA,IAC7F,GAAG;AAAA;AACL,CACA;AACD,UAAA,CAAW,WAAA,GAAc,YAAA;AAGzB,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA;AAAA,EAC9B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAEvF;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"alert.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst alertVariants = cva(\n\t[\n\t\t\"relative w-full rounded-lg border px-[var(--space-4,1rem)] py-[var(--space-3,0.75rem)] text-sm\",\n\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\"[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-foreground\",\n\t\t\"[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]\",\n\t].join(\" \"),\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"border-foreground/[0.08] bg-background text-foreground\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"border-destructive/50 text-destructive [&>svg]:text-destructive bg-destructive/5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\" },\n\t},\n);\n\n/** An inline notification banner for important messages. */\nconst Alert = React.forwardRef<\n\tHTMLDivElement,\n\tReact.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\trole=\"alert\"\n\t\tclassName={cn(alertVariants({ variant }), className)}\n\t\t{...props}\n\t/>\n));\nAlert.displayName = \"Alert\";\n\n/** The alert title heading. */\nconst AlertTitle = React.forwardRef<\n\tHTMLHeadingElement,\n\tReact.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n\t<h5\n\t\tref={ref}\n\t\tclassName={cn(\"mb-[var(--space-1,0.25rem)] font-medium leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertTitle.displayName = \"AlertTitle\";\n\n/** The alert description. Renders a div so paragraph children can be styled via [&_p]. */\nconst AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div ref={ref} className={cn(\"text-sm [&_p]:leading-relaxed\", className)} {...props} />\n\t),\n);\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n"]}
package/dist/aspect-ratio.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
3
+
4
+ /** A container that maintains a specified width-to-height ratio for its children. */
5
+ declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
6
+
7
+ export { AspectRatio };
package/dist/aspect-ratio.js ADDED
@@ -0,0 +1,8 @@
1
+ "use client";
2
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
3
+
4
+ var AspectRatio = AspectRatioPrimitive.Root;
5
+
6
+ export { AspectRatio };
7
+ //# sourceMappingURL=aspect-ratio.js.map
8
+ //# sourceMappingURL=aspect-ratio.js.map
package/dist/aspect-ratio.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/primitives/aspect-ratio/aspect-ratio.tsx"],"names":[],"mappings":";;AAKA,IAAM,WAAA,GAAmC,oBAAA,CAAA","file":"aspect-ratio.js","sourcesContent":["\"use client\";\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\";\n\n/** A container that maintains a specified width-to-height ratio for its children. */\nconst AspectRatio = AspectRatioPrimitive.Root;\n\nexport { AspectRatio };\n"]}
package/dist/avatar.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
2
+ import * as React from 'react';
3
+
4
+ /** Root container for an avatar (image + fallback). */
5
+ declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
6
+ /** Avatar image. AvatarFallback renders in its place when the image is missing or errors. */
7
+ declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
8
+ /** Fallback content (usually initials or an icon) shown when the image is missing or fails. Supports delayMs to avoid flashing for fast-loading images. */
9
+ declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
10
+
11
+ export { Avatar, AvatarFallback, AvatarImage };
package/dist/avatar.js ADDED
@@ -0,0 +1,44 @@
1
+ "use client";
2
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
3
+ import * as React from 'react';
4
+ import { clsx } from 'clsx';
5
+ import { twMerge } from 'tailwind-merge';
6
+ import { jsx } from 'react/jsx-runtime';
7
+
8
+ function cn(...inputs) {
9
+ return twMerge(clsx(inputs));
10
+ }
11
+ var Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
12
+ AvatarPrimitive.Root,
13
+ {
14
+ ref,
15
+ className: cn("relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] shrink-0 overflow-hidden rounded-full", className),
16
+ ...props
17
+ }
18
+ ));
19
+ Avatar.displayName = "Avatar";
20
+ var AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
21
+ AvatarPrimitive.Image,
22
+ {
23
+ ref,
24
+ className: cn("aspect-square h-full w-full object-cover", className),
25
+ ...props
26
+ }
27
+ ));
28
+ AvatarImage.displayName = "AvatarImage";
29
+ var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
30
+ AvatarPrimitive.Fallback,
31
+ {
32
+ ref,
33
+ className: cn(
34
+ "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
35
+ className
36
+ ),
37
+ ...props
38
+ }
39
+ ));
40
+ AvatarFallback.displayName = "AvatarFallback";
41
+
42
+ export { Avatar, AvatarFallback, AvatarImage };
43
+ //# sourceMappingURL=avatar.js.map
44
+ //# sourceMappingURL=avatar.js.map