@petrarca/sonnet-playground 0.1.6 → 0.3.0

package/dist/chunk-QCK2M4KD.js

@@ -0,0 +1,907 @@
+import {
+  PlaygroundSection
+} from "./chunk-C2EZ2ECG.js";
+
+// src/pages/PlayCoreComponents.tsx
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  Spinner,
+  Button,
+  Badge,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Separator,
+  Input,
+  Textarea,
+  Checkbox,
+  Label,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "@petrarca/sonnet-ui";
+import { useClipboard, useDisclosure } from "@petrarca/sonnet-core/hooks";
+import { Info, AlertTriangle, CheckCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PlayCoreComponents() {
+  const [spinnerSize, setSpinnerSize] = useState("md");
+  const clipboard = useClipboard({ timeout: 2e3 });
+  const [disclosureOpened, disclosureHandlers] = useDisclosure(false);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Core UI Components" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Test all core UI components in isolation before production deployment. Each component is verified here first." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Buttons",
+          description: "shadcn/ui Button component with all variants and sizes.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Variants" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                /* @__PURE__ */ jsx(Button, { children: "Default" }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Secondary" }),
+                /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Destructive" }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Outline" }),
+                /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Ghost" }),
+                /* @__PURE__ */ jsx(Button, { variant: "link", children: "Link" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Sizes" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                /* @__PURE__ */ jsx(Button, { size: "sm", children: "Small" }),
+                /* @__PURE__ */ jsx(Button, { size: "default", children: "Default" }),
+                /* @__PURE__ */ jsx(Button, { size: "lg", children: "Large" }),
+                /* @__PURE__ */ jsx(Button, { size: "icon", children: "\u{1F50D}" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "States" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                /* @__PURE__ */ jsx(Button, { disabled: true, children: "Disabled" }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Badges",
+          description: "Badge component with different variants.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+              /* @__PURE__ */ jsx(Badge, { children: "Default" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Secondary" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Destructive" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Outline" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Status:" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "default", children: "Active" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Pending" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "Error" })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Alerts",
+          description: "Alert component for important messages.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs(Alert, { children: [
+              /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(AlertTitle, { children: "Info" }),
+              /* @__PURE__ */ jsx(AlertDescription, { children: "This is an informational message." })
+            ] }),
+            /* @__PURE__ */ jsxs(Alert, { variant: "default", children: [
+              /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(AlertTitle, { children: "Success" }),
+              /* @__PURE__ */ jsx(AlertDescription, { children: "Your operation completed successfully." })
+            ] }),
+            /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx(AlertDescription, { children: "There was a problem with your request." })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Cards",
+          description: "Card component for content containers.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Simple Card" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "Basic card with header and content" })
+              ] }),
+              /* @__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." }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Card with Footer" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "Includes footer with actions" })
+              ] }),
+              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This card has a footer section for actions." }) }),
+              /* @__PURE__ */ jsxs(CardFooter, { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", children: "Save" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { className: "col-span-1 md:col-span-2", children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Full Width Card" }),
+                /* @__PURE__ */ jsx(CardDescription, { children: "This card spans the full width" })
+              ] }),
+              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Cards can be combined with other components for rich layouts." }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx(Badge, { children: "Feature" }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "New" })
+                ] })
+              ] }) })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Separator",
+          description: "Visual separator for content sections.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Content above separator" }),
+              /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Content below separator" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Vertical separator" }),
+              /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-6" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Between items" })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Tooltips",
+          description: "Tooltip component for additional information on hover.",
+          variant: "card",
+          children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-6", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Hover me" }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "This is a tooltip" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Top (default)" }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Tooltip positioned at top" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "With icon \u{1F3AF}" }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Tooltips work with any trigger element" }) })
+            ] })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Dialogs",
+          description: "shadcn/ui Dialog component for modal interactions.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Basic Dialog" }),
+              /* @__PURE__ */ jsxs(Dialog, { children: [
+                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Open Dialog" }) }),
+                /* @__PURE__ */ jsxs(DialogContent, { children: [
+                  /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                    /* @__PURE__ */ jsx(DialogTitle, { children: "Dialog Title" }),
+                    /* @__PURE__ */ jsx(DialogDescription, { children: "This is a basic dialog with a title and description." })
+                  ] }),
+                  /* @__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." }) }),
+                  /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                    /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
+                    /* @__PURE__ */ jsx(Button, { children: "Confirm" })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Confirmation Dialog" }),
+              /* @__PURE__ */ jsxs(Dialog, { children: [
+                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "destructive", children: "Delete Item" }) }),
+                /* @__PURE__ */ jsxs(DialogContent, { children: [
+                  /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                    /* @__PURE__ */ jsx(DialogTitle, { children: "Are you absolutely sure?" }),
+                    /* @__PURE__ */ jsx(DialogDescription, { children: "This action cannot be undone. This will permanently delete your data from our servers." })
+                  ] }),
+                  /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                    /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "destructive",
+                        onClick: () => {
+                          toast.success("Item deleted");
+                        },
+                        children: "Delete"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Dialog with Form" }),
+              /* @__PURE__ */ jsxs(Dialog, { children: [
+                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Add New Item" }) }),
+                /* @__PURE__ */ jsxs(DialogContent, { children: [
+                  /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                    /* @__PURE__ */ jsx(DialogTitle, { children: "Add New Item" }),
+                    /* @__PURE__ */ jsx(DialogDescription, { children: "Fill in the details below to add a new item." })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+                      /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
+                      /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          id: "name",
+                          type: "text",
+                          placeholder: "Enter name..."
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+                      /* @__PURE__ */ jsx(Label, { htmlFor: "description", children: "Description" }),
+                      /* @__PURE__ */ jsx(
+                        Textarea,
+                        {
+                          id: "description",
+                          placeholder: "Enter description...",
+                          rows: 3
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                    /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onClick: () => {
+                          toast.success("Item added");
+                        },
+                        children: "Add Item"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Information Dialog" }),
+              /* @__PURE__ */ jsxs(Dialog, { children: [
+                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "View Details" }) }),
+                /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl", children: [
+                  /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                    /* @__PURE__ */ jsx(DialogTitle, { children: "System Information" }),
+                    /* @__PURE__ */ jsx(DialogDescription, { children: "Detailed information about the current system status." })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Status" }),
+                        /* @__PURE__ */ jsx(Badge, { variant: "default", className: "mt-1", children: "Active" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Version" }),
+                        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "1.0.0" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Environment" }),
+                        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Production" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Region" }),
+                        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "US-East" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(Separator, {}),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground mb-2", children: "Description" }),
+                      /* @__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." })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { children: "Close" }) })
+                ] })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Form Inputs",
+          description: "shadcn/ui Input, Textarea, and Checkbox components.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Input" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4 max-w-md", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "input-default", children: "Default Input" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "input-default",
+                      type: "text",
+                      placeholder: "Enter text..."
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "input-email", children: "Email Input" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "input-email",
+                      type: "email",
+                      placeholder: "email@example.com"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "input-password", children: "Password Input" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "input-password",
+                      type: "password",
+                      placeholder: "Enter password..."
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "input-disabled",
+                      type: "text",
+                      placeholder: "Disabled...",
+                      disabled: true
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "input-readonly", children: "Read-only Input" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "input-readonly",
+                      type: "text",
+                      value: "Read-only value",
+                      readOnly: true
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Textarea" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4 max-w-md", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
+                  /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: "textarea-default",
+                      placeholder: "Enter multi-line text..."
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "textarea-rows", children: "Textarea with Custom Rows" }),
+                  /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: "textarea-rows",
+                      placeholder: "This has 5 rows...",
+                      rows: 5
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
+                  /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: "textarea-disabled",
+                      placeholder: "Disabled...",
+                      disabled: true
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "textarea-value", children: "Textarea with Value" }),
+                  /* @__PURE__ */ jsx(
+                    Textarea,
+                    {
+                      id: "textarea-value",
+                      value: "This is some pre-filled text in the textarea.",
+                      readOnly: true
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Checkbox" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-default" }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "checkbox-default", children: "Default Checkbox" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-checked", defaultChecked: true }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "checkbox-checked", children: "Checked by Default" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-disabled", disabled: true }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "checkbox-disabled", children: "Disabled Checkbox" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { id: "checkbox-disabled-checked", disabled: true, checked: true }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "checkbox-disabled-checked", children: "Disabled & Checked" })
+                ] }),
+                /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Multiple Checkboxes Example:" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(Checkbox, { id: "terms" }),
+                    /* @__PURE__ */ jsx(Label, { htmlFor: "terms", children: "Accept terms and conditions" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(Checkbox, { id: "marketing" }),
+                    /* @__PURE__ */ jsx(Label, { htmlFor: "marketing", children: "Send me marketing emails" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(Checkbox, { id: "newsletter", defaultChecked: true }),
+                    /* @__PURE__ */ jsx(Label, { htmlFor: "newsletter", children: "Subscribe to newsletter" })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Label",
+          description: "Label component for form fields with proper accessibility.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Basic Usage" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email Address" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      id: "email",
+                      type: "email",
+                      placeholder: "Enter your email"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "username", children: "Username" }),
+                  /* @__PURE__ */ jsx(Input, { id: "username", placeholder: "Choose a username" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "bio", children: "Bio" }),
+                  /* @__PURE__ */ jsx(Textarea, { id: "bio", placeholder: "Tell us about yourself" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "With Checkbox" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { id: "terms-label" }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "terms-label", children: "Accept terms and conditions" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { id: "newsletter-label" }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "newsletter-label", children: "Subscribe to newsletter" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Disabled State" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "disabled-input", className: "opacity-50", children: "Disabled Field" }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "disabled-input",
+                    disabled: true,
+                    placeholder: "This field is disabled"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Avatar",
+          description: "Avatar component for displaying user profile images with fallback support.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Basic Avatars" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsxs(Avatar, { children: [
+                  /* @__PURE__ */ jsx(
+                    AvatarImage,
+                    {
+                      src: "https://github.com/shadcn.png",
+                      alt: "@shadcn"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })
+                ] }),
+                /* @__PURE__ */ jsxs(Avatar, { children: [
+                  /* @__PURE__ */ jsx(
+                    AvatarImage,
+                    {
+                      src: "https://github.com/vercel.png",
+                      alt: "@vercel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AvatarFallback, { children: "VC" })
+                ] }),
+                /* @__PURE__ */ jsxs(Avatar, { children: [
+                  /* @__PURE__ */ jsx(
+                    AvatarImage,
+                    {
+                      src: "https://github.com/react.png",
+                      alt: "@react"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AvatarFallback, { children: "RC" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Fallback Only (No Image)" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "JD" }) }),
+                /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "AB" }) }),
+                /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "XY" }) }),
+                /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground", children: "DB" }) }),
+                /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-secondary text-secondary-foreground", children: "GH" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "With User Information" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs(Avatar, { children: [
+                    /* @__PURE__ */ jsx(
+                      AvatarImage,
+                      {
+                        src: "https://github.com/shadcn.png",
+                        alt: "@shadcn"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "John Doe" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-faint-foreground", children: "john.doe@example.com" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary text-primary-foreground", children: "JD" }) }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Jane Smith" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-faint-foreground", children: "jane.smith@example.com" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-destructive text-destructive-foreground", children: "AS" }) }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Alex Johnson" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-faint-foreground", children: "alex.j@example.com" })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Custom Sizes" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: "SM" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Small" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "MD" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Default" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Avatar, { className: "h-16 w-16", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: "LG" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Large" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Avatar, { className: "h-20 w-20", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xl", children: "XL" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Extra Large" })
+                ] })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Notifications",
+          description: "Toast notifications using Sonner. Test all variants and behaviors.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => toast.success("Success! Operation completed."),
+                children: "Success"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => toast.error("Error! Something went wrong."),
+                children: "Error"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => toast.warning("Warning! Please be careful."),
+                children: "Warning"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => toast.info("Info: Here is some information."),
+                children: "Info"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => {
+                  toast.success("First notification");
+                  setTimeout(() => toast.info("Second notification"), 500);
+                  setTimeout(() => toast.warning("Third notification"), 1e3);
+                },
+                children: "Multiple"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => toast("Custom message", {
+                  description: "This is a custom notification with description",
+                  duration: 5e3
+                }),
+                children: "Custom"
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Spinner Component",
+          description: "Loading spinner with different sizes.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "Size:" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: spinnerSize === "sm" ? "default" : "outline",
+                  size: "sm",
+                  onClick: () => setSpinnerSize("sm"),
+                  children: "Small"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: spinnerSize === "md" ? "default" : "outline",
+                  size: "sm",
+                  onClick: () => setSpinnerSize("md"),
+                  children: "Medium"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: spinnerSize === "lg" ? "default" : "outline",
+                  size: "sm",
+                  onClick: () => setSpinnerSize("lg"),
+                  children: "Large"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8 p-6 bg-muted/50 rounded-md", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Small (16px)" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Spinner, { size: "md" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Medium (24px)" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Spinner, { size: "lg" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Large (32px)" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Spinner, { size: spinnerSize }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                  "Selected: ",
+                  spinnerSize
+                ] })
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        PlaygroundSection,
+        {
+          title: "Custom Hooks",
+          description: "Test custom hooks from @petrarca/sonnet-core.",
+          variant: "card",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "useClipboard Hook" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => clipboard.copy("Hello from clipboard!"),
+                    children: clipboard.copied ? "\u2713 Copied!" : "Copy Text"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                  "State: ",
+                  clipboard.copied ? "Copied" : "Ready",
+                  clipboard.error && ` (Error: ${clipboard.error.message})`
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "useDisclosure Hook" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: disclosureHandlers.open,
+                      children: "Open"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: disclosureHandlers.close,
+                      children: "Close"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: disclosureHandlers.toggle,
+                      children: "Toggle"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                    "State: ",
+                    disclosureOpened ? "Open" : "Closed"
+                  ] })
+                ] }),
+                disclosureOpened && /* @__PURE__ */ jsx("div", { className: "p-4 bg-muted border rounded-md", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "This content is visible when disclosure is open!" }) })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  PlayCoreComponents
+};
+//# sourceMappingURL=chunk-QCK2M4KD.js.map