sprawlify 0.0.108 → 0.0.110

package/dist/index.mjs

@@ -8,7 +8,7 @@ import { existsSync } from "fs";
 import prompts from "prompts";
 import { faker } from "@faker-js/faker";
 //#region package.json
-var version = "0.0.108";
+var version = "0.0.110";
 //#endregion
 //#region src/utils/file-helper.ts
 const FILE_BACKUP_SUFFIX = ".bak";
@@ -190,7 +190,7 @@ const PRESETS = { monochrome: {
 		react: {
 			dependencies: {
 				react: "^18.2.0",
-				"@sprawlify/react": "^0.0.106",
+				"@sprawlify/react": "^0.0.108",
 				"lucide-react": "^0.577.0",
 				"class-variance-authority": "^0.7.1",
 				clsx: "^2.1.1",
@@ -211,7 +211,7 @@ const PRESETS = { monochrome: {
 						"lucide-react"
 					],
 					files: [{
-						content: "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDownIcon } from \"lucide-react\"\r\n\r\nfunction Accordion({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\r\n  return (\r\n    <AccordionPrimitive.Root\r\n      data-slot=\"accordion\"\r\n      className={cn(\"flex w-full flex-col\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction AccordionItem({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\r\n  return (\r\n    <AccordionPrimitive.Item\r\n      data-slot=\"accordion-item\"\r\n      className={cn(\"group not-last:border-b\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction AccordionTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\r\n  return (\r\n    <AccordionPrimitive.ItemTrigger\r\n      data-slot=\"accordion-trigger\"\r\n      className={cn(\r\n        \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <AccordionPrimitive.ItemIndicator className=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\r\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0\" />\r\n      </AccordionPrimitive.ItemIndicator>\r\n    </AccordionPrimitive.ItemTrigger>\r\n  )\r\n}\r\n\r\nfunction AccordionContent({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof AccordionPrimitive.ItemContent>) {\r\n  return (\r\n    <AccordionPrimitive.ItemContent\r\n      data-slot=\"accordion-content\"\r\n      className=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\r\n      {...props}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\r\n          className\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </AccordionPrimitive.ItemContent>\r\n  )\r\n}\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\r\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nfunction Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"group not-last:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\n  return (\n    <AccordionPrimitive.ItemTrigger\n      data-slot=\"accordion-trigger\"\n      className={cn(\n        \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <AccordionPrimitive.ItemIndicator className=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\n        <ChevronDownIcon\n          data-slot=\"accordion-trigger-icon\"\n          className=\"pointer-events-none shrink-0\"\n        />\n      </AccordionPrimitive.ItemIndicator>\n    </AccordionPrimitive.ItemTrigger>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.ItemContent>) {\n  return (\n    <AccordionPrimitive.ItemContent\n      data-slot=\"accordion-content\"\n      className=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.ItemContent>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
 						type: "registry:ui",
 						path: "accordion.tsx"
 					}]
@@ -225,16 +225,30 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof alertVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"root\"\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"title\"\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"description\"\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"action\"\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof alertVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"root\"\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"title\"\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"description\"\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"alert\"\n      data-part=\"action\"\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n",
 						type: "registry:ui",
 						path: "alert.tsx"
 					}]
 				},
+				{
+					name: "alert-dialog",
+					dependencies: [
+						"react",
+						"@sprawlify/react",
+						"@/lib/utils",
+						"@/components/ui/button"
+					],
+					files: [{
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/react/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogBackdrop({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\";\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogPrimitive.Positioner>\n        <AlertDialogPrimitive.Content\n          data-slot=\"alert-dialog-content\"\n          data-size={size}\n          className={cn(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n            className,\n          )}\n          {...props}\n        />\n      </AlertDialogPrimitive.Positioner>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogMedia({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  value = \"cancel\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.CloseTrigger\n        data-slot=\"alert-dialog-cancel\"\n        value={value}\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  );\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.CloseTrigger\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogBackdrop,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n",
+						type: "registry:ui",
+						path: "alert-dialog.tsx"
+					}]
+				},
 				{
 					name: "aspect-ratio",
 					dependencies: ["@sprawlify/react"],
 					files: [{
-						content: "\"use client\"\n\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/react/aspect-ratio\";\n\nfunction AspectRatio({\n  children,\n  ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n  return (\n    <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props}>\n      <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n        {children}\n      </AspectRatioPrimitive.Content>\n    </AspectRatioPrimitive.Root>\n  );\n}\n\nexport { AspectRatio };\n",
+						content: "\"use client\";\n\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/react/aspect-ratio\";\n\nfunction AspectRatio({\n  children,\n  ...props\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n  return (\n    <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props}>\n      <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n        {children}\n      </AspectRatioPrimitive.Content>\n    </AspectRatioPrimitive.Root>\n  );\n}\n\nexport { AspectRatio };\n",
 						type: "registry:ui",
 						path: "aspect-ratio.tsx"
 					}]
@@ -247,7 +261,7 @@ const PRESETS = { monochrome: {
 						"@/lib/utils"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/react/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\";\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"avatar\"\n      data-part=\"badge\"\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"avatar\"\n      data-paert=\"group\"\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"avatar\"\n      data-paert=\"group-count\"\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/react/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\";\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"avatar\"\n      data-part=\"badge\"\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"avatar\"\n      data-paert=\"group\"\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"avatar\"\n      data-paert=\"group-count\"\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n",
 						type: "registry:ui",
 						path: "avatar.tsx"
 					}]
@@ -261,11 +275,25 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary: \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.span> & VariantProps<typeof badgeVariants>) {\n  return (\n    <sprawlify.span\n      data-scope=\"badge\"\n      data-part=\"root\"\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary: \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.span> & VariantProps<typeof badgeVariants>) {\n  return (\n    <sprawlify.span\n      data-scope=\"badge\"\n      data-part=\"root\"\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n",
 						type: "registry:ui",
 						path: "badge.tsx"
 					}]
 				},
+				{
+					name: "breadcrumb",
+					dependencies: [
+						"react",
+						"lucide-react",
+						"@/lib/utils",
+						"@sprawlify/react"
+					],
+					files: [{
+						content: "import * as React from \"react\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<typeof sprawlify.nav>) {\n  return (\n    <sprawlify.nav\n      data-scope=\"breadcrumb\"\n      data-part=\"root\"\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<typeof sprawlify.ol>) {\n  return (\n    <sprawlify.ol\n      data-scope=\"breadcrumb\"\n      data-part=\"list\"\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<typeof sprawlify.li>) {\n  return (\n    <sprawlify.li\n      data-scope=\"breadcrumb\"\n      data-part=\"item\"\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.a>) {\n  return (\n    <sprawlify.a\n      data-scope=\"breadcrumb\"\n      data-part=\"link\"\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"breadcrumb\"\n      data-part=\"page\"\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.li>) {\n  return (\n    <sprawlify.li\n      data-scope=\"breadcrumb\"\n      data-part=\"separator\"\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon />}\n    </sprawlify.li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"breadcrumb\"\n      data-part=\"ellipsis\"\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </sprawlify.span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n",
+						type: "registry:ui",
+						path: "breadcrumb.tsx"
+					}]
+				},
 				{
 					name: "button",
 					dependencies: [
@@ -275,7 +303,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.button> & VariantProps<typeof buttonVariants>) {\n  return (\n    <sprawlify.button\n      data-scope=\"button\"\n      data-part=\"root\"\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.button> & VariantProps<typeof buttonVariants>) {\n  return (\n    <sprawlify.button\n      data-scope=\"button\"\n      data-part=\"root\"\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n",
 						type: "registry:ui",
 						path: "button.tsx"
 					}]
@@ -289,7 +317,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"button-group\"\n      data-part=\"root\"\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      className={cn(\n        \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-scope=\"button-group\"\n      data-part=\"separator\"\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n",
+						content: "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  },\n);\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"button-group\"\n      data-part=\"root\"\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      className={cn(\n        \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-scope=\"button-group\"\n      data-part=\"separator\"\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n",
 						type: "registry:ui",
 						path: "button-group.tsx"
 					}]
@@ -302,7 +330,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"root\"\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"header\"\n      data-slot=\"card-header\"\n      className={cn(\n        \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"title\"\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"description\"\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"action\"\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"content\"\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"footer\"\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"root\"\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"header\"\n      data-slot=\"card-header\"\n      className={cn(\n        \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"title\"\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"description\"\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"action\"\n      data-slot=\"card-action\"\n      className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"content\"\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"card\"\n      data-part=\"footer\"\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n",
 						type: "registry:ui",
 						path: "card.tsx"
 					}]
@@ -316,7 +344,7 @@ const PRESETS = { monochrome: {
 						"lucide-react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon />\n      </CheckboxPrimitive.Indicator>\n      <CheckboxPrimitive.HiddenInput />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon />\n      </CheckboxPrimitive.Indicator>\n      <CheckboxPrimitive.HiddenInput />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n",
 						type: "registry:ui",
 						path: "checkbox.tsx"
 					}]
@@ -325,7 +353,7 @@ const PRESETS = { monochrome: {
 					name: "collapsible",
 					dependencies: ["@sprawlify/react"],
 					files: [{
-						content: "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/react/collapsible\";\n\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n",
+						content: "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/react/collapsible\";\n\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" {...props} />;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n",
 						type: "registry:ui",
 						path: "collapsible.tsx"
 					}]
@@ -339,7 +367,7 @@ const PRESETS = { monochrome: {
 						"lucide-react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return (\n    <DropdownMenuPrimitive.Root\n      data-slot=\"dropdown-menu\"\n      positioning={{ offset: { mainAxis: 4 } }}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <Portal>\n      <DropdownMenuPrimitive.Positioner>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n            className,\n          )}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n  return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground  data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {\n  return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.ItemGroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.TriggerItem\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n    </DropdownMenuPrimitive.TriggerItem>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <Portal>\n      <DropdownMenuPrimitive.Positioner>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-sub-content\"\n          className={cn(\n            \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n            className,\n          )}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return (\n    <DropdownMenuPrimitive.Root\n      data-slot=\"dropdown-menu\"\n      positioning={{ offset: { mainAxis: 4 } }}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <Portal>\n      <DropdownMenuPrimitive.Positioner>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n            className,\n          )}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n  return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground  data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {\n  return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.ItemGroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.TriggerItem\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n    </DropdownMenuPrimitive.TriggerItem>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <Portal>\n      <DropdownMenuPrimitive.Positioner>\n        <DropdownMenuPrimitive.Content\n          data-slot=\"dropdown-menu-sub-content\"\n          className={cn(\n            \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n            className,\n          )}\n          {...props}\n        />\n      </DropdownMenuPrimitive.Positioner>\n    </Portal>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n",
 						type: "registry:ui",
 						path: "dropdown-menu.tsx"
 					}]
@@ -352,7 +380,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Empty({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"empty\"\n      data-part=\"root\"\n      data-slot=\"empty\"\n      className={cn(\n        \"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-header\"\n      className={cn(\"gap-2 flex max-w-sm flex-col items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n",
+						content: "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Empty({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"empty\"\n      data-part=\"root\"\n      data-slot=\"empty\"\n      className={cn(\n        \"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-header\"\n      className={cn(\"gap-2 flex max-w-sm flex-col items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n",
 						type: "registry:ui",
 						path: "empty.tsx"
 					}]
@@ -368,7 +396,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport { useMemo } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<typeof sprawlify.fieldset>) {\n  return (\n    <sprawlify.fieldset\n      data-scope=\"field\"\n      data-part=\"set\"\n      data-slot=\"field-set\"\n      className={cn(\n        \"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.legend> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <sprawlify.legend\n      data-scope=\"field\"\n      data-part=\"legend\"\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"group\"\n      data-slot=\"field-group\"\n      className={cn(\n        \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof fieldVariants>) {\n  return (\n    <sprawlify.div\n      role=\"group\"\n      data-scope=\"field\"\n      data-part=\"root\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"content\"\n      data-slot=\"field-content\"\n      className={cn(\"gap-0.5 group/field-content flex flex-1 flex-col leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-scope=\"field\"\n      data-part=\"label\"\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"title\"\n      data-slot=\"field-title\"\n      className={cn(\n        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-scope=\"field\"\n      data-part=\"description\"\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"separator\"\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n          data-scope=\"field\"\n          data-part=\"separator-content\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </sprawlify.div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <sprawlify.div\n      role=\"alert\"\n      data-scope=\"field\"\n      data-part=\"error\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </sprawlify.div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n",
+						content: "\"use client\";\n\nimport { useMemo } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<typeof sprawlify.fieldset>) {\n  return (\n    <sprawlify.fieldset\n      data-scope=\"field\"\n      data-part=\"set\"\n      data-slot=\"field-set\"\n      className={cn(\n        \"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.legend> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <sprawlify.legend\n      data-scope=\"field\"\n      data-part=\"legend\"\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"group\"\n      data-slot=\"field-group\"\n      className={cn(\n        \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof fieldVariants>) {\n  return (\n    <sprawlify.div\n      role=\"group\"\n      data-scope=\"field\"\n      data-part=\"root\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"content\"\n      data-slot=\"field-content\"\n      className={cn(\"gap-0.5 group/field-content flex flex-1 flex-col leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-scope=\"field\"\n      data-part=\"label\"\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"title\"\n      data-slot=\"field-title\"\n      className={cn(\n        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-scope=\"field\"\n      data-part=\"description\"\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <sprawlify.div\n      data-scope=\"field\"\n      data-part=\"separator\"\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n          data-scope=\"field\"\n          data-part=\"separator-content\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </sprawlify.div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <sprawlify.div\n      role=\"alert\"\n      data-scope=\"field\"\n      data-part=\"error\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </sprawlify.div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n",
 						type: "registry:ui",
 						path: "field.tsx"
 					}]
@@ -381,7 +409,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n  return (\n    <sprawlify.input\n      type={type}\n      data-scope=\"input\"\n      data-part=\"root\"\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n  return (\n    <sprawlify.input\n      type={type}\n      data-scope=\"input\"\n      data-part=\"root\"\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n",
 						type: "registry:ui",
 						path: "input.tsx"
 					}]
@@ -398,7 +426,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"input-group\"\n      data-part=\"root\"\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <sprawlify.div\n      role=\"group\"\n      data-scope=\"input-group\"\n      data-part=\"addon\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      data-scope=\"input-group\"\n      data-part=\"button\"\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"input-group\"\n      data-part=\"text\"\n      data-slot=\"input-group-text\"\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n  return (\n    <Input\n      data-scope=\"input-group\"\n      data-part=\"control\"\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.textarea>) {\n  return (\n    <Textarea\n      data-scope=\"input-group\"\n      data-part=\"control\"\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"input-group\"\n      data-part=\"root\"\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <sprawlify.div\n      role=\"group\"\n      data-scope=\"input-group\"\n      data-part=\"addon\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n});\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      data-scope=\"input-group\"\n      data-part=\"button\"\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n  return (\n    <sprawlify.span\n      data-scope=\"input-group\"\n      data-part=\"text\"\n      data-slot=\"input-group-text\"\n      className={cn(\n        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n  return (\n    <Input\n      data-scope=\"input-group\"\n      data-part=\"control\"\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<typeof sprawlify.textarea>) {\n  return (\n    <Textarea\n      data-scope=\"input-group\"\n      data-part=\"control\"\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n",
 						type: "registry:ui",
 						path: "input-group.tsx"
 					}]
