sprawlify 0.0.102 → 0.0.104

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 +123 -75
  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.104";
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
- devDependencies: {},
208
+ devDependencies: { "tw-animate-css": "^1.4.0" },
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,16 @@ 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
- devDependencies: {},
246
+ devDependencies: {
247
+ "tailwind-scrollbar": "^4.0.6",
248
+ "tw-animate-css": "^1.4.0"
249
+ },
250
+ 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
251
  items: [
247
252
  {
248
253
  name: "alert",
@@ -549,12 +554,16 @@ const PRESETS = {
549
554
  dependencies: {
550
555
  "solid-js": "^1.8.0",
551
556
  "class-variance-authority": "^0.7.1",
552
- "@sprawlify/solid": "^0.0.100",
557
+ "@sprawlify/solid": "^0.0.102",
553
558
  "lucide-solid": "^0.400.0",
554
559
  clsx: "^2.1.1",
555
- "tailwind-merge": "^3.3.1"
560
+ "tailwind-merge": "^3.5.0"
561
+ },
562
+ devDependencies: {
563
+ "tailwind-scrollbar": "^4.0.6",
564
+ "tw-animate-css": "^1.4.0"
556
565
  },
557
- devDependencies: {},
566
+ 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
567
  items: [
559
568
  {
560
569
  name: "alert",
@@ -867,14 +876,18 @@ const PRESETS = {
867
876
  },
868
877
  svelte: {
869
878
  dependencies: {
870
- "@sprawlify/svelte": "^0.0.100",
879
+ "@sprawlify/svelte": "^0.0.102",
871
880
  svelte: "^4.0.0",
872
881
  "class-variance-authority": "^0.7.1",
873
882
  "lucide-svelte": "^0.400.0",
874
883
  clsx: "^2.1.1",
875
- "tailwind-merge": "^3.3.1"
884
+ "tailwind-merge": "^3.5.0"
885
+ },
886
+ devDependencies: {
887
+ "tailwind-scrollbar": "^4.0.6",
888
+ "tw-animate-css": "^1.4.0"
876
889
  },
877
- devDependencies: {},
890
+ 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
891
  items: [
879
892
  {
880
893
  name: "alert",
@@ -1655,14 +1668,18 @@ const PRESETS = {
1655
1668
  },
1656
1669
  vue: {
1657
1670
  dependencies: {
1658
- "@sprawlify/vue": "^0.0.100",
1671
+ "@sprawlify/vue": "^0.0.102",
1659
1672
  vue: "^3.4.0",
1660
1673
  "class-variance-authority": "^0.7.1",
1661
1674
  "lucide-vue-next": "^0.400.0",
1662
1675
  clsx: "^2.1.1",
1663
- "tailwind-merge": "^3.3.1"
1676
+ "tailwind-merge": "^3.5.0"
1664
1677
  },
1665
- devDependencies: {},
1678
+ devDependencies: {
1679
+ "tailwind-scrollbar": "^4.0.6",
1680
+ "tw-animate-css": "^1.4.0"
1681
+ },
1682
+ 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
1683
  items: [
1667
1684
  {
1668
1685
  name: "alert",
@@ -1704,7 +1721,7 @@ const PRESETS = {
1704
1721
  name: "aspect-ratio",
1705
1722
  dependencies: ["@sprawlify/vue"],
1706
1723
  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",
1724
+ 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",
1708
1725
  type: "registry:ui",
1709
1726
  path: "aspect-ratio/aspect-ratio.vue"
1710
1727
  }, {
@@ -1727,7 +1744,7 @@ const PRESETS = {
1727
1744
  path: "avatar/avatar-badge.vue"
1728
1745
  },
1729
1746
  {
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",
1747
+ 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",
1731
1748
  type: "registry:ui",
1732
1749
  path: "avatar/avatar-fallback.vue"
1733
1750
  },
@@ -1742,12 +1759,12 @@ const PRESETS = {
1742
1759
  path: "avatar/avatar-group.vue"
1743
1760
  },
1744
1761
  {
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",
1762
+ 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",
1746
1763
  type: "registry:ui",
1747
1764
  path: "avatar/avatar-image.vue"
1748
1765
  },
1749
1766
  {
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",
1767
+ 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",
1751
1768
  type: "registry:ui",
1752
1769
  path: "avatar/avatar.vue"
1753
1770
  },
@@ -1805,7 +1822,7 @@ const PRESETS = {
1805
1822
  ],
1806
1823
  files: [
1807
1824
  {
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",
1825
+ 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",
1809
1826
  type: "registry:ui",
1810
1827
  path: "button-group/button-group-separator.vue"
1811
1828
  },
@@ -1886,7 +1903,7 @@ const PRESETS = {
1886
1903
  "lucide-vue-next"
1887
1904
  ],
1888
1905
  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",
1906
+ 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",
1890
1907
  type: "registry:ui",
1891
1908
  path: "checkbox/checkbox.vue"
1892
1909
  }, {
@@ -1904,17 +1921,17 @@ const PRESETS = {
1904
1921
  ],
1905
1922
  files: [
1906
1923
  {
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",
1924
+ 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",
1908
1925
  type: "registry:ui",
1909
1926
  path: "collapsible/collapsible-content.vue"
1910
1927
  },
1911
1928
  {
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",
1929
+ 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",
1913
1930
  type: "registry:ui",
1914
1931
  path: "collapsible/collapsible-trigger.vue"
1915
1932
  },
1916
1933
  {
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",
1934
+ 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",
1918
1935
  type: "registry:ui",
1919
1936
  path: "collapsible/collapsible.vue"
1920
1937
  },
@@ -1935,27 +1952,27 @@ const PRESETS = {
1935
1952
  ],
1936
1953
  files: [
1937
1954
  {
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",
1955
+ 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",
1939
1956
  type: "registry:ui",
1940
1957
  path: "dropdown-menu/dropdown-menu-checkbox-item.vue"
1941
1958
  },
1942
1959
  {
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",
1960
+ 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",
1944
1961
  type: "registry:ui",
1945
1962
  path: "dropdown-menu/dropdown-menu-content.vue"
1946
1963
  },
1947
1964
  {
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",
1965
+ 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",
1949
1966
  type: "registry:ui",
1950
1967
  path: "dropdown-menu/dropdown-menu-group.vue"
1951
1968
  },
1952
1969
  {
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",
1970
+ 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",
1954
1971
  type: "registry:ui",
1955
1972
  path: "dropdown-menu/dropdown-menu-item.vue"
1956
1973
  },
1957
1974
  {
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",
1975
+ 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",
1959
1976
  type: "registry:ui",
1960
1977
  path: "dropdown-menu/dropdown-menu-label.vue"
1961
1978
  },
@@ -1965,17 +1982,17 @@ const PRESETS = {
1965
1982
  path: "dropdown-menu/dropdown-menu-portal.vue"
1966
1983
  },
1967
1984
  {
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",
1985
+ 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",
1969
1986
  type: "registry:ui",
1970
1987
  path: "dropdown-menu/dropdown-menu-radio-group.vue"
1971
1988
  },
1972
1989
  {
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",
1990
+ 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",
1974
1991
  type: "registry:ui",
1975
1992
  path: "dropdown-menu/dropdown-menu-radio-item.vue"
1976
1993
  },
1977
1994
  {
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",
1995
+ 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",
1979
1996
  type: "registry:ui",
1980
1997
  path: "dropdown-menu/dropdown-menu-separator.vue"
1981
1998
  },
@@ -1985,27 +2002,27 @@ const PRESETS = {
1985
2002
  path: "dropdown-menu/dropdown-menu-shortcut.vue"
1986
2003
  },
1987
2004
  {
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",
2005
+ 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",
1989
2006
  type: "registry:ui",
1990
2007
  path: "dropdown-menu/dropdown-menu-sub-content.vue"
1991
2008
  },
1992
2009
  {
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",
2010
+ 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",
1994
2011
  type: "registry:ui",
1995
2012
  path: "dropdown-menu/dropdown-menu-sub-trigger.vue"
1996
2013
  },
1997
2014
  {
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",
2015
+ 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",
1999
2016
  type: "registry:ui",
2000
2017
  path: "dropdown-menu/dropdown-menu-sub.vue"
2001
2018
  },
2002
2019
  {
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",
2020
+ 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",
2004
2021
  type: "registry:ui",
2005
2022
  path: "dropdown-menu/dropdown-menu-trigger.vue"
2006
2023
  },
2007
2024
  {
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",
2025
+ 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",
2009
2026
  type: "registry:ui",
2010
2027
  path: "dropdown-menu/dropdown-menu.vue"
2011
2028
  },
@@ -2319,17 +2336,17 @@ const PRESETS = {
2319
2336
  path: "native-select/index.ts"
2320
2337
  },
2321
2338
  {
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",
2339
+ 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",
2323
2340
  type: "registry:ui",
2324
2341
  path: "native-select/native-select-optgroup.vue"
2325
2342
  },
2326
2343
  {
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",
2344
+ 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",
2328
2345
  type: "registry:ui",
2329
2346
  path: "native-select/native-select-option.vue"
2330
2347
  },
2331
2348
  {
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",
2349
+ 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",
2333
2350
  type: "registry:ui",
2334
2351
  path: "native-select/native-select.vue"
2335
2352
  }
@@ -2349,12 +2366,12 @@ const PRESETS = {
2349
2366
  path: "scroll-area/index.ts"
2350
2367
  },
2351
2368
  {
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",
2369
+ 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",
2353
2370
  type: "registry:ui",
2354
2371
  path: "scroll-area/scroll-area.vue"
2355
2372
  },
2356
2373
  {
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",
2374
+ 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",
2358
2375
  type: "registry:ui",
2359
2376
  path: "scroll-area/scroll-bar.vue"
2360
2377
  }
@@ -2372,7 +2389,7 @@ const PRESETS = {
2372
2389
  type: "registry:ui",
2373
2390
  path: "separator/index.ts"
2374
2391
  }, {
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",
2392
+ 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",
2376
2393
  type: "registry:ui",
2377
2394
  path: "separator/separator.vue"
2378
2395
  }]
@@ -2392,22 +2409,22 @@ const PRESETS = {
2392
2409
  path: "tabs/index.ts"
2393
2410
  },
2394
2411
  {
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",
2412
+ 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",
2396
2413
  type: "registry:ui",
2397
2414
  path: "tabs/tabs-content.vue"
2398
2415
  },
2399
2416
  {
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",
2417
+ 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",
2401
2418
  type: "registry:ui",
2402
2419
  path: "tabs/tabs-list.vue"
2403
2420
  },
2404
2421
  {
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",
2422
+ 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",
2406
2423
  type: "registry:ui",
2407
2424
  path: "tabs/tabs-trigger.vue"
2408
2425
  },
2409
2426
  {
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",
2427
+ 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",
2411
2428
  type: "registry:ui",
2412
2429
  path: "tabs/tabs.vue"
2413
2430
  }
@@ -2669,10 +2686,14 @@ dist-ssr
2669
2686
  "preview": "vite preview"
2670
2687
  },
2671
2688
  "dependencies": {
2672
- "@sprawlify/primitives": "^0.0.100",
2673
- "@sprawlify/react": "^0.0.100",
2689
+ "@sprawlify/primitives": "^0.0.102",
2690
+ "@sprawlify/react": "^0.0.102",
2674
2691
  "react": "^19.2.4",
2675
- "react-dom": "^19.2.4"
2692
+ "react-dom": "^19.2.4",
2693
+ "class-variance-authority": "^0.7.1",
2694
+ "lucide-react": "^0.577.0",
2695
+ "clsx": "^2.1.1",
2696
+ "tailwind-merge": "^3.5.0"
2676
2697
  },
2677
2698
  "devDependencies": {
2678
2699
  "@tailwindcss/vite": "^4.2.2",
@@ -2683,7 +2704,8 @@ dist-ssr
2683
2704
  "globals": "^17.4.0",
2684
2705
  "tailwindcss": "^4.2.2",
2685
2706
  "typescript": "^5.9.3",
2686
- "vite": "^8.0.1"
2707
+ "vite": "^8.0.1",
2708
+ "vite-tsconfig-paths": "^6.1.1"
2687
2709
  }
2688
2710
  }`
2689
2711
  },
@@ -2711,7 +2733,10 @@ dist-ssr
2711
2733
  "noUnusedParameters": true,
2712
2734
  "erasableSyntaxOnly": true,
2713
2735
  "noFallthroughCasesInSwitch": true,
2714
- "noUncheckedSideEffectImports": true
2736
+ "noUncheckedSideEffectImports": true,
2737
+ "paths": {
2738
+ "@/*": ["./src/*"]
2739
+ }
2715
2740
  },
2716
2741
  "include": ["src"]
2717
2742
  }`
@@ -2748,7 +2773,10 @@ dist-ssr
2748
2773
  "noUnusedParameters": true,
2749
2774
  "erasableSyntaxOnly": true,
2750
2775
  "noFallthroughCasesInSwitch": true,
2751
- "noUncheckedSideEffectImports": true
2776
+ "noUncheckedSideEffectImports": true,
2777
+ "paths": {
2778
+ "@/*": ["./src/*"]
2779
+ }
2752
2780
  },
2753
2781
  "include": ["vite.config.ts"]
2754
2782
  }`
@@ -2758,9 +2786,10 @@ dist-ssr
2758
2786
  content: `import { defineConfig } from "vite"
2759
2787
  import react from "@vitejs/plugin-react"
2760
2788
  import tailwindcss from "@tailwindcss/vite"
2789
+ import tsconfigPaths from "vite-tsconfig-paths";
2761
2790
 
2762
2791
  export default defineConfig({
2763
- plugins: [tailwindcss(), react()],
2792
+ plugins: [tsconfigPaths(), tailwindcss(), react()],
2764
2793
  })`
2765
2794
  }
2766
2795
  ] }),
@@ -2842,8 +2871,8 @@ dist-ssr
2842
2871
  "preview": "vite preview"
2843
2872
  },
2844
2873
  "dependencies": {
2845
- "@sprawlify/primitives": "^0.0.100",
2846
- "@sprawlify/solid": "^0.0.100",
2874
+ "@sprawlify/primitives": "^0.0.102",
2875
+ "@sprawlify/solid": "^0.0.102",
2847
2876
  "solid-js": "^1.9.11"
2848
2877
  },
2849
2878
  "devDependencies": {
@@ -3009,8 +3038,8 @@ dist-ssr
3009
3038
  "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
3010
3039
  },
3011
3040
  "dependencies": {
3012
- "@sprawlify/primitives": "^0.0.100",
3013
- "@sprawlify/svelte": "^0.0.100"
3041
+ "@sprawlify/primitives": "^0.0.102",
3042
+ "@sprawlify/svelte": "^0.0.102"
3014
3043
  },
3015
3044
  "devDependencies": {
3016
3045
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
@@ -3168,8 +3197,8 @@ dist-ssr
3168
3197
  "preview": "vite preview"
3169
3198
  },
3170
3199
  "dependencies": {
3171
- "@sprawlify/primitives": "^0.0.100",
3172
- "@sprawlify/vue": "^0.0.100",
3200
+ "@sprawlify/primitives": "^0.0.102",
3201
+ "@sprawlify/vue": "^0.0.102",
3173
3202
  "vue": "^3.5.30"
3174
3203
  },
3175
3204
  "devDependencies": {
@@ -3252,7 +3281,7 @@ export default defineConfig({
3252
3281
  ] })
3253
3282
  };
3254
3283
  //#endregion
3255
- //#region src/commands/init/run-init.ts
3284
+ //#region src/commands/init/run.ts
3256
3285
  function resolvePresetFilePath(cwd, file) {
3257
3286
  const srcPath = path.resolve(cwd, "src");
3258
3287
  const appPath = path.resolve(cwd, "app");
@@ -3268,6 +3297,16 @@ function resolvePresetFilePath(cwd, file) {
3268
3297
  }
3269
3298
  return path.resolve(cwd, file.path);
3270
3299
  }
3300
+ function tailwindCssPathPrefix(cwd) {
3301
+ const srcPath = path.resolve(cwd, "src");
3302
+ const appPath = path.resolve(cwd, "app");
3303
+ if (fsExtra.existsSync(srcPath)) return "src";
3304
+ if (fsExtra.existsSync(appPath)) return "app";
3305
+ return "src";
3306
+ }
3307
+ function resolveTailwindCssFilePath(cwd, prefix, cssPath) {
3308
+ return path.resolve(cwd, prefix, cssPath);
3309
+ }
3271
3310
  function resolveItemsToApply(presetItems, requestedComponents) {
3272
3311
  const presetItemsByName = new Map(presetItems.map((item) => [item.name, item]));
3273
3312
  const itemNamesToApply = /* @__PURE__ */ new Set();
@@ -3284,6 +3323,13 @@ function resolveItemsToApply(presetItems, requestedComponents) {
3284
3323
  for (const nestedDependency of matchingItem.dependencies ?? []) queue.push(nestedDependency);
3285
3324
  continue;
3286
3325
  }
3326
+ if (dependencyName.startsWith("@/")) {
3327
+ const extractedName = dependencyName.split("/").pop();
3328
+ if (extractedName && presetItemsByName.has(extractedName)) {
3329
+ queue.push(extractedName);
3330
+ continue;
3331
+ }
3332
+ }
3287
3333
  packageNames.add(dependencyName);
3288
3334
  }
3289
3335
  if (requestedComponents.size > 0) {
@@ -3304,7 +3350,6 @@ async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames
3304
3350
  }
3305
3351
  const packageJson = await fsExtra.readJson(packageJsonPath);
3306
3352
  let didChange = false;
3307
- const missingPackages = [];
3308
3353
  packageJson.dependencies ??= {};
3309
3354
  packageJson.devDependencies ??= {};
3310
3355
  for (const packageName of packageNames) {
@@ -3324,13 +3369,8 @@ async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames
3324
3369
  }
3325
3370
  continue;
3326
3371
  }
3327
- missingPackages.push(packageName);
3328
- }
3329
- if (didChange) {
3330
- await fsExtra.writeJson(packageJsonPath, packageJson, { spaces: 2 });
3331
- logger.success("Updated package.json with preset package dependencies.");
3332
3372
  }
3333
- if (missingPackages.length > 0) logger.warn(`Skipping unresolved preset packages: ${missingPackages.map((packageName) => highlighter.info(packageName)).join(", ")}.`);
3373
+ if (didChange) await fsExtra.writeJson(packageJsonPath, packageJson, { spaces: 2 });
3334
3374
  }
3335
3375
  async function runInit(options) {
3336
3376
  let cwd = options.cwd;
@@ -3338,7 +3378,6 @@ async function runInit(options) {
3338
3378
  cwd = path.resolve(options.cwd, options.name);
3339
3379
  await fsExtra.ensureDir(cwd);
3340
3380
  options.cwd = cwd;
3341
- logger.info(`Using project directory: ${highlighter.info(options.name)}`);
3342
3381
  }
3343
3382
  const selectedTemplate = options.framework && options.framework in templates ? templates[options.framework] : void 0;
3344
3383
  if (selectedTemplate?.files.length) for (const file of selectedTemplate.files) {
@@ -3353,22 +3392,32 @@ async function runInit(options) {
3353
3392
  }
3354
3393
  const componentsJsonPath = path.resolve(cwd, "components.json");
3355
3394
  logger.info("Starting project initialization...");
3395
+ const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
3396
+ const tailwindcss = {
3397
+ cwd: tailwindCssPathPrefix(cwd),
3398
+ css: "globals.css"
3399
+ };
3356
3400
  const config = {
3357
3401
  $schema: "https://ui.primitives.com/schema.json",
3358
3402
  framework: options.framework,
3359
3403
  preset: options.preset,
3360
- metaframework: options.metaframework
3404
+ metaframework: options.metaframework,
3405
+ tailwindcss: { css: `${tailwindcss.cwd}/${tailwindcss.css}` }
3361
3406
  };
3362
3407
  let backupPath = null;
3363
3408
  if (fsExtra.existsSync(componentsJsonPath)) {
3364
3409
  backupPath = `${componentsJsonPath}${FILE_BACKUP_SUFFIX}`;
3365
3410
  fsExtra.copyFileSync(componentsJsonPath, backupPath);
3366
- logger.info(`Created backup of existing configuration: ${path.basename(backupPath)}`);
3367
3411
  }
3368
3412
  try {
3369
3413
  await fsExtra.ensureDir(path.dirname(componentsJsonPath));
3370
3414
  await fsExtra.writeJson(componentsJsonPath, config, { spaces: 2 });
3371
- logger.success(`Created ${highlighter.info("components.json")} configuration file.`);
3415
+ if (frameworkPreset?.tailwindcss?.css) {
3416
+ if (!(fsExtra.existsSync(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css)) && !options.override)) {
3417
+ await fsExtra.ensureDir(path.dirname(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css)));
3418
+ await fsExtra.writeFile(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css), frameworkPreset.tailwindcss.css, "utf8");
3419
+ }
3420
+ }
3372
3421
  } catch (error) {
3373
3422
  logger.error(`Failed to create components.json: ${error}`);
3374
3423
  if (backupPath && fsExtra.existsSync(backupPath)) {
@@ -3378,7 +3427,6 @@ async function runInit(options) {
3378
3427
  }
3379
3428
  throw error;
3380
3429
  }
3381
- const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
3382
3430
  const { itemsToApply, packageNames, unresolvedNames } = resolveItemsToApply(getPresetItems(options.preset, options.framework), new Set(options.components ?? []));
3383
3431
  if (unresolvedNames.size > 0) logger.warn(`Skipping unknown preset component options: ${[...unresolvedNames].map((componentName) => highlighter.info(componentName)).join(", ")}.`);
3384
3432
  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.104",
4
4
  "type": "module",
5
5
  "description": "A command-line interface for Sprawlify.",
6
6
  "author": "sprawlify <npm@sprawlify.com>",