@petrarca/sonnet-playground 0.1.2

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 (41) hide show
  1. package/dist/PlayColorPalette-UFMTJTUB.js +8 -0
  2. package/dist/PlayColorPalette-UFMTJTUB.js.map +1 -0
  3. package/dist/PlayCoreComponents-7QCDFQLT.js +7 -0
  4. package/dist/PlayCoreComponents-7QCDFQLT.js.map +1 -0
  5. package/dist/PlayDataComponents-GZSRTW4F.js +7 -0
  6. package/dist/PlayDataComponents-GZSRTW4F.js.map +1 -0
  7. package/dist/PlayFormComponents-RJB6WZHD.js +7 -0
  8. package/dist/PlayFormComponents-RJB6WZHD.js.map +1 -0
  9. package/dist/PlayFormWidgets-OFV7TJKH.js +7 -0
  10. package/dist/PlayFormWidgets-OFV7TJKH.js.map +1 -0
  11. package/dist/PlayForms-24XX5DC6.js +7 -0
  12. package/dist/PlayForms-24XX5DC6.js.map +1 -0
  13. package/dist/PlayJsonEditor-4L5INQPU.js +7 -0
  14. package/dist/PlayJsonEditor-4L5INQPU.js.map +1 -0
  15. package/dist/PlayTypography-ID6DLFZD.js +8 -0
  16. package/dist/PlayTypography-ID6DLFZD.js.map +1 -0
  17. package/dist/chunk-5V27QDAY.js +617 -0
  18. package/dist/chunk-5V27QDAY.js.map +1 -0
  19. package/dist/chunk-A3IK3CVW.js +212 -0
  20. package/dist/chunk-A3IK3CVW.js.map +1 -0
  21. package/dist/chunk-CYNK2P2Q.js +411 -0
  22. package/dist/chunk-CYNK2P2Q.js.map +1 -0
  23. package/dist/chunk-FTN2A5YL.js +20 -0
  24. package/dist/chunk-FTN2A5YL.js.map +1 -0
  25. package/dist/chunk-GYKEPHHA.js +1154 -0
  26. package/dist/chunk-GYKEPHHA.js.map +1 -0
  27. package/dist/chunk-KAT24CQQ.js +125 -0
  28. package/dist/chunk-KAT24CQQ.js.map +1 -0
  29. package/dist/chunk-P7I5IDXA.js +432 -0
  30. package/dist/chunk-P7I5IDXA.js.map +1 -0
  31. package/dist/chunk-QIETZUEN.js +885 -0
  32. package/dist/chunk-QIETZUEN.js.map +1 -0
  33. package/dist/chunk-TZGJH7YS.js +837 -0
  34. package/dist/chunk-TZGJH7YS.js.map +1 -0
  35. package/dist/index.d.ts +160 -0
  36. package/dist/index.js +328 -0
  37. package/dist/index.js.map +1 -0
  38. package/dist/pages/index.d.ts +69 -0
  39. package/dist/pages/index.js +36 -0
  40. package/dist/pages/index.js.map +1 -0
  41. package/package.json +54 -0
