@rlx-ui/mcp 0.0.1 → 0.0.2

package/dist/data/registry.json

@@ -0,0 +1,1611 @@
+{
+  "widgets": [
+    {
+      "name": "Accordion",
+      "slug": "accordion",
+      "category": "widget",
+      "path": "/widgets/accordion",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default-expanded",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@rlx-widgets/accordion\\\";\\n\\nexport const Preview = () => { \\n  return (\\n    <Accordion type=\\\"single\\\" defaultValue=\\\"item-1\\\" className=\\\"w-full\\\">\\n      <AccordionItem value=\\\"item-1\\\">\\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It adheres to the WAI-ARIA design pattern.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-2\\\">\\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It&apos;s unstyled by default, giving you full control over the look\\n          and feel.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-3\\\">\\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes! You can animate the Accordion with CSS or a library of your\\n          choice.\\n        </AccordionContent>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@rlx-widgets/accordion\";\n\nexport const Preview = () => { \n  return (\n    <Accordion type=\"single\" defaultValue=\"item-1\" className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It&apos;s unstyled by default, giving you full control over the look\n          and feel.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes! You can animate the Accordion with CSS or a library of your\n          choice.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n"
+        },
+        {
+          "name": "default-expanded-multiple",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@rlx-widgets/accordion\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Accordion\\n      type=\\\"multiple\\\"\\n      defaultValue={[\\\"item-1\\\", \\\"item-2\\\"]}\\n      className=\\\"w-full\\\"\\n    >\\n      <AccordionItem value=\\\"item-1\\\">\\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It adheres to the WAI-ARIA design pattern.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-2\\\">\\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It&apos;s unstyled by default, giving you full control over the look\\n          and feel.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-3\\\">\\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes! You can animate the Accordion with CSS or a library of your\\n          choice.\\n        </AccordionContent>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@rlx-widgets/accordion\";\n\nexport const Preview = () => {\n  return (\n    <Accordion\n      type=\"multiple\"\n      defaultValue={[\"item-1\", \"item-2\"]}\n      className=\"w-full\"\n    >\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It&apos;s unstyled by default, giving you full control over the look\n          and feel.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes! You can animate the Accordion with CSS or a library of your\n          choice.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n"
+        },
+        {
+          "name": "multiple",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@rlx-widgets/accordion\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Accordion type=\\\"multiple\\\" className=\\\"w-full\\\">\\n      <AccordionItem value=\\\"item-1\\\">\\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It adheres to the WAI-ARIA design pattern.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-2\\\">\\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It&apos;s unstyled by default, giving you full control over the look\\n          and feel.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-3\\\">\\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes! You can animate the Accordion with CSS or a library of your\\n          choice.\\n        </AccordionContent>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@rlx-widgets/accordion\";\n\nexport const Preview = () => {\n  return (\n    <Accordion type=\"multiple\" className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It&apos;s unstyled by default, giving you full control over the look\n          and feel.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes! You can animate the Accordion with CSS or a library of your\n          choice.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n"
+        },
+        {
+          "name": "single",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@rlx-widgets/accordion\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Accordion type=\\\"single\\\" collapsible className=\\\"w-full\\\">\\n      <AccordionItem value=\\\"item-1\\\">\\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It adheres to the WAI-ARIA design pattern.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-2\\\">\\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It&apos;s unstyled by default, giving you full control over the look\\n          and feel.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-3\\\">\\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes! You can animate the Accordion with CSS or a library of your\\n          choice.\\n        </AccordionContent>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@rlx-widgets/accordion\";\n\nexport const Preview = () => {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It adheres to the WAI-ARIA design pattern.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it unstyled?</AccordionTrigger>\n        <AccordionContent>\n          Yes. It&apos;s unstyled by default, giving you full control over the look\n          and feel.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can it be animated?</AccordionTrigger>\n        <AccordionContent>\n          Yes! You can animate the Accordion with CSS or a library of your\n          choice.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Alert",
+      "slug": "alert",
+      "category": "widget",
+      "path": "/widgets/alert",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "error",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Alert, AlertDescription, AlertTitle } from \\\"@rlx-widgets/alert\\\";\\nimport { AlertCircleIcon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Alert variant=\\\"destructive\\\">\\n      <AlertCircleIcon />\\n      <AlertTitle>Unable to process your payment.</AlertTitle>\\n      <AlertDescription>\\n        <p>Please verify your billing information and try again.</p>\\n        <ul className=\\\"list-inside list-disc text-sm\\\">\\n          <li>Check your card details</li>\\n          <li>Ensure sufficient funds</li>\\n          <li>Verify billing address</li>\\n        </ul>\\n      </AlertDescription>\\n    </Alert>\\n  );\\n};\\n\"",
+          "preview": "import { Alert, AlertDescription, AlertTitle } from \"@rlx-widgets/alert\";\nimport { AlertCircleIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircleIcon />\n      <AlertTitle>Unable to process your payment.</AlertTitle>\n      <AlertDescription>\n        <p>Please verify your billing information and try again.</p>\n        <ul className=\"list-inside list-disc text-sm\">\n          <li>Check your card details</li>\n          <li>Ensure sufficient funds</li>\n          <li>Verify billing address</li>\n        </ul>\n      </AlertDescription>\n    </Alert>\n  );\n};\n"
+        },
+        {
+          "name": "title",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Alert, AlertTitle } from \\\"@rlx-widgets/alert\\\";\\nimport { PopcornIcon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Alert>\\n      <PopcornIcon />\\n      <AlertTitle>\\n        This Alert has a title and an icon. No description.\\n      </AlertTitle>\\n    </Alert>\\n  );\\n};\\n\"",
+          "preview": "import { Alert, AlertTitle } from \"@rlx-widgets/alert\";\nimport { PopcornIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <Alert>\n      <PopcornIcon />\n      <AlertTitle>\n        This Alert has a title and an icon. No description.\n      </AlertTitle>\n    </Alert>\n  );\n};\n"
+        },
+        {
+          "name": "with-subtitle",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Alert, AlertDescription, AlertTitle } from \\\"@rlx-widgets/alert\\\";\\nimport { CheckCircle2Icon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Alert>\\n      <CheckCircle2Icon />\\n      <AlertTitle>Success! Your changes have been saved</AlertTitle>\\n      <AlertDescription>\\n        This is an alert with icon, title and description.\\n      </AlertDescription>\\n    </Alert>\\n  );\\n};\\n\"",
+          "preview": "import { Alert, AlertDescription, AlertTitle } from \"@rlx-widgets/alert\";\nimport { CheckCircle2Icon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <Alert>\n      <CheckCircle2Icon />\n      <AlertTitle>Success! Your changes have been saved</AlertTitle>\n      <AlertDescription>\n        This is an alert with icon, title and description.\n      </AlertDescription>\n    </Alert>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Alert Dialog",
+      "slug": "alert-dialog",
+      "category": "widget",
+      "path": "/widgets/alert-dialog",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  AlertDialog,\\n  AlertDialogAction,\\n  AlertDialogCancel,\\n  AlertDialogContent,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n} from \\\"@rlx-widgets/alert-dialog\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <AlertDialog>\\n      <AlertDialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Show Dialog</Button>\\n      </AlertDialogTrigger>\\n      <AlertDialogContent>\\n        <AlertDialogHeader>\\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\\n          <AlertDialogDescription>\\n            This action cannot be undone. This will permanently delete your\\n            account and remove your data from our servers.\\n          </AlertDialogDescription>\\n        </AlertDialogHeader>\\n        <AlertDialogFooter>\\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\\n          <AlertDialogAction>Continue</AlertDialogAction>\\n        </AlertDialogFooter>\\n      </AlertDialogContent>\\n    </AlertDialog>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@rlx-widgets/alert-dialog\";\n\nexport const Preview = () => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Aspect Ratio",
+      "slug": "aspect-ratio",
+      "category": "widget",
+      "path": "/widgets/aspect-ratio",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Image from \\\"next/image\\\";\\nimport { AspectRatio } from \\\"@rlx-widgets/aspect-ratio\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <AspectRatio ratio={16 / 9} className=\\\"bg-muted rounded-lg\\\">\\n      <Image\\n        src=\\\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\\\"\\n        alt=\\\"Photo by Drew Beamer\\\"\\n        fill\\n        className=\\\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\\\"\\n      />\\n    </AspectRatio>\\n  );\\n};\\n\"",
+          "preview": "import Image from \"next/image\";\nimport { AspectRatio } from \"@rlx-widgets/aspect-ratio\";\n\nexport const Preview = () => {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\"\n      />\n    </AspectRatio>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Avatar",
+      "slug": "avatar",
+      "category": "widget",
+      "path": "/widgets/avatar",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "custom-rounded",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Avatar className=\\\"rounded-lg\\\">\\n      <AvatarImage src=\\\"https://github.com/evilrabbit.png\\\" alt=\\\"@evilrabbit\\\" />\\n      <AvatarFallback>ER</AvatarFallback>\\n    </Avatar>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\n\nexport const Preview = () => {\n  return (\n    <Avatar className=\"rounded-lg\">\n      <AvatarImage src=\"https://github.com/evilrabbit.png\" alt=\"@evilrabbit\" />\n      <AvatarFallback>ER</AvatarFallback>\n    </Avatar>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Avatar>\\n      <AvatarImage src=\\\"https://github.com/shadcn.png\\\" alt=\\\"@shadcn\\\" />\\n      <AvatarFallback>CN</AvatarFallback>\\n    </Avatar>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\n\nexport const Preview = () => {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  );\n};\n"
+        },
+        {
+          "name": "stacked",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\\\">\\n      <Avatar>\\n        <AvatarImage src=\\\"https://github.com/shadcn.png\\\" alt=\\\"@shadcn\\\" />\\n        <AvatarFallback>CN</AvatarFallback>\\n      </Avatar>\\n      <Avatar>\\n        <AvatarImage src=\\\"https://github.com/leerob.png\\\" alt=\\\"@leerob\\\" />\\n        <AvatarFallback>LR</AvatarFallback>\\n      </Avatar>\\n      <Avatar>\\n        <AvatarImage\\n          src=\\\"https://github.com/evilrabbit.png\\\"\\n          alt=\\\"@evilrabbit\\\"\\n        />\\n        <AvatarFallback>ER</AvatarFallback>\\n      </Avatar>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/leerob.png\" alt=\"@leerob\" />\n        <AvatarFallback>LR</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage\n          src=\"https://github.com/evilrabbit.png\"\n          alt=\"@evilrabbit\"\n        />\n        <AvatarFallback>ER</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Badge",
+      "slug": "badge",
+      "category": "widget",
+      "path": "/widgets/badge",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return <Badge>Badge</Badge>;\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return <Badge>Badge</Badge>;\n};\n"
+        },
+        {
+          "name": "destructive",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return <Badge variant=\\\"destructive\\\">Destructive</Badge>;\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return <Badge variant=\"destructive\">Destructive</Badge>;\n};\n"
+        },
+        {
+          "name": "double-digit",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Badge\\n      className=\\\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\\\"\\n      variant=\\\"destructive\\\"\\n    >\\n      99\\n    </Badge>\\n  );\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return (\n    <Badge\n      className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n      variant=\"destructive\"\n    >\n      99\n    </Badge>\n  );\n};\n"
+        },
+        {
+          "name": "double-digit-plus",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Badge\\n      className=\\\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      20+\\n    </Badge>\\n  );\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return (\n    <Badge\n      className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\"\n      variant=\"outline\"\n    >\n      20+\n    </Badge>\n  );\n};\n"
+        },
+        {
+          "name": "outline",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return <Badge variant=\\\"outline\\\">Outline</Badge>;\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return <Badge variant=\"outline\">Outline</Badge>;\n};\n"
+        },
+        {
+          "name": "secondary",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return <Badge variant=\\\"secondary\\\">Secondary</Badge>;\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return <Badge variant=\"secondary\">Secondary</Badge>;\n};\n"
+        },
+        {
+          "name": "single-digit",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Badge className=\\\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\\\">\\n      8\\n    </Badge>\\n  );\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return (\n    <Badge className=\"h-5 min-w-5 rounded-full px-1 font-mono tabular-nums\">\n      8\n    </Badge>\n  );\n};\n"
+        },
+        {
+          "name": "with-icon",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { BadgeCheckIcon } from \\\"lucide-react\\\";\\nimport { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Badge\\n      variant=\\\"secondary\\\"\\n      className=\\\"bg-blue-500 text-white dark:bg-blue-600\\\"\\n    >\\n      <BadgeCheckIcon />\\n      Verified\\n    </Badge>\\n  );\\n};\\n\"",
+          "preview": "import { BadgeCheckIcon } from \"lucide-react\";\nimport { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  return (\n    <Badge\n      variant=\"secondary\"\n      className=\"bg-blue-500 text-white dark:bg-blue-600\"\n    >\n      <BadgeCheckIcon />\n      Verified\n    </Badge>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Breadcrumb",
+      "slug": "breadcrumb",
+      "category": "widget",
+      "path": "/widgets/breadcrumb",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "collapsed",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Link from \\\"next/link\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@rlx-widgets/breadcrumb\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/\\\">Home</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbEllipsis />\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/docs/components\\\">Components</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n};\\n\"",
+          "preview": "import Link from \"next/link\";\n\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rlx-widgets/breadcrumb\";\n\nexport const Preview = () => {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n"
+        },
+        {
+          "name": "custom-separator",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Link from \\\"next/link\\\";\\nimport { SlashIcon } from \\\"lucide-react\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@rlx-widgets/breadcrumb\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/\\\">Home</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator>\\n          <SlashIcon />\\n        </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/components\\\">Components</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator>\\n          <SlashIcon />\\n        </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n};\\n\"",
+          "preview": "import Link from \"next/link\";\nimport { SlashIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rlx-widgets/breadcrumb\";\n\nexport const Preview = () => {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@rlx-widgets/breadcrumb\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/\\\">Home</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <DropdownMenu>\\n            <DropdownMenuTrigger className=\\\"flex items-center gap-1\\\">\\n              <BreadcrumbEllipsis className=\\\"size-4\\\" />\\n              <span className=\\\"sr-only\\\">Toggle menu</span>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"start\\\">\\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\\n              <DropdownMenuItem>Themes</DropdownMenuItem>\\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/docs/components\\\">Components</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n};\\n\"",
+          "preview": "import Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rlx-widgets/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nexport const Preview = () => {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              <BreadcrumbEllipsis className=\"size-4\" />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/docs/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n"
+        },
+        {
+          "name": "dropdown",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Link from \\\"next/link\\\";\\nimport { ChevronDownIcon, SlashIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@rlx-widgets/breadcrumb\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/\\\">Home</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator>\\n          <SlashIcon />\\n        </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <DropdownMenu>\\n            <DropdownMenuTrigger className=\\\"flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\\\">\\n              Components\\n              <ChevronDownIcon />\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"start\\\">\\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\\n              <DropdownMenuItem>Themes</DropdownMenuItem>\\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator>\\n          <SlashIcon />\\n        </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n};\\n\"",
+          "preview": "import Link from \"next/link\";\nimport { ChevronDownIcon, SlashIcon } from \"lucide-react\";\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rlx-widgets/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nexport const Preview = () => {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\">\n              Components\n              <ChevronDownIcon />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n"
+        },
+        {
+          "name": "link-component",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Link from \\\"next/link\\\"\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@rlx-widgets/breadcrumb\\\"\\n\\nexport const Preview = () => {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/\\\">Home</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href=\\\"/components\\\">Components</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  )\\n}\\n\"",
+          "preview": "import Link from \"next/link\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rlx-widgets/breadcrumb\"\n\nexport const Preview = () => {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/\">Home</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href=\"/components\">Components</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n"
+        },
+        {
+          "name": "responsive",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport Link from \\\"next/link\\\";\\nimport { useMediaQuery } from \\\"rlx-hooks\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@rlx-widgets/breadcrumb\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerContent,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@rlx-widgets/drawer\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nconst items = [\\n  { href: \\\"#\\\", label: \\\"Home\\\" },\\n  { href: \\\"#\\\", label: \\\"Documentation\\\" },\\n  { href: \\\"#\\\", label: \\\"Building Your Application\\\" },\\n  { href: \\\"#\\\", label: \\\"Data Fetching\\\" },\\n  { label: \\\"Caching and Revalidating\\\" },\\n];\\n\\nconst ITEMS_TO_DISPLAY = 3;\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const isDesktop = useMediaQuery(\\\"(min-width: 768px)\\\");\\n\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink asChild>\\n            <Link href={items[0].href ?? \\\"/\\\"}>{items[0].label}</Link>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        {items.length > ITEMS_TO_DISPLAY ? (\\n          <>\\n            <BreadcrumbItem>\\n              {isDesktop ? (\\n                <DropdownMenu open={open} onOpenChange={setOpen}>\\n                  <DropdownMenuTrigger\\n                    className=\\\"flex items-center gap-1\\\"\\n                    aria-label=\\\"Toggle menu\\\"\\n                  >\\n                    <BreadcrumbEllipsis className=\\\"size-4\\\" />\\n                  </DropdownMenuTrigger>\\n                  <DropdownMenuContent align=\\\"start\\\">\\n                    {items.slice(1, -2).map((item, index) => (\\n                      <DropdownMenuItem key={index}>\\n                        <Link href={item.href ? item.href : \\\"#\\\"}>\\n                          {item.label}\\n                        </Link>\\n                      </DropdownMenuItem>\\n                    ))}\\n                  </DropdownMenuContent>\\n                </DropdownMenu>\\n              ) : (\\n                <Drawer open={open} onOpenChange={setOpen}>\\n                  <DrawerTrigger aria-label=\\\"Toggle Menu\\\">\\n                    <BreadcrumbEllipsis className=\\\"h-4 w-4\\\" />\\n                  </DrawerTrigger>\\n                  <DrawerContent>\\n                    <DrawerHeader className=\\\"text-left\\\">\\n                      <DrawerTitle>Navigate to</DrawerTitle>\\n                      <DrawerDescription>\\n                        Select a page to navigate to.\\n                      </DrawerDescription>\\n                    </DrawerHeader>\\n                    <div className=\\\"grid gap-1 px-4\\\">\\n                      {items.slice(1, -2).map((item, index) => (\\n                        <Link\\n                          key={index}\\n                          href={item.href ? item.href : \\\"#\\\"}\\n                          className=\\\"py-1 text-sm\\\"\\n                        >\\n                          {item.label}\\n                        </Link>\\n                      ))}\\n                    </div>\\n                    <DrawerFooter className=\\\"pt-4\\\">\\n                      <DrawerClose asChild>\\n                        <Button variant=\\\"outline\\\">Close</Button>\\n                      </DrawerClose>\\n                    </DrawerFooter>\\n                  </DrawerContent>\\n                </Drawer>\\n              )}\\n            </BreadcrumbItem>\\n            <BreadcrumbSeparator />\\n          </>\\n        ) : null}\\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\\n          <BreadcrumbItem key={index}>\\n            {item.href ? (\\n              <>\\n                <BreadcrumbLink\\n                  asChild\\n                  className=\\\"max-w-20 truncate md:max-w-none\\\"\\n                >\\n                  <Link href={item.href}>{item.label}</Link>\\n                </BreadcrumbLink>\\n                <BreadcrumbSeparator />\\n              </>\\n            ) : (\\n              <BreadcrumbPage className=\\\"max-w-20 truncate md:max-w-none\\\">\\n                {item.label}\\n              </BreadcrumbPage>\\n            )}\\n          </BreadcrumbItem>\\n        ))}\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { useMediaQuery } from \"rlx-hooks\";\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@rlx-widgets/breadcrumb\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@rlx-widgets/drawer\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nconst items = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Documentation\" },\n  { href: \"#\", label: \"Building Your Application\" },\n  { href: \"#\", label: \"Data Fetching\" },\n  { label: \"Caching and Revalidating\" },\n];\n\nconst ITEMS_TO_DISPLAY = 3;\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\");\n\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <Link href={items[0].href ?? \"/\"}>{items[0].label}</Link>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        {items.length > ITEMS_TO_DISPLAY ? (\n          <>\n            <BreadcrumbItem>\n              {isDesktop ? (\n                <DropdownMenu open={open} onOpenChange={setOpen}>\n                  <DropdownMenuTrigger\n                    className=\"flex items-center gap-1\"\n                    aria-label=\"Toggle menu\"\n                  >\n                    <BreadcrumbEllipsis className=\"size-4\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    {items.slice(1, -2).map((item, index) => (\n                      <DropdownMenuItem key={index}>\n                        <Link href={item.href ? item.href : \"#\"}>\n                          {item.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              ) : (\n                <Drawer open={open} onOpenChange={setOpen}>\n                  <DrawerTrigger aria-label=\"Toggle Menu\">\n                    <BreadcrumbEllipsis className=\"h-4 w-4\" />\n                  </DrawerTrigger>\n                  <DrawerContent>\n                    <DrawerHeader className=\"text-left\">\n                      <DrawerTitle>Navigate to</DrawerTitle>\n                      <DrawerDescription>\n                        Select a page to navigate to.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <div className=\"grid gap-1 px-4\">\n                      {items.slice(1, -2).map((item, index) => (\n                        <Link\n                          key={index}\n                          href={item.href ? item.href : \"#\"}\n                          className=\"py-1 text-sm\"\n                        >\n                          {item.label}\n                        </Link>\n                      ))}\n                    </div>\n                    <DrawerFooter className=\"pt-4\">\n                      <DrawerClose asChild>\n                        <Button variant=\"outline\">Close</Button>\n                      </DrawerClose>\n                    </DrawerFooter>\n                  </DrawerContent>\n                </Drawer>\n              )}\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n          </>\n        ) : null}\n        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n          <BreadcrumbItem key={index}>\n            {item.href ? (\n              <>\n                <BreadcrumbLink\n                  asChild\n                  className=\"max-w-20 truncate md:max-w-none\"\n                >\n                  <Link href={item.href}>{item.label}</Link>\n                </BreadcrumbLink>\n                <BreadcrumbSeparator />\n              </>\n            ) : (\n              <BreadcrumbPage className=\"max-w-20 truncate md:max-w-none\">\n                {item.label}\n              </BreadcrumbPage>\n            )}\n          </BreadcrumbItem>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "slug": "button",
+      "category": "widget",
+      "path": "/widgets/button",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-wrap items-center gap-2 md:flex-row\\\">\\n      <Button>Button</Button>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 md:flex-row\">\n      <Button>Button</Button>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "destructive",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return <Button variant=\\\"destructive\\\">Destructive</Button>;\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return <Button variant=\"destructive\">Destructive</Button>;\n};\n"
+        },
+        {
+          "name": "ghost",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return <Button variant=\\\"ghost\\\">Ghost</Button>;\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return <Button variant=\"ghost\">Ghost</Button>;\n};\n"
+        },
+        {
+          "name": "icon",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Button variant=\\\"secondary\\\" size=\\\"icon\\\" className=\\\"size-8\\\">\\n      <ChevronRightIcon />\\n    </Button>\\n  );\\n};\\n\"",
+          "preview": "import { ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return (\n    <Button variant=\"secondary\" size=\"icon\" className=\"size-8\">\n      <ChevronRightIcon />\n    </Button>\n  );\n};\n"
+        },
+        {
+          "name": "icon-with-text",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n      <ChevronRightIcon /> Go Right\\n    </Button>\\n  );\\n};\\n\"",
+          "preview": "import { ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return (\n    <Button variant=\"outline\" size=\"sm\">\n      <ChevronRightIcon /> Go Right\n    </Button>\n  );\n};\n"
+        },
+        {
+          "name": "link",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return <Button variant=\\\"link\\\">Link</Button>;\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return <Button variant=\"link\">Link</Button>;\n};\n"
+        },
+        {
+          "name": "link-button",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Button asChild>\\n      <Link href=\\\"/login\\\">Login</Link>\\n    </Button>\\n  );\\n};\\n\"",
+          "preview": "import Link from \"next/link\";\nimport { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return (\n    <Button asChild>\n      <Link href=\"/login\">Login</Link>\n    </Button>\n  );\n};\n"
+        },
+        {
+          "name": "loading",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Loader2Icon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Button size=\\\"sm\\\" disabled>\\n      <Loader2Icon className=\\\"animate-spin\\\" />\\n      Please wait\\n    </Button>\\n  );\\n};\\n\"",
+          "preview": "import { Loader2Icon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return (\n    <Button size=\"sm\" disabled>\n      <Loader2Icon className=\"animate-spin\" />\n      Please wait\n    </Button>\n  );\n};\n"
+        },
+        {
+          "name": "outline",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return <Button variant=\\\"outline\\\">Outline</Button>;\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return <Button variant=\"outline\">Outline</Button>;\n};\n"
+        },
+        {
+          "name": "secondary",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\n\\nexport const Preview = () => {\\n  return <Button variant=\\\"secondary\\\">Secondary</Button>;\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\n\nexport const Preview = () => {\n  return <Button variant=\"secondary\">Secondary</Button>;\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Button Group",
+      "slug": "button-group",
+      "category": "widget",
+      "path": "/widgets/button-group",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport {\\n  ArchiveIcon,\\n  ArrowLeftIcon,\\n  CalendarPlusIcon,\\n  ClockIcon,\\n  ListFilterPlusIcon,\\n  MailCheckIcon,\\n  MoreHorizontalIcon,\\n  TagIcon,\\n  Trash2Icon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuRadioGroup,\\n  DropdownMenuRadioItem,\\n  DropdownMenuSeparator,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nexport const Preview = () => {\\n  const [label, setLabel] = React.useState(\\\"personal\\\");\\n\\n  return (\\n    <ButtonGroup>\\n      <ButtonGroup className=\\\"hidden sm:flex\\\">\\n        <Button variant=\\\"outline\\\" size=\\\"icon\\\" aria-label=\\\"Go Back\\\">\\n          <ArrowLeftIcon />\\n        </Button>\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\">Archive</Button>\\n        <Button variant=\\\"outline\\\">Report</Button>\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\">Snooze</Button>\\n        <DropdownMenu>\\n          <DropdownMenuTrigger asChild>\\n            <Button variant=\\\"outline\\\" size=\\\"icon\\\" aria-label=\\\"More Options\\\">\\n              <MoreHorizontalIcon />\\n            </Button>\\n          </DropdownMenuTrigger>\\n          <DropdownMenuContent align=\\\"end\\\" className=\\\"w-52\\\">\\n            <DropdownMenuGroup>\\n              <DropdownMenuItem>\\n                <MailCheckIcon />\\n                Mark as Read\\n              </DropdownMenuItem>\\n              <DropdownMenuItem>\\n                <ArchiveIcon />\\n                Archive\\n              </DropdownMenuItem>\\n            </DropdownMenuGroup>\\n            <DropdownMenuSeparator />\\n            <DropdownMenuGroup>\\n              <DropdownMenuItem>\\n                <ClockIcon />\\n                Snooze\\n              </DropdownMenuItem>\\n              <DropdownMenuItem>\\n                <CalendarPlusIcon />\\n                Add to Calendar\\n              </DropdownMenuItem>\\n              <DropdownMenuItem>\\n                <ListFilterPlusIcon />\\n                Add to List\\n              </DropdownMenuItem>\\n              <DropdownMenuSub>\\n                <DropdownMenuSubTrigger>\\n                  <TagIcon />\\n                  Label As...\\n                </DropdownMenuSubTrigger>\\n                <DropdownMenuSubContent>\\n                  <DropdownMenuRadioGroup\\n                    value={label}\\n                    onValueChange={setLabel}\\n                  >\\n                    <DropdownMenuRadioItem value=\\\"personal\\\">\\n                      Personal\\n                    </DropdownMenuRadioItem>\\n                    <DropdownMenuRadioItem value=\\\"work\\\">\\n                      Work\\n                    </DropdownMenuRadioItem>\\n                    <DropdownMenuRadioItem value=\\\"other\\\">\\n                      Other\\n                    </DropdownMenuRadioItem>\\n                  </DropdownMenuRadioGroup>\\n                </DropdownMenuSubContent>\\n              </DropdownMenuSub>\\n            </DropdownMenuGroup>\\n            <DropdownMenuSeparator />\\n            <DropdownMenuGroup>\\n              <DropdownMenuItem variant=\\\"destructive\\\">\\n                <Trash2Icon />\\n                Trash\\n              </DropdownMenuItem>\\n            </DropdownMenuGroup>\\n          </DropdownMenuContent>\\n        </DropdownMenu>\\n      </ButtonGroup>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterPlusIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nexport const Preview = () => {\n  const [label, setLabel] = React.useState(\"personal\");\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\">\n              <MoreHorizontalIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" className=\"w-52\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <ListFilterPlusIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={setLabel}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">\n                      Personal\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">\n                      Work\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">\n                      Other\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "dropdown-menu",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport {\\n  AlertTriangleIcon,\\n  CheckIcon,\\n  ChevronDownIcon,\\n  CopyIcon,\\n  ShareIcon,\\n  TrashIcon,\\n  UserRoundXIcon,\\n  VolumeOffIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup>\\n      <Button variant=\\\"outline\\\">Follow</Button>\\n      <DropdownMenu>\\n        <DropdownMenuTrigger asChild>\\n          <Button variant=\\\"outline\\\" className=\\\"!pl-2\\\">\\n            <ChevronDownIcon />\\n          </Button>\\n        </DropdownMenuTrigger>\\n        <DropdownMenuContent align=\\\"end\\\" className=\\\"[--radius:1rem]\\\">\\n          <DropdownMenuGroup>\\n            <DropdownMenuItem>\\n              <VolumeOffIcon />\\n              Mute Conversation\\n            </DropdownMenuItem>\\n            <DropdownMenuItem>\\n              <CheckIcon />\\n              Mark as Read\\n            </DropdownMenuItem>\\n            <DropdownMenuItem>\\n              <AlertTriangleIcon />\\n              Report Conversation\\n            </DropdownMenuItem>\\n            <DropdownMenuItem>\\n              <UserRoundXIcon />\\n              Block User\\n            </DropdownMenuItem>\\n            <DropdownMenuItem>\\n              <ShareIcon />\\n              Share Conversation\\n            </DropdownMenuItem>\\n            <DropdownMenuItem>\\n              <CopyIcon />\\n              Copy Conversation\\n            </DropdownMenuItem>\\n          </DropdownMenuGroup>\\n          <DropdownMenuSeparator />\\n          <DropdownMenuGroup>\\n            <DropdownMenuItem variant=\\\"destructive\\\">\\n              <TrashIcon />\\n              Delete Conversation\\n            </DropdownMenuItem>\\n          </DropdownMenuGroup>\\n        </DropdownMenuContent>\\n      </DropdownMenu>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"!pl-2\">\n            <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "input",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { SearchIcon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup>\\n      <Input placeholder=\\\"Search...\\\" />\\n      <Button variant=\\\"outline\\\" aria-label=\\\"Search\\\">\\n        <SearchIcon />\\n      </Button>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup>\n      <Input placeholder=\"Search...\" />\n      <Button variant=\"outline\" aria-label=\"Search\">\n        <SearchIcon />\n      </Button>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "input-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { AudioLinesIcon, PlusIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"@rlx-widgets/tooltip\\\";\\n\\nexport const Preview = () => {\\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false);\\n\\n  return (\\n    <ButtonGroup className=\\\"[--radius:9999rem]\\\">\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\" size=\\\"icon\\\">\\n          <PlusIcon />\\n        </Button>\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <InputGroup>\\n          <InputGroupInput\\n            placeholder={\\n              voiceEnabled ? \\\"Record and send audio...\\\" : \\\"Send a message...\\\"\\n            }\\n            disabled={voiceEnabled}\\n          />\\n          <InputGroupAddon align=\\\"inline-end\\\">\\n            <Tooltip>\\n              <TooltipTrigger asChild>\\n                <InputGroupButton\\n                  onClick={() => setVoiceEnabled(!voiceEnabled)}\\n                  size=\\\"icon-xs\\\"\\n                  data-active={voiceEnabled}\\n                  className=\\\"data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100\\\"\\n                  aria-pressed={voiceEnabled}\\n                >\\n                  <AudioLinesIcon />\\n                </InputGroupButton>\\n              </TooltipTrigger>\\n              <TooltipContent>Voice Mode</TooltipContent>\\n            </Tooltip>\\n          </InputGroupAddon>\\n        </InputGroup>\\n      </ButtonGroup>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { AudioLinesIcon, PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@rlx-widgets/tooltip\";\n\nexport const Preview = () => {\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false);\n\n  return (\n    <ButtonGroup className=\"[--radius:9999rem]\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"icon\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <InputGroup>\n          <InputGroupInput\n            placeholder={\n              voiceEnabled ? \"Record and send audio...\" : \"Send a message...\"\n            }\n            disabled={voiceEnabled}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  onClick={() => setVoiceEnabled(!voiceEnabled)}\n                  size=\"icon-xs\"\n                  data-active={voiceEnabled}\n                  className=\"data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100\"\n                  aria-pressed={voiceEnabled}\n                >\n                  <AudioLinesIcon />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n      </ButtonGroup>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "nested",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { ArrowLeftIcon, ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup>\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          1\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          2\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          3\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          4\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          5\\n        </Button>\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\" size=\\\"icon-sm\\\" aria-label=\\\"Previous\\\">\\n          <ArrowLeftIcon />\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"icon-sm\\\" aria-label=\\\"Next\\\">\\n          <ArrowRightIcon />\\n        </Button>\\n      </ButtonGroup>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n          <ArrowLeftIcon />\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "orientation",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport { MinusIcon, PlusIcon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup\\n      orientation=\\\"vertical\\\"\\n      aria-label=\\\"Media controls\\\"\\n      className=\\\"h-fit\\\"\\n    >\\n      <Button variant=\\\"outline\\\" size=\\\"icon\\\">\\n        <PlusIcon />\\n      </Button>\\n      <Button variant=\\\"outline\\\" size=\\\"icon\\\">\\n        <MinusIcon />\\n      </Button>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup\n      orientation=\"vertical\"\n      aria-label=\"Media controls\"\n      className=\"h-fit\"\n    >\n      <Button variant=\"outline\" size=\"icon\">\n        <PlusIcon />\n      </Button>\n      <Button variant=\"outline\" size=\"icon\">\n        <MinusIcon />\n      </Button>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "popover",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { BotIcon, ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport { Separator } from \\\"@rlx-widgets/separator\\\";\\nimport { Textarea } from \\\"@rlx-widgets/textarea\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup>\\n      <Button variant=\\\"outline\\\">\\n        <BotIcon /> Copilot\\n      </Button>\\n      <Popover>\\n        <PopoverTrigger asChild>\\n          <Button variant=\\\"outline\\\" size=\\\"icon\\\" aria-label=\\\"Open Popover\\\">\\n            <ChevronDownIcon />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent align=\\\"end\\\" className=\\\"rounded-xl p-0 text-sm\\\">\\n          <div className=\\\"px-4 py-3\\\">\\n            <div className=\\\"text-sm font-medium\\\">Agent Tasks</div>\\n          </div>\\n          <Separator />\\n          <div className=\\\"p-4 text-sm *:[p:not(:last-child)]:mb-2\\\">\\n            <Textarea\\n              placeholder=\\\"Describe your task in natural language.\\\"\\n              className=\\\"mb-4 resize-none\\\"\\n            />\\n            <p className=\\\"font-medium\\\">Start a new task with Copilot</p>\\n            <p className=\\\"text-muted-foreground\\\">\\n              Describe your task in natural language. Copilot will work in the\\n              background and open a pull request for your review.\\n            </p>\\n          </div>\\n        </PopoverContent>\\n      </Popover>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "import { BotIcon, ChevronDownIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport { Separator } from \"@rlx-widgets/separator\";\nimport { Textarea } from \"@rlx-widgets/textarea\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\">\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "select",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Select, SelectContent, SelectItem, SelectTrigger } from \\\"@rlx-widgets/select\\\";\\n\\nconst CURRENCIES = [\\n  {\\n    value: \\\"$\\\",\\n    label: \\\"US Dollar\\\",\\n  },\\n  {\\n    value: \\\"€\\\",\\n    label: \\\"Euro\\\",\\n  },\\n  {\\n    value: \\\"£\\\",\\n    label: \\\"British Pound\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  const [currency, setCurrency] = React.useState(\\\"$\\\");\\n\\n  return (\\n    <ButtonGroup>\\n      <ButtonGroup>\\n        <Select value={currency} onValueChange={setCurrency}>\\n          <SelectTrigger className=\\\"font-mono\\\">{currency}</SelectTrigger>\\n          <SelectContent className=\\\"min-w-24\\\">\\n            {CURRENCIES.map((currency) => (\\n              <SelectItem key={currency.value} value={currency.value}>\\n                {currency.value}{\\\" \\\"}\\n                <span className=\\\"text-muted-foreground\\\">{currency.label}</span>\\n              </SelectItem>\\n            ))}\\n          </SelectContent>\\n        </Select>\\n        <Input placeholder=\\\"10.00\\\" pattern=\\\"[0-9]*\\\" />\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <Button aria-label=\\\"Send\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <ArrowRightIcon />\\n        </Button>\\n      </ButtonGroup>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Select, SelectContent, SelectItem, SelectTrigger } from \"@rlx-widgets/select\";\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n];\n\nexport const Preview = () => {\n  const [currency, setCurrency] = React.useState(\"$\");\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            {CURRENCIES.map((currency) => (\n              <SelectItem key={currency.value} value={currency.value}>\n                {currency.value}{\" \"}\n                <span className=\"text-muted-foreground\">{currency.label}</span>\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "separator",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup, ButtonGroupSeparator } from \\\"@rlx-widgets/button-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup>\\n      <Button variant=\\\"secondary\\\" size=\\\"sm\\\">\\n        Copy\\n      </Button>\\n      <ButtonGroupSeparator />\\n      <Button variant=\\\"secondary\\\" size=\\\"sm\\\">\\n        Paste\\n      </Button>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@rlx-widgets/button-group\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup>\n      <Button variant=\"secondary\" size=\"sm\">\n        Copy\n      </Button>\n      <ButtonGroupSeparator />\n      <Button variant=\"secondary\" size=\"sm\">\n        Paste\n      </Button>\n    </ButtonGroup>\n  );\n};\n"
+        },
+        {
+          "name": "size",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport { PlusIcon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-8\\\">\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          Small\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          Button\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          Group\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"icon-sm\\\">\\n          <PlusIcon />\\n        </Button>\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\">Default</Button>\\n        <Button variant=\\\"outline\\\">Button</Button>\\n        <Button variant=\\\"outline\\\">Group</Button>\\n        <Button variant=\\\"outline\\\" size=\\\"icon\\\">\\n          <PlusIcon />\\n        </Button>\\n      </ButtonGroup>\\n      <ButtonGroup>\\n        <Button variant=\\\"outline\\\" size=\\\"lg\\\">\\n          Large\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"lg\\\">\\n          Button\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"lg\\\">\\n          Group\\n        </Button>\\n        <Button variant=\\\"outline\\\" size=\\\"icon-lg\\\">\\n          <PlusIcon />\\n        </Button>\\n      </ButtonGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-col items-start gap-8\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          Small\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Button\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Group\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Default</Button>\n        <Button variant=\"outline\">Button</Button>\n        <Button variant=\"outline\">Group</Button>\n        <Button variant=\"outline\" size=\"icon\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"lg\">\n          Large\n        </Button>\n        <Button variant=\"outline\" size=\"lg\">\n          Button\n        </Button>\n        <Button variant=\"outline\" size=\"lg\">\n          Group\n        </Button>\n        <Button variant=\"outline\" size=\"icon-lg\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "split",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Plus } from \\\"lucide-react\\\";\\nimport { ButtonGroup, ButtonGroupSeparator } from \\\"@rlx-widgets/button-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ButtonGroup>\\n      <Button variant=\\\"secondary\\\">Button</Button>\\n      <ButtonGroupSeparator />\\n      <Button size=\\\"icon\\\" variant=\\\"secondary\\\">\\n        <Plus />\\n      </Button>\\n    </ButtonGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Plus } from \"lucide-react\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@rlx-widgets/button-group\";\n\nexport const Preview = () => {\n  return (\n    <ButtonGroup>\n      <Button variant=\"secondary\">Button</Button>\n      <ButtonGroupSeparator />\n      <Button size=\"icon\" variant=\"secondary\">\n        <Plus />\n      </Button>\n    </ButtonGroup>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Calendar",
+      "slug": "calendar",
+      "category": "widget",
+      "path": "/widgets/calendar",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "date-and-time-picker",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const [date, setDate] = React.useState<Date | undefined>(undefined);\\n\\n  return (\\n    <div className=\\\"flex gap-4\\\">\\n      <div className=\\\"flex flex-col gap-3\\\">\\n        <Label htmlFor=\\\"date-picker\\\" className=\\\"px-1\\\">\\n          Date\\n        </Label>\\n        <Popover open={open} onOpenChange={setOpen}>\\n          <PopoverTrigger asChild>\\n            <Button\\n              variant=\\\"outline\\\"\\n              id=\\\"date-picker\\\"\\n              className=\\\"w-32 justify-between font-normal\\\"\\n            >\\n              {date ? date.toLocaleDateString() : \\\"Select date\\\"}\\n              <ChevronDownIcon />\\n            </Button>\\n          </PopoverTrigger>\\n          <PopoverContent className=\\\"w-auto overflow-hidden p-0\\\" align=\\\"start\\\">\\n            <Calendar\\n              mode=\\\"single\\\"\\n              selected={date}\\n              captionLayout=\\\"dropdown\\\"\\n              onSelect={(date) => {\\n                setDate(date);\\n                setOpen(false);\\n              }}\\n            />\\n          </PopoverContent>\\n        </Popover>\\n      </div>\\n      <div className=\\\"flex flex-col gap-3\\\">\\n        <Label htmlFor=\\\"time-picker\\\" className=\\\"px-1\\\">\\n          Time\\n        </Label>\\n        <Input\\n          type=\\\"time\\\"\\n          id=\\\"time-picker\\\"\\n          step=\\\"1\\\"\\n          defaultValue=\\\"10:30:00\\\"\\n          className=\\\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const [date, setDate] = React.useState<Date | undefined>(undefined);\n\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"date-picker\" className=\"px-1\">\n          Date\n        </Label>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? date.toLocaleDateString() : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              onSelect={(date) => {\n                setDate(date);\n                setOpen(false);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"time-picker\" className=\"px-1\">\n          Time\n        </Label>\n        <Input\n          type=\"time\"\n          id=\"time-picker\"\n          step=\"1\"\n          defaultValue=\"10:30:00\"\n          className=\"bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </div>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "date-of-birth",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const [date, setDate] = React.useState<Date | undefined>(undefined);\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-3\\\">\\n      <Label htmlFor=\\\"date\\\" className=\\\"px-1\\\">\\n        Date of birth\\n      </Label>\\n      <Popover open={open} onOpenChange={setOpen}>\\n        <PopoverTrigger asChild>\\n          <Button\\n            variant=\\\"outline\\\"\\n            id=\\\"date\\\"\\n            className=\\\"w-48 justify-between font-normal\\\"\\n          >\\n            {date ? date.toLocaleDateString() : \\\"Select date\\\"}\\n            <ChevronDownIcon />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"w-auto overflow-hidden p-0\\\" align=\\\"start\\\">\\n          <Calendar\\n            mode=\\\"single\\\"\\n            selected={date}\\n            captionLayout=\\\"dropdown\\\"\\n            onSelect={(date) => {\\n              setDate(date);\\n              setOpen(false);\\n            }}\\n          />\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const [date, setDate] = React.useState<Date | undefined>(undefined);\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Date of birth\n      </Label>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id=\"date\"\n            className=\"w-48 justify-between font-normal\"\n          >\n            {date ? date.toLocaleDateString() : \"Select date\"}\n            <ChevronDownIcon />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            captionLayout=\"dropdown\"\n            onSelect={(date) => {\n              setDate(date);\n              setOpen(false);\n            }}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\n\\nexport function Preview() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n\\n  return (\\n    <Calendar\\n      mode=\\\"single\\\"\\n      selected={date}\\n      onSelect={setDate}\\n      className=\\\"rounded-md border shadow-sm\\\"\\n      captionLayout=\\\"dropdown\\\"\\n    />\\n  );\\n}\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\n\nexport function Preview() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      mode=\"single\"\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-md border shadow-sm\"\n      captionLayout=\"dropdown\"\n    />\n  );\n}\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\"\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\nimport { format } from \\\"date-fns\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { z } from \\\"zod\\\";\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"@rlx-widgets/form\\\";\\n\\nconst FormSchema = z.object({\\n  dob: z.date().refine((val) => val instanceof Date && !isNaN(val.getTime()), {\\n    message: \\\"A date of birth is required.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"space-y-8\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"dob\\\"\\n          render={({ field }) => (\\n            <FormItem className=\\\"flex flex-col\\\">\\n              <FormLabel>Date of birth</FormLabel>\\n              <Popover>\\n                <PopoverTrigger asChild>\\n                  <FormControl>\\n                    <Button\\n                      variant={\\\"outline\\\"}\\n                      className={cn(\\n                        \\\"w-[240px] pl-3 text-left font-normal\\\",\\n                        !field.value && \\\"text-muted-foreground\\\"\\n                      )}\\n                    >\\n                      {field.value ? (\\n                        format(field.value, \\\"PPP\\\")\\n                      ) : (\\n                        <span>Pick a date</span>\\n                      )}\\n                      <CalendarIcon className=\\\"ml-auto h-4 w-4 opacity-50\\\" />\\n                    </Button>\\n                  </FormControl>\\n                </PopoverTrigger>\\n                <PopoverContent className=\\\"w-auto p-0\\\" align=\\\"start\\\">\\n                  <Calendar\\n                    mode=\\\"single\\\"\\n                    selected={field.value}\\n                    onSelect={field.onChange}\\n                    disabled={(date) =>\\n                      date > new Date() || date < new Date(\\\"1900-01-01\\\")\\n                    }\\n                    captionLayout=\\\"dropdown\\\"\\n                  />\\n                </PopoverContent>\\n              </Popover>\\n              <FormDescription>\\n                Your date of birth is used to calculate your age.\\n              </FormDescription>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\"\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { format } from \"date-fns\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\nimport { toast } from \"sonner\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@rlx-widgets/form\";\n\nconst FormSchema = z.object({\n  dob: z.date().refine((val) => val instanceof Date && !isNaN(val.getTime()), {\n    message: \"A date of birth is required.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    captionLayout=\"dropdown\"\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        },
+        {
+          "name": "month-year-selector",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@rlx-widgets/select\\\";\\n\\nexport function Preview() {\\n  const [dropdown, setDropdown] =\\n    React.useState<React.ComponentProps<typeof Calendar>[\\\"captionLayout\\\"]>(\\n      \\\"dropdown\\\"\\n    );\\n  const [date, setDate] = React.useState<Date | undefined>(\\n    new Date(2025, 5, 12)\\n  );\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <Calendar\\n        mode=\\\"single\\\"\\n        defaultMonth={date}\\n        selected={date}\\n        onSelect={setDate}\\n        captionLayout={dropdown}\\n        className=\\\"rounded-lg border shadow-sm\\\"\\n      />\\n      <div className=\\\"flex flex-col gap-3\\\">\\n        <Label htmlFor=\\\"dropdown\\\" className=\\\"px-1\\\">\\n          Dropdown\\n        </Label>\\n        <Select\\n          value={dropdown}\\n          onValueChange={(value) =>\\n            setDropdown(\\n              value as React.ComponentProps<typeof Calendar>[\\\"captionLayout\\\"]\\n            )\\n          }\\n        >\\n          <SelectTrigger\\n            id=\\\"dropdown\\\"\\n            size=\\\"sm\\\"\\n            className=\\\"bg-background w-full\\\"\\n          >\\n            <SelectValue placeholder=\\\"Dropdown\\\" />\\n          </SelectTrigger>\\n          <SelectContent align=\\\"center\\\">\\n            <SelectItem value=\\\"dropdown\\\">Month and Year</SelectItem>\\n            <SelectItem value=\\\"dropdown-months\\\">Month Only</SelectItem>\\n            <SelectItem value=\\\"dropdown-years\\\">Year Only</SelectItem>\\n          </SelectContent>\\n        </Select>\\n      </div>\\n    </div>\\n  );\\n}\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\nimport { Label } from \"@rlx-widgets/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@rlx-widgets/select\";\n\nexport function Preview() {\n  const [dropdown, setDropdown] =\n    React.useState<React.ComponentProps<typeof Calendar>[\"captionLayout\"]>(\n      \"dropdown\"\n    );\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  );\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        captionLayout={dropdown}\n        className=\"rounded-lg border shadow-sm\"\n      />\n      <div className=\"flex flex-col gap-3\">\n        <Label htmlFor=\"dropdown\" className=\"px-1\">\n          Dropdown\n        </Label>\n        <Select\n          value={dropdown}\n          onValueChange={(value) =>\n            setDropdown(\n              value as React.ComponentProps<typeof Calendar>[\"captionLayout\"]\n            )\n          }\n        >\n          <SelectTrigger\n            id=\"dropdown\"\n            size=\"sm\"\n            className=\"bg-background w-full\"\n          >\n            <SelectValue placeholder=\"Dropdown\" />\n          </SelectTrigger>\n          <SelectContent align=\"center\">\n            <SelectItem value=\"dropdown\">Month and Year</SelectItem>\n            <SelectItem value=\"dropdown-months\">Month Only</SelectItem>\n            <SelectItem value=\"dropdown-years\">Year Only</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  );\n}\n"
+        },
+        {
+          "name": "natural-language-picker",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { parseDate } from \\\"chrono-node\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\nfunction formatDate(date: Date | undefined) {\\n  if (!date) {\\n    return \\\"\\\";\\n  }\\n\\n  return date.toLocaleDateString(\\\"en-US\\\", {\\n    day: \\\"2-digit\\\",\\n    month: \\\"long\\\",\\n    year: \\\"numeric\\\",\\n  });\\n}\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const [value, setValue] = React.useState(\\\"In 2 days\\\");\\n  const [date, setDate] = React.useState<Date | undefined>(\\n    parseDate(value) || undefined\\n  );\\n  const [month, setMonth] = React.useState<Date | undefined>(date);\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-3\\\">\\n      <Label htmlFor=\\\"date\\\" className=\\\"px-1\\\">\\n        Schedule Date\\n      </Label>\\n      <div className=\\\"relative flex gap-2\\\">\\n        <Input\\n          id=\\\"date\\\"\\n          value={value}\\n          placeholder=\\\"Tomorrow or next week\\\"\\n          className=\\\"bg-background pr-10\\\"\\n          onChange={(e) => {\\n            setValue(e.target.value);\\n            const date = parseDate(e.target.value);\\n            if (date) {\\n              setDate(date);\\n              setMonth(date);\\n            }\\n          }}\\n          onKeyDown={(e) => {\\n            if (e.key === \\\"ArrowDown\\\") {\\n              e.preventDefault();\\n              setOpen(true);\\n            }\\n          }}\\n        />\\n        <Popover open={open} onOpenChange={setOpen}>\\n          <PopoverTrigger asChild>\\n            <Button\\n              id=\\\"date-picker\\\"\\n              variant=\\\"ghost\\\"\\n              className=\\\"absolute top-1/2 right-2 size-6 -translate-y-1/2\\\"\\n            >\\n              <CalendarIcon className=\\\"size-3.5\\\" />\\n              <span className=\\\"sr-only\\\">Select date</span>\\n            </Button>\\n          </PopoverTrigger>\\n          <PopoverContent className=\\\"w-auto overflow-hidden p-0\\\" align=\\\"end\\\">\\n            <Calendar\\n              mode=\\\"single\\\"\\n              selected={date}\\n              captionLayout=\\\"dropdown\\\"\\n              month={month}\\n              onMonthChange={setMonth}\\n              onSelect={(date) => {\\n                setDate(date);\\n                setValue(formatDate(date));\\n                setOpen(false);\\n              }}\\n            />\\n          </PopoverContent>\\n        </Popover>\\n      </div>\\n      <div className=\\\"text-muted-foreground px-1 text-sm\\\">\\n        Your post will be published on{\\\" \\\"}\\n        <span className=\\\"font-medium\\\">{formatDate(date)}</span>.\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { parseDate } from \"chrono-node\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return \"\";\n  }\n\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"2-digit\",\n    month: \"long\",\n    year: \"numeric\",\n  });\n}\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(\"In 2 days\");\n  const [date, setDate] = React.useState<Date | undefined>(\n    parseDate(value) || undefined\n  );\n  const [month, setMonth] = React.useState<Date | undefined>(date);\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <Label htmlFor=\"date\" className=\"px-1\">\n        Schedule Date\n      </Label>\n      <div className=\"relative flex gap-2\">\n        <Input\n          id=\"date\"\n          value={value}\n          placeholder=\"Tomorrow or next week\"\n          className=\"bg-background pr-10\"\n          onChange={(e) => {\n            setValue(e.target.value);\n            const date = parseDate(e.target.value);\n            if (date) {\n              setDate(date);\n              setMonth(date);\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              setOpen(true);\n            }\n          }}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker\"\n              variant=\"ghost\"\n              className=\"absolute top-1/2 right-2 size-6 -translate-y-1/2\"\n            >\n              <CalendarIcon className=\"size-3.5\" />\n              <span className=\"sr-only\">Select date</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              month={month}\n              onMonthChange={setMonth}\n              onSelect={(date) => {\n                setDate(date);\n                setValue(formatDate(date));\n                setOpen(false);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className=\"text-muted-foreground px-1 text-sm\">\n        Your post will be published on{\" \"}\n        <span className=\"font-medium\">{formatDate(date)}</span>.\n      </div>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "range",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Calendar } from \\\"@rlx-widgets/calendar\\\";\\n\\nexport const Preview = () => {\\n  const [date, setDate] = React.useState<Date | undefined>(\\n    new Date(2025, 5, 12)\\n  );\\n\\n  return (\\n    <Calendar\\n      mode=\\\"single\\\"\\n      defaultMonth={date}\\n      numberOfMonths={2}\\n      selected={date}\\n      onSelect={setDate}\\n      className=\\\"rounded-lg border shadow-sm\\\"\\n    />\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Calendar } from \"@rlx-widgets/calendar\";\n\nexport const Preview = () => {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  );\n\n  return (\n    <Calendar\n      mode=\"single\"\n      defaultMonth={date}\n      numberOfMonths={2}\n      selected={date}\n      onSelect={setDate}\n      className=\"rounded-lg border shadow-sm\"\n    />\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Card",
+      "slug": "card",
+      "category": "widget",
+      "path": "/widgets/card",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Card,\\n  CardAction,\\n  CardContent,\\n  CardDescription,\\n  CardFooter,\\n  CardHeader,\\n  CardTitle,\\n} from \\\"@rlx-widgets/card\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Card className=\\\"w-full max-w-sm\\\">\\n      <CardHeader>\\n        <CardTitle>Login to your account</CardTitle>\\n        <CardDescription>\\n          Enter your email below to login to your account\\n        </CardDescription>\\n        <CardAction>\\n          <Button variant=\\\"link\\\">Sign Up</Button>\\n        </CardAction>\\n      </CardHeader>\\n      <CardContent>\\n        <form>\\n          <div className=\\\"flex flex-col gap-6\\\">\\n            <div className=\\\"grid gap-2\\\">\\n              <Label htmlFor=\\\"email\\\">Email</Label>\\n              <Input\\n                id=\\\"email\\\"\\n                type=\\\"email\\\"\\n                placeholder=\\\"m@example.com\\\"\\n                required\\n              />\\n            </div>\\n            <div className=\\\"grid gap-2\\\">\\n              <div className=\\\"flex items-center\\\">\\n                <Label htmlFor=\\\"password\\\">Password</Label>\\n                <a\\n                  href=\\\"#\\\"\\n                  className=\\\"ml-auto inline-block text-sm underline-offset-4 hover:underline\\\"\\n                >\\n                  Forgot your password?\\n                </a>\\n              </div>\\n              <Input id=\\\"password\\\" type=\\\"password\\\" required />\\n            </div>\\n          </div>\\n        </form>\\n      </CardContent>\\n      <CardFooter className=\\\"flex-col gap-2\\\">\\n        <Button type=\\\"submit\\\" className=\\\"w-full\\\">\\n          Login\\n        </Button>\\n        <Button variant=\\\"outline\\\" className=\\\"w-full\\\">\\n          Login with Google\\n        </Button>\\n      </CardFooter>\\n    </Card>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@rlx-widgets/card\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\n\nexport const Preview = () => {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Login to your account</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n        <CardAction>\n          <Button variant=\"link\">Sign Up</Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <a\n                  href=\"#\"\n                  className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                >\n                  Forgot your password?\n                </a>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2\">\n        <Button type=\"submit\" className=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" className=\"w-full\">\n          Login with Google\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Carousel",
+      "slug": "carousel",
+      "category": "widget",
+      "path": "/widgets/carousel",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "api",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\n\\nimport { Card, CardContent } from \\\"@rlx-widgets/card\\\";\\nimport {\\n  Carousel,\\n  CarouselContent,\\n  CarouselItem,\\n  CarouselNext,\\n  CarouselPrevious,\\n  type CarouselApi,\\n} from \\\"@rlx-widgets/carousel\\\";\\n\\nexport const Preview = () => {\\n  const [api, setApi] = React.useState<CarouselApi>();\\n  const [current, setCurrent] = React.useState(0);\\n  const [count, setCount] = React.useState(0);\\n\\n  React.useEffect(() => {\\n    if (!api) {\\n      return;\\n    }\\n\\n    setCount(api.scrollSnapList().length);\\n    setCurrent(api.selectedScrollSnap() + 1);\\n\\n    api.on(\\\"select\\\", () => {\\n      setCurrent(api.selectedScrollSnap() + 1);\\n    });\\n  }, [api]);\\n\\n  return (\\n    <div className=\\\"mx-auto max-w-xs\\\">\\n      <Carousel setApi={setApi} className=\\\"w-full max-w-xs\\\">\\n        <CarouselContent>\\n          {Array.from({ length: 5 }).map((_, index) => (\\n            <CarouselItem key={index}>\\n              <Card>\\n                <CardContent className=\\\"flex aspect-square items-center justify-center p-6\\\">\\n                  <span className=\\\"text-4xl font-semibold\\\">{index + 1}</span>\\n                </CardContent>\\n              </Card>\\n            </CarouselItem>\\n          ))}\\n        </CarouselContent>\\n        <CarouselPrevious />\\n        <CarouselNext />\\n      </Carousel>\\n      <div className=\\\"text-muted-foreground py-2 text-center text-sm\\\">\\n        Slide {current} of {count}\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Card, CardContent } from \"@rlx-widgets/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@rlx-widgets/carousel\";\n\nexport const Preview = () => {\n  const [api, setApi] = React.useState<CarouselApi>();\n  const [current, setCurrent] = React.useState(0);\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap() + 1);\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1);\n    });\n  }, [api]);\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"text-muted-foreground py-2 text-center text-sm\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\n\\nimport { Card, CardContent } from \\\"@rlx-widgets/card\\\";\\nimport {\\n  Carousel,\\n  CarouselContent,\\n  CarouselItem,\\n  CarouselNext,\\n  CarouselPrevious,\\n} from \\\"@rlx-widgets/carousel\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Carousel className=\\\"w-full max-w-xs\\\">\\n      <CarouselContent>\\n        {Array.from({ length: 5 }).map((_, index) => (\\n          <CarouselItem key={index}>\\n            <div className=\\\"p-1\\\">\\n              <Card>\\n                <CardContent className=\\\"flex aspect-square items-center justify-center p-6\\\">\\n                  <span className=\\\"text-4xl font-semibold\\\">{index + 1}</span>\\n                </CardContent>\\n              </Card>\\n            </div>\\n          </CarouselItem>\\n        ))}\\n      </CarouselContent>\\n      <CarouselPrevious />\\n      <CarouselNext />\\n    </Carousel>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\n\nimport { Card, CardContent } from \"@rlx-widgets/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@rlx-widgets/carousel\";\n\nexport const Preview = () => {\n  return (\n    <Carousel className=\"w-full max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n};\n"
+        },
+        {
+          "name": "orientation",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\n\\nimport { Card, CardContent } from \\\"@rlx-widgets/card\\\";\\nimport {\\n  Carousel,\\n  CarouselContent,\\n  CarouselItem,\\n  CarouselNext,\\n  CarouselPrevious,\\n} from \\\"@rlx-widgets/carousel\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Carousel\\n      opts={{\\n        align: \\\"start\\\",\\n      }}\\n      orientation=\\\"vertical\\\"\\n      className=\\\"w-full max-w-xs\\\"\\n    >\\n      <CarouselContent className=\\\"-mt-1 h-[200px]\\\">\\n        {Array.from({ length: 5 }).map((_, index) => (\\n          <CarouselItem key={index} className=\\\"pt-1 md:basis-1/2\\\">\\n            <div className=\\\"p-1\\\">\\n              <Card>\\n                <CardContent className=\\\"flex items-center justify-center p-6\\\">\\n                  <span className=\\\"text-3xl font-semibold\\\">{index + 1}</span>\\n                </CardContent>\\n              </Card>\\n            </div>\\n          </CarouselItem>\\n        ))}\\n      </CarouselContent>\\n      <CarouselPrevious />\\n      <CarouselNext />\\n    </Carousel>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\n\nimport { Card, CardContent } from \"@rlx-widgets/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@rlx-widgets/carousel\";\n\nexport const Preview = () => {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      orientation=\"vertical\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"-mt-1 h-[200px]\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pt-1 md:basis-1/2\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n};\n"
+        },
+        {
+          "name": "size",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\n\\nimport { Card, CardContent } from \\\"@rlx-widgets/card\\\";\\nimport {\\n  Carousel,\\n  CarouselContent,\\n  CarouselItem,\\n  CarouselNext,\\n  CarouselPrevious,\\n} from \\\"@rlx-widgets/carousel\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Carousel\\n      opts={{\\n        align: \\\"start\\\",\\n      }}\\n      className=\\\"w-full max-w-sm\\\"\\n    >\\n      <CarouselContent>\\n        {Array.from({ length: 5 }).map((_, index) => (\\n          <CarouselItem key={index} className=\\\"md:basis-1/2 lg:basis-1/3\\\">\\n            <div className=\\\"p-1\\\">\\n              <Card>\\n                <CardContent className=\\\"flex aspect-square items-center justify-center p-6\\\">\\n                  <span className=\\\"text-3xl font-semibold\\\">{index + 1}</span>\\n                </CardContent>\\n              </Card>\\n            </div>\\n          </CarouselItem>\\n        ))}\\n      </CarouselContent>\\n      <CarouselPrevious />\\n      <CarouselNext />\\n    </Carousel>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\n\nimport { Card, CardContent } from \"@rlx-widgets/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@rlx-widgets/carousel\";\n\nexport const Preview = () => {\n  return (\n    <Carousel\n      opts={{\n        align: \"start\",\n      }}\n      className=\"w-full max-w-sm\"\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n};\n"
+        },
+        {
+          "name": "spacing",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\n\\nimport { Card, CardContent } from \\\"@rlx-widgets/card\\\";\\nimport {\\n  Carousel,\\n  CarouselContent,\\n  CarouselItem,\\n  CarouselNext,\\n  CarouselPrevious,\\n} from \\\"@rlx-widgets/carousel\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Carousel className=\\\"w-full max-w-sm\\\">\\n      <CarouselContent className=\\\"-ml-1\\\">\\n        {Array.from({ length: 5 }).map((_, index) => (\\n          <CarouselItem key={index} className=\\\"pl-1 md:basis-1/2 lg:basis-1/3\\\">\\n            <div className=\\\"p-1\\\">\\n              <Card>\\n                <CardContent className=\\\"flex aspect-square items-center justify-center p-6\\\">\\n                  <span className=\\\"text-2xl font-semibold\\\">{index + 1}</span>\\n                </CardContent>\\n              </Card>\\n            </div>\\n          </CarouselItem>\\n        ))}\\n      </CarouselContent>\\n      <CarouselPrevious />\\n      <CarouselNext />\\n    </Carousel>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\n\nimport { Card, CardContent } from \"@rlx-widgets/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@rlx-widgets/carousel\";\n\nexport const Preview = () => {\n  return (\n    <Carousel className=\"w-full max-w-sm\">\n      <CarouselContent className=\"-ml-1\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index} className=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Checkbox",
+      "slug": "checkbox",
+      "category": "widget",
+      "path": "/widgets/checkbox",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\"\\n\\nimport { Checkbox } from \\\"@rlx-widgets/checkbox\\\"\\nimport { Label } from \\\"@rlx-widgets/label\\\"\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-col gap-6\\\">\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <Checkbox id=\\\"terms\\\" />\\n        <Label htmlFor=\\\"terms\\\">Accept terms and conditions</Label>\\n      </div>\\n      <div className=\\\"flex items-start gap-3\\\">\\n        <Checkbox id=\\\"terms-2\\\" defaultChecked />\\n        <div className=\\\"grid gap-2\\\">\\n          <Label htmlFor=\\\"terms-2\\\">Accept terms and conditions</Label>\\n          <p className=\\\"text-muted-foreground text-sm\\\">\\n            By clicking this checkbox, you agree to the terms and conditions.\\n          </p>\\n        </div>\\n      </div>\\n      <div className=\\\"flex items-start gap-3\\\">\\n        <Checkbox id=\\\"toggle\\\" disabled />\\n        <Label htmlFor=\\\"toggle\\\">Enable notifications</Label>\\n      </div>\\n      <Label className=\\\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\\\">\\n        <Checkbox\\n          id=\\\"toggle-2\\\"\\n          defaultChecked\\n          className=\\\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\\\"\\n        />\\n        <div className=\\\"grid gap-1.5 font-normal\\\">\\n          <p className=\\\"text-sm leading-none font-medium\\\">\\n            Enable notifications\\n          </p>\\n          <p className=\\\"text-muted-foreground text-sm\\\">\\n            You can enable or disable notifications at any time.\\n          </p>\\n        </div>\\n      </Label>\\n    </div>\\n  )\\n}\\n\"",
+          "preview": "\"use client\"\n\nimport { Checkbox } from \"@rlx-widgets/checkbox\"\nimport { Label } from \"@rlx-widgets/label\"\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n          <p className=\"text-muted-foreground text-sm\">\n            By clicking this checkbox, you agree to the terms and conditions.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"toggle\" disabled />\n        <Label htmlFor=\"toggle\">Enable notifications</Label>\n      </div>\n      <Label className=\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n        <Checkbox\n          id=\"toggle-2\"\n          defaultChecked\n          className=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n        />\n        <div className=\"grid gap-1.5 font-normal\">\n          <p className=\"text-sm leading-none font-medium\">\n            Enable notifications\n          </p>\n          <p className=\"text-muted-foreground text-sm\">\n            You can enable or disable notifications at any time.\n          </p>\n        </div>\n      </Label>\n    </div>\n  )\n}\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { z } from \\\"zod\\\";\\n\\nimport { Button } from \\\"rlx-widgets\\\";\\nimport { Checkbox } from \\\"rlx-widgets\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"rlx-widgets\\\";\\n\\nconst items = [\\n  {\\n    id: \\\"recents\\\",\\n    label: \\\"Recents\\\",\\n  },\\n  {\\n    id: \\\"home\\\",\\n    label: \\\"Home\\\",\\n  },\\n  {\\n    id: \\\"applications\\\",\\n    label: \\\"Applications\\\",\\n  },\\n  {\\n    id: \\\"desktop\\\",\\n    label: \\\"Desktop\\\",\\n  },\\n  {\\n    id: \\\"downloads\\\",\\n    label: \\\"Downloads\\\",\\n  },\\n  {\\n    id: \\\"documents\\\",\\n    label: \\\"Documents\\\",\\n  },\\n] as const;\\n\\nconst FormSchema = z.object({\\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\\n    message: \\\"You have to select at least one item.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n    defaultValues: {\\n      items: [\\\"recents\\\", \\\"home\\\"],\\n    },\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"space-y-8\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"items\\\"\\n          render={() => (\\n            <FormItem>\\n              <div className=\\\"mb-4\\\">\\n                <FormLabel className=\\\"text-base\\\">Sidebar</FormLabel>\\n                <FormDescription>\\n                  Select the items you want to display in the sidebar.\\n                </FormDescription>\\n              </div>\\n              {items.map((item) => (\\n                <FormField\\n                  key={item.id}\\n                  control={form.control}\\n                  name=\\\"items\\\"\\n                  render={({ field }) => {\\n                    return (\\n                      <FormItem\\n                        key={item.id}\\n                        className=\\\"flex flex-row items-center gap-2\\\"\\n                      >\\n                        <FormControl>\\n                          <Checkbox\\n                            checked={field.value?.includes(item.id)}\\n                            onCheckedChange={(checked) => {\\n                              return checked\\n                                ? field.onChange([...field.value, item.id])\\n                                : field.onChange(\\n                                    field.value?.filter(\\n                                      (value) => value !== item.id\\n                                    )\\n                                  );\\n                            }}\\n                          />\\n                        </FormControl>\\n                        <FormLabel className=\\\"text-sm font-normal\\\">\\n                          {item.label}\\n                        </FormLabel>\\n                      </FormItem>\\n                    );\\n                  }}\\n                />\\n              ))}\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\n\nimport { Button } from \"rlx-widgets\";\nimport { Checkbox } from \"rlx-widgets\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"rlx-widgets\";\n\nconst items = [\n  {\n    id: \"recents\",\n    label: \"Recents\",\n  },\n  {\n    id: \"home\",\n    label: \"Home\",\n  },\n  {\n    id: \"applications\",\n    label: \"Applications\",\n  },\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n  },\n  {\n    id: \"downloads\",\n    label: \"Downloads\",\n  },\n  {\n    id: \"documents\",\n    label: \"Documents\",\n  },\n] as const;\n\nconst FormSchema = z.object({\n  items: z.array(z.string()).refine((value) => value.some((item) => item), {\n    message: \"You have to select at least one item.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      items: [\"recents\", \"home\"],\n    },\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"items\"\n          render={() => (\n            <FormItem>\n              <div className=\"mb-4\">\n                <FormLabel className=\"text-base\">Sidebar</FormLabel>\n                <FormDescription>\n                  Select the items you want to display in the sidebar.\n                </FormDescription>\n              </div>\n              {items.map((item) => (\n                <FormField\n                  key={item.id}\n                  control={form.control}\n                  name=\"items\"\n                  render={({ field }) => {\n                    return (\n                      <FormItem\n                        key={item.id}\n                        className=\"flex flex-row items-center gap-2\"\n                      >\n                        <FormControl>\n                          <Checkbox\n                            checked={field.value?.includes(item.id)}\n                            onCheckedChange={(checked) => {\n                              return checked\n                                ? field.onChange([...field.value, item.id])\n                                : field.onChange(\n                                    field.value?.filter(\n                                      (value) => value !== item.id\n                                    )\n                                  );\n                            }}\n                          />\n                        </FormControl>\n                        <FormLabel className=\"text-sm font-normal\">\n                          {item.label}\n                        </FormLabel>\n                      </FormItem>\n                    );\n                  }}\n                />\n              ))}\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Collapsible",
+      "slug": "collapsible",
+      "category": "widget",
+      "path": "/widgets/collapsible",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ChevronsUpDown } from \\\"lucide-react\\\";\\nimport {\\n  Collapsible,\\n  CollapsibleContent,\\n  CollapsibleTrigger,\\n} from \\\"@rlx-widgets/collapsible\\\";\\n\\nexport const Preview = () => {\\n  const [isOpen, setIsOpen] = React.useState(false);\\n\\n  return (\\n    <Collapsible\\n      open={isOpen}\\n      onOpenChange={setIsOpen}\\n      className=\\\"flex w-[350px] flex-col gap-2\\\"\\n    >\\n      <div className=\\\"flex items-center justify-between gap-4 px-4\\\">\\n        <h4 className=\\\"text-sm font-semibold\\\">\\n          @peduarte starred 3 repositories\\n        </h4>\\n        <CollapsibleTrigger asChild>\\n          <Button variant=\\\"ghost\\\" size=\\\"icon\\\" className=\\\"size-8\\\">\\n            <ChevronsUpDown />\\n            <span className=\\\"sr-only\\\">Toggle</span>\\n          </Button>\\n        </CollapsibleTrigger>\\n      </div>\\n      <div className=\\\"rounded-md border px-4 py-2 font-mono text-sm\\\">\\n        @radix-ui/primitives\\n      </div>\\n      <CollapsibleContent className=\\\"flex flex-col gap-2\\\">\\n        <div className=\\\"rounded-md border px-4 py-2 font-mono text-sm\\\">\\n          @radix-ui/colors\\n        </div>\\n        <div className=\\\"rounded-md border px-4 py-2 font-mono text-sm\\\">\\n          @stitches/react\\n        </div>\\n      </CollapsibleContent>\\n    </Collapsible>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ChevronsUpDown } from \"lucide-react\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@rlx-widgets/collapsible\";\n\nexport const Preview = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"flex w-[350px] flex-col gap-2\"\n    >\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n            <ChevronsUpDown />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Combobox",
+      "slug": "combobox",
+      "category": "widget",
+      "path": "/widgets/combobox",
+      "sourcePath": "libs/rlx-widgets/combobox",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Check, ChevronsUpDown } from \\\"lucide-react\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@rlx-widgets/command\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\nconst frameworks = [\\n  {\\n    value: \\\"next.js\\\",\\n    label: \\\"Next.js\\\",\\n  },\\n  {\\n    value: \\\"sveltekit\\\",\\n    label: \\\"SvelteKit\\\",\\n  },\\n  {\\n    value: \\\"nuxt.js\\\",\\n    label: \\\"Nuxt.js\\\",\\n  },\\n  {\\n    value: \\\"remix\\\",\\n    label: \\\"Remix\\\",\\n  },\\n  {\\n    value: \\\"astro\\\",\\n    label: \\\"Astro\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const [value, setValue] = React.useState(\\\"\\\");\\n\\n  return (\\n    <Popover open={open} onOpenChange={setOpen}>\\n      <PopoverTrigger asChild>\\n        <Button\\n          variant=\\\"outline\\\"\\n          role=\\\"combobox\\\"\\n          aria-expanded={open}\\n          className=\\\"w-[200px] justify-between\\\"\\n        >\\n          {value\\n            ? frameworks.find((framework) => framework.value === value)?.label\\n            : \\\"Select framework...\\\"}\\n          <ChevronsUpDown className=\\\"opacity-50\\\" />\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-[200px] p-0\\\">\\n        <Command>\\n          <CommandInput placeholder=\\\"Search framework...\\\" className=\\\"h-9\\\" />\\n          <CommandList>\\n            <CommandEmpty>No framework found.</CommandEmpty>\\n            <CommandGroup>\\n              {frameworks.map((framework) => (\\n                <CommandItem\\n                  key={framework.value}\\n                  value={framework.value}\\n                  onSelect={(currentValue) => {\\n                    setValue(currentValue === value ? \\\"\\\" : currentValue);\\n                    setOpen(false);\\n                  }}\\n                >\\n                  {framework.label}\\n                  <Check\\n                    className={cn(\\n                      \\\"ml-auto\\\",\\n                      value === framework.value ? \\\"opacity-100\\\" : \\\"opacity-0\\\"\\n                    )}\\n                  />\\n                </CommandItem>\\n              ))}\\n            </CommandGroup>\\n          </CommandList>\\n        </Command>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@rlx-widgets/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n];\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(\"\");\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue);\n                    setOpen(false);\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"
+        },
+        {
+          "name": "dropdown-menu",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { MoreHorizontal } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@rlx-widgets/command\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuShortcut,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nconst labels = [\\n  \\\"feature\\\",\\n  \\\"bug\\\",\\n  \\\"enhancement\\\",\\n  \\\"documentation\\\",\\n  \\\"design\\\",\\n  \\\"question\\\",\\n  \\\"maintenance\\\",\\n];\\n\\nexport const Preview = () => {\\n  const [label, setLabel] = React.useState(\\\"feature\\\");\\n  const [open, setOpen] = React.useState(false);\\n\\n  return (\\n    <div className=\\\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\\\">\\n      <p className=\\\"text-sm leading-none font-medium\\\">\\n        <span className=\\\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\\\">\\n          {label}\\n        </span>\\n        <span className=\\\"text-muted-foreground\\\">Create a new project</span>\\n      </p>\\n      <DropdownMenu open={open} onOpenChange={setOpen}>\\n        <DropdownMenuTrigger asChild>\\n          <Button variant=\\\"ghost\\\" size=\\\"sm\\\">\\n            <MoreHorizontal />\\n          </Button>\\n        </DropdownMenuTrigger>\\n        <DropdownMenuContent align=\\\"end\\\" className=\\\"w-[200px]\\\">\\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\\n          <DropdownMenuGroup>\\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\\n            <DropdownMenuSeparator />\\n            <DropdownMenuSub>\\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\\n              <DropdownMenuSubContent className=\\\"p-0\\\">\\n                <Command>\\n                  <CommandInput\\n                    placeholder=\\\"Filter label...\\\"\\n                    autoFocus={true}\\n                    className=\\\"h-9\\\"\\n                  />\\n                  <CommandList>\\n                    <CommandEmpty>No label found.</CommandEmpty>\\n                    <CommandGroup>\\n                      {labels.map((label) => (\\n                        <CommandItem\\n                          key={label}\\n                          value={label}\\n                          onSelect={(value) => {\\n                            setLabel(value);\\n                            setOpen(false);\\n                          }}\\n                        >\\n                          {label}\\n                        </CommandItem>\\n                      ))}\\n                    </CommandGroup>\\n                  </CommandList>\\n                </Command>\\n              </DropdownMenuSubContent>\\n            </DropdownMenuSub>\\n            <DropdownMenuSeparator />\\n            <DropdownMenuItem className=\\\"text-red-600\\\">\\n              Delete\\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\\n            </DropdownMenuItem>\\n          </DropdownMenuGroup>\\n        </DropdownMenuContent>\\n      </DropdownMenu>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@rlx-widgets/command\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n];\n\nexport const Preview = () => {\n  const [label, setLabel] = React.useState(\"feature\");\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm leading-none font-medium\">\n        <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value);\n                            setOpen(false);\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Check, ChevronsUpDown } from \\\"lucide-react\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { z } from \\\"zod\\\";\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@rlx-widgets/command\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"@rlx-widgets/form\\\";\\n\\nconst languages = [\\n  { label: \\\"English\\\", value: \\\"en\\\" },\\n  { label: \\\"French\\\", value: \\\"fr\\\" },\\n  { label: \\\"German\\\", value: \\\"de\\\" },\\n  { label: \\\"Spanish\\\", value: \\\"es\\\" },\\n  { label: \\\"Portuguese\\\", value: \\\"pt\\\" },\\n  { label: \\\"Russian\\\", value: \\\"ru\\\" },\\n  { label: \\\"Japanese\\\", value: \\\"ja\\\" },\\n  { label: \\\"Korean\\\", value: \\\"ko\\\" },\\n  { label: \\\"Chinese\\\", value: \\\"zh\\\" },\\n] as const;\\n\\nconst FormSchema = z.object({\\n  language: z.string({\\n    error: \\\"Please select a language.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"space-y-6\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"language\\\"\\n          render={({ field }) => (\\n            <FormItem className=\\\"flex flex-col\\\">\\n              <FormLabel>Language</FormLabel>\\n              <Popover>\\n                <PopoverTrigger asChild>\\n                  <FormControl>\\n                    <Button\\n                      variant=\\\"outline\\\"\\n                      role=\\\"combobox\\\"\\n                      className={cn(\\n                        \\\"w-[200px] justify-between\\\",\\n                        !field.value && \\\"text-muted-foreground\\\"\\n                      )}\\n                    >\\n                      {field.value\\n                        ? languages.find(\\n                            (language) => language.value === field.value\\n                          )?.label\\n                        : \\\"Select language\\\"}\\n                      <ChevronsUpDown className=\\\"opacity-50\\\" />\\n                    </Button>\\n                  </FormControl>\\n                </PopoverTrigger>\\n                <PopoverContent className=\\\"w-[200px] p-0\\\">\\n                  <Command>\\n                    <CommandInput\\n                      placeholder=\\\"Search framework...\\\"\\n                      className=\\\"h-9\\\"\\n                    />\\n                    <CommandList>\\n                      <CommandEmpty>No framework found.</CommandEmpty>\\n                      <CommandGroup>\\n                        {languages.map((language) => (\\n                          <CommandItem\\n                            value={language.label}\\n                            key={language.value}\\n                            onSelect={() => {\\n                              form.setValue(\\\"language\\\", language.value);\\n                            }}\\n                          >\\n                            {language.label}\\n                            <Check\\n                              className={cn(\\n                                \\\"ml-auto\\\",\\n                                language.value === field.value\\n                                  ? \\\"opacity-100\\\"\\n                                  : \\\"opacity-0\\\"\\n                              )}\\n                            />\\n                          </CommandItem>\\n                        ))}\\n                      </CommandGroup>\\n                    </CommandList>\\n                  </Command>\\n                </PopoverContent>\\n              </Popover>\\n              <FormDescription>\\n                This is the language that will be used in the dashboard.\\n              </FormDescription>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\nimport { toast } from \"sonner\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@rlx-widgets/command\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@rlx-widgets/form\";\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const;\n\nconst FormSchema = z.object({\n  language: z.string({\n    error: \"Please select a language.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput\n                      placeholder=\"Search framework...\"\n                      className=\"h-9\"\n                    />\n                    <CommandList>\n                      <CommandEmpty>No framework found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value);\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        },
+        {
+          "name": "popover",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@rlx-widgets/command\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\ntype Status = {\\n  value: string;\\n  label: string;\\n};\\n\\nconst statuses: Status[] = [\\n  {\\n    value: \\\"backlog\\\",\\n    label: \\\"Backlog\\\",\\n  },\\n  {\\n    value: \\\"todo\\\",\\n    label: \\\"Todo\\\",\\n  },\\n  {\\n    value: \\\"in progress\\\",\\n    label: \\\"In Progress\\\",\\n  },\\n  {\\n    value: \\\"done\\\",\\n    label: \\\"Done\\\",\\n  },\\n  {\\n    value: \\\"canceled\\\",\\n    label: \\\"Canceled\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\\n    null\\n  );\\n\\n  return (\\n    <div className=\\\"flex items-center space-x-4\\\">\\n      <p className=\\\"text-muted-foreground text-sm\\\">Status</p>\\n      <Popover open={open} onOpenChange={setOpen}>\\n        <PopoverTrigger asChild>\\n          <Button variant=\\\"outline\\\" className=\\\"w-[150px] justify-start\\\">\\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"p-0\\\" side=\\\"right\\\" align=\\\"start\\\">\\n          <Command>\\n            <CommandInput placeholder=\\\"Change status...\\\" />\\n            <CommandList>\\n              <CommandEmpty>No results found.</CommandEmpty>\\n              <CommandGroup>\\n                {statuses.map((status) => (\\n                  <CommandItem\\n                    key={status.value}\\n                    value={status.value}\\n                    onSelect={(value) => {\\n                      setSelectedStatus(\\n                        statuses.find((priority) => priority.value === value) ||\\n                          null\\n                      );\\n                      setOpen(false);\\n                    }}\\n                  >\\n                    {status.label}\\n                  </CommandItem>\\n                ))}\\n              </CommandGroup>\\n            </CommandList>\\n          </Command>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@rlx-widgets/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\ntype Status = {\n  value: string;\n  label: string;\n};\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n];\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  );\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      );\n                      setOpen(false);\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "responsive",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { useMediaQuery } from \\\"@rlx-hooks/use-media-query\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@rlx-widgets/command\\\";\\nimport { Drawer, DrawerContent, DrawerTrigger } from \\\"@rlx-widgets/drawer\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\ntype Status = {\\n  value: string;\\n  label: string;\\n};\\n\\nconst statuses: Status[] = [\\n  {\\n    value: \\\"backlog\\\",\\n    label: \\\"Backlog\\\",\\n  },\\n  {\\n    value: \\\"todo\\\",\\n    label: \\\"Todo\\\",\\n  },\\n  {\\n    value: \\\"in progress\\\",\\n    label: \\\"In Progress\\\",\\n  },\\n  {\\n    value: \\\"done\\\",\\n    label: \\\"Done\\\",\\n  },\\n  {\\n    value: \\\"canceled\\\",\\n    label: \\\"Canceled\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const isDesktop = useMediaQuery(\\\"(min-width: 768px)\\\");\\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\\n    null\\n  );\\n\\n  if (isDesktop) {\\n    return (\\n      <Popover open={open} onOpenChange={setOpen}>\\n        <PopoverTrigger asChild>\\n          <Button variant=\\\"outline\\\" className=\\\"w-[150px] justify-start\\\">\\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"w-[200px] p-0\\\" align=\\\"start\\\">\\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\\n        </PopoverContent>\\n      </Popover>\\n    );\\n  }\\n\\n  return (\\n    <Drawer open={open} onOpenChange={setOpen}>\\n      <DrawerTrigger asChild>\\n        <Button variant=\\\"outline\\\" className=\\\"w-[150px] justify-start\\\">\\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\\n        </Button>\\n      </DrawerTrigger>\\n      <DrawerContent>\\n        <div className=\\\"mt-4 border-t\\\">\\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\\n        </div>\\n      </DrawerContent>\\n    </Drawer>\\n  );\\n};\\n\\nfunction StatusList({\\n  setOpen,\\n  setSelectedStatus,\\n}: {\\n  setOpen: (open: boolean) => void;\\n  setSelectedStatus: (status: Status | null) => void;\\n}) {\\n  return (\\n    <Command>\\n      <CommandInput placeholder=\\\"Filter status...\\\" />\\n      <CommandList>\\n        <CommandEmpty>No results found.</CommandEmpty>\\n        <CommandGroup>\\n          {statuses.map((status) => (\\n            <CommandItem\\n              key={status.value}\\n              value={status.value}\\n              onSelect={(value) => {\\n                setSelectedStatus(\\n                  statuses.find((priority) => priority.value === value) || null\\n                );\\n                setOpen(false);\\n              }}\\n            >\\n              {status.label}\\n            </CommandItem>\\n          ))}\\n        </CommandGroup>\\n      </CommandList>\\n    </Command>\\n  );\\n}\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@rlx-hooks/use-media-query\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@rlx-widgets/command\";\nimport { Drawer, DrawerContent, DrawerTrigger } from \"@rlx-widgets/drawer\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\ntype Status = {\n  value: string;\n  label: string;\n};\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n];\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\");\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  );\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  );\n};\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void;\n  setSelectedStatus: (status: Status | null) => void;\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                );\n                setOpen(false);\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "Command",
+      "slug": "command",
+      "category": "widget",
+      "path": "/widgets/command",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Calculator,\\n  Calendar,\\n  CreditCard,\\n  Settings,\\n  Smile,\\n  User,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandSeparator,\\n  CommandShortcut,\\n} from \\\"@rlx-widgets/command\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Command className=\\\"rounded-lg border shadow-md md:min-w-[450px]\\\">\\n      <CommandInput placeholder=\\\"Type a command or search...\\\" />\\n      <CommandList>\\n        <CommandEmpty>No results found.</CommandEmpty>\\n        <CommandGroup heading=\\\"Suggestions\\\">\\n          <CommandItem>\\n            <Calendar />\\n            <span>Calendar</span>\\n          </CommandItem>\\n          <CommandItem>\\n            <Smile />\\n            <span>Search Emoji</span>\\n          </CommandItem>\\n          <CommandItem disabled>\\n            <Calculator />\\n            <span>Calculator</span>\\n          </CommandItem>\\n        </CommandGroup>\\n        <CommandSeparator />\\n        <CommandGroup heading=\\\"Settings\\\">\\n          <CommandItem>\\n            <User />\\n            <span>Profile</span>\\n            <CommandShortcut>⌘P</CommandShortcut>\\n          </CommandItem>\\n          <CommandItem>\\n            <CreditCard />\\n            <span>Billing</span>\\n            <CommandShortcut>⌘B</CommandShortcut>\\n          </CommandItem>\\n          <CommandItem>\\n            <Settings />\\n            <span>Settings</span>\\n            <CommandShortcut>⌘S</CommandShortcut>\\n          </CommandItem>\\n        </CommandGroup>\\n      </CommandList>\\n    </Command>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@rlx-widgets/command\";\n\nexport const Preview = () => {\n  return (\n    <Command className=\"rounded-lg border shadow-md md:min-w-[450px]\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>\n            <Calendar />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <Smile />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <Calculator />\n            <span>Calculator</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <User />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <CreditCard />\n            <span>Billing</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <Settings />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n};\n"
+        },
+        {
+          "name": "dialog",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport {\\n  Calculator,\\n  Calendar,\\n  CreditCard,\\n  Settings,\\n  Smile,\\n  User,\\n} from \\\"lucide-react\\\";\\nimport {\\n  CommandDialog,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandSeparator,\\n  CommandShortcut,\\n} from \\\"@rlx-widgets/command\\\";\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    const down = (e: KeyboardEvent) => {\\n      if (e.key === \\\"j\\\" && (e.metaKey || e.ctrlKey)) {\\n        e.preventDefault();\\n        setOpen((open) => !open);\\n      }\\n    };\\n\\n    document.addEventListener(\\\"keydown\\\", down);\\n    return () => document.removeEventListener(\\\"keydown\\\", down);\\n  }, []);\\n\\n  return (\\n    <>\\n      <p className=\\\"text-muted-foreground text-sm\\\">\\n        Press{\\\" \\\"}\\n        <kbd className=\\\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\\\">\\n          <span className=\\\"text-xs\\\">⌘</span>J\\n        </kbd>\\n      </p>\\n      <CommandDialog open={open} onOpenChange={setOpen}>\\n        <CommandInput placeholder=\\\"Type a command or search...\\\" />\\n        <CommandList>\\n          <CommandEmpty>No results found.</CommandEmpty>\\n          <CommandGroup heading=\\\"Suggestions\\\">\\n            <CommandItem>\\n              <Calendar />\\n              <span>Calendar</span>\\n            </CommandItem>\\n            <CommandItem>\\n              <Smile />\\n              <span>Search Emoji</span>\\n            </CommandItem>\\n            <CommandItem>\\n              <Calculator />\\n              <span>Calculator</span>\\n            </CommandItem>\\n          </CommandGroup>\\n          <CommandSeparator />\\n          <CommandGroup heading=\\\"Settings\\\">\\n            <CommandItem>\\n              <User />\\n              <span>Profile</span>\\n              <CommandShortcut>⌘P</CommandShortcut>\\n            </CommandItem>\\n            <CommandItem>\\n              <CreditCard />\\n              <span>Billing</span>\\n              <CommandShortcut>⌘B</CommandShortcut>\\n            </CommandItem>\\n            <CommandItem>\\n              <Settings />\\n              <span>Settings</span>\\n              <CommandShortcut>⌘S</CommandShortcut>\\n            </CommandItem>\\n          </CommandGroup>\\n        </CommandList>\\n      </CommandDialog>\\n    </>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\";\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@rlx-widgets/command\";\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <>\n      <p className=\"text-muted-foreground text-sm\">\n        Press{\" \"}\n        <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Context Menu",
+      "slug": "context-menu",
+      "category": "widget",
+      "path": "/widgets/context-menu",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  ContextMenu,\\n  ContextMenuCheckboxItem,\\n  ContextMenuContent,\\n  ContextMenuItem,\\n  ContextMenuLabel,\\n  ContextMenuRadioGroup,\\n  ContextMenuRadioItem,\\n  ContextMenuSeparator,\\n  ContextMenuShortcut,\\n  ContextMenuSub,\\n  ContextMenuSubContent,\\n  ContextMenuSubTrigger,\\n  ContextMenuTrigger,\\n} from \\\"@rlx-widgets/context-menu\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ContextMenu>\\n      <ContextMenuTrigger className=\\\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\\\">\\n        Right click here\\n      </ContextMenuTrigger>\\n      <ContextMenuContent className=\\\"w-52\\\">\\n        <ContextMenuItem inset>\\n          Back\\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\\n        </ContextMenuItem>\\n        <ContextMenuItem inset disabled>\\n          Forward\\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\\n        </ContextMenuItem>\\n        <ContextMenuItem inset>\\n          Reload\\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\\n        </ContextMenuItem>\\n        <ContextMenuSub>\\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\\n          <ContextMenuSubContent className=\\\"w-44\\\">\\n            <ContextMenuItem>Save Page...</ContextMenuItem>\\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\\n            <ContextMenuItem>Name Window...</ContextMenuItem>\\n            <ContextMenuSeparator />\\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\\n            <ContextMenuSeparator />\\n            <ContextMenuItem variant=\\\"destructive\\\">Delete</ContextMenuItem>\\n          </ContextMenuSubContent>\\n        </ContextMenuSub>\\n        <ContextMenuSeparator />\\n        <ContextMenuCheckboxItem checked>\\n          Show Bookmarks\\n        </ContextMenuCheckboxItem>\\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\\n        <ContextMenuSeparator />\\n        <ContextMenuRadioGroup value=\\\"pedro\\\">\\n          <ContextMenuLabel inset>People</ContextMenuLabel>\\n          <ContextMenuRadioItem value=\\\"pedro\\\">\\n            Pedro Duarte\\n          </ContextMenuRadioItem>\\n          <ContextMenuRadioItem value=\\\"colm\\\">Colm Tuite</ContextMenuRadioItem>\\n        </ContextMenuRadioGroup>\\n      </ContextMenuContent>\\n    </ContextMenu>\\n  );\\n};\\n\"",
+          "preview": "import {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@rlx-widgets/context-menu\";\n\nexport const Preview = () => {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n        Right click here\n      </ContextMenuTrigger>\n      <ContextMenuContent className=\"w-52\">\n        <ContextMenuItem inset>\n          Back\n          <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset disabled>\n          Forward\n          <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuItem inset>\n          Reload\n          <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n        </ContextMenuItem>\n        <ContextMenuSub>\n          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>\n          <ContextMenuSubContent className=\"w-44\">\n            <ContextMenuItem>Save Page...</ContextMenuItem>\n            <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n            <ContextMenuItem>Name Window...</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>Developer Tools</ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n          </ContextMenuSubContent>\n        </ContextMenuSub>\n        <ContextMenuSeparator />\n        <ContextMenuCheckboxItem checked>\n          Show Bookmarks\n        </ContextMenuCheckboxItem>\n        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n        <ContextMenuSeparator />\n        <ContextMenuRadioGroup value=\"pedro\">\n          <ContextMenuLabel inset>People</ContextMenuLabel>\n          <ContextMenuRadioItem value=\"pedro\">\n            Pedro Duarte\n          </ContextMenuRadioItem>\n          <ContextMenuRadioItem value=\"colm\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Dialog",
+      "slug": "dialog",
+      "category": "widget",
+      "path": "/widgets/dialog",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "custom-close-button",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@rlx-widgets/dialog\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Share</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"sm:max-w-md\\\">\\n        <DialogHeader>\\n          <DialogTitle>Share link</DialogTitle>\\n          <DialogDescription>\\n            Anyone who has this link will be able to view this.\\n          </DialogDescription>\\n        </DialogHeader>\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <div className=\\\"grid flex-1 gap-2\\\">\\n            <Label htmlFor=\\\"link\\\" className=\\\"sr-only\\\">\\n              Link\\n            </Label>\\n            <Input\\n              id=\\\"link\\\"\\n              defaultValue=\\\"https://ui.shadcn.com/docs/installation\\\"\\n              readOnly\\n            />\\n          </div>\\n        </div>\\n        <DialogFooter className=\\\"sm:justify-start\\\">\\n          <DialogClose asChild>\\n            <Button type=\\\"button\\\" variant=\\\"secondary\\\">\\n              Close\\n            </Button>\\n          </DialogClose>\\n        </DialogFooter>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@rlx-widgets/dialog\";\n\nexport const Preview = () => {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center gap-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"rlx-widgets\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"rlx-widgets\\\";\\nimport { Input } from \\\"rlx-widgets\\\";\\nimport { Label } from \\\"rlx-widgets\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Dialog>\\n      <form>\\n        <DialogTrigger asChild>\\n          <Button variant=\\\"outline\\\">Open Dialog</Button>\\n        </DialogTrigger>\\n        <DialogContent className=\\\"sm:max-w-[425px]\\\">\\n          <DialogHeader>\\n            <DialogTitle>Edit profile</DialogTitle>\\n            <DialogDescription>\\n              Make changes to your profile here. Click save when you&apos;re\\n              done.\\n            </DialogDescription>\\n          </DialogHeader>\\n          <div className=\\\"grid gap-4\\\">\\n            <div className=\\\"grid gap-3\\\">\\n              <Label htmlFor=\\\"name-1\\\">Name</Label>\\n              <Input id=\\\"name-1\\\" name=\\\"name\\\" defaultValue=\\\"Pedro Duarte\\\" />\\n            </div>\\n            <div className=\\\"grid gap-3\\\">\\n              <Label htmlFor=\\\"username-1\\\">Username</Label>\\n              <Input id=\\\"username-1\\\" name=\\\"username\\\" defaultValue=\\\"@peduarte\\\" />\\n            </div>\\n          </div>\\n          <DialogFooter>\\n            <DialogClose asChild>\\n              <Button variant=\\\"outline\\\">Cancel</Button>\\n            </DialogClose>\\n            <Button type=\\\"submit\\\">Save changes</Button>\\n          </DialogFooter>\\n        </DialogContent>\\n      </form>\\n    </Dialog>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"rlx-widgets\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"rlx-widgets\";\nimport { Input } from \"rlx-widgets\";\nimport { Label } from \"rlx-widgets\";\n\nexport const Preview = () => {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Drawer",
+      "slug": "drawer",
+      "category": "widget",
+      "path": "/widgets/drawer",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "custom-height",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Minus, Plus } from \\\"lucide-react\\\";\\nimport { Bar, BarChart, ResponsiveContainer } from \\\"recharts\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerContent,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@rlx-widgets/drawer\\\";\\n\\nconst data = [\\n  {\\n    goal: 400,\\n  },\\n  {\\n    goal: 300,\\n  },\\n  {\\n    goal: 200,\\n  },\\n  {\\n    goal: 300,\\n  },\\n  {\\n    goal: 200,\\n  },\\n  {\\n    goal: 278,\\n  },\\n  {\\n    goal: 189,\\n  },\\n  {\\n    goal: 239,\\n  },\\n  {\\n    goal: 300,\\n  },\\n  {\\n    goal: 200,\\n  },\\n  {\\n    goal: 278,\\n  },\\n  {\\n    goal: 189,\\n  },\\n  {\\n    goal: 349,\\n  },\\n];\\n\\nexport const Preview = () => {\\n  const [goal, setGoal] = React.useState(350);\\n\\n  function onClick(adjustment: number) {\\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)));\\n  }\\n\\n  return (\\n    <Drawer>\\n      <DrawerTrigger asChild>\\n        <Button variant=\\\"outline\\\">Open Drawer</Button>\\n      </DrawerTrigger>\\n      <DrawerContent className=\\\"h-[100%]\\\">\\n        <div className=\\\"mx-auto w-full max-w-sm\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Move Goal</DrawerTitle>\\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\\n          </DrawerHeader>\\n          <div className=\\\"p-4 pb-0\\\">\\n            <div className=\\\"flex items-center justify-center space-x-2\\\">\\n              <Button\\n                variant=\\\"outline\\\"\\n                size=\\\"icon\\\"\\n                className=\\\"h-8 w-8 shrink-0 rounded-full\\\"\\n                onClick={() => onClick(-10)}\\n                disabled={goal <= 200}\\n              >\\n                <Minus />\\n                <span className=\\\"sr-only\\\">Decrease</span>\\n              </Button>\\n              <div className=\\\"flex-1 text-center\\\">\\n                <div className=\\\"text-7xl font-bold tracking-tighter\\\">\\n                  {goal}\\n                </div>\\n                <div className=\\\"text-muted-foreground text-[0.70rem] uppercase\\\">\\n                  Calories/day\\n                </div>\\n              </div>\\n              <Button\\n                variant=\\\"outline\\\"\\n                size=\\\"icon\\\"\\n                className=\\\"h-8 w-8 shrink-0 rounded-full\\\"\\n                onClick={() => onClick(10)}\\n                disabled={goal >= 400}\\n              >\\n                <Plus />\\n                <span className=\\\"sr-only\\\">Increase</span>\\n              </Button>\\n            </div>\\n            <div className=\\\"mt-3 h-[120px]\\\">\\n              <ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\">\\n                <BarChart data={data}>\\n                  <Bar\\n                    dataKey=\\\"goal\\\"\\n                    style={\\n                      {\\n                        fill: \\\"hsl(var(--foreground))\\\",\\n                        opacity: 0.9,\\n                      } as React.CSSProperties\\n                    }\\n                  />\\n                </BarChart>\\n              </ResponsiveContainer>\\n            </div>\\n          </div>\\n          <DrawerFooter>\\n            <Button>Submit</Button>\\n            <DrawerClose asChild>\\n              <Button variant=\\\"outline\\\">Cancel</Button>\\n            </DrawerClose>\\n          </DrawerFooter>\\n        </div>\\n      </DrawerContent>\\n    </Drawer>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Minus, Plus } from \"lucide-react\";\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@rlx-widgets/drawer\";\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n];\n\nexport const Preview = () => {\n  const [goal, setGoal] = React.useState(350);\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)));\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent className=\"h-[100%]\">\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Minus, Plus } from \\\"lucide-react\\\";\\nimport { Bar, BarChart, ResponsiveContainer } from \\\"recharts\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerContent,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@rlx-widgets/drawer\\\";\\n\\nconst data = [\\n  {\\n    goal: 400,\\n  },\\n  {\\n    goal: 300,\\n  },\\n  {\\n    goal: 200,\\n  },\\n  {\\n    goal: 300,\\n  },\\n  {\\n    goal: 200,\\n  },\\n  {\\n    goal: 278,\\n  },\\n  {\\n    goal: 189,\\n  },\\n  {\\n    goal: 239,\\n  },\\n  {\\n    goal: 300,\\n  },\\n  {\\n    goal: 200,\\n  },\\n  {\\n    goal: 278,\\n  },\\n  {\\n    goal: 189,\\n  },\\n  {\\n    goal: 349,\\n  },\\n];\\n\\nexport const Preview = () => {\\n  const [goal, setGoal] = React.useState(350);\\n\\n  function onClick(adjustment: number) {\\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)));\\n  }\\n\\n  return (\\n    <Drawer>\\n      <DrawerTrigger asChild>\\n        <Button variant=\\\"outline\\\">Open Drawer</Button>\\n      </DrawerTrigger>\\n      <DrawerContent>\\n        <div className=\\\"mx-auto w-full max-w-sm\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Move Goal</DrawerTitle>\\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\\n          </DrawerHeader>\\n          <div className=\\\"p-4 pb-0\\\">\\n            <div className=\\\"flex items-center justify-center space-x-2\\\">\\n              <Button\\n                variant=\\\"outline\\\"\\n                size=\\\"icon\\\"\\n                className=\\\"h-8 w-8 shrink-0 rounded-full\\\"\\n                onClick={() => onClick(-10)}\\n                disabled={goal <= 200}\\n              >\\n                <Minus />\\n                <span className=\\\"sr-only\\\">Decrease</span>\\n              </Button>\\n              <div className=\\\"flex-1 text-center\\\">\\n                <div className=\\\"text-7xl font-bold tracking-tighter\\\">\\n                  {goal}\\n                </div>\\n                <div className=\\\"text-muted-foreground text-[0.70rem] uppercase\\\">\\n                  Calories/day\\n                </div>\\n              </div>\\n              <Button\\n                variant=\\\"outline\\\"\\n                size=\\\"icon\\\"\\n                className=\\\"h-8 w-8 shrink-0 rounded-full\\\"\\n                onClick={() => onClick(10)}\\n                disabled={goal >= 400}\\n              >\\n                <Plus />\\n                <span className=\\\"sr-only\\\">Increase</span>\\n              </Button>\\n            </div>\\n            <div className=\\\"mt-3 h-[120px]\\\">\\n              <ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\">\\n                <BarChart data={data}>\\n                  <Bar\\n                    dataKey=\\\"goal\\\"\\n                    style={\\n                      {\\n                        fill: \\\"hsl(var(--foreground))\\\",\\n                        opacity: 0.9,\\n                      } as React.CSSProperties\\n                    }\\n                  />\\n                </BarChart>\\n              </ResponsiveContainer>\\n            </div>\\n          </div>\\n          <DrawerFooter>\\n            <Button>Submit</Button>\\n            <DrawerClose asChild>\\n              <Button variant=\\\"outline\\\">Cancel</Button>\\n            </DrawerClose>\\n          </DrawerFooter>\\n        </div>\\n      </DrawerContent>\\n    </Drawer>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Minus, Plus } from \"lucide-react\";\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@rlx-widgets/drawer\";\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n];\n\nexport const Preview = () => {\n  const [goal, setGoal] = React.useState(350);\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)));\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  );\n};\n"
+        },
+        {
+          "name": "responsive",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { useMediaQuery } from \\\"@rlx-hooks/use-media-query\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@rlx-widgets/dialog\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerContent,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@rlx-widgets/drawer\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\n\\nexport const Preview = () => {\\n  const [open, setOpen] = React.useState(false);\\n  const isDesktop = useMediaQuery(\\\"(min-width: 768px)\\\");\\n\\n  if (isDesktop) {\\n    return (\\n      <Dialog open={open} onOpenChange={setOpen}>\\n        <DialogTrigger asChild>\\n          <Button variant=\\\"outline\\\">Edit Profile</Button>\\n        </DialogTrigger>\\n        <DialogContent className=\\\"sm:max-w-[425px]\\\">\\n          <DialogHeader>\\n            <DialogTitle>Edit profile</DialogTitle>\\n            <DialogDescription>\\n              Make changes to your profile here. Click save when you&apos;re\\n              done.\\n            </DialogDescription>\\n          </DialogHeader>\\n          <ProfileForm />\\n        </DialogContent>\\n      </Dialog>\\n    );\\n  }\\n\\n  return (\\n    <Drawer open={open} onOpenChange={setOpen}>\\n      <DrawerTrigger asChild>\\n        <Button variant=\\\"outline\\\">Edit Profile</Button>\\n      </DrawerTrigger>\\n      <DrawerContent>\\n        <DrawerHeader className=\\\"text-left\\\">\\n          <DrawerTitle>Edit profile</DrawerTitle>\\n          <DrawerDescription>\\n            Make changes to your profile here. Click save when you&apos;re done.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <ProfileForm className=\\\"px-4\\\" />\\n        <DrawerFooter className=\\\"pt-2\\\">\\n          <DrawerClose asChild>\\n            <Button variant=\\\"outline\\\">Cancel</Button>\\n          </DrawerClose>\\n        </DrawerFooter>\\n      </DrawerContent>\\n    </Drawer>\\n  );\\n};\\n\\nfunction ProfileForm({ className }: React.ComponentProps<\\\"form\\\">) {\\n  return (\\n    <form className={cn(\\\"grid items-start gap-6\\\", className)}>\\n      <div className=\\\"grid gap-3\\\">\\n        <Label htmlFor=\\\"email\\\">Email</Label>\\n        <Input type=\\\"email\\\" id=\\\"email\\\" defaultValue=\\\"shadcn@example.com\\\" />\\n      </div>\\n      <div className=\\\"grid gap-3\\\">\\n        <Label htmlFor=\\\"username\\\">Username</Label>\\n        <Input id=\\\"username\\\" defaultValue=\\\"@shadcn\\\" />\\n      </div>\\n      <Button type=\\\"submit\\\">Save changes</Button>\\n    </form>\\n  );\\n}\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@rlx-hooks/use-media-query\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@rlx-widgets/dialog\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@rlx-widgets/drawer\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\n\nexport const Preview = () => {\n  const [open, setOpen] = React.useState(false);\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\");\n\n  if (isDesktop) {\n    return (\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Edit Profile</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <ProfileForm />\n        </DialogContent>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Edit Profile</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"text-left\">\n          <DrawerTitle>Edit profile</DrawerTitle>\n          <DrawerDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </DrawerDescription>\n        </DrawerHeader>\n        <ProfileForm className=\"px-4\" />\n        <DrawerFooter className=\"pt-2\">\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Cancel</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  );\n};\n\nfunction ProfileForm({ className }: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"grid items-start gap-6\", className)}>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"email\">Email</Label>\n        <Input type=\"email\" id=\"email\" defaultValue=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-3\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  );\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "Dropdown Menu",
+      "slug": "dropdown-menu",
+      "category": "widget",
+      "path": "/widgets/dropdown-menu",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "checkboxes",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { DropdownMenuCheckboxItemProps } from \\\"@radix-ui/react-dropdown-menu\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuCheckboxItem,\\n  DropdownMenuContent,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\ntype Checked = DropdownMenuCheckboxItemProps[\\\"checked\\\"];\\n\\nexport const Preview = () => {\\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true);\\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false);\\n  const [showPanel, setShowPanel] = React.useState<Checked>(false);\\n\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">Open</Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"w-56\\\">\\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuCheckboxItem\\n          checked={showStatusBar}\\n          onCheckedChange={setShowStatusBar}\\n        >\\n          Status Bar\\n        </DropdownMenuCheckboxItem>\\n        <DropdownMenuCheckboxItem\\n          checked={showActivityBar}\\n          onCheckedChange={setShowActivityBar}\\n          disabled\\n        >\\n          Activity Bar\\n        </DropdownMenuCheckboxItem>\\n        <DropdownMenuCheckboxItem\\n          checked={showPanel}\\n          onCheckedChange={setShowPanel}\\n        >\\n          Panel\\n        </DropdownMenuCheckboxItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\ntype Checked = DropdownMenuCheckboxItemProps[\"checked\"];\n\nexport const Preview = () => {\n  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true);\n  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false);\n  const [showPanel, setShowPanel] = React.useState<Checked>(false);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\">\n        <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuCheckboxItem\n          checked={showStatusBar}\n          onCheckedChange={setShowStatusBar}\n        >\n          Status Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showActivityBar}\n          onCheckedChange={setShowActivityBar}\n          disabled\n        >\n          Activity Bar\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={showPanel}\n          onCheckedChange={setShowPanel}\n        >\n          Panel\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuPortal,\\n  DropdownMenuSeparator,\\n  DropdownMenuShortcut,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">Open</Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"w-56\\\" align=\\\"start\\\">\\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            Profile\\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            Billing\\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            Settings\\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            Keyboard shortcuts\\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>Team</DropdownMenuItem>\\n          <DropdownMenuSub>\\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\\n            <DropdownMenuPortal>\\n              <DropdownMenuSubContent>\\n                <DropdownMenuItem>Email</DropdownMenuItem>\\n                <DropdownMenuItem>Message</DropdownMenuItem>\\n                <DropdownMenuSeparator />\\n                <DropdownMenuItem>More...</DropdownMenuItem>\\n              </DropdownMenuSubContent>\\n            </DropdownMenuPortal>\\n          </DropdownMenuSub>\\n          <DropdownMenuItem>\\n            New Team\\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\\n        <DropdownMenuItem>Support</DropdownMenuItem>\\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          Log out\\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\n\nexport const Preview = () => {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-56\" align=\"start\">\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Email</DropdownMenuItem>\n                <DropdownMenuItem>Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Empty",
+      "slug": "empty",
+      "category": "widget",
+      "path": "/widgets/empty",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "avatar",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty>\\n      <EmptyHeader>\\n        <EmptyMedia variant=\\\"default\\\">\\n          <Avatar className=\\\"size-12\\\">\\n            <AvatarImage\\n              src=\\\"https://github.com/shadcn.png\\\"\\n              className=\\\"grayscale\\\"\\n            />\\n            <AvatarFallback>LR</AvatarFallback>\\n          </Avatar>\\n        </EmptyMedia>\\n        <EmptyTitle>User Offline</EmptyTitle>\\n        <EmptyDescription>\\n          This user is currently offline. You can leave a message to notify them\\n          or try again later.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <Button size=\\\"sm\\\">Leave Message</Button>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\n\nexport const Preview = () => {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"default\">\n          <Avatar className=\"size-12\">\n            <AvatarImage\n              src=\"https://github.com/shadcn.png\"\n              className=\"grayscale\"\n            />\n            <AvatarFallback>LR</AvatarFallback>\n          </Avatar>\n        </EmptyMedia>\n        <EmptyTitle>User Offline</EmptyTitle>\n        <EmptyDescription>\n          This user is currently offline. You can leave a message to notify them\n          or try again later.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">Leave Message</Button>\n      </EmptyContent>\n    </Empty>\n  );\n};\n"
+        },
+        {
+          "name": "avatar-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { PlusIcon } from \\\"lucide-react\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty>\\n      <EmptyHeader>\\n        <EmptyMedia>\\n          <div className=\\\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\\\">\\n            <Avatar>\\n              <AvatarImage src=\\\"https://github.com/shadcn.png\\\" alt=\\\"@shadcn\\\" />\\n              <AvatarFallback>CN</AvatarFallback>\\n            </Avatar>\\n            <Avatar>\\n              <AvatarImage\\n                src=\\\"https://github.com/maxleiter.png\\\"\\n                alt=\\\"@maxleiter\\\"\\n              />\\n              <AvatarFallback>LR</AvatarFallback>\\n            </Avatar>\\n            <Avatar>\\n              <AvatarImage\\n                src=\\\"https://github.com/evilrabbit.png\\\"\\n                alt=\\\"@evilrabbit\\\"\\n              />\\n              <AvatarFallback>ER</AvatarFallback>\\n            </Avatar>\\n          </div>\\n        </EmptyMedia>\\n        <EmptyTitle>No Team Members</EmptyTitle>\\n        <EmptyDescription>\\n          Invite your team to collaborate on this project.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <Button size=\\\"sm\\\">\\n          <PlusIcon />\\n          Invite Members\\n        </Button>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { PlusIcon } from \"lucide-react\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\n\nexport const Preview = () => {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </EmptyMedia>\n        <EmptyTitle>No Team Members</EmptyTitle>\n        <EmptyDescription>\n          Invite your team to collaborate on this project.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">\n          <PlusIcon />\n          Invite Members\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n};\n"
+        },
+        {
+          "name": "background",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { IconBell } from \\\"@tabler/icons-react\\\";\\nimport { RefreshCcwIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty className=\\\"from-muted/50 to-background h-full bg-gradient-to-b from-30%\\\">\\n      <EmptyHeader>\\n        <EmptyMedia variant=\\\"icon\\\">\\n          <IconBell />\\n        </EmptyMedia>\\n        <EmptyTitle>No Notifications</EmptyTitle>\\n        <EmptyDescription>\\n          You&apos;re all caught up. New notifications will appear here.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          <RefreshCcwIcon />\\n          Refresh\\n        </Button>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { IconBell } from \"@tabler/icons-react\";\nimport { RefreshCcwIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\n\nexport const Preview = () => {\n  return (\n    <Empty className=\"from-muted/50 to-background h-full bg-gradient-to-b from-30%\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <IconBell />\n        </EmptyMedia>\n        <EmptyTitle>No Notifications</EmptyTitle>\n        <EmptyDescription>\n          You&apos;re all caught up. New notifications will appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          <RefreshCcwIcon />\n          Refresh\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { IconFolderCode } from \\\"@tabler/icons-react\\\";\\nimport { ArrowUpRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty>\\n      <EmptyHeader>\\n        <EmptyMedia variant=\\\"icon\\\">\\n          <IconFolderCode />\\n        </EmptyMedia>\\n        <EmptyTitle>No Projects Yet</EmptyTitle>\\n        <EmptyDescription>\\n          You haven&apos;t created any projects yet. Get started by creating\\n          your first project.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <div className=\\\"flex gap-2\\\">\\n          <Button>Create Project</Button>\\n          <Button variant=\\\"outline\\\">Import Project</Button>\\n        </div>\\n      </EmptyContent>\\n      <Button\\n        variant=\\\"link\\\"\\n        asChild\\n        className=\\\"text-muted-foreground\\\"\\n        size=\\\"sm\\\"\\n      >\\n        <a href=\\\"#\\\">\\n          Learn More <ArrowUpRightIcon />\\n        </a>\\n      </Button>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { IconFolderCode } from \"@tabler/icons-react\";\nimport { ArrowUpRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\n\nexport const Preview = () => {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <IconFolderCode />\n        </EmptyMedia>\n        <EmptyTitle>No Projects Yet</EmptyTitle>\n        <EmptyDescription>\n          You haven&apos;t created any projects yet. Get started by creating\n          your first project.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <div className=\"flex gap-2\">\n          <Button>Create Project</Button>\n          <Button variant=\"outline\">Import Project</Button>\n        </div>\n      </EmptyContent>\n      <Button\n        variant=\"link\"\n        asChild\n        className=\"text-muted-foreground\"\n        size=\"sm\"\n      >\n        <a href=\"#\">\n          Learn More <ArrowUpRightIcon />\n        </a>\n      </Button>\n    </Empty>\n  );\n};\n"
+        },
+        {
+          "name": "input-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Kbd } from \\\"@rlx-widgets/kbd\\\";\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty>\\n      <EmptyHeader>\\n        <EmptyTitle>404 - Not Found</EmptyTitle>\\n        <EmptyDescription>\\n          The page you&apos;re looking for doesn&apos;t exist. Try searching for\\n          what you need below.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <InputGroup className=\\\"sm:w-3/4\\\">\\n          <InputGroupInput placeholder=\\\"Try searching for pages...\\\" />\\n          <InputGroupAddon>\\n            <SearchIcon />\\n          </InputGroupAddon>\\n          <InputGroupAddon align=\\\"inline-end\\\">\\n            <Kbd>/</Kbd>\\n          </InputGroupAddon>\\n        </InputGroup>\\n        <EmptyDescription>\\n          Need help? <a href=\\\"#\\\">Contact support</a>\\n        </EmptyDescription>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { Kbd } from \"@rlx-widgets/kbd\";\nimport { SearchIcon } from \"lucide-react\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyTitle>404 - Not Found</EmptyTitle>\n        <EmptyDescription>\n          The page you&apos;re looking for doesn&apos;t exist. Try searching for\n          what you need below.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <InputGroup className=\"sm:w-3/4\">\n          <InputGroupInput placeholder=\"Try searching for pages...\" />\n          <InputGroupAddon>\n            <SearchIcon />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>/</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <EmptyDescription>\n          Need help? <a href=\"#\">Contact support</a>\n        </EmptyDescription>\n      </EmptyContent>\n    </Empty>\n  );\n};\n"
+        },
+        {
+          "name": "outline",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { IconCloud } from \\\"@tabler/icons-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty className=\\\"border border-dashed\\\">\\n      <EmptyHeader>\\n        <EmptyMedia variant=\\\"icon\\\">\\n          <IconCloud />\\n        </EmptyMedia>\\n        <EmptyTitle>Cloud Storage Empty</EmptyTitle>\\n        <EmptyDescription>\\n          Upload files to your cloud storage to access them anywhere.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          Upload Files\\n        </Button>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { IconCloud } from \"@tabler/icons-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\n\nexport const Preview = () => {\n  return (\n    <Empty className=\"border border-dashed\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <IconCloud />\n        </EmptyMedia>\n        <EmptyTitle>Cloud Storage Empty</EmptyTitle>\n        <EmptyDescription>\n          Upload files to your cloud storage to access them anywhere.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          Upload Files\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "slug": "field",
+      "category": "widget",
+      "path": "/widgets/field",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "checkbox",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Checkbox } from \\\"@rlx-widgets/checkbox\\\";\\nimport {\\n  Field,\\n  FieldContent,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldLegend,\\n  FieldSeparator,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldGroup>\\n        <FieldSet>\\n          <FieldLegend variant=\\\"label\\\">\\n            Show these items on the desktop\\n          </FieldLegend>\\n          <FieldDescription>\\n            Select the items you want to show on the desktop.\\n          </FieldDescription>\\n          <FieldGroup className=\\\"gap-3\\\">\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"finder-pref-9k2-hard-disks-ljj\\\" />\\n              <FieldLabel\\n                htmlFor=\\\"finder-pref-9k2-hard-disks-ljj\\\"\\n                className=\\\"font-normal\\\"\\n                defaultChecked\\n              >\\n                Hard disks\\n              </FieldLabel>\\n            </Field>\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"finder-pref-9k2-external-disks-1yg\\\" />\\n              <FieldLabel\\n                htmlFor=\\\"finder-pref-9k2-external-disks-1yg\\\"\\n                className=\\\"font-normal\\\"\\n              >\\n                External disks\\n              </FieldLabel>\\n            </Field>\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"finder-pref-9k2-cds-dvds-fzt\\\" />\\n              <FieldLabel\\n                htmlFor=\\\"finder-pref-9k2-cds-dvds-fzt\\\"\\n                className=\\\"font-normal\\\"\\n              >\\n                CDs, DVDs, and iPods\\n              </FieldLabel>\\n            </Field>\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"finder-pref-9k2-connected-servers-6l2\\\" />\\n              <FieldLabel\\n                htmlFor=\\\"finder-pref-9k2-connected-servers-6l2\\\"\\n                className=\\\"font-normal\\\"\\n              >\\n                Connected servers\\n              </FieldLabel>\\n            </Field>\\n          </FieldGroup>\\n        </FieldSet>\\n        <FieldSeparator />\\n        <Field orientation=\\\"horizontal\\\">\\n          <Checkbox id=\\\"finder-pref-9k2-sync-folders-nep\\\" defaultChecked />\\n          <FieldContent>\\n            <FieldLabel htmlFor=\\\"finder-pref-9k2-sync-folders-nep\\\">\\n              Sync Desktop & Documents folders\\n            </FieldLabel>\\n            <FieldDescription>\\n              Your Desktop & Documents folders are being synced with iCloud\\n              Drive. You can access them from other devices.\\n            </FieldDescription>\\n          </FieldContent>\\n        </Field>\\n      </FieldGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Checkbox } from \"@rlx-widgets/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@rlx-widgets/field\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">\n            Show these items on the desktop\n          </FieldLegend>\n          <FieldDescription>\n            Select the items you want to show on the desktop.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"finder-pref-9k2-hard-disks-ljj\" />\n              <FieldLabel\n                htmlFor=\"finder-pref-9k2-hard-disks-ljj\"\n                className=\"font-normal\"\n                defaultChecked\n              >\n                Hard disks\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"finder-pref-9k2-external-disks-1yg\" />\n              <FieldLabel\n                htmlFor=\"finder-pref-9k2-external-disks-1yg\"\n                className=\"font-normal\"\n              >\n                External disks\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"finder-pref-9k2-cds-dvds-fzt\" />\n              <FieldLabel\n                htmlFor=\"finder-pref-9k2-cds-dvds-fzt\"\n                className=\"font-normal\"\n              >\n                CDs, DVDs, and iPods\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"finder-pref-9k2-connected-servers-6l2\" />\n              <FieldLabel\n                htmlFor=\"finder-pref-9k2-connected-servers-6l2\"\n                className=\"font-normal\"\n              >\n                Connected servers\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <FieldSeparator />\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"finder-pref-9k2-sync-folders-nep\" defaultChecked />\n          <FieldContent>\n            <FieldLabel htmlFor=\"finder-pref-9k2-sync-folders-nep\">\n              Sync Desktop & Documents folders\n            </FieldLabel>\n            <FieldDescription>\n              Your Desktop & Documents folders are being synced with iCloud\n              Drive. You can access them from other devices.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n      </FieldGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "choice-card",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { RadioGroup, RadioGroupItem } from \\\"@rlx-widgets/radio-group\\\";\\nimport {\\n  Field,\\n  FieldContent,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldSet,\\n  FieldTitle,\\n} from \\\"@rlx-widgets/field\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldGroup>\\n        <FieldSet>\\n          <FieldLabel htmlFor=\\\"compute-environment-p8w\\\">\\n            Compute Environment\\n          </FieldLabel>\\n          <FieldDescription>\\n            Select the compute environment for your cluster.\\n          </FieldDescription>\\n          <RadioGroup defaultValue=\\\"kubernetes\\\">\\n            <FieldLabel htmlFor=\\\"kubernetes-r2h\\\">\\n              <Field orientation=\\\"horizontal\\\">\\n                <FieldContent>\\n                  <FieldTitle>Kubernetes</FieldTitle>\\n                  <FieldDescription>\\n                    Run GPU workloads on a K8s configured cluster.\\n                  </FieldDescription>\\n                </FieldContent>\\n                <RadioGroupItem value=\\\"kubernetes\\\" id=\\\"kubernetes-r2h\\\" />\\n              </Field>\\n            </FieldLabel>\\n            <FieldLabel htmlFor=\\\"vm-z4k\\\">\\n              <Field orientation=\\\"horizontal\\\">\\n                <FieldContent>\\n                  <FieldTitle>Virtual Machine</FieldTitle>\\n                  <FieldDescription>\\n                    Access a VM configured cluster to run GPU workloads.\\n                  </FieldDescription>\\n                </FieldContent>\\n                <RadioGroupItem value=\\\"vm\\\" id=\\\"vm-z4k\\\" />\\n              </Field>\\n            </FieldLabel>\\n          </RadioGroup>\\n        </FieldSet>\\n      </FieldGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { RadioGroup, RadioGroupItem } from \"@rlx-widgets/radio-group\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSet,\n  FieldTitle,\n} from \"@rlx-widgets/field\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLabel htmlFor=\"compute-environment-p8w\">\n            Compute Environment\n          </FieldLabel>\n          <FieldDescription>\n            Select the compute environment for your cluster.\n          </FieldDescription>\n          <RadioGroup defaultValue=\"kubernetes\">\n            <FieldLabel htmlFor=\"kubernetes-r2h\">\n              <Field orientation=\"horizontal\">\n                <FieldContent>\n                  <FieldTitle>Kubernetes</FieldTitle>\n                  <FieldDescription>\n                    Run GPU workloads on a K8s configured cluster.\n                  </FieldDescription>\n                </FieldContent>\n                <RadioGroupItem value=\"kubernetes\" id=\"kubernetes-r2h\" />\n              </Field>\n            </FieldLabel>\n            <FieldLabel htmlFor=\"vm-z4k\">\n              <Field orientation=\"horizontal\">\n                <FieldContent>\n                  <FieldTitle>Virtual Machine</FieldTitle>\n                  <FieldDescription>\n                    Access a VM configured cluster to run GPU workloads.\n                  </FieldDescription>\n                </FieldContent>\n                <RadioGroupItem value=\"vm\" id=\"vm-z4k\" />\n              </Field>\n            </FieldLabel>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Checkbox } from \\\"@rlx-widgets/checkbox\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Textarea } from \\\"@rlx-widgets/textarea\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldLegend,\\n  FieldSeparator,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@rlx-widgets/select\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <form>\\n        <FieldGroup>\\n          <FieldSet>\\n            <FieldLegend>Payment Method</FieldLegend>\\n            <FieldDescription>\\n              All transactions are secure and encrypted\\n            </FieldDescription>\\n            <FieldGroup>\\n              <Field>\\n                <FieldLabel htmlFor=\\\"checkout-7j9-card-name-43j\\\">\\n                  Name on Card\\n                </FieldLabel>\\n                <Input\\n                  id=\\\"checkout-7j9-card-name-43j\\\"\\n                  placeholder=\\\"Evil Rabbit\\\"\\n                  required\\n                />\\n              </Field>\\n              <Field>\\n                <FieldLabel htmlFor=\\\"checkout-7j9-card-number-uw1\\\">\\n                  Card Number\\n                </FieldLabel>\\n                <Input\\n                  id=\\\"checkout-7j9-card-number-uw1\\\"\\n                  placeholder=\\\"1234 5678 9012 3456\\\"\\n                  required\\n                />\\n                <FieldDescription>\\n                  Enter your 16-digit card number\\n                </FieldDescription>\\n              </Field>\\n              <div className=\\\"grid grid-cols-3 gap-4\\\">\\n                <Field>\\n                  <FieldLabel htmlFor=\\\"checkout-exp-month-ts6\\\">\\n                    Month\\n                  </FieldLabel>\\n                  <Select defaultValue=\\\"\\\">\\n                    <SelectTrigger id=\\\"checkout-exp-month-ts6\\\">\\n                      <SelectValue placeholder=\\\"MM\\\" />\\n                    </SelectTrigger>\\n                    <SelectContent>\\n                      <SelectItem value=\\\"01\\\">01</SelectItem>\\n                      <SelectItem value=\\\"02\\\">02</SelectItem>\\n                      <SelectItem value=\\\"03\\\">03</SelectItem>\\n                      <SelectItem value=\\\"04\\\">04</SelectItem>\\n                      <SelectItem value=\\\"05\\\">05</SelectItem>\\n                      <SelectItem value=\\\"06\\\">06</SelectItem>\\n                      <SelectItem value=\\\"07\\\">07</SelectItem>\\n                      <SelectItem value=\\\"08\\\">08</SelectItem>\\n                      <SelectItem value=\\\"09\\\">09</SelectItem>\\n                      <SelectItem value=\\\"10\\\">10</SelectItem>\\n                      <SelectItem value=\\\"11\\\">11</SelectItem>\\n                      <SelectItem value=\\\"12\\\">12</SelectItem>\\n                    </SelectContent>\\n                  </Select>\\n                </Field>\\n                <Field>\\n                  <FieldLabel htmlFor=\\\"checkout-7j9-exp-year-f59\\\">\\n                    Year\\n                  </FieldLabel>\\n                  <Select defaultValue=\\\"\\\">\\n                    <SelectTrigger id=\\\"checkout-7j9-exp-year-f59\\\">\\n                      <SelectValue placeholder=\\\"YYYY\\\" />\\n                    </SelectTrigger>\\n                    <SelectContent>\\n                      <SelectItem value=\\\"2024\\\">2024</SelectItem>\\n                      <SelectItem value=\\\"2025\\\">2025</SelectItem>\\n                      <SelectItem value=\\\"2026\\\">2026</SelectItem>\\n                      <SelectItem value=\\\"2027\\\">2027</SelectItem>\\n                      <SelectItem value=\\\"2028\\\">2028</SelectItem>\\n                      <SelectItem value=\\\"2029\\\">2029</SelectItem>\\n                    </SelectContent>\\n                  </Select>\\n                </Field>\\n                <Field>\\n                  <FieldLabel htmlFor=\\\"checkout-7j9-cvv\\\">CVV</FieldLabel>\\n                  <Input id=\\\"checkout-7j9-cvv\\\" placeholder=\\\"123\\\" required />\\n                </Field>\\n              </div>\\n            </FieldGroup>\\n          </FieldSet>\\n          <FieldSeparator />\\n          <FieldSet>\\n            <FieldLegend>Billing Address</FieldLegend>\\n            <FieldDescription>\\n              The billing address associated with your payment method\\n            </FieldDescription>\\n            <FieldGroup>\\n              <Field orientation=\\\"horizontal\\\">\\n                <Checkbox\\n                  id=\\\"checkout-7j9-same-as-shipping-wgm\\\"\\n                  defaultChecked\\n                />\\n                <FieldLabel\\n                  htmlFor=\\\"checkout-7j9-same-as-shipping-wgm\\\"\\n                  className=\\\"font-normal\\\"\\n                >\\n                  Same as shipping address\\n                </FieldLabel>\\n              </Field>\\n            </FieldGroup>\\n          </FieldSet>\\n          <FieldSet>\\n            <FieldGroup>\\n              <Field>\\n                <FieldLabel htmlFor=\\\"checkout-7j9-optional-comments\\\">\\n                  Comments\\n                </FieldLabel>\\n                <Textarea\\n                  id=\\\"checkout-7j9-optional-comments\\\"\\n                  placeholder=\\\"Add any additional comments\\\"\\n                  className=\\\"resize-none\\\"\\n                />\\n              </Field>\\n            </FieldGroup>\\n          </FieldSet>\\n          <Field orientation=\\\"horizontal\\\">\\n            <Button type=\\\"submit\\\">Submit</Button>\\n            <Button variant=\\\"outline\\\" type=\\\"button\\\">\\n              Cancel\\n            </Button>\\n          </Field>\\n        </FieldGroup>\\n      </form>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Checkbox } from \"@rlx-widgets/checkbox\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Textarea } from \"@rlx-widgets/textarea\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@rlx-widgets/field\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@rlx-widgets/select\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <form>\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Payment Method</FieldLegend>\n            <FieldDescription>\n              All transactions are secure and encrypted\n            </FieldDescription>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                  Name on Card\n                </FieldLabel>\n                <Input\n                  id=\"checkout-7j9-card-name-43j\"\n                  placeholder=\"Evil Rabbit\"\n                  required\n                />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                  Card Number\n                </FieldLabel>\n                <Input\n                  id=\"checkout-7j9-card-number-uw1\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  required\n                />\n                <FieldDescription>\n                  Enter your 16-digit card number\n                </FieldDescription>\n              </Field>\n              <div className=\"grid grid-cols-3 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"checkout-exp-month-ts6\">\n                    Month\n                  </FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"checkout-exp-month-ts6\">\n                      <SelectValue placeholder=\"MM\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"01\">01</SelectItem>\n                      <SelectItem value=\"02\">02</SelectItem>\n                      <SelectItem value=\"03\">03</SelectItem>\n                      <SelectItem value=\"04\">04</SelectItem>\n                      <SelectItem value=\"05\">05</SelectItem>\n                      <SelectItem value=\"06\">06</SelectItem>\n                      <SelectItem value=\"07\">07</SelectItem>\n                      <SelectItem value=\"08\">08</SelectItem>\n                      <SelectItem value=\"09\">09</SelectItem>\n                      <SelectItem value=\"10\">10</SelectItem>\n                      <SelectItem value=\"11\">11</SelectItem>\n                      <SelectItem value=\"12\">12</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                    Year\n                  </FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                      <SelectValue placeholder=\"YYYY\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"2024\">2024</SelectItem>\n                      <SelectItem value=\"2025\">2025</SelectItem>\n                      <SelectItem value=\"2026\">2026</SelectItem>\n                      <SelectItem value=\"2027\">2027</SelectItem>\n                      <SelectItem value=\"2028\">2028</SelectItem>\n                      <SelectItem value=\"2029\">2029</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                  <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                </Field>\n              </div>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <FieldSet>\n            <FieldLegend>Billing Address</FieldLegend>\n            <FieldDescription>\n              The billing address associated with your payment method\n            </FieldDescription>\n            <FieldGroup>\n              <Field orientation=\"horizontal\">\n                <Checkbox\n                  id=\"checkout-7j9-same-as-shipping-wgm\"\n                  defaultChecked\n                />\n                <FieldLabel\n                  htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                  className=\"font-normal\"\n                >\n                  Same as shipping address\n                </FieldLabel>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSet>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                  Comments\n                </FieldLabel>\n                <Textarea\n                  id=\"checkout-7j9-optional-comments\"\n                  placeholder=\"Add any additional comments\"\n                  className=\"resize-none\"\n                />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "field-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Checkbox } from \\\"@rlx-widgets/checkbox\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldSeparator,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldGroup>\\n        <FieldSet>\\n          <FieldLabel>Responses</FieldLabel>\\n          <FieldDescription>\\n            Get notified when ChatGPT responds to requests that take time, like\\n            research or image generation.\\n          </FieldDescription>\\n          <FieldGroup data-slot=\\\"checkbox-group\\\">\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"push\\\" defaultChecked disabled />\\n              <FieldLabel htmlFor=\\\"push\\\" className=\\\"font-normal\\\">\\n                Push notifications\\n              </FieldLabel>\\n            </Field>\\n          </FieldGroup>\\n        </FieldSet>\\n        <FieldSeparator />\\n        <FieldSet>\\n          <FieldLabel>Tasks</FieldLabel>\\n          <FieldDescription>\\n            Get notified when tasks you&apos;ve created have updates.{\\\" \\\"}\\n            <a href=\\\"#\\\">Manage tasks</a>\\n          </FieldDescription>\\n          <FieldGroup data-slot=\\\"checkbox-group\\\">\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"push-tasks\\\" />\\n              <FieldLabel htmlFor=\\\"push-tasks\\\" className=\\\"font-normal\\\">\\n                Push notifications\\n              </FieldLabel>\\n            </Field>\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"email-tasks\\\" />\\n              <FieldLabel htmlFor=\\\"email-tasks\\\" className=\\\"font-normal\\\">\\n                Email notifications\\n              </FieldLabel>\\n            </Field>\\n          </FieldGroup>\\n        </FieldSet>\\n      </FieldGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Checkbox } from \"@rlx-widgets/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n} from \"@rlx-widgets/field\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLabel>Responses</FieldLabel>\n          <FieldDescription>\n            Get notified when ChatGPT responds to requests that take time, like\n            research or image generation.\n          </FieldDescription>\n          <FieldGroup data-slot=\"checkbox-group\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"push\" defaultChecked disabled />\n              <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                Push notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <FieldSeparator />\n        <FieldSet>\n          <FieldLabel>Tasks</FieldLabel>\n          <FieldDescription>\n            Get notified when tasks you&apos;ve created have updates.{\" \"}\n            <a href=\"#\">Manage tasks</a>\n          </FieldDescription>\n          <FieldGroup data-slot=\"checkbox-group\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"push-tasks\" />\n              <FieldLabel htmlFor=\"push-tasks\" className=\"font-normal\">\n                Push notifications\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"email-tasks\" />\n              <FieldLabel htmlFor=\"email-tasks\" className=\"font-normal\">\n                Email notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n      </FieldGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "fieldset",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Field,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldLegend,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md space-y-6\\\">\\n      <FieldSet>\\n        <FieldLegend>Address Information</FieldLegend>\\n        <FieldDescription>\\n          We need your address to deliver your order.\\n        </FieldDescription>\\n        <FieldGroup>\\n          <Field>\\n            <FieldLabel htmlFor=\\\"street\\\">Street Address</FieldLabel>\\n            <Input id=\\\"street\\\" type=\\\"text\\\" placeholder=\\\"123 Main St\\\" />\\n          </Field>\\n          <div className=\\\"grid grid-cols-2 gap-4\\\">\\n            <Field>\\n              <FieldLabel htmlFor=\\\"city\\\">City</FieldLabel>\\n              <Input id=\\\"city\\\" type=\\\"text\\\" placeholder=\\\"New York\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel htmlFor=\\\"zip\\\">Postal Code</FieldLabel>\\n              <Input id=\\\"zip\\\" type=\\\"text\\\" placeholder=\\\"90502\\\" />\\n            </Field>\\n          </div>\\n        </FieldGroup>\\n      </FieldSet>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@rlx-widgets/field\";\nimport { Input } from \"@rlx-widgets/input\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md space-y-6\">\n      <FieldSet>\n        <FieldLegend>Address Information</FieldLegend>\n        <FieldDescription>\n          We need your address to deliver your order.\n        </FieldDescription>\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"street\">Street Address</FieldLabel>\n            <Input id=\"street\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"city\">City</FieldLabel>\n              <Input id=\"city\" type=\"text\" placeholder=\"New York\" />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"zip\">Postal Code</FieldLabel>\n              <Input id=\"zip\" type=\"text\" placeholder=\"90502\" />\n            </Field>\n          </div>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "input",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Field,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldSet>\\n        <FieldGroup>\\n          <Field>\\n            <FieldLabel htmlFor=\\\"username\\\">Username</FieldLabel>\\n            <Input id=\\\"username\\\" type=\\\"text\\\" placeholder=\\\"Max Leiter\\\" />\\n            <FieldDescription>\\n              Choose a unique username for your account.\\n            </FieldDescription>\\n          </Field>\\n          <Field>\\n            <FieldLabel htmlFor=\\\"password\\\">Password</FieldLabel>\\n            <FieldDescription>\\n              Must be at least 8 characters long.\\n            </FieldDescription>\\n            <Input id=\\\"password\\\" type=\\\"password\\\" placeholder=\\\"********\\\" />\\n          </Field>\\n        </FieldGroup>\\n      </FieldSet>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSet,\n} from \"@rlx-widgets/field\";\nimport { Input } from \"@rlx-widgets/input\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldSet>\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n            <Input id=\"username\" type=\"text\" placeholder=\"Max Leiter\" />\n            <FieldDescription>\n              Choose a unique username for your account.\n            </FieldDescription>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <FieldDescription>\n              Must be at least 8 characters long.\n            </FieldDescription>\n            <Input id=\"password\" type=\"password\" placeholder=\"********\" />\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "radio",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@rlx-widgets/radio-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldSet>\\n        <FieldLabel>Subscription Plan</FieldLabel>\\n        <FieldDescription>\\n          Yearly and lifetime plans offer significant savings.\\n        </FieldDescription>\\n        <RadioGroup defaultValue=\\\"monthly\\\">\\n          <Field orientation=\\\"horizontal\\\">\\n            <RadioGroupItem value=\\\"monthly\\\" id=\\\"plan-monthly\\\" />\\n            <FieldLabel htmlFor=\\\"plan-monthly\\\" className=\\\"font-normal\\\">\\n              Monthly ($9.99/month)\\n            </FieldLabel>\\n          </Field>\\n          <Field orientation=\\\"horizontal\\\">\\n            <RadioGroupItem value=\\\"yearly\\\" id=\\\"plan-yearly\\\" />\\n            <FieldLabel htmlFor=\\\"plan-yearly\\\" className=\\\"font-normal\\\">\\n              Yearly ($99.99/year)\\n            </FieldLabel>\\n          </Field>\\n          <Field orientation=\\\"horizontal\\\">\\n            <RadioGroupItem value=\\\"lifetime\\\" id=\\\"plan-lifetime\\\" />\\n            <FieldLabel htmlFor=\\\"plan-lifetime\\\" className=\\\"font-normal\\\">\\n              Lifetime ($299.99)\\n            </FieldLabel>\\n          </Field>\\n        </RadioGroup>\\n      </FieldSet>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n  FieldSet,\n} from \"@rlx-widgets/field\";\nimport { RadioGroup, RadioGroupItem } from \"@rlx-widgets/radio-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldSet>\n        <FieldLabel>Subscription Plan</FieldLabel>\n        <FieldDescription>\n          Yearly and lifetime plans offer significant savings.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"monthly\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"monthly\" id=\"plan-monthly\" />\n            <FieldLabel htmlFor=\"plan-monthly\" className=\"font-normal\">\n              Monthly ($9.99/month)\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"yearly\" id=\"plan-yearly\" />\n            <FieldLabel htmlFor=\"plan-yearly\" className=\"font-normal\">\n              Yearly ($99.99/year)\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"lifetime\" id=\"plan-lifetime\" />\n            <FieldLabel htmlFor=\"plan-lifetime\" className=\"font-normal\">\n              Lifetime ($299.99)\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "responsive-layout",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Checkbox } from \\\"@rlx-widgets/checkbox\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldSeparator,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldGroup>\\n        <FieldSet>\\n          <FieldLabel>Responses</FieldLabel>\\n          <FieldDescription>\\n            Get notified when ChatGPT responds to requests that take time, like\\n            research or image generation.\\n          </FieldDescription>\\n          <FieldGroup data-slot=\\\"checkbox-group\\\">\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"push\\\" defaultChecked disabled />\\n              <FieldLabel htmlFor=\\\"push\\\" className=\\\"font-normal\\\">\\n                Push notifications\\n              </FieldLabel>\\n            </Field>\\n          </FieldGroup>\\n        </FieldSet>\\n        <FieldSeparator />\\n        <FieldSet>\\n          <FieldLabel>Tasks</FieldLabel>\\n          <FieldDescription>\\n            Get notified when tasks you&apos;ve created have updates.{\\\" \\\"}\\n            <a href=\\\"#\\\">Manage tasks</a>\\n          </FieldDescription>\\n          <FieldGroup data-slot=\\\"checkbox-group\\\">\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"push-tasks\\\" />\\n              <FieldLabel htmlFor=\\\"push-tasks\\\" className=\\\"font-normal\\\">\\n                Push notifications\\n              </FieldLabel>\\n            </Field>\\n            <Field orientation=\\\"horizontal\\\">\\n              <Checkbox id=\\\"email-tasks\\\" />\\n              <FieldLabel htmlFor=\\\"email-tasks\\\" className=\\\"font-normal\\\">\\n                Email notifications\\n              </FieldLabel>\\n            </Field>\\n          </FieldGroup>\\n        </FieldSet>\\n      </FieldGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Checkbox } from \"@rlx-widgets/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n} from \"@rlx-widgets/field\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLabel>Responses</FieldLabel>\n          <FieldDescription>\n            Get notified when ChatGPT responds to requests that take time, like\n            research or image generation.\n          </FieldDescription>\n          <FieldGroup data-slot=\"checkbox-group\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"push\" defaultChecked disabled />\n              <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                Push notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <FieldSeparator />\n        <FieldSet>\n          <FieldLabel>Tasks</FieldLabel>\n          <FieldDescription>\n            Get notified when tasks you&apos;ve created have updates.{\" \"}\n            <a href=\"#\">Manage tasks</a>\n          </FieldDescription>\n          <FieldGroup data-slot=\"checkbox-group\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"push-tasks\" />\n              <FieldLabel htmlFor=\"push-tasks\" className=\"font-normal\">\n                Push notifications\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"email-tasks\" />\n              <FieldLabel htmlFor=\"email-tasks\" className=\"font-normal\">\n                Email notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n      </FieldGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "select",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Field, FieldDescription, FieldLabel } from \\\"@rlx-widgets/field\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@rlx-widgets/select\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <Field>\\n        <FieldLabel>Department</FieldLabel>\\n        <Select>\\n          <SelectTrigger>\\n            <SelectValue placeholder=\\\"Choose department\\\" />\\n          </SelectTrigger>\\n          <SelectContent>\\n            <SelectItem value=\\\"engineering\\\">Engineering</SelectItem>\\n            <SelectItem value=\\\"design\\\">Design</SelectItem>\\n            <SelectItem value=\\\"marketing\\\">Marketing</SelectItem>\\n            <SelectItem value=\\\"sales\\\">Sales</SelectItem>\\n            <SelectItem value=\\\"support\\\">Customer Support</SelectItem>\\n            <SelectItem value=\\\"hr\\\">Human Resources</SelectItem>\\n            <SelectItem value=\\\"finance\\\">Finance</SelectItem>\\n            <SelectItem value=\\\"operations\\\">Operations</SelectItem>\\n          </SelectContent>\\n        </Select>\\n        <FieldDescription>\\n          Select your department or area of work.\\n        </FieldDescription>\\n      </Field>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Field, FieldDescription, FieldLabel } from \"@rlx-widgets/field\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@rlx-widgets/select\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <Field>\n        <FieldLabel>Department</FieldLabel>\n        <Select>\n          <SelectTrigger>\n            <SelectValue placeholder=\"Choose department\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"engineering\">Engineering</SelectItem>\n            <SelectItem value=\"design\">Design</SelectItem>\n            <SelectItem value=\"marketing\">Marketing</SelectItem>\n            <SelectItem value=\"sales\">Sales</SelectItem>\n            <SelectItem value=\"support\">Customer Support</SelectItem>\n            <SelectItem value=\"hr\">Human Resources</SelectItem>\n            <SelectItem value=\"finance\">Finance</SelectItem>\n            <SelectItem value=\"operations\">Operations</SelectItem>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Select your department or area of work.\n        </FieldDescription>\n      </Field>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "slider",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Field, FieldDescription, FieldTitle } from \\\"@rlx-widgets/field\\\";\\nimport { Slider } from \\\"@rlx-widgets/slider\\\";\\n\\nexport const Preview = () => {\\n  const [value, setValue] = useState([200, 800]);\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <Field>\\n        <FieldTitle>Price Range</FieldTitle>\\n        <FieldDescription>\\n          Set your budget range ($\\n          <span className=\\\"font-medium tabular-nums\\\">{value[0]}</span> -{\\\" \\\"}\\n          <span className=\\\"font-medium tabular-nums\\\">{value[1]}</span>).\\n        </FieldDescription>\\n        <Slider\\n          value={value}\\n          onValueChange={setValue}\\n          max={1000}\\n          min={0}\\n          step={10}\\n          className=\\\"mt-2 w-full\\\"\\n          aria-label=\\\"Price Range\\\"\\n        />\\n      </Field>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Field, FieldDescription, FieldTitle } from \"@rlx-widgets/field\";\nimport { Slider } from \"@rlx-widgets/slider\";\n\nexport const Preview = () => {\n  const [value, setValue] = useState([200, 800]);\n  return (\n    <div className=\"w-full max-w-md\">\n      <Field>\n        <FieldTitle>Price Range</FieldTitle>\n        <FieldDescription>\n          Set your budget range ($\n          <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n          <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n        </FieldDescription>\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          max={1000}\n          min={0}\n          step={10}\n          className=\"mt-2 w-full\"\n          aria-label=\"Price Range\"\n        />\n      </Field>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "switch",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Switch } from \\\"@rlx-widgets/switch\\\";\\nimport {\\n  Field,\\n  FieldContent,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@rlx-widgets/field\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <Field orientation=\\\"horizontal\\\">\\n        <FieldContent>\\n          <FieldLabel htmlFor=\\\"2fa\\\">Multi-factor authentication</FieldLabel>\\n          <FieldDescription>\\n            Enable multi-factor authentication. If you do not have a two-factor\\n            device, you can use a one-time code sent to your email.\\n          </FieldDescription>\\n        </FieldContent>\\n        <Switch id=\\\"2fa\\\" />\\n      </Field>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Switch } from \"@rlx-widgets/switch\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n} from \"@rlx-widgets/field\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <Field orientation=\"horizontal\">\n        <FieldContent>\n          <FieldLabel htmlFor=\"2fa\">Multi-factor authentication</FieldLabel>\n          <FieldDescription>\n            Enable multi-factor authentication. If you do not have a two-factor\n            device, you can use a one-time code sent to your email.\n          </FieldDescription>\n        </FieldContent>\n        <Switch id=\"2fa\" />\n      </Field>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "textarea",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Textarea } from \\\"@rlx-widgets/textarea\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldGroup,\\n  FieldLabel,\\n  FieldSet,\\n} from \\\"@rlx-widgets/field\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full max-w-md\\\">\\n      <FieldSet>\\n        <FieldGroup>\\n          <Field>\\n            <FieldLabel htmlFor=\\\"feedback\\\">Feedback</FieldLabel>\\n            <Textarea\\n              id=\\\"feedback\\\"\\n              placeholder=\\\"Your feedback helps us improve...\\\"\\n              rows={4}\\n            />\\n            <FieldDescription>\\n              Share your thoughts about our service.\\n            </FieldDescription>\\n          </Field>\\n        </FieldGroup>\\n      </FieldSet>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Textarea } from \"@rlx-widgets/textarea\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSet,\n} from \"@rlx-widgets/field\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full max-w-md\">\n      <FieldSet>\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n            <Textarea\n              id=\"feedback\"\n              placeholder=\"Your feedback helps us improve...\"\n              rows={4}\n            />\n            <FieldDescription>\n              Share your thoughts about our service.\n            </FieldDescription>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Hover Card",
+      "slug": "hover-card",
+      "category": "widget",
+      "path": "/widgets/hover-card",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  HoverCard,\\n  HoverCardContent,\\n  HoverCardTrigger,\\n} from \\\"@rlx-widgets/hover-card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <HoverCard>\\n      <HoverCardTrigger asChild>\\n        <Button variant=\\\"link\\\">@nextjs</Button>\\n      </HoverCardTrigger>\\n      <HoverCardContent className=\\\"w-80\\\">\\n        <div className=\\\"flex justify-between gap-4\\\">\\n          <Avatar>\\n            <AvatarImage src=\\\"https://github.com/vercel.png\\\" />\\n            <AvatarFallback>VC</AvatarFallback>\\n          </Avatar>\\n          <div className=\\\"space-y-1\\\">\\n            <h4 className=\\\"text-sm font-semibold\\\">@nextjs</h4>\\n            <p className=\\\"text-sm\\\">\\n              The React Framework – created and maintained by @vercel.\\n            </p>\\n            <div className=\\\"text-muted-foreground text-xs\\\">\\n              Joined December 2021\\n            </div>\\n          </div>\\n        </div>\\n      </HoverCardContent>\\n    </HoverCard>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@rlx-widgets/hover-card\";\n\nexport const Preview = () => {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between gap-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"text-muted-foreground text-xs\">\n              Joined December 2021\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Input",
+      "slug": "input",
+      "category": "widget",
+      "path": "/widgets/input",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Input } from \\\"@rlx-widgets/input\\\";\\n\\nexport const Preview = () => {\\n  return <Input type=\\\"email\\\" placeholder=\\\"Email\\\" />;\\n};\\n\"",
+          "preview": "import { Input } from \"@rlx-widgets/input\";\n\nexport const Preview = () => {\n  return <Input type=\"email\" placeholder=\"Email\" />;\n};\n"
+        },
+        {
+          "name": "disabled",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Input } from \\\"@rlx-widgets/input\\\";\\n\\nexport const Preview = () => {\\n  return <Input disabled type=\\\"email\\\" placeholder=\\\"Email\\\" />;\\n};\\n\"",
+          "preview": "import { Input } from \"@rlx-widgets/input\";\n\nexport const Preview = () => {\n  return <Input disabled type=\"email\" placeholder=\"Email\" />;\n};\n"
+        },
+        {
+          "name": "file",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm items-center gap-3\\\">\\n      <Label htmlFor=\\\"picture\\\">Picture</Label>\\n      <Input id=\\\"picture\\\" type=\\\"file\\\" />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"picture\">Picture</Label>\n      <Input id=\"picture\" type=\"file\" />\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { z } from \\\"zod\\\";\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"@rlx-widgets/form\\\";\\n\\nconst FormSchema = z.object({\\n  username: z.string().min(2, {\\n    message: \\\"Username must be at least 2 characters.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n    defaultValues: {\\n      username: \\\"\\\",\\n    },\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"w-2/3 space-y-6\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"username\\\"\\n          render={({ field }) => (\\n            <FormItem>\\n              <FormLabel>Username</FormLabel>\\n              <FormControl>\\n                <Input placeholder=\\\"shadcn\\\" {...field} />\\n              </FormControl>\\n              <FormDescription>\\n                This is your public display name.\\n              </FormDescription>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { toast } from \"sonner\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@rlx-widgets/form\";\n\nconst FormSchema = z.object({\n  username: z.string().min(2, {\n    message: \"Username must be at least 2 characters.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        },
+        {
+          "name": "with-button",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-sm items-center gap-2\\\">\\n      <Input type=\\\"email\\\" placeholder=\\\"Email\\\" />\\n      <Button type=\\\"submit\\\" variant=\\\"outline\\\">\\n        Subscribe\\n      </Button>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Input } from \"@rlx-widgets/input\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-sm items-center gap-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\" variant=\"outline\">\n        Subscribe\n      </Button>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "with-label",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm items-center gap-3\\\">\\n      <Label htmlFor=\\\"email\\\">Email</Label>\\n      <Input type=\\\"email\\\" id=\\\"email\\\" placeholder=\\\"Email\\\" />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email\">Email</Label>\n      <Input type=\"email\" id=\"email\" placeholder=\"Email\" />\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Input Group",
+      "slug": "input-group",
+      "category": "widget",
+      "path": "/widgets/input-group",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "button",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\nimport { useCopyToClipboard } from \\\"@rlx-hooks/use-copy-to-clipboard\\\";\\nimport {\\n  IconCheck,\\n  IconCopy,\\n  IconInfoCircle,\\n  IconStar,\\n} from \\\"@tabler/icons-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\\n  const [isFavorite, setIsFavorite] = React.useState(false);\\n\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-6\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"https://x.com/shadcn\\\" readOnly />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupButton\\n            aria-label=\\\"Copy\\\"\\n            title=\\\"Copy\\\"\\n            size=\\\"icon-xs\\\"\\n            onClick={() => {\\n              copyToClipboard(\\\"https://x.com/shadcn\\\");\\n            }}\\n          >\\n            {isCopied ? <IconCheck /> : <IconCopy />}\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup className=\\\"[--radius:9999px]\\\">\\n        <Popover>\\n          <PopoverTrigger asChild>\\n            <InputGroupAddon>\\n              <InputGroupButton variant=\\\"secondary\\\" size=\\\"icon-xs\\\">\\n                <IconInfoCircle />\\n              </InputGroupButton>\\n            </InputGroupAddon>\\n          </PopoverTrigger>\\n          <PopoverContent\\n            align=\\\"start\\\"\\n            className=\\\"flex flex-col gap-1 rounded-xl text-sm\\\"\\n          >\\n            <p className=\\\"font-medium\\\">Your connection is not secure.</p>\\n            <p>You should not enter any sensitive information on this site.</p>\\n          </PopoverContent>\\n        </Popover>\\n        <InputGroupAddon className=\\\"text-muted-foreground pl-1.5\\\">\\n          https://\\n        </InputGroupAddon>\\n        <InputGroupInput id=\\\"input-secure-19\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupButton\\n            onClick={() => setIsFavorite(!isFavorite)}\\n            size=\\\"icon-xs\\\"\\n          >\\n            <IconStar\\n              data-favorite={isFavorite}\\n              className=\\\"data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600\\\"\\n            />\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Type to search...\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupButton variant=\\\"secondary\\\">Search</InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\nimport { useCopyToClipboard } from \"@rlx-hooks/use-copy-to-clipboard\";\nimport {\n  IconCheck,\n  IconCopy,\n  IconInfoCircle,\n  IconStar,\n} from \"@tabler/icons-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n  const [isFavorite, setIsFavorite] = React.useState(false);\n\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"https://x.com/shadcn\" readOnly />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            aria-label=\"Copy\"\n            title=\"Copy\"\n            size=\"icon-xs\"\n            onClick={() => {\n              copyToClipboard(\"https://x.com/shadcn\");\n            }}\n          >\n            {isCopied ? <IconCheck /> : <IconCopy />}\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:9999px]\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"start\"\n            className=\"flex flex-col gap-1 rounded-xl text-sm\"\n          >\n            <p className=\"font-medium\">Your connection is not secure.</p>\n            <p>You should not enter any sensitive information on this site.</p>\n          </PopoverContent>\n        </Popover>\n        <InputGroupAddon className=\"text-muted-foreground pl-1.5\">\n          https://\n        </InputGroupAddon>\n        <InputGroupInput id=\"input-secure-19\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            onClick={() => setIsFavorite(!isFavorite)}\n            size=\"icon-xs\"\n          >\n            <IconStar\n              data-favorite={isFavorite}\n              className=\"data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600\"\n            />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Type to search...\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton variant=\"secondary\">Search</InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "button-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ButtonGroup, ButtonGroupText } from \\\"@rlx-widgets/button-group\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Link2Icon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-6\\\">\\n      <ButtonGroup>\\n        <ButtonGroupText asChild>\\n          <Label htmlFor=\\\"url\\\">https://</Label>\\n        </ButtonGroupText>\\n        <InputGroup>\\n          <InputGroupInput id=\\\"url\\\" />\\n          <InputGroupAddon align=\\\"inline-end\\\">\\n            <Link2Icon />\\n          </InputGroupAddon>\\n        </InputGroup>\\n        <ButtonGroupText>.com</ButtonGroupText>\\n      </ButtonGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { ButtonGroup, ButtonGroupText } from \"@rlx-widgets/button-group\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Link2Icon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <ButtonGroup>\n        <ButtonGroupText asChild>\n          <Label htmlFor=\"url\">https://</Label>\n        </ButtonGroupText>\n        <InputGroup>\n          <InputGroupInput id=\"url\" />\n          <InputGroupAddon align=\"inline-end\">\n            <Link2Icon />\n          </InputGroupAddon>\n        </InputGroup>\n        <ButtonGroupText>.com</ButtonGroupText>\n      </ButtonGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "custom-input",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport TextareaAutosize from \\\"react-textarea-autosize\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-6\\\">\\n      <InputGroup>\\n        <TextareaAutosize\\n          data-slot=\\\"input-group-control\\\"\\n          className=\\\"flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm\\\"\\n          placeholder=\\\"Autoresize textarea...\\\"\\n        />\\n        <InputGroupAddon align=\\\"block-end\\\">\\n          <InputGroupButton className=\\\"ml-auto\\\" size=\\\"sm\\\" variant=\\\"default\\\">\\n            Submit\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <TextareaAutosize\n          data-slot=\"input-group-control\"\n          className=\"flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm\"\n          placeholder=\"Autoresize textarea...\"\n        />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton className=\"ml-auto\" size=\"sm\" variant=\"default\">\n            Submit\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ArrowUpIcon, Search } from \\\"lucide-react\\\";\\nimport { IconCheck, IconInfoCircle, IconPlus } from \\\"@tabler/icons-react\\\";\\nimport { Separator } from \\\"@rlx-widgets/separator\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"@rlx-widgets/tooltip\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n  InputGroupText,\\n  InputGroupTextarea,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-6\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Search...\\\" />\\n        <InputGroupAddon>\\n          <Search />\\n        </InputGroupAddon>\\n        <InputGroupAddon align=\\\"inline-end\\\">12 results</InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"example.com\\\" className=\\\"!pl-1\\\" />\\n        <InputGroupAddon>\\n          <InputGroupText>https://</InputGroupText>\\n        </InputGroupAddon>\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <InputGroupButton className=\\\"rounded-full\\\" size=\\\"icon-xs\\\">\\n                <IconInfoCircle />\\n              </InputGroupButton>\\n            </TooltipTrigger>\\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\\n          </Tooltip>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupTextarea placeholder=\\\"Ask, Search or Chat...\\\" />\\n        <InputGroupAddon align=\\\"block-end\\\">\\n          <InputGroupButton\\n            variant=\\\"outline\\\"\\n            className=\\\"rounded-full\\\"\\n            size=\\\"icon-xs\\\"\\n          >\\n            <IconPlus />\\n          </InputGroupButton>\\n          <DropdownMenu>\\n            <DropdownMenuTrigger asChild>\\n              <InputGroupButton variant=\\\"ghost\\\">Auto</InputGroupButton>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent\\n              side=\\\"top\\\"\\n              align=\\\"start\\\"\\n              className=\\\"[--radius:0.95rem]\\\"\\n            >\\n              <DropdownMenuItem>Auto</DropdownMenuItem>\\n              <DropdownMenuItem>Agent</DropdownMenuItem>\\n              <DropdownMenuItem>Manual</DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n          <InputGroupText className=\\\"ml-auto\\\">52% used</InputGroupText>\\n          <Separator orientation=\\\"vertical\\\" className=\\\"!h-4\\\" />\\n          <InputGroupButton\\n            variant=\\\"default\\\"\\n            className=\\\"rounded-full\\\"\\n            size=\\\"icon-xs\\\"\\n            disabled\\n          >\\n            <ArrowUpIcon />\\n            <span className=\\\"sr-only\\\">Send</span>\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"@shadcn\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <div className=\\\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\\\">\\n            <IconCheck className=\\\"size-3\\\" />\\n          </div>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { ArrowUpIcon, Search } from \"lucide-react\";\nimport { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\";\nimport { Separator } from \"@rlx-widgets/separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@rlx-widgets/tooltip\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuItem>Auto</DropdownMenuItem>\n              <DropdownMenuItem>Agent</DropdownMenuItem>\n              <DropdownMenuItem>Manual</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "dropdown",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ChevronDownIcon, MoreHorizontal } from \\\"lucide-react\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-4\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Enter file name\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <DropdownMenu>\\n            <DropdownMenuTrigger asChild>\\n              <InputGroupButton\\n                variant=\\\"ghost\\\"\\n                aria-label=\\\"More\\\"\\n                size=\\\"icon-xs\\\"\\n              >\\n                <MoreHorizontal />\\n              </InputGroupButton>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"end\\\">\\n              <DropdownMenuItem>Settings</DropdownMenuItem>\\n              <DropdownMenuItem>Copy path</DropdownMenuItem>\\n              <DropdownMenuItem>Open location</DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup className=\\\"[--radius:1rem]\\\">\\n        <InputGroupInput placeholder=\\\"Enter search query\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <DropdownMenu>\\n            <DropdownMenuTrigger asChild>\\n              <InputGroupButton variant=\\\"ghost\\\" className=\\\"!pr-1.5 text-xs\\\">\\n                Search In... <ChevronDownIcon className=\\\"size-3\\\" />\\n              </InputGroupButton>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"end\\\" className=\\\"[--radius:0.95rem]\\\">\\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\\n              <DropdownMenuItem>Blog Posts</DropdownMenuItem>\\n              <DropdownMenuItem>Changelog</DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { ChevronDownIcon, MoreHorizontal } from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter file name\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"More\"\n                size=\"icon-xs\"\n              >\n                <MoreHorizontal />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Copy path</DropdownMenuItem>\n              <DropdownMenuItem>Open location</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:1rem]\">\n        <InputGroupInput placeholder=\"Enter search query\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" className=\"!pr-1.5 text-xs\">\n                Search In... <ChevronDownIcon className=\"size-3\" />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"[--radius:0.95rem]\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Blog Posts</DropdownMenuItem>\n              <DropdownMenuItem>Changelog</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "icon",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  CheckIcon,\\n  CreditCardIcon,\\n  InfoIcon,\\n  MailIcon,\\n  SearchIcon,\\n  StarIcon,\\n} from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-6\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Search...\\\" />\\n        <InputGroupAddon>\\n          <SearchIcon />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput type=\\\"email\\\" placeholder=\\\"Enter your email\\\" />\\n        <InputGroupAddon>\\n          <MailIcon />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Card number\\\" />\\n        <InputGroupAddon>\\n          <CreditCardIcon />\\n        </InputGroupAddon>\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <CheckIcon />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Card number\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <StarIcon />\\n          <InfoIcon />\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  CheckIcon,\n  CreditCardIcon,\n  InfoIcon,\n  MailIcon,\n  SearchIcon,\n  StarIcon,\n} from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput type=\"email\" placeholder=\"Enter your email\" />\n        <InputGroupAddon>\n          <MailIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Card number\" />\n        <InputGroupAddon>\n          <CreditCardIcon />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <CheckIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Card number\" />\n        <InputGroupAddon align=\"inline-end\">\n          <StarIcon />\n          <InfoIcon />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "label",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { InfoIcon } from \\\"lucide-react\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"@rlx-widgets/tooltip\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-4\\\">\\n      <InputGroup>\\n        <InputGroupInput id=\\\"email\\\" placeholder=\\\"shadcn\\\" />\\n        <InputGroupAddon>\\n          <Label htmlFor=\\\"email\\\">@</Label>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput id=\\\"email-2\\\" placeholder=\\\"shadcn@vercel.com\\\" />\\n        <InputGroupAddon align=\\\"block-start\\\">\\n          <Label htmlFor=\\\"email-2\\\" className=\\\"text-foreground\\\">\\n            Email\\n          </Label>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <InputGroupButton\\n                variant=\\\"ghost\\\"\\n                aria-label=\\\"Help\\\"\\n                className=\\\"ml-auto rounded-full\\\"\\n                size=\\\"icon-xs\\\"\\n              >\\n                <InfoIcon />\\n              </InputGroupButton>\\n            </TooltipTrigger>\\n            <TooltipContent>\\n              <p>We&apos;ll use this to send you notifications</p>\\n            </TooltipContent>\\n          </Tooltip>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { InfoIcon } from \"lucide-react\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@rlx-widgets/tooltip\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput id=\"email\" placeholder=\"shadcn\" />\n        <InputGroupAddon>\n          <Label htmlFor=\"email\">@</Label>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput id=\"email-2\" placeholder=\"shadcn@vercel.com\" />\n        <InputGroupAddon align=\"block-start\">\n          <Label htmlFor=\"email-2\" className=\"text-foreground\">\n            Email\n          </Label>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"Help\"\n                className=\"ml-auto rounded-full\"\n                size=\"icon-xs\"\n              >\n                <InfoIcon />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "spinner",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { LoaderIcon } from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n  InputGroupText,\\n} from \\\"@rlx-widgets/input-group\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-4\\\">\\n      <InputGroup data-disabled>\\n        <InputGroupInput placeholder=\\\"Searching...\\\" disabled />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Spinner />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup data-disabled>\\n        <InputGroupInput placeholder=\\\"Processing...\\\" disabled />\\n        <InputGroupAddon>\\n          <Spinner />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup data-disabled>\\n        <InputGroupInput placeholder=\\\"Saving changes...\\\" disabled />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupText>Saving...</InputGroupText>\\n          <Spinner />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup data-disabled>\\n        <InputGroupInput placeholder=\\\"Refreshing data...\\\" disabled />\\n        <InputGroupAddon>\\n          <LoaderIcon className=\\\"animate-spin\\\" />\\n        </InputGroupAddon>\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupText className=\\\"text-muted-foreground\\\">\\n            Please wait...\\n          </InputGroupText>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { LoaderIcon } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@rlx-widgets/input-group\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup data-disabled>\n        <InputGroupInput placeholder=\"Searching...\" disabled />\n        <InputGroupAddon align=\"inline-end\">\n          <Spinner />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup data-disabled>\n        <InputGroupInput placeholder=\"Processing...\" disabled />\n        <InputGroupAddon>\n          <Spinner />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup data-disabled>\n        <InputGroupInput placeholder=\"Saving changes...\" disabled />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>Saving...</InputGroupText>\n          <Spinner />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup data-disabled>\n        <InputGroupInput placeholder=\"Refreshing data...\" disabled />\n        <InputGroupAddon>\n          <LoaderIcon className=\"animate-spin\" />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText className=\"text-muted-foreground\">\n            Please wait...\n          </InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "text",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n  InputGroupText,\\n  InputGroupTextarea,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-6\\\">\\n      <InputGroup>\\n        <InputGroupAddon>\\n          <InputGroupText>$</InputGroupText>\\n        </InputGroupAddon>\\n        <InputGroupInput placeholder=\\\"0.00\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupText>USD</InputGroupText>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupAddon>\\n          <InputGroupText>https://</InputGroupText>\\n        </InputGroupAddon>\\n        <InputGroupInput placeholder=\\\"example.com\\\" className=\\\"!pl-0.5\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupText>.com</InputGroupText>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Enter your username\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <InputGroupText>@company.com</InputGroupText>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupTextarea placeholder=\\\"Enter your message\\\" />\\n        <InputGroupAddon align=\\\"block-end\\\">\\n          <InputGroupText className=\\\"text-muted-foreground text-xs\\\">\\n            120 characters left\\n          </InputGroupText>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>$</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"0.00\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>USD</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-0.5\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter your username\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>@company.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Enter your message\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupText className=\"text-muted-foreground text-xs\">\n            120 characters left\n          </InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "textarea",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  IconBrandJavascript,\\n  IconCopy,\\n  IconCornerDownLeft,\\n  IconRefresh,\\n} from \\\"@tabler/icons-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupText,\\n  InputGroupTextarea,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-md gap-4\\\">\\n      <InputGroup>\\n        <InputGroupTextarea\\n          id=\\\"textarea-code-32\\\"\\n          placeholder=\\\"console.log('Hello, world!');\\\"\\n          className=\\\"min-h-[200px]\\\"\\n        />\\n        <InputGroupAddon align=\\\"block-end\\\" className=\\\"border-t\\\">\\n          <InputGroupText>Line 1, Column 1</InputGroupText>\\n          <InputGroupButton size=\\\"sm\\\" className=\\\"ml-auto\\\" variant=\\\"default\\\">\\n            Run <IconCornerDownLeft />\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n        <InputGroupAddon align=\\\"block-start\\\" className=\\\"border-b\\\">\\n          <InputGroupText className=\\\"font-mono font-medium\\\">\\n            <IconBrandJavascript />\\n            script.js\\n          </InputGroupText>\\n          <InputGroupButton className=\\\"ml-auto\\\" size=\\\"icon-xs\\\">\\n            <IconRefresh />\\n          </InputGroupButton>\\n          <InputGroupButton variant=\\\"ghost\\\" size=\\\"icon-xs\\\">\\n            <IconCopy />\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  IconBrandJavascript,\n  IconCopy,\n  IconCornerDownLeft,\n  IconRefresh,\n} from \"@tabler/icons-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-md gap-4\">\n      <InputGroup>\n        <InputGroupTextarea\n          id=\"textarea-code-32\"\n          placeholder=\"console.log('Hello, world!');\"\n          className=\"min-h-[200px]\"\n        />\n        <InputGroupAddon align=\"block-end\" className=\"border-t\">\n          <InputGroupText>Line 1, Column 1</InputGroupText>\n          <InputGroupButton size=\"sm\" className=\"ml-auto\" variant=\"default\">\n            Run <IconCornerDownLeft />\n          </InputGroupButton>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"block-start\" className=\"border-b\">\n          <InputGroupText className=\"font-mono font-medium\">\n            <IconBrandJavascript />\n            script.js\n          </InputGroupText>\n          <InputGroupButton className=\"ml-auto\" size=\"icon-xs\">\n            <IconRefresh />\n          </InputGroupButton>\n          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n            <IconCopy />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "tooltip",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { HelpCircle, InfoIcon } from \\\"lucide-react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"@rlx-widgets/tooltip\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"grid w-full max-w-sm gap-4\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Enter password\\\" type=\\\"password\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <InputGroupButton\\n                variant=\\\"ghost\\\"\\n                aria-label=\\\"Info\\\"\\n                size=\\\"icon-xs\\\"\\n              >\\n                <InfoIcon />\\n              </InputGroupButton>\\n            </TooltipTrigger>\\n            <TooltipContent>\\n              <p>Password must be at least 8 characters</p>\\n            </TooltipContent>\\n          </Tooltip>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Your email address\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <InputGroupButton\\n                variant=\\\"ghost\\\"\\n                aria-label=\\\"Help\\\"\\n                size=\\\"icon-xs\\\"\\n              >\\n                <HelpCircle />\\n              </InputGroupButton>\\n            </TooltipTrigger>\\n            <TooltipContent>\\n              <p>We&apos;ll use this to send you notifications</p>\\n            </TooltipContent>\\n          </Tooltip>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Enter API key\\\" />\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <InputGroupAddon>\\n              <InputGroupButton\\n                variant=\\\"ghost\\\"\\n                aria-label=\\\"Help\\\"\\n                size=\\\"icon-xs\\\"\\n              >\\n                <HelpCircle />\\n              </InputGroupButton>\\n            </InputGroupAddon>\\n          </TooltipTrigger>\\n          <TooltipContent side=\\\"left\\\">\\n            <p>Click for help with API keys</p>\\n          </TooltipContent>\\n        </Tooltip>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { HelpCircle, InfoIcon } from \"lucide-react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@rlx-widgets/tooltip\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"Info\"\n                size=\"icon-xs\"\n              >\n                <InfoIcon />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>Password must be at least 8 characters</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your email address\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"Help\"\n                size=\"icon-xs\"\n              >\n                <HelpCircle />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>\n              <p>We&apos;ll use this to send you notifications</p>\n            </TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter API key\" />\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <InputGroupAddon>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"Help\"\n                size=\"icon-xs\"\n              >\n                <HelpCircle />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            <p>Click for help with API keys</p>\n          </TooltipContent>\n        </Tooltip>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Input Otp",
+      "slug": "input-otp",
+      "category": "widget",
+      "path": "/widgets/input-otp",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "controlled",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \\\"@rlx-widgets/input-otp\\\";\\n\\nexport const Preview = () => {\\n  const [value, setValue] = React.useState(\\\"\\\");\\n\\n  return (\\n    <div className=\\\"space-y-2\\\">\\n      <InputOTP\\n        maxLength={6}\\n        value={value}\\n        onChange={(value) => setValue(value)}\\n      >\\n        <InputOTPGroup>\\n          <InputOTPSlot index={0} />\\n          <InputOTPSlot index={1} />\\n          <InputOTPSlot index={2} />\\n          <InputOTPSlot index={3} />\\n          <InputOTPSlot index={4} />\\n          <InputOTPSlot index={5} />\\n        </InputOTPGroup>\\n      </InputOTP>\\n      <div className=\\\"text-center text-sm\\\">\\n        {value === \\\"\\\" ? (\\n          <>Enter your one-time password.</>\\n        ) : (\\n          <>You entered: {value}</>\\n        )}\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@rlx-widgets/input-otp\";\n\nexport const Preview = () => {\n  const [value, setValue] = React.useState(\"\");\n\n  return (\n    <div className=\"space-y-2\">\n      <InputOTP\n        maxLength={6}\n        value={value}\n        onChange={(value) => setValue(value)}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n          <InputOTPSlot index={4} />\n          <InputOTPSlot index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      <div className=\"text-center text-sm\">\n        {value === \"\" ? (\n          <>Enter your one-time password.</>\n        ) : (\n          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSeparator,\\n  InputOTPSlot,\\n} from \\\"@rlx-widgets/input-otp\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <InputOTP maxLength={6}>\\n      <InputOTPGroup>\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n        <InputOTPSlot index={2} />\\n      </InputOTPGroup>\\n      <InputOTPSeparator />\\n      <InputOTPGroup>\\n        <InputOTPSlot index={3} />\\n        <InputOTPSlot index={4} />\\n        <InputOTPSlot index={5} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n};\\n\"",
+          "preview": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@rlx-widgets/input-otp\";\n\nexport const Preview = () => {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n};\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \\\"@rlx-widgets/input-otp\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { z } from \\\"zod\\\";\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"@rlx-widgets/form\\\";\\n\\nconst FormSchema = z.object({\\n  pin: z.string().min(6, {\\n    message: \\\"Your one-time password must be 6 characters.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n    defaultValues: {\\n      pin: \\\"\\\",\\n    },\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"w-2/3 space-y-6\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"pin\\\"\\n          render={({ field }) => (\\n            <FormItem>\\n              <FormLabel>One-Time Password</FormLabel>\\n              <FormControl>\\n                <InputOTP maxLength={6} {...field}>\\n                  <InputOTPGroup>\\n                    <InputOTPSlot index={0} />\\n                    <InputOTPSlot index={1} />\\n                    <InputOTPSlot index={2} />\\n                    <InputOTPSlot index={3} />\\n                    <InputOTPSlot index={4} />\\n                    <InputOTPSlot index={5} />\\n                  </InputOTPGroup>\\n                </InputOTP>\\n              </FormControl>\\n              <FormDescription>\\n                Please enter the one-time password sent to your phone.\\n              </FormDescription>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@rlx-widgets/input-otp\";\nimport { toast } from \"sonner\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@rlx-widgets/form\";\n\nconst FormSchema = z.object({\n  pin: z.string().min(6, {\n    message: \"Your one-time password must be 6 characters.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      pin: \"\",\n    },\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"pin\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>One-Time Password</FormLabel>\n              <FormControl>\n                <InputOTP maxLength={6} {...field}>\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n              </FormControl>\n              <FormDescription>\n                Please enter the one-time password sent to your phone.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        },
+        {
+          "name": "pattern",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { REGEXP_ONLY_DIGITS_AND_CHARS } from \\\"input-otp\\\";\\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \\\"@rlx-widgets/input-otp\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\\n      <InputOTPGroup>\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n        <InputOTPSlot index={2} />\\n        <InputOTPSlot index={3} />\\n        <InputOTPSlot index={4} />\\n        <InputOTPSlot index={5} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@rlx-widgets/input-otp\";\n\nexport const Preview = () => {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n};\n"
+        },
+        {
+          "name": "separator",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import React from \\\"react\\\";\\nimport {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSeparator,\\n  InputOTPSlot,\\n} from \\\"@rlx-widgets/input-otp\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <InputOTP maxLength={6}>\\n      <InputOTPGroup>\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n      </InputOTPGroup>\\n      <InputOTPSeparator />\\n      <InputOTPGroup>\\n        <InputOTPSlot index={2} />\\n        <InputOTPSlot index={3} />\\n      </InputOTPGroup>\\n      <InputOTPSeparator />\\n      <InputOTPGroup>\\n        <InputOTPSlot index={4} />\\n        <InputOTPSlot index={5} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n};\\n\"",
+          "preview": "import React from \"react\";\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@rlx-widgets/input-otp\";\n\nexport const Preview = () => {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Item",
+      "slug": "item",
+      "category": "widget",
+      "path": "/widgets/item",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "avatar",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Plus } from \\\"lucide-react\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-lg flex-col gap-6\\\">\\n      <Item variant=\\\"outline\\\">\\n        <ItemMedia>\\n          <Avatar className=\\\"size-10\\\">\\n            <AvatarImage src=\\\"https://github.com/evilrabbit.png\\\" />\\n            <AvatarFallback>ER</AvatarFallback>\\n          </Avatar>\\n        </ItemMedia>\\n        <ItemContent>\\n          <ItemTitle>Evil Rabbit</ItemTitle>\\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button\\n            size=\\\"icon-sm\\\"\\n            variant=\\\"outline\\\"\\n            className=\\\"rounded-full\\\"\\n            aria-label=\\\"Invite\\\"\\n          >\\n            <Plus />\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n      <Item variant=\\\"outline\\\">\\n        <ItemMedia>\\n          <div className=\\\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\\\">\\n            <Avatar className=\\\"hidden sm:flex\\\">\\n              <AvatarImage src=\\\"https://github.com/shadcn.png\\\" alt=\\\"@shadcn\\\" />\\n              <AvatarFallback>CN</AvatarFallback>\\n            </Avatar>\\n            <Avatar className=\\\"hidden sm:flex\\\">\\n              <AvatarImage\\n                src=\\\"https://github.com/maxleiter.png\\\"\\n                alt=\\\"@maxleiter\\\"\\n              />\\n              <AvatarFallback>LR</AvatarFallback>\\n            </Avatar>\\n            <Avatar>\\n              <AvatarImage\\n                src=\\\"https://github.com/evilrabbit.png\\\"\\n                alt=\\\"@evilrabbit\\\"\\n              />\\n              <AvatarFallback>ER</AvatarFallback>\\n            </Avatar>\\n          </div>\\n        </ItemMedia>\\n        <ItemContent>\\n          <ItemTitle>No Team Members</ItemTitle>\\n          <ItemDescription>\\n            Invite your team to collaborate on this project.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            Invite\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { Plus } from \"lucide-react\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/evilrabbit.png\" />\n            <AvatarFallback>ER</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Evil Rabbit</ItemTitle>\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button\n            size=\"icon-sm\"\n            variant=\"outline\"\n            className=\"rounded-full\"\n            aria-label=\"Invite\"\n          >\n            <Plus />\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>No Team Members</ItemTitle>\n          <ItemDescription>\n            Invite your team to collaborate on this project.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Invite\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { BadgeCheckIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-6\\\">\\n      <Item variant=\\\"outline\\\">\\n        <ItemContent>\\n          <ItemTitle>Basic Item</ItemTitle>\\n          <ItemDescription>\\n            A simple item with title and description.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Action\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n      <Item variant=\\\"outline\\\" size=\\\"sm\\\" asChild>\\n        <a href=\\\"#\\\">\\n          <ItemMedia>\\n            <BadgeCheckIcon className=\\\"size-5\\\" />\\n          </ItemMedia>\\n          <ItemContent>\\n            <ItemTitle>Your profile has been verified.</ItemTitle>\\n          </ItemContent>\\n          <ItemActions>\\n            <ChevronRightIcon className=\\\"size-4\\\" />\\n          </ItemActions>\\n        </a>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { BadgeCheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Basic Item</ItemTitle>\n          <ItemDescription>\n            A simple item with title and description.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\" asChild>\n        <a href=\"#\">\n          <ItemMedia>\n            <BadgeCheckIcon className=\"size-5\" />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your profile has been verified.</ItemTitle>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "dropdown",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@rlx-widgets/dropdown-menu\\\";\\nimport {\\n  Item,\\n  ItemContent,\\n  ItemDescription,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nconst people = [\\n  {\\n    username: \\\"shadcn\\\",\\n    avatar: \\\"https://github.com/shadcn.png\\\",\\n    email: \\\"shadcn@vercel.com\\\",\\n  },\\n  {\\n    username: \\\"maxleiter\\\",\\n    avatar: \\\"https://github.com/maxleiter.png\\\",\\n    email: \\\"maxleiter@vercel.com\\\",\\n  },\\n  {\\n    username: \\\"evilrabbit\\\",\\n    avatar: \\\"https://github.com/evilrabbit.png\\\",\\n    email: \\\"evilrabbit@vercel.com\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\\\">\\n      <DropdownMenu>\\n        <DropdownMenuTrigger asChild>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\" className=\\\"w-fit\\\">\\n            Select <ChevronDownIcon />\\n          </Button>\\n        </DropdownMenuTrigger>\\n        <DropdownMenuContent className=\\\"w-72 [--radius:0.65rem]\\\" align=\\\"end\\\">\\n          {people.map((person) => (\\n            <DropdownMenuItem key={person.username} className=\\\"p-0\\\">\\n              <Item size=\\\"sm\\\" className=\\\"w-full p-2\\\">\\n                <ItemMedia>\\n                  <Avatar className=\\\"size-8\\\">\\n                    <AvatarImage src={person.avatar} className=\\\"grayscale\\\" />\\n                    <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\\n                  </Avatar>\\n                </ItemMedia>\\n                <ItemContent className=\\\"gap-0.5\\\">\\n                  <ItemTitle>{person.username}</ItemTitle>\\n                  <ItemDescription>{person.email}</ItemDescription>\\n                </ItemContent>\\n              </Item>\\n            </DropdownMenuItem>\\n          ))}\\n        </DropdownMenuContent>\\n      </DropdownMenu>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@rlx-widgets/dropdown-menu\";\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-fit\">\n            Select <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n          {people.map((person) => (\n            <DropdownMenuItem key={person.username} className=\"p-0\">\n              <Item size=\"sm\" className=\"w-full p-2\">\n                <ItemMedia>\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={person.avatar} className=\"grayscale\" />\n                    <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0.5\">\n                  <ItemTitle>{person.username}</ItemTitle>\n                  <ItemDescription>{person.email}</ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\nimport { Avatar, AvatarFallback, AvatarImage } from \\\"@rlx-widgets/avatar\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { PlusIcon } from \\\"lucide-react\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemGroup,\\n  ItemMedia,\\n  ItemSeparator,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nconst people = [\\n  {\\n    username: \\\"shadcn\\\",\\n    avatar: \\\"https://github.com/shadcn.png\\\",\\n    email: \\\"shadcn@vercel.com\\\",\\n  },\\n  {\\n    username: \\\"maxleiter\\\",\\n    avatar: \\\"https://github.com/maxleiter.png\\\",\\n    email: \\\"maxleiter@vercel.com\\\",\\n  },\\n  {\\n    username: \\\"evilrabbit\\\",\\n    avatar: \\\"https://github.com/evilrabbit.png\\\",\\n    email: \\\"evilrabbit@vercel.com\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-6\\\">\\n      <ItemGroup>\\n        {people.map((person, index) => (\\n          <React.Fragment key={person.username}>\\n            <Item>\\n              <ItemMedia>\\n                <Avatar>\\n                  <AvatarImage src={person.avatar} className=\\\"grayscale\\\" />\\n                  <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\\n                </Avatar>\\n              </ItemMedia>\\n              <ItemContent className=\\\"gap-1\\\">\\n                <ItemTitle>{person.username}</ItemTitle>\\n                <ItemDescription>{person.email}</ItemDescription>\\n              </ItemContent>\\n              <ItemActions>\\n                <Button variant=\\\"ghost\\\" size=\\\"icon\\\" className=\\\"rounded-full\\\">\\n                  <PlusIcon />\\n                </Button>\\n              </ItemActions>\\n            </Item>\\n            {index !== people.length - 1 && <ItemSeparator />}\\n          </React.Fragment>\\n        ))}\\n      </ItemGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@rlx-widgets/avatar\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { PlusIcon } from \"lucide-react\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nconst people = [\n  {\n    username: \"shadcn\",\n    avatar: \"https://github.com/shadcn.png\",\n    email: \"shadcn@vercel.com\",\n  },\n  {\n    username: \"maxleiter\",\n    avatar: \"https://github.com/maxleiter.png\",\n    email: \"maxleiter@vercel.com\",\n  },\n  {\n    username: \"evilrabbit\",\n    avatar: \"https://github.com/evilrabbit.png\",\n    email: \"evilrabbit@vercel.com\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <ItemGroup>\n        {people.map((person, index) => (\n          <React.Fragment key={person.username}>\n            <Item>\n              <ItemMedia>\n                <Avatar>\n                  <AvatarImage src={person.avatar} className=\"grayscale\" />\n                  <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                </Avatar>\n              </ItemMedia>\n              <ItemContent className=\"gap-1\">\n                <ItemTitle>{person.username}</ItemTitle>\n                <ItemDescription>{person.email}</ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                  <PlusIcon />\n                </Button>\n              </ItemActions>\n            </Item>\n            {index !== people.length - 1 && <ItemSeparator />}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "header",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Image from \\\"next/image\\\";\\nimport {\\n  Item,\\n  ItemContent,\\n  ItemDescription,\\n  ItemGroup,\\n  ItemHeader,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nconst models = [\\n  {\\n    name: \\\"v0-1.5-sm\\\",\\n    description: \\\"Everyday tasks and UI generation.\\\",\\n    image:\\n      \\\"https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop\\\",\\n    credit: \\\"Valeria Reverdo on Unsplash\\\",\\n  },\\n  {\\n    name: \\\"v0-1.5-lg\\\",\\n    description: \\\"Advanced thinking or reasoning.\\\",\\n    image:\\n      \\\"https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop\\\",\\n    credit: \\\"Michael Oeser on Unsplash\\\",\\n  },\\n  {\\n    name: \\\"v0-2.0-mini\\\",\\n    description: \\\"Open Source model for everyone.\\\",\\n    image:\\n      \\\"https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop\\\",\\n    credit: \\\"Cherry Laithang on Unsplash\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-xl flex-col gap-6\\\">\\n      <ItemGroup className=\\\"grid grid-cols-3 gap-4\\\">\\n        {models.map((model) => (\\n          <Item key={model.name} variant=\\\"outline\\\">\\n            <ItemHeader>\\n              <Image\\n                src={model.image}\\n                alt={model.name}\\n                width={128}\\n                height={128}\\n                className=\\\"aspect-square w-full rounded-sm object-cover\\\"\\n              />\\n            </ItemHeader>\\n            <ItemContent>\\n              <ItemTitle>{model.name}</ItemTitle>\\n              <ItemDescription>{model.description}</ItemDescription>\\n            </ItemContent>\\n          </Item>\\n        ))}\\n      </ItemGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import Image from \"next/image\";\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemHeader,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nconst models = [\n  {\n    name: \"v0-1.5-sm\",\n    description: \"Everyday tasks and UI generation.\",\n    image:\n      \"https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Valeria Reverdo on Unsplash\",\n  },\n  {\n    name: \"v0-1.5-lg\",\n    description: \"Advanced thinking or reasoning.\",\n    image:\n      \"https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Michael Oeser on Unsplash\",\n  },\n  {\n    name: \"v0-2.0-mini\",\n    description: \"Open Source model for everyone.\",\n    image:\n      \"https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Cherry Laithang on Unsplash\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-6\">\n      <ItemGroup className=\"grid grid-cols-3 gap-4\">\n        {models.map((model) => (\n          <Item key={model.name} variant=\"outline\">\n            <ItemHeader>\n              <Image\n                src={model.image}\n                alt={model.name}\n                width={128}\n                height={128}\n                className=\"aspect-square w-full rounded-sm object-cover\"\n              />\n            </ItemHeader>\n            <ItemContent>\n              <ItemTitle>{model.name}</ItemTitle>\n              <ItemDescription>{model.description}</ItemDescription>\n            </ItemContent>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "icon",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { BadgeCheckIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-6\\\">\\n      <Item variant=\\\"outline\\\">\\n        <ItemContent>\\n          <ItemTitle>Basic Item</ItemTitle>\\n          <ItemDescription>\\n            A simple item with title and description.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Action\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n      <Item variant=\\\"outline\\\" size=\\\"sm\\\" asChild>\\n        <a href=\\\"#\\\">\\n          <ItemMedia>\\n            <BadgeCheckIcon className=\\\"size-5\\\" />\\n          </ItemMedia>\\n          <ItemContent>\\n            <ItemTitle>Your profile has been verified.</ItemTitle>\\n          </ItemContent>\\n          <ItemActions>\\n            <ChevronRightIcon className=\\\"size-4\\\" />\\n          </ItemActions>\\n        </a>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { BadgeCheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Basic Item</ItemTitle>\n          <ItemDescription>\n            A simple item with title and description.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\" asChild>\n        <a href=\"#\">\n          <ItemMedia>\n            <BadgeCheckIcon className=\"size-5\" />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your profile has been verified.</ItemTitle>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "image",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import Image from \\\"next/image\\\";\\nimport {\\n  Item,\\n  ItemContent,\\n  ItemDescription,\\n  ItemGroup,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nconst music = [\\n  {\\n    title: \\\"Midnight City Lights\\\",\\n    artist: \\\"Neon Dreams\\\",\\n    album: \\\"Electric Nights\\\",\\n    duration: \\\"3:45\\\",\\n  },\\n  {\\n    title: \\\"Coffee Shop Conversations\\\",\\n    artist: \\\"The Morning Brew\\\",\\n    album: \\\"Urban Stories\\\",\\n    duration: \\\"4:05\\\",\\n  },\\n  {\\n    title: \\\"Digital Rain\\\",\\n    artist: \\\"Cyber Symphony\\\",\\n    album: \\\"Binary Beats\\\",\\n    duration: \\\"3:30\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-6\\\">\\n      <ItemGroup className=\\\"gap-4\\\">\\n        {music.map((song) => (\\n          <Item key={song.title} variant=\\\"outline\\\" asChild role=\\\"listitem\\\">\\n            <a href=\\\"#\\\">\\n              <ItemMedia variant=\\\"image\\\">\\n                <Image\\n                  src={`https://avatar.vercel.sh/${song.title}`}\\n                  alt={song.title}\\n                  width={32}\\n                  height={32}\\n                  className=\\\"object-cover grayscale\\\"\\n                />\\n              </ItemMedia>\\n              <ItemContent>\\n                <ItemTitle className=\\\"line-clamp-1\\\">\\n                  {song.title} -{\\\" \\\"}\\n                  <span className=\\\"text-muted-foreground\\\">{song.album}</span>\\n                </ItemTitle>\\n                <ItemDescription>{song.artist}</ItemDescription>\\n              </ItemContent>\\n              <ItemContent className=\\\"flex-none text-center\\\">\\n                <ItemDescription>{song.duration}</ItemDescription>\\n              </ItemContent>\\n            </a>\\n          </Item>\\n        ))}\\n      </ItemGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import Image from \"next/image\";\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nconst music = [\n  {\n    title: \"Midnight City Lights\",\n    artist: \"Neon Dreams\",\n    album: \"Electric Nights\",\n    duration: \"3:45\",\n  },\n  {\n    title: \"Coffee Shop Conversations\",\n    artist: \"The Morning Brew\",\n    album: \"Urban Stories\",\n    duration: \"4:05\",\n  },\n  {\n    title: \"Digital Rain\",\n    artist: \"Cyber Symphony\",\n    album: \"Binary Beats\",\n    duration: \"3:30\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <ItemGroup className=\"gap-4\">\n        {music.map((song) => (\n          <Item key={song.title} variant=\"outline\" asChild role=\"listitem\">\n            <a href=\"#\">\n              <ItemMedia variant=\"image\">\n                <Image\n                  src={`https://avatar.vercel.sh/${song.title}`}\n                  alt={song.title}\n                  width={32}\n                  height={32}\n                  className=\"object-cover grayscale\"\n                />\n              </ItemMedia>\n              <ItemContent>\n                <ItemTitle className=\"line-clamp-1\">\n                  {song.title} -{\" \"}\n                  <span className=\"text-muted-foreground\">{song.album}</span>\n                </ItemTitle>\n                <ItemDescription>{song.artist}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"flex-none text-center\">\n                <ItemDescription>{song.duration}</ItemDescription>\n              </ItemContent>\n            </a>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "link",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ChevronRightIcon, ExternalLinkIcon } from \\\"lucide-react\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-4\\\">\\n      <Item asChild>\\n        <a href=\\\"#\\\">\\n          <ItemContent>\\n            <ItemTitle>Visit our documentation</ItemTitle>\\n            <ItemDescription>\\n              Learn how to get started with our components.\\n            </ItemDescription>\\n          </ItemContent>\\n          <ItemActions>\\n            <ChevronRightIcon className=\\\"size-4\\\" />\\n          </ItemActions>\\n        </a>\\n      </Item>\\n      <Item variant=\\\"outline\\\" asChild>\\n        <a href=\\\"#\\\" target=\\\"_blank\\\" rel=\\\"noopener noreferrer\\\">\\n          <ItemContent>\\n            <ItemTitle>External resource</ItemTitle>\\n            <ItemDescription>\\n              Opens in a new tab with security attributes.\\n            </ItemDescription>\\n          </ItemContent>\\n          <ItemActions>\\n            <ExternalLinkIcon className=\\\"size-4\\\" />\\n          </ItemActions>\\n        </a>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { ChevronRightIcon, ExternalLinkIcon } from \"lucide-react\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4\">\n      <Item asChild>\n        <a href=\"#\">\n          <ItemContent>\n            <ItemTitle>Visit our documentation</ItemTitle>\n            <ItemDescription>\n              Learn how to get started with our components.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n      <Item variant=\"outline\" asChild>\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <ItemContent>\n            <ItemTitle>External resource</ItemTitle>\n            <ItemDescription>\n              Opens in a new tab with security attributes.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <ExternalLinkIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "size",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { BadgeCheckIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-6\\\">\\n      <Item variant=\\\"outline\\\">\\n        <ItemContent>\\n          <ItemTitle>Basic Item</ItemTitle>\\n          <ItemDescription>\\n            A simple item with title and description.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Action\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n      <Item variant=\\\"outline\\\" size=\\\"sm\\\" asChild>\\n        <a href=\\\"#\\\">\\n          <ItemMedia>\\n            <BadgeCheckIcon className=\\\"size-5\\\" />\\n          </ItemMedia>\\n          <ItemContent>\\n            <ItemTitle>Your profile has been verified.</ItemTitle>\\n          </ItemContent>\\n          <ItemActions>\\n            <ChevronRightIcon className=\\\"size-4\\\" />\\n          </ItemActions>\\n        </a>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { BadgeCheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Basic Item</ItemTitle>\n          <ItemDescription>\n            A simple item with title and description.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\" asChild>\n        <a href=\"#\">\n          <ItemMedia>\n            <BadgeCheckIcon className=\"size-5\" />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your profile has been verified.</ItemTitle>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "variants",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-col gap-6\\\">\\n      <Item>\\n        <ItemContent>\\n          <ItemTitle>Default Variant</ItemTitle>\\n          <ItemDescription>\\n            Standard styling with subtle background and borders.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Open\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n      <Item variant=\\\"outline\\\">\\n        <ItemContent>\\n          <ItemTitle>Outline Variant</ItemTitle>\\n          <ItemDescription>\\n            Outlined style with clear borders and transparent background.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Open\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n      <Item variant=\\\"muted\\\">\\n        <ItemContent>\\n          <ItemTitle>Muted Variant</ItemTitle>\\n          <ItemDescription>\\n            Subdued appearance with muted colors for secondary content.\\n          </ItemDescription>\\n        </ItemContent>\\n        <ItemActions>\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Open\\n          </Button>\\n        </ItemActions>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Default Variant</ItemTitle>\n          <ItemDescription>\n            Standard styling with subtle background and borders.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Open\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Outline Variant</ItemTitle>\n          <ItemDescription>\n            Outlined style with clear borders and transparent background.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Open\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Muted Variant</ItemTitle>\n          <ItemDescription>\n            Subdued appearance with muted colors for secondary content.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Open\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Kbd",
+      "slug": "kbd",
+      "category": "widget",
+      "path": "/widgets/kbd",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "button",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Kbd } from \\\"@rlx-widgets/kbd\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-wrap items-center gap-4\\\">\\n      <Button variant=\\\"outline\\\" size=\\\"sm\\\" className=\\\"pr-2\\\">\\n        Accept <Kbd>⏎</Kbd>\\n      </Button>\\n      <Button variant=\\\"outline\\\" size=\\\"sm\\\" className=\\\"pr-2\\\">\\n        Cancel <Kbd>Esc</Kbd>\\n      </Button>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Kbd } from \"@rlx-widgets/kbd\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4\">\n      <Button variant=\"outline\" size=\"sm\" className=\"pr-2\">\n        Accept <Kbd>⏎</Kbd>\n      </Button>\n      <Button variant=\"outline\" size=\"sm\" className=\"pr-2\">\n        Cancel <Kbd>Esc</Kbd>\n      </Button>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Kbd, KbdGroup } from \\\"@rlx-widgets/kbd\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-4\\\">\\n      <KbdGroup>\\n        <Kbd>⌘</Kbd>\\n        <Kbd>⇧</Kbd>\\n        <Kbd>⌥</Kbd>\\n        <Kbd>⌃</Kbd>\\n      </KbdGroup>\\n      <KbdGroup>\\n        <Kbd>Ctrl</Kbd>\\n        <span>+</span>\\n        <Kbd>B</Kbd>\\n      </KbdGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Kbd, KbdGroup } from \"@rlx-widgets/kbd\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <KbdGroup>\n        <Kbd>⌘</Kbd>\n        <Kbd>⇧</Kbd>\n        <Kbd>⌥</Kbd>\n        <Kbd>⌃</Kbd>\n      </KbdGroup>\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <span>+</span>\n        <Kbd>B</Kbd>\n      </KbdGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Kbd, KbdGroup } from \\\"@rlx-widgets/kbd\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-4\\\">\\n      <p className=\\\"text-muted-foreground text-sm\\\">\\n        Use{\\\" \\\"}\\n        <KbdGroup>\\n          <Kbd>Ctrl + B</Kbd>\\n          <Kbd>Ctrl + K</Kbd>\\n        </KbdGroup>{\\\" \\\"}\\n        to open the command palette\\n      </p>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Kbd, KbdGroup } from \"@rlx-widgets/kbd\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <p className=\"text-muted-foreground text-sm\">\n        Use{\" \"}\n        <KbdGroup>\n          <Kbd>Ctrl + B</Kbd>\n          <Kbd>Ctrl + K</Kbd>\n        </KbdGroup>{\" \"}\n        to open the command palette\n      </p>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "input-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@rlx-widgets/input-group\\\";\\nimport { Kbd } from \\\"@rlx-widgets/kbd\\\";\\nimport { SearchIcon } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-xs flex-col gap-6\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Search...\\\" />\\n        <InputGroupAddon>\\n          <SearchIcon />\\n        </InputGroupAddon>\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Kbd>⌘</Kbd>\\n          <Kbd>K</Kbd>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@rlx-widgets/input-group\";\nimport { Kbd } from \"@rlx-widgets/kbd\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-xs flex-col gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Kbd>⌘</Kbd>\n          <Kbd>K</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "tooltip",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { ButtonGroup } from \\\"@rlx-widgets/button-group\\\";\\nimport { Kbd, KbdGroup } from \\\"@rlx-widgets/kbd\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"@rlx-widgets/tooltip\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-4\\\">\\n      <ButtonGroup>\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n              Save\\n            </Button>\\n          </TooltipTrigger>\\n          <TooltipContent>\\n            <div className=\\\"flex items-center gap-2\\\">\\n              Save Changes <Kbd>S</Kbd>\\n            </div>\\n          </TooltipContent>\\n        </Tooltip>\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n              Print\\n            </Button>\\n          </TooltipTrigger>\\n          <TooltipContent>\\n            <div className=\\\"flex items-center gap-2\\\">\\n              Print Document{\\\" \\\"}\\n              <KbdGroup>\\n                <Kbd>Ctrl</Kbd>\\n                <Kbd>P</Kbd>\\n              </KbdGroup>\\n            </div>\\n          </TooltipContent>\\n        </Tooltip>\\n      </ButtonGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { ButtonGroup } from \"@rlx-widgets/button-group\";\nimport { Kbd, KbdGroup } from \"@rlx-widgets/kbd\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@rlx-widgets/tooltip\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <ButtonGroup>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\">\n              Save\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <div className=\"flex items-center gap-2\">\n              Save Changes <Kbd>S</Kbd>\n            </div>\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\">\n              Print\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <div className=\"flex items-center gap-2\">\n              Print Document{\" \"}\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>P</Kbd>\n              </KbdGroup>\n            </div>\n          </TooltipContent>\n        </Tooltip>\n      </ButtonGroup>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Label",
+      "slug": "label",
+      "category": "widget",
+      "path": "/widgets/label",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Checkbox } from \\\"@rlx-widgets/checkbox\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div>\\n      <div className=\\\"flex items-center space-x-2\\\">\\n        <Checkbox id=\\\"terms\\\" />\\n        <Label htmlFor=\\\"terms\\\">Accept terms and conditions</Label>\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Checkbox } from \"@rlx-widgets/checkbox\";\nimport { Label } from \"@rlx-widgets/label\";\n\nexport const Preview = () => {\n  return (\n    <div>\n      <div className=\"flex items-center space-x-2\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Menubar",
+      "slug": "menubar",
+      "category": "widget",
+      "path": "/widgets/menubar",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Menubar,\\n  MenubarCheckboxItem,\\n  MenubarContent,\\n  MenubarItem,\\n  MenubarMenu,\\n  MenubarRadioGroup,\\n  MenubarRadioItem,\\n  MenubarSeparator,\\n  MenubarShortcut,\\n  MenubarSub,\\n  MenubarSubContent,\\n  MenubarSubTrigger,\\n  MenubarTrigger,\\n} from \\\"@rlx-widgets/menubar\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Menubar>\\n      <MenubarMenu>\\n        <MenubarTrigger>File</MenubarTrigger>\\n        <MenubarContent>\\n          <MenubarItem>\\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\\n          </MenubarItem>\\n          <MenubarItem>\\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\\n          </MenubarItem>\\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\\n          <MenubarSeparator />\\n          <MenubarSub>\\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\\n            <MenubarSubContent>\\n              <MenubarItem>Email link</MenubarItem>\\n              <MenubarItem>Messages</MenubarItem>\\n              <MenubarItem>Notes</MenubarItem>\\n            </MenubarSubContent>\\n          </MenubarSub>\\n          <MenubarSeparator />\\n          <MenubarItem>\\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\\n          </MenubarItem>\\n        </MenubarContent>\\n      </MenubarMenu>\\n      <MenubarMenu>\\n        <MenubarTrigger>Edit</MenubarTrigger>\\n        <MenubarContent>\\n          <MenubarItem>\\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\\n          </MenubarItem>\\n          <MenubarItem>\\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\\n          </MenubarItem>\\n          <MenubarSeparator />\\n          <MenubarSub>\\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\\n            <MenubarSubContent>\\n              <MenubarItem>Search the web</MenubarItem>\\n              <MenubarSeparator />\\n              <MenubarItem>Find...</MenubarItem>\\n              <MenubarItem>Find Next</MenubarItem>\\n              <MenubarItem>Find Previous</MenubarItem>\\n            </MenubarSubContent>\\n          </MenubarSub>\\n          <MenubarSeparator />\\n          <MenubarItem>Cut</MenubarItem>\\n          <MenubarItem>Copy</MenubarItem>\\n          <MenubarItem>Paste</MenubarItem>\\n        </MenubarContent>\\n      </MenubarMenu>\\n      <MenubarMenu>\\n        <MenubarTrigger>View</MenubarTrigger>\\n        <MenubarContent>\\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\\n          <MenubarCheckboxItem checked>\\n            Always Show Full URLs\\n          </MenubarCheckboxItem>\\n          <MenubarSeparator />\\n          <MenubarItem inset>\\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\\n          </MenubarItem>\\n          <MenubarItem disabled inset>\\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\\n          </MenubarItem>\\n          <MenubarSeparator />\\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\\n          <MenubarSeparator />\\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\\n        </MenubarContent>\\n      </MenubarMenu>\\n      <MenubarMenu>\\n        <MenubarTrigger>Profiles</MenubarTrigger>\\n        <MenubarContent>\\n          <MenubarRadioGroup value=\\\"benoit\\\">\\n            <MenubarRadioItem value=\\\"andy\\\">Andy</MenubarRadioItem>\\n            <MenubarRadioItem value=\\\"benoit\\\">Benoit</MenubarRadioItem>\\n            <MenubarRadioItem value=\\\"Luis\\\">Luis</MenubarRadioItem>\\n          </MenubarRadioGroup>\\n          <MenubarSeparator />\\n          <MenubarItem inset>Edit...</MenubarItem>\\n          <MenubarSeparator />\\n          <MenubarItem inset>Add Profile...</MenubarItem>\\n        </MenubarContent>\\n      </MenubarMenu>\\n    </Menubar>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@rlx-widgets/menubar\";\n\nexport const Preview = () => {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            New Window <MenubarShortcut>⌘N</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled>New Incognito Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>\n            Print... <MenubarShortcut>⌘P</MenubarShortcut>\n          </MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Edit</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>\n            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarSub>\n            <MenubarSubTrigger>Find</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Search the web</MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem>Find...</MenubarItem>\n              <MenubarItem>Find Next</MenubarItem>\n              <MenubarItem>Find Previous</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n          <MenubarSeparator />\n          <MenubarItem>Cut</MenubarItem>\n          <MenubarItem>Copy</MenubarItem>\n          <MenubarItem>Paste</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n          <MenubarCheckboxItem checked>\n            Always Show Full URLs\n          </MenubarCheckboxItem>\n          <MenubarSeparator />\n          <MenubarItem inset>\n            Reload <MenubarShortcut>⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem disabled inset>\n            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n          </MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Toggle Fullscreen</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Hide Sidebar</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu>\n        <MenubarTrigger>Profiles</MenubarTrigger>\n        <MenubarContent>\n          <MenubarRadioGroup value=\"benoit\">\n            <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n            <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n            <MenubarRadioItem value=\"Luis\">Luis</MenubarRadioItem>\n          </MenubarRadioGroup>\n          <MenubarSeparator />\n          <MenubarItem inset>Edit...</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem inset>Add Profile...</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Navigation Menu",
+      "slug": "navigation-menu",
+      "category": "widget",
+      "path": "/widgets/navigation-menu",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport Link from \\\"next/link\\\";\\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \\\"lucide-react\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuContent,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n  NavigationMenuTrigger,\\n  navigationMenuTriggerStyle,\\n} from \\\"@rlx-widgets/navigation-menu\\\";\\n\\nconst components: { title: string; href: string; description: string }[] = [\\n  {\\n    title: \\\"Alert Dialog\\\",\\n    href: \\\"/docs/primitives/alert-dialog\\\",\\n    description:\\n      \\\"A modal dialog that interrupts the user with important content and expects a response.\\\",\\n  },\\n  {\\n    title: \\\"Hover Card\\\",\\n    href: \\\"/docs/primitives/hover-card\\\",\\n    description:\\n      \\\"For sighted users to preview content available behind a link.\\\",\\n  },\\n  {\\n    title: \\\"Progress\\\",\\n    href: \\\"/docs/primitives/progress\\\",\\n    description:\\n      \\\"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\\\",\\n  },\\n  {\\n    title: \\\"Scroll-area\\\",\\n    href: \\\"/docs/primitives/scroll-area\\\",\\n    description: \\\"Visually or semantically separates content.\\\",\\n  },\\n  {\\n    title: \\\"Tabs\\\",\\n    href: \\\"/docs/primitives/tabs\\\",\\n    description:\\n      \\\"A set of layered sections of content—known as tab panels—that are displayed one at a time.\\\",\\n  },\\n  {\\n    title: \\\"Tooltip\\\",\\n    href: \\\"/docs/primitives/tooltip\\\",\\n    description:\\n      \\\"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <NavigationMenu viewport={false}>\\n      <NavigationMenuList>\\n        <NavigationMenuItem>\\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\\n          <NavigationMenuContent>\\n            <ul className=\\\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\\\">\\n              <li className=\\\"row-span-3\\\">\\n                <NavigationMenuLink asChild>\\n                  <Link\\n                    className=\\\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\\\"\\n                    href=\\\"/\\\"\\n                  >\\n                    <div className=\\\"mt-4 mb-2 text-lg font-medium\\\">\\n                      shadcn/ui\\n                    </div>\\n                    <p className=\\\"text-muted-foreground text-sm leading-tight\\\">\\n                      Beautifully designed components built with Tailwind CSS.\\n                    </p>\\n                  </Link>\\n                </NavigationMenuLink>\\n              </li>\\n              <ListItem href=\\\"/docs\\\" title=\\\"Introduction\\\">\\n                Re-usable components built using Radix UI and Tailwind CSS.\\n              </ListItem>\\n              <ListItem href=\\\"/docs/installation\\\" title=\\\"Installation\\\">\\n                How to install dependencies and structure your app.\\n              </ListItem>\\n              <ListItem href=\\\"/docs/primitives/typography\\\" title=\\\"Typography\\\">\\n                Styles for headings, paragraphs, lists...etc\\n              </ListItem>\\n            </ul>\\n          </NavigationMenuContent>\\n        </NavigationMenuItem>\\n        <NavigationMenuItem>\\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\\n          <NavigationMenuContent>\\n            <ul className=\\\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\\\">\\n              {components.map((component) => (\\n                <ListItem\\n                  key={component.title}\\n                  title={component.title}\\n                  href={component.href}\\n                >\\n                  {component.description}\\n                </ListItem>\\n              ))}\\n            </ul>\\n          </NavigationMenuContent>\\n        </NavigationMenuItem>\\n        <NavigationMenuItem>\\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\\n            <Link href=\\\"/docs\\\">Docs</Link>\\n          </NavigationMenuLink>\\n        </NavigationMenuItem>\\n        <NavigationMenuItem>\\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\\n          <NavigationMenuContent>\\n            <ul className=\\\"grid w-[300px] gap-4\\\">\\n              <li>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\">\\n                    <div className=\\\"font-medium\\\">Components</div>\\n                    <div className=\\\"text-muted-foreground\\\">\\n                      Browse all components in the library.\\n                    </div>\\n                  </Link>\\n                </NavigationMenuLink>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\">\\n                    <div className=\\\"font-medium\\\">Documentation</div>\\n                    <div className=\\\"text-muted-foreground\\\">\\n                      Learn how to use the library.\\n                    </div>\\n                  </Link>\\n                </NavigationMenuLink>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\">\\n                    <div className=\\\"font-medium\\\">Blog</div>\\n                    <div className=\\\"text-muted-foreground\\\">\\n                      Read our latest blog posts.\\n                    </div>\\n                  </Link>\\n                </NavigationMenuLink>\\n              </li>\\n            </ul>\\n          </NavigationMenuContent>\\n        </NavigationMenuItem>\\n        <NavigationMenuItem>\\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\\n          <NavigationMenuContent>\\n            <ul className=\\\"grid w-[200px] gap-4\\\">\\n              <li>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\">Components</Link>\\n                </NavigationMenuLink>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\">Documentation</Link>\\n                </NavigationMenuLink>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\">Blocks</Link>\\n                </NavigationMenuLink>\\n              </li>\\n            </ul>\\n          </NavigationMenuContent>\\n        </NavigationMenuItem>\\n        <NavigationMenuItem>\\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\\n          <NavigationMenuContent>\\n            <ul className=\\\"grid w-[200px] gap-4\\\">\\n              <li>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\" className=\\\"flex-row items-center gap-2\\\">\\n                    <CircleHelpIcon />\\n                    Backlog\\n                  </Link>\\n                </NavigationMenuLink>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\" className=\\\"flex-row items-center gap-2\\\">\\n                    <CircleIcon />\\n                    To Do\\n                  </Link>\\n                </NavigationMenuLink>\\n                <NavigationMenuLink asChild>\\n                  <Link href=\\\"#\\\" className=\\\"flex-row items-center gap-2\\\">\\n                    <CircleCheckIcon />\\n                    Done\\n                  </Link>\\n                </NavigationMenuLink>\\n              </li>\\n            </ul>\\n          </NavigationMenuContent>\\n        </NavigationMenuItem>\\n      </NavigationMenuList>\\n    </NavigationMenu>\\n  );\\n};\\n\\nfunction ListItem({\\n  title,\\n  children,\\n  href,\\n  ...props\\n}: React.ComponentPropsWithoutRef<\\\"li\\\"> & { href: string }) {\\n  return (\\n    <li {...props}>\\n      <NavigationMenuLink asChild>\\n        <Link href={href}>\\n          <div className=\\\"text-sm leading-none font-medium\\\">{title}</div>\\n          <p className=\\\"text-muted-foreground line-clamp-2 text-sm leading-snug\\\">\\n            {children}\\n          </p>\\n        </Link>\\n      </NavigationMenuLink>\\n    </li>\\n  );\\n}\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@rlx-widgets/navigation-menu\";\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <NavigationMenu viewport={false}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <Link\n                    className=\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\"\n                    href=\"/\"\n                  >\n                    <div className=\"mt-4 mb-2 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-muted-foreground text-sm leading-tight\">\n                      Beautifully designed components built with Tailwind CSS.\n                    </p>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/docs\">Docs</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleHelpIcon />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleIcon />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleCheckIcon />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n};\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n            {children}\n          </p>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  );\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "Pagination",
+      "slug": "pagination",
+      "category": "widget",
+      "path": "/widgets/pagination",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n  PaginationNext,\\n  PaginationPrevious,\\n} from \\\"@rlx-widgets/pagination\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Pagination>\\n      <PaginationContent>\\n        <PaginationItem>\\n          <PaginationPrevious href=\\\"#\\\" />\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink href=\\\"#\\\">1</PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink href=\\\"#\\\" isActive>\\n            2\\n          </PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink href=\\\"#\\\">3</PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationEllipsis />\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationNext href=\\\"#\\\" />\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@rlx-widgets/pagination\";\n\nexport const Preview = () => {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Popover",
+      "slug": "popover",
+      "category": "widget",
+      "path": "/widgets/popover",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Popover, PopoverContent, PopoverTrigger } from \\\"@rlx-widgets/popover\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button variant=\\\"outline\\\">Open popover</Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80\\\">\\n        <div className=\\\"grid gap-4\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <h4 className=\\\"leading-none font-medium\\\">Dimensions</h4>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Set the dimensions for the layer.\\n            </p>\\n          </div>\\n          <div className=\\\"grid gap-2\\\">\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"width\\\">Width</Label>\\n              <Input\\n                id=\\\"width\\\"\\n                defaultValue=\\\"100%\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"maxWidth\\\">Max. width</Label>\\n              <Input\\n                id=\\\"maxWidth\\\"\\n                defaultValue=\\\"300px\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"height\\\">Height</Label>\\n              <Input\\n                id=\\\"height\\\"\\n                defaultValue=\\\"25px\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n            <div className=\\\"grid grid-cols-3 items-center gap-4\\\">\\n              <Label htmlFor=\\\"maxHeight\\\">Max. height</Label>\\n              <Input\\n                id=\\\"maxHeight\\\"\\n                defaultValue=\\\"none\\\"\\n                className=\\\"col-span-2 h-8\\\"\\n              />\\n            </div>\\n          </div>\\n        </div>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@rlx-widgets/popover\";\n\nexport const Preview = () => {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"leading-none font-medium\">Dimensions</h4>\n            <p className=\"text-muted-foreground text-sm\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Progress",
+      "slug": "progress",
+      "category": "widget",
+      "path": "/widgets/progress",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Progress } from \\\"@rlx-widgets/progress\\\";\\n\\nexport const Preview = () => {\\n  const [progress, setProgress] = React.useState(13);\\n\\n  React.useEffect(() => {\\n    const timer = setTimeout(() => setProgress(66), 500);\\n    return () => clearTimeout(timer);\\n  }, []);\\n\\n  return <Progress value={progress} className=\\\"w-[60%]\\\" />;\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport * as React from \"react\";\nimport { Progress } from \"@rlx-widgets/progress\";\n\nexport const Preview = () => {\n  const [progress, setProgress] = React.useState(13);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return <Progress value={progress} className=\"w-[60%]\" />;\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Radio Group",
+      "slug": "radio-group",
+      "category": "widget",
+      "path": "/widgets/radio-group",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Label } from \\\"@rlx-widgets/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@rlx-widgets/radio-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <RadioGroup defaultValue=\\\"comfortable\\\">\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <RadioGroupItem value=\\\"default\\\" id=\\\"r1\\\" />\\n        <Label htmlFor=\\\"r1\\\">Default</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <RadioGroupItem value=\\\"comfortable\\\" id=\\\"r2\\\" />\\n        <Label htmlFor=\\\"r2\\\">Comfortable</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <RadioGroupItem value=\\\"compact\\\" id=\\\"r3\\\" />\\n        <Label htmlFor=\\\"r3\\\">Compact</Label>\\n      </div>\\n    </RadioGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Label } from \"@rlx-widgets/label\";\nimport { RadioGroup, RadioGroupItem } from \"@rlx-widgets/radio-group\";\n\nexport const Preview = () => {\n  return (\n    <RadioGroup defaultValue=\"comfortable\">\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  );\n};\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { z } from \\\"zod\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"@rlx-widgets/form\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@rlx-widgets/radio-group\\\";\\n\\nconst FormSchema = z.object({\\n  type: z.enum([\\\"all\\\", \\\"mentions\\\", \\\"none\\\"]).refine((val) => !!val, {\\n    message: \\\"You need to select a notification type.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"w-2/3 space-y-6\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"type\\\"\\n          render={({ field }) => (\\n            <FormItem className=\\\"space-y-3\\\">\\n              <FormLabel>Notify me about...</FormLabel>\\n              <FormControl>\\n                <RadioGroup\\n                  onValueChange={field.onChange}\\n                  defaultValue={field.value}\\n                  className=\\\"flex flex-col\\\"\\n                >\\n                  <FormItem className=\\\"flex items-center gap-3\\\">\\n                    <FormControl>\\n                      <RadioGroupItem value=\\\"all\\\" />\\n                    </FormControl>\\n                    <FormLabel className=\\\"font-normal\\\">\\n                      All new messages\\n                    </FormLabel>\\n                  </FormItem>\\n                  <FormItem className=\\\"flex items-center gap-3\\\">\\n                    <FormControl>\\n                      <RadioGroupItem value=\\\"mentions\\\" />\\n                    </FormControl>\\n                    <FormLabel className=\\\"font-normal\\\">\\n                      Direct messages and mentions\\n                    </FormLabel>\\n                  </FormItem>\\n                  <FormItem className=\\\"flex items-center gap-3\\\">\\n                    <FormControl>\\n                      <RadioGroupItem value=\\\"none\\\" />\\n                    </FormControl>\\n                    <FormLabel className=\\\"font-normal\\\">Nothing</FormLabel>\\n                  </FormItem>\\n                </RadioGroup>\\n              </FormControl>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@rlx-widgets/form\";\nimport { RadioGroup, RadioGroupItem } from \"@rlx-widgets/radio-group\";\n\nconst FormSchema = z.object({\n  type: z.enum([\"all\", \"mentions\", \"none\"]).refine((val) => !!val, {\n    message: \"You need to select a notification type.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"type\"\n          render={({ field }) => (\n            <FormItem className=\"space-y-3\">\n              <FormLabel>Notify me about...</FormLabel>\n              <FormControl>\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col\"\n                >\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"all\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      All new messages\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"mentions\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">\n                      Direct messages and mentions\n                    </FormLabel>\n                  </FormItem>\n                  <FormItem className=\"flex items-center gap-3\">\n                    <FormControl>\n                      <RadioGroupItem value=\"none\" />\n                    </FormControl>\n                    <FormLabel className=\"font-normal\">Nothing</FormLabel>\n                  </FormItem>\n                </RadioGroup>\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Resizable",
+      "slug": "resizable",
+      "category": "widget",
+      "path": "/widgets/resizable",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  ResizableHandle,\\n  ResizablePanel,\\n  ResizablePanelGroup,\\n} from \\\"@rlx-widgets/resizable\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ResizablePanelGroup\\n      direction=\\\"horizontal\\\"\\n      className=\\\"max-w-md rounded-lg border md:min-w-[450px]\\\"\\n    >\\n      <ResizablePanel defaultSize={50}>\\n        <div className=\\\"flex h-[200px] items-center justify-center p-6\\\">\\n          <span className=\\\"font-semibold\\\">One</span>\\n        </div>\\n      </ResizablePanel>\\n      <ResizableHandle />\\n      <ResizablePanel defaultSize={50}>\\n        <ResizablePanelGroup direction=\\\"vertical\\\">\\n          <ResizablePanel defaultSize={25}>\\n            <div className=\\\"flex h-full items-center justify-center p-6\\\">\\n              <span className=\\\"font-semibold\\\">Two</span>\\n            </div>\\n          </ResizablePanel>\\n          <ResizableHandle />\\n          <ResizablePanel defaultSize={75}>\\n            <div className=\\\"flex h-full items-center justify-center p-6\\\">\\n              <span className=\\\"font-semibold\\\">Three</span>\\n            </div>\\n          </ResizablePanel>\\n        </ResizablePanelGroup>\\n      </ResizablePanel>\\n    </ResizablePanelGroup>\\n  );\\n};\\n\"",
+          "preview": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@rlx-widgets/resizable\";\n\nexport const Preview = () => {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={50}>\n        <div className=\"flex h-[200px] items-center justify-center p-6\">\n          <span className=\"font-semibold\">One</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={50}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={25}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Two</span>\n            </div>\n          </ResizablePanel>\n          <ResizableHandle />\n          <ResizablePanel defaultSize={75}>\n            <div className=\"flex h-full items-center justify-center p-6\">\n              <span className=\"font-semibold\">Three</span>\n            </div>\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  );\n};\n"
+        },
+        {
+          "name": "handle",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  ResizableHandle,\\n  ResizablePanel,\\n  ResizablePanelGroup,\\n} from \\\"@rlx-widgets/resizable\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ResizablePanelGroup\\n      direction=\\\"horizontal\\\"\\n      className=\\\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\\\"\\n    >\\n      <ResizablePanel defaultSize={25}>\\n        <div className=\\\"flex h-full items-center justify-center p-6\\\">\\n          <span className=\\\"font-semibold\\\">Sidebar</span>\\n        </div>\\n      </ResizablePanel>\\n      <ResizableHandle withHandle />\\n      <ResizablePanel defaultSize={75}>\\n        <div className=\\\"flex h-full items-center justify-center p-6\\\">\\n          <span className=\\\"font-semibold\\\">Content</span>\\n        </div>\\n      </ResizablePanel>\\n    </ResizablePanelGroup>\\n  );\\n};\\n\"",
+          "preview": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@rlx-widgets/resizable\";\n\nexport const Preview = () => {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Sidebar</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  );\n};\n"
+        },
+        {
+          "name": "vertical",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  ResizableHandle,\\n  ResizablePanel,\\n  ResizablePanelGroup,\\n} from \\\"@rlx-widgets/resizable\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ResizablePanelGroup\\n      direction=\\\"vertical\\\"\\n      className=\\\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\\\"\\n    >\\n      <ResizablePanel defaultSize={25}>\\n        <div className=\\\"flex h-full items-center justify-center p-6\\\">\\n          <span className=\\\"font-semibold\\\">Header</span>\\n        </div>\\n      </ResizablePanel>\\n      <ResizableHandle />\\n      <ResizablePanel defaultSize={75}>\\n        <div className=\\\"flex h-full items-center justify-center p-6\\\">\\n          <span className=\\\"font-semibold\\\">Content</span>\\n        </div>\\n      </ResizablePanel>\\n    </ResizablePanelGroup>\\n  );\\n};\\n\"",
+          "preview": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@rlx-widgets/resizable\";\n\nexport const Preview = () => {\n  return (\n    <ResizablePanelGroup\n      direction=\"vertical\"\n      className=\"min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]\"\n    >\n      <ResizablePanel defaultSize={25}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Header</span>\n        </div>\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={75}>\n        <div className=\"flex h-full items-center justify-center p-6\">\n          <span className=\"font-semibold\">Content</span>\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Scroll Area",
+      "slug": "scroll-area",
+      "category": "widget",
+      "path": "/widgets/scroll-area",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\nimport { ScrollArea } from \\\"@rlx-widgets/scroll-area\\\";\\nimport { Separator } from \\\"@rlx-widgets/separator\\\";\\n\\nconst tags = Array.from({ length: 50 }).map(\\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\\n);\\n\\nexport const Preview = () => {\\n  return (\\n    <ScrollArea className=\\\"h-72 w-48 rounded-md border\\\">\\n      <div className=\\\"p-4\\\">\\n        <h4 className=\\\"mb-4 text-sm leading-none font-medium\\\">Tags</h4>\\n        {tags.map((tag) => (\\n          <React.Fragment key={tag}>\\n            <div className=\\\"text-sm\\\">{tag}</div>\\n            <Separator className=\\\"my-2\\\" />\\n          </React.Fragment>\\n        ))}\\n      </div>\\n    </ScrollArea>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\nimport { ScrollArea } from \"@rlx-widgets/scroll-area\";\nimport { Separator } from \"@rlx-widgets/separator\";\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n);\n\nexport const Preview = () => {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  );\n};\n"
+        },
+        {
+          "name": "horizontal-scrolling",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\nimport Image from \\\"next/image\\\";\\nimport { ScrollArea, ScrollBar } from \\\"@rlx-widgets/scroll-area\\\";\\n\\nexport interface Artwork {\\n  artist: string;\\n  art: string;\\n}\\n\\nexport const works: Artwork[] = [\\n  {\\n    artist: \\\"Ornella Binni\\\",\\n    art: \\\"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\\\",\\n  },\\n  {\\n    artist: \\\"Tom Byrom\\\",\\n    art: \\\"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\\\",\\n  },\\n  {\\n    artist: \\\"Vladimir Malyavko\\\",\\n    art: \\\"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <ScrollArea className=\\\"w-96 rounded-md border whitespace-nowrap\\\">\\n      <div className=\\\"flex w-max space-x-4 p-4\\\">\\n        {works.map((artwork) => (\\n          <figure key={artwork.artist} className=\\\"shrink-0\\\">\\n            <div className=\\\"overflow-hidden rounded-md\\\">\\n              <Image\\n                src={artwork.art}\\n                alt={`Photo by ${artwork.artist}`}\\n                className=\\\"aspect-[3/4] h-fit w-fit object-cover\\\"\\n                width={300}\\n                height={400}\\n              />\\n            </div>\\n            <figcaption className=\\\"text-muted-foreground pt-2 text-xs\\\">\\n              Photo by{\\\" \\\"}\\n              <span className=\\\"text-foreground font-semibold\\\">\\n                {artwork.artist}\\n              </span>\\n            </figcaption>\\n          </figure>\\n        ))}\\n      </div>\\n      <ScrollBar orientation=\\\"horizontal\\\" />\\n    </ScrollArea>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\nimport Image from \"next/image\";\nimport { ScrollArea, ScrollBar } from \"@rlx-widgets/scroll-area\";\n\nexport interface Artwork {\n  artist: string;\n  art: string;\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n              Photo by{\" \"}\n              <span className=\"text-foreground font-semibold\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Select",
+      "slug": "select",
+      "category": "widget",
+      "path": "/widgets/select",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\n\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@rlx-widgets/select\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Select>\\n      <SelectTrigger className=\\\"w-[180px]\\\">\\n        <SelectValue placeholder=\\\"Select a fruit\\\" />\\n      </SelectTrigger>\\n      <SelectContent>\\n        <SelectGroup>\\n          <SelectLabel>Fruits</SelectLabel>\\n          <SelectItem value=\\\"apple\\\">Apple</SelectItem>\\n          <SelectItem value=\\\"banana\\\">Banana</SelectItem>\\n          <SelectItem value=\\\"blueberry\\\">Blueberry</SelectItem>\\n          <SelectItem value=\\\"grapes\\\">Grapes</SelectItem>\\n          <SelectItem value=\\\"pineapple\\\">Pineapple</SelectItem>\\n        </SelectGroup>\\n      </SelectContent>\\n    </Select>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@rlx-widgets/select\";\n\nexport const Preview = () => {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[180px]\">\n        <SelectValue placeholder=\"Select a fruit\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>Fruits</SelectLabel>\n          <SelectItem value=\"apple\">Apple</SelectItem>\n          <SelectItem value=\"banana\">Banana</SelectItem>\n          <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          <SelectItem value=\"grapes\">Grapes</SelectItem>\n          <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  );\n};\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport Link from \\\"next/link\\\";\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { z } from \\\"zod\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\\"@rlx-widgets/form\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@rlx-widgets/select\\\";\\n\\nconst FormSchema = z.object({\\n  email: z.email({\\n    error: \\\"Please select an email to display.\\\",\\n  }),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"w-2/3 space-y-6\\\">\\n        <FormField\\n          control={form.control}\\n          name=\\\"email\\\"\\n          render={({ field }) => (\\n            <FormItem>\\n              <FormLabel>Email</FormLabel>\\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\\n                <FormControl>\\n                  <SelectTrigger>\\n                    <SelectValue placeholder=\\\"Select a verified email to display\\\" />\\n                  </SelectTrigger>\\n                </FormControl>\\n                <SelectContent>\\n                  <SelectItem value=\\\"m@example.com\\\">m@example.com</SelectItem>\\n                  <SelectItem value=\\\"m@google.com\\\">m@google.com</SelectItem>\\n                  <SelectItem value=\\\"m@support.com\\\">m@support.com</SelectItem>\\n                </SelectContent>\\n              </Select>\\n              <FormDescription>\\n                You can manage email addresses in your{\\\" \\\"}\\n                <Link href=\\\"/examples/forms\\\">email settings</Link>.\\n              </FormDescription>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport Link from \"next/link\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@rlx-widgets/form\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@rlx-widgets/select\";\n\nconst FormSchema = z.object({\n  email: z.email({\n    error: \"Please select an email to display.\",\n  }),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"email\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a verified email to display\" />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"m@example.com\">m@example.com</SelectItem>\n                  <SelectItem value=\"m@google.com\">m@google.com</SelectItem>\n                  <SelectItem value=\"m@support.com\">m@support.com</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormDescription>\n                You can manage email addresses in your{\" \"}\n                <Link href=\"/examples/forms\">email settings</Link>.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        },
+        {
+          "name": "scrollable",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import * as React from \\\"react\\\";\\n\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@rlx-widgets/select\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Select>\\n      <SelectTrigger className=\\\"w-[280px]\\\">\\n        <SelectValue placeholder=\\\"Select a timezone\\\" />\\n      </SelectTrigger>\\n      <SelectContent>\\n        <SelectGroup>\\n          <SelectLabel>North America</SelectLabel>\\n          <SelectItem value=\\\"est\\\">Eastern Standard Time (EST)</SelectItem>\\n          <SelectItem value=\\\"cst\\\">Central Standard Time (CST)</SelectItem>\\n          <SelectItem value=\\\"mst\\\">Mountain Standard Time (MST)</SelectItem>\\n          <SelectItem value=\\\"pst\\\">Pacific Standard Time (PST)</SelectItem>\\n          <SelectItem value=\\\"akst\\\">Alaska Standard Time (AKST)</SelectItem>\\n          <SelectItem value=\\\"hst\\\">Hawaii Standard Time (HST)</SelectItem>\\n        </SelectGroup>\\n        <SelectGroup>\\n          <SelectLabel>Europe & Africa</SelectLabel>\\n          <SelectItem value=\\\"gmt\\\">Greenwich Mean Time (GMT)</SelectItem>\\n          <SelectItem value=\\\"cet\\\">Central European Time (CET)</SelectItem>\\n          <SelectItem value=\\\"eet\\\">Eastern European Time (EET)</SelectItem>\\n          <SelectItem value=\\\"west\\\">\\n            Western European Summer Time (WEST)\\n          </SelectItem>\\n          <SelectItem value=\\\"cat\\\">Central Africa Time (CAT)</SelectItem>\\n          <SelectItem value=\\\"eat\\\">East Africa Time (EAT)</SelectItem>\\n        </SelectGroup>\\n        <SelectGroup>\\n          <SelectLabel>Asia</SelectLabel>\\n          <SelectItem value=\\\"msk\\\">Moscow Time (MSK)</SelectItem>\\n          <SelectItem value=\\\"ist\\\">India Standard Time (IST)</SelectItem>\\n          <SelectItem value=\\\"cst_china\\\">China Standard Time (CST)</SelectItem>\\n          <SelectItem value=\\\"jst\\\">Japan Standard Time (JST)</SelectItem>\\n          <SelectItem value=\\\"kst\\\">Korea Standard Time (KST)</SelectItem>\\n          <SelectItem value=\\\"ist_indonesia\\\">\\n            Indonesia Central Standard Time (WITA)\\n          </SelectItem>\\n        </SelectGroup>\\n        <SelectGroup>\\n          <SelectLabel>Australia & Pacific</SelectLabel>\\n          <SelectItem value=\\\"awst\\\">\\n            Australian Western Standard Time (AWST)\\n          </SelectItem>\\n          <SelectItem value=\\\"acst\\\">\\n            Australian Central Standard Time (ACST)\\n          </SelectItem>\\n          <SelectItem value=\\\"aest\\\">\\n            Australian Eastern Standard Time (AEST)\\n          </SelectItem>\\n          <SelectItem value=\\\"nzst\\\">New Zealand Standard Time (NZST)</SelectItem>\\n          <SelectItem value=\\\"fjt\\\">Fiji Time (FJT)</SelectItem>\\n        </SelectGroup>\\n        <SelectGroup>\\n          <SelectLabel>South America</SelectLabel>\\n          <SelectItem value=\\\"art\\\">Argentina Time (ART)</SelectItem>\\n          <SelectItem value=\\\"bot\\\">Bolivia Time (BOT)</SelectItem>\\n          <SelectItem value=\\\"brt\\\">Brasilia Time (BRT)</SelectItem>\\n          <SelectItem value=\\\"clt\\\">Chile Standard Time (CLT)</SelectItem>\\n        </SelectGroup>\\n      </SelectContent>\\n    </Select>\\n  );\\n};\\n\"",
+          "preview": "import * as React from \"react\";\n\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@rlx-widgets/select\";\n\nexport const Preview = () => {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-[280px]\">\n        <SelectValue placeholder=\"Select a timezone\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          <SelectLabel>North America</SelectLabel>\n          <SelectItem value=\"est\">Eastern Standard Time (EST)</SelectItem>\n          <SelectItem value=\"cst\">Central Standard Time (CST)</SelectItem>\n          <SelectItem value=\"mst\">Mountain Standard Time (MST)</SelectItem>\n          <SelectItem value=\"pst\">Pacific Standard Time (PST)</SelectItem>\n          <SelectItem value=\"akst\">Alaska Standard Time (AKST)</SelectItem>\n          <SelectItem value=\"hst\">Hawaii Standard Time (HST)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Europe & Africa</SelectLabel>\n          <SelectItem value=\"gmt\">Greenwich Mean Time (GMT)</SelectItem>\n          <SelectItem value=\"cet\">Central European Time (CET)</SelectItem>\n          <SelectItem value=\"eet\">Eastern European Time (EET)</SelectItem>\n          <SelectItem value=\"west\">\n            Western European Summer Time (WEST)\n          </SelectItem>\n          <SelectItem value=\"cat\">Central Africa Time (CAT)</SelectItem>\n          <SelectItem value=\"eat\">East Africa Time (EAT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Asia</SelectLabel>\n          <SelectItem value=\"msk\">Moscow Time (MSK)</SelectItem>\n          <SelectItem value=\"ist\">India Standard Time (IST)</SelectItem>\n          <SelectItem value=\"cst_china\">China Standard Time (CST)</SelectItem>\n          <SelectItem value=\"jst\">Japan Standard Time (JST)</SelectItem>\n          <SelectItem value=\"kst\">Korea Standard Time (KST)</SelectItem>\n          <SelectItem value=\"ist_indonesia\">\n            Indonesia Central Standard Time (WITA)\n          </SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>Australia & Pacific</SelectLabel>\n          <SelectItem value=\"awst\">\n            Australian Western Standard Time (AWST)\n          </SelectItem>\n          <SelectItem value=\"acst\">\n            Australian Central Standard Time (ACST)\n          </SelectItem>\n          <SelectItem value=\"aest\">\n            Australian Eastern Standard Time (AEST)\n          </SelectItem>\n          <SelectItem value=\"nzst\">New Zealand Standard Time (NZST)</SelectItem>\n          <SelectItem value=\"fjt\">Fiji Time (FJT)</SelectItem>\n        </SelectGroup>\n        <SelectGroup>\n          <SelectLabel>South America</SelectLabel>\n          <SelectItem value=\"art\">Argentina Time (ART)</SelectItem>\n          <SelectItem value=\"bot\">Bolivia Time (BOT)</SelectItem>\n          <SelectItem value=\"brt\">Brasilia Time (BRT)</SelectItem>\n          <SelectItem value=\"clt\">Chile Standard Time (CLT)</SelectItem>\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Separator",
+      "slug": "separator",
+      "category": "widget",
+      "path": "/widgets/separator",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Separator } from \\\"@rlx-widgets/separator\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div>\\n      <div className=\\\"space-y-1\\\">\\n        <h4 className=\\\"text-sm leading-none font-medium\\\">Radix Primitives</h4>\\n        <p className=\\\"text-muted-foreground text-sm\\\">\\n          An open-source UI component library.\\n        </p>\\n      </div>\\n      <Separator className=\\\"my-4\\\" />\\n      <div className=\\\"flex h-5 items-center space-x-4 text-sm\\\">\\n        <div>Blog</div>\\n        <Separator orientation=\\\"vertical\\\" />\\n        <div>Docs</div>\\n        <Separator orientation=\\\"vertical\\\" />\\n        <div>Source</div>\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Separator } from \"@rlx-widgets/separator\";\n\nexport const Preview = () => {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm leading-none font-medium\">Radix Primitives</h4>\n        <p className=\"text-muted-foreground text-sm\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Sheet",
+      "slug": "sheet",
+      "category": "widget",
+      "path": "/widgets/sheet",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport {\\n  Sheet,\\n  SheetClose,\\n  SheetContent,\\n  SheetDescription,\\n  SheetFooter,\\n  SheetHeader,\\n  SheetTitle,\\n  SheetTrigger,\\n} from \\\"@rlx-widgets/sheet\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Sheet>\\n      <SheetTrigger asChild>\\n        <Button variant=\\\"outline\\\">Open</Button>\\n      </SheetTrigger>\\n      <SheetContent>\\n        <SheetHeader>\\n          <SheetTitle>Edit profile</SheetTitle>\\n          <SheetDescription>\\n            Make changes to your profile here. Click save when you&apos;re done.\\n          </SheetDescription>\\n        </SheetHeader>\\n        <div className=\\\"grid flex-1 auto-rows-min gap-6 px-4\\\">\\n          <div className=\\\"grid gap-3\\\">\\n            <Label htmlFor=\\\"sheet-demo-name\\\">Name</Label>\\n            <Input id=\\\"sheet-demo-name\\\" defaultValue=\\\"Pedro Duarte\\\" />\\n          </div>\\n          <div className=\\\"grid gap-3\\\">\\n            <Label htmlFor=\\\"sheet-demo-username\\\">Username</Label>\\n            <Input id=\\\"sheet-demo-username\\\" defaultValue=\\\"@peduarte\\\" />\\n          </div>\\n        </div>\\n        <SheetFooter>\\n          <Button type=\\\"submit\\\">Save changes</Button>\\n          <SheetClose asChild>\\n            <Button variant=\\\"outline\\\">Close</Button>\\n          </SheetClose>\\n        </SheetFooter>\\n      </SheetContent>\\n    </Sheet>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@rlx-widgets/sheet\";\n\nexport const Preview = () => {\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </SheetTrigger>\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you&apos;re done.\n          </SheetDescription>\n        </SheetHeader>\n        <div className=\"grid flex-1 auto-rows-min gap-6 px-4\">\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"sheet-demo-name\">Name</Label>\n            <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n          </div>\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"sheet-demo-username\">Username</Label>\n            <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <Button type=\"submit\">Save changes</Button>\n          <SheetClose asChild>\n            <Button variant=\"outline\">Close</Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Sidebar",
+      "slug": "sidebar",
+      "category": "widget",
+      "path": "/widgets/sidebar",
+      "sourcePath": "export * from \"./components\";\n"
+    },
+    {
+      "name": "Skeleton",
+      "slug": "skeleton",
+      "category": "widget",
+      "path": "/widgets/skeleton",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Skeleton } from \\\"@rlx-widgets/skeleton\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex items-center space-x-4\\\">\\n      <Skeleton className=\\\"h-12 w-12 rounded-full\\\" />\\n      <div className=\\\"space-y-2\\\">\\n        <Skeleton className=\\\"h-4 w-[250px]\\\" />\\n        <Skeleton className=\\\"h-4 w-[200px]\\\" />\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Skeleton } from \"@rlx-widgets/skeleton\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <Skeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <Skeleton className=\"h-4 w-[250px]\" />\n        <Skeleton className=\"h-4 w-[200px]\" />\n      </div>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Slider",
+      "slug": "slider",
+      "category": "widget",
+      "path": "/widgets/slider",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { cn } from \\\"@rlx-widgets/base\\\";\\nimport { Slider } from \\\"@rlx-widgets/slider\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Slider defaultValue={[50]} max={100} step={1} className={cn(\\\"w-[60%]\\\")} />\\n  );\\n};\\n\"",
+          "preview": "import { cn } from \"@rlx-widgets/base\";\nimport { Slider } from \"@rlx-widgets/slider\";\n\nexport const Preview = () => {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} className={cn(\"w-[60%]\")} />\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Sonner",
+      "slug": "sonner",
+      "category": "widget",
+      "path": "/widgets/sonner",
+      "sourcePath": "libs/rlx-widgets/sonner",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { toast, Toaster } from \\\"sonner\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { useTheme } from \\\"@rlx-widgets/base\\\";\\n\\nexport const Preview = () => {\\n  const themeContext = useTheme();\\n  const theme = themeContext.theme;\\n  return (\\n    <div>\\n      <Toaster\\n        theme={theme}\\n        toastOptions={{\\n          style: {\\n            background: \\\"var(--color-muted)\\\",\\n            border: \\\"var(--color-border)\\\",\\n          },\\n        }}\\n        position=\\\"top-center\\\"\\n      />\\n      <Button\\n        variant=\\\"outline\\\"\\n        onClick={() =>\\n          toast(\\\"Event has been created\\\", {\\n            description: \\\"Sunday, December 03, 2023 at 9:00 AM\\\",\\n            action: {\\n              label: \\\"Undo\\\",\\n              onClick: () => console.log(\\\"Undo\\\"),\\n            },\\n          })\\n        }\\n      >\\n        Show Toast\\n      </Button>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { toast, Toaster } from \"sonner\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { useTheme } from \"@rlx-widgets/base\";\n\nexport const Preview = () => {\n  const themeContext = useTheme();\n  const theme = themeContext.theme;\n  return (\n    <div>\n      <Toaster\n        theme={theme}\n        toastOptions={{\n          style: {\n            background: \"var(--color-muted)\",\n            border: \"var(--color-border)\",\n          },\n        }}\n        position=\"top-center\"\n      />\n      <Button\n        variant=\"outline\"\n        onClick={() =>\n          toast(\"Event has been created\", {\n            description: \"Sunday, December 03, 2023 at 9:00 AM\",\n            action: {\n              label: \"Undo\",\n              onClick: () => console.log(\"Undo\"),\n            },\n          })\n        }\n      >\n        Show Toast\n      </Button>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Spinner",
+      "slug": "spinner",
+      "category": "widget",
+      "path": "/widgets/spinner",
+      "sourcePath": "export * from \"./components\";\n",
+      "examples": [
+        {
+          "name": "badge",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Badge } from \\\"@rlx-widgets/badge\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex items-center gap-4 [--radius:1.2rem]\\\">\\n      <Badge>\\n        <Spinner />\\n        Syncing\\n      </Badge>\\n      <Badge variant=\\\"secondary\\\">\\n        <Spinner />\\n        Updating\\n      </Badge>\\n      <Badge variant=\\\"outline\\\">\\n        <Spinner />\\n        Processing\\n      </Badge>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Badge } from \"@rlx-widgets/badge\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex items-center gap-4 [--radius:1.2rem]\">\n      <Badge>\n        <Spinner />\n        Syncing\n      </Badge>\n      <Badge variant=\"secondary\">\n        <Spinner />\n        Updating\n      </Badge>\n      <Badge variant=\"outline\">\n        <Spinner />\n        Processing\n      </Badge>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "button",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-4\\\">\\n      <Button disabled size=\\\"sm\\\">\\n        <Spinner />\\n        Loading...\\n      </Button>\\n      <Button variant=\\\"outline\\\" disabled size=\\\"sm\\\">\\n        <Spinner />\\n        Please wait\\n      </Button>\\n      <Button variant=\\\"secondary\\\" disabled size=\\\"sm\\\">\\n        <Spinner />\\n        Processing\\n      </Button>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <Button disabled size=\"sm\">\n        <Spinner />\n        Loading...\n      </Button>\n      <Button variant=\"outline\" disabled size=\"sm\">\n        <Spinner />\n        Please wait\n      </Button>\n      <Button variant=\"secondary\" disabled size=\"sm\">\n        <Spinner />\n        Processing\n      </Button>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "color",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex items-center gap-6\\\">\\n      <Spinner className=\\\"size-6 text-red-500\\\" />\\n      <Spinner className=\\\"size-6 text-green-500\\\" />\\n      <Spinner className=\\\"size-6 text-blue-500\\\" />\\n      <Spinner className=\\\"size-6 text-yellow-500\\\" />\\n      <Spinner className=\\\"size-6 text-purple-500\\\" />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex items-center gap-6\">\n      <Spinner className=\"size-6 text-red-500\" />\n      <Spinner className=\"size-6 text-green-500\" />\n      <Spinner className=\"size-6 text-blue-500\" />\n      <Spinner className=\"size-6 text-yellow-500\" />\n      <Spinner className=\"size-6 text-purple-500\" />\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "customization",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { LoaderIcon } from \\\"lucide-react\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\n\\nfunction Spinner({ className, ...props }: React.ComponentProps<\\\"svg\\\">) {\\n  return (\\n    <LoaderIcon\\n      role=\\\"status\\\"\\n      aria-label=\\\"Loading\\\"\\n      className={cn(\\\"size-4 animate-spin\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex items-center gap-4\\\">\\n      <Spinner />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { LoaderIcon } from \"lucide-react\";\nimport { cn } from \"@rlx-widgets/base\";\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <LoaderIcon\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Spinner />\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Item, ItemContent, ItemMedia, ItemTitle } from \\\"@rlx-widgets/item\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-xs flex-col gap-4 [--radius:1rem]\\\">\\n      <Item variant=\\\"muted\\\">\\n        <ItemMedia>\\n          <Spinner />\\n        </ItemMedia>\\n        <ItemContent>\\n          <ItemTitle className=\\\"line-clamp-1\\\">Processing payment...</ItemTitle>\\n        </ItemContent>\\n        <ItemContent className=\\\"flex-none justify-end\\\">\\n          <span className=\\\"text-sm tabular-nums\\\">$100.00</span>\\n        </ItemContent>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Item, ItemContent, ItemMedia, ItemTitle } from \"@rlx-widgets/item\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-xs flex-col gap-4 [--radius:1rem]\">\n      <Item variant=\"muted\">\n        <ItemMedia>\n          <Spinner />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle className=\"line-clamp-1\">Processing payment...</ItemTitle>\n        </ItemContent>\n        <ItemContent className=\"flex-none justify-end\">\n          <span className=\"text-sm tabular-nums\">$100.00</span>\n        </ItemContent>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "empty",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@rlx-widgets/empty\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Empty className=\\\"w-full\\\">\\n      <EmptyHeader>\\n        <EmptyMedia variant=\\\"icon\\\">\\n          <Spinner />\\n        </EmptyMedia>\\n        <EmptyTitle>Processing your request</EmptyTitle>\\n        <EmptyDescription>\\n          Please wait while we process your request. Do not refresh the page.\\n        </EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n          Cancel\\n        </Button>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@rlx-widgets/empty\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <Empty className=\"w-full\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <Spinner />\n        </EmptyMedia>\n        <EmptyTitle>Processing your request</EmptyTitle>\n        <EmptyDescription>\n          Please wait while we process your request. Do not refresh the page.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          Cancel\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n};\n"
+        },
+        {
+          "name": "input-group",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { ArrowUpIcon } from \\\"lucide-react\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupButton,\\n  InputGroupInput,\\n  InputGroupTextarea,\\n} from \\\"@rlx-widgets/input-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-4\\\">\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Send a message...\\\" disabled />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Spinner />\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <InputGroup>\\n        <InputGroupTextarea placeholder=\\\"Send a message...\\\" disabled />\\n        <InputGroupAddon align=\\\"block-end\\\">\\n          <Spinner /> Validating...\\n          <InputGroupButton className=\\\"ml-auto\\\" variant=\\\"default\\\">\\n            <ArrowUpIcon />\\n            <span className=\\\"sr-only\\\">Send</span>\\n          </InputGroupButton>\\n        </InputGroupAddon>\\n      </InputGroup>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { ArrowUpIcon } from \"lucide-react\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@rlx-widgets/input-group\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Send a message...\" disabled />\n        <InputGroupAddon align=\"inline-end\">\n          <Spinner />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Send a message...\" disabled />\n        <InputGroupAddon align=\"block-end\">\n          <Spinner /> Validating...\n          <InputGroupButton className=\"ml-auto\" variant=\"default\">\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "item",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Progress } from \\\"@rlx-widgets/progress\\\";\\nimport { Spinner } from \\\"@rlx-widgets/spinner\\\";\\nimport {\\n  Item,\\n  ItemActions,\\n  ItemContent,\\n  ItemDescription,\\n  ItemFooter,\\n  ItemMedia,\\n  ItemTitle,\\n} from \\\"@rlx-widgets/item\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-md flex-col gap-4 [--radius:1rem]\\\">\\n      <Item variant=\\\"outline\\\">\\n        <ItemMedia variant=\\\"icon\\\">\\n          <Spinner />\\n        </ItemMedia>\\n        <ItemContent>\\n          <ItemTitle>Downloading...</ItemTitle>\\n          <ItemDescription>129 MB / 1000 MB</ItemDescription>\\n        </ItemContent>\\n        <ItemActions className=\\\"hidden sm:flex\\\">\\n          <Button variant=\\\"outline\\\" size=\\\"sm\\\">\\n            Cancel\\n          </Button>\\n        </ItemActions>\\n        <ItemFooter>\\n          <Progress value={75} />\\n        </ItemFooter>\\n      </Item>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Progress } from \"@rlx-widgets/progress\";\nimport { Spinner } from \"@rlx-widgets/spinner\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemMedia,\n  ItemTitle,\n} from \"@rlx-widgets/item\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4 [--radius:1rem]\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <Spinner />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Downloading...</ItemTitle>\n          <ItemDescription>129 MB / 1000 MB</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"hidden sm:flex\">\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n        </ItemActions>\n        <ItemFooter>\n          <Progress value={75} />\n        </ItemFooter>\n      </Item>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "size",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Spinner } from \\\"@rlx-widgets/spinner\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex items-center gap-6\\\">\\n      <Spinner className=\\\"size-3\\\" />\\n      <Spinner className=\\\"size-4\\\" />\\n      <Spinner className=\\\"size-6\\\" />\\n      <Spinner className=\\\"size-8\\\" />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Spinner } from \"@rlx-widgets/spinner\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex items-center gap-6\">\n      <Spinner className=\"size-3\" />\n      <Spinner className=\"size-4\" />\n      <Spinner className=\"size-6\" />\n      <Spinner className=\"size-8\" />\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Switch",
+      "slug": "switch",
+      "category": "widget",
+      "path": "/widgets/switch",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Switch } from \\\"@rlx-widgets/switch\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex items-center space-x-2\\\">\\n      <Switch id=\\\"airplane-mode\\\" />\\n      <Label htmlFor=\\\"airplane-mode\\\">Airplane Mode</Label>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Label } from \"@rlx-widgets/label\";\nimport { Switch } from \"@rlx-widgets/switch\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "form",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Switch } from \\\"@rlx-widgets/switch\\\";\\nimport { toast } from \\\"sonner\\\";\\nimport { useForm } from \\\"react-hook-form\\\";\\nimport { z } from \\\"zod\\\";\\nimport { zodResolver } from \\\"@hookform/resolvers/zod\\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n} from \\\"@rlx-widgets/form\\\";\\n\\nconst FormSchema = z.object({\\n  marketing_emails: z.boolean().default(false).optional(),\\n  security_emails: z.boolean(),\\n});\\n\\nexport const Preview = () => {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n    defaultValues: {\\n      security_emails: true,\\n    },\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\\"You submitted the following values\\\", {\\n      description: (\\n        <pre className=\\\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\\\">\\n          <code className=\\\"text-white\\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\\"w-full space-y-6\\\">\\n        <div>\\n          <h3 className=\\\"mb-4 text-lg font-medium\\\">Email Notifications</h3>\\n          <div className=\\\"space-y-4\\\">\\n            <FormField\\n              control={form.control}\\n              name=\\\"marketing_emails\\\"\\n              render={({ field }) => (\\n                <FormItem className=\\\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\\\">\\n                  <div className=\\\"space-y-0.5\\\">\\n                    <FormLabel>Marketing emails</FormLabel>\\n                    <FormDescription>\\n                      Receive emails about new products, features, and more.\\n                    </FormDescription>\\n                  </div>\\n                  <FormControl>\\n                    <Switch\\n                      checked={field.value}\\n                      onCheckedChange={field.onChange}\\n                    />\\n                  </FormControl>\\n                </FormItem>\\n              )}\\n            />\\n            <FormField\\n              control={form.control}\\n              name=\\\"security_emails\\\"\\n              render={({ field }) => (\\n                <FormItem className=\\\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\\\">\\n                  <div className=\\\"space-y-0.5\\\">\\n                    <FormLabel>Security emails</FormLabel>\\n                    <FormDescription>\\n                      Receive emails about your account security.\\n                    </FormDescription>\\n                  </div>\\n                  <FormControl>\\n                    <Switch\\n                      checked={field.value}\\n                      onCheckedChange={field.onChange}\\n                      disabled\\n                      aria-readonly\\n                    />\\n                  </FormControl>\\n                </FormItem>\\n              )}\\n            />\\n          </div>\\n        </div>\\n        <Button type=\\\"submit\\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { Button } from \"@rlx-widgets/button\";\nimport { Switch } from \"@rlx-widgets/switch\";\nimport { toast } from \"sonner\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@rlx-widgets/form\";\n\nconst FormSchema = z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n});\n\nexport const Preview = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n    defaultValues: {\n      security_emails: true,\n    },\n  });\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast(\"You submitted the following values\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] rounded-md bg-neutral-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-full space-y-6\">\n        <div>\n          <h3 className=\"mb-4 text-lg font-medium\">Email Notifications</h3>\n          <div className=\"space-y-4\">\n            <FormField\n              control={form.control}\n              name=\"marketing_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Marketing emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about new products, features, and more.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n            <FormField\n              control={form.control}\n              name=\"security_emails\"\n              render={({ field }) => (\n                <FormItem className=\"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm\">\n                  <div className=\"space-y-0.5\">\n                    <FormLabel>Security emails</FormLabel>\n                    <FormDescription>\n                      Receive emails about your account security.\n                    </FormDescription>\n                  </div>\n                  <FormControl>\n                    <Switch\n                      checked={field.value}\n                      onCheckedChange={field.onChange}\n                      disabled\n                      aria-readonly\n                    />\n                  </FormControl>\n                </FormItem>\n              )}\n            />\n          </div>\n        </div>\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Table",
+      "slug": "table",
+      "category": "widget",
+      "path": "/widgets/table",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Table,\\n  TableBody,\\n  TableCaption,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@rlx-widgets/table\\\";\\n\\nconst invoices = [\\n  {\\n    invoice: \\\"INV001\\\",\\n    paymentStatus: \\\"Paid\\\",\\n    totalAmount: \\\"$250.00\\\",\\n    paymentMethod: \\\"Credit Card\\\",\\n  },\\n  {\\n    invoice: \\\"INV002\\\",\\n    paymentStatus: \\\"Pending\\\",\\n    totalAmount: \\\"$150.00\\\",\\n    paymentMethod: \\\"PayPal\\\",\\n  },\\n  {\\n    invoice: \\\"INV003\\\",\\n    paymentStatus: \\\"Unpaid\\\",\\n    totalAmount: \\\"$350.00\\\",\\n    paymentMethod: \\\"Bank Transfer\\\",\\n  },\\n  {\\n    invoice: \\\"INV004\\\",\\n    paymentStatus: \\\"Paid\\\",\\n    totalAmount: \\\"$450.00\\\",\\n    paymentMethod: \\\"Credit Card\\\",\\n  },\\n  {\\n    invoice: \\\"INV005\\\",\\n    paymentStatus: \\\"Paid\\\",\\n    totalAmount: \\\"$550.00\\\",\\n    paymentMethod: \\\"PayPal\\\",\\n  },\\n  {\\n    invoice: \\\"INV006\\\",\\n    paymentStatus: \\\"Pending\\\",\\n    totalAmount: \\\"$200.00\\\",\\n    paymentMethod: \\\"Bank Transfer\\\",\\n  },\\n  {\\n    invoice: \\\"INV007\\\",\\n    paymentStatus: \\\"Unpaid\\\",\\n    totalAmount: \\\"$300.00\\\",\\n    paymentMethod: \\\"Credit Card\\\",\\n  },\\n];\\n\\nexport const Preview = () => {\\n  return (\\n    <Table>\\n      <TableCaption>A list of your recent invoices.</TableCaption>\\n      <TableHeader>\\n        <TableRow>\\n          <TableHead className=\\\"w-[100px]\\\">Invoice</TableHead>\\n          <TableHead>Status</TableHead>\\n          <TableHead>Method</TableHead>\\n          <TableHead className=\\\"text-right\\\">Amount</TableHead>\\n        </TableRow>\\n      </TableHeader>\\n      <TableBody>\\n        {invoices.map((invoice) => (\\n          <TableRow key={invoice.invoice}>\\n            <TableCell className=\\\"font-medium\\\">{invoice.invoice}</TableCell>\\n            <TableCell>{invoice.paymentStatus}</TableCell>\\n            <TableCell>{invoice.paymentMethod}</TableCell>\\n            <TableCell className=\\\"text-right\\\">{invoice.totalAmount}</TableCell>\\n          </TableRow>\\n        ))}\\n      </TableBody>\\n      <TableFooter>\\n        <TableRow>\\n          <TableCell colSpan={3}>Total</TableCell>\\n          <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n        </TableRow>\\n      </TableFooter>\\n    </Table>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@rlx-widgets/table\";\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n];\n\nexport const Preview = () => {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Tabs",
+      "slug": "tabs",
+      "category": "widget",
+      "path": "/widgets/tabs",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { Label } from \\\"@rlx-widgets/label\\\";\\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \\\"@rlx-widgets/tabs\\\";\\nimport {\\n  Card,\\n  CardContent,\\n  CardDescription,\\n  CardFooter,\\n  CardHeader,\\n  CardTitle,\\n} from \\\"@rlx-widgets/card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex w-full max-w-sm flex-col gap-6\\\">\\n      <Tabs defaultValue=\\\"account\\\">\\n        <TabsList>\\n          <TabsTrigger value=\\\"account\\\">Account</TabsTrigger>\\n          <TabsTrigger value=\\\"password\\\">Password</TabsTrigger>\\n        </TabsList>\\n        <TabsContent value=\\\"account\\\">\\n          <Card>\\n            <CardHeader>\\n              <CardTitle>Account</CardTitle>\\n              <CardDescription>\\n                Make changes to your account here. Click save when you&apos;re\\n                done.\\n              </CardDescription>\\n            </CardHeader>\\n            <CardContent className=\\\"grid gap-6\\\">\\n              <div className=\\\"grid gap-3\\\">\\n                <Label htmlFor=\\\"tabs-demo-name\\\">Name</Label>\\n                <Input id=\\\"tabs-demo-name\\\" defaultValue=\\\"Pedro Duarte\\\" />\\n              </div>\\n              <div className=\\\"grid gap-3\\\">\\n                <Label htmlFor=\\\"tabs-demo-username\\\">Username</Label>\\n                <Input id=\\\"tabs-demo-username\\\" defaultValue=\\\"@peduarte\\\" />\\n              </div>\\n            </CardContent>\\n            <CardFooter>\\n              <Button>Save changes</Button>\\n            </CardFooter>\\n          </Card>\\n        </TabsContent>\\n        <TabsContent value=\\\"password\\\">\\n          <Card>\\n            <CardHeader>\\n              <CardTitle>Password</CardTitle>\\n              <CardDescription>\\n                Change your password here. After saving, you&apos;ll be logged\\n                out.\\n              </CardDescription>\\n            </CardHeader>\\n            <CardContent className=\\\"grid gap-6\\\">\\n              <div className=\\\"grid gap-3\\\">\\n                <Label htmlFor=\\\"tabs-demo-current\\\">Current password</Label>\\n                <Input id=\\\"tabs-demo-current\\\" type=\\\"password\\\" />\\n              </div>\\n              <div className=\\\"grid gap-3\\\">\\n                <Label htmlFor=\\\"tabs-demo-new\\\">New password</Label>\\n                <Input id=\\\"tabs-demo-new\\\" type=\\\"password\\\" />\\n              </div>\\n            </CardContent>\\n            <CardFooter>\\n              <Button>Save password</Button>\\n            </CardFooter>\\n          </Card>\\n        </TabsContent>\\n      </Tabs>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { Label } from \"@rlx-widgets/label\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@rlx-widgets/tabs\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@rlx-widgets/card\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"account\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Account</CardTitle>\n              <CardDescription>\n                Make changes to your account here. Click save when you&apos;re\n                done.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-username\">Username</Label>\n                <Input id=\"tabs-demo-username\" defaultValue=\"@peduarte\" />\n              </div>\n            </CardContent>\n            <CardFooter>\n              <Button>Save changes</Button>\n            </CardFooter>\n          </Card>\n        </TabsContent>\n        <TabsContent value=\"password\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Password</CardTitle>\n              <CardDescription>\n                Change your password here. After saving, you&apos;ll be logged\n                out.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"grid gap-6\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                <Input id=\"tabs-demo-current\" type=\"password\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                <Input id=\"tabs-demo-new\" type=\"password\" />\n              </div>\n            </CardContent>\n            <CardFooter>\n              <Button>Save password</Button>\n            </CardFooter>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Textarea",
+      "slug": "textarea",
+      "category": "widget",
+      "path": "/widgets/textarea",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Textarea } from \\\"@rlx-widgets/textarea\\\";\\n\\nexport const Preview = () => {\\n  return <Textarea placeholder=\\\"Type your message here.\\\" />;\\n};\\n\"",
+          "preview": "import { Textarea } from \"@rlx-widgets/textarea\";\n\nexport const Preview = () => {\n  return <Textarea placeholder=\"Type your message here.\" />;\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Toggle",
+      "slug": "toggle",
+      "category": "widget",
+      "path": "/widgets/toggle",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@rlx-widgets/toggle\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Toggle aria-label=\\\"Toggle italic\\\">\\n      <Bold className=\\\"h-4 w-4\\\" />\\n    </Toggle>\\n  );\\n};\\n\"",
+          "preview": "import { Bold } from \"lucide-react\";\nimport { Toggle } from \"@rlx-widgets/toggle\";\n\nexport const Preview = () => {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  );\n};\n"
+        },
+        {
+          "name": "disabled",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Toggle } from \\\"@rlx-widgets/toggle\\\";\\nimport { Underline } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Toggle aria-label=\\\"Toggle italic\\\" disabled>\\n      <Underline className=\\\"h-4 w-4\\\" />\\n    </Toggle>\\n  );\\n};\\n\"",
+          "preview": "import { Toggle } from \"@rlx-widgets/toggle\";\nimport { Underline } from \"lucide-react\";\n\nexport const Preview = () => {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <Underline className=\"h-4 w-4\" />\n    </Toggle>\n  );\n};\n"
+        },
+        {
+          "name": "large",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Italic } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@rlx-widgets/toggle\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Toggle size=\\\"lg\\\" variant=\\\"outline\\\" aria-label=\\\"Toggle italic\\\">\\n      <Italic />\\n    </Toggle>\\n  );\\n};\\n\"",
+          "preview": "import { Italic } from \"lucide-react\";\nimport { Toggle } from \"@rlx-widgets/toggle\";\n\nexport const Preview = () => {\n  return (\n    <Toggle size=\"lg\" variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  );\n};\n"
+        },
+        {
+          "name": "outline",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Italic } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@rlx-widgets/toggle\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Toggle variant=\\\"outline\\\" aria-label=\\\"Toggle italic\\\">\\n      <Italic />\\n    </Toggle>\\n  );\\n};\\n\"",
+          "preview": "import { Italic } from \"lucide-react\";\nimport { Toggle } from \"@rlx-widgets/toggle\";\n\nexport const Preview = () => {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  );\n};\n"
+        },
+        {
+          "name": "small",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Italic } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@rlx-widgets/toggle\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Toggle size=\\\"sm\\\" variant=\\\"outline\\\" aria-label=\\\"Toggle italic\\\">\\n      <Italic />\\n    </Toggle>\\n  );\\n};\\n\"",
+          "preview": "import { Italic } from \"lucide-react\";\nimport { Toggle } from \"@rlx-widgets/toggle\";\n\nexport const Preview = () => {\n  return (\n    <Toggle size=\"sm\" variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  );\n};\n"
+        },
+        {
+          "name": "with-text",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Italic } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@rlx-widgets/toggle\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Toggle aria-label=\\\"Toggle italic\\\">\\n      <Italic />\\n      Italic\\n    </Toggle>\\n  );\\n};\\n\"",
+          "preview": "import { Italic } from \"lucide-react\";\nimport { Toggle } from \"@rlx-widgets/toggle\";\n\nexport const Preview = () => {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Toggle Group",
+      "slug": "toggle-group",
+      "category": "widget",
+      "path": "/widgets/toggle-group",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold, Italic, Underline } from \\\"lucide-react\\\";\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@rlx-widgets/toggle-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ToggleGroup variant=\\\"outline\\\" type=\\\"multiple\\\">\\n      <ToggleGroupItem value=\\\"bold\\\" aria-label=\\\"Toggle bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"italic\\\" aria-label=\\\"Toggle italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"strikethrough\\\" aria-label=\\\"Toggle strikethrough\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Bold, Italic, Underline } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@rlx-widgets/toggle-group\";\n\nexport const Preview = () => {\n  return (\n    <ToggleGroup variant=\"outline\" type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n"
+        },
+        {
+          "name": "disabled",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold, Italic, Underline } from \\\"lucide-react\\\";\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@rlx-widgets/toggle-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" disabled>\\n      <ToggleGroupItem value=\\\"bold\\\" aria-label=\\\"Toggle bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"italic\\\" aria-label=\\\"Toggle italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"strikethrough\\\" aria-label=\\\"Toggle strikethrough\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Bold, Italic, Underline } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@rlx-widgets/toggle-group\";\n\nexport const Preview = () => {\n  return (\n    <ToggleGroup type=\"multiple\" disabled>\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n"
+        },
+        {
+          "name": "large",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold, Italic, Underline } from \\\"lucide-react\\\";\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@rlx-widgets/toggle-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" size=\\\"lg\\\">\\n      <ToggleGroupItem value=\\\"bold\\\" aria-label=\\\"Toggle bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"italic\\\" aria-label=\\\"Toggle italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"strikethrough\\\" aria-label=\\\"Toggle strikethrough\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Bold, Italic, Underline } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@rlx-widgets/toggle-group\";\n\nexport const Preview = () => {\n  return (\n    <ToggleGroup type=\"multiple\" size=\"lg\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n"
+        },
+        {
+          "name": "outline",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold, Italic, Underline } from \\\"lucide-react\\\";\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@rlx-widgets/toggle-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ToggleGroup type=\\\"multiple\\\" variant=\\\"outline\\\">\\n      <ToggleGroupItem value=\\\"bold\\\" aria-label=\\\"Toggle bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"italic\\\" aria-label=\\\"Toggle italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"strikethrough\\\" aria-label=\\\"Toggle strikethrough\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Bold, Italic, Underline } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@rlx-widgets/toggle-group\";\n\nexport const Preview = () => {\n  return (\n    <ToggleGroup type=\"multiple\" variant=\"outline\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n"
+        },
+        {
+          "name": "single",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold, Italic, Underline } from \\\"lucide-react\\\";\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@rlx-widgets/toggle-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ToggleGroup type=\\\"single\\\">\\n      <ToggleGroupItem value=\\\"bold\\\" aria-label=\\\"Toggle bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"italic\\\" aria-label=\\\"Toggle italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"strikethrough\\\" aria-label=\\\"Toggle strikethrough\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Bold, Italic, Underline } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@rlx-widgets/toggle-group\";\n\nexport const Preview = () => {\n  return (\n    <ToggleGroup type=\"single\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n"
+        },
+        {
+          "name": "small",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Bold, Italic, Underline } from \\\"lucide-react\\\";\\nimport { ToggleGroup, ToggleGroupItem } from \\\"@rlx-widgets/toggle-group\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <ToggleGroup type=\\\"single\\\" size=\\\"sm\\\">\\n      <ToggleGroupItem value=\\\"bold\\\" aria-label=\\\"Toggle bold\\\">\\n        <Bold className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"italic\\\" aria-label=\\\"Toggle italic\\\">\\n        <Italic className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"strikethrough\\\" aria-label=\\\"Toggle strikethrough\\\">\\n        <Underline className=\\\"h-4 w-4\\\" />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n};\\n\"",
+          "preview": "import { Bold, Italic, Underline } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@rlx-widgets/toggle-group\";\n\nexport const Preview = () => {\n  return (\n    <ToggleGroup type=\"single\" size=\"sm\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Tooltip",
+      "slug": "tooltip",
+      "category": "widget",
+      "path": "/widgets/tooltip",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"@rlx-widgets/tooltip\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <Tooltip>\\n      <TooltipTrigger asChild>\\n        <Button variant=\\\"outline\\\">Hover</Button>\\n      </TooltipTrigger>\\n      <TooltipContent>\\n        <p>Add to library</p>\\n      </TooltipContent>\\n    </Tooltip>\\n  );\\n};\\n\"",
+          "preview": "import { Button } from \"@rlx-widgets/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@rlx-widgets/tooltip\";\n\nexport const Preview = () => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button variant=\"outline\">Hover</Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Typography",
+      "slug": "typography",
+      "category": "widget",
+      "path": "/widgets/typography",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import {\\n  Blockquote,\\n  Heading1,\\n  Heading2,\\n  Heading3,\\n  Heading4,\\n  Heading5,\\n  Heading6,\\n  Paragraph,\\n} from \\\"@rlx-widgets/typography\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div>\\n      <Heading1>Heading 1</Heading1>\\n      <Heading2>Heading 2</Heading2>\\n      <Heading3>Heading 3</Heading3>\\n      <Heading4>Heading 4</Heading4>\\n      <Heading5>Heading 5</Heading5>\\n      <Heading6>Heading 6</Heading6>\\n      <Paragraph>Paragraph</Paragraph>\\n      <Blockquote>Blockquote</Blockquote>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "import {\n  Blockquote,\n  Heading1,\n  Heading2,\n  Heading3,\n  Heading4,\n  Heading5,\n  Heading6,\n  Paragraph,\n} from \"@rlx-widgets/typography\";\n\nexport const Preview = () => {\n  return (\n    <div>\n      <Heading1>Heading 1</Heading1>\n      <Heading2>Heading 2</Heading2>\n      <Heading3>Heading 3</Heading3>\n      <Heading4>Heading 4</Heading4>\n      <Heading5>Heading 5</Heading5>\n      <Heading6>Heading 6</Heading6>\n      <Paragraph>Paragraph</Paragraph>\n      <Blockquote>Blockquote</Blockquote>\n    </div>\n  );\n};\n"
+        }
+      ]
+    }
+  ],
+  "components": [
+    {
+      "name": "Blur Reveal",
+      "slug": "blur-reveal",
+      "category": "component",
+      "path": "/components/blur-reveal",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "blur",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { BlurReveal } from \\\"@rlx-components/blur-reveal\\\";\\nimport { Card, CardContent, CardTitle } from \\\"@rlx-widgets/card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-4\\\">\\n      <Card>\\n        <CardTitle className=\\\"text-center\\\">Extra Small</CardTitle>\\n        <CardContent>\\n          <BlurReveal blur=\\\"extraSmall\\\">\\n            <p>Hello, world!</p>\\n          </BlurReveal>\\n        </CardContent>\\n      </Card>\\n      <Card>\\n        <CardTitle className=\\\"text-center\\\">Small</CardTitle>\\n        <CardContent>\\n          <BlurReveal blur=\\\"small\\\">\\n            <p>Hello, world!</p>\\n          </BlurReveal>\\n        </CardContent>\\n      </Card>\\n      <Card>\\n        <CardTitle className=\\\"text-center\\\">Medium</CardTitle>\\n        <CardContent>\\n          <BlurReveal blur=\\\"medium\\\">\\n            <p>Hello, world!</p>\\n          </BlurReveal>\\n        </CardContent>\\n      </Card>\\n      <Card>\\n        <CardTitle className=\\\"text-center\\\">Large</CardTitle>\\n        <CardContent>\\n          <BlurReveal blur=\\\"large\\\">\\n            <p>Hello, world!</p>\\n          </BlurReveal>\\n        </CardContent>\\n      </Card>\\n      <Card>\\n        <CardTitle className=\\\"text-center\\\">Extra Large</CardTitle>\\n        <CardContent>\\n          <BlurReveal blur=\\\"extraLarge\\\">\\n            <p>Hello, world!</p>\\n          </BlurReveal>\\n        </CardContent>\\n      </Card>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { BlurReveal } from \"@rlx-components/blur-reveal\";\nimport { Card, CardContent, CardTitle } from \"@rlx-widgets/card\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <Card>\n        <CardTitle className=\"text-center\">Extra Small</CardTitle>\n        <CardContent>\n          <BlurReveal blur=\"extraSmall\">\n            <p>Hello, world!</p>\n          </BlurReveal>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardTitle className=\"text-center\">Small</CardTitle>\n        <CardContent>\n          <BlurReveal blur=\"small\">\n            <p>Hello, world!</p>\n          </BlurReveal>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardTitle className=\"text-center\">Medium</CardTitle>\n        <CardContent>\n          <BlurReveal blur=\"medium\">\n            <p>Hello, world!</p>\n          </BlurReveal>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardTitle className=\"text-center\">Large</CardTitle>\n        <CardContent>\n          <BlurReveal blur=\"large\">\n            <p>Hello, world!</p>\n          </BlurReveal>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardTitle className=\"text-center\">Extra Large</CardTitle>\n        <CardContent>\n          <BlurReveal blur=\"extraLarge\">\n            <p>Hello, world!</p>\n          </BlurReveal>\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "controlled",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { BlurReveal } from \\\"@rlx-components/blur-reveal\\\";\\nimport { useState } from \\\"react\\\";\\n\\nexport const Preview = () => {\\n  const [reveal, setReveal] = useState(false);\\n  return (\\n    <BlurReveal reveal={reveal} onClick={() => setReveal(true)}>\\n      <p>Hello, world!</p>\\n    </BlurReveal>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { BlurReveal } from \"@rlx-components/blur-reveal\";\nimport { useState } from \"react\";\n\nexport const Preview = () => {\n  const [reveal, setReveal] = useState(false);\n  return (\n    <BlurReveal reveal={reveal} onClick={() => setReveal(true)}>\n      <p>Hello, world!</p>\n    </BlurReveal>\n  );\n};\n"
+        },
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { BlurReveal } from \\\"@rlx-components/blur-reveal\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <BlurReveal>\\n      <p>Hello, world!</p>\\n    </BlurReveal>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { BlurReveal } from \"@rlx-components/blur-reveal\";\n\nexport const Preview = () => {\n  return (\n    <BlurReveal>\n      <p>Hello, world!</p>\n    </BlurReveal>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Code Preview Tabs",
+      "slug": "code-preview-tabs",
+      "category": "component",
+      "path": "/components/code-preview-tabs",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { CodePreviewTabs } from \\\"@rlx-components/code-preview-tabs\\\";\\n\\nconst preview = <div>Hello, world!</div>;\\nconst code = `<div>Hello, world!</div>`;\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full\\\">\\n      <CodePreviewTabs\\n        preview={preview}\\n        code={code}\\n        lang=\\\"tsx\\\"\\n        classNames={{ preview: \\\"h-[200px]\\\", code: \\\"h-[200px]\\\" }}\\n      />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { CodePreviewTabs } from \"@rlx-components/code-preview-tabs\";\n\nconst preview = <div>Hello, world!</div>;\nconst code = `<div>Hello, world!</div>`;\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full\">\n      <CodePreviewTabs\n        preview={preview}\n        code={code}\n        lang=\"tsx\"\n        classNames={{ preview: \"h-[200px]\", code: \"h-[200px]\" }}\n      />\n    </div>\n  );\n};\n"
+        },
+        {
+          "name": "variants",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { CodePreviewTabs } from \\\"@rlx-components/code-preview-tabs\\\";\\n\\nconst variants = {\\n  Default: {\\n    preview: <div>Hello, world!</div>,\\n    code: `<div>Hello, world!</div>`,\\n  },\\n  Variant2: {\\n    preview: <div>Goodbye, world!</div>,\\n    code: `<div>Goodbye, world!</div>`,\\n  },\\n};\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full\\\">\\n      <CodePreviewTabs\\n        variants={variants}\\n        lang=\\\"tsx\\\"\\n        classNames={{ preview: \\\"h-[200px]\\\", code: \\\"h-[200px]\\\" }}\\n      />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { CodePreviewTabs } from \"@rlx-components/code-preview-tabs\";\n\nconst variants = {\n  Default: {\n    preview: <div>Hello, world!</div>,\n    code: `<div>Hello, world!</div>`,\n  },\n  Variant2: {\n    preview: <div>Goodbye, world!</div>,\n    code: `<div>Goodbye, world!</div>`,\n  },\n};\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full\">\n      <CodePreviewTabs\n        variants={variants}\n        lang=\"tsx\"\n        classNames={{ preview: \"h-[200px]\", code: \"h-[200px]\" }}\n      />\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Shiki Code Block",
+      "slug": "shiki-code-block",
+      "category": "component",
+      "path": "/components/shiki-code-block",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { ShikiCodeBlock } from \\\"@rlx-components/shiki-code-block\\\";\\n\\nconst code = `console.log('Hello, world!');`;\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full\\\">\\n      <ShikiCodeBlock code={code} lang=\\\"tsx\\\" className=\\\"h-fit\\\" />\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { ShikiCodeBlock } from \"@rlx-components/shiki-code-block\";\n\nconst code = `console.log('Hello, world!');`;\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full\">\n      <ShikiCodeBlock code={code} lang=\"tsx\" className=\"h-fit\" />\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Stacked Cards",
+      "slug": "stacked-cards",
+      "category": "component",
+      "path": "/components/stacked-cards",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { StackedCards } from \\\"@rlx-components/stacked-cards\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\nimport { ReactNode } from \\\"react\\\";\\nimport { RiTailwindCssFill } from \\\"react-icons/ri\\\";\\nimport { SiRedux, SiShadcnui } from \\\"react-icons/si\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"h-1/2\\\">\\n      <StackedCards\\n        items={items}\\n        classNames={{\\n          card: \\\"bg-secondary\\\",\\n        }}\\n      />\\n    </div>\\n  );\\n};\\n\\nconst Icon = ({\\n  children,\\n  className,\\n}: {\\n  children: React.ReactNode;\\n  className?: string;\\n}) => {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"bg-primary/10 rounded-full w-14 h-14 flex items-center justify-center mx-auto\\\",\\n        className\\n      )}\\n    >\\n      {children}\\n    </div>\\n  );\\n};\\n\\nconst items: Array<{\\n  icon: ReactNode;\\n  text: string;\\n}> = [\\n  {\\n    icon: (\\n      <Icon className=\\\"bg-[#030712]\\\">\\n        <RiTailwindCssFill className=\\\"size-8 text-[#00BCFF]\\\" />\\n      </Icon>\\n    ),\\n    text: \\\"Tailwind CSS\\\",\\n  },\\n  {\\n    icon: (\\n      <Icon className=\\\"bg-[#764abc]\\\">\\n        <SiRedux className=\\\"size-8 text-[white]\\\" />\\n      </Icon>\\n    ),\\n    text: \\\"Redux Toolkit\\\",\\n  },\\n  {\\n    icon: (\\n      <Icon className=\\\"bg-[black]\\\">\\n        <SiShadcnui className=\\\"size-8 text-white\\\" />\\n      </Icon>\\n    ),\\n    text: \\\"Shadcn UI\\\",\\n  },\\n].reverse();\\n\"",
+          "preview": "\"use client\";\n\nimport { StackedCards } from \"@rlx-components/stacked-cards\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { ReactNode } from \"react\";\nimport { RiTailwindCssFill } from \"react-icons/ri\";\nimport { SiRedux, SiShadcnui } from \"react-icons/si\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"h-1/2\">\n      <StackedCards\n        items={items}\n        classNames={{\n          card: \"bg-secondary\",\n        }}\n      />\n    </div>\n  );\n};\n\nconst Icon = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"bg-primary/10 rounded-full w-14 h-14 flex items-center justify-center mx-auto\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst items: Array<{\n  icon: ReactNode;\n  text: string;\n}> = [\n  {\n    icon: (\n      <Icon className=\"bg-[#030712]\">\n        <RiTailwindCssFill className=\"size-8 text-[#00BCFF]\" />\n      </Icon>\n    ),\n    text: \"Tailwind CSS\",\n  },\n  {\n    icon: (\n      <Icon className=\"bg-[#764abc]\">\n        <SiRedux className=\"size-8 text-[white]\" />\n      </Icon>\n    ),\n    text: \"Redux Toolkit\",\n  },\n  {\n    icon: (\n      <Icon className=\"bg-[black]\">\n        <SiShadcnui className=\"size-8 text-white\" />\n      </Icon>\n    ),\n    text: \"Shadcn UI\",\n  },\n].reverse();\n"
+        },
+        {
+          "name": "on-animation-end",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { StackedCards } from \\\"@rlx-components/stacked-cards\\\";\\nimport { cn } from \\\"@rlx-widgets/base\\\";\\nimport { ReactNode, useState } from \\\"react\\\";\\nimport { RiTailwindCssFill } from \\\"react-icons/ri\\\";\\nimport { SiRedux, SiShadcnui } from \\\"react-icons/si\\\";\\n\\nexport const Preview = () => {\\n  const [flippedCards, setFlippedCards] = useState<Array<string>>([]);\\n\\n  const handleAnimationEnd = (id: string) => {\\n    setFlippedCards((prev) => Array.from(new Set([...prev, id])));\\n  };\\n  return (\\n    <div className=\\\"h-1/2\\\">\\n      <StackedCards\\n        items={items}\\n        classNames={{\\n          card: \\\"bg-secondary\\\",\\n        }}\\n        onAnimationEnd={handleAnimationEnd}\\n      />\\n      <div className=\\\"absolute bottom-[5%] left-1/2 -translate-x-1/2 flex flex-wrap gap-2\\\">\\n        {flippedCards.map((text) => (\\n          <div key={text} className=\\\"bg-secondary p-2 rounded-md\\\">\\n            {text}\\n          </div>\\n        ))}\\n      </div>\\n    </div>\\n  );\\n};\\n\\nconst Icon = ({\\n  children,\\n  className,\\n}: {\\n  children: React.ReactNode;\\n  className?: string;\\n}) => {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"bg-primary/10 rounded-full w-14 h-14 flex items-center justify-center mx-auto\\\",\\n        className\\n      )}\\n    >\\n      {children}\\n    </div>\\n  );\\n};\\n\\nconst items: Array<{\\n  icon: ReactNode;\\n  text: string;\\n}> = [\\n  {\\n    icon: (\\n      <Icon className=\\\"bg-[#030712]\\\">\\n        <RiTailwindCssFill className=\\\"size-8 text-[#00BCFF]\\\" />\\n      </Icon>\\n    ),\\n    text: \\\"Tailwind CSS\\\",\\n  },\\n  {\\n    icon: (\\n      <Icon className=\\\"bg-[#764abc]\\\">\\n        <SiRedux className=\\\"size-8 text-[white]\\\" />\\n      </Icon>\\n    ),\\n    text: \\\"Redux Toolkit\\\",\\n  },\\n  {\\n    icon: (\\n      <Icon className=\\\"bg-[black]\\\">\\n        <SiShadcnui className=\\\"size-8 text-white\\\" />\\n      </Icon>\\n    ),\\n    text: \\\"Shadcn UI\\\",\\n  },\\n].reverse();\\n\"",
+          "preview": "\"use client\";\n\nimport { StackedCards } from \"@rlx-components/stacked-cards\";\nimport { cn } from \"@rlx-widgets/base\";\nimport { ReactNode, useState } from \"react\";\nimport { RiTailwindCssFill } from \"react-icons/ri\";\nimport { SiRedux, SiShadcnui } from \"react-icons/si\";\n\nexport const Preview = () => {\n  const [flippedCards, setFlippedCards] = useState<Array<string>>([]);\n\n  const handleAnimationEnd = (id: string) => {\n    setFlippedCards((prev) => Array.from(new Set([...prev, id])));\n  };\n  return (\n    <div className=\"h-1/2\">\n      <StackedCards\n        items={items}\n        classNames={{\n          card: \"bg-secondary\",\n        }}\n        onAnimationEnd={handleAnimationEnd}\n      />\n      <div className=\"absolute bottom-[5%] left-1/2 -translate-x-1/2 flex flex-wrap gap-2\">\n        {flippedCards.map((text) => (\n          <div key={text} className=\"bg-secondary p-2 rounded-md\">\n            {text}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nconst Icon = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"bg-primary/10 rounded-full w-14 h-14 flex items-center justify-center mx-auto\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst items: Array<{\n  icon: ReactNode;\n  text: string;\n}> = [\n  {\n    icon: (\n      <Icon className=\"bg-[#030712]\">\n        <RiTailwindCssFill className=\"size-8 text-[#00BCFF]\" />\n      </Icon>\n    ),\n    text: \"Tailwind CSS\",\n  },\n  {\n    icon: (\n      <Icon className=\"bg-[#764abc]\">\n        <SiRedux className=\"size-8 text-[white]\" />\n      </Icon>\n    ),\n    text: \"Redux Toolkit\",\n  },\n  {\n    icon: (\n      <Icon className=\"bg-[black]\">\n        <SiShadcnui className=\"size-8 text-white\" />\n      </Icon>\n    ),\n    text: \"Shadcn UI\",\n  },\n].reverse();\n"
+        }
+      ]
+    },
+    {
+      "name": "Theme Toggle",
+      "slug": "theme-toggle",
+      "category": "component",
+      "path": "/components/theme-toggle",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { ThemeToggle } from \\\"@rlx-components/theme-toggle\\\";\\n\\nexport const Preview = () => {\\n  return <ThemeToggle />;\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { ThemeToggle } from \"@rlx-components/theme-toggle\";\n\nexport const Preview = () => {\n  return <ThemeToggle />;\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "Timeline",
+      "slug": "timeline",
+      "category": "component",
+      "path": "/components/timeline",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "horizontal",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Timeline, TimelineItem } from \\\"@rlx-components/timeline\\\";\\nimport { Badge } from \\\"@rlx-widgets/badge\\\";\\nimport {\\n  Card,\\n  CardContent,\\n  CardDescription,\\n  CardHeader,\\n  CardTitle,\\n} from \\\"@rlx-widgets/card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full\\\">\\n      <Timeline items={horizontalItems} orientation=\\\"horizontal\\\" />\\n    </div>\\n  );\\n};\\n\\nconst horizontalItems: Array<TimelineItem> = [\\n  {\\n    content: (\\n      <Card className=\\\"w-full h-[150px] mt-5 min-w-[200px]\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n\\n        <CardContent className=\\\"pt-0\\\">\\n          <p className=\\\"text-xs text-muted-foreground\\\">Initial setup</p>\\n        </CardContent>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-red-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full  h-[150px] mt-5 min-w-[200px]\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-yellow-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full h-[150px] mt-5 min-w-[200px]\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-green-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full  h-[150px] mt-5 min-w-[200px]\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-blue-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full h-[150px] mt-5 min-w-[200px]\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-purple-500\\\",\\n  },\\n];\\n\"",
+          "preview": "\"use client\";\n\nimport { Timeline, TimelineItem } from \"@rlx-components/timeline\";\nimport { Badge } from \"@rlx-widgets/badge\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@rlx-widgets/card\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full\">\n      <Timeline items={horizontalItems} orientation=\"horizontal\" />\n    </div>\n  );\n};\n\nconst horizontalItems: Array<TimelineItem> = [\n  {\n    content: (\n      <Card className=\"w-full h-[150px] mt-5 min-w-[200px]\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"pt-0\">\n          <p className=\"text-xs text-muted-foreground\">Initial setup</p>\n        </CardContent>\n      </Card>\n    ),\n    statusColor: \"bg-red-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full  h-[150px] mt-5 min-w-[200px]\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-yellow-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full h-[150px] mt-5 min-w-[200px]\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-green-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full  h-[150px] mt-5 min-w-[200px]\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-blue-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full h-[150px] mt-5 min-w-[200px]\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-purple-500\",\n  },\n];\n"
+        },
+        {
+          "name": "vertical",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Badge } from \\\"@rlx-widgets/badge\\\";\\nimport { Timeline, TimelineItem } from \\\"@rlx-components/timeline\\\";\\nimport {\\n  Card,\\n  CardContent,\\n  CardDescription,\\n  CardHeader,\\n  CardTitle,\\n} from \\\"@rlx-widgets/card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full h-full\\\">\\n      <div className=\\\"h-full\\\">\\n        <Timeline\\n          items={verticalItems}\\n          orientation=\\\"vertical\\\"\\n          className=\\\"h-full\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n};\\n\\nconst verticalItems: TimelineItem[] = [\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n\\n        <CardContent className=\\\"pt-0\\\">\\n          <p className=\\\"text-xs text-muted-foreground\\\">Initial setup</p>\\n        </CardContent>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-red-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-yellow-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-green-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-blue-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-purple-500\\\",\\n  },\\n];\\n\"",
+          "preview": "\"use client\";\n\nimport { Badge } from \"@rlx-widgets/badge\";\nimport { Timeline, TimelineItem } from \"@rlx-components/timeline\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@rlx-widgets/card\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full h-full\">\n      <div className=\"h-full\">\n        <Timeline\n          items={verticalItems}\n          orientation=\"vertical\"\n          className=\"h-full\"\n        />\n      </div>\n    </div>\n  );\n};\n\nconst verticalItems: TimelineItem[] = [\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"pt-0\">\n          <p className=\"text-xs text-muted-foreground\">Initial setup</p>\n        </CardContent>\n      </Card>\n    ),\n    statusColor: \"bg-red-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-yellow-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-green-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-blue-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-purple-500\",\n  },\n];\n"
+        },
+        {
+          "name": "vertical-left",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Badge } from \\\"@rlx-widgets/badge\\\";\\nimport { Timeline, TimelineItem } from \\\"@rlx-components/timeline\\\";\\nimport {\\n  Card,\\n  CardContent,\\n  CardDescription,\\n  CardHeader,\\n  CardTitle,\\n} from \\\"@rlx-widgets/card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full h-full\\\">\\n      <div className=\\\"h-full\\\">\\n        <Timeline\\n          items={verticalItems}\\n          orientation=\\\"vertical\\\"\\n          className=\\\"h-full\\\"\\n          connectorVerticalPosition=\\\"left\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n};\\n\\nconst verticalItems: TimelineItem[] = [\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n\\n        <CardContent className=\\\"pt-0\\\">\\n          <p className=\\\"text-xs text-muted-foreground\\\">Initial setup</p>\\n        </CardContent>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-red-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-yellow-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-green-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-blue-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-purple-500\\\",\\n  },\\n];\\n\"",
+          "preview": "\"use client\";\n\nimport { Badge } from \"@rlx-widgets/badge\";\nimport { Timeline, TimelineItem } from \"@rlx-components/timeline\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@rlx-widgets/card\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full h-full\">\n      <div className=\"h-full\">\n        <Timeline\n          items={verticalItems}\n          orientation=\"vertical\"\n          className=\"h-full\"\n          connectorVerticalPosition=\"left\"\n        />\n      </div>\n    </div>\n  );\n};\n\nconst verticalItems: TimelineItem[] = [\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"pt-0\">\n          <p className=\"text-xs text-muted-foreground\">Initial setup</p>\n        </CardContent>\n      </Card>\n    ),\n    statusColor: \"bg-red-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-yellow-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-green-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-blue-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-purple-500\",\n  },\n];\n"
+        },
+        {
+          "name": "vertical-right",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { Badge } from \\\"@rlx-widgets/badge\\\";\\nimport { Timeline, TimelineItem } from \\\"@rlx-components/timeline\\\";\\nimport {\\n  Card,\\n  CardContent,\\n  CardDescription,\\n  CardHeader,\\n  CardTitle,\\n} from \\\"@rlx-widgets/card\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full h-full\\\">\\n      <div className=\\\"h-full\\\">\\n        <Timeline\\n          items={verticalItems}\\n          orientation=\\\"vertical\\\"\\n          className=\\\"h-full\\\"\\n          connectorVerticalPosition=\\\"right\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n};\\n\\nconst verticalItems: TimelineItem[] = [\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n\\n        <CardContent className=\\\"pt-0\\\">\\n          <p className=\\\"text-xs text-muted-foreground\\\">Initial setup</p>\\n        </CardContent>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-red-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-yellow-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader className=\\\"pb-2\\\">\\n          <CardTitle className=\\\"text-sm\\\">Project Started</CardTitle>\\n          <CardDescription className=\\\"text-xs\\\">Jan 2024</CardDescription>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-green-500\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-blue-500\\\",\\n    position: \\\"left\\\",\\n  },\\n  {\\n    content: (\\n      <Card className=\\\"w-full\\\">\\n        <CardHeader>\\n          <div className=\\\"flex items-start justify-between\\\">\\n            <div className=\\\"flex-1\\\">\\n              <CardTitle className=\\\"text-base\\\">Project Started</CardTitle>\\n              <CardDescription className=\\\"text-sm mt-1\\\">\\n                Jan 2024\\n              </CardDescription>\\n            </div>\\n\\n            <Badge variant=\\\"default\\\">Completed</Badge>\\n          </div>\\n        </CardHeader>\\n      </Card>\\n    ),\\n    statusColor: \\\"bg-purple-500\\\",\\n  },\\n];\\n\"",
+          "preview": "\"use client\";\n\nimport { Badge } from \"@rlx-widgets/badge\";\nimport { Timeline, TimelineItem } from \"@rlx-components/timeline\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@rlx-widgets/card\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full h-full\">\n      <div className=\"h-full\">\n        <Timeline\n          items={verticalItems}\n          orientation=\"vertical\"\n          className=\"h-full\"\n          connectorVerticalPosition=\"right\"\n        />\n      </div>\n    </div>\n  );\n};\n\nconst verticalItems: TimelineItem[] = [\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"pt-0\">\n          <p className=\"text-xs text-muted-foreground\">Initial setup</p>\n        </CardContent>\n      </Card>\n    ),\n    statusColor: \"bg-red-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-yellow-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"text-sm\">Project Started</CardTitle>\n          <CardDescription className=\"text-xs\">Jan 2024</CardDescription>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-green-500\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-blue-500\",\n    position: \"left\",\n  },\n  {\n    content: (\n      <Card className=\"w-full\">\n        <CardHeader>\n          <div className=\"flex items-start justify-between\">\n            <div className=\"flex-1\">\n              <CardTitle className=\"text-base\">Project Started</CardTitle>\n              <CardDescription className=\"text-sm mt-1\">\n                Jan 2024\n              </CardDescription>\n            </div>\n\n            <Badge variant=\"default\">Completed</Badge>\n          </div>\n        </CardHeader>\n      </Card>\n    ),\n    statusColor: \"bg-purple-500\",\n  },\n];\n"
+        }
+      ]
+    },
+    {
+      "name": "Wave Text",
+      "slug": "wave-text",
+      "category": "component",
+      "path": "/components/wave-text",
+      "sourcePath": "export * from \"./components\";\n",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { WaveText } from \\\"@rlx-components/wave-text\\\";\\n\\nexport const Preview = () => {\\n  return (\\n    <div className=\\\"w-full text-center\\\">\\n      <WaveText>Hello, world!</WaveText>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { WaveText } from \"@rlx-components/wave-text\";\n\nexport const Preview = () => {\n  return (\n    <div className=\"w-full text-center\">\n      <WaveText>Hello, world!</WaveText>\n    </div>\n  );\n};\n"
+        }
+      ]
+    }
+  ],
+  "animates": [
+    {
+      "name": "Circular Swing",
+      "slug": "circular-swing",
+      "category": "animate",
+      "path": "/animates/circular-swing",
+      "sourcePath": "libs/rlx-animates/circular-swing",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"import { MessageCircleMore } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  return <MessageCircleMore className=\\\"animate-rlx-circular-swing\\\" />;\\n};\\n\"",
+          "preview": "import { MessageCircleMore } from \"lucide-react\";\n\nexport const Preview = () => {\n  return <MessageCircleMore className=\"animate-rlx-circular-swing\" />;\n};\n"
+        }
+      ]
+    }
+  ],
+  "hooks": [
+    {
+      "name": "UseCopyToClipboard",
+      "slug": "useCopyToClipboard",
+      "category": "hook",
+      "path": "/hooks/useCopyToClipboard",
+      "sourcePath": "libs/rlx-hooks/useCopyToClipboard",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { useCopyToClipboard } from \\\"@rlx-hooks/use-copy-to-clipboard\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Check } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  const { isCopied, copyToClipboard } = useCopyToClipboard();\\n\\n  return (\\n    <Button onClick={() => copyToClipboard(\\\"Hello World!\\\")} variant=\\\"outline\\\">\\n      {isCopied ? <Check className=\\\"w-4 h-4\\\" /> : \\\"Copy Text\\\"}\\n    </Button>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { useCopyToClipboard } from \"@rlx-hooks/use-copy-to-clipboard\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { Check } from \"lucide-react\";\n\nexport const Preview = () => {\n  const { isCopied, copyToClipboard } = useCopyToClipboard();\n\n  return (\n    <Button onClick={() => copyToClipboard(\"Hello World!\")} variant=\"outline\">\n      {isCopied ? <Check className=\"w-4 h-4\" /> : \"Copy Text\"}\n    </Button>\n  );\n};\n"
+        },
+        {
+          "name": "params",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { useCopyToClipboard } from \\\"@rlx-hooks/use-copy-to-clipboard\\\";\\nimport { Button } from \\\"@rlx-widgets/button\\\";\\nimport { Check } from \\\"lucide-react\\\";\\nimport { toast, Toaster } from \\\"sonner\\\";\\nimport { useTheme } from \\\"@rlx-widgets/base\\\";\\n\\nexport const Preview = () => {\\n  const themeContext = useTheme();\\n  const theme = themeContext.theme;\\n\\n  const handleCopy = () => {\\n    toast(\\\"Copied to clipboard\\\");\\n  };\\n\\n  const { isCopied, copyToClipboard } = useCopyToClipboard({\\n    timeout: 2000,\\n    onCopy: handleCopy,\\n  });\\n\\n  return (\\n    <div>\\n      <Toaster\\n        theme={theme}\\n        toastOptions={{\\n          style: {\\n            background: \\\"var(--color-muted)\\\",\\n            border: \\\"var(--color-border)\\\",\\n          },\\n        }}\\n        position=\\\"top-center\\\"\\n      />\\n      <Button onClick={() => copyToClipboard(\\\"Hello World!\\\")} variant=\\\"outline\\\">\\n        {isCopied ? <Check className=\\\"w-4 h-4\\\" /> : \\\"Copy Text\\\"}\\n      </Button>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { useCopyToClipboard } from \"@rlx-hooks/use-copy-to-clipboard\";\nimport { Button } from \"@rlx-widgets/button\";\nimport { Check } from \"lucide-react\";\nimport { toast, Toaster } from \"sonner\";\nimport { useTheme } from \"@rlx-widgets/base\";\n\nexport const Preview = () => {\n  const themeContext = useTheme();\n  const theme = themeContext.theme;\n\n  const handleCopy = () => {\n    toast(\"Copied to clipboard\");\n  };\n\n  const { isCopied, copyToClipboard } = useCopyToClipboard({\n    timeout: 2000,\n    onCopy: handleCopy,\n  });\n\n  return (\n    <div>\n      <Toaster\n        theme={theme}\n        toastOptions={{\n          style: {\n            background: \"var(--color-muted)\",\n            border: \"var(--color-border)\",\n          },\n        }}\n        position=\"top-center\"\n      />\n      <Button onClick={() => copyToClipboard(\"Hello World!\")} variant=\"outline\">\n        {isCopied ? <Check className=\"w-4 h-4\" /> : \"Copy Text\"}\n      </Button>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "UseIsMobile",
+      "slug": "useIsMobile",
+      "category": "hook",
+      "path": "/hooks/useIsMobile",
+      "sourcePath": "libs/rlx-hooks/useIsMobile",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { useState, useEffect } from \\\"react\\\";\\nimport { useIsMobile } from \\\"@rlx-hooks/use-is-mobile\\\";\\n\\nexport const Preview = () => {\\n  const isMobile = useIsMobile();\\n  const [windowWidth, setWindowWidth] = useState(0);\\n\\n  useEffect(() => {\\n    setWindowWidth(window.innerWidth);\\n    const handleResize = () => {\\n      setWindowWidth(window.innerWidth);\\n    };\\n    window.addEventListener(\\\"resize\\\", handleResize);\\n    return () => {\\n      window.removeEventListener(\\\"resize\\\", handleResize);\\n    };\\n  }, []);\\n\\n  return (\\n    <div>\\n      <div>Window width: {windowWidth}px</div>\\n      <div>Is mobile: {isMobile ? \\\"Yes\\\" : \\\"No\\\"}</div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { useIsMobile } from \"@rlx-hooks/use-is-mobile\";\n\nexport const Preview = () => {\n  const isMobile = useIsMobile();\n  const [windowWidth, setWindowWidth] = useState(0);\n\n  useEffect(() => {\n    setWindowWidth(window.innerWidth);\n    const handleResize = () => {\n      setWindowWidth(window.innerWidth);\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  return (\n    <div>\n      <div>Window width: {windowWidth}px</div>\n      <div>Is mobile: {isMobile ? \"Yes\" : \"No\"}</div>\n    </div>\n  );\n};\n"
+        }
+      ]
+    },
+    {
+      "name": "UseMediaQuery",
+      "slug": "useMediaQuery",
+      "category": "hook",
+      "path": "/hooks/useMediaQuery",
+      "sourcePath": "libs/rlx-hooks/useMediaQuery",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { useMediaQuery } from \\\"@rlx-hooks/use-media-query\\\";\\nimport { Badge } from \\\"@rlx-widgets/badge\\\";\\n\\nexport const Preview = () => {\\n  const [query, setQuery] = useState(\\\"(min-width: 768px)\\\");\\n  const isMatch = useMediaQuery(query);\\n\\n  return (\\n    <div>\\n      <Input\\n        value={query}\\n        onChange={(e) => setQuery(e.target.value)}\\n        placeholder=\\\"Enter media query\\\"\\n      />\\n      <div>\\n        Screen size matches:{\\\" \\\"}\\n        {isMatch ? (\\n          <Badge variant=\\\"default\\\">Yes</Badge>\\n        ) : (\\n          <Badge variant=\\\"destructive\\\">No</Badge>\\n        )}\\n      </div>\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { useMediaQuery } from \"@rlx-hooks/use-media-query\";\nimport { Badge } from \"@rlx-widgets/badge\";\n\nexport const Preview = () => {\n  const [query, setQuery] = useState(\"(min-width: 768px)\");\n  const isMatch = useMediaQuery(query);\n\n  return (\n    <div>\n      <Input\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        placeholder=\"Enter media query\"\n      />\n      <div>\n        Screen size matches:{\" \"}\n        {isMatch ? (\n          <Badge variant=\"default\">Yes</Badge>\n        ) : (\n          <Badge variant=\"destructive\">No</Badge>\n        )}\n      </div>\n    </div>\n  );\n};\n"
+        }
+      ]
+    }
+  ],
+  "utils": [
+    {
+      "name": "IsValidDate",
+      "slug": "isValidDate",
+      "category": "util",
+      "path": "/utils/isValidDate",
+      "sourcePath": "libs/rlx-utils/isValidDate",
+      "variants": [
+        {
+          "name": "default",
+          "code": "/**\n* ⚠️ AUTO-GENERATED FILE\n*\n* This file was generated by devops/generate-preview-code.ts.\n* Do not modify this file directly — your changes will be overwritten.\n*/\nexport const code = \n\"\\\"use client\\\";\\n\\nimport { useEffect, useState } from \\\"react\\\";\\nimport { Input } from \\\"@rlx-widgets/input\\\";\\nimport { isValidDate } from \\\"@rlx-utils/is-valid-date\\\";\\nimport { ShikiCodeBlock } from \\\"@rlx-components/shiki-code-block\\\";\\nimport { InlineCode } from \\\"../../../../../../_components\\\";\\nimport { ArrowRight } from \\\"lucide-react\\\";\\n\\nexport const Preview = () => {\\n  const [date, setDate] = useState<string>(\\\"2025-10-18\\\");\\n  const [isValid, setIsValid] = useState(false);\\n\\n  useEffect(() => {\\n    setIsValid(isValidDate(new Date(date)));\\n  }, [date]);\\n\\n  return (\\n    <div>\\n      <ShikiCodeBlock\\n        code={`isValidDate(new Date(\\\"${date}\\\"))`}\\n        lang=\\\"tsx\\\"\\n        className=\\\"h-fit\\\"\\n      />\\n      <Input\\n        type=\\\"text\\\"\\n        value={date}\\n        onChange={(e) => setDate(e.target.value)}\\n        className=\\\"mt-4\\\"\\n      />\\n      <p className=\\\"text-center mt-2\\\">\\n        {isValid ? \\\"Valid Date ✅\\\" : \\\"Invalid Date ❌\\\"}\\n      </p>\\n      {isValid && (\\n        <div className=\\\"flex items-center justify-center gap-2 mt-2\\\">\\n          <InlineCode>{`new Date(date).toLocaleDateString()`}</InlineCode>\\n          <ArrowRight className=\\\"w-4 h-4\\\" />\\n          <InlineCode>{new Date(date).toLocaleDateString()}</InlineCode>\\n        </div>\\n      )}\\n    </div>\\n  );\\n};\\n\"",
+          "preview": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Input } from \"@rlx-widgets/input\";\nimport { isValidDate } from \"@rlx-utils/is-valid-date\";\nimport { ShikiCodeBlock } from \"@rlx-components/shiki-code-block\";\nimport { InlineCode } from \"../../../../../../_components\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport const Preview = () => {\n  const [date, setDate] = useState<string>(\"2025-10-18\");\n  const [isValid, setIsValid] = useState(false);\n\n  useEffect(() => {\n    setIsValid(isValidDate(new Date(date)));\n  }, [date]);\n\n  return (\n    <div>\n      <ShikiCodeBlock\n        code={`isValidDate(new Date(\"${date}\"))`}\n        lang=\"tsx\"\n        className=\"h-fit\"\n      />\n      <Input\n        type=\"text\"\n        value={date}\n        onChange={(e) => setDate(e.target.value)}\n        className=\"mt-4\"\n      />\n      <p className=\"text-center mt-2\">\n        {isValid ? \"Valid Date ✅\" : \"Invalid Date ❌\"}\n      </p>\n      {isValid && (\n        <div className=\"flex items-center justify-center gap-2 mt-2\">\n          <InlineCode>{`new Date(date).toLocaleDateString()`}</InlineCode>\n          <ArrowRight className=\"w-4 h-4\" />\n          <InlineCode>{new Date(date).toLocaleDateString()}</InlineCode>\n        </div>\n      )}\n    </div>\n  );\n};\n"
+        }
+      ]
+    }
+  ],
+  "extractedAt": "2025-11-19T05:43:27.176Z"
+}