@@ -413,7 +441,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      role=\"list\"\n      data-scope=\"item\"\n      data-part=\"group\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-scope=\"item\"\n      data-part=\"separator\"\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"root\"\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"media\"\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"content\"\n      data-slot=\"item-content\"\n      className={cn(\n        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"title\"\n      data-slot=\"item-title\"\n      className={cn(\n        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-scope=\"item\"\n      data-part=\"description\"\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"actions\"\n      data-slot=\"item-actions\"\n      className={cn(\"gap-2 flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"header\"\n      data-slot=\"item-header\"\n      className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"footer\"\n      data-slot=\"item-footer\"\n      className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      role=\"list\"\n      data-scope=\"item\"\n      data-part=\"group\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-scope=\"item\"\n      data-part=\"separator\"\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"root\"\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"media\"\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"content\"\n      data-slot=\"item-content\"\n      className={cn(\n        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"title\"\n      data-slot=\"item-title\"\n      className={cn(\n        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.p>) {\n  return (\n    <sprawlify.p\n      data-scope=\"item\"\n      data-part=\"description\"\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"actions\"\n      data-slot=\"item-actions\"\n      className={cn(\"gap-2 flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"header\"\n      data-slot=\"item-header\"\n      className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-scope=\"item\"\n      data-part=\"footer\"\n      data-slot=\"item-footer\"\n      className={cn(\"gap-2 flex basis-full items-center justify-between\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n};\n",
 						type: "registry:ui",
 						path: "item.tsx"
 					}]