package/dist/chunk-GYKEPHHA.js ADDED
@@ -0,0 +1,1154 @@
1
+ // src/pages/PlayCoreComponents.tsx
2
+ import { useState } from "react";
3
+ import { toast } from "sonner";
4
+ import {
5
+ TreeView,
6
+ Spinner,
7
+ Button,
8
+ Badge,
9
+ Alert,
10
+ AlertDescription,
11
+ AlertTitle,
12
+ Separator,
13
+ Input,
14
+ Textarea,
15
+ Checkbox,
16
+ Label,
17
+ Avatar,
18
+ AvatarImage,
19
+ AvatarFallback,
20
+ Stepper,
21
+ StepperContent,
22
+ StepperDescription,
23
+ StepperIndicator,
24
+ StepperItem,
25
+ StepperList,
26
+ StepperNext,
27
+ StepperPrev,
28
+ StepperSeparator,
29
+ StepperTitle,
30
+ StepperTrigger,
31
+ Tooltip,
32
+ TooltipContent,
33
+ TooltipProvider,
34
+ TooltipTrigger,
35
+ Card,
36
+ CardContent,
37
+ CardDescription,
38
+ CardFooter,
39
+ CardHeader,
40
+ CardTitle,
41
+ Dialog,
42
+ DialogContent,
43
+ DialogDescription,
44
+ DialogFooter,
45
+ DialogHeader,
46
+ DialogTitle,
47
+ DialogTrigger
48
+ } from "@petrarca/sonnet-ui";
49
+ import { useClipboard, useDisclosure } from "@petrarca/sonnet-core/hooks";
50
+ import { Info, AlertTriangle, CheckCircle } from "lucide-react";
51
+ import { jsx, jsxs } from "react/jsx-runtime";
52
+ function PlayCoreComponents() {
53
+ const [spinnerSize, setSpinnerSize] = useState("md");
54
+ const clipboard = useClipboard({ timeout: 2e3 });
55
+ const [disclosureOpened, disclosureHandlers] = useDisclosure(false);
56
+ return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 py-8 px-4", children: [
57
+ /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto mb-8", children: [
58
+ /* @__PURE__ */ jsx("h1", { className: "mb-2", children: "Core UI Components" }),
59
+ /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Test all core UI components in isolation before production deployment. Each component is verified here first." })
60
+ ] }),
61
+ /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto space-y-8", children: [
62
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
63
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Notifications (Sonner)" }),
64
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Toast notifications using sonner library. Test all variants and behaviors." }),
65
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
66
+ /* @__PURE__ */ jsx(
67
+ "button",
68
+ {
69
+ onClick: () => toast.success("Success! Operation completed."),
70
+ className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition",
71
+ children: "Success Toast"
72
+ }
73
+ ),
74
+ /* @__PURE__ */ jsx(
75
+ "button",
76
+ {
77
+ onClick: () => toast.error("Error! Something went wrong."),
78
+ className: "px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition",
79
+ children: "Error Toast"
80
+ }
81
+ ),
82
+ /* @__PURE__ */ jsx(
83
+ "button",
84
+ {
85
+ onClick: () => toast.warning("Warning! Please be careful."),
86
+ className: "px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition",
87
+ children: "Warning Toast"
88
+ }
89
+ ),
90
+ /* @__PURE__ */ jsx(
91
+ "button",
92
+ {
93
+ onClick: () => toast.info("Info: Here is some information."),
94
+ className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition",
95
+ children: "Info Toast"
96
+ }
97
+ ),
98
+ /* @__PURE__ */ jsx(
99
+ "button",
100
+ {
101
+ onClick: () => {
102
+ toast.success("First notification");
103
+ setTimeout(() => toast.info("Second notification"), 500);
104
+ setTimeout(() => toast.warning("Third notification"), 1e3);
105
+ },
106
+ className: "px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition",
107
+ children: "Multiple Toasts"
108
+ }
109
+ ),
110
+ /* @__PURE__ */ jsx(
111
+ "button",
112
+ {
113
+ onClick: () => toast("Custom message", {
114
+ description: "This is a custom notification with description",
115
+ duration: 5e3
116
+ }),
117
+ className: "px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition",
118
+ children: "Custom Toast"
119
+ }
120
+ )
121
+ ] })
122
+ ] }),
123
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
124
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Custom Hooks" }),
125
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Test custom hooks that replace Mantine hooks." }),
126
+ /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
127
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "useClipboard Hook" }),
128
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
129
+ /* @__PURE__ */ jsx(
130
+ "button",
131
+ {
132
+ onClick: () => clipboard.copy("Hello from clipboard!"),
133
+ className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition",
134
+ children: clipboard.copied ? "\u2713 Copied!" : "Copy Text"
135
+ }
136
+ ),
137
+ /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
138
+ "State: ",
139
+ clipboard.copied ? "Copied" : "Ready",
140
+ clipboard.error && ` (Error: ${clipboard.error.message})`
141
+ ] })
142
+ ] })
143
+ ] }),
144
+ /* @__PURE__ */ jsxs("div", { children: [
145
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "useDisclosure Hook" }),
146
+ /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
147
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
148
+ /* @__PURE__ */ jsx(
149
+ "button",
150
+ {
151
+ onClick: disclosureHandlers.open,
152
+ className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition",
153
+ children: "Open"
154
+ }
155
+ ),
156
+ /* @__PURE__ */ jsx(
157
+ "button",
158
+ {
159
+ onClick: disclosureHandlers.close,
160
+ className: "px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition",
161
+ children: "Close"
162
+ }
163
+ ),
164
+ /* @__PURE__ */ jsx(
165
+ "button",
166
+ {
167
+ onClick: disclosureHandlers.toggle,
168
+ className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition",
169
+ children: "Toggle"
170
+ }
171
+ ),
172
+ /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
173
+ "State: ",
174
+ disclosureOpened ? "Open" : "Closed"
175
+ ] })
176
+ ] }),
177
+ disclosureOpened && /* @__PURE__ */ jsx("div", { className: "p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md", children: /* @__PURE__ */ jsx("p", { className: "text-blue-900 dark:text-blue-100", children: "This content is visible when disclosure is open!" }) })
178
+ ] })
179
+ ] })
180
+ ] }),
181
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
182
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Spinner Component" }),
183
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Loading spinner with different sizes." }),
184
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
185
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
186
+ /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-muted-foreground", children: "Size:" }),
187
+ /* @__PURE__ */ jsx(
188
+ "button",
189
+ {
190
+ onClick: () => setSpinnerSize("sm"),
191
+ className: `px-3 py-1 rounded ${spinnerSize === "sm" ? "bg-blue-600 text-white" : "bg-muted text-muted-foreground"}`,
192
+ children: "Small"
193
+ }
194
+ ),
195
+ /* @__PURE__ */ jsx(
196
+ "button",
197
+ {
198
+ onClick: () => setSpinnerSize("md"),
199
+ className: `px-3 py-1 rounded ${spinnerSize === "md" ? "bg-blue-600 text-white" : "bg-muted text-muted-foreground"}`,
200
+ children: "Medium"
201
+ }
202
+ ),
203
+ /* @__PURE__ */ jsx(
204
+ "button",
205
+ {
206
+ onClick: () => setSpinnerSize("lg"),
207
+ className: `px-3 py-1 rounded ${spinnerSize === "lg" ? "bg-blue-600 text-white" : "bg-muted text-muted-foreground"}`,
208
+ children: "Large"
209
+ }
210
+ )
211
+ ] }),
212
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8 p-6 bg-gray-50 dark:bg-gray-900/50 rounded-md", children: [
213
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
214
+ /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
215
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Small (16px)" })
216
+ ] }),
217
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
218
+ /* @__PURE__ */ jsx(Spinner, { size: "md" }),
219
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Medium (24px)" })
220
+ ] }),
221
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
222
+ /* @__PURE__ */ jsx(Spinner, { size: "lg" }),
223
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Large (32px)" })
224
+ ] }),
225
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
226
+ /* @__PURE__ */ jsx(Spinner, { size: spinnerSize }),
227
+ /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
228
+ "Selected: ",
229
+ spinnerSize
230
+ ] })
231
+ ] })
232
+ ] })
233
+ ] })
234
+ ] }),
235
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
236
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Buttons (Phase 2)" }),
237
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "shadcn/ui Button component with all variants and sizes." }),
238
+ /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
239
+ /* @__PURE__ */ jsxs("div", { children: [
240
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Variants" }),
241
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
242
+ /* @__PURE__ */ jsx(Button, { children: "Default" }),
243
+ /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Secondary" }),
244
+ /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Destructive" }),
245
+ /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Outline" }),
246
+ /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Ghost" }),
247
+ /* @__PURE__ */ jsx(Button, { variant: "link", children: "Link" })
248
+ ] })
249
+ ] }),
250
+ /* @__PURE__ */ jsx(Separator, {}),
251
+ /* @__PURE__ */ jsxs("div", { children: [
252
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Sizes" }),
253
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
254
+ /* @__PURE__ */ jsx(Button, { size: "sm", children: "Small" }),
255
+ /* @__PURE__ */ jsx(Button, { size: "default", children: "Default" }),
256
+ /* @__PURE__ */ jsx(Button, { size: "lg", children: "Large" }),
257
+ /* @__PURE__ */ jsx(Button, { size: "icon", children: "\u{1F50D}" })
258
+ ] })
259
+ ] }),
260
+ /* @__PURE__ */ jsx(Separator, {}),
261
+ /* @__PURE__ */ jsxs("div", { children: [
262
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "States" }),
263
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
264
+ /* @__PURE__ */ jsx(Button, { disabled: true, children: "Disabled" }),
265
+ /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
266
+ ] })
267
+ ] })
268
+ ] })
269
+ ] }),
270
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
271
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Badges (Phase 2)" }),
272
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Badge component with different variants." }),
273
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
274
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
275
+ /* @__PURE__ */ jsx(Badge, { children: "Default" }),
276
+ /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Secondary" }),
277
+ /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Destructive" }),
278
+ /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Outline" })
279
+ ] }),
280
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
281
+ /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Status:" }),
282
+ /* @__PURE__ */ jsx(Badge, { variant: "default", children: "Active" }),
283
+ /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Pending" }),
284
+ /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Error" })
285
+ ] })
286
+ ] })
287
+ ] }),
288
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
289
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Alerts (Phase 2)" }),
290
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Alert component for important messages." }),
291
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
292
+ /* @__PURE__ */ jsxs(Alert, { children: [
293
+ /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
294
+ /* @__PURE__ */ jsx(AlertTitle, { children: "Info" }),
295
+ /* @__PURE__ */ jsx(AlertDescription, { children: "This is an informational message." })
296
+ ] }),
297
+ /* @__PURE__ */ jsxs(Alert, { variant: "default", children: [
298
+ /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }),
299
+ /* @__PURE__ */ jsx(AlertTitle, { children: "Success" }),
300
+ /* @__PURE__ */ jsx(AlertDescription, { children: "Your operation completed successfully." })
301
+ ] }),
302
+ /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
303
+ /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
304
+ /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
305
+ /* @__PURE__ */ jsx(AlertDescription, { children: "There was a problem with your request." })
306
+ ] })
307
+ ] })
308
+ ] }),
309
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
310
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Tooltips (Phase 2)" }),
311
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Tooltip component for additional information on hover." }),
312
+ /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-6", children: [
313
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
314
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Hover me" }) }),
315
+ /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "This is a tooltip" }) })
316
+ ] }),
317
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
318
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Top (default)" }) }),
319
+ /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Tooltip positioned at top" }) })
320
+ ] }),
321
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
322
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "With icon \u{1F3AF}" }) }),
323
+ /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Tooltips work with any trigger element" }) })
324
+ ] })
325
+ ] }) })
326
+ ] }),
327
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
328
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Cards (Phase 2)" }),
329
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Card component for content containers." }),
330
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
331
+ /* @__PURE__ */ jsxs(Card, { children: [
332
+ /* @__PURE__ */ jsxs(CardHeader, { children: [
333
+ /* @__PURE__ */ jsx(CardTitle, { children: "Simple Card" }),
334
+ /* @__PURE__ */ jsx(CardDescription, { children: "Basic card with header and content" })
335
+ ] }),
336
+ /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This is a simple card component with header and content sections." }) })
337
+ ] }),
338
+ /* @__PURE__ */ jsxs(Card, { children: [
339
+ /* @__PURE__ */ jsxs(CardHeader, { children: [
340
+ /* @__PURE__ */ jsx(CardTitle, { children: "Card with Footer" }),
341
+ /* @__PURE__ */ jsx(CardDescription, { children: "Includes footer with actions" })
342
+ ] }),
343
+ /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This card has a footer section for actions." }) }),
344
+ /* @__PURE__ */ jsxs(CardFooter, { className: "flex gap-2", children: [
345
+ /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }),
346
+ /* @__PURE__ */ jsx(Button, { size: "sm", children: "Save" })
347
+ ] })
348
+ ] }),
349
+ /* @__PURE__ */ jsxs(Card, { className: "col-span-1 md:col-span-2", children: [
350
+ /* @__PURE__ */ jsxs(CardHeader, { children: [
351
+ /* @__PURE__ */ jsx(CardTitle, { children: "Full Width Card" }),
352
+ /* @__PURE__ */ jsx(CardDescription, { children: "This card spans the full width" })
353
+ ] }),
354
+ /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
355
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Cards can be combined with other components for rich layouts." }),
356
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
357
+ /* @__PURE__ */ jsx(Badge, { children: "Feature" }),
358
+ /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "New" })
359
+ ] })
360
+ ] }) })
361
+ ] })
362
+ ] })
363
+ ] }),
364
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
365
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Separator (Phase 2)" }),
366
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Visual separator for content sections." }),
367
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
368
+ /* @__PURE__ */ jsxs("div", { children: [
369
+ /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Content above separator" }),
370
+ /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
371
+ /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Content below separator" })
372
+ ] }),
373
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
374
+ /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Vertical separator" }),
375
+ /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-6" }),
376
+ /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Between items" })
377
+ ] })
378
+ ] })
379
+ ] }),
380
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
381
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Dialogs & Modals (Phase 4)" }),
382
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "shadcn/ui Dialog component for modal interactions." }),
383
+ /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
384
+ /* @__PURE__ */ jsxs("div", { children: [
385
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Basic Dialog" }),
386
+ /* @__PURE__ */ jsxs(Dialog, { children: [
387
+ /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open Dialog" }) }),
388
+ /* @__PURE__ */ jsxs(DialogContent, { children: [
389
+ /* @__PURE__ */ jsxs(DialogHeader, { children: [
390
+ /* @__PURE__ */ jsx(DialogTitle, { children: "Dialog Title" }),
391
+ /* @__PURE__ */ jsx(DialogDescription, { children: "This is a basic dialog with a title and description." })
392
+ ] }),
393
+ /* @__PURE__ */ jsx("div", { className: "py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Dialog content goes here. You can add any components or text you need." }) }),
394
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
395
+ /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
396
+ /* @__PURE__ */ jsx(Button, { children: "Confirm" })
397
+ ] })
398
+ ] })
399
+ ] })
400
+ ] }),
401
+ /* @__PURE__ */ jsx(Separator, {}),
402
+ /* @__PURE__ */ jsxs("div", { children: [
403
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Confirmation Dialog" }),
404
+ /* @__PURE__ */ jsxs(Dialog, { children: [
405
+ /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Delete Item" }) }),
406
+ /* @__PURE__ */ jsxs(DialogContent, { children: [
407
+ /* @__PURE__ */ jsxs(DialogHeader, { children: [
408
+ /* @__PURE__ */ jsx(DialogTitle, { children: "Are you absolutely sure?" }),
409
+ /* @__PURE__ */ jsx(DialogDescription, { children: "This action cannot be undone. This will permanently delete your data from our servers." })
410
+ ] }),
411
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
412
+ /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
413
+ /* @__PURE__ */ jsx(
414
+ Button,
415
+ {
416
+ variant: "destructive",
417
+ onClick: () => {
418
+ toast.success("Item deleted");
419
+ },
420
+ children: "Delete"
421
+ }
422
+ )
423
+ ] })
424
+ ] })
425
+ ] })
426
+ ] }),
427
+ /* @__PURE__ */ jsx(Separator, {}),
428
+ /* @__PURE__ */ jsxs("div", { children: [
429
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Dialog with Form" }),
430
+ /* @__PURE__ */ jsxs(Dialog, { children: [
431
+ /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Add New Item" }) }),
432
+ /* @__PURE__ */ jsxs(DialogContent, { children: [
433
+ /* @__PURE__ */ jsxs(DialogHeader, { children: [
434
+ /* @__PURE__ */ jsx(DialogTitle, { children: "Add New Item" }),
435
+ /* @__PURE__ */ jsx(DialogDescription, { children: "Fill in the details below to add a new item." })
436
+ ] }),
437
+ /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
438
+ /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
439
+ /* @__PURE__ */ jsx("label", { htmlFor: "name", className: "text-sm font-medium", children: "Name" }),
440
+ /* @__PURE__ */ jsx(
441
+ "input",
442
+ {
443
+ id: "name",
444
+ type: "text",
445
+ placeholder: "Enter name...",
446
+ className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
447
+ }
448
+ )
449
+ ] }),
450
+ /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
451
+ /* @__PURE__ */ jsx(
452
+ "label",
453
+ {
454
+ htmlFor: "description",
455
+ className: "text-sm font-medium",
456
+ children: "Description"
457
+ }
458
+ ),
459
+ /* @__PURE__ */ jsx(
460
+ "textarea",
461
+ {
462
+ id: "description",
463
+ placeholder: "Enter description...",
464
+ rows: 3,
465
+ className: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
466
+ }
467
+ )
468
+ ] })
469
+ ] }),
470
+ /* @__PURE__ */ jsxs(DialogFooter, { children: [
471
+ /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
472
+ /* @__PURE__ */ jsx(
473
+ Button,
474
+ {
475
+ onClick: () => {
476
+ toast.success("Item added");
477
+ },
478
+ children: "Add Item"
479
+ }
480
+ )
481
+ ] })
482
+ ] })
483
+ ] })
484
+ ] }),
485
+ /* @__PURE__ */ jsx(Separator, {}),
486
+ /* @__PURE__ */ jsxs("div", { children: [
487
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Information Dialog" }),
488
+ /* @__PURE__ */ jsxs(Dialog, { children: [
489
+ /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "View Details" }) }),
490
+ /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl", children: [
491
+ /* @__PURE__ */ jsxs(DialogHeader, { children: [
492
+ /* @__PURE__ */ jsx(DialogTitle, { children: "System Information" }),
493
+ /* @__PURE__ */ jsx(DialogDescription, { children: "Detailed information about the current system status." })
494
+ ] }),
495
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
496
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
497
+ /* @__PURE__ */ jsxs("div", { children: [
498
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Status" }),
499
+ /* @__PURE__ */ jsx(Badge, { variant: "default", className: "mt-1", children: "Active" })
500
+ ] }),
501
+ /* @__PURE__ */ jsxs("div", { children: [
502
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Version" }),
503
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "1.0.0" })
504
+ ] }),
505
+ /* @__PURE__ */ jsxs("div", { children: [
506
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Environment" }),
507
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Production" })
508
+ ] }),
509
+ /* @__PURE__ */ jsxs("div", { children: [
510
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Region" }),
511
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "US-East" })
512
+ ] })
513
+ ] }),
514
+ /* @__PURE__ */ jsx(Separator, {}),
515
+ /* @__PURE__ */ jsxs("div", { children: [
516
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground mb-2", children: "Description" }),
517
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This is an example of an information dialog that displays system details. It can contain various types of content including badges, separators, and structured data." })
518
+ ] })
519
+ ] }),
520
+ /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { children: "Close" }) })
521
+ ] })
522
+ ] })
523
+ ] })
524
+ ] })
525
+ ] }),
526
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
527
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Form Inputs (Phase 5)" }),
528
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "shadcn/ui Input, Textarea, and Checkbox components." }),
529
+ /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
530
+ /* @__PURE__ */ jsxs("div", { children: [
531
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Input" }),
532
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4 max-w-md", children: [
533
+ /* @__PURE__ */ jsxs("div", { children: [
534
+ /* @__PURE__ */ jsx(
535
+ "label",
536
+ {
537
+ htmlFor: "input-default",
538
+ className: "block text-sm font-medium mb-2",
539
+ children: "Default Input"
540
+ }
541
+ ),
542
+ /* @__PURE__ */ jsx(
543
+ Input,
544
+ {
545
+ id: "input-default",
546
+ type: "text",
547
+ placeholder: "Enter text..."
548
+ }
549
+ )
550
+ ] }),
551
+ /* @__PURE__ */ jsxs("div", { children: [
552
+ /* @__PURE__ */ jsx(
553
+ "label",
554
+ {
555
+ htmlFor: "input-email",
556
+ className: "block text-sm font-medium mb-2",
557
+ children: "Email Input"
558
+ }
559
+ ),
560
+ /* @__PURE__ */ jsx(
561
+ Input,
562
+ {
563
+ id: "input-email",
564
+ type: "email",
565
+ placeholder: "email@example.com"
566
+ }
567
+ )
568
+ ] }),
569
+ /* @__PURE__ */ jsxs("div", { children: [
570
+ /* @__PURE__ */ jsx(
571
+ "label",
572
+ {
573
+ htmlFor: "input-password",
574
+ className: "block text-sm font-medium mb-2",
575
+ children: "Password Input"
576
+ }
577
+ ),
578
+ /* @__PURE__ */ jsx(
579
+ Input,
580
+ {
581
+ id: "input-password",
582
+ type: "password",
583
+ placeholder: "Enter password..."
584
+ }
585
+ )
586
+ ] }),
587
+ /* @__PURE__ */ jsxs("div", { children: [
588
+ /* @__PURE__ */ jsx(
589
+ "label",
590
+ {
591
+ htmlFor: "input-disabled",
592
+ className: "block text-sm font-medium mb-2",
593
+ children: "Disabled Input"
594
+ }
595
+ ),
596
+ /* @__PURE__ */ jsx(
597
+ Input,
598
+ {
599
+ id: "input-disabled",
600
+ type: "text",
601
+ placeholder: "Disabled...",
602
+ disabled: true
603
+ }
604
+ )
605
+ ] }),
606
+ /* @__PURE__ */ jsxs("div", { children: [
607
+ /* @__PURE__ */ jsx(
608
+ "label",
609
+ {
610
+ htmlFor: "input-readonly",
611
+ className: "block text-sm font-medium mb-2",
612
+ children: "Read-only Input"
613
+ }
614
+ ),
615
+ /* @__PURE__ */ jsx(
616
+ Input,
617
+ {
618
+ id: "input-readonly",
619
+ type: "text",
620
+ value: "Read-only value",
621
+ readOnly: true
622
+ }
623
+ )
624
+ ] })
625
+ ] })
626
+ ] }),
627
+ /* @__PURE__ */ jsx(Separator, {}),
628
+ /* @__PURE__ */ jsxs("div", { children: [
629
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Textarea" }),
630
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4 max-w-md", children: [
631
+ /* @__PURE__ */ jsxs("div", { children: [
632
+ /* @__PURE__ */ jsx(
633
+ "label",
634
+ {
635
+ htmlFor: "textarea-default",
636
+ className: "block text-sm font-medium mb-2",
637
+ children: "Default Textarea"
638
+ }
639
+ ),
640
+ /* @__PURE__ */ jsx(
641
+ Textarea,
642
+ {
643
+ id: "textarea-default",
644
+ placeholder: "Enter multi-line text..."
645
+ }
646
+ )
647
+ ] }),
648
+ /* @__PURE__ */ jsxs("div", { children: [
649
+ /* @__PURE__ */ jsx(
650
+ "label",
651
+ {
652
+ htmlFor: "textarea-rows",
653
+ className: "block text-sm font-medium mb-2",
654
+ children: "Textarea with Custom Rows"
655
+ }
656
+ ),
657
+ /* @__PURE__ */ jsx(
658
+ Textarea,
659
+ {
660
+ id: "textarea-rows",
661
+ placeholder: "This has 5 rows...",
662
+ rows: 5
663
+ }
664
+ )
665
+ ] }),
666
+ /* @__PURE__ */ jsxs("div", { children: [
667
+ /* @__PURE__ */ jsx(
668
+ "label",
669
+ {
670
+ htmlFor: "textarea-disabled",
671
+ className: "block text-sm font-medium mb-2",
672
+ children: "Disabled Textarea"
673
+ }
674
+ ),
675
+ /* @__PURE__ */ jsx(
676
+ Textarea,
677
+ {
678
+ id: "textarea-disabled",
679
+ placeholder: "Disabled...",
680
+ disabled: true
681
+ }
682
+ )
683
+ ] }),
684
+ /* @__PURE__ */ jsxs("div", { children: [
685
+ /* @__PURE__ */ jsx(
686
+ "label",
687
+ {
688
+ htmlFor: "textarea-value",
689
+ className: "block text-sm font-medium mb-2",
690
+ children: "Textarea with Value"
691
+ }
692
+ ),
693
+ /* @__PURE__ */ jsx(
694
+ Textarea,
695
+ {
696
+ id: "textarea-value",
697
+ value: "This is some pre-filled text in the textarea.",
698
+ readOnly: true
699
+ }
700
+ )
701
+ ] })
702
+ ] })
703
+ ] }),
704
+ /* @__PURE__ */ jsx(Separator, {}),
705
+ /* @__PURE__ */ jsxs("div", { children: [
706
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Checkbox" }),
707
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
708
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
709
+ /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-default" }),
710
+ /* @__PURE__ */ jsx(
711
+ "label",
712
+ {
713
+ htmlFor: "checkbox-default",
714
+ className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
715
+ children: "Default Checkbox"
716
+ }
717
+ )
718
+ ] }),
719
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
720
+ /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-checked", defaultChecked: true }),
721
+ /* @__PURE__ */ jsx(
722
+ "label",
723
+ {
724
+ htmlFor: "checkbox-checked",
725
+ className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
726
+ children: "Checked by Default"
727
+ }
728
+ )
729
+ ] }),
730
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
731
+ /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-disabled", disabled: true }),
732
+ /* @__PURE__ */ jsx(
733
+ "label",
734
+ {
735
+ htmlFor: "checkbox-disabled",
736
+ className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
737
+ children: "Disabled Checkbox"
738
+ }
739
+ )
740
+ ] }),
741
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
742
+ /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-disabled-checked", disabled: true, checked: true }),
743
+ /* @__PURE__ */ jsx(
744
+ "label",
745
+ {
746
+ htmlFor: "checkbox-disabled-checked",
747
+ className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
748
+ children: "Disabled & Checked"
749
+ }
750
+ )
751
+ ] }),
752
+ /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
753
+ /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
754
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Multiple Checkboxes Example:" }),
755
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
756
+ /* @__PURE__ */ jsx(Checkbox, { id: "terms" }),
757
+ /* @__PURE__ */ jsx("label", { htmlFor: "terms", className: "text-sm leading-none", children: "Accept terms and conditions" })
758
+ ] }),
759
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
760
+ /* @__PURE__ */ jsx(Checkbox, { id: "marketing" }),
761
+ /* @__PURE__ */ jsx("label", { htmlFor: "marketing", className: "text-sm leading-none", children: "Send me marketing emails" })
762
+ ] }),
763
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
764
+ /* @__PURE__ */ jsx(Checkbox, { id: "newsletter", defaultChecked: true }),
765
+ /* @__PURE__ */ jsx(
766
+ "label",
767
+ {
768
+ htmlFor: "newsletter",
769
+ className: "text-sm leading-none",
770
+ children: "Subscribe to newsletter"
771
+ }
772
+ )
773
+ ] })
774
+ ] })
775
+ ] })
776
+ ] })
777
+ ] })
778
+ ] }),
779
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
780
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Label" }),
781
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Label component for form fields with proper accessibility." }),
782
+ /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
783
+ /* @__PURE__ */ jsxs("div", { children: [
784
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Basic Usage" }),
785
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
786
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
787
+ /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email Address" }),
788
+ /* @__PURE__ */ jsx(
789
+ Input,
790
+ {
791
+ id: "email",
792
+ type: "email",
793
+ placeholder: "Enter your email"
794
+ }
795
+ )
796
+ ] }),
797
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
798
+ /* @__PURE__ */ jsx(Label, { htmlFor: "username", children: "Username" }),
799
+ /* @__PURE__ */ jsx(Input, { id: "username", placeholder: "Choose a username" })
800
+ ] }),
801
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
802
+ /* @__PURE__ */ jsx(Label, { htmlFor: "bio", children: "Bio" }),
803
+ /* @__PURE__ */ jsx(Textarea, { id: "bio", placeholder: "Tell us about yourself" })
804
+ ] })
805
+ ] })
806
+ ] }),
807
+ /* @__PURE__ */ jsx(Separator, {}),
808
+ /* @__PURE__ */ jsxs("div", { children: [
809
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "With Checkbox" }),
810
+ /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
811
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
812
+ /* @__PURE__ */ jsx(Checkbox, { id: "terms-label" }),
813
+ /* @__PURE__ */ jsx(Label, { htmlFor: "terms-label", children: "Accept terms and conditions" })
814
+ ] }),
815
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
816
+ /* @__PURE__ */ jsx(Checkbox, { id: "newsletter-label" }),
817
+ /* @__PURE__ */ jsx(Label, { htmlFor: "newsletter-label", children: "Subscribe to newsletter" })
818
+ ] })
819
+ ] })
820
+ ] }),
821
+ /* @__PURE__ */ jsx(Separator, {}),
822
+ /* @__PURE__ */ jsxs("div", { children: [
823
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Disabled State" }),
824
+ /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
825
+ /* @__PURE__ */ jsx(Label, { htmlFor: "disabled-input", className: "opacity-50", children: "Disabled Field" }),
826
+ /* @__PURE__ */ jsx(
827
+ Input,
828
+ {
829
+ id: "disabled-input",
830
+ disabled: true,
831
+ placeholder: "This field is disabled"
832
+ }
833
+ )
834
+ ] })
835
+ ] })
836
+ ] })
837
+ ] }),
838
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
839
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Avatar" }),
840
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Avatar component for displaying user profile images with fallback support." }),
841
+ /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
842
+ /* @__PURE__ */ jsxs("div", { children: [
843
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Basic Avatars" }),
844
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
845
+ /* @__PURE__ */ jsxs(Avatar, { children: [
846
+ /* @__PURE__ */ jsx(
847
+ AvatarImage,
848
+ {
849
+ src: "https://github.com/shadcn.png",
850
+ alt: "@shadcn"
851
+ }
852
+ ),
853
+ /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })
854
+ ] }),
855
+ /* @__PURE__ */ jsxs(Avatar, { children: [
856
+ /* @__PURE__ */ jsx(
857
+ AvatarImage,
858
+ {
859
+ src: "https://github.com/vercel.png",
860
+ alt: "@vercel"
861
+ }
862
+ ),
863
+ /* @__PURE__ */ jsx(AvatarFallback, { children: "VC" })
864
+ ] }),
865
+ /* @__PURE__ */ jsxs(Avatar, { children: [
866
+ /* @__PURE__ */ jsx(
867
+ AvatarImage,
868
+ {
869
+ src: "https://github.com/react.png",
870
+ alt: "@react"
871
+ }
872
+ ),
873
+ /* @__PURE__ */ jsx(AvatarFallback, { children: "RC" })
874
+ ] })
875
+ ] })
876
+ ] }),
877
+ /* @__PURE__ */ jsx(Separator, {}),
878
+ /* @__PURE__ */ jsxs("div", { children: [
879
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Fallback Only (No Image)" }),
880
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
881
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "JD" }) }),
882
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "AB" }) }),
883
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "XY" }) }),
884
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-blue-500 text-white", children: "DB" }) }),
885
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-green-500 text-white", children: "GH" }) })
886
+ ] })
887
+ ] }),
888
+ /* @__PURE__ */ jsx(Separator, {}),
889
+ /* @__PURE__ */ jsxs("div", { children: [
890
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "With User Information" }),
891
+ /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
892
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
893
+ /* @__PURE__ */ jsxs(Avatar, { children: [
894
+ /* @__PURE__ */ jsx(
895
+ AvatarImage,
896
+ {
897
+ src: "https://github.com/shadcn.png",
898
+ alt: "@shadcn"
899
+ }
900
+ ),
901
+ /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })
902
+ ] }),
903
+ /* @__PURE__ */ jsxs("div", { children: [
904
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "John Doe" }),
905
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-faint-foreground", children: "john.doe@example.com" })
906
+ ] })
907
+ ] }),
908
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
909
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-purple-500 text-white", children: "JD" }) }),
910
+ /* @__PURE__ */ jsxs("div", { children: [
911
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Jane Smith" }),
912
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-faint-foreground", children: "jane.smith@example.com" })
913
+ ] })
914
+ ] }),
915
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
916
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-orange-500 text-white", children: "AS" }) }),
917
+ /* @__PURE__ */ jsxs("div", { children: [
918
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Alex Johnson" }),
919
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-faint-foreground", children: "alex.j@example.com" })
920
+ ] })
921
+ ] })
922
+ ] })
923
+ ] }),
924
+ /* @__PURE__ */ jsx(Separator, {}),
925
+ /* @__PURE__ */ jsxs("div", { children: [
926
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Custom Sizes" }),
927
+ /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
928
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
929
+ /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "SM" }) }),
930
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Small" })
931
+ ] }),
932
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
933
+ /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "MD" }) }),
934
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Default" })
935
+ ] }),
936
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
937
+ /* @__PURE__ */ jsx(Avatar, { className: "h-16 w-16", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: "LG" }) }),
938
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Large" })
939
+ ] }),
940
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
941
+ /* @__PURE__ */ jsx(Avatar, { className: "h-20 w-20", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xl", children: "XL" }) }),
942
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Extra Large" })
943
+ ] })
944
+ ] })
945
+ ] })
946
+ ] })
947
+ ] }),
948
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
949
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "Stepper" }),
950
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Dice UI Stepper \u2014 horizontal, controlled via built-in Prev/Next or external state." }),
951
+ /* @__PURE__ */ jsxs("div", { className: "space-y-10", children: [
952
+ /* @__PURE__ */ jsxs("div", { children: [
953
+ /* @__PURE__ */ jsx("h3", { className: "mb-4", children: "Interactive (built-in navigation)" }),
954
+ /* @__PURE__ */ jsxs(Stepper, { defaultValue: "step-1", className: "max-w-lg", children: [
955
+ /* @__PURE__ */ jsx(StepperList, { className: "gap-2", children: ["step-1", "step-2", "step-3"].map((value, i) => /* @__PURE__ */ jsxs(StepperItem, { value, children: [
956
+ /* @__PURE__ */ jsxs(StepperTrigger, { children: [
957
+ /* @__PURE__ */ jsx(StepperIndicator, {}),
958
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-16", children: [
959
+ /* @__PURE__ */ jsxs(StepperTitle, { children: [
960
+ "Step ",
961
+ i + 1
962
+ ] }),
963
+ /* @__PURE__ */ jsx(StepperDescription, { children: "Description" })
964
+ ] })
965
+ ] }),
966
+ /* @__PURE__ */ jsx(StepperSeparator, {})
967
+ ] }, value)) }),
968
+ /* @__PURE__ */ jsx(StepperContent, { value: "step-1", className: "mt-6", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Content for step 1." }) }),
969
+ /* @__PURE__ */ jsx(StepperContent, { value: "step-2", className: "mt-6", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Content for step 2." }) }),
970
+ /* @__PURE__ */ jsx(StepperContent, { value: "step-3", className: "mt-6", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Content for step 3." }) }),
971
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-6 max-w-lg", children: [
972
+ /* @__PURE__ */ jsx(StepperPrev, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Back" }) }),
973
+ /* @__PURE__ */ jsx(StepperNext, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "sm", children: "Next" }) })
974
+ ] })
975
+ ] })
976
+ ] }),
977
+ /* @__PURE__ */ jsx(Separator, {}),
978
+ /* @__PURE__ */ jsxs("div", { children: [
979
+ /* @__PURE__ */ jsx("h3", { className: "mb-4", children: "Non-interactive (controlled)" }),
980
+ /* @__PURE__ */ jsx(StepperControlled, {})
981
+ ] })
982
+ ] })
983
+ ] }),
984
+ /* @__PURE__ */ jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-6", children: [
985
+ /* @__PURE__ */ jsx("h2", { className: "mb-4", children: "TreeView" }),
986
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "Generic accessible tree component with expand/collapse, keyboard navigation (ArrowUp/Down/Left/Right, Enter/Space), and optional row selection. Extractable to @petrarca/sonnet-ui." }),
987
+ /* @__PURE__ */ jsx(TreeViewDemo, {})
988
+ ] })
989
+ ] })
990
+ ] });
991
+ }
992
+ var CONTROLLED_STEPS = [
993
+ { value: "account", title: "Account", description: "Your details" },
994
+ { value: "profile", title: "Profile", description: "About you" },
995
+ { value: "review", title: "Review", description: "Confirm" }
996
+ ];
997
+ function StepperControlled() {
998
+ const [step, setStep] = useState("account");
999
+ return /* @__PURE__ */ jsxs(
1000
+ Stepper,
1001
+ {
1002
+ value: step,
1003
+ onValueChange: setStep,
1004
+ nonInteractive: true,
1005
+ className: "max-w-lg",
1006
+ children: [
1007
+ /* @__PURE__ */ jsx(StepperList, { className: "gap-2", children: CONTROLLED_STEPS.map((s) => /* @__PURE__ */ jsxs(StepperItem, { value: s.value, children: [
1008
+ /* @__PURE__ */ jsxs(StepperTrigger, { children: [
1009
+ /* @__PURE__ */ jsx(StepperIndicator, {}),
1010
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-16", children: [
1011
+ /* @__PURE__ */ jsx(StepperTitle, { children: s.title }),
1012
+ /* @__PURE__ */ jsx(StepperDescription, { children: s.description })
1013
+ ] })
1014
+ ] }),
1015
+ /* @__PURE__ */ jsx(StepperSeparator, {})
1016
+ ] }, s.value)) }),
1017
+ CONTROLLED_STEPS.map((s) => /* @__PURE__ */ jsx(StepperContent, { value: s.value, className: "mt-6", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
1018
+ "Content for ",
1019
+ s.title,
1020
+ "."
1021
+ ] }) }, s.value)),
1022
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-6 max-w-lg", children: [
1023
+ /* @__PURE__ */ jsx(
1024
+ Button,
1025
+ {
1026
+ variant: "outline",
1027
+ size: "sm",
1028
+ disabled: step === CONTROLLED_STEPS[0].value,
1029
+ onClick: () => {
1030
+ const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);
1031
+ if (i > 0) setStep(CONTROLLED_STEPS[i - 1].value);
1032
+ },
1033
+ children: "Back"
1034
+ }
1035
+ ),
1036
+ /* @__PURE__ */ jsx(
1037
+ Button,
1038
+ {
1039
+ size: "sm",
1040
+ disabled: step === CONTROLLED_STEPS[CONTROLLED_STEPS.length - 1].value,
1041
+ onClick: () => {
1042
+ const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);
1043
+ if (i < CONTROLLED_STEPS.length - 1)
1044
+ setStep(CONTROLLED_STEPS[i + 1].value);
1045
+ },
1046
+ children: "Next"
1047
+ }
1048
+ )
1049
+ ] })
1050
+ ]
1051
+ }
1052
+ );
1053
+ }
1054
+ var TREE_NODES = [
1055
+ {
1056
+ id: "fruits",
1057
+ data: { label: "Fruits" },
1058
+ hasChildren: true,
1059
+ children: [
1060
+ {
1061
+ id: "citrus",
1062
+ data: { label: "Citrus" },
1063
+ hasChildren: true,
1064
+ children: [
1065
+ { id: "lemon", data: { label: "Lemon" }, hasChildren: false },
1066
+ { id: "orange", data: { label: "Orange" }, hasChildren: false }
1067
+ ]
1068
+ },
1069
+ { id: "apple", data: { label: "Apple" }, hasChildren: false },
1070
+ { id: "banana", data: { label: "Banana" }, hasChildren: false }
1071
+ ]
1072
+ },
1073
+ {
1074
+ id: "vegetables",
1075
+ data: { label: "Vegetables" },
1076
+ hasChildren: true,
1077
+ children: [
1078
+ { id: "carrot", data: { label: "Carrot" }, hasChildren: false },
1079
+ { id: "broccoli", data: { label: "Broccoli" }, hasChildren: false }
1080
+ ]
1081
+ },
1082
+ {
1083
+ id: "grains",
1084
+ data: { label: "Grains" },
1085
+ hasChildren: false
1086
+ }
1087
+ ];
1088
+ function TreeViewDemo() {
1089
+ const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
1090
+ const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
1091
+ const [lastClicked, setLastClicked] = useState(null);
1092
+ const handleExpand = (id) => setExpandedIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
1093
+ const handleCollapse = (id) => setExpandedIds((prev) => {
1094
+ const next = new Set(prev);
1095
+ next.delete(id);
1096
+ return next;
1097
+ });
1098
+ const handleSelectionChange = (id, selected) => setSelectedIds((prev) => {
1099
+ const next = new Set(prev);
1100
+ if (selected) next.add(id);
1101
+ else next.delete(id);
1102
+ return next;
1103
+ });
1104
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [
1105
+ /* @__PURE__ */ jsxs("div", { children: [
1106
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "Default (click to activate)" }),
1107
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Keyboard: ArrowUp/Down to move, ArrowRight to expand, ArrowLeft to collapse or go to parent, Enter/Space to activate." }),
1108
+ /* @__PURE__ */ jsx(
1109
+ TreeView,
1110
+ {
1111
+ nodes: TREE_NODES,
1112
+ expandedIds,
1113
+ onExpand: handleExpand,
1114
+ onCollapse: handleCollapse,
1115
+ onNodeClick: (node) => setLastClicked(node.id),
1116
+ onNodeActivate: (node) => setLastClicked(node.id),
1117
+ renderNode: (node) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: node.data.label }),
1118
+ className: "max-w-xs"
1119
+ }
1120
+ ),
1121
+ lastClicked && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-muted-foreground", children: [
1122
+ "Last activated: ",
1123
+ /* @__PURE__ */ jsx("span", { className: "font-mono", children: lastClicked })
1124
+ ] })
1125
+ ] }),
1126
+ /* @__PURE__ */ jsxs("div", { children: [
1127
+ /* @__PURE__ */ jsx("h3", { className: "mb-3", children: "With row selection" }),
1128
+ /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Checkboxes appear when onSelectionChange is provided. State is independent of expand/collapse." }),
1129
+ /* @__PURE__ */ jsx(
1130
+ TreeView,
1131
+ {
1132
+ nodes: TREE_NODES,
1133
+ expandedIds,
1134
+ onExpand: handleExpand,
1135
+ onCollapse: handleCollapse,
1136
+ selectedIds,
1137
+ onSelectionChange: handleSelectionChange,
1138
+ renderNode: (node) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: node.data.label }),
1139
+ className: "max-w-xs"
1140
+ }
1141
+ ),
1142
+ selectedIds.size > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-muted-foreground", children: [
1143
+ "Selected:",
1144
+ " ",
1145
+ /* @__PURE__ */ jsx("span", { className: "font-mono", children: [...selectedIds].join(", ") })
1146
+ ] })
1147
+ ] })
1148
+ ] });
1149
+ }
1150
+
1151
+ export {
1152
+ PlayCoreComponents
1153
+ };
1154
+ //# sourceMappingURL=chunk-GYKEPHHA.js.map