sprawlify 0.1.9 → 0.1.10

package/dist/index.mjs

@@ -10,7 +10,7 @@ import { faker } from "@faker-js/faker";
 import { cosmiconfig } from "cosmiconfig";
 import { createMatchPath, loadConfig } from "tsconfig-paths";
 //#region package.json
-var version = "0.1.9";
+var version = "0.1.10";
 //#endregion
 //#region src/utils/file-helper.ts
 const FILE_BACKUP_SUFFIX = ".bak";
@@ -192,8 +192,8 @@ const PRESETS = { monochrome: {
 		react: {
 			dependencies: {
 				react: "^18.2.0",
-				"@sprawlify/react": "^0.0.108",
-				"lucide-react": "^0.577.0",
+				"@sprawlify/react": "^0.1.9",
+				"lucide-react": "^1.7.0",
 				"class-variance-authority": "^0.7.1",
 				clsx: "^2.1.1",
 				"tailwind-merge": "^3.5.0"
@@ -213,7 +213,7 @@ const PRESETS = { monochrome: {
 						"lucide-react"
 					],
 					files: [{
-						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",
+						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 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=\"data-[state=open]:animate-accordion-down 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"
 					}]
@@ -360,6 +360,21 @@ const PRESETS = { monochrome: {
 						path: "collapsible.tsx"
 					}]
 				},
+				{
+					name: "dialog",
+					dependencies: [
+						"react",
+						"lucide-react",
+						"@sprawlify/react",
+						"@/lib/utils",
+						"@/components/ui/button"
+					],
+					files: [{
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/react/dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.CloseTrigger>) {\n  return <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.CloseTrigger>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n  return (\n    <sprawlify.div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <sprawlify.div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.CloseTrigger asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.CloseTrigger>\n      )}\n    </sprawlify.div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"cn-font-heading text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
+						type: "registry:ui",
+						path: "dialog.tsx"
+					}]
+				},
 				{
 					name: "dropdown-menu",
 					dependencies: [
@@ -509,6 +524,19 @@ const PRESETS = { monochrome: {
 						path: "separator.tsx"
 					}]
 				},
+				{
+					name: "table",
+					dependencies: [
+						"react",
+						"@/lib/utils",
+						"@sprawlify/react"
+					],
+					files: [{
+						content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Table({ className, ...props }: React.ComponentProps<typeof sprawlify.table>) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <sprawlify.table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.thead>) {\n  return (\n    <sprawlify.thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<typeof sprawlify.tbody>) {\n  return (\n    <sprawlify.tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.tfoot>) {\n  return (\n    <sprawlify.tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<typeof sprawlify.tr>) {\n  return (\n    <sprawlify.tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<typeof sprawlify.th>) {\n  return (\n    <sprawlify.th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<typeof sprawlify.td>) {\n  return (\n    <sprawlify.td\n      data-slot=\"table-cell\"\n      className={cn(\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<typeof sprawlify.caption>) {\n  return (\n    <sprawlify.caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n",
+						type: "registry:ui",
+						path: "table.tsx"
+					}]
+				},
 				{
 					name: "tabs",
 					dependencies: [
@@ -536,6 +564,19 @@ const PRESETS = { monochrome: {
 						path: "textarea.tsx"
 					}]
 				},
+				{
+					name: "tooltip",
+					dependencies: [
+						"react",
+						"@sprawlify/react",
+						"@/lib/utils"
+					],
+					files: [{
+						content: "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/react/tooltip\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Portal } from \"@sprawlify/react/portal\"\r\n\r\nfunction TooltipProvider({\r\n  ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.RootProvider>) {\r\n  return (\r\n    <TooltipPrimitive.RootProvider\r\n      data-slot=\"tooltip-provider\"\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction Tooltip({\r\n  ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\r\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\r\n}\r\n\r\nfunction TooltipTrigger({\r\n  ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\r\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\r\n}\r\n\r\nfunction TooltipContent({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\r\n  return (\r\n    <Portal>\r\n      <TooltipPrimitive.Positioner>\r\n        <TooltipPrimitive.Content\r\n          data-slot=\"tooltip-content\"\r\n          className={cn(\r\n            \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          {children}\r\n          <TooltipPrimitive.Arrow className=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n            <TooltipPrimitive.ArrowTip className=\"rounded-xs\" />\r\n          </TooltipPrimitive.Arrow>\r\n        </TooltipPrimitive.Content>\r\n      </TooltipPrimitive.Positioner>\r\n\r\n    </Portal>\r\n  )\r\n}\r\n\r\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\r\n",
+						type: "registry:ui",
+						path: "tooltip.tsx"
+					}]
+				},
 				{
 					name: "utils",
 					dependencies: ["clsx", "tailwind-merge"],
@@ -549,8 +590,8 @@ const PRESETS = { monochrome: {
 		},
 		solid: {
 			dependencies: {
-				"@sprawlify/solid": "^0.0.108",
-				"lucide-solid": "^0.577.0",
+				"@sprawlify/solid": "^0.1.9",
+				"lucide-solid": "^1.7.0",
 				"solid-js": "^1.8.0",
 				"class-variance-authority": "^0.7.1",
 				clsx: "^2.1.1",
@@ -571,7 +612,7 @@ const PRESETS = { monochrome: {
 						"solid-js"
 					],
 					files: [{
-						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",
+						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 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=\"data-[state=open]:animate-accordion-down 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"
 					}]
@@ -720,6 +761,22 @@ const PRESETS = { monochrome: {
 						path: "collapsible.tsx"
 					}]
 				},
+				{
+					name: "dialog",
+					dependencies: [
+						"lucide-solid",
+						"@/lib/utils",
+						"@/components/ui/button",
+						"@sprawlify/solid",
+						"solid-js",
+						"solid-js/web"
+					],
+					files: [{
+						content: "import { XIcon } from \"lucide-solid\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/solid/dialog\";\nimport type { ComponentProps } from \"solid-js\";\nimport { Show, splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { sprawlify } from \"@sprawlify/solid\";\n\nfunction Dialog(props: ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal(props: ComponentProps<typeof Portal>) {\n  return <Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose(props: ComponentProps<typeof DialogPrimitive.CloseTrigger>) {\n  return <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay(props: ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      class={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction DialogContent(\n  props: ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean },\n) {\n  const [local, others] = splitProps(props, [\"class\", \"children\", \"showCloseButton\"]);\n  const showCloseButton = () => local.showCloseButton ?? true;\n\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        class={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          local.class,\n        )}\n        {...others}\n      >\n        {local.children}\n        <Show when={showCloseButton()}>\n          <DialogPrimitive.CloseTrigger\n            data-slot=\"dialog-close\"\n            asChild={(props) => (\n              <Button variant=\"ghost\" class=\"absolute top-2 right-2\" size=\"icon-sm\" {...props()}>\n                <XIcon />\n                <span class=\"sr-only\">Close</span>\n              </Button>\n            )}\n          />\n        </Show>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader(props: ComponentProps<\"div\">) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.div\n      data-slot=\"dialog-header\"\n      class={cn(\"flex flex-col gap-2\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction DialogFooter(props: ComponentProps<typeof sprawlify.div> & { showCloseButton?: boolean }) {\n  const [local, others] = splitProps(props, [\"class\", \"showCloseButton\", \"children\"]);\n  const showCloseButton = () => local.showCloseButton ?? false;\n\n  return (\n    <sprawlify.div\n      data-slot=\"dialog-footer\"\n      class={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        local.class,\n      )}\n      {...others}\n    >\n      {local.children}\n      {showCloseButton() && (\n        <DialogPrimitive.CloseTrigger\n          asChild={(props) => (\n            <Button variant=\"outline\" {...props()}>\n              Close\n            </Button>\n          )}\n        />\n      )}\n    </sprawlify.div>\n  );\n}\n\nfunction DialogTitle(props: ComponentProps<typeof DialogPrimitive.Title>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      class={cn(\"cn-font-heading text-base leading-none font-medium\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction DialogDescription(props: ComponentProps<typeof DialogPrimitive.Description>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      class={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
+						type: "registry:ui",
+						path: "dialog.tsx"
+					}]
+				},
 				{
 					name: "dropdown-menu",
 					dependencies: [
@@ -876,6 +933,19 @@ const PRESETS = { monochrome: {
 						path: "separator.tsx"
 					}]
 				},
+				{
+					name: "table",
+					dependencies: [
+						"@/lib/utils",
+						"@sprawlify/solid",
+						"solid-js"
+					],
+					files: [{
+						content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\n\nfunction Table(props: ComponentProps<typeof sprawlify.table>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <div data-slot=\"table-container\" class=\"relative w-full overflow-x-auto\">\n      <sprawlify.table\n        data-slot=\"table\"\n        class={cn(\"w-full caption-bottom text-sm\", local.class)}\n        {...others}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader(props: ComponentProps<typeof sprawlify.thead>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.thead\n      data-slot=\"table-header\"\n      class={cn(\"[&_tr]:border-b\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction TableBody(props: ComponentProps<typeof sprawlify.tbody>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.tbody\n      data-slot=\"table-body\"\n      class={cn(\"[&_tr:last-child]:border-0\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction TableFooter(props: ComponentProps<typeof sprawlify.tfoot>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.tfoot\n      data-slot=\"table-footer\"\n      class={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction TableRow(props: ComponentProps<typeof sprawlify.tr>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.tr\n      data-slot=\"table-row\"\n      class={cn(\n        \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction TableHead(props: ComponentProps<typeof sprawlify.th>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.th\n      data-slot=\"table-head\"\n      class={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        local.class,\n      )}\n      {...others}\n    />\n  );\n}\n\nfunction TableCell(props: ComponentProps<typeof sprawlify.td>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.td\n      data-slot=\"table-cell\"\n      class={cn(\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\", local.class)}\n      {...others}\n    />\n  );\n}\n\nfunction TableCaption(props: ComponentProps<typeof sprawlify.caption>) {\n  const [local, others] = splitProps(props, [\"class\"]);\n\n  return (\n    <sprawlify.caption\n      data-slot=\"table-caption\"\n      class={cn(\"mt-4 text-sm text-muted-foreground\", local.class)}\n      {...others}\n    />\n  );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n",
+						type: "registry:ui",
+						path: "table.tsx"
+					}]
+				},
 				{
 					name: "tabs",
 					dependencies: [
@@ -903,6 +973,20 @@ const PRESETS = { monochrome: {
 						path: "textarea.tsx"
 					}]
 				},
+				{
+					name: "tooltip",
+					dependencies: [
+						"@sprawlify/solid",
+						"@/lib/utils",
+						"solid-js/web",
+						"solid-js"
+					],
+					files: [{
+						content: "import { Tooltip as TooltipPrimitive } from \"@sprawlify/solid/tooltip\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Portal } from \"solid-js/web\";\r\nimport { splitProps, type ComponentProps } from \"solid-js\";\r\n\r\nfunction TooltipProvider(props: ComponentProps<typeof TooltipPrimitive.RootProvider>) {\r\n  return (\r\n    <TooltipPrimitive.RootProvider\r\n      data-slot=\"tooltip-provider\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction Tooltip(props: ComponentProps<typeof TooltipPrimitive.Root>) {\r\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\r\n}\r\n\r\nfunction TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\r\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\r\n}\r\n\r\nfunction TooltipContent(props: ComponentProps<typeof TooltipPrimitive.Content>) {\r\n  const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n  return (\r\n    <Portal>\r\n      <TooltipPrimitive.Positioner>\r\n        <TooltipPrimitive.Content\r\n          data-slot=\"tooltip-content\"\r\n          class={cn(\r\n            \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n            local.class\r\n          )}\r\n          {...others}\r\n        >\r\n          {local.children}\r\n          <TooltipPrimitive.Arrow class=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n            <TooltipPrimitive.ArrowTip class=\"rounded-xs\" />\r\n          </TooltipPrimitive.Arrow>\r\n        </TooltipPrimitive.Content>\r\n      </TooltipPrimitive.Positioner>\r\n    </Portal>\r\n  );\r\n}\r\n\r\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };",
+						type: "registry:ui",
+						path: "tooltip.tsx"
+					}]
+				},
 				{
 					name: "utils",
 					dependencies: ["clsx", "tailwind-merge"],
@@ -916,9 +1000,9 @@ const PRESETS = { monochrome: {
 		},
 		svelte: {
 			dependencies: {
-				"@sprawlify/svelte": "^0.0.108",
+				"@sprawlify/svelte": "^0.1.9",
 				svelte: "^5.54.0",
-				"lucide-svelte": "^0.577.0",
+				"lucide-svelte": "^1.0.1",
 				"class-variance-authority": "^0.7.1",
 				clsx: "^2.1.1",
 				"tailwind-merge": "^3.5.0"
@@ -939,7 +1023,7 @@ const PRESETS = { monochrome: {
 					],
 					files: [
 						{
-							content: "<script lang=\"ts\">\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/svelte/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof AccordionPrimitive.ItemContent> {}\r\n\r\nlet { children, class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\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	{...rest}\r\n>\r\n	<div 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		className\r\n	)}>\r\n		{@render children?.()}\r\n	</div>\r\n</AccordionPrimitive.ItemContent>",
+							content: "<script lang=\"ts\">\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/svelte/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof AccordionPrimitive.ItemContent> {}\r\n\r\nlet { children, class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<AccordionPrimitive.ItemContent\r\n	data-slot=\"accordion-content\"\r\n	class=\"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\r\n	{...rest}\r\n>\r\n	<div 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		className\r\n	)}>\r\n		{@render children?.()}\r\n	</div>\r\n</AccordionPrimitive.ItemContent>",
 							type: "registry:ui",
 							path: "accordion/accordion-content.svelte"
 						},
@@ -949,7 +1033,7 @@ const PRESETS = { monochrome: {
 							path: "accordion/accordion-item.svelte"
 						},
 						{
-							content: "<script lang=\"ts\">\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/svelte/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDown } from \"lucide-svelte\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof AccordionPrimitive.ItemTrigger> {}\r\n\r\nlet { children, class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\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		className\r\n	)}\r\n	{...rest}\r\n>\r\n	{@render children?.()}\r\n	<AccordionPrimitive.ItemIndicator class=\"ml-2 transition-transform duration-200 group-data-[state=open]:rotate-180\">\r\n		<ChevronDown data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0 size-4\" />\r\n	</AccordionPrimitive.ItemIndicator>\r\n</AccordionPrimitive.ItemTrigger>",
+							content: "<script lang=\"ts\">\r\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/svelte/accordion\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDown } from \"lucide-svelte\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof AccordionPrimitive.ItemTrigger> {}\r\n\r\nlet { children, class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\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		className\r\n	)}\r\n	{...rest}\r\n>\r\n	{@render children?.()}\r\n	<AccordionPrimitive.ItemIndicator class=\"ml-2 transition-transform duration-200 data-[state=open]:rotate-180\">\r\n		<ChevronDown data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0 size-4\" />\r\n	</AccordionPrimitive.ItemIndicator>\r\n</AccordionPrimitive.ItemTrigger>",
 							type: "registry:ui",
 							path: "accordion/accordion-trigger.svelte"
 						},
@@ -1351,6 +1435,73 @@ const PRESETS = { monochrome: {
 						}
 					]
 				},
+				{
+					name: "dialog",
+					dependencies: [
+						"@sprawlify/svelte",
+						"svelte",
+						"@/lib/utils",
+						"lucide-svelte",
+						"svelte/elements"
+					],
+					files: [
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.CloseTrigger> {}\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" {...rest}>\r\n  {@render children?.()}\r\n</DialogPrimitive.CloseTrigger>",
+							type: "registry:ui",
+							path: "dialog/dialog-close.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import DialogPortal from \"./dialog-portal.svelte\"\r\n  import DialogOverlay from \"./dialog-overlay.svelte\"\r\n  import Button from \"../button/button.svelte\"\r\n  import type { ComponentProps } from \"svelte\"\r\n  import { XIcon } from \"lucide-svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.Content> {\r\n    showCloseButton?: boolean\r\n  }\r\n\r\n  let { class: className, children, showCloseButton = true, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPortal>\r\n  <DialogOverlay />\r\n  <DialogPrimitive.Content\r\n    data-slot=\"dialog-content\"\r\n    class={cn(\r\n      \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\r\n      className\r\n    )}\r\n    {...rest}\r\n  >\r\n    {@render children?.()}\r\n    {#if showCloseButton}\r\n      <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\">\r\n        {#snippet asChild(props)}\r\n          <Button variant=\"ghost\" class=\"absolute top-2 right-2\" size=\"icon-sm\" {...props()}>\r\n            <XIcon />\r\n            <span class=\"sr-only\">Close</span>\r\n          </Button>\r\n        {/snippet}\r\n      </DialogPrimitive.CloseTrigger>\r\n    {/if}\r\n  </DialogPrimitive.Content>\r\n</DialogPortal>",
+							type: "registry:ui",
+							path: "dialog/dialog-content.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.Description> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPrimitive.Description\r\n  data-slot=\"dialog-description\"\r\n  class={cn(\r\n    \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\r\n    className\r\n  )}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</DialogPrimitive.Description>",
+							type: "registry:ui",
+							path: "dialog/dialog-description.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import Button from \"../button/button.svelte\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n  import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\";\r\n\r\n\r\n  interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<\"div\"> {\r\n    showCloseButton?: boolean\r\n  }\r\n\r\n  let { class: className, children, showCloseButton = false, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"div\"\r\n  data-slot=\"dialog-footer\"\r\n  class={cn(\r\n    \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\r\n    className\r\n  )}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n  {#if showCloseButton}\r\n    <DialogPrimitive.CloseTrigger>\r\n      {#snippet asChild(props)}\r\n        <Button variant=\"outline\" {...props()}>Close</Button>\r\n      {/snippet}\r\n    </DialogPrimitive.CloseTrigger>\r\n  {/if}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "dialog/dialog-footer.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import { type HTMLAttributes } from \"svelte/elements\"\r\n  import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\n\r\n  interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<\"div\">  {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify as=\"div\" data-slot=\"dialog-header\" class={cn(\"flex flex-col gap-2\", className)} {...rest}>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "dialog/dialog-header.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.Backdrop> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPrimitive.Backdrop\r\n  data-slot=\"dialog-overlay\"\r\n  class={cn(\r\n    \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\r\n    className\r\n  )}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</DialogPrimitive.Backdrop>",
+							type: "registry:ui",
+							path: "dialog/dialog-overlay.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=\"dialog-portal\" {...rest}>\r\n  {@render children?.()}\r\n</Portal>",
+							type: "registry:ui",
+							path: "dialog/dialog-portal.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.Title> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPrimitive.Title\r\n  data-slot=\"dialog-title\"\r\n  class={cn(\"cn-font-heading text-base leading-none font-medium\", className)}\r\n  {...rest}\r\n>\r\n  {@render children?.()}\r\n</DialogPrimitive.Title>",
+							type: "registry:ui",
+							path: "dialog/dialog-title.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.Trigger> {}\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...rest}>\r\n  {@render children?.()}\r\n</DialogPrimitive.Trigger>",
+							type: "registry:ui",
+							path: "dialog/dialog-trigger.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Dialog as DialogPrimitive } from \"@sprawlify/svelte/dialog\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof DialogPrimitive.Root> {\r\n    \"data-slot\"?: string\r\n  }\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DialogPrimitive.Root data-slot=\"dialog\" {...rest}>\r\n  {@render children?.()}\r\n</DialogPrimitive.Root>",
+							type: "registry:ui",
+							path: "dialog/dialog.svelte"
+						},
+						{
+							content: "export { default as Dialog } from \"./dialog.svelte\";\nexport { default as DialogTrigger } from \"./dialog-trigger.svelte\";\nexport { default as DialogPortal } from \"./dialog-portal.svelte\";\nexport { default as DialogOverlay } from \"./dialog-overlay.svelte\";\nexport { default as DialogContent } from \"./dialog-content.svelte\";\nexport { default as DialogHeader } from \"./dialog-header.svelte\";\nexport { default as DialogFooter } from \"./dialog-footer.svelte\";\nexport { default as DialogTitle } from \"./dialog-title.svelte\";\nexport { default as DialogDescription } from \"./dialog-description.svelte\";\nexport { default as DialogClose } from \"./dialog-close.svelte\";\n",
+							type: "registry:ui",
+							path: "dialog/index.ts"
+						}
+					]
+				},
 				{
 					name: "dropdown-menu",
 					dependencies: [
@@ -1806,6 +1957,61 @@ const PRESETS = { monochrome: {
 						path: "separator/separator.svelte"
 					}]
 				},
+				{
+					name: "table",
+					dependencies: [
+						"@/lib/utils",
+						"@sprawlify/svelte",
+						"svelte/elements"
+					],
+					files: [
+						{
+							content: "export { default as Table } from \"./table.svelte\";\nexport { default as TableHeader } from \"./table-header.svelte\";\nexport { default as TableBody } from \"./table-body.svelte\";\nexport { default as TableFooter } from \"./table-footer.svelte\";\nexport { default as TableRow } from \"./table-row.svelte\";\nexport { default as TableHead } from \"./table-head.svelte\";\nexport { default as TableCell } from \"./table-cell.svelte\";\nexport { default as TableCaption } from \"./table-caption.svelte\";\n",
+							type: "registry:ui",
+							path: "table/index.ts"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n\r\n  interface Props extends HTMLAttributes<HTMLTableSectionElement>, PolymorphicProps<\"tbody\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"tbody\"\r\n  data-slot=\"table-body\" \r\n  class={cn(\"[&_tr:last-child]:border-0\", className)} \r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-body.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<\"caption\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"caption\"\r\n  data-slot=\"table-caption\"\r\n  class={cn(\"mt-4 text-sm text-muted-foreground\", className)}\r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-caption.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLTdAttributes } from \"svelte/elements\";\r\n  import { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLTdAttributes, PolymorphicProps<\"td\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"td\"\r\n  data-slot=\"table-cell\" \r\n  class={cn(\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\", className)} \r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-cell.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLAttributes<HTMLTableSectionElement>, PolymorphicProps<\"tfoot\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"tfoot\"\r\n  data-slot=\"table-footer\"\r\n  class={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)}\r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-footer.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLThAttributes } from \"svelte/elements\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLThAttributes, PolymorphicProps<\"th\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"th\"\r\n  data-slot=\"table-head\"\r\n  class={cn(\"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\", className)}\r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-head.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLAttributes<HTMLTableSectionElement>, PolymorphicProps<\"thead\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"thead\"\r\n  data-slot=\"table-header\"\r\n  class={cn(\"[&_tr]:border-b\", className)}\r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-header.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLAttributes } from \"svelte/elements\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLAttributes<HTMLTableRowElement>, PolymorphicProps<\"tr\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n  as=\"tr\"\r\n  data-slot=\"table-row\"\r\n  class={cn(\"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\", className)} \r\n  {...props}\r\n>\r\n  {@render children?.()}\r\n</Sprawlify>",
+							type: "registry:ui",
+							path: "table/table-row.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { HTMLTableAttributes } from \"svelte/elements\"\r\n  import { type PolymorphicProps, Sprawlify } from \"@sprawlify/svelte\";\r\n\r\n  interface Props extends HTMLTableAttributes, PolymorphicProps<\"table\"> {}\r\n\r\n  let { class: className, children, ...props }: Props = $props()\r\n<\/script>\r\n\r\n<div data-slot=\"table-container\" class=\"relative w-full overflow-x-auto\">\r\n  <Sprawlify\r\n    as=\"table\"\r\n    data-slot=\"table\" \r\n    class={cn(\"w-full caption-bottom text-sm\", className)} \r\n    {...props}\r\n  >\r\n    {@render children?.()}\r\n  </Sprawlify>\r\n</div>",
+							type: "registry:ui",
+							path: "table/table.svelte"
+						}
+					]
+				},
 				{
 					name: "tabs",
 					dependencies: [
@@ -1859,6 +2065,41 @@ const PRESETS = { monochrome: {
 						path: "textarea/textarea.svelte"
 					}]
 				},
+				{
+					name: "tooltip",
+					dependencies: [
+						"@sprawlify/svelte",
+						"@/lib/utils",
+						"svelte"
+					],
+					files: [
+						{
+							content: "export { default as Tooltip } from \"./tooltip.svelte\";\r\nexport { default as TooltipProvider } from \"./tooltip-provider.svelte\";\r\nexport { default as TooltipTrigger } from \"./tooltip-trigger.svelte\";\r\nexport { default as TooltipContent } from \"./tooltip-content.svelte\";\r\n",
+							type: "registry:ui",
+							path: "tooltip/index.ts"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Tooltip as TooltipPrimitive } from \"@sprawlify/svelte/tooltip\"\r\n  import { Portal } from \"@sprawlify/svelte/portal\"\r\n  import { cn } from \"@/lib/utils\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof TooltipPrimitive.Content> {}\r\n\r\n  let { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Portal>\r\n  <TooltipPrimitive.Positioner>\r\n    <TooltipPrimitive.Content\r\n      data-slot=\"tooltip-content\"\r\n      class={cn(\r\n        \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n        className\r\n      )}\r\n      {...rest}\r\n    >\r\n      {@render children?.()}\r\n      <TooltipPrimitive.Arrow class=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n        <TooltipPrimitive.ArrowTip class=\"rounded-xs\" />\r\n      </TooltipPrimitive.Arrow>\r\n    </TooltipPrimitive.Content>\r\n  </TooltipPrimitive.Positioner>\r\n</Portal>",
+							type: "registry:ui",
+							path: "tooltip/tooltip-content.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Tooltip as TooltipPrimitive } from \"@sprawlify/svelte/tooltip\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof TooltipPrimitive.RootProvider> {\r\n    \"data-slot\"?: string\r\n  }\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<TooltipPrimitive.RootProvider data-slot=\"tooltip-provider\" {...rest}>\r\n  {@render children?.()}\r\n</TooltipPrimitive.RootProvider>",
+							type: "registry:ui",
+							path: "tooltip/tooltip-provider.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Tooltip as TooltipPrimitive } from \"@sprawlify/svelte/tooltip\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof TooltipPrimitive.Trigger> {}\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...rest}>\r\n  {@render children?.()}\r\n</TooltipPrimitive.Trigger>",
+							type: "registry:ui",
+							path: "tooltip/tooltip-trigger.svelte"
+						},
+						{
+							content: "<script lang=\"ts\">\r\n  import { Tooltip as TooltipPrimitive } from \"@sprawlify/svelte/tooltip\"\r\n  import type { ComponentProps } from \"svelte\"\r\n\r\n  interface Props extends ComponentProps<typeof TooltipPrimitive.Root> {\r\n    \"data-slot\"?: string\r\n  }\r\n\r\n  let { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<TooltipPrimitive.Root data-slot=\"tooltip\" {...rest}>\r\n  {@render children?.()}\r\n</TooltipPrimitive.Root>",
+							type: "registry:ui",
+							path: "tooltip/tooltip.svelte"
+						}
+					]
+				},
 				{
 					name: "utils",
 					dependencies: ["clsx", "tailwind-merge"],
@@ -1872,9 +2113,9 @@ const PRESETS = { monochrome: {
 		},
 		vue: {
 			dependencies: {
-				"@sprawlify/vue": "^0.0.108",
+				"@sprawlify/vue": "^0.1.9",
 				vue: "^3.4.0",
-				"lucide-vue-next": "^0.577.0",
+				"lucide-vue-next": "^1.0.0",
 				"class-variance-authority": "^0.7.1",
 				clsx: "^2.1.1",
 				"tailwind-merge": "^3.5.0"
@@ -1895,22 +2136,22 @@ const PRESETS = { monochrome: {
 					],
 					files: [
 						{
-							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",
+							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=\"data-[state=open]:animate-accordion-down 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\">\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",
+							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\">\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",
+							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 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\">\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",
+							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"
 						},
@@ -1967,7 +2208,7 @@ const PRESETS = { monochrome: {
 					],
 					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",
+							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"
 						},
@@ -1977,12 +2218,12 @@ const PRESETS = { monochrome: {
 							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",
+							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",
+							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"
 						},
@@ -2007,17 +2248,17 @@ const PRESETS = { monochrome: {
 							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",
+							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",
+							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",
+							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"
 						},
@@ -2032,7 +2273,7 @@ const PRESETS = { monochrome: {
 					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"
 					}, {
@@ -2055,7 +2296,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"
 						},
@@ -2070,12 +2311,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"
 						},
@@ -2114,42 +2355,42 @@ const PRESETS = { monochrome: {
 					],
 					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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbEllipsisProps\n  extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { MoreHorizontalIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  role = \"presentation\",\n  \"aria-hidden\": ariaHidden = \"true\",\n  ...rest\n} = defineProps<BreadcrumbEllipsisProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"flex h-9 w-9 items-center justify-center\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <sprawlify.span\n    data-scope=\"breadcrumb\"\n    data-part=\"ellipsis\"\n    data-slot=\"breadcrumb-ellipsis\"\n    :role=\"role\"\n    :aria-hidden=\"ariaHidden\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <MoreHorizontalIcon class=\"size-4\" />\n    <span class=\"sr-only\">More</span>\n  </sprawlify.span>\n</template>\n",
 							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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbItemProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<BreadcrumbItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"inline-flex items-center gap-1.5\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.li\n    data-scope=\"breadcrumb\"\n    data-part=\"item\"\n    data-slot=\"breadcrumb-item\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.li>\n</template>\n",
 							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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbLinkProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<BreadcrumbLinkProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"transition-colors hover:text-foreground\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <sprawlify.a\n    data-scope=\"breadcrumb\"\n    data-part=\"link\"\n    data-slot=\"breadcrumb-link\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.a>\n</template>\n",
 							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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbListProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<BreadcrumbListProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.ol\n    data-scope=\"breadcrumb\"\n    data-part=\"list\"\n    data-slot=\"breadcrumb-list\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.ol>\n</template>\n",
 							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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbPageProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface BreadcrumbPageProps extends PolymorphicProps {}\n\nconst {\n  role = \"link\",\n  \"aria-disabled\": ariaDisabled = \"true\",\n  \"aria-current\": ariaCurrent = \"page\",\n  asChild,\n  ...rest\n} = defineProps<BreadcrumbPageProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"font-normal text-foreground\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.span\n    data-scope=\"breadcrumb\"\n    data-part=\"page\"\n    data-slot=\"breadcrumb-page\"\n    :role=\"role\"\n    :aria-disabled=\"ariaDisabled\"\n    :aria-current=\"ariaCurrent\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.span>\n</template>\n",
 							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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbSeparatorProps\n  extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { ChevronRightIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  role = \"presentation\",\n  \"aria-hidden\": ariaHidden = \"true\",\n  asChild,\n  ...rest\n} = defineProps<BreadcrumbSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"[&>svg]:size-3.5\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.li\n    data-scope=\"breadcrumb\"\n    data-part=\"separator\"\n    data-slot=\"breadcrumb-separator\"\n    :role=\"role\"\n    :aria-hidden=\"ariaHidden\"\n    :class=\"className\"\n    v-bind=\"rest\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </sprawlify.li>\n</template>\n",
 							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>",
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n  role = \"navigation\",\n  \"aria-label\": ariaLabel = \"breadcrumb\",\n  asChild,\n  ...rest\n} = defineProps<BreadcrumbProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.nav\n    data-scope=\"breadcrumb\"\n    data-part=\"root\"\n    data-slot=\"breadcrumb\"\n    :role=\"role\"\n    :aria-label=\"ariaLabel\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </sprawlify.nav>\n</template>\n",
 							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\"",
+							content: "export { default as Breadcrumb } from \"./breadcrumb.vue\";\nexport { default as BreadcrumbList } from \"./breadcrumb-list.vue\";\nexport { default as BreadcrumbItem } from \"./breadcrumb-item.vue\";\nexport { default as BreadcrumbLink } from \"./breadcrumb-link.vue\";\nexport { default as BreadcrumbPage } from \"./breadcrumb-page.vue\";\nexport { default as BreadcrumbSeparator } from \"./breadcrumb-separator.vue\";\nexport { default as BreadcrumbEllipsis } from \"./breadcrumb-ellipsis.vue\";\n",
 							type: "registry:ui",
 							path: "breadcrumb/index.ts"
 						}
@@ -2184,7 +2425,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"
 						},
@@ -2265,7 +2506,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"
 					}, {
@@ -2283,17 +2524,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"
 						},
@@ -2304,6 +2545,73 @@ const PRESETS = { monochrome: {
 						}
 					]
 				},
+				{
+					name: "dialog",
+					dependencies: [
+						"@sprawlify/vue",
+						"vue",
+						"@/lib/utils",
+						"@/components/ui/button",
+						"lucide-vue-next"
+					],
+					files: [
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogCloseTriggerProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogCloseProps extends /* @vue-ignore */ DialogCloseTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\n\nconst { asChild, ...rest } = defineProps<DialogCloseProps>();\n<\/script>\n\n<template>\n  <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </DialogPrimitive.CloseTrigger>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-close.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogContentProps as DialogPrimitiveContentProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogContentProps extends /* @vue-ignore */ DialogPrimitiveContentProps {\n  showCloseButton?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport DialogPortal from \"./dialog-portal.vue\";\nimport DialogOverlay from \"./dialog-overlay.vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { XIcon } from \"lucide-vue-next\";\n\nconst { asChild, showCloseButton = true, ...rest } = defineProps<DialogContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      data-slot=\"dialog-content\"\n      :class=\"className\"\n      v-bind=\"rest\"\n      :as-child=\"asChild\"\n    >\n      <slot />\n      <template v-if=\"showCloseButton\">\n        <DialogPrimitive.CloseTrigger as-child data-slot=\"dialog-close\">\n          <Button variant=\"ghost\" size=\"icon-sm\" class=\"absolute top-2 right-2\">\n            <XIcon />\n            <span class=\"sr-only\">Close</span>\n          </Button>\n        </DialogPrimitive.CloseTrigger>\n      </template>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-content.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogDescriptionProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogDescriptionComponentProps extends /* @vue-ignore */ DialogDescriptionProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogDescriptionComponentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DialogPrimitive.Description\n    data-slot=\"dialog-description\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DialogPrimitive.Description>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-description.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface DialogFooterProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {\n  showCloseButton?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nconst { showCloseButton = false, asChild, ...rest } = defineProps<DialogFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.div data-slot=\"dialog-footer\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n    <template v-if=\"showCloseButton\">\n      <DialogPrimitive.CloseTrigger as-child>\n        <Button variant=\"outline\">Close</Button>\n      </DialogPrimitive.CloseTrigger>\n    </template>\n  </sprawlify.div>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-footer.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface DialogHeaderProps 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<DialogHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"flex flex-col gap-2\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.div data-slot=\"dialog-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.div>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-header.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogBackdropProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogOverlayProps extends /* @vue-ignore */ DialogBackdropProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogOverlayProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <DialogPrimitive.Backdrop\n    data-slot=\"dialog-overlay\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DialogPrimitive.Backdrop>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-overlay.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nexport interface DialogPortalProps {\n  to?: string | Element;\n  disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<DialogPortalProps>();\n<\/script>\n\n<template>\n  <Teleport\n    data-slot=\"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: "dialog/dialog-portal.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogTitleProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogTitleComponentProps extends /* @vue-ignore */ DialogTitleProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogTitleComponentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"cn-font-heading text-base leading-none font-medium\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <DialogPrimitive.Title\n    data-slot=\"dialog-title\"\n    :class=\"className\"\n    v-bind=\"rest\"\n    :as-child=\"asChild\"\n  >\n    <slot />\n  </DialogPrimitive.Title>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-title.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogTriggerProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogTriggerComponentProps extends /* @vue-ignore */ DialogTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\n\nconst { asChild, ...rest } = defineProps<DialogTriggerComponentProps>();\n<\/script>\n\n<template>\n  <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </DialogPrimitive.Trigger>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog-trigger.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { DialogRootProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogProps extends /* @vue-ignore */ DialogRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\n\nconst { ...rest } = defineProps<DialogProps>();\n<\/script>\n\n<template>\n  <DialogPrimitive.Root data-slot=\"dialog\" v-bind=\"rest\">\n    <slot />\n  </DialogPrimitive.Root>\n</template>\n",
+							type: "registry:ui",
+							path: "dialog/dialog.vue"
+						},
+						{
+							content: "export { default as Dialog } from \"./dialog.vue\";\nexport { default as DialogTrigger } from \"./dialog-trigger.vue\";\nexport { default as DialogPortal } from \"./dialog-portal.vue\";\nexport { default as DialogOverlay } from \"./dialog-overlay.vue\";\nexport { default as DialogContent } from \"./dialog-content.vue\";\nexport { default as DialogClose } from \"./dialog-close.vue\";\nexport { default as DialogHeader } from \"./dialog-header.vue\";\nexport { default as DialogFooter } from \"./dialog-footer.vue\";\nexport { default as DialogTitle } from \"./dialog-title.vue\";\nexport { default as DialogDescription } from \"./dialog-description.vue\";\n",
+							type: "registry:ui",
+							path: "dialog/index.ts"
+						}
+					]
+				},
 				{
 					name: "dropdown-menu",
 					dependencies: [
@@ -2314,27 +2622,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"
 						},
@@ -2344,17 +2652,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"
 						},
@@ -2364,27 +2672,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"
 						},
@@ -2698,17 +3006,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"
 						}
@@ -2728,12 +3036,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"
 						}
@@ -2751,11 +3059,66 @@ 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"
 					}]
 				},
+				{
+					name: "table",
+					dependencies: [
+						"@sprawlify/vue",
+						"vue",
+						"@/lib/utils"
+					],
+					files: [
+						{
+							content: "export { default as Table } from \"./table.vue\";\nexport { default as TableHeader } from \"./table-header.vue\";\nexport { default as TableBody } from \"./table-body.vue\";\nexport { default as TableFooter } from \"./table-footer.vue\";\nexport { default as TableRow } from \"./table-row.vue\";\nexport { default as TableHead } from \"./table-head.vue\";\nexport { default as TableCell } from \"./table-cell.vue\";\nexport { default as TableCaption } from \"./table-caption.vue\";\n",
+							type: "registry:ui",
+							path: "table/index.ts"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableBodyProps 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<TableBodyProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"[&_tr:last-child]:border-0\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.tbody data-slot=\"table-body\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.tbody>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-body.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableCaptionProps 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<TableCaptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"mt-4 text-sm text-muted-foreground\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.caption data-slot=\"table-caption\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.caption>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-caption.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TdHTMLAttributes } from \"vue\";\n\nexport interface TableCellProps extends PolymorphicProps, /* @vue-ignore */ TdHTMLAttributes {}\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<TableCellProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <sprawlify.td data-slot=\"table-cell\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.td>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-cell.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableFooterProps 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<TableFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", attrs.class as string),\n);\n<\/script>\n\n<template>\n  <sprawlify.tfoot data-slot=\"table-footer\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.tfoot>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-footer.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { ThHTMLAttributes } from \"vue\";\n\nexport interface TableHeadProps extends PolymorphicProps, /* @vue-ignore */ ThHTMLAttributes {}\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<TableHeadProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.th data-slot=\"table-head\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.th>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-head.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableHeaderProps 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<TableHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"[&_tr]:border-b\", attrs.class as string));\n<\/script>\n\n<template>\n  <sprawlify.thead data-slot=\"table-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.thead>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-header.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableRowProps 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<TableRowProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n  cn(\n    \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n    attrs.class as string,\n  ),\n);\n<\/script>\n\n<template>\n  <sprawlify.tr data-slot=\"table-row\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n    <slot />\n  </sprawlify.tr>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table-row.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TableHTMLAttributes } from \"vue\";\n\nexport interface TableProps extends PolymorphicProps, /* @vue-ignore */ TableHTMLAttributes {}\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<TableProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"w-full caption-bottom text-sm\", attrs.class as string));\n<\/script>\n\n<template>\n  <div data-slot=\"table-container\" class=\"relative w-full overflow-x-auto\">\n    <sprawlify.table data-slot=\"table\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n      <slot />\n    </sprawlify.table>\n  </div>\n</template>\n",
+							type: "registry:ui",
+							path: "table/table.vue"
+						}
+					]
+				},
 				{
 					name: "tabs",
 					dependencies: [
@@ -2771,22 +3134,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"
 						}
@@ -2809,6 +3172,41 @@ const PRESETS = { monochrome: {
 						path: "textarea/textarea.vue"
 					}]
 				},
+				{
+					name: "tooltip",
+					dependencies: [
+						"@sprawlify/vue",
+						"vue",
+						"@/lib/utils"
+					],
+					files: [
+						{
+							content: "export { default as Tooltip } from \"./tooltip.vue\";\r\nexport { default as TooltipProvider } from \"./tooltip-provider.vue\";\r\nexport { default as TooltipTrigger } from \"./tooltip-trigger.vue\";\r\nexport { default as TooltipContent } from \"./tooltip-content.vue\";",
+							type: "registry:ui",
+							path: "tooltip/index.ts"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { TooltipContentProps as TooltipPrimitiveContentProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipContentProps extends /* @vue-ignore */ TooltipPrimitiveContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<TooltipContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n  cn(\r\n    \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n    attrs.class as string,\r\n  ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n  <Teleport to=\"body\">\r\n    <TooltipPrimitive.Positioner>\r\n      <TooltipPrimitive.Content\r\n        data-slot=\"tooltip-content\"\r\n        :class=\"className\"\r\n        v-bind=\"rest\"\r\n        :as-child=\"asChild\"\r\n      >\r\n        <slot />\r\n        <TooltipPrimitive.Arrow class=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n          <TooltipPrimitive.ArrowTip class=\"rounded-xs\" />\r\n        </TooltipPrimitive.Arrow>\r\n      </TooltipPrimitive.Content>\r\n    </TooltipPrimitive.Positioner>\r\n  </Teleport>\r\n</template>",
+							type: "registry:ui",
+							path: "tooltip/tooltip-content.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { TooltipRootProviderProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipProviderProps extends /* @vue-ignore */ TooltipRootProviderProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\n\r\nconst { ...rest } = defineProps<TooltipProviderProps>();\r\n<\/script>\r\n\r\n<template>\r\n  <TooltipPrimitive.RootProvider data-slot=\"tooltip-provider\" v-bind=\"rest\">\r\n    <slot />\r\n  </TooltipPrimitive.RootProvider>\r\n</template>",
+							type: "registry:ui",
+							path: "tooltip/tooltip-provider.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { TooltipTriggerProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipTriggerComponentProps extends /* @vue-ignore */ TooltipTriggerProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\n\r\nconst { asChild, ...rest } = defineProps<TooltipTriggerComponentProps>();\r\n<\/script>\r\n\r\n<template>\r\n  <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" v-bind=\"rest\" :as-child=\"asChild\">\r\n    <slot />\r\n  </TooltipPrimitive.Trigger>\r\n</template>",
+							type: "registry:ui",
+							path: "tooltip/tooltip-trigger.vue"
+						},
+						{
+							content: "<script lang=\"ts\">\r\nimport type { TooltipRootProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipProps extends /* @vue-ignore */ TooltipRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\n\r\nconst { ...rest } = defineProps<TooltipProps>();\r\n<\/script>\r\n\r\n<template>\r\n  <TooltipPrimitive.Root data-slot=\"tooltip\" v-bind=\"rest\">\r\n    <slot />\r\n  </TooltipPrimitive.Root>\r\n</template>",
+							type: "registry:ui",
+							path: "tooltip/tooltip.vue"
+						}
+					]
+				},
 				{
 					name: "utils",
 					dependencies: ["clsx", "tailwind-merge"],
@@ -3086,6 +3484,8 @@ export default nextConfig;`
     "start": "next start"
   },
   "dependencies": {
+    "@sprawlify/primitives": "^0.1.9",
+    "@sprawlify/react": "^0.1.9",
     "next": "^16.2.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
@@ -3231,8 +3631,8 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sprawlify/primitives": "^0.0.106",
-    "@sprawlify/react": "^0.0.106",
+    "@sprawlify/primitives": "^0.1.9",
+    "@sprawlify/react": "^0.1.9",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "class-variance-authority": "^0.7.1",
@@ -3419,8 +3819,8 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sprawlify/primitives": "^0.0.106",
-    "@sprawlify/solid": "^0.0.106",
+    "@sprawlify/primitives": "^0.1.9",
+    "@sprawlify/solid": "^0.1.9",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
@@ -3596,8 +3996,8 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sprawlify/primitives": "^0.0.106",
-    "@sprawlify/svelte": "^0.0.106"
+    "@sprawlify/primitives": "^0.1.9",
+    "@sprawlify/svelte": "^0.1.9"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -3766,8 +4166,8 @@ dist-ssr
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sprawlify/primitives": "^0.0.106",
-    "@sprawlify/vue": "^0.0.106",
+    "@sprawlify/primitives": "^0.1.9",
+    "@sprawlify/vue": "^0.1.9",
     "vue": "^3.5.30"
   },
   "devDependencies": {