sprawlify 0.0.102 → 0.0.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.mjs +124 -93
  2. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -8,7 +8,7 @@ import { existsSync } from "fs";
8
8
  import prompts from "prompts";
9
9
  import { faker } from "@faker-js/faker";
10
10
  //#region package.json
11
- var version = "0.0.102";
11
+ var version = "0.0.103";
12
12
  //#endregion
13
13
  //#region src/utils/file-helper.ts
14
14
  const FILE_BACKUP_SUFFIX = ".bak";
@@ -201,11 +201,12 @@ const PRESETS = {
201
201
  dependencies: {
202
202
  "class-variance-authority": "^0.7.1",
203
203
  react: "^18.2.0",
204
- "@sprawlify/react": "^0.0.100",
204
+ "@sprawlify/react": "^0.0.102",
205
205
  clsx: "^2.1.1",
206
- "tailwind-merge": "^3.3.1"
206
+ "tailwind-merge": "^3.5.0"
207
207
  },
208
208
  devDependencies: {},
209
+ tailwindcss: { css: "@import \"tailwindcss\";\r\n@import \"tw-animate-css\";\r\n\r\n@custom-variant dark (&:is(.dark *));\r\n\r\n@theme inline {\r\n --color-background: var(--background);\r\n --color-foreground: var(--foreground);\r\n --color-sidebar-ring: var(--sidebar-ring);\r\n --color-sidebar-border: var(--sidebar-border);\r\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\r\n --color-sidebar-accent: var(--sidebar-accent);\r\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\r\n --color-sidebar-primary: var(--sidebar-primary);\r\n --color-sidebar-foreground: var(--sidebar-foreground);\r\n --color-sidebar: var(--sidebar);\r\n --color-ring: var(--ring);\r\n --color-input: var(--input);\r\n --color-border: var(--border);\r\n --color-destructive: var(--destructive);\r\n --color-destructive-foreground: var(--destructive-foreground);\r\n --color-info: var(--info);\r\n --color-info-foreground: var(--info-foreground);\r\n --color-success: var(--success);\r\n --color-success-foreground: var(--success-foreground);\r\n --color-warning: var(--warning);\r\n --color-warning-foreground: var(--warning-foreground);\r\n --color-accent-foreground: var(--accent-foreground);\r\n --color-accent: var(--accent);\r\n --color-muted-foreground: var(--muted-foreground);\r\n --color-muted: var(--muted);\r\n --color-secondary-foreground: var(--secondary-foreground);\r\n --color-secondary: var(--secondary);\r\n --color-primary-foreground: var(--primary-foreground);\r\n --color-primary: var(--primary);\r\n --color-popover-foreground: var(--popover-foreground);\r\n --color-popover: var(--popover);\r\n --color-card-foreground: var(--card-foreground);\r\n --color-card: var(--card);\r\n --animate-skeleton: skeleton 2s -1s infinite linear;\r\n @keyframes skeleton {\r\n to {\r\n background-position: -200% 0;\r\n }\r\n }\r\n}\r\n\r\n:root {\r\n --radius: 0.625rem;\r\n --background: var(--color-white);\r\n --foreground: var(--color-neutral-800);\r\n --card: var(--color-white);\r\n --card-foreground: var(--color-neutral-800);\r\n --popover: var(--color-white);\r\n --popover-foreground: var(--color-neutral-800);\r\n --primary: var(--color-neutral-800);\r\n --primary-foreground: var(--color-neutral-50);\r\n --secondary: --alpha(var(--color-black) / 4%);\r\n --secondary-foreground: var(--color-neutral-800);\r\n --muted: --alpha(var(--color-black) / 4%);\r\n --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));\r\n --accent: --alpha(var(--color-black) / 4%);\r\n --accent-foreground: var(--color-neutral-800);\r\n --destructive: var(--color-red-500);\r\n --destructive-foreground: var(--color-red-700);\r\n --info: var(--color-blue-500);\r\n --info-foreground: var(--color-blue-700);\r\n --success: var(--color-emerald-500);\r\n --success-foreground: var(--color-emerald-700);\r\n --warning: var(--color-amber-500);\r\n --warning-foreground: var(--color-amber-700);\r\n --border: --alpha(var(--color-black) / 8%);\r\n --input: --alpha(var(--color-black) / 10%);\r\n --ring: var(--color-neutral-400);\r\n --sidebar: var(--color-neutral-50);\r\n --sidebar-foreground: color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar));\r\n --sidebar-primary: var(--color-neutral-800);\r\n --sidebar-primary-foreground: var(--color-neutral-50);\r\n --sidebar-accent: --alpha(var(--color-black) / 4%);\r\n --sidebar-accent-foreground: var(--color-neutral-800);\r\n --sidebar-border: --alpha(var(--color-black) / 6%);\r\n --sidebar-ring: var(--color-neutral-400);\r\n}\r\n\r\n.dark {\r\n --background: color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white));\r\n --foreground: var(--color-neutral-100);\r\n --card: color-mix(in srgb, var(--background) 98%, var(--color-white));\r\n --card-foreground: var(--color-neutral-100);\r\n --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));\r\n --popover-foreground: var(--color-neutral-100);\r\n --primary: var(--color-neutral-100);\r\n --primary-foreground: var(--color-neutral-800);\r\n --secondary: --alpha(var(--color-white) / 4%);\r\n --secondary-foreground: var(--color-neutral-100);\r\n --muted: --alpha(var(--color-white) / 4%);\r\n --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));\r\n --accent: --alpha(var(--color-white) / 4%);\r\n --accent-foreground: var(--color-neutral-100);\r\n --destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));\r\n --destructive-foreground: var(--color-red-400);\r\n --info: var(--color-blue-500);\r\n --info-foreground: var(--color-blue-400);\r\n --success: var(--color-emerald-500);\r\n --success-foreground: var(--color-emerald-400);\r\n --warning: var(--color-amber-500);\r\n --warning-foreground: var(--color-amber-400);\r\n --border: --alpha(var(--color-white) / 6%);\r\n --input: --alpha(var(--color-white) / 8%);\r\n --ring: var(--color-neutral-500);\r\n --sidebar: color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white));\r\n --sidebar-foreground: color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar));\r\n --sidebar-primary: var(--color-neutral-100);\r\n --sidebar-primary-foreground: var(--color-neutral-800);\r\n --sidebar-accent: --alpha(var(--color-white) / 4%);\r\n --sidebar-accent-foreground: var(--color-neutral-100);\r\n --sidebar-border: --alpha(var(--color-white) / 5%);\r\n --sidebar-ring: var(--color-neutral-400);\r\n}\r\n\r\n@layer base {\r\n * {\r\n @apply border-border outline-ring/50;\r\n }\r\n body {\r\n @apply bg-background text-foreground;\r\n }\r\n\r\n button:not(:disabled),\r\n [role=\"button\"]:not(:disabled) {\r\n cursor: pointer;\r\n }\r\n}" },
209
210
  items: [{
210
211
  name: "button",
211
212
  dependencies: [
@@ -237,12 +238,13 @@ const PRESETS = {
237
238
  dependencies: {
238
239
  react: "^18.2.0",
239
240
  "class-variance-authority": "^0.7.1",
240
- "@sprawlify/react": "^0.0.100",
241
- "lucide-react": "^0.400.0",
241
+ "@sprawlify/react": "^0.0.102",
242
+ "lucide-react": "^0.577.0",
242
243
  clsx: "^2.1.1",
243
- "tailwind-merge": "^3.3.1"
244
+ "tailwind-merge": "^3.5.0"
244
245
  },
245
246
  devDependencies: {},
247
+ tailwindcss: { css: "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@plugin 'tailwind-scrollbar';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.145 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.145 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.985 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.396 0.141 25.723);\n --destructive-foreground: oklch(0.637 0.237 25.331);\n --border: oklch(0.269 0 0);\n --input: oklch(0.269 0 0);\n --ring: oklch(0.439 0 0);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(0.269 0 0);\n --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n" },
246
248
  items: [
247
249
  {
248
250
  name: "alert",
@@ -549,12 +551,13 @@ const PRESETS = {
549
551
  dependencies: {
550
552
  "solid-js": "^1.8.0",
551
553
  "class-variance-authority": "^0.7.1",
552
- "@sprawlify/solid": "^0.0.100",
554
+ "@sprawlify/solid": "^0.0.102",
553
555
  "lucide-solid": "^0.400.0",
554
556
  clsx: "^2.1.1",
555
- "tailwind-merge": "^3.3.1"
557
+ "tailwind-merge": "^3.5.0"
556
558
  },
557
559
  devDependencies: {},
560
+ tailwindcss: { css: "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@plugin 'tailwind-scrollbar';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.145 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.145 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.985 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.396 0.141 25.723);\n --destructive-foreground: oklch(0.637 0.237 25.331);\n --border: oklch(0.269 0 0);\n --input: oklch(0.269 0 0);\n --ring: oklch(0.439 0 0);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(0.269 0 0);\n --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n" },
558
561
  items: [
559
562
  {
560
563
  name: "alert",
@@ -867,14 +870,15 @@ const PRESETS = {
867
870
  },
868
871
  svelte: {
869
872
  dependencies: {
870
- "@sprawlify/svelte": "^0.0.100",
873
+ "@sprawlify/svelte": "^0.0.102",
871
874
  svelte: "^4.0.0",
872
875
  "class-variance-authority": "^0.7.1",
873
876
  "lucide-svelte": "^0.400.0",
874
877
  clsx: "^2.1.1",
875
- "tailwind-merge": "^3.3.1"
878
+ "tailwind-merge": "^3.5.0"
876
879
  },
877
880
  devDependencies: {},
881
+ tailwindcss: { css: "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@plugin 'tailwind-scrollbar';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.145 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.145 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.985 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.396 0.141 25.723);\n --destructive-foreground: oklch(0.637 0.237 25.331);\n --border: oklch(0.269 0 0);\n --input: oklch(0.269 0 0);\n --ring: oklch(0.439 0 0);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(0.269 0 0);\n --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n" },
878
882
  items: [
879
883
  {
880
884
  name: "alert",
@@ -1655,14 +1659,15 @@ const PRESETS = {
1655
1659
  },
1656
1660
  vue: {
1657
1661
  dependencies: {
1658
- "@sprawlify/vue": "^0.0.100",
1662
+ "@sprawlify/vue": "^0.0.102",
1659
1663
  vue: "^3.4.0",
1660
1664
  "class-variance-authority": "^0.7.1",
1661
1665
  "lucide-vue-next": "^0.400.0",
1662
1666
  clsx: "^2.1.1",
1663
- "tailwind-merge": "^3.3.1"
1667
+ "tailwind-merge": "^3.5.0"
1664
1668
  },
1665
1669
  devDependencies: {},
1670
+ tailwindcss: { css: "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@plugin 'tailwind-scrollbar';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.145 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.145 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.985 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.396 0.141 25.723);\n --destructive-foreground: oklch(0.637 0.237 25.331);\n --border: oklch(0.269 0 0);\n --input: oklch(0.269 0 0);\n --ring: oklch(0.439 0 0);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(0.269 0 0);\n --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-ring: var(--ring);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --radius-xl: calc(var(--radius) + 4px);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n body {\n @apply bg-background text-foreground;\n }\n\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n" },
1666
1671
  items: [
1667
1672
  {
1668
1673
  name: "alert",
@@ -1704,7 +1709,7 @@ const PRESETS = {
1704
1709
  name: "aspect-ratio",
1705
1710
  dependencies: ["@sprawlify/vue"],
1706
1711
  files: [{
1707
- 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",
1712
+ content: "<script lang=\"ts\">\r\nimport type { AspectRatioRootProps } from \"@sprawlify/vue/aspect-ratio\";\r\n\r\nexport interface AspectRatioProps extends /* @vue-ignore */ AspectRatioRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/vue/aspect-ratio\";\r\n\r\nconst { asChild, ...rest } = defineProps<AspectRatioProps>();\r\n<\/script>\r\n\r\n<template>\r\n <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" v-bind=\"rest\" :as-child=\"asChild\">\r\n <AspectRatioPrimitive.Content data-slot=\"aspect-ratio-content\">\r\n <slot />\r\n </AspectRatioPrimitive.Content>\r\n </AspectRatioPrimitive.Root>\r\n</template>\r\n",
1708
1713
  type: "registry:ui",
1709
1714
  path: "aspect-ratio/aspect-ratio.vue"
1710
1715
  }, {
@@ -1727,7 +1732,7 @@ const PRESETS = {
1727
1732
  path: "avatar/avatar-badge.vue"
1728
1733
  },
1729
1734
  {
1730
- 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",
1735
+ content: "<script lang=\"ts\">\r\nimport type { AvatarFallbackProps as AvatarPrimitiveFallbackProps } from \"@sprawlify/vue/avatar\";\r\n\r\nexport interface AvatarFallbackProps extends /* @vue-ignore */ AvatarPrimitiveFallbackProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<AvatarFallbackProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <AvatarPrimitive.Fallback\r\n data-slot=\"avatar-fallback\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </AvatarPrimitive.Fallback>\r\n</template>\r\n",
1731
1736
  type: "registry:ui",
1732
1737
  path: "avatar/avatar-fallback.vue"
1733
1738
  },
@@ -1742,12 +1747,12 @@ const PRESETS = {
1742
1747
  path: "avatar/avatar-group.vue"
1743
1748
  },
1744
1749
  {
1745
- 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",
1750
+ content: "<script lang=\"ts\">\r\nimport type { AvatarImageProps as AvatarPrimitiveImageProps } from \"@sprawlify/vue/avatar\";\r\n\r\nexport interface AvatarImageProps extends /* @vue-ignore */ AvatarPrimitiveImageProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<AvatarImageProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"aspect-square rounded-[inherit] size-full overflow-hidden\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <AvatarPrimitive.Image\r\n data-slot=\"avatar-image\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n />\r\n</template>\r\n",
1746
1751
  type: "registry:ui",
1747
1752
  path: "avatar/avatar-image.vue"
1748
1753
  },
1749
1754
  {
1750
- 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",
1755
+ content: "<script lang=\"ts\">\r\nimport type { AvatarRootProps } from \"@sprawlify/vue/avatar\";\r\n\r\nexport interface AvatarProps extends /* @vue-ignore */ AvatarRootProps {\r\n size?: \"default\" | \"sm\" | \"lg\";\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/vue/avatar\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, size = \"default\", ...rest } = defineProps<AvatarProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <AvatarPrimitive.Root\r\n data-slot=\"avatar\"\r\n :data-size=\"size\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </AvatarPrimitive.Root>\r\n</template>\r\n",
1751
1756
  type: "registry:ui",
1752
1757
  path: "avatar/avatar.vue"
1753
1758
  },
@@ -1805,7 +1810,7 @@ const PRESETS = {
1805
1810
  ],
1806
1811
  files: [
1807
1812
  {
1808
- 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",
1813
+ content: "<script lang=\"ts\">\r\nimport type { SeparatorProps } from \"@/components/ui/separator\";\r\n\r\nexport interface ButtonGroupSeparatorProps extends /* @vue-ignore */ SeparatorProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { orientation = \"vertical\", ...rest } = defineProps<ButtonGroupSeparatorProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <Separator\r\n data-scope=\"button-group\"\r\n data-part=\"separator\"\r\n data-slot=\"button-group-separator\"\r\n :orientation=\"orientation\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </Separator>\r\n</template>\r\n",
1809
1814
  type: "registry:ui",
1810
1815
  path: "button-group/button-group-separator.vue"
1811
1816
  },
@@ -1836,32 +1841,32 @@ const PRESETS = {
1836
1841
  ],
1837
1842
  files: [
1838
1843
  {
1839
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardActionProps 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<CardActionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"action\"\n data-slot=\"card-action\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
1844
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface CardActionProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<CardActionProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"card\"\r\n data-part=\"action\"\r\n data-slot=\"card-action\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
1840
1845
  type: "registry:ui",
1841
1846
  path: "card/card-action.vue"
1842
1847
  },
1843
1848
  {
1844
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardContentProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<CardContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"px-4 group-data-[size=sm]/card:px-3\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"content\"\n data-slot=\"card-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
1849
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface CardContentProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<CardContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"px-4 group-data-[size=sm]/card:px-3\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"card\"\r\n data-part=\"content\"\r\n data-slot=\"card-content\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
1845
1850
  type: "registry:ui",
1846
1851
  path: "card/card-content.vue"
1847
1852
  },
1848
1853
  {
1849
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardDescriptionProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<CardDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-muted-foreground text-sm\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"description\"\n data-slot=\"card-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
1854
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface CardDescriptionProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<CardDescriptionProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"text-muted-foreground text-sm\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"card\"\r\n data-part=\"description\"\r\n data-slot=\"card-description\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
1850
1855
  type: "registry:ui",
1851
1856
  path: "card/card-description.vue"
1852
1857
  },
1853
1858
  {
1854
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardFooterProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<CardFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"footer\"\n data-slot=\"card-footer\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
1859
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface CardFooterProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<CardFooterProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"card\"\r\n data-part=\"footer\"\r\n data-slot=\"card-footer\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
1855
1860
  type: "registry:ui",
1856
1861
  path: "card/card-footer.vue"
1857
1862
  },
1858
1863
  {
1859
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardHeaderProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<CardHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"header\"\n data-slot=\"card-header\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
1864
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface CardHeaderProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<CardHeaderProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"card\"\r\n data-part=\"header\"\r\n data-slot=\"card-header\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
1860
1865
  type: "registry:ui",
1861
1866
  path: "card/card-header.vue"
1862
1867
  },
1863
1868
  {
1864
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardTitleProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<CardTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"title\"\n data-slot=\"card-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
1869
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface CardTitleProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<CardTitleProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"card\"\r\n data-part=\"title\"\r\n data-slot=\"card-title\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
1865
1870
  type: "registry:ui",
1866
1871
  path: "card/card-title.vue"
1867
1872
  },
@@ -1886,7 +1891,7 @@ const PRESETS = {
1886
1891
  "lucide-vue-next"
1887
1892
  ],
1888
1893
  files: [{
1889
- 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",
1894
+ content: "<script lang=\"ts\">\r\nimport type { CheckboxRootProps } from \"@sprawlify/vue/checkbox\";\r\n\r\nexport interface CheckboxProps extends /* @vue-ignore */ CheckboxRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/vue/checkbox\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { CheckIcon } from \"lucide-vue-next\";\r\n\r\nconst { ...rest } = defineProps<CheckboxProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <CheckboxPrimitive.Root data-slot=\"checkbox\" :class=\"className\" v-bind=\"rest\">\r\n <CheckboxPrimitive.Indicator\r\n data-slot=\"checkbox-indicator\"\r\n class=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\r\n >\r\n <CheckIcon />\r\n </CheckboxPrimitive.Indicator>\r\n <CheckboxPrimitive.HiddenInput />\r\n </CheckboxPrimitive.Root>\r\n</template>\r\n",
1890
1895
  type: "registry:ui",
1891
1896
  path: "checkbox/checkbox.vue"
1892
1897
  }, {
@@ -1904,17 +1909,17 @@ const PRESETS = {
1904
1909
  ],
1905
1910
  files: [
1906
1911
  {
1907
- 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",
1912
+ content: "<script lang=\"ts\">\r\nimport type { CollapsibleContentProps as CollapsiblePrimitiveContentProps } from \"@sprawlify/vue/collapsible\";\r\n\r\nexport interface CollapsibleContentProps\r\n extends /* @vue-ignore */ CollapsiblePrimitiveContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { ...rest } = defineProps<CollapsibleContentProps>();\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 <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" :class=\"className\" v-bind=\"rest\">\r\n <slot />\r\n </CollapsiblePrimitive.Content>\r\n</template>\r\n",
1908
1913
  type: "registry:ui",
1909
1914
  path: "collapsible/collapsible-content.vue"
1910
1915
  },
1911
1916
  {
1912
- 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",
1917
+ content: "<script lang=\"ts\">\r\nimport type { CollapsibleTriggerProps as CollapsiblePrimitiveTriggerProps } from \"@sprawlify/vue/collapsible\";\r\n\r\nexport interface CollapsibleTriggerProps\r\n extends /* @vue-ignore */ CollapsiblePrimitiveTriggerProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { ...rest } = defineProps<CollapsibleTriggerProps>();\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 <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" :class=\"className\" v-bind=\"rest\">\r\n <slot />\r\n </CollapsiblePrimitive.Trigger>\r\n</template>\r\n",
1913
1918
  type: "registry:ui",
1914
1919
  path: "collapsible/collapsible-trigger.vue"
1915
1920
  },
1916
1921
  {
1917
- 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",
1922
+ content: "<script lang=\"ts\">\r\nimport type { CollapsibleRootProps } from \"@sprawlify/vue/collapsible\";\r\n\r\nexport interface CollapsibleProps extends /* @vue-ignore */ CollapsibleRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/vue/collapsible\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { ...rest } = defineProps<CollapsibleProps>();\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 <CollapsiblePrimitive.Root data-slot=\"collapsible\" :class=\"className\" v-bind=\"rest\">\r\n <slot />\r\n </CollapsiblePrimitive.Root>\r\n</template>\r\n",
1918
1923
  type: "registry:ui",
1919
1924
  path: "collapsible/collapsible.vue"
1920
1925
  },
@@ -1935,77 +1940,77 @@ const PRESETS = {
1935
1940
  ],
1936
1941
  files: [
1937
1942
  {
1938
- 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",
1943
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuCheckboxItemProps\r\n extends /* @vue-ignore */ DropdownMenuCheckboxItemPrimitiveProps {\r\n inset?: boolean;\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { CheckIcon } from \"lucide-vue-next\";\r\n\r\nconst { inset, value, checked, ...rest } = defineProps<DropdownMenuCheckboxItemProps>();\r\n\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <DropdownMenuPrimitive.CheckboxItem\r\n data-slot=\"dropdown-menu-checkbox-item\"\r\n :data-inset=\"inset\"\r\n :value=\"value\"\r\n :checked=\"checked\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <span\r\n class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\r\n data-slot=\"dropdown-menu-checkbox-item-indicator\"\r\n >\r\n <DropdownMenuPrimitive.ItemIndicator>\r\n <CheckIcon />\r\n </DropdownMenuPrimitive.ItemIndicator>\r\n </span>\r\n <slot />\r\n </DropdownMenuPrimitive.CheckboxItem>\r\n</template>\r\n",
1939
1944
  type: "registry:ui",
1940
1945
  path: "dropdown-menu/dropdown-menu-checkbox-item.vue"
1941
1946
  },
1942
1947
  {
1943
- 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",
1948
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuContentProps\r\n extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuContentProps>();\r\n\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\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 <DropdownMenuPrimitive.Positioner>\r\n <DropdownMenuPrimitive.Content\r\n data-slot=\"dropdown-menu-content\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.Content>\r\n </DropdownMenuPrimitive.Positioner>\r\n </Teleport>\r\n</template>\r\n",
1944
1949
  type: "registry:ui",
1945
1950
  path: "dropdown-menu/dropdown-menu-content.vue"
1946
1951
  },
1947
1952
  {
1948
- 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",
1953
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuGroupProps extends /* @vue-ignore */ DropdownMenuItemGroupProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuGroupProps>();\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 <DropdownMenuPrimitive.ItemGroup\r\n data-slot=\"dropdown-menu-group\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.ItemGroup>\r\n</template>\r\n",
1949
1954
  type: "registry:ui",
1950
1955
  path: "dropdown-menu/dropdown-menu-group.vue"
1951
1956
  },
1952
1957
  {
1953
- 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",
1958
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuItemProps as DropdownMenuPrimitiveItemProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuItemProps extends /* @vue-ignore */ DropdownMenuPrimitiveItemProps {\r\n inset?: boolean;\r\n variant?: \"default\" | \"destructive\";\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { inset, variant = \"default\", asChild, ...rest } = defineProps<DropdownMenuItemProps>();\r\n\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <DropdownMenuPrimitive.Item\r\n data-slot=\"dropdown-menu-item\"\r\n :data-inset=\"inset\"\r\n :data-variant=\"variant\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.Item>\r\n</template>\r\n",
1954
1959
  type: "registry:ui",
1955
1960
  path: "dropdown-menu/dropdown-menu-item.vue"
1956
1961
  },
1957
1962
  {
1958
- 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",
1963
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuItemGroupLabelProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuLabelProps extends /* @vue-ignore */ DropdownMenuItemGroupLabelProps {\r\n inset?: boolean;\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { inset, asChild, ...rest } = defineProps<DropdownMenuLabelProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset=true]:pl-7\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <DropdownMenuPrimitive.ItemGroupLabel\r\n data-slot=\"dropdown-menu-label\"\r\n :data-inset=\"inset\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.ItemGroupLabel>\r\n</template>\r\n",
1959
1964
  type: "registry:ui",
1960
1965
  path: "dropdown-menu/dropdown-menu-label.vue"
1961
1966
  },
1962
1967
  {
1963
- content: "<script lang=\"ts\">\nexport interface DropdownMenuPortalProps {\n to?: string | Element;\n disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<DropdownMenuPortalProps>();\n<\/script>\n\n<template>\n <Teleport\n data-slot=\"dropdown-menu-portal\"\n :to=\"to || 'body'\"\n :disabled=\"disabled || false\"\n v-bind=\"rest\"\n >\n <slot />\n </Teleport>\n</template>\n",
1968
+ content: "<script lang=\"ts\">\r\nexport interface DropdownMenuPortalProps {\r\n to?: string | Element;\r\n disabled?: boolean;\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nconst { to, disabled, ...rest } = defineProps<DropdownMenuPortalProps>();\r\n<\/script>\r\n\r\n<template>\r\n <Teleport\r\n data-slot=\"dropdown-menu-portal\"\r\n :to=\"to || 'body'\"\r\n :disabled=\"disabled || false\"\r\n v-bind=\"rest\"\r\n >\r\n <slot />\r\n </Teleport>\r\n</template>\r\n",
1964
1969
  type: "registry:ui",
1965
1970
  path: "dropdown-menu/dropdown-menu-portal.vue"
1966
1971
  },
1967
1972
  {
1968
- 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",
1973
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuRadioItemGroupProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuRadioGroupProps\r\n extends /* @vue-ignore */ DropdownMenuRadioItemGroupProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuRadioGroupProps>();\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 <DropdownMenuPrimitive.RadioItemGroup\r\n data-slot=\"dropdown-menu-radio-group\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.RadioItemGroup>\r\n</template>\r\n",
1969
1974
  type: "registry:ui",
1970
1975
  path: "dropdown-menu/dropdown-menu-radio-group.vue"
1971
1976
  },
1972
1977
  {
1973
- 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",
1978
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuRadioItemProps as DropdownMenuPrimitiveRadioItemProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuRadioItemProps\r\n extends /* @vue-ignore */ DropdownMenuPrimitiveRadioItemProps {\r\n inset?: boolean;\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { CheckIcon } from \"lucide-vue-next\";\r\n\r\nconst { inset, value, ...rest } = defineProps<DropdownMenuRadioItemProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <DropdownMenuPrimitive.RadioItem\r\n data-slot=\"dropdown-menu-radio-item\"\r\n :data-inset=\"inset\"\r\n :value=\"value\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <span\r\n class=\"absolute right-2 flex items-center justify-center pointer-events-none\"\r\n data-slot=\"dropdown-menu-radio-item-indicator\"\r\n >\r\n <DropdownMenuPrimitive.ItemIndicator>\r\n <CheckIcon />\r\n </DropdownMenuPrimitive.ItemIndicator>\r\n </span>\r\n <slot />\r\n </DropdownMenuPrimitive.RadioItem>\r\n</template>\r\n",
1974
1979
  type: "registry:ui",
1975
1980
  path: "dropdown-menu/dropdown-menu-radio-item.vue"
1976
1981
  },
1977
1982
  {
1978
- 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",
1983
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuSeparatorProps as DropdownMenuPrimitiveSeparatorProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuSeparatorProps\r\n extends /* @vue-ignore */ DropdownMenuPrimitiveSeparatorProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuSeparatorProps>();\r\n\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"bg-border -mx-1 my-1 h-px\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <DropdownMenuPrimitive.Separator\r\n data-slot=\"dropdown-menu-separator\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n />\r\n</template>\r\n",
1979
1984
  type: "registry:ui",
1980
1985
  path: "dropdown-menu/dropdown-menu-separator.vue"
1981
1986
  },
1982
1987
  {
1983
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface DropdownMenuShortcutProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<DropdownMenuShortcutProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.span\n data-slot=\"dropdown-menu-shortcut\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
1988
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface DropdownMenuShortcutProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuShortcutProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.span\r\n data-slot=\"dropdown-menu-shortcut\"\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>\r\n",
1984
1989
  type: "registry:ui",
1985
1990
  path: "dropdown-menu/dropdown-menu-shortcut.vue"
1986
1991
  },
1987
1992
  {
1988
- 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",
1993
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuContentProps as DropdownMenuPrimitiveContentProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuSubContentProps\r\n extends /* @vue-ignore */ DropdownMenuPrimitiveContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuSubContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\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 <DropdownMenuPrimitive.Positioner>\r\n <DropdownMenuPrimitive.Content\r\n data-slot=\"dropdown-menu-sub-content\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.Content>\r\n </DropdownMenuPrimitive.Positioner>\r\n </Teleport>\r\n</template>\r\n",
1989
1994
  type: "registry:ui",
1990
1995
  path: "dropdown-menu/dropdown-menu-sub-content.vue"
1991
1996
  },
1992
1997
  {
1993
- 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",
1998
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuTriggerItemProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuSubTriggerProps\r\n extends /* @vue-ignore */ DropdownMenuTriggerItemProps {\r\n inset?: boolean;\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ChevronRightIcon } from \"lucide-vue-next\";\r\n\r\nconst { inset, ...rest } = defineProps<DropdownMenuSubTriggerProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <DropdownMenuPrimitive.TriggerItem\r\n data-slot=\"dropdown-menu-sub-trigger\"\r\n :data-inset=\"inset\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <slot />\r\n <ChevronRightIcon class=\"cn-rtl-flip ml-auto\" />\r\n </DropdownMenuPrimitive.TriggerItem>\r\n</template>\r\n",
1994
1999
  type: "registry:ui",
1995
2000
  path: "dropdown-menu/dropdown-menu-sub-trigger.vue"
1996
2001
  },
1997
2002
  {
1998
- 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",
2003
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuSubProps extends /* @vue-ignore */ DropdownMenuRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuSubProps>();\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 <DropdownMenuPrimitive.Root\r\n data-slot=\"dropdown-menu-sub\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.Root>\r\n</template>\r\n",
1999
2004
  type: "registry:ui",
2000
2005
  path: "dropdown-menu/dropdown-menu-sub.vue"
2001
2006
  },
2002
2007
  {
2003
- 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",
2008
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuTriggerProps as DropdownMenuPrimitiveTriggerProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuTriggerProps\r\n extends /* @vue-ignore */ DropdownMenuPrimitiveTriggerProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<DropdownMenuTriggerProps>();\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 <DropdownMenuPrimitive.Trigger\r\n data-slot=\"dropdown-menu-trigger\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.Trigger>\r\n</template>\r\n",
2004
2009
  type: "registry:ui",
2005
2010
  path: "dropdown-menu/dropdown-menu-trigger.vue"
2006
2011
  },
2007
2012
  {
2008
- 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",
2013
+ content: "<script lang=\"ts\">\r\nimport type { DropdownMenuRootProps } from \"@sprawlify/vue/dropdown-menu\";\r\n\r\nexport interface DropdownMenuProps extends /* @vue-ignore */ DropdownMenuRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/vue/dropdown-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, positioning, ...rest } = defineProps<DropdownMenuProps>();\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 <DropdownMenuPrimitive.Root\r\n data-slot=\"dropdown-menu\"\r\n :positioning=\"{ offset: { mainAxis: 4 }, ...positioning }\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </DropdownMenuPrimitive.Root>\r\n</template>\r\n",
2009
2014
  type: "registry:ui",
2010
2015
  path: "dropdown-menu/dropdown-menu.vue"
2011
2016
  },
@@ -2026,27 +2031,27 @@ const PRESETS = {
2026
2031
  ],
2027
2032
  files: [
2028
2033
  {
2029
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyContentProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<EmptyContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"empty-content\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
2034
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface EmptyContentProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<EmptyContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div data-slot=\"empty-content\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2030
2035
  type: "registry:ui",
2031
2036
  path: "empty/empty-content.vue"
2032
2037
  },
2033
2038
  {
2034
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyDescriptionProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<EmptyDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.p data-slot=\"empty-description\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.p>\n</template>\n",
2039
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface EmptyDescriptionProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<EmptyDescriptionProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.p data-slot=\"empty-description\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\r\n <slot />\r\n </sprawlify.p>\r\n</template>\r\n",
2035
2040
  type: "registry:ui",
2036
2041
  path: "empty/empty-description.vue"
2037
2042
  },
2038
2043
  {
2039
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyHeaderProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<EmptyHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 flex max-w-sm flex-col items-center\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"empty-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
2044
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface EmptyHeaderProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<EmptyHeaderProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"gap-2 flex max-w-sm flex-col items-center\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div data-slot=\"empty-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2040
2045
  type: "registry:ui",
2041
2046
  path: "empty/empty-header.vue"
2042
2047
  },
2043
2048
  {
2044
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const emptyMediaVariants = cva(\n \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface EmptyMediaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: VariantProps<typeof emptyMediaVariants>[\"variant\"];\n}\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 { variant = \"default\", ...rest } = defineProps<EmptyMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(emptyMediaVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"empty-icon\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2049
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const emptyMediaVariants = cva(\r\n \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-transparent\",\r\n icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n },\r\n);\r\n\r\nexport interface EmptyMediaProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {\r\n variant?: VariantProps<typeof emptyMediaVariants>[\"variant\"];\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { variant = \"default\", ...rest } = defineProps<EmptyMediaProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(emptyMediaVariants({ variant }), attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-slot=\"empty-icon\"\r\n :data-variant=\"variant\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2045
2050
  type: "registry:ui",
2046
2051
  path: "empty/empty-media.vue"
2047
2052
  },
2048
2053
  {
2049
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyTitleProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<EmptyTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-sm font-medium tracking-tight\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"empty-title\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
2054
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface EmptyTitleProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<EmptyTitleProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"text-sm font-medium tracking-tight\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div data-slot=\"empty-title\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2050
2055
  type: "registry:ui",
2051
2056
  path: "empty/empty-title.vue"
2052
2057
  },
@@ -2142,7 +2147,7 @@ const PRESETS = {
2142
2147
  type: "registry:ui",
2143
2148
  path: "input/index.ts"
2144
2149
  }, {
2145
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { InputHTMLAttributes } from \"vue\";\n\nexport interface InputProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n InputHTMLAttributes {\n type?: string;\n}\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, type, ...rest } = defineProps<InputProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.input\n :type=\"type\"\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n />\n</template>\n",
2150
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { InputHTMLAttributes } from \"vue\";\r\n\r\nexport interface InputProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n InputHTMLAttributes {\r\n type?: string;\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, type, ...rest } = defineProps<InputProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.input\r\n :type=\"type\"\r\n data-scope=\"input\"\r\n data-part=\"root\"\r\n data-slot=\"input\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n />\r\n</template>\r\n",
2146
2151
  type: "registry:ui",
2147
2152
  path: "input/input.vue"
2148
2153
  }]
@@ -2165,32 +2170,32 @@ const PRESETS = {
2165
2170
  path: "input-group/index.ts"
2166
2171
  },
2167
2172
  {
2168
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nexport interface InputGroupAddonProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n align?: VariantProps<typeof inputGroupAddonVariants>[\"align\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { align = \"inline-start\", role = \"group\", ...rest } = defineProps<InputGroupAddonProps>();\n\nconst className = computed(() => cn(inputGroupAddonVariants({ align }), rest.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n :role=\"role\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n :data-align=\"align\"\n v-bind=\"{ ...rest, class: className }\"\n :as-child=\"asChild\"\n @click=\"\n (e) => {\n if ((e.target as HTMLElement).closest('button')) {\n return;\n }\n (e.currentTarget as HTMLElement).parentElement?.querySelector('input')?.focus();\n }\n \"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2173
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const inputGroupAddonVariants = cva(\r\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\r\n {\r\n variants: {\r\n align: {\r\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\r\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\r\n \"block-start\":\r\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\r\n \"block-end\":\r\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\r\n },\r\n },\r\n defaultVariants: {\r\n align: \"inline-start\",\r\n },\r\n },\r\n);\r\n\r\nexport interface InputGroupAddonProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {\r\n align?: VariantProps<typeof inputGroupAddonVariants>[\"align\"];\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { align = \"inline-start\", role = \"group\", ...rest } = defineProps<InputGroupAddonProps>();\r\n\r\nconst className = computed(() => cn(inputGroupAddonVariants({ align }), rest.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n :role=\"role\"\r\n data-scope=\"input-group\"\r\n data-part=\"addon\"\r\n data-slot=\"input-group-addon\"\r\n :data-align=\"align\"\r\n v-bind=\"{ ...rest, class: className }\"\r\n :as-child=\"asChild\"\r\n @click=\"\r\n (e) => {\r\n if ((e.target as HTMLElement).closest('button')) {\r\n return;\r\n }\r\n (e.currentTarget as HTMLElement).parentElement?.querySelector('input')?.focus();\r\n }\r\n \"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2169
2174
  type: "registry:ui",
2170
2175
  path: "input-group/input-group-addon.vue"
2171
2176
  },
2172
2177
  {
2173
- content: "<script lang=\"ts\">\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ButtonProps } from \"@/components/ui/button\";\n\nexport const inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nexport interface InputGroupButtonProps extends Omit<ButtonProps, \"size\"> {\n size?: VariantProps<typeof inputGroupButtonVariants>[\"size\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n size = \"xs\",\n type = \"button\",\n variant = \"ghost\",\n ...rest\n} = defineProps<InputGroupButtonProps>();\n\nconst className = computed(() => cn(inputGroupButtonVariants({ size }), rest.class as string));\n<\/script>\n\n<template>\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n :type=\"type\"\n :data-size=\"size\"\n :variant=\"variant\"\n v-bind=\"{ ...rest, class: className }\"\n :as-child=\"asChild\"\n >\n <slot />\n </Button>\n</template>\n",
2178
+ content: "<script lang=\"ts\">\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport type { ButtonProps } from \"@/components/ui/button\";\r\n\r\nexport const inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\r\n variants: {\r\n size: {\r\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\r\n sm: \"\",\r\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\r\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"xs\",\r\n },\r\n});\r\n\r\nexport interface InputGroupButtonProps extends Omit<ButtonProps, \"size\"> {\r\n size?: VariantProps<typeof inputGroupButtonVariants>[\"size\"];\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from \"vue\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst {\r\n size = \"xs\",\r\n type = \"button\",\r\n variant = \"ghost\",\r\n ...rest\r\n} = defineProps<InputGroupButtonProps>();\r\n\r\nconst className = computed(() => cn(inputGroupButtonVariants({ size }), rest.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <Button\r\n data-scope=\"input-group\"\r\n data-part=\"button\"\r\n :type=\"type\"\r\n :data-size=\"size\"\r\n :variant=\"variant\"\r\n v-bind=\"{ ...rest, class: className }\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </Button>\r\n</template>\r\n",
2174
2179
  type: "registry:ui",
2175
2180
  path: "input-group/input-group-button.vue"
2176
2181
  },
2177
2182
  {
2178
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { InputHTMLAttributes } from \"vue\";\n\nexport interface InputGroupInputProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n InputHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, type, ...rest } = defineProps<InputGroupInputProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n :type=\"type\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n />\n</template>\n",
2183
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { InputHTMLAttributes } from \"vue\";\r\n\r\nexport interface InputGroupInputProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n InputHTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, type, ...rest } = defineProps<InputGroupInputProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <Input\r\n data-scope=\"input-group\"\r\n data-part=\"control\"\r\n data-slot=\"input-group-control\"\r\n :type=\"type\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n />\r\n</template>\r\n",
2179
2184
  type: "registry:ui",
2180
2185
  path: "input-group/input-group-input.vue"
2181
2186
  },
2182
2187
  {
2183
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface InputGroupTextProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<InputGroupTextProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
2188
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface InputGroupTextProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<InputGroupTextProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.span\r\n data-scope=\"input-group\"\r\n data-part=\"text\"\r\n data-slot=\"input-group-text\"\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>\r\n",
2184
2189
  type: "registry:ui",
2185
2190
  path: "input-group/input-group-text.vue"
2186
2191
  },
2187
2192
  {
2188
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TextareaHTMLAttributes } from \"vue\";\n\nexport interface InputGroupTextareaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n TextareaHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\n\nconst props = defineProps<InputGroupTextareaProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Textarea\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n v-bind=\"{ ...attrs, class: className }\"\n :as-child=\"asChild\"\n />\n</template>\n",
2193
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { TextareaHTMLAttributes } from \"vue\";\r\n\r\nexport interface InputGroupTextareaProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n TextareaHTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Textarea } from \"@/components/ui/textarea\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst props = defineProps<InputGroupTextareaProps>();\r\n\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <Textarea\r\n data-scope=\"input-group\"\r\n data-part=\"control\"\r\n data-slot=\"input-group-control\"\r\n v-bind=\"{ ...attrs, class: className }\"\r\n :as-child=\"asChild\"\r\n />\r\n</template>\r\n",
2189
2194
  type: "registry:ui",
2190
2195
  path: "input-group/input-group-textarea.vue"
2191
2196
  },
2192
2197
  {
2193
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface InputGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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, role = \"group\", ...rest } = defineProps<InputGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n :role=\"role\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2198
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface InputGroupProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, role = \"group\", ...rest } = defineProps<InputGroupProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"input-group\"\r\n data-part=\"root\"\r\n data-slot=\"input-group\"\r\n :role=\"role\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2194
2199
  type: "registry:ui",
2195
2200
  path: "input-group/input-group.vue"
2196
2201
  }
@@ -2212,52 +2217,52 @@ const PRESETS = {
2212
2217
  path: "item/index.ts"
2213
2218
  },
2214
2219
  {
2215
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemActionsProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<ItemActionsProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"gap-2 flex items-center\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"actions\"\n data-slot=\"item-actions\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2220
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemActionsProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<ItemActionsProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"gap-2 flex items-center\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"actions\"\r\n data-slot=\"item-actions\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2216
2221
  type: "registry:ui",
2217
2222
  path: "item/item-actions.vue"
2218
2223
  },
2219
2224
  {
2220
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemContentProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<ItemContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"content\"\n data-slot=\"item-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2225
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemContentProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<ItemContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"content\"\r\n data-slot=\"item-content\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2221
2226
  type: "registry:ui",
2222
2227
  path: "item/item-content.vue"
2223
2228
  },
2224
2229
  {
2225
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemDescriptionProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<ItemDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.p\n data-scope=\"item\"\n data-part=\"description\"\n data-slot=\"item-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.p>\n</template>\n",
2230
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemDescriptionProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<ItemDescriptionProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.p\r\n data-scope=\"item\"\r\n data-part=\"description\"\r\n data-slot=\"item-description\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.p>\r\n</template>\r\n",
2226
2231
  type: "registry:ui",
2227
2232
  path: "item/item-description.vue"
2228
2233
  },
2229
2234
  {
2230
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemFooterProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<ItemFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 flex basis-full items-center justify-between\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"footer\"\n data-slot=\"item-footer\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2235
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemFooterProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<ItemFooterProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"gap-2 flex basis-full items-center justify-between\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"footer\"\r\n data-slot=\"item-footer\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2231
2236
  type: "registry:ui",
2232
2237
  path: "item/item-footer.vue"
2233
2238
  },
2234
2239
  {
2235
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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, role = \"list\", ...rest } = defineProps<ItemGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n :role=\"role\"\n data-scope=\"item\"\n data-part=\"group\"\n data-slot=\"item-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2240
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemGroupProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, role = \"list\", ...rest } = defineProps<ItemGroupProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n :role=\"role\"\r\n data-scope=\"item\"\r\n data-part=\"group\"\r\n data-slot=\"item-group\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2236
2241
  type: "registry:ui",
2237
2242
  path: "item/item-group.vue"
2238
2243
  },
2239
2244
  {
2240
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemHeaderProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<ItemHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 flex basis-full items-center justify-between\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"header\"\n data-slot=\"item-header\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2245
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemHeaderProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<ItemHeaderProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"gap-2 flex basis-full items-center justify-between\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"header\"\r\n data-slot=\"item-header\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2241
2246
  type: "registry:ui",
2242
2247
  path: "item/item-header.vue"
2243
2248
  },
2244
2249
  {
2245
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image:\n \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface ItemMediaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: VariantProps<typeof itemMediaVariants>[\"variant\"];\n}\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, variant = \"default\", ...rest } = defineProps<ItemMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(itemMediaVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"media\"\n data-slot=\"item-media\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2250
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const itemMediaVariants = cva(\r\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-transparent\",\r\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\r\n image:\r\n \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n },\r\n);\r\n\r\nexport interface ItemMediaProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {\r\n variant?: VariantProps<typeof itemMediaVariants>[\"variant\"];\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, variant = \"default\", ...rest } = defineProps<ItemMediaProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(itemMediaVariants({ variant }), attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"media\"\r\n data-slot=\"item-media\"\r\n :data-variant=\"variant\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2246
2251
  type: "registry:ui",
2247
2252
  path: "item/item-media.vue"
2248
2253
  },
2249
2254
  {
2250
- content: "<script lang=\"ts\">\nimport type { SeparatorProps } from \"@/components/ui/separator\";\n\nexport interface ItemSeparatorProps extends 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 { asChild, orientation = \"horizontal\", ...rest } = defineProps<ItemSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"my-2\", attrs.class as string));\n<\/script>\n\n<template>\n <Separator\n data-scope=\"item\"\n data-part=\"separator\"\n data-slot=\"item-separator\"\n :orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </Separator>\n</template>\n",
2255
+ content: "<script lang=\"ts\">\r\nimport type { SeparatorProps } from \"@/components/ui/separator\";\r\n\r\nexport interface ItemSeparatorProps extends SeparatorProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Separator } from \"@/components/ui/separator\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, orientation = \"horizontal\", ...rest } = defineProps<ItemSeparatorProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"my-2\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <Separator\r\n data-scope=\"item\"\r\n data-part=\"separator\"\r\n data-slot=\"item-separator\"\r\n :orientation=\"orientation\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </Separator>\r\n</template>\r\n",
2251
2256
  type: "registry:ui",
2252
2257
  path: "item/item-separator.vue"
2253
2258
  },
2254
2259
  {
2255
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemTitleProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<ItemTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"title\"\n data-slot=\"item-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2260
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface ItemTitleProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<ItemTitleProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"title\"\r\n data-slot=\"item-title\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2256
2261
  type: "registry:ui",
2257
2262
  path: "item/item-title.vue"
2258
2263
  },
2259
2264
  {
2260
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const itemVariants = cva(\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ItemProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: VariantProps<typeof itemVariants>[\"variant\"];\n size?: VariantProps<typeof itemVariants>[\"size\"];\n}\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, variant = \"default\", size = \"default\", ...rest } = defineProps<ItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(itemVariants({ variant, size }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"root\"\n data-slot=\"item\"\n :data-variant=\"variant\"\n :data-size=\"size\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2265
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const itemVariants = cva(\r\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"border-transparent\",\r\n outline: \"border-border\",\r\n muted: \"bg-muted/50 border-transparent\",\r\n },\r\n size: {\r\n default: \"gap-2.5 px-3 py-2.5\",\r\n sm: \"gap-2.5 px-3 py-2.5\",\r\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n },\r\n);\r\n\r\nexport interface ItemProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {\r\n variant?: VariantProps<typeof itemVariants>[\"variant\"];\r\n size?: VariantProps<typeof itemVariants>[\"size\"];\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, variant = \"default\", size = \"default\", ...rest } = defineProps<ItemProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(itemVariants({ variant, size }), attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.div\r\n data-scope=\"item\"\r\n data-part=\"root\"\r\n data-slot=\"item\"\r\n :data-variant=\"variant\"\r\n :data-size=\"size\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.div>\r\n</template>\r\n",
2261
2266
  type: "registry:ui",
2262
2267
  path: "item/item.vue"
2263
2268
  }
@@ -2277,12 +2282,12 @@ const PRESETS = {
2277
2282
  path: "kbd/index.ts"
2278
2283
  },
2279
2284
  {
2280
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface KbdGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<KbdGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"gap-1 inline-flex items-center\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.kbd\n data-scope=\"kbd\"\n data-part=\"group\"\n data-slot=\"kbd-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.kbd>\n</template>\n",
2285
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface KbdGroupProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<KbdGroupProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"gap-1 inline-flex items-center\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.kbd\r\n data-scope=\"kbd\"\r\n data-part=\"group\"\r\n data-slot=\"kbd-group\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.kbd>\r\n</template>\r\n",
2281
2286
  type: "registry:ui",
2282
2287
  path: "kbd/kbd-group.vue"
2283
2288
  },
2284
2289
  {
2285
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface KbdProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<KbdProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.kbd\n data-scope=\"kbd\"\n data-part=\"root\"\n data-slot=\"kbd\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.kbd>\n</template>\n",
2290
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface KbdProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<KbdProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.kbd\r\n data-scope=\"kbd\"\r\n data-part=\"root\"\r\n data-slot=\"kbd\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.kbd>\r\n</template>\r\n",
2286
2291
  type: "registry:ui",
2287
2292
  path: "kbd/kbd.vue"
2288
2293
  }
@@ -2300,7 +2305,7 @@ const PRESETS = {
2300
2305
  type: "registry:ui",
2301
2306
  path: "label/index.ts"
2302
2307
  }, {
2303
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface LabelProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n 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<LabelProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.label\n data-scope=\"label\"\n data-part=\"root\"\n data-slot=\"label\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.label>\n</template>\n",
2308
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { HTMLAttributes } from \"vue\";\r\n\r\nexport interface LabelProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n HTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<LabelProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.label\r\n data-scope=\"label\"\r\n data-part=\"root\"\r\n data-slot=\"label\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </sprawlify.label>\r\n</template>\r\n",
2304
2309
  type: "registry:ui",
2305
2310
  path: "label/label.vue"
2306
2311
  }]
@@ -2319,17 +2324,17 @@ const PRESETS = {
2319
2324
  path: "native-select/index.ts"
2320
2325
  },
2321
2326
  {
2322
- 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",
2327
+ content: "<script lang=\"ts\">\r\nimport type { OptgroupHTMLAttributes } from \"vue\";\r\n\r\nexport interface NativeSelectOptGroupProps extends /* @vue-ignore */ OptgroupHTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { ...rest } = defineProps<NativeSelectOptGroupProps>();\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 <optgroup\r\n data-scope=\"native-select\"\r\n data-part=\"optgroup\"\r\n data-slot=\"native-select-optgroup\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <slot />\r\n </optgroup>\r\n</template>\r\n",
2323
2328
  type: "registry:ui",
2324
2329
  path: "native-select/native-select-optgroup.vue"
2325
2330
  },
2326
2331
  {
2327
- 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",
2332
+ content: "<script lang=\"ts\">\r\nimport type { OptionHTMLAttributes } from \"vue\";\r\n\r\nexport interface NativeSelectOptionProps extends /* @vue-ignore */ OptionHTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { ...rest } = defineProps<NativeSelectOptionProps>();\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 <option\r\n data-scope=\"native-select\"\r\n data-part=\"option\"\r\n data-slot=\"native-select-option\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <slot />\r\n </option>\r\n</template>\r\n",
2328
2333
  type: "registry:ui",
2329
2334
  path: "native-select/native-select-option.vue"
2330
2335
  },
2331
2336
  {
2332
- 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",
2337
+ content: "<script lang=\"ts\">\r\nimport type { SelectHTMLAttributes } from \"vue\";\r\nimport { ChevronDownIcon } from \"lucide-vue-next\";\r\n\r\nexport interface NativeSelectProps extends /* @vue-ignore */ Omit<SelectHTMLAttributes, \"size\"> {\r\n size?: \"sm\" | \"default\";\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { size = \"default\", ...rest } = defineProps<NativeSelectProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst wrapperClassName = computed(() =>\r\n cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", attrs.class as string),\r\n);\r\n\r\nconst selectClassName = computed(() =>\r\n cn(\r\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\",\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <div\r\n :class=\"wrapperClassName\"\r\n data-scope=\"native-select\"\r\n data-part=\"root\"\r\n data-slot=\"native-select-root\"\r\n :data-size=\"size\"\r\n >\r\n <select data-slot=\"native-select\" :data-size=\"size\" :class=\"selectClassName\" v-bind=\"rest\">\r\n <slot />\r\n </select>\r\n <ChevronDownIcon\r\n class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\r\n aria-hidden=\"true\"\r\n data-slot=\"native-select-icon\"\r\n />\r\n </div>\r\n</template>\r\n",
2333
2338
  type: "registry:ui",
2334
2339
  path: "native-select/native-select.vue"
2335
2340
  }
@@ -2349,12 +2354,12 @@ const PRESETS = {
2349
2354
  path: "scroll-area/index.ts"
2350
2355
  },
2351
2356
  {
2352
- 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",
2357
+ content: "<script lang=\"ts\">\r\nimport type { ScrollAreaRootProps } from \"@sprawlify/vue/scroll-area\";\r\n\r\nexport interface ScrollAreaProps extends /* @vue-ignore */ ScrollAreaRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport ScrollBar from \"./scroll-bar.vue\";\r\n\r\nconst { ...rest } = defineProps<ScrollAreaProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"relative\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" :class=\"className\" v-bind=\"rest\">\r\n <ScrollAreaPrimitive.Viewport\r\n data-slot=\"scroll-area-viewport\"\r\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\"\r\n >\r\n <slot />\r\n </ScrollAreaPrimitive.Viewport>\r\n <ScrollBar />\r\n <ScrollAreaPrimitive.Corner />\r\n </ScrollAreaPrimitive.Root>\r\n</template>\r\n",
2353
2358
  type: "registry:ui",
2354
2359
  path: "scroll-area/scroll-area.vue"
2355
2360
  },
2356
2361
  {
2357
- 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",
2362
+ content: "<script lang=\"ts\">\r\nimport type { ScrollAreaScrollbarProps } from \"@sprawlify/vue/scroll-area\";\r\n\r\nexport interface ScrollBarProps extends /* @vue-ignore */ ScrollAreaScrollbarProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/vue/scroll-area\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { orientation = \"vertical\", ...rest } = defineProps<ScrollBarProps>();\r\n\r\nconst className = cn(\r\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\",\r\n rest.class as string,\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <ScrollAreaPrimitive.Scrollbar\r\n data-slot=\"scroll-area-scrollbar\"\r\n :data-orientation=\"orientation || 'vertical'\"\r\n :orientation=\"orientation\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <ScrollAreaPrimitive.Thumb\r\n data-slot=\"scroll-area-thumb\"\r\n class=\"rounded-full bg-border relative flex-1\"\r\n />\r\n </ScrollAreaPrimitive.Scrollbar>\r\n</template>\r\n",
2358
2363
  type: "registry:ui",
2359
2364
  path: "scroll-area/scroll-bar.vue"
2360
2365
  }
@@ -2372,7 +2377,7 @@ const PRESETS = {
2372
2377
  type: "registry:ui",
2373
2378
  path: "separator/index.ts"
2374
2379
  }, {
2375
- 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",
2380
+ content: "<script lang=\"ts\">\r\nimport type { SeparatorRootProps } from \"@sprawlify/vue/separator\";\r\n\r\nexport interface SeparatorProps extends /* @vue-ignore */ SeparatorRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/vue/separator\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst {\r\n orientation = \"horizontal\",\r\n decorative = true,\r\n asChild,\r\n ...rest\r\n} = defineProps<SeparatorProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <SeparatorPrimitive.Root\r\n data-slot=\"separator\"\r\n :decorative=\"decorative\"\r\n :orientation=\"orientation\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n </SeparatorPrimitive.Root>\r\n</template>\r\n",
2376
2381
  type: "registry:ui",
2377
2382
  path: "separator/separator.vue"
2378
2383
  }]
@@ -2392,22 +2397,22 @@ const PRESETS = {
2392
2397
  path: "tabs/index.ts"
2393
2398
  },
2394
2399
  {
2395
- 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",
2400
+ content: "<script lang=\"ts\">\r\nimport type { TabContentProps } from \"@sprawlify/vue/tabs\";\r\n\r\nexport interface TabsContentProps extends /* @vue-ignore */ TabContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { value, ...rest } = defineProps<TabsContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(\"text-sm flex-1 outline-none\", attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <TabsPrimitive.Content data-slot=\"tabs-content\" :class=\"className\" :value=\"value\" v-bind=\"rest\">\r\n <slot />\r\n </TabsPrimitive.Content>\r\n</template>\r\n",
2396
2401
  type: "registry:ui",
2397
2402
  path: "tabs/tabs-content.vue"
2398
2403
  },
2399
2404
  {
2400
- 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",
2405
+ content: "<script lang=\"ts\">\r\nimport type { TabListProps } from \"@sprawlify/vue/tabs\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const tabsListVariants = cva(\r\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\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-muted\",\r\n line: \"gap-1 bg-transparent\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n },\r\n);\r\n\r\nexport interface TabsListProps extends /* @vue-ignore */ TabListProps {\r\n variant?: VariantProps<typeof tabsListVariants>[\"variant\"];\r\n}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { variant = \"default\", ...rest } = defineProps<TabsListProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() => cn(tabsListVariants({ variant }), attrs.class as string));\r\n<\/script>\r\n\r\n<template>\r\n <TabsPrimitive.List\r\n data-slot=\"tabs-list\"\r\n :data-variant=\"variant\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n >\r\n <slot />\r\n </TabsPrimitive.List>\r\n</template>\r\n",
2401
2406
  type: "registry:ui",
2402
2407
  path: "tabs/tabs-list.vue"
2403
2408
  },
2404
2409
  {
2405
- 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",
2410
+ content: "<script lang=\"ts\">\r\nimport type { TabTriggerProps } from \"@sprawlify/vue/tabs\";\r\n\r\nexport interface TabsTriggerProps extends /* @vue-ignore */ TabTriggerProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { value, ...rest } = defineProps<TabsTriggerProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\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\",\r\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\",\r\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\",\r\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\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" :value=\"value\" :class=\"className\" v-bind=\"rest\">\r\n <slot />\r\n </TabsPrimitive.Trigger>\r\n</template>\r\n",
2406
2411
  type: "registry:ui",
2407
2412
  path: "tabs/tabs-trigger.vue"
2408
2413
  },
2409
2414
  {
2410
- 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",
2415
+ content: "<script lang=\"ts\">\r\nimport type { TabsRootProps } from \"@sprawlify/vue/tabs\";\r\n\r\nexport interface TabsProps extends /* @vue-ignore */ TabsRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Tabs as TabsPrimitive } from \"@sprawlify/vue/tabs\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { orientation = \"horizontal\", ...rest } = defineProps<TabsProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\", attrs.class as string),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <TabsPrimitive.Root data-slot=\"tabs\" :class=\"className\" v-bind=\"rest\">\r\n <slot />\r\n </TabsPrimitive.Root>\r\n</template>\r\n",
2411
2416
  type: "registry:ui",
2412
2417
  path: "tabs/tabs.vue"
2413
2418
  }
@@ -2425,7 +2430,7 @@ const PRESETS = {
2425
2430
  type: "registry:ui",
2426
2431
  path: "textarea/index.ts"
2427
2432
  }, {
2428
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TextareaHTMLAttributes } from \"vue\";\n\nexport interface TextareaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n TextareaHTMLAttributes {}\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 props = defineProps<TextareaProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n v-bind=\"{ ...attrs, class: className }\"\n :as-child=\"asChild\"\n />\n</template>\n",
2433
+ content: "<script lang=\"ts\">\r\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\r\nimport type { TextareaHTMLAttributes } from \"vue\";\r\n\r\nexport interface TextareaProps\r\n extends\r\n PolymorphicProps,\r\n /* @vue-ignore */\r\n TextareaHTMLAttributes {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { sprawlify } from \"@sprawlify/vue\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst props = defineProps<TextareaProps>();\r\n\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <sprawlify.textarea\r\n data-scope=\"textarea\"\r\n data-part=\"root\"\r\n data-slot=\"textarea\"\r\n v-bind=\"{ ...attrs, class: className }\"\r\n :as-child=\"asChild\"\r\n />\r\n</template>\r\n",
2429
2434
  type: "registry:ui",
2430
2435
  path: "textarea/textarea.vue"
2431
2436
  }]
@@ -2669,10 +2674,14 @@ dist-ssr
2669
2674
  "preview": "vite preview"
2670
2675
  },
2671
2676
  "dependencies": {
2672
- "@sprawlify/primitives": "^0.0.100",
2673
- "@sprawlify/react": "^0.0.100",
2677
+ "@sprawlify/primitives": "^0.0.102",
2678
+ "@sprawlify/react": "^0.0.102",
2674
2679
  "react": "^19.2.4",
2675
- "react-dom": "^19.2.4"
2680
+ "react-dom": "^19.2.4",
2681
+ "class-variance-authority": "^0.7.1",
2682
+ "lucide-react": "^0.577.0",
2683
+ "clsx": "^2.1.1",
2684
+ "tailwind-merge": "^3.5.0"
2676
2685
  },
2677
2686
  "devDependencies": {
2678
2687
  "@tailwindcss/vite": "^4.2.2",
@@ -2683,7 +2692,8 @@ dist-ssr
2683
2692
  "globals": "^17.4.0",
2684
2693
  "tailwindcss": "^4.2.2",
2685
2694
  "typescript": "^5.9.3",
2686
- "vite": "^8.0.1"
2695
+ "vite": "^8.0.1",
2696
+ "vite-tsconfig-paths": "^6.1.1"
2687
2697
  }
2688
2698
  }`
2689
2699
  },
@@ -2711,7 +2721,10 @@ dist-ssr
2711
2721
  "noUnusedParameters": true,
2712
2722
  "erasableSyntaxOnly": true,
2713
2723
  "noFallthroughCasesInSwitch": true,
2714
- "noUncheckedSideEffectImports": true
2724
+ "noUncheckedSideEffectImports": true,
2725
+ "paths": {
2726
+ "@/*": ["./src/*"]
2727
+ }
2715
2728
  },
2716
2729
  "include": ["src"]
2717
2730
  }`
@@ -2748,7 +2761,10 @@ dist-ssr
2748
2761
  "noUnusedParameters": true,
2749
2762
  "erasableSyntaxOnly": true,
2750
2763
  "noFallthroughCasesInSwitch": true,
2751
- "noUncheckedSideEffectImports": true
2764
+ "noUncheckedSideEffectImports": true,
2765
+ "paths": {
2766
+ "@/*": ["./src/*"]
2767
+ }
2752
2768
  },
2753
2769
  "include": ["vite.config.ts"]
2754
2770
  }`
@@ -2758,9 +2774,10 @@ dist-ssr
2758
2774
  content: `import { defineConfig } from "vite"
2759
2775
  import react from "@vitejs/plugin-react"
2760
2776
  import tailwindcss from "@tailwindcss/vite"
2777
+ import tsconfigPaths from "vite-tsconfig-paths";
2761
2778
 
2762
2779
  export default defineConfig({
2763
- plugins: [tailwindcss(), react()],
2780
+ plugins: [tsconfigPaths(), tailwindcss(), react()],
2764
2781
  })`
2765
2782
  }
2766
2783
  ] }),
@@ -2842,8 +2859,8 @@ dist-ssr
2842
2859
  "preview": "vite preview"
2843
2860
  },
2844
2861
  "dependencies": {
2845
- "@sprawlify/primitives": "^0.0.100",
2846
- "@sprawlify/solid": "^0.0.100",
2862
+ "@sprawlify/primitives": "^0.0.102",
2863
+ "@sprawlify/solid": "^0.0.102",
2847
2864
  "solid-js": "^1.9.11"
2848
2865
  },
2849
2866
  "devDependencies": {
@@ -3009,8 +3026,8 @@ dist-ssr
3009
3026
  "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
3010
3027
  },
3011
3028
  "dependencies": {
3012
- "@sprawlify/primitives": "^0.0.100",
3013
- "@sprawlify/svelte": "^0.0.100"
3029
+ "@sprawlify/primitives": "^0.0.102",
3030
+ "@sprawlify/svelte": "^0.0.102"
3014
3031
  },
3015
3032
  "devDependencies": {
3016
3033
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -3168,8 +3185,8 @@ dist-ssr
3168
3185
  "preview": "vite preview"
3169
3186
  },
3170
3187
  "dependencies": {
3171
- "@sprawlify/primitives": "^0.0.100",
3172
- "@sprawlify/vue": "^0.0.100",
3188
+ "@sprawlify/primitives": "^0.0.102",
3189
+ "@sprawlify/vue": "^0.0.102",
3173
3190
  "vue": "^3.5.30"
3174
3191
  },
3175
3192
  "devDependencies": {
@@ -3268,6 +3285,13 @@ function resolvePresetFilePath(cwd, file) {
3268
3285
  }
3269
3286
  return path.resolve(cwd, file.path);
3270
3287
  }
3288
+ function resolveTailwindCssFilePath(cwd, cssPath) {
3289
+ const srcPath = path.resolve(cwd, "src");
3290
+ const appPath = path.resolve(cwd, "app");
3291
+ if (fsExtra.existsSync(srcPath)) return path.resolve(srcPath, cssPath);
3292
+ if (fsExtra.existsSync(appPath)) return path.resolve(appPath, cssPath);
3293
+ return path.resolve(srcPath, cssPath);
3294
+ }
3271
3295
  function resolveItemsToApply(presetItems, requestedComponents) {
3272
3296
  const presetItemsByName = new Map(presetItems.map((item) => [item.name, item]));
3273
3297
  const itemNamesToApply = /* @__PURE__ */ new Set();
@@ -3353,11 +3377,13 @@ async function runInit(options) {
3353
3377
  }
3354
3378
  const componentsJsonPath = path.resolve(cwd, "components.json");
3355
3379
  logger.info("Starting project initialization...");
3380
+ const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
3356
3381
  const config = {
3357
3382
  $schema: "https://ui.primitives.com/schema.json",
3358
3383
  framework: options.framework,
3359
3384
  preset: options.preset,
3360
- metaframework: options.metaframework
3385
+ metaframework: options.metaframework,
3386
+ tailwindcss: { css: resolveTailwindCssFilePath(cwd, "globals.css") }
3361
3387
  };
3362
3388
  let backupPath = null;
3363
3389
  if (fsExtra.existsSync(componentsJsonPath)) {
@@ -3369,6 +3395,12 @@ async function runInit(options) {
3369
3395
  await fsExtra.ensureDir(path.dirname(componentsJsonPath));
3370
3396
  await fsExtra.writeJson(componentsJsonPath, config, { spaces: 2 });
3371
3397
  logger.success(`Created ${highlighter.info("components.json")} configuration file.`);
3398
+ if (frameworkPreset?.tailwindcss?.css && config.tailwindcss?.css) if (fsExtra.existsSync(config.tailwindcss.css) && !options.override) logger.warn(`Skipping ${highlighter.info(config.tailwindcss.css)} because it already exists. Use ${highlighter.info("--override")} to replace it.`);
3399
+ else {
3400
+ await fsExtra.ensureDir(path.dirname(config.tailwindcss.css));
3401
+ await fsExtra.writeFile(config.tailwindcss.css, frameworkPreset.tailwindcss.css, "utf8");
3402
+ logger.success(`Created ${highlighter.info(config.tailwindcss.css)} from preset.`);
3403
+ }
3372
3404
  } catch (error) {
3373
3405
  logger.error(`Failed to create components.json: ${error}`);
3374
3406
  if (backupPath && fsExtra.existsSync(backupPath)) {
@@ -3378,7 +3410,6 @@ async function runInit(options) {
3378
3410
  }
3379
3411
  throw error;
3380
3412
  }
3381
- const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
3382
3413
  const { itemsToApply, packageNames, unresolvedNames } = resolveItemsToApply(getPresetItems(options.preset, options.framework), new Set(options.components ?? []));
3383
3414
  if (unresolvedNames.size > 0) logger.warn(`Skipping unknown preset component options: ${[...unresolvedNames].map((componentName) => highlighter.info(componentName)).join(", ")}.`);
3384
3415
  if (itemsToApply.length === 0) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sprawlify",
3
- "version": "0.0.102",
3
+ "version": "0.0.103",
4
4
  "type": "module",
5
5
  "description": "A command-line interface for Sprawlify.",
6
6
  "author": "sprawlify <npm@sprawlify.com>",