@@ -422,7 +450,7 @@ const PRESETS = { monochrome: {
 					name: "kbd",
 					dependencies: ["@/lib/utils", "@sprawlify/react"],
 					files: [{
-						content: "\"use client\"\n\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Kbd({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n  return (\n    <sprawlify.kbd\n      data-scope=\"kbd\"\n      data-part=\"root\"\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n  return (\n    <sprawlify.kbd\n      data-scope=\"kbd\"\n      data-part=\"group\"\n      data-slot=\"kbd-group\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n",
+						content: "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Kbd({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n  return (\n    <sprawlify.kbd\n      data-scope=\"kbd\"\n      data-part=\"root\"\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.kbd>) {\n  return (\n    <sprawlify.kbd\n      data-scope=\"kbd\"\n      data-part=\"group\"\n      data-slot=\"kbd-group\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Kbd, KbdGroup };\n",
 						type: "registry:ui",
 						path: "kbd.tsx"
 					}]
@@ -435,7 +463,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof sprawlify.label>) {\n  return (\n    <sprawlify.label\n      data-scope=\"label\"\n      data-part=\"root\"\n      data-slot=\"label\"\n      className={cn(\n        \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof sprawlify.label>) {\n  return (\n    <sprawlify.label\n      data-scope=\"label\"\n      data-part=\"root\"\n      data-slot=\"label\"\n      className={cn(\n        \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n",
 						type: "registry:ui",
 						path: "label.tsx"
 					}]
@@ -448,7 +476,7 @@ const PRESETS = { monochrome: {
 						"lucide-react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className,\n      )}\n      data-scope=\"native-select\"\n      data-part=\"root\"\n      data-slot=\"native-select-root\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <ChevronDownIcon\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  );\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-scope=\"native-select\"\n      data-part=\"option\"\n      data-slot=\"native-select-option\"\n      {...props}\n    />\n  );\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-scope=\"native-select\"\n      data-part=\"optgroup\"\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className,\n      )}\n      data-scope=\"native-select\"\n      data-part=\"root\"\n      data-slot=\"native-select-root\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <ChevronDownIcon\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  );\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-scope=\"native-select\"\n      data-part=\"option\"\n      data-slot=\"native-select-option\"\n      {...props}\n    />\n  );\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-scope=\"native-select\"\n      data-part=\"optgroup\"\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n",
 						type: "registry:ui",
 						path: "native-select.tsx"
 					}]
@@ -461,7 +489,7 @@ const PRESETS = { monochrome: {
 						"@/lib/utils"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"rounded-full bg-border relative flex-1\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"rounded-full bg-border relative flex-1\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n",
 						type: "registry:ui",
 						path: "scroll-area.tsx"
 					}]
@@ -474,7 +502,7 @@ const PRESETS = { monochrome: {
 						"@/lib/utils"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/react/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/react/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n",
 						type: "registry:ui",
 						path: "separator.tsx"
 					}]
@@ -488,7 +516,7 @@ const PRESETS = { monochrome: {
 						"@/lib/utils"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/react/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n        \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/react/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n        \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n",
 						type: "registry:ui",
 						path: "tabs.tsx"
 					}]
@@ -501,7 +529,7 @@ const PRESETS = { monochrome: {
 						"@sprawlify/react"
 					],
 					files: [{
-						content: "\"use client\"\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof sprawlify.textarea>) {\n  return (\n    <sprawlify.textarea\n      data-scope=\"textarea\"\n      data-part=\"root\"\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n",
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof sprawlify.textarea>) {\n  return (\n    <sprawlify.textarea\n      data-scope=\"textarea\"\n      data-part=\"root\"\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n",
 						type: "registry:ui",
 						path: "textarea.tsx"
 					}]
@@ -519,7 +547,7 @@ const PRESETS = { monochrome: {
 		},
 		solid: {
 			dependencies: {
-				"@sprawlify/solid": "^0.0.106",
+				"@sprawlify/solid": "^0.0.108",
 				"lucide-solid": "^0.577.0",
 				"solid-js": "^1.8.0",
 				"class-variance-authority": "^0.7.1",
@@ -541,7 +569,7 @@ const PRESETS = { monochrome: {
 						"solid-js"
 					],
 					files: [{
-						content: "import { Accordion as AccordionPrimitive } from \"@sprawlify/solid/accordion\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ChevronDownIcon } from \"lucide-solid\";\r\nimport { splitProps, type ComponentProps } from \"solid-js\";\r\n\r\nfunction Accordion(props: ComponentProps<typeof AccordionPrimitive.Root>) {\r\n  const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n  return (\r\n    <AccordionPrimitive.Root\r\n      data-slot=\"accordion\"\r\n      class={cn(\"flex w-full flex-col\", local.class)}\r\n      {...others}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AccordionItem(props: ComponentProps<typeof AccordionPrimitive.Item>) {\r\n  const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n  return (\r\n    <AccordionPrimitive.Item\r\n      data-slot=\"accordion-item\"\r\n      class={cn(\"group not-last:border-b\", local.class)}\r\n      {...others}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AccordionTrigger(props: ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\r\n  const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n  return (\r\n    <AccordionPrimitive.ItemTrigger\r\n      data-slot=\"accordion-trigger\"\r\n      class={cn(\r\n        \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\r\n        local.class\r\n      )}\r\n      {...others}\r\n    >\r\n      {local.children}\r\n      <AccordionPrimitive.ItemIndicator class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\r\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0\" />\r\n      </AccordionPrimitive.ItemIndicator>\r\n    </AccordionPrimitive.ItemTrigger>\r\n  );\r\n}\r\n\r\nfunction AccordionContent(props: ComponentProps<typeof AccordionPrimitive.ItemContent>) {\r\n  const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n  \r\n  return (\r\n    <AccordionPrimitive.ItemContent\r\n      data-slot=\"accordion-content\"\r\n      class=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\r\n      {...others}\r\n    >\r\n      <div\r\n        class={cn(\r\n          \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\r\n          local.class\r\n        )}\r\n      >\r\n        {local.children}\r\n      </div>\r\n    </AccordionPrimitive.ItemContent>\r\n  );\r\n}\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };",
+						content: "import { Accordion as AccordionPrimitive } from \"@sprawlify/solid/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-solid\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\n\nfunction Accordion(props: ComponentProps<typeof AccordionPrimitive.Root>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      class={cn(\"flex w-full flex-col\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction AccordionItem(props: ComponentProps<typeof AccordionPrimitive.Item>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      class={cn(\"group not-last:border-b\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction AccordionTrigger(props: ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {\n  const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <AccordionPrimitive.ItemTrigger\n      data-slot=\"accordion-trigger\"\n      class={cn(\n        \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n        local.class,\n      )}\n      {...others}\n    >\n      {local.children}\n      <AccordionPrimitive.ItemIndicator class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0\" />\n      </AccordionPrimitive.ItemIndicator>\n    </AccordionPrimitive.ItemTrigger>\n  );\n}\n\nfunction AccordionContent(props: ComponentProps<typeof AccordionPrimitive.ItemContent>) {\n  const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <AccordionPrimitive.ItemContent\n      data-slot=\"accordion-content\"\n      class=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n      {...others}\n    >\n      <div\n        class={cn(\n          \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          local.class,\n        )}\n      >\n        {local.children}\n      </div>\n    </AccordionPrimitive.ItemContent>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n",
 						type: "registry:ui",
 						path: "accordion.tsx"
 					}]
@@ -560,6 +588,21 @@ const PRESETS = { monochrome: {
 						path: "alert.tsx"
 					}]
 				},
+				{
+					name: "alert-dialog",
+					dependencies: [
+						"@sprawlify/solid",
+						"@/lib/utils",
+						"@/components/ui/button",
+						"solid-js",
+						"solid-js/web"
+					],
+					files: [{
+						content: "import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/solid/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nfunction AlertDialog(props: ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger(props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal(props: ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogBackdrop(props: ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      class={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction AlertDialogContent(\n  props: ComponentProps<typeof AlertDialogPrimitive.Content> & {\n    size?: \"default\" | \"sm\";\n  },\n) {\n  const [local, others] = splitProps(props, [\"class\", \"size\", \"children\"]);\n  const size = () => local.size ?? \"default\";\n\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogPrimitive.Positioner>\n        <AlertDialogPrimitive.Content\n          data-slot=\"alert-dialog-content\"\n          data-size={size()}\n          class={cn(\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n            local.class,\n          )}\n          {...others}\n        >\n          {local.children}\n        </AlertDialogPrimitive.Content>\n      </AlertDialogPrimitive.Positioner>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-header\"\n      class={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction AlertDialogFooter(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-footer\"\n      class={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction AlertDialogMedia(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.div\n      data-slot=\"alert-dialog-media\"\n      class={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction AlertDialogTitle(props: ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      class={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction AlertDialogDescription(props: ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      class={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction AlertDialogCancel(\n  props: ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n    Pick<ComponentProps<typeof Button>, \"variant\" | \"size\">,\n) {\n  const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\", \"value\", \"children\"]);\n  const variant = () => local.variant ?? \"outline\";\n  const size = () => local.size ?? \"default\";\n  const value = () => local.value ?? \"cancel\";\n\n  return (\n    <Button\n      variant={variant()}\n      size={size()}\n      asChild={(props) => (\n        <AlertDialogPrimitive.CloseTrigger\n          data-slot=\"alert-dialog-cancel\"\n          class={cn(local.class)}\n          value={value()}\n          {...props()}\n          {...others}\n        >\n          {local.children}\n        </AlertDialogPrimitive.CloseTrigger>\n      )}\n    />\n  );\n}\n\nfunction AlertDialogAction(\n  props: ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &\n    Pick<ComponentProps<typeof Button>, \"variant\" | \"size\">,\n) {\n  const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\", \"children\"]);\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"default\";\n\n  return (\n    <Button\n      variant={variant()}\n      size={size()}\n      asChild={(props) => (\n        <AlertDialogPrimitive.CloseTrigger\n          data-slot=\"alert-dialog-action\"\n          class={cn(local.class)}\n          {...props()}\n          {...others}\n        >\n          {local.children}\n        </AlertDialogPrimitive.CloseTrigger>\n      )}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogBackdrop,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n",
+						type: "registry:ui",
+						path: "alert-dialog.tsx"
+					}]
+				},
 				{
 					name: "aspect-ratio",
 					dependencies: ["@sprawlify/solid", "solid-js"],
@@ -596,6 +639,20 @@ const PRESETS = { monochrome: {
 						path: "badge.tsx"
 					}]
 				},
+				{
+					name: "breadcrumb",
+					dependencies: [
+						"lucide-solid",
+						"@/lib/utils",
+						"@sprawlify/solid",
+						"solid-js"
+					],
+					files: [{
+						content: "import { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-solid\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\n\nfunction Breadcrumb(props: ComponentProps<typeof sprawlify.nav>) {\n  return (\n    <sprawlify.nav\n      data-scope=\"breadcrumb\"\n      data-part=\"root\"\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbList(props: ComponentProps<typeof sprawlify.ol>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.ol\n      data-scope=\"breadcrumb\"\n      data-part=\"list\"\n      data-slot=\"breadcrumb-list\"\n      class={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction BreadcrumbItem(props: ComponentProps<typeof sprawlify.li>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.li\n      data-scope=\"breadcrumb\"\n      data-part=\"item\"\n      data-slot=\"breadcrumb-item\"\n      class={cn(\"inline-flex items-center gap-1.5\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction BreadcrumbLink(props: ComponentProps<typeof sprawlify.a>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.a\n      data-scope=\"breadcrumb\"\n      data-part=\"link\"\n      data-slot=\"breadcrumb-link\"\n      class={cn(\"transition-colors hover:text-foreground\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction BreadcrumbPage(props: ComponentProps<typeof sprawlify.span>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.span\n      data-scope=\"breadcrumb\"\n      data-part=\"page\"\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      class={cn(\"font-normal text-foreground\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator(props: ComponentProps<typeof sprawlify.li>) {\n  const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <sprawlify.li\n      data-scope=\"breadcrumb\"\n      data-part=\"separator\"\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={cn(\"[&>svg]:size-3.5\", local.class)}\n      {...others}\n    >\n      {local.children ?? <ChevronRightIcon />}\n    </sprawlify.li>\n  );\n}\n\nfunction BreadcrumbEllipsis(props: ComponentProps<typeof sprawlify.span>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.span\n      data-scope=\"breadcrumb\"\n      data-part=\"ellipsis\"\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={cn(\"flex size-9 items-center justify-center\", local.class)}\n      {...others}\n    >\n      <MoreHorizontalIcon class=\"size-4\" />\n      <span class=\"sr-only\">More</span>\n    </sprawlify.span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n",
+						type: "registry:ui",
+						path: "breadcrumb.tsx"
+					}]
+				},
 				{
 					name: "button",
 					dependencies: [
@@ -857,7 +914,7 @@ const PRESETS = { monochrome: {
 		},
 		svelte: {
 			dependencies: {
-				"@sprawlify/svelte": "^0.0.106",
+				"@sprawlify/svelte": "^0.0.108",
 				svelte: "^5.54.0",
 				"lucide-svelte": "^0.577.0",
 				"class-variance-authority": "^0.7.1",
@@ -900,7 +957,7 @@ const PRESETS = { monochrome: {
 							path: "accordion/accordion.svelte"
 						},
 						{
-							content: "export { default as Accordion } from \"./accordion.svelte\"\r\nexport { default as AccordionItem } from \"./accordion-item.svelte\"\r\nexport { default as AccordionTrigger } from \"./accordion-trigger.svelte\"\r\nexport { default as AccordionContent } from \"./accordion-content.svelte\"",
+							content: "export { default as Accordion } from \"./accordion.svelte\";\nexport { default as AccordionItem } from \"./accordion-item.svelte\";\nexport { default as AccordionTrigger } from \"./accordion-trigger.svelte\";\nexport { default as AccordionContent } from \"./accordion-content.svelte\";\n",
 							type: "registry:ui",
 							path: "accordion/index.ts"
 						}
@@ -943,6 +1000,83 @@ const PRESETS = { monochrome: {
 						}
 					]
 				},
+				{
+					name: "alert-dialog",
+					dependencies: [
+						"@sprawlify/svelte",
+						"@/components/ui/button",
+						"@/lib/utils",
+						"svelte",
+						"svelte/elements"
+					],
+					files: [
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import { Button } from \"@/components/ui/button\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.CloseTrigger>, Pick<ComponentProps<typeof Button>, \"variant\" | \"size\"> {}\r\n\r\n  let { class: className, variant = \"default\", size = \"default\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Button {variant} {size}>\r\n  {#snippet asChild(props)}\r\n    <AlertDialogPrimitive.CloseTrigger\r\n      data-slot=\"alert-dialog-cancel\"\r\n      class={cn(className)}\r\n      {...props()}\r\n      {...rest}\r\n    >\r\n      {@render children?.()}\r\n    </AlertDialogPrimitive.CloseTrigger>\r\n  {/snippet}\r\n</Button>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-action.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\";\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Backdrop> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Backdrop\r\n  data-slot=\"alert-dialog-backdrop\"\r\n  class={cn(\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</AlertDialogPrimitive.Backdrop>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-backdrop.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import { Button } from \"@/components/ui/button\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.CloseTrigger>, Pick<ComponentProps<typeof Button>, \"variant\" | \"size\"> {}\r\n\r\n  let { class: className, variant = \"outline\", size = \"default\", value = \"cancel\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Button {variant} {size}>\r\n  {#snippet asChild(props)}\r\n    <AlertDialogPrimitive.CloseTrigger\r\n      data-slot=\"alert-dialog-cancel\"\r\n      class={cn(className)}\r\n      value={value}\r\n      {...props()}\r\n      {...rest}\r\n    >\r\n      {@render children?.()}\r\n    </AlertDialogPrimitive.CloseTrigger>\r\n  {/snippet}\r\n</Button>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-cancel.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import AlertDialogPortal from \"./alert-dialog-portal.svelte\"\r\n  import AlertDialogBackdrop from \"./alert-dialog-backdrop.svelte\"\r\n  import type { ComponentProps } from \"svelte\";\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Content> {\r\n    size?: \"default\" | \"sm\"\r\n  }\r\n\r\n  let { class: className, size = \"default\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPortal>\r\n  <AlertDialogBackdrop />\r\n  <AlertDialogPrimitive.Positioner>\r\n    <AlertDialogPrimitive.Content\r\n      data-slot=\"alert-dialog-content\"\r\n      data-size={size}\r\n      class={cn(\r\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\r\n        className\r\n      )}\r\n      {...rest}\r\n    >\r\n      {@render children?.()}\r\n    </AlertDialogPrimitive.Content>\r\n  </AlertDialogPrimitive.Positioner>\r\n</AlertDialogPortal>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-content.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\";\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Description> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Description\r\n  data-slot=\"alert-dialog-description\"\r\n  class={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</AlertDialogPrimitive.Description>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-description.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n  interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"div\"\r\n  data-slot=\"alert-dialog-footer\"\r\n  class={cn(\r\n    \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\r\n    className\r\n  )}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-footer.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n  interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"div\"\r\n  data-slot=\"alert-dialog-header\"\r\n  class={cn(\"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-header.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n  interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"div\"\r\n  data-slot=\"alert-dialog-media\"\r\n  class={cn(\"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-media.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Portal } from \"@sprawlify/svelte/portal\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof Portal> {\r\n    \"data-slot\"?: string\r\n  }\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Portal data-slot=\"alert-dialog-portal\" {...rest}>\r\n  {@render children?.()}\r\n</Portal>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-portal.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Title> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Title\r\n  data-slot=\"alert-dialog-title\"\r\n  class={cn(\"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</AlertDialogPrimitive.Title>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-title.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Trigger> {}\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...rest}>\r\n  {@render children?.()}\r\n</AlertDialogPrimitive.Trigger>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-trigger.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/svelte/alert-dialog\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof AlertDialogPrimitive.Root> {\r\n    \"data-slot\"?: string\r\n  }\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...rest}>\r\n  {@render children?.()}\r\n</AlertDialogPrimitive.Root>",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog.svelte"
+						},
+						{
+							content: "export { default as AlertDialog } from \"./alert-dialog.svelte\";\nexport { default as AlertDialogTrigger } from \"./alert-dialog-trigger.svelte\";\nexport { default as AlertDialogPortal } from \"./alert-dialog-portal.svelte\";\nexport { default as AlertDialogBackdrop } from \"./alert-dialog-backdrop.svelte\";\nexport { default as AlertDialogContent } from \"./alert-dialog-content.svelte\";\nexport { default as AlertDialogHeader } from \"./alert-dialog-header.svelte\";\nexport { default as AlertDialogFooter } from \"./alert-dialog-footer.svelte\";\nexport { default as AlertDialogMedia } from \"./alert-dialog-media.svelte\";\nexport { default as AlertDialogTitle } from \"./alert-dialog-title.svelte\";\nexport { default as AlertDialogDescription } from \"./alert-dialog-description.svelte\";\nexport { default as AlertDialogCancel } from \"./alert-dialog-cancel.svelte\";\nexport { default as AlertDialogAction } from \"./alert-dialog-action.svelte\";\n",
+							type: "registry:ui",
+							path: "alert-dialog/index.ts"
+						}
+					]
+				},
 				{
 					name: "aspect-ratio",
 					dependencies: ["@sprawlify/svelte", "svelte"],
@@ -1020,6 +1154,57 @@ const PRESETS = { monochrome: {
 						path: "badge/index.ts"
 					}]
 				},
+				{
+					name: "breadcrumb",
+					dependencies: [
+						"@/lib/utils",
+						"@sprawlify/svelte",
+						"lucide-svelte",
+						"svelte/elements"
+					],
+					files: [
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport { MoreHorizontalIcon } from \"lucide-svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLAttributes<HTMLSpanElement>, PolymorphicProps<\"span\"> {}\r\n  \r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"span\"\r\n  role=\"presentation\"\r\n  aria-hidden=\"true\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"ellipsis\"\r\n  class={cn(\"flex size-9 items-center justify-center\", className)}\r\n  {...rest}\r\n>\r\n  {#if children}\r\n    {@render children?.()}\r\n  {:else}\r\n    <MoreHorizontalIcon class=\"size-4\" />\r\n  {/if}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-ellipsis.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLLiAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLLiAttributes, PolymorphicProps<\"li\"> {}\r\n  \r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"li\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"item\"\r\n  class={cn(\"inline-flex items-center gap-1.5\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-item.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLAnchorAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLAnchorAttributes, PolymorphicProps<\"a\"> {}\r\n  \r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"a\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"link\"\r\n  class={cn(\"transition-colors hover:text-foreground\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-link.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLOlAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLOlAttributes, PolymorphicProps<\"ol\"> {}\r\n  \r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"ol\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"list\"\r\n  class={cn(\"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-list.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLAttributes<HTMLSpanElement>, PolymorphicProps<\"span\"> {}\r\n  \r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"span\"\r\n  role=\"link\"\r\n  aria-disabled=\"true\"\r\n  aria-current=\"page\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"page\"\r\n  class={cn(\"font-normal text-foreground\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-page.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport { ChevronRightIcon } from \"lucide-svelte\"\r\nimport type { HTMLLiAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLLiAttributes, PolymorphicProps<\"li\"> {}\r\n  \r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"li\"\r\n  role=\"presentation\"\r\n  aria-hidden=\"true\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"separator\"\r\n  class={cn(\"\", className)}\r\n  {...rest}\r\n>\r\n  {#if children}\r\n    {@render children?.()}\r\n  {:else}\r\n    <ChevronRightIcon class=\"size-4\" />\r\n  {/if}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-separator.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<\"nav\"> {}\r\n  \r\nlet { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"nav\"\r\n  data-scope=\"breadcrumb\"\r\n  data-part=\"root\"\r\n  aria-label=\"breadcrumb\"\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb.svelte"
+						},
+						{
+							content: "export { default as Breadcrumb } from \"./breadcrumb.svelte\";\nexport { default as BreadcrumbList } from \"./breadcrumb-list.svelte\";\nexport { default as BreadcrumbItem } from \"./breadcrumb-item.svelte\";\nexport { default as BreadcrumbLink } from \"./breadcrumb-link.svelte\";\nexport { default as BreadcrumbPage } from \"./breadcrumb-page.svelte\";\nexport { default as BreadcrumbSeparator } from \"./breadcrumb-separator.svelte\";\nexport { default as BreadcrumbEllipsis } from \"./breadcrumb-ellipsis.svelte\";\n",
+							type: "registry:ui",
+							path: "breadcrumb/index.ts"
+						}
+					]
+				},
 				{
 					name: "button",
 					dependencies: [
@@ -1685,7 +1870,7 @@ const PRESETS = { monochrome: {
 		},
 		vue: {
 			dependencies: {
-				"@sprawlify/vue": "^0.0.106",
+				"@sprawlify/vue": "^0.0.108",
 				vue: "^3.4.0",
 				"lucide-vue-next": "^0.577.0",
 				"class-variance-authority": "^0.7.1",
@@ -1708,27 +1893,27 @@ const PRESETS = { monochrome: {
 					],
 					files: [
 						{
-							content: "<script lang=\"ts\">\r\nimport type { AccordionItemContentProps } from \"@sprawlify/vue/accordion\";\r\n\r\nexport interface AccordionContentProps extends /* @vue-ignore */ AccordionItemContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useAttrs, computed } from \"vue\";\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { ...rest } = defineProps<AccordionContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n  cn(\r\n    \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\r\n    attrs.class as string\r\n  )\r\n);\r\n<\/script>\r\n\r\n<template>\r\n  <AccordionPrimitive.ItemContent\r\n    data-slot=\"accordion-content\"\r\n    class=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\r\n    v-bind=\"rest\"\r\n  >\r\n    <div :class=\"className\">\r\n      <slot />\r\n    </div>\r\n  </AccordionPrimitive.ItemContent>\r\n</template>",
+							content: "<script lang=\"ts\">\nimport type { AccordionItemContentProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionContentProps  extends /* @vue-ignore */ AccordionItemContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<AccordionContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AccordionPrimitive.ItemContent\n    data-slot=\"accordion-content\"\n    class=\"group-data-[state=open]:animate-accordion-down group-data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n    v-bind=\"rest\"\n  >\n    <div :class=\"className\">\n      <slot />\n    </div>\n  </AccordionPrimitive.ItemContent>\n</template>\n",
 							type: "registry:ui",
 							path: "accordion/accordion-content.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\r\nimport type { AccordionItemProps as AccordionPrimitiveItemProps } from \"@sprawlify/vue/accordion\";\r\n\r\nexport interface AccordionItemProps extends /* @vue-ignore */ AccordionPrimitiveItemProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useAttrs, computed } from \"vue\";\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { value, disabled, ...rest } = defineProps<AccordionItemProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n  cn(\"group not-last:border-b\", attrs.class as string)\r\n);\r\n<\/script>\r\n\r\n<template>\r\n  <AccordionPrimitive.Item\r\n    data-slot=\"accordion-item\"\r\n    :value=\"value\"\r\n    :disabled=\"disabled\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n  >\r\n    <slot />\r\n  </AccordionPrimitive.Item>\r\n</template>",
+							content: "<script lang=\"ts\">\nimport type { AccordionItemProps as AccordionPrimitiveItemProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionItemProps  extends /* @vue-ignore */ AccordionPrimitiveItemProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, disabled, ...rest } = defineProps<AccordionItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"group not-last:border-b\", attrs.class as string));\n<\/script>\n\n<template>\n  <AccordionPrimitive.Item\n    data-slot=\"accordion-item\"\n    :value=\"value\"\n    :disabled=\"disabled\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </AccordionPrimitive.Item>\n</template>\n",
 							type: "registry:ui",
 							path: "accordion/accordion-item.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\r\nimport type { AccordionItemTriggerProps } from \"@sprawlify/vue/accordion\";\r\n\r\nexport interface AccordionTriggerProps extends /* @vue-ignore */ AccordionItemTriggerProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useAttrs, computed } from \"vue\";\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\r\nimport { ChevronDownIcon } from \"lucide-vue-next\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst props = defineProps<AccordionTriggerProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n  cn(\r\n    \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\r\n    attrs.class as string\r\n  )\r\n);\r\n<\/script>\r\n\r\n<template>\r\n  <AccordionPrimitive.ItemTrigger\r\n    v-bind=\"props\"\r\n    :class=\"className\"\r\n    data-slot=\"accordion-trigger\"\r\n  >\r\n    <slot />\r\n    <AccordionPrimitive.ItemIndicator class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\r\n      <ChevronDownIcon\r\n        data-slot=\"accordion-trigger-icon\"\r\n        class=\"pointer-events-none shrink-0\"\r\n      />\r\n    </AccordionPrimitive.ItemIndicator>\r\n  </AccordionPrimitive.ItemTrigger>\r\n</template>",
+							content: "<script lang=\"ts\">\nimport type { AccordionItemTriggerProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionTriggerProps  extends /* @vue-ignore */ AccordionItemTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst props = defineProps<AccordionTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AccordionPrimitive.ItemTrigger v-bind=\"props\" :class=\"className\" data-slot=\"accordion-trigger\">\n    <slot />\n    <AccordionPrimitive.ItemIndicator\n      class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\"\n    >\n      <ChevronDownIcon data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0\" />\n    </AccordionPrimitive.ItemIndicator>\n  </AccordionPrimitive.ItemTrigger>\n</template>\n",
 							type: "registry:ui",
 							path: "accordion/accordion-trigger.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\r\nimport type { AccordionRootProps } from \"@sprawlify/vue/accordion\";\r\n\r\nexport interface AccordionProps extends /* @vue-ignore */ AccordionRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { useAttrs, computed } from \"vue\";\r\nimport { AccordionRoot } from \"@sprawlify/vue/accordion\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nexport interface AccordionProps extends /* @vue-ignore */ AccordionRootProps {}\r\n\r\nconst { collapsible, defaultValue, multiple, ...rest } = defineProps<AccordionProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n  cn(\"flex w-full flex-col\", attrs.class as string)\r\n);\r\n<\/script>\r\n\r\n<template>\r\n  <AccordionRoot\r\n    data-slot=\"accordion\"\r\n    :collapsible=\"collapsible\"\r\n    :default-value=\"defaultValue\"\r\n    :multiple=\"multiple\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n  >\r\n    <slot />\r\n  </AccordionRoot>\r\n</template>\r\n",
+							content: "<script lang=\"ts\">\nimport type { AccordionRootProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionProps  extends /* @vue-ignore */ AccordionRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { AccordionRoot } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AccordionProps  extends /* @vue-ignore */ AccordionRootProps {}\n\nconst { collapsible, defaultValue, multiple, ...rest } = defineProps<AccordionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"flex w-full flex-col\", attrs.class as string));\n<\/script>\n\n<template>\n  <AccordionRoot\n    data-slot=\"accordion\"\n    :collapsible=\"collapsible\"\n    :default-value=\"defaultValue\"\n    :multiple=\"multiple\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </AccordionRoot>\n</template>\n",
 							type: "registry:ui",
 							path: "accordion/accordion.vue"
 						},
 						{
-							content: "export { default as Accordion } from \"./accordion.vue\"\r\nexport { default as AccordionItem } from \"./accordion-item.vue\"\r\nexport { default as AccordionTrigger } from \"./accordion-trigger.vue\"\r\nexport { default as AccordionContent } from \"./accordion-content.vue\"",
+							content: "export { default as Accordion } from \"./accordion.vue\";\nexport { default as AccordionItem } from \"./accordion-item.vue\";\nexport { default as AccordionTrigger } from \"./accordion-trigger.vue\";\nexport { default as AccordionContent } from \"./accordion-content.vue\";\n",
 							type: "registry:ui",
 							path: "accordion/index.ts"
 						}
@@ -1770,11 +1955,82 @@ const PRESETS = { monochrome: {
 						}
 					]
 				},
+				{
+					name: "alert-dialog",
+					dependencies: [
+						"@sprawlify/vue",
+						"vue",
+						"@/lib/utils",
+						"@/components/ui/button"
+					],
+					files: [
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogBackdropProps as AlertDialogPrimitiveBackdropProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogBackdropProps\n   extends /* @vue-ignore */ AlertDialogPrimitiveBackdropProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogBackdropProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AlertDialogPrimitive.Backdrop\n    data-slot=\"alert-dialog-backdrop\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AlertDialogPrimitive.Backdrop>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-backdrop.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogCloseTriggerProps } from \"@sprawlify/vue/alert-dialog\";\nimport { type ButtonProps } from \"@/components/ui/button\";\n\nexport interface AlertDialogCloseProps\n  extends /* @vue-ignore */ AlertDialogCloseTriggerProps, Pick<ButtonProps, \"variant\" | \"size\"> {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  asChild,\n  variant = \"default\",\n  size = \"default\",\n  ...rest\n} = defineProps<AlertDialogCloseProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <Button :variant=\"variant\" :size=\"size\" asChild>\n    <AlertDialogPrimitive.CloseTrigger\n      data-slot=\"alert-dialog-close\"\n      :class=\"className\"\n      v-bind=\"rest\"\n      :as-child=\"asChild\"\n    >\n      <slot />\n    </AlertDialogPrimitive.CloseTrigger>\n  </Button>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-close.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogContentProps as AlertDialogPrimitiveContentProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogContentProps\n   extends /* @vue-ignore */ AlertDialogPrimitiveContentProps {\n  size?: \"default\" | \"sm\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport AlertDialogPortal from \"./alert-dialog-portal.vue\";\nimport AlertDialogBackdrop from \"./alert-dialog-backdrop.vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, size = \"default\", ...rest } = defineProps<AlertDialogContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogBackdrop />\n    <AlertDialogPrimitive.Content\n      data-slot=\"alert-dialog-content\"\n      :data-size=\"size\"\n      :class=\"className\"\n      v-bind=\"rest\"\n      :as-child=\"asChild\"\n    >\n      <slot />\n    </AlertDialogPrimitive.Content>\n  </AlertDialogPortal>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-content.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogDescriptionProps as AlertDialogPrimitiveDescriptionProps } from \"@sprawlify/vue/alert-dialog\";\nexport interface AlertDialogDescriptionProps\n   extends /* @vue-ignore */ AlertDialogPrimitiveDescriptionProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AlertDialogPrimitive.Description\n    data-slot=\"alert-dialog-description\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AlertDialogPrimitive.Description>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-description.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogFooterProps\n  extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.div\n    data-slot=\"alert-dialog-footer\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.div>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-footer.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogHeaderProps\n  extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.div\n    data-slot=\"alert-dialog-header\"\n    :class=\"className\"\n    :as-child=\"asChild\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </sprawlify.div>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-header.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogMediaProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.div\n    data-slot=\"alert-dialog-media\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.div>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-media.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nexport interface AlertDialogPortalProps {\n  to?: string | Element;\n  disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<AlertDialogPortalProps>();\n<\/script>\n\n<template>\n  <Teleport\n    data-slot=\"alert-dialog-portal\"\n    :to=\"to || 'body'\"\n    :disabled=\"disabled || false\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </Teleport>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-portal.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogTitleProps as AlertDialogPrimitiveTitleProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogTitleProps  extends /* @vue-ignore */ AlertDialogPrimitiveTitleProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AlertDialogPrimitive.Title\n    data-slot=\"alert-dialog-title\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AlertDialogPrimitive.Title>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-title.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogTriggerProps as AlertDialogPrimitiveTriggerProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogTriggerProps\n   extends /* @vue-ignore */ AlertDialogPrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <AlertDialogPrimitive.Trigger\n    data-slot=\"alert-dialog-trigger\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AlertDialogPrimitive.Trigger>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog-trigger.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { AlertDialogRootProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogProps  extends /* @vue-ignore */ AlertDialogRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\n\nconst { ...rest } = defineProps<AlertDialogProps>();\n<\/script>\n\n<template>\n  <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" v-bind=\"rest\">\n    <slot />\n  </AlertDialogPrimitive.Root>\n</template>\n",
+							type: "registry:ui",
+							path: "alert-dialog/alert-dialog.vue"
+						},
+						{
+							content: "export { default as AlertDialog } from \"./alert-dialog.vue\";\nexport { default as AlertDialogTrigger } from \"./alert-dialog-trigger.vue\";\nexport { default as AlertDialogPortal } from \"./alert-dialog-portal.vue\";\nexport { default as AlertDialogBackdrop } from \"./alert-dialog-backdrop.vue\";\nexport { default as AlertDialogContent } from \"./alert-dialog-content.vue\";\nexport { default as AlertDialogHeader } from \"./alert-dialog-header.vue\";\nexport { default as AlertDialogTitle } from \"./alert-dialog-title.vue\";\nexport { default as AlertDialogDescription } from \"./alert-dialog-description.vue\";\nexport { default as AlertDialogMedia } from \"./alert-dialog-media.vue\";\nexport { default as AlertDialogFooter } from \"./alert-dialog-footer.vue\";\nexport { default as AlertDialogClose } from \"./alert-dialog-close.vue\";\n",
+							type: "registry:ui",
+							path: "alert-dialog/index.ts"
+						}
+					]
+				},
 				{
 					name: "aspect-ratio",
 					dependencies: ["@sprawlify/vue"],
 					files: [{
-						content: "<script lang=\"ts\">\nimport type { AspectRatioRootProps } from \"@sprawlify/vue/aspect-ratio\";\n\nexport interface AspectRatioProps extends /* @vue-ignore */ AspectRatioRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/vue/aspect-ratio\";\n\nconst { asChild, ...rest } = defineProps<AspectRatioProps>();\n<\/script>\n\n<template>\n  <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" v-bind=\"rest\" :as-child=\"asChild\">\n    <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n      <slot />\n    </AspectRatioPrimitive.Content>\n  </AspectRatioPrimitive.Root>\n</template>\n",
+						content: "<script lang=\"ts\">\nimport type { AspectRatioRootProps } from \"@sprawlify/vue/aspect-ratio\";\n\nexport interface AspectRatioProps  extends /* @vue-ignore */ AspectRatioRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/vue/aspect-ratio\";\n\nconst { asChild, ...rest } = defineProps<AspectRatioProps>();\n<\/script>\n\n<template>\n  <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" v-bind=\"rest\" :as-child=\"asChild\">\n    <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\n      <slot />\n    </AspectRatioPrimitive.Content>\n  </AspectRatioPrimitive.Root>\n</template>\n",
 						type: "registry:ui",
 						path: "aspect-ratio/aspect-ratio.vue"
 					}, {
@@ -1797,7 +2053,7 @@ const PRESETS = { monochrome: {
 							path: "avatar/avatar-badge.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { AvatarFallbackProps as AvatarPrimitiveFallbackProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarFallbackProps extends /* @vue-ignore */ AvatarPrimitiveFallbackProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AvatarFallbackProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AvatarPrimitive.Fallback\n    data-slot=\"avatar-fallback\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AvatarPrimitive.Fallback>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { AvatarFallbackProps as AvatarPrimitiveFallbackProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarFallbackProps  extends /* @vue-ignore */ AvatarPrimitiveFallbackProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AvatarFallbackProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AvatarPrimitive.Fallback\n    data-slot=\"avatar-fallback\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AvatarPrimitive.Fallback>\n</template>\n",
 							type: "registry:ui",
 							path: "avatar/avatar-fallback.vue"
 						},
@@ -1812,12 +2068,12 @@ const PRESETS = { monochrome: {
 							path: "avatar/avatar-group.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { AvatarImageProps as AvatarPrimitiveImageProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarImageProps extends /* @vue-ignore */ AvatarPrimitiveImageProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AvatarImageProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <AvatarPrimitive.Image\n    data-slot=\"avatar-image\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  />\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { AvatarImageProps as AvatarPrimitiveImageProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarImageProps  extends /* @vue-ignore */ AvatarPrimitiveImageProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AvatarImageProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <AvatarPrimitive.Image\n    data-slot=\"avatar-image\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  />\n</template>\n",
 							type: "registry:ui",
 							path: "avatar/avatar-image.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { AvatarRootProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarProps extends /* @vue-ignore */ AvatarRootProps {\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, size = \"default\", ...rest } = defineProps<AvatarProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AvatarPrimitive.Root\n    data-slot=\"avatar\"\n    :data-size=\"size\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AvatarPrimitive.Root>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { AvatarRootProps } from \"@sprawlify/vue/avatar\";\n\nexport interface AvatarProps  extends /* @vue-ignore */ AvatarRootProps {\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, size = \"default\", ...rest } = defineProps<AvatarProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <AvatarPrimitive.Root\n    data-slot=\"avatar\"\n    :data-size=\"size\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </AvatarPrimitive.Root>\n</template>\n",
 							type: "registry:ui",
 							path: "avatar/avatar.vue"
 						},
@@ -1846,6 +2102,57 @@ const PRESETS = { monochrome: {
 						path: "badge/index.ts"
 					}]
 				},
+				{
+					name: "breadcrumb",
+					dependencies: [
+						"@sprawlify/vue",
+						"vue",
+						"lucide-vue-next",
+						"@/lib/utils"
+					],
+					files: [
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbEllipsisProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { MoreHorizontalIcon } from \"lucide-vue-next\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst { role = \"presentation\", \"aria-hidden\": ariaHidden = \"true\", ...rest } = defineProps<BreadcrumbEllipsisProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() => cn(\"flex h-9 w-9 items-center justify-center\", attrs.class as string))\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.span\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"ellipsis\"\r\n    data-slot=\"breadcrumb-ellipsis\"\r\n    :role=\"role\"\r\n    :aria-hidden=\"ariaHidden\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n  >\r\n    <MoreHorizontalIcon class=\"size-4\"/>\r\n    <span class=\"sr-only\">More</span>\r\n  </sprawlify.span>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-ellipsis.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbItemProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\n\r\nconst { asChild, ...rest } = defineProps<BreadcrumbItemProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() => cn(\"inline-flex items-center gap-1.5\", attrs.class as string))\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.li\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"item\"\r\n    data-slot=\"breadcrumb-item\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n    :as-child=\"asChild\"\r\n  >\r\n    <slot />\r\n  </sprawlify.li>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-item.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbLinkProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst { asChild, ...rest } = defineProps<BreadcrumbLinkProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() =>\r\n  cn(\"transition-colors hover:text-foreground\", attrs.class as string)\r\n)\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.a\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"link\"\r\n    data-slot=\"breadcrumb-link\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n    :as-child=\"asChild\"\r\n  >\r\n    <slot />\r\n  </sprawlify.a>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-link.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbListProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst { asChild, ...rest } = defineProps<BreadcrumbListProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() =>\r\n  cn(\"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\", attrs.class as string)\r\n)\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.ol\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"list\"\r\n    data-slot=\"breadcrumb-list\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n    :as-child=\"asChild\"\r\n  >\r\n    <slot />\r\n  </sprawlify.ol>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-list.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbPageProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface BreadcrumbPageProps extends PolymorphicProps {}\r\n\r\nconst { role = \"link\", \"aria-disabled\": ariaDisabled = \"true\", \"aria-current\": ariaCurrent = \"page\", asChild, ...rest } = defineProps<BreadcrumbPageProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() => cn(\"font-normal text-foreground\", attrs.class as string))\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.span\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"page\"\r\n    data-slot=\"breadcrumb-page\"\r\n    :role=\"role\"\r\n    :aria-disabled=\"ariaDisabled\"\r\n    :aria-current=\"ariaCurrent\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n    :as-child=\"asChild\"\r\n  >\r\n    <slot />\r\n  </sprawlify.span>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-page.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbSeparatorProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { ChevronRightIcon } from \"lucide-vue-next\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst { role = \"presentation\", \"aria-hidden\": ariaHidden = \"true\", asChild, ...rest } = defineProps<BreadcrumbSeparatorProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() => cn(\"[&>svg]:size-3.5\", attrs.class as string))\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.li\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"separator\"\r\n    data-slot=\"breadcrumb-separator\"\r\n    :role=\"role\"\r\n    :aria-hidden=\"ariaHidden\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n  >\r\n    <slot>\r\n      <ChevronRightIcon />\r\n    </slot>\r\n  </sprawlify.li>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb-separator.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport { type HTMLAttributes } from \"vue\";\r\n\r\nexport interface BreadcrumbProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { sprawlify } from \"@sprawlify/vue\"\r\nimport { computed, useAttrs } from \"vue\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst { role = \"navigation\", \"aria-label\": ariaLabel = \"breadcrumb\", asChild, ...rest } = defineProps<BreadcrumbProps>()\r\nconst attrs = useAttrs()\r\n\r\nconst className = computed(() => cn(attrs.class as string))\r\n<\/script>\r\n\r\n<template>\r\n  <sprawlify.nav\r\n    data-scope=\"breadcrumb\"\r\n    data-part=\"root\"\r\n    data-slot=\"breadcrumb\"\r\n    :role=\"role\"\r\n    :aria-label=\"ariaLabel\"\r\n    :class=\"className\"\r\n    v-bind=\"rest\"\r\n    :as-child=\"asChild\"\r\n  >\r\n    <slot />\r\n  </sprawlify.nav>\r\n</template>",
+							type: "registry:ui",
+							path: "breadcrumb/breadcrumb.vue"
+						},
+						{
+							content: "export { default as Breadcrumb } from \"./breadcrumb.vue\"\r\nexport { default as BreadcrumbList } from \"./breadcrumb-list.vue\"\r\nexport { default as BreadcrumbItem } from \"./breadcrumb-item.vue\"\r\nexport { default as BreadcrumbLink } from \"./breadcrumb-link.vue\"\r\nexport { default as BreadcrumbPage } from \"./breadcrumb-page.vue\"\r\nexport { default as BreadcrumbSeparator } from \"./breadcrumb-separator.vue\"\r\nexport { default as BreadcrumbEllipsis } from \"./breadcrumb-ellipsis.vue\"",
+							type: "registry:ui",
+							path: "breadcrumb/index.ts"
+						}
+					]
+				},
 				{
 					name: "button",
 					dependencies: [
@@ -1875,7 +2182,7 @@ const PRESETS = { monochrome: {
 					],
 					files: [
 						{
-							content: "<script lang=\"ts\">\nimport type { SeparatorProps } from \"@/components/ui/separator\";\n\nexport interface ButtonGroupSeparatorProps extends /* @vue-ignore */ SeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"vertical\", ...rest } = defineProps<ButtonGroupSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <Separator\n    data-scope=\"button-group\"\n    data-part=\"separator\"\n    data-slot=\"button-group-separator\"\n    :orientation=\"orientation\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { SeparatorProps } from \"@/components/ui/separator\";\n\nexport interface ButtonGroupSeparatorProps  extends /* @vue-ignore */ SeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"vertical\", ...rest } = defineProps<ButtonGroupSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <Separator\n    data-scope=\"button-group\"\n    data-part=\"separator\"\n    data-slot=\"button-group-separator\"\n    :orientation=\"orientation\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </Separator>\n</template>\n",
 							type: "registry:ui",
 							path: "button-group/button-group-separator.vue"
 						},
@@ -1956,7 +2263,7 @@ const PRESETS = { monochrome: {
 						"lucide-vue-next"
 					],
 					files: [{
-						content: "<script lang=\"ts\">\nimport type { CheckboxRootProps } from \"@sprawlify/vue/checkbox\";\n\nexport interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/vue/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { ...rest } = defineProps<CheckboxProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <CheckboxPrimitive.Root data-slot=\"checkbox\" :class=\"className\" v-bind=\"rest\">\n    <CheckboxPrimitive.Indicator\n      data-slot=\"checkbox-indicator\"\n      class=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n    >\n      <CheckIcon />\n    </CheckboxPrimitive.Indicator>\n    <CheckboxPrimitive.HiddenInput />\n  </CheckboxPrimitive.Root>\n</template>\n",
+						content: "<script lang=\"ts\">\nimport type { CheckboxRootProps } from \"@sprawlify/vue/checkbox\";\n\nexport interface CheckboxProps  extends /* @vue-ignore */ CheckboxRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/vue/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { ...rest } = defineProps<CheckboxProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <CheckboxPrimitive.Root data-slot=\"checkbox\" :class=\"className\" v-bind=\"rest\">\n    <CheckboxPrimitive.Indicator\n      data-slot=\"checkbox-indicator\"\n      class=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n    >\n      <CheckIcon />\n    </CheckboxPrimitive.Indicator>\n    <CheckboxPrimitive.HiddenInput />\n  </CheckboxPrimitive.Root>\n</template>\n",
 						type: "registry:ui",
 						path: "checkbox/checkbox.vue"
 					}, {
@@ -1974,17 +2281,17 @@ const PRESETS = { monochrome: {
 					],
 					files: [
 						{
-							content: "<script lang=\"ts\">\nimport type { CollapsibleContentProps as CollapsiblePrimitiveContentProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleContentProps\n  extends /* @vue-ignore */ CollapsiblePrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </CollapsiblePrimitive.Content>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { CollapsibleContentProps as CollapsiblePrimitiveContentProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleContentProps\n   extends /* @vue-ignore */ CollapsiblePrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </CollapsiblePrimitive.Content>\n</template>\n",
 							type: "registry:ui",
 							path: "collapsible/collapsible-content.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { CollapsibleTriggerProps as CollapsiblePrimitiveTriggerProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleTriggerProps\n  extends /* @vue-ignore */ CollapsiblePrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </CollapsiblePrimitive.Trigger>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { CollapsibleTriggerProps as CollapsiblePrimitiveTriggerProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleTriggerProps\n   extends /* @vue-ignore */ CollapsiblePrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </CollapsiblePrimitive.Trigger>\n</template>\n",
 							type: "registry:ui",
 							path: "collapsible/collapsible-trigger.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { CollapsibleRootProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleProps extends /* @vue-ignore */ CollapsibleRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <CollapsiblePrimitive.Root data-slot=\"collapsible\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </CollapsiblePrimitive.Root>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { CollapsibleRootProps } from \"@sprawlify/vue/collapsible\";\n\nexport interface CollapsibleProps  extends /* @vue-ignore */ CollapsibleRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<CollapsibleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <CollapsiblePrimitive.Root data-slot=\"collapsible\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </CollapsiblePrimitive.Root>\n</template>\n",
 							type: "registry:ui",
 							path: "collapsible/collapsible.vue"
 						},
@@ -2005,27 +2312,27 @@ const PRESETS = { monochrome: {
 					],
 					files: [
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuCheckboxItemProps\n  extends /* @vue-ignore */ DropdownMenuCheckboxItemPrimitiveProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { inset, value, checked, ...rest } = defineProps<DropdownMenuCheckboxItemProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-[inset=true]:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.CheckboxItem\n    data-slot=\"dropdown-menu-checkbox-item\"\n    :data-inset=\"inset\"\n    :value=\"value\"\n    :checked=\"checked\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <span\n      class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n      data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    >\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuPrimitive.CheckboxItem>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuCheckboxItemProps\n   extends /* @vue-ignore */ DropdownMenuCheckboxItemPrimitiveProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { inset, value, checked, ...rest } = defineProps<DropdownMenuCheckboxItemProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-[inset=true]:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.CheckboxItem\n    data-slot=\"dropdown-menu-checkbox-item\"\n    :data-inset=\"inset\"\n    :value=\"value\"\n    :checked=\"checked\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <span\n      class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n      data-slot=\"dropdown-menu-checkbox-item-indicator\"\n    >\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuPrimitive.CheckboxItem>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-checkbox-item.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuContentProps\n  extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuContentProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <Teleport to=\"body\">\n    <DropdownMenuPrimitive.Positioner>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        :class=\"className\"\n        v-bind=\"rest\"\n        :as-child=\"asChild\"\n      >\n        <slot />\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Positioner>\n  </Teleport>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuContentProps\n   extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuContentProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-(--z-index) max-h-(--available-height) w-(--reference-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <Teleport to=\"body\">\n    <DropdownMenuPrimitive.Positioner>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        :class=\"className\"\n        v-bind=\"rest\"\n        :as-child=\"asChild\"\n      >\n        <slot />\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Positioner>\n  </Teleport>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-content.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuGroupProps extends /* @vue-ignore */ DropdownMenuItemGroupProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.ItemGroup\n    data-slot=\"dropdown-menu-group\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.ItemGroup>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuGroupProps  extends /* @vue-ignore */ DropdownMenuItemGroupProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.ItemGroup\n    data-slot=\"dropdown-menu-group\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.ItemGroup>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-group.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuItemProps as DropdownMenuPrimitiveItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuItemProps extends /* @vue-ignore */ DropdownMenuPrimitiveItemProps {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { inset, variant = \"default\", asChild, ...rest } = defineProps<DropdownMenuItemProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground  data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Item\n    data-slot=\"dropdown-menu-item\"\n    :data-inset=\"inset\"\n    :data-variant=\"variant\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Item>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuItemProps as DropdownMenuPrimitiveItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuItemProps  extends /* @vue-ignore */ DropdownMenuPrimitiveItemProps {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { inset, variant = \"default\", asChild, ...rest } = defineProps<DropdownMenuItemProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"data-[variant=destructive]:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground  data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:data-highlighted:*:[svg]:text-destructive not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Item\n    data-slot=\"dropdown-menu-item\"\n    :data-inset=\"inset\"\n    :data-variant=\"variant\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Item>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-item.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupLabelProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuLabelProps extends /* @vue-ignore */ DropdownMenuItemGroupLabelProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { inset, asChild, ...rest } = defineProps<DropdownMenuLabelProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset=true]:pl-7\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.ItemGroupLabel\n    data-slot=\"dropdown-menu-label\"\n    :data-inset=\"inset\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.ItemGroupLabel>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuItemGroupLabelProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuLabelProps  extends /* @vue-ignore */ DropdownMenuItemGroupLabelProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { inset, asChild, ...rest } = defineProps<DropdownMenuLabelProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset=true]:pl-7\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.ItemGroupLabel\n    data-slot=\"dropdown-menu-label\"\n    :data-inset=\"inset\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.ItemGroupLabel>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-label.vue"
 						},
@@ -2035,17 +2342,17 @@ const PRESETS = { monochrome: {
 							path: "dropdown-menu/dropdown-menu-portal.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioGroupProps\n  extends /* @vue-ignore */ DropdownMenuRadioItemGroupProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuRadioGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.RadioItemGroup\n    data-slot=\"dropdown-menu-radio-group\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.RadioItemGroup>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioGroupProps\n   extends /* @vue-ignore */ DropdownMenuRadioItemGroupProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuRadioGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.RadioItemGroup\n    data-slot=\"dropdown-menu-radio-group\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.RadioItemGroup>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-radio-group.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemProps as DropdownMenuPrimitiveRadioItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioItemProps\n  extends /* @vue-ignore */ DropdownMenuPrimitiveRadioItemProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { inset, value, ...rest } = defineProps<DropdownMenuRadioItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.RadioItem\n    data-slot=\"dropdown-menu-radio-item\"\n    :data-inset=\"inset\"\n    :value=\"value\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <span\n      class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n      data-slot=\"dropdown-menu-radio-item-indicator\"\n    >\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuPrimitive.RadioItem>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuRadioItemProps as DropdownMenuPrimitiveRadioItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuRadioItemProps\n   extends /* @vue-ignore */ DropdownMenuPrimitiveRadioItemProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-vue-next\";\n\nconst { inset, value, ...rest } = defineProps<DropdownMenuRadioItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.RadioItem\n    data-slot=\"dropdown-menu-radio-item\"\n    :data-inset=\"inset\"\n    :value=\"value\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <span\n      class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\n      data-slot=\"dropdown-menu-radio-item-indicator\"\n    >\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuPrimitive.RadioItem>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-radio-item.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuSeparatorProps as DropdownMenuPrimitiveSeparatorProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSeparatorProps\n  extends /* @vue-ignore */ DropdownMenuPrimitiveSeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSeparatorProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"bg-border -mx-1 my-1 h-px\", attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Separator\n    data-slot=\"dropdown-menu-separator\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  />\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuSeparatorProps as DropdownMenuPrimitiveSeparatorProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSeparatorProps\n   extends /* @vue-ignore */ DropdownMenuPrimitiveSeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSeparatorProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"bg-border -mx-1 my-1 h-px\", attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Separator\n    data-slot=\"dropdown-menu-separator\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  />\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-separator.vue"
 						},
@@ -2055,27 +2362,27 @@ const PRESETS = { monochrome: {
 							path: "dropdown-menu/dropdown-menu-shortcut.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubContentProps\n  extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSubContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <Teleport to=\"body\">\n    <DropdownMenuPrimitive.Positioner>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-sub-content\"\n        :class=\"className\"\n        v-bind=\"rest\"\n        :as-child=\"asChild\"\n      >\n        <slot />\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Positioner>\n  </Teleport>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubContentProps\n   extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSubContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 origin-(--transform-origin) overflow-hidden\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <Teleport to=\"body\">\n    <DropdownMenuPrimitive.Positioner>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-sub-content\"\n        :class=\"className\"\n        v-bind=\"rest\"\n        :as-child=\"asChild\"\n      >\n        <slot />\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Positioner>\n  </Teleport>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-sub-content.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubTriggerProps\n  extends /* @vue-ignore */ DropdownMenuTriggerItemProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRightIcon } from \"lucide-vue-next\";\n\nconst { inset, ...rest } = defineProps<DropdownMenuSubTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.TriggerItem\n    data-slot=\"dropdown-menu-sub-trigger\"\n    :data-inset=\"inset\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"cn-rtl-flip ml-auto\" />\n  </DropdownMenuPrimitive.TriggerItem>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerItemProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubTriggerProps\n   extends /* @vue-ignore */ DropdownMenuTriggerItemProps {\n  inset?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRightIcon } from \"lucide-vue-next\";\n\nconst { inset, ...rest } = defineProps<DropdownMenuSubTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset=true]:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.TriggerItem\n    data-slot=\"dropdown-menu-sub-trigger\"\n    :data-inset=\"inset\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"cn-rtl-flip ml-auto\" />\n  </DropdownMenuPrimitive.TriggerItem>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-sub-trigger.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubProps extends /* @vue-ignore */ DropdownMenuRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSubProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Root\n    data-slot=\"dropdown-menu-sub\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Root>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuSubProps  extends /* @vue-ignore */ DropdownMenuRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuSubProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Root\n    data-slot=\"dropdown-menu-sub\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Root>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-sub.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerProps as DropdownMenuPrimitiveTriggerProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuTriggerProps\n  extends /* @vue-ignore */ DropdownMenuPrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Trigger\n    data-slot=\"dropdown-menu-trigger\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Trigger>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuTriggerProps as DropdownMenuPrimitiveTriggerProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuTriggerProps\n   extends /* @vue-ignore */ DropdownMenuPrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Trigger\n    data-slot=\"dropdown-menu-trigger\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Trigger>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu-trigger.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuProps extends /* @vue-ignore */ DropdownMenuRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, positioning, ...rest } = defineProps<DropdownMenuProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Root\n    data-slot=\"dropdown-menu\"\n    :positioning=\"{ offset: { mainAxis: 4 }, ...positioning }\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Root>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\n\nexport interface DropdownMenuProps  extends /* @vue-ignore */ DropdownMenuRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, positioning, ...rest } = defineProps<DropdownMenuProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <DropdownMenuPrimitive.Root\n    data-slot=\"dropdown-menu\"\n    :positioning=\"{ offset: { mainAxis: 4 }, ...positioning }\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DropdownMenuPrimitive.Root>\n</template>\n",
 							type: "registry:ui",
 							path: "dropdown-menu/dropdown-menu.vue"
 						},
@@ -2389,17 +2696,17 @@ const PRESETS = { monochrome: {
 							path: "native-select/index.ts"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { OptgroupHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptGroupProps extends /* @vue-ignore */ OptgroupHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<NativeSelectOptGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <optgroup\n    data-scope=\"native-select\"\n    data-part=\"optgroup\"\n    data-slot=\"native-select-optgroup\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </optgroup>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { OptgroupHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptGroupProps  extends /* @vue-ignore */ OptgroupHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<NativeSelectOptGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <optgroup\n    data-scope=\"native-select\"\n    data-part=\"optgroup\"\n    data-slot=\"native-select-optgroup\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </optgroup>\n</template>\n",
 							type: "registry:ui",
 							path: "native-select/native-select-optgroup.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { OptionHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptionProps extends /* @vue-ignore */ OptionHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<NativeSelectOptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <option\n    data-scope=\"native-select\"\n    data-part=\"option\"\n    data-slot=\"native-select-option\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </option>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { OptionHTMLAttributes } from \"vue\";\n\nexport interface NativeSelectOptionProps  extends /* @vue-ignore */ OptionHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<NativeSelectOptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <option\n    data-scope=\"native-select\"\n    data-part=\"option\"\n    data-slot=\"native-select-option\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </option>\n</template>\n",
 							type: "registry:ui",
 							path: "native-select/native-select-option.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { SelectHTMLAttributes } from \"vue\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\n\nexport interface NativeSelectProps extends /* @vue-ignore */ Omit<SelectHTMLAttributes, \"size\"> {\n  size?: \"sm\" | \"default\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { size = \"default\", ...rest } = defineProps<NativeSelectProps>();\nconst attrs = useAttrs();\n\nconst wrapperClassName = computed(() =>\n  cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", attrs.class as string),\n);\n\nconst selectClassName = computed(() =>\n  cn(\n    \"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\",\n  ),\n);\n<\/script>\n\n<template>\n  <div\n    :class=\"wrapperClassName\"\n    data-scope=\"native-select\"\n    data-part=\"root\"\n    data-slot=\"native-select-root\"\n    :data-size=\"size\"\n  >\n    <select data-slot=\"native-select\" :data-size=\"size\" :class=\"selectClassName\" v-bind=\"rest\">\n      <slot />\n    </select>\n    <ChevronDownIcon\n      class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n      aria-hidden=\"true\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { SelectHTMLAttributes } from \"vue\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\n\nexport interface NativeSelectProps  extends /* @vue-ignore */ Omit<SelectHTMLAttributes, \"size\"> {\n  size?: \"sm\" | \"default\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { size = \"default\", ...rest } = defineProps<NativeSelectProps>();\nconst attrs = useAttrs();\n\nconst wrapperClassName = computed(() =>\n  cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", attrs.class as string),\n);\n\nconst selectClassName = computed(() =>\n  cn(\n    \"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\",\n  ),\n);\n<\/script>\n\n<template>\n  <div\n    :class=\"wrapperClassName\"\n    data-scope=\"native-select\"\n    data-part=\"root\"\n    data-slot=\"native-select-root\"\n    :data-size=\"size\"\n  >\n    <select data-slot=\"native-select\" :data-size=\"size\" :class=\"selectClassName\" v-bind=\"rest\">\n      <slot />\n    </select>\n    <ChevronDownIcon\n      class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n      aria-hidden=\"true\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n</template>\n",
 							type: "registry:ui",
 							path: "native-select/native-select.vue"
 						}
@@ -2419,12 +2726,12 @@ const PRESETS = { monochrome: {
 							path: "scroll-area/index.ts"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { ScrollAreaRootProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollAreaProps extends /* @vue-ignore */ ScrollAreaRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport ScrollBar from \"./scroll-bar.vue\";\n\nconst { ...rest } = defineProps<ScrollAreaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"relative\", attrs.class as string));\n<\/script>\n\n<template>\n  <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" :class=\"className\" v-bind=\"rest\">\n    <ScrollAreaPrimitive.Viewport\n      data-slot=\"scroll-area-viewport\"\n      class=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n    >\n      <slot />\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { ScrollAreaRootProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollAreaProps  extends /* @vue-ignore */ ScrollAreaRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport ScrollBar from \"./scroll-bar.vue\";\n\nconst { ...rest } = defineProps<ScrollAreaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"relative\", attrs.class as string));\n<\/script>\n\n<template>\n  <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" :class=\"className\" v-bind=\"rest\">\n    <ScrollAreaPrimitive.Viewport\n      data-slot=\"scroll-area-viewport\"\n      class=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 scrollbar-none\"\n    >\n      <slot />\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n</template>\n",
 							type: "registry:ui",
 							path: "scroll-area/scroll-area.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { ScrollAreaScrollbarProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollBarProps extends /* @vue-ignore */ ScrollAreaScrollbarProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"vertical\", ...rest } = defineProps<ScrollBarProps>();\n\nconst className = cn(\n  \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n  rest.class as string,\n);\n<\/script>\n\n<template>\n  <ScrollAreaPrimitive.Scrollbar\n    data-slot=\"scroll-area-scrollbar\"\n    :data-orientation=\"orientation || 'vertical'\"\n    :orientation=\"orientation\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <ScrollAreaPrimitive.Thumb\n      data-slot=\"scroll-area-thumb\"\n      class=\"rounded-full bg-border relative flex-1\"\n    />\n  </ScrollAreaPrimitive.Scrollbar>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { ScrollAreaScrollbarProps } from \"@sprawlify/vue/scroll-area\";\n\nexport interface ScrollBarProps  extends /* @vue-ignore */ ScrollAreaScrollbarProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"vertical\", ...rest } = defineProps<ScrollBarProps>();\n\nconst className = cn(\n  \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent flex touch-none p-px transition-colors select-none\",\n  rest.class as string,\n);\n<\/script>\n\n<template>\n  <ScrollAreaPrimitive.Scrollbar\n    data-slot=\"scroll-area-scrollbar\"\n    :data-orientation=\"orientation || 'vertical'\"\n    :orientation=\"orientation\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <ScrollAreaPrimitive.Thumb\n      data-slot=\"scroll-area-thumb\"\n      class=\"rounded-full bg-border relative flex-1\"\n    />\n  </ScrollAreaPrimitive.Scrollbar>\n</template>\n",
 							type: "registry:ui",
 							path: "scroll-area/scroll-bar.vue"
 						}
@@ -2442,7 +2749,7 @@ const PRESETS = { monochrome: {
 						type: "registry:ui",
 						path: "separator/index.ts"
 					}, {
-						content: "<script lang=\"ts\">\nimport type { SeparatorRootProps } from \"@sprawlify/vue/separator\";\n\nexport interface SeparatorProps extends /* @vue-ignore */ SeparatorRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/vue/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  orientation = \"horizontal\",\n  decorative = true,\n  asChild,\n  ...rest\n} = defineProps<SeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <SeparatorPrimitive.Root\n    data-slot=\"separator\"\n    :decorative=\"decorative\"\n    :orientation=\"orientation\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </SeparatorPrimitive.Root>\n</template>\n",
+						content: "<script lang=\"ts\">\nimport type { SeparatorRootProps } from \"@sprawlify/vue/separator\";\n\nexport interface SeparatorProps  extends /* @vue-ignore */ SeparatorRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/vue/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  orientation = \"horizontal\",\n  decorative = true,\n  asChild,\n  ...rest\n} = defineProps<SeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <SeparatorPrimitive.Root\n    data-slot=\"separator\"\n    :decorative=\"decorative\"\n    :orientation=\"orientation\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </SeparatorPrimitive.Root>\n</template>\n",
 						type: "registry:ui",
 						path: "separator/separator.vue"
 					}]
@@ -2462,22 +2769,22 @@ const PRESETS = { monochrome: {
 							path: "tabs/index.ts"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { TabContentProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsContentProps extends /* @vue-ignore */ TabContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, ...rest } = defineProps<TabsContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-sm flex-1 outline-none\", attrs.class as string));\n<\/script>\n\n<template>\n  <TabsPrimitive.Content data-slot=\"tabs-content\" :class=\"className\" :value=\"value\" v-bind=\"rest\">\n    <slot />\n  </TabsPrimitive.Content>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { TabContentProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsContentProps  extends /* @vue-ignore */ TabContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, ...rest } = defineProps<TabsContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-sm flex-1 outline-none\", attrs.class as string));\n<\/script>\n\n<template>\n  <TabsPrimitive.Content data-slot=\"tabs-content\" :class=\"className\" :value=\"value\" v-bind=\"rest\">\n    <slot />\n  </TabsPrimitive.Content>\n</template>\n",
 							type: "registry:ui",
 							path: "tabs/tabs-content.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { TabListProps } from \"@sprawlify/vue/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface TabsListProps extends /* @vue-ignore */ TabListProps {\n  variant?: VariantProps<typeof tabsListVariants>[\"variant\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { variant = \"default\", ...rest } = defineProps<TabsListProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(tabsListVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n  <TabsPrimitive.List\n    data-slot=\"tabs-list\"\n    :data-variant=\"variant\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </TabsPrimitive.List>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { TabListProps } from \"@sprawlify/vue/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface TabsListProps  extends /* @vue-ignore */ TabListProps {\n  variant?: VariantProps<typeof tabsListVariants>[\"variant\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { variant = \"default\", ...rest } = defineProps<TabsListProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(tabsListVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n  <TabsPrimitive.List\n    data-slot=\"tabs-list\"\n    :data-variant=\"variant\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot />\n  </TabsPrimitive.List>\n</template>\n",
 							type: "registry:ui",
 							path: "tabs/tabs-list.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { TabTriggerProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsTriggerProps extends /* @vue-ignore */ TabTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, ...rest } = defineProps<TabsTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*=size-])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n    \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n    \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" :value=\"value\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </TabsPrimitive.Trigger>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { TabTriggerProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsTriggerProps  extends /* @vue-ignore */ TabTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, ...rest } = defineProps<TabsTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*=size-])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent\",\n    \"data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground\",\n    \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" :value=\"value\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </TabsPrimitive.Trigger>\n</template>\n",
 							type: "registry:ui",
 							path: "tabs/tabs-trigger.vue"
 						},
 						{
-							content: "<script lang=\"ts\">\nimport type { TabsRootProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsProps extends /* @vue-ignore */ TabsRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"horizontal\", ...rest } = defineProps<TabsProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <TabsPrimitive.Root data-slot=\"tabs\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </TabsPrimitive.Root>\n</template>\n",
+							content: "<script lang=\"ts\">\nimport type { TabsRootProps } from \"@sprawlify/vue/tabs\";\n\nexport interface TabsProps  extends /* @vue-ignore */ TabsRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nconst { orientation = \"horizontal\", ...rest } = defineProps<TabsProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <TabsPrimitive.Root data-slot=\"tabs\" :class=\"className\" v-bind=\"rest\">\n    <slot />\n  </TabsPrimitive.Root>\n</template>\n",
 							type: "registry:ui",
 							path: "tabs/tabs.vue"
 						}
@@ -2638,7 +2945,7 @@ async function ensureOverwriteAllowed(options) {
 	const { overwrite } = await prompts({
 		type: "confirm",
 		name: "overwrite",
-		message: `A ${highlighter.info("components.json")} file already exists. Would you like to overwrite it?`,
+		message: `An existing project was found. Do you want to overwrite the existing configuration and components?`,
 		initial: false
 	});
 	if (!overwrite) {
@@ -2968,7 +3275,10 @@ dist-ssr
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }`
@@ -3146,7 +3456,10 @@ dist-ssr
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }`
@@ -3315,7 +3628,10 @@ export default {}`
     "noEmit": true,
     "allowJs": true,
     "checkJs": true,
-    "moduleDetection": "force"
+    "moduleDetection": "force",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }`
@@ -3477,7 +3793,10 @@ dist-ssr
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }`
@@ -3716,7 +4035,7 @@ async function doneInit(options) {
 	await sleep(200);
 }
 //#endregion
-//#region src/commands/init.ts
+//#region src/commands/init/index.ts
 const init = new Command().name("init").alias("create").description("initialize your project and install dependencies").argument("[components...]", "names, url or local path to component").option("-p, --preset <preset>", "the preset to use. (monochrome, clay)").option("-f, --framework <framework>", "the framework to use. (react, solid, svelte, vue)").option("--metaframework <metaframework>", "the metaframework to use. (next, react-router, nuxt, sveltekit)").option("-y, --yes", "skip confirmation prompt.", true).option("-d, --defaults", "use default configuration: --preset=monochrome --framework=react --metaframework=none", false).option("-o, --override", "override existing configuration.", false).option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", process.cwd()).option("-n, --name <name>", "the name for the new project.").option("-s, --silent", "mute output.", false).option("--reinstall", "re-install existing UI components.").option("--no-reinstall", "do not re-install existing UI components.").action(async (components, opts) => {
 	try {
 		const options = parseInitOptions(opts);