sprawlify 0.0.103 → 0.0.105
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.
- package/dist/index.mjs +178 -130
- 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.
|
|
11
|
+
var version = "0.0.105";
|
|
12
12
|
//#endregion
|
|
13
13
|
//#region src/utils/file-helper.ts
|
|
14
14
|
const FILE_BACKUP_SUFFIX = ".bak";
|
|
@@ -205,7 +205,7 @@ const PRESETS = {
|
|
|
205
205
|
clsx: "^2.1.1",
|
|
206
206
|
"tailwind-merge": "^3.5.0"
|
|
207
207
|
},
|
|
208
|
-
devDependencies: {},
|
|
208
|
+
devDependencies: { "tw-animate-css": "^1.4.0" },
|
|
209
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}" },
|
|
210
210
|
items: [{
|
|
211
211
|
name: "button",
|
|
@@ -243,7 +243,10 @@ const PRESETS = {
|
|
|
243
243
|
clsx: "^2.1.1",
|
|
244
244
|
"tailwind-merge": "^3.5.0"
|
|
245
245
|
},
|
|
246
|
-
devDependencies: {
|
|
246
|
+
devDependencies: {
|
|
247
|
+
"tailwind-scrollbar": "^4.0.2",
|
|
248
|
+
"tw-animate-css": "^1.4.0"
|
|
249
|
+
},
|
|
247
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" },
|
|
248
251
|
items: [
|
|
249
252
|
{
|
|
@@ -556,7 +559,10 @@ const PRESETS = {
|
|
|
556
559
|
clsx: "^2.1.1",
|
|
557
560
|
"tailwind-merge": "^3.5.0"
|
|
558
561
|
},
|
|
559
|
-
devDependencies: {
|
|
562
|
+
devDependencies: {
|
|
563
|
+
"tailwind-scrollbar": "^4.0.2",
|
|
564
|
+
"tw-animate-css": "^1.4.0"
|
|
565
|
+
},
|
|
560
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" },
|
|
561
567
|
items: [
|
|
562
568
|
{
|
|
@@ -871,13 +877,16 @@ const PRESETS = {
|
|
|
871
877
|
svelte: {
|
|
872
878
|
dependencies: {
|
|
873
879
|
"@sprawlify/svelte": "^0.0.102",
|
|
874
|
-
svelte: "^
|
|
880
|
+
svelte: "^5.54.0",
|
|
875
881
|
"class-variance-authority": "^0.7.1",
|
|
876
882
|
"lucide-svelte": "^0.400.0",
|
|
877
883
|
clsx: "^2.1.1",
|
|
878
884
|
"tailwind-merge": "^3.5.0"
|
|
879
885
|
},
|
|
880
|
-
devDependencies: {
|
|
886
|
+
devDependencies: {
|
|
887
|
+
"tailwind-scrollbar": "^4.0.2",
|
|
888
|
+
"tw-animate-css": "^1.4.0"
|
|
889
|
+
},
|
|
881
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" },
|
|
882
891
|
items: [
|
|
883
892
|
{
|
|
@@ -1666,7 +1675,10 @@ const PRESETS = {
|
|
|
1666
1675
|
clsx: "^2.1.1",
|
|
1667
1676
|
"tailwind-merge": "^3.5.0"
|
|
1668
1677
|
},
|
|
1669
|
-
devDependencies: {
|
|
1678
|
+
devDependencies: {
|
|
1679
|
+
"tailwind-scrollbar": "^4.0.2",
|
|
1680
|
+
"tw-animate-css": "^1.4.0"
|
|
1681
|
+
},
|
|
1670
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" },
|
|
1671
1683
|
items: [
|
|
1672
1684
|
{
|
|
@@ -1709,7 +1721,7 @@ const PRESETS = {
|
|
|
1709
1721
|
name: "aspect-ratio",
|
|
1710
1722
|
dependencies: ["@sprawlify/vue"],
|
|
1711
1723
|
files: [{
|
|
1712
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1713
1725
|
type: "registry:ui",
|
|
1714
1726
|
path: "aspect-ratio/aspect-ratio.vue"
|
|
1715
1727
|
}, {
|
|
@@ -1732,7 +1744,7 @@ const PRESETS = {
|
|
|
1732
1744
|
path: "avatar/avatar-badge.vue"
|
|
1733
1745
|
},
|
|
1734
1746
|
{
|
|
1735
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1736
1748
|
type: "registry:ui",
|
|
1737
1749
|
path: "avatar/avatar-fallback.vue"
|
|
1738
1750
|
},
|
|
@@ -1747,12 +1759,12 @@ const PRESETS = {
|
|
|
1747
1759
|
path: "avatar/avatar-group.vue"
|
|
1748
1760
|
},
|
|
1749
1761
|
{
|
|
1750
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1751
1763
|
type: "registry:ui",
|
|
1752
1764
|
path: "avatar/avatar-image.vue"
|
|
1753
1765
|
},
|
|
1754
1766
|
{
|
|
1755
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1756
1768
|
type: "registry:ui",
|
|
1757
1769
|
path: "avatar/avatar.vue"
|
|
1758
1770
|
},
|
|
@@ -1810,7 +1822,7 @@ const PRESETS = {
|
|
|
1810
1822
|
],
|
|
1811
1823
|
files: [
|
|
1812
1824
|
{
|
|
1813
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1814
1826
|
type: "registry:ui",
|
|
1815
1827
|
path: "button-group/button-group-separator.vue"
|
|
1816
1828
|
},
|
|
@@ -1841,32 +1853,32 @@ const PRESETS = {
|
|
|
1841
1853
|
],
|
|
1842
1854
|
files: [
|
|
1843
1855
|
{
|
|
1844
|
-
content: "<script lang=\"ts\">\
|
|
1856
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardActionProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<CardActionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"action\"\n data-slot=\"card-action\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1845
1857
|
type: "registry:ui",
|
|
1846
1858
|
path: "card/card-action.vue"
|
|
1847
1859
|
},
|
|
1848
1860
|
{
|
|
1849
|
-
content: "<script lang=\"ts\">\
|
|
1861
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardContentProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<CardContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"px-4 group-data-[size=sm]/card:px-3\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"content\"\n data-slot=\"card-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1850
1862
|
type: "registry:ui",
|
|
1851
1863
|
path: "card/card-content.vue"
|
|
1852
1864
|
},
|
|
1853
1865
|
{
|
|
1854
|
-
content: "<script lang=\"ts\">\
|
|
1866
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardDescriptionProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<CardDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-muted-foreground text-sm\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"description\"\n data-slot=\"card-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1855
1867
|
type: "registry:ui",
|
|
1856
1868
|
path: "card/card-description.vue"
|
|
1857
1869
|
},
|
|
1858
1870
|
{
|
|
1859
|
-
content: "<script lang=\"ts\">\
|
|
1871
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardFooterProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<CardFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"footer\"\n data-slot=\"card-footer\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1860
1872
|
type: "registry:ui",
|
|
1861
1873
|
path: "card/card-footer.vue"
|
|
1862
1874
|
},
|
|
1863
1875
|
{
|
|
1864
|
-
content: "<script lang=\"ts\">\
|
|
1876
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardHeaderProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<CardHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"header\"\n data-slot=\"card-header\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1865
1877
|
type: "registry:ui",
|
|
1866
1878
|
path: "card/card-header.vue"
|
|
1867
1879
|
},
|
|
1868
1880
|
{
|
|
1869
|
-
content: "<script lang=\"ts\">\
|
|
1881
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface CardTitleProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<CardTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"title\"\n data-slot=\"card-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
1870
1882
|
type: "registry:ui",
|
|
1871
1883
|
path: "card/card-title.vue"
|
|
1872
1884
|
},
|
|
@@ -1891,7 +1903,7 @@ const PRESETS = {
|
|
|
1891
1903
|
"lucide-vue-next"
|
|
1892
1904
|
],
|
|
1893
1905
|
files: [{
|
|
1894
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1895
1907
|
type: "registry:ui",
|
|
1896
1908
|
path: "checkbox/checkbox.vue"
|
|
1897
1909
|
}, {
|
|
@@ -1909,17 +1921,17 @@ const PRESETS = {
|
|
|
1909
1921
|
],
|
|
1910
1922
|
files: [
|
|
1911
1923
|
{
|
|
1912
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1913
1925
|
type: "registry:ui",
|
|
1914
1926
|
path: "collapsible/collapsible-content.vue"
|
|
1915
1927
|
},
|
|
1916
1928
|
{
|
|
1917
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1918
1930
|
type: "registry:ui",
|
|
1919
1931
|
path: "collapsible/collapsible-trigger.vue"
|
|
1920
1932
|
},
|
|
1921
1933
|
{
|
|
1922
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1923
1935
|
type: "registry:ui",
|
|
1924
1936
|
path: "collapsible/collapsible.vue"
|
|
1925
1937
|
},
|
|
@@ -1940,77 +1952,77 @@ const PRESETS = {
|
|
|
1940
1952
|
],
|
|
1941
1953
|
files: [
|
|
1942
1954
|
{
|
|
1943
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1944
1956
|
type: "registry:ui",
|
|
1945
1957
|
path: "dropdown-menu/dropdown-menu-checkbox-item.vue"
|
|
1946
1958
|
},
|
|
1947
1959
|
{
|
|
1948
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1949
1961
|
type: "registry:ui",
|
|
1950
1962
|
path: "dropdown-menu/dropdown-menu-content.vue"
|
|
1951
1963
|
},
|
|
1952
1964
|
{
|
|
1953
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1954
1966
|
type: "registry:ui",
|
|
1955
1967
|
path: "dropdown-menu/dropdown-menu-group.vue"
|
|
1956
1968
|
},
|
|
1957
1969
|
{
|
|
1958
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1959
1971
|
type: "registry:ui",
|
|
1960
1972
|
path: "dropdown-menu/dropdown-menu-item.vue"
|
|
1961
1973
|
},
|
|
1962
1974
|
{
|
|
1963
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1964
1976
|
type: "registry:ui",
|
|
1965
1977
|
path: "dropdown-menu/dropdown-menu-label.vue"
|
|
1966
1978
|
},
|
|
1967
1979
|
{
|
|
1968
|
-
content: "<script lang=\"ts\">\
|
|
1980
|
+
content: "<script lang=\"ts\">\nexport interface DropdownMenuPortalProps {\n to?: string | Element;\n disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<DropdownMenuPortalProps>();\n<\/script>\n\n<template>\n <Teleport\n data-slot=\"dropdown-menu-portal\"\n :to=\"to || 'body'\"\n :disabled=\"disabled || false\"\n v-bind=\"rest\"\n >\n <slot />\n </Teleport>\n</template>\n",
|
|
1969
1981
|
type: "registry:ui",
|
|
1970
1982
|
path: "dropdown-menu/dropdown-menu-portal.vue"
|
|
1971
1983
|
},
|
|
1972
1984
|
{
|
|
1973
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1974
1986
|
type: "registry:ui",
|
|
1975
1987
|
path: "dropdown-menu/dropdown-menu-radio-group.vue"
|
|
1976
1988
|
},
|
|
1977
1989
|
{
|
|
1978
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1979
1991
|
type: "registry:ui",
|
|
1980
1992
|
path: "dropdown-menu/dropdown-menu-radio-item.vue"
|
|
1981
1993
|
},
|
|
1982
1994
|
{
|
|
1983
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1984
1996
|
type: "registry:ui",
|
|
1985
1997
|
path: "dropdown-menu/dropdown-menu-separator.vue"
|
|
1986
1998
|
},
|
|
1987
1999
|
{
|
|
1988
|
-
content: "<script lang=\"ts\">\
|
|
2000
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface DropdownMenuShortcutProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DropdownMenuShortcutProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.span\n data-slot=\"dropdown-menu-shortcut\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
|
|
1989
2001
|
type: "registry:ui",
|
|
1990
2002
|
path: "dropdown-menu/dropdown-menu-shortcut.vue"
|
|
1991
2003
|
},
|
|
1992
2004
|
{
|
|
1993
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1994
2006
|
type: "registry:ui",
|
|
1995
2007
|
path: "dropdown-menu/dropdown-menu-sub-content.vue"
|
|
1996
2008
|
},
|
|
1997
2009
|
{
|
|
1998
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
1999
2011
|
type: "registry:ui",
|
|
2000
2012
|
path: "dropdown-menu/dropdown-menu-sub-trigger.vue"
|
|
2001
2013
|
},
|
|
2002
2014
|
{
|
|
2003
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2004
2016
|
type: "registry:ui",
|
|
2005
2017
|
path: "dropdown-menu/dropdown-menu-sub.vue"
|
|
2006
2018
|
},
|
|
2007
2019
|
{
|
|
2008
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2009
2021
|
type: "registry:ui",
|
|
2010
2022
|
path: "dropdown-menu/dropdown-menu-trigger.vue"
|
|
2011
2023
|
},
|
|
2012
2024
|
{
|
|
2013
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2014
2026
|
type: "registry:ui",
|
|
2015
2027
|
path: "dropdown-menu/dropdown-menu.vue"
|
|
2016
2028
|
},
|
|
@@ -2031,27 +2043,27 @@ const PRESETS = {
|
|
|
2031
2043
|
],
|
|
2032
2044
|
files: [
|
|
2033
2045
|
{
|
|
2034
|
-
content: "<script lang=\"ts\">\
|
|
2046
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyContentProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<EmptyContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"empty-content\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2035
2047
|
type: "registry:ui",
|
|
2036
2048
|
path: "empty/empty-content.vue"
|
|
2037
2049
|
},
|
|
2038
2050
|
{
|
|
2039
|
-
content: "<script lang=\"ts\">\
|
|
2051
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyDescriptionProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<EmptyDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.p data-slot=\"empty-description\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.p>\n</template>\n",
|
|
2040
2052
|
type: "registry:ui",
|
|
2041
2053
|
path: "empty/empty-description.vue"
|
|
2042
2054
|
},
|
|
2043
2055
|
{
|
|
2044
|
-
content: "<script lang=\"ts\">\
|
|
2056
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyHeaderProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<EmptyHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 flex max-w-sm flex-col items-center\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"empty-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2045
2057
|
type: "registry:ui",
|
|
2046
2058
|
path: "empty/empty-header.vue"
|
|
2047
2059
|
},
|
|
2048
2060
|
{
|
|
2049
|
-
content: "<script lang=\"ts\">\
|
|
2061
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const emptyMediaVariants = cva(\n \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface EmptyMediaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: VariantProps<typeof emptyMediaVariants>[\"variant\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { variant = \"default\", ...rest } = defineProps<EmptyMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(emptyMediaVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"empty-icon\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2050
2062
|
type: "registry:ui",
|
|
2051
2063
|
path: "empty/empty-media.vue"
|
|
2052
2064
|
},
|
|
2053
2065
|
{
|
|
2054
|
-
content: "<script lang=\"ts\">\
|
|
2066
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyTitleProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<EmptyTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"text-sm font-medium tracking-tight\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"empty-title\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2055
2067
|
type: "registry:ui",
|
|
2056
2068
|
path: "empty/empty-title.vue"
|
|
2057
2069
|
},
|
|
@@ -2147,7 +2159,7 @@ const PRESETS = {
|
|
|
2147
2159
|
type: "registry:ui",
|
|
2148
2160
|
path: "input/index.ts"
|
|
2149
2161
|
}, {
|
|
2150
|
-
content: "<script lang=\"ts\">\
|
|
2162
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { InputHTMLAttributes } from \"vue\";\n\nexport interface InputProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n InputHTMLAttributes {\n type?: string;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, type, ...rest } = defineProps<InputProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.input\n :type=\"type\"\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n />\n</template>\n",
|
|
2151
2163
|
type: "registry:ui",
|
|
2152
2164
|
path: "input/input.vue"
|
|
2153
2165
|
}]
|
|
@@ -2170,32 +2182,32 @@ const PRESETS = {
|
|
|
2170
2182
|
path: "input-group/index.ts"
|
|
2171
2183
|
},
|
|
2172
2184
|
{
|
|
2173
|
-
content: "<script lang=\"ts\">\
|
|
2185
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nexport interface InputGroupAddonProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n align?: VariantProps<typeof inputGroupAddonVariants>[\"align\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { align = \"inline-start\", role = \"group\", ...rest } = defineProps<InputGroupAddonProps>();\n\nconst className = computed(() => cn(inputGroupAddonVariants({ align }), rest.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n :role=\"role\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n :data-align=\"align\"\n v-bind=\"{ ...rest, class: className }\"\n :as-child=\"asChild\"\n @click=\"\n (e) => {\n if ((e.target as HTMLElement).closest('button')) {\n return;\n }\n (e.currentTarget as HTMLElement).parentElement?.querySelector('input')?.focus();\n }\n \"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2174
2186
|
type: "registry:ui",
|
|
2175
2187
|
path: "input-group/input-group-addon.vue"
|
|
2176
2188
|
},
|
|
2177
2189
|
{
|
|
2178
|
-
content: "<script lang=\"ts\">\
|
|
2190
|
+
content: "<script lang=\"ts\">\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ButtonProps } from \"@/components/ui/button\";\n\nexport const inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nexport interface InputGroupButtonProps extends Omit<ButtonProps, \"size\"> {\n size?: VariantProps<typeof inputGroupButtonVariants>[\"size\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n size = \"xs\",\n type = \"button\",\n variant = \"ghost\",\n ...rest\n} = defineProps<InputGroupButtonProps>();\n\nconst className = computed(() => cn(inputGroupButtonVariants({ size }), rest.class as string));\n<\/script>\n\n<template>\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n :type=\"type\"\n :data-size=\"size\"\n :variant=\"variant\"\n v-bind=\"{ ...rest, class: className }\"\n :as-child=\"asChild\"\n >\n <slot />\n </Button>\n</template>\n",
|
|
2179
2191
|
type: "registry:ui",
|
|
2180
2192
|
path: "input-group/input-group-button.vue"
|
|
2181
2193
|
},
|
|
2182
2194
|
{
|
|
2183
|
-
content: "<script lang=\"ts\">\
|
|
2195
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { InputHTMLAttributes } from \"vue\";\n\nexport interface InputGroupInputProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n InputHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, type, ...rest } = defineProps<InputGroupInputProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n :type=\"type\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n />\n</template>\n",
|
|
2184
2196
|
type: "registry:ui",
|
|
2185
2197
|
path: "input-group/input-group-input.vue"
|
|
2186
2198
|
},
|
|
2187
2199
|
{
|
|
2188
|
-
content: "<script lang=\"ts\">\
|
|
2200
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface InputGroupTextProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<InputGroupTextProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
|
|
2189
2201
|
type: "registry:ui",
|
|
2190
2202
|
path: "input-group/input-group-text.vue"
|
|
2191
2203
|
},
|
|
2192
2204
|
{
|
|
2193
|
-
content: "<script lang=\"ts\">\
|
|
2205
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TextareaHTMLAttributes } from \"vue\";\n\nexport interface InputGroupTextareaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n TextareaHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\n\nconst props = defineProps<InputGroupTextareaProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Textarea\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n v-bind=\"{ ...attrs, class: className }\"\n :as-child=\"asChild\"\n />\n</template>\n",
|
|
2194
2206
|
type: "registry:ui",
|
|
2195
2207
|
path: "input-group/input-group-textarea.vue"
|
|
2196
2208
|
},
|
|
2197
2209
|
{
|
|
2198
|
-
content: "<script lang=\"ts\">\
|
|
2210
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface InputGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, role = \"group\", ...rest } = defineProps<InputGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n :role=\"role\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2199
2211
|
type: "registry:ui",
|
|
2200
2212
|
path: "input-group/input-group.vue"
|
|
2201
2213
|
}
|
|
@@ -2217,52 +2229,52 @@ const PRESETS = {
|
|
|
2217
2229
|
path: "item/index.ts"
|
|
2218
2230
|
},
|
|
2219
2231
|
{
|
|
2220
|
-
content: "<script lang=\"ts\">\
|
|
2232
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemActionsProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<ItemActionsProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"gap-2 flex items-center\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"actions\"\n data-slot=\"item-actions\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2221
2233
|
type: "registry:ui",
|
|
2222
2234
|
path: "item/item-actions.vue"
|
|
2223
2235
|
},
|
|
2224
2236
|
{
|
|
2225
|
-
content: "<script lang=\"ts\">\
|
|
2237
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemContentProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<ItemContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"content\"\n data-slot=\"item-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2226
2238
|
type: "registry:ui",
|
|
2227
2239
|
path: "item/item-content.vue"
|
|
2228
2240
|
},
|
|
2229
2241
|
{
|
|
2230
|
-
content: "<script lang=\"ts\">\
|
|
2242
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemDescriptionProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<ItemDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.p\n data-scope=\"item\"\n data-part=\"description\"\n data-slot=\"item-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.p>\n</template>\n",
|
|
2231
2243
|
type: "registry:ui",
|
|
2232
2244
|
path: "item/item-description.vue"
|
|
2233
2245
|
},
|
|
2234
2246
|
{
|
|
2235
|
-
content: "<script lang=\"ts\">\
|
|
2247
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemFooterProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<ItemFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 flex basis-full items-center justify-between\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"footer\"\n data-slot=\"item-footer\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2236
2248
|
type: "registry:ui",
|
|
2237
2249
|
path: "item/item-footer.vue"
|
|
2238
2250
|
},
|
|
2239
2251
|
{
|
|
2240
|
-
content: "<script lang=\"ts\">\
|
|
2252
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, role = \"list\", ...rest } = defineProps<ItemGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n :role=\"role\"\n data-scope=\"item\"\n data-part=\"group\"\n data-slot=\"item-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2241
2253
|
type: "registry:ui",
|
|
2242
2254
|
path: "item/item-group.vue"
|
|
2243
2255
|
},
|
|
2244
2256
|
{
|
|
2245
|
-
content: "<script lang=\"ts\">\
|
|
2257
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemHeaderProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<ItemHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-2 flex basis-full items-center justify-between\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"header\"\n data-slot=\"item-header\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2246
2258
|
type: "registry:ui",
|
|
2247
2259
|
path: "item/item-header.vue"
|
|
2248
2260
|
},
|
|
2249
2261
|
{
|
|
2250
|
-
content: "<script lang=\"ts\">\
|
|
2262
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image:\n \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface ItemMediaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: VariantProps<typeof itemMediaVariants>[\"variant\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, variant = \"default\", ...rest } = defineProps<ItemMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(itemMediaVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"media\"\n data-slot=\"item-media\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2251
2263
|
type: "registry:ui",
|
|
2252
2264
|
path: "item/item-media.vue"
|
|
2253
2265
|
},
|
|
2254
2266
|
{
|
|
2255
|
-
content: "<script lang=\"ts\">\
|
|
2267
|
+
content: "<script lang=\"ts\">\nimport type { SeparatorProps } from \"@/components/ui/separator\";\n\nexport interface ItemSeparatorProps extends SeparatorProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, orientation = \"horizontal\", ...rest } = defineProps<ItemSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"my-2\", attrs.class as string));\n<\/script>\n\n<template>\n <Separator\n data-scope=\"item\"\n data-part=\"separator\"\n data-slot=\"item-separator\"\n :orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </Separator>\n</template>\n",
|
|
2256
2268
|
type: "registry:ui",
|
|
2257
2269
|
path: "item/item-separator.vue"
|
|
2258
2270
|
},
|
|
2259
2271
|
{
|
|
2260
|
-
content: "<script lang=\"ts\">\
|
|
2272
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ItemTitleProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<ItemTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"title\"\n data-slot=\"item-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2261
2273
|
type: "registry:ui",
|
|
2262
2274
|
path: "item/item-title.vue"
|
|
2263
2275
|
},
|
|
2264
2276
|
{
|
|
2265
|
-
content: "<script lang=\"ts\">\
|
|
2277
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const itemVariants = cva(\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ItemProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: VariantProps<typeof itemVariants>[\"variant\"];\n size?: VariantProps<typeof itemVariants>[\"size\"];\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, variant = \"default\", size = \"default\", ...rest } = defineProps<ItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(itemVariants({ variant, size }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"item\"\n data-part=\"root\"\n data-slot=\"item\"\n :data-variant=\"variant\"\n :data-size=\"size\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
|
|
2266
2278
|
type: "registry:ui",
|
|
2267
2279
|
path: "item/item.vue"
|
|
2268
2280
|
}
|
|
@@ -2282,12 +2294,12 @@ const PRESETS = {
|
|
|
2282
2294
|
path: "kbd/index.ts"
|
|
2283
2295
|
},
|
|
2284
2296
|
{
|
|
2285
|
-
content: "<script lang=\"ts\">\
|
|
2297
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface KbdGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<KbdGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"gap-1 inline-flex items-center\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.kbd\n data-scope=\"kbd\"\n data-part=\"group\"\n data-slot=\"kbd-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.kbd>\n</template>\n",
|
|
2286
2298
|
type: "registry:ui",
|
|
2287
2299
|
path: "kbd/kbd-group.vue"
|
|
2288
2300
|
},
|
|
2289
2301
|
{
|
|
2290
|
-
content: "<script lang=\"ts\">\
|
|
2302
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface KbdProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<KbdProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.kbd\n data-scope=\"kbd\"\n data-part=\"root\"\n data-slot=\"kbd\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.kbd>\n</template>\n",
|
|
2291
2303
|
type: "registry:ui",
|
|
2292
2304
|
path: "kbd/kbd.vue"
|
|
2293
2305
|
}
|
|
@@ -2305,7 +2317,7 @@ const PRESETS = {
|
|
|
2305
2317
|
type: "registry:ui",
|
|
2306
2318
|
path: "label/index.ts"
|
|
2307
2319
|
}, {
|
|
2308
|
-
content: "<script lang=\"ts\">\
|
|
2320
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface LabelProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<LabelProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.label\n data-scope=\"label\"\n data-part=\"root\"\n data-slot=\"label\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.label>\n</template>\n",
|
|
2309
2321
|
type: "registry:ui",
|
|
2310
2322
|
path: "label/label.vue"
|
|
2311
2323
|
}]
|
|
@@ -2324,17 +2336,17 @@ const PRESETS = {
|
|
|
2324
2336
|
path: "native-select/index.ts"
|
|
2325
2337
|
},
|
|
2326
2338
|
{
|
|
2327
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2328
2340
|
type: "registry:ui",
|
|
2329
2341
|
path: "native-select/native-select-optgroup.vue"
|
|
2330
2342
|
},
|
|
2331
2343
|
{
|
|
2332
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2333
2345
|
type: "registry:ui",
|
|
2334
2346
|
path: "native-select/native-select-option.vue"
|
|
2335
2347
|
},
|
|
2336
2348
|
{
|
|
2337
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2338
2350
|
type: "registry:ui",
|
|
2339
2351
|
path: "native-select/native-select.vue"
|
|
2340
2352
|
}
|
|
@@ -2354,12 +2366,12 @@ const PRESETS = {
|
|
|
2354
2366
|
path: "scroll-area/index.ts"
|
|
2355
2367
|
},
|
|
2356
2368
|
{
|
|
2357
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2358
2370
|
type: "registry:ui",
|
|
2359
2371
|
path: "scroll-area/scroll-area.vue"
|
|
2360
2372
|
},
|
|
2361
2373
|
{
|
|
2362
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2363
2375
|
type: "registry:ui",
|
|
2364
2376
|
path: "scroll-area/scroll-bar.vue"
|
|
2365
2377
|
}
|
|
@@ -2377,7 +2389,7 @@ const PRESETS = {
|
|
|
2377
2389
|
type: "registry:ui",
|
|
2378
2390
|
path: "separator/index.ts"
|
|
2379
2391
|
}, {
|
|
2380
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2381
2393
|
type: "registry:ui",
|
|
2382
2394
|
path: "separator/separator.vue"
|
|
2383
2395
|
}]
|
|
@@ -2397,22 +2409,22 @@ const PRESETS = {
|
|
|
2397
2409
|
path: "tabs/index.ts"
|
|
2398
2410
|
},
|
|
2399
2411
|
{
|
|
2400
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2401
2413
|
type: "registry:ui",
|
|
2402
2414
|
path: "tabs/tabs-content.vue"
|
|
2403
2415
|
},
|
|
2404
2416
|
{
|
|
2405
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2406
2418
|
type: "registry:ui",
|
|
2407
2419
|
path: "tabs/tabs-list.vue"
|
|
2408
2420
|
},
|
|
2409
2421
|
{
|
|
2410
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2411
2423
|
type: "registry:ui",
|
|
2412
2424
|
path: "tabs/tabs-trigger.vue"
|
|
2413
2425
|
},
|
|
2414
2426
|
{
|
|
2415
|
-
content: "<script lang=\"ts\">\
|
|
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",
|
|
2416
2428
|
type: "registry:ui",
|
|
2417
2429
|
path: "tabs/tabs.vue"
|
|
2418
2430
|
}
|
|
@@ -2430,7 +2442,7 @@ const PRESETS = {
|
|
|
2430
2442
|
type: "registry:ui",
|
|
2431
2443
|
path: "textarea/index.ts"
|
|
2432
2444
|
}, {
|
|
2433
|
-
content: "<script lang=\"ts\">\
|
|
2445
|
+
content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TextareaHTMLAttributes } from \"vue\";\n\nexport interface TextareaProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n TextareaHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst props = defineProps<TextareaProps>();\n\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n v-bind=\"{ ...attrs, class: className }\"\n :as-child=\"asChild\"\n />\n</template>\n",
|
|
2434
2446
|
type: "registry:ui",
|
|
2435
2447
|
path: "textarea/textarea.vue"
|
|
2436
2448
|
}]
|
|
@@ -2692,8 +2704,7 @@ dist-ssr
|
|
|
2692
2704
|
"globals": "^17.4.0",
|
|
2693
2705
|
"tailwindcss": "^4.2.2",
|
|
2694
2706
|
"typescript": "^5.9.3",
|
|
2695
|
-
"vite": "^8.0.1"
|
|
2696
|
-
"vite-tsconfig-paths": "^6.1.1"
|
|
2707
|
+
"vite": "^8.0.1"
|
|
2697
2708
|
}
|
|
2698
2709
|
}`
|
|
2699
2710
|
},
|
|
@@ -2721,10 +2732,7 @@ dist-ssr
|
|
|
2721
2732
|
"noUnusedParameters": true,
|
|
2722
2733
|
"erasableSyntaxOnly": true,
|
|
2723
2734
|
"noFallthroughCasesInSwitch": true,
|
|
2724
|
-
"noUncheckedSideEffectImports": true
|
|
2725
|
-
"paths": {
|
|
2726
|
-
"@/*": ["./src/*"]
|
|
2727
|
-
}
|
|
2735
|
+
"noUncheckedSideEffectImports": true
|
|
2728
2736
|
},
|
|
2729
2737
|
"include": ["src"]
|
|
2730
2738
|
}`
|
|
@@ -2736,7 +2744,12 @@ dist-ssr
|
|
|
2736
2744
|
"references": [
|
|
2737
2745
|
{ "path": "./tsconfig.app.json" },
|
|
2738
2746
|
{ "path": "./tsconfig.node.json" }
|
|
2739
|
-
]
|
|
2747
|
+
],
|
|
2748
|
+
"compilerOptions": {
|
|
2749
|
+
"paths": {
|
|
2750
|
+
"@/*": ["./src/*"]
|
|
2751
|
+
}
|
|
2752
|
+
}
|
|
2740
2753
|
}`
|
|
2741
2754
|
},
|
|
2742
2755
|
{
|
|
@@ -2761,10 +2774,7 @@ dist-ssr
|
|
|
2761
2774
|
"noUnusedParameters": true,
|
|
2762
2775
|
"erasableSyntaxOnly": true,
|
|
2763
2776
|
"noFallthroughCasesInSwitch": true,
|
|
2764
|
-
"noUncheckedSideEffectImports": true
|
|
2765
|
-
"paths": {
|
|
2766
|
-
"@/*": ["./src/*"]
|
|
2767
|
-
}
|
|
2777
|
+
"noUncheckedSideEffectImports": true
|
|
2768
2778
|
},
|
|
2769
2779
|
"include": ["vite.config.ts"]
|
|
2770
2780
|
}`
|
|
@@ -2774,10 +2784,12 @@ dist-ssr
|
|
|
2774
2784
|
content: `import { defineConfig } from "vite"
|
|
2775
2785
|
import react from "@vitejs/plugin-react"
|
|
2776
2786
|
import tailwindcss from "@tailwindcss/vite"
|
|
2777
|
-
import tsconfigPaths from "vite-tsconfig-paths";
|
|
2778
2787
|
|
|
2779
2788
|
export default defineConfig({
|
|
2780
|
-
|
|
2789
|
+
resolve: {
|
|
2790
|
+
tsconfigPaths: true,
|
|
2791
|
+
},
|
|
2792
|
+
plugins: [tailwindcss(), react()],
|
|
2781
2793
|
})`
|
|
2782
2794
|
}
|
|
2783
2795
|
] }),
|
|
@@ -2910,7 +2922,12 @@ dist-ssr
|
|
|
2910
2922
|
"references": [
|
|
2911
2923
|
{ "path": "./tsconfig.app.json" },
|
|
2912
2924
|
{ "path": "./tsconfig.node.json" }
|
|
2913
|
-
]
|
|
2925
|
+
],
|
|
2926
|
+
"compilerOptions": {
|
|
2927
|
+
"paths": {
|
|
2928
|
+
"@/*": ["./src/*"]
|
|
2929
|
+
}
|
|
2930
|
+
}
|
|
2914
2931
|
}`
|
|
2915
2932
|
},
|
|
2916
2933
|
{
|
|
@@ -2947,6 +2964,9 @@ import solid from "vite-plugin-solid"
|
|
|
2947
2964
|
import tailwindcss from "@tailwindcss/vite"
|
|
2948
2965
|
|
|
2949
2966
|
export default defineConfig({
|
|
2967
|
+
resolve: {
|
|
2968
|
+
tsconfigPaths: true,
|
|
2969
|
+
},
|
|
2950
2970
|
plugins: [tailwindcss(), solid()],
|
|
2951
2971
|
})`
|
|
2952
2972
|
}
|
|
@@ -3022,8 +3042,7 @@ dist-ssr
|
|
|
3022
3042
|
"scripts": {
|
|
3023
3043
|
"dev": "vite",
|
|
3024
3044
|
"build": "vite build",
|
|
3025
|
-
"preview": "vite preview"
|
|
3026
|
-
"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
|
|
3045
|
+
"preview": "vite preview"
|
|
3027
3046
|
},
|
|
3028
3047
|
"dependencies": {
|
|
3029
3048
|
"@sprawlify/primitives": "^0.0.102",
|
|
@@ -3035,10 +3054,10 @@ dist-ssr
|
|
|
3035
3054
|
"@tsconfig/svelte": "^5.0.8",
|
|
3036
3055
|
"@types/node": "^24.12.0",
|
|
3037
3056
|
"svelte": "^5.54.0",
|
|
3038
|
-
"svelte-check": "^4.4.5",
|
|
3039
3057
|
"tailwindcss": "^4.2.2",
|
|
3040
3058
|
"typescript": "^5.9.3",
|
|
3041
|
-
"vite": "^8.0.1"
|
|
3059
|
+
"vite": "^8.0.1",
|
|
3060
|
+
"vite-tsconfig-paths": "^6.1.1"
|
|
3042
3061
|
}
|
|
3043
3062
|
}`
|
|
3044
3063
|
},
|
|
@@ -3072,7 +3091,12 @@ export default {}`
|
|
|
3072
3091
|
"references": [
|
|
3073
3092
|
{ "path": "./tsconfig.app.json" },
|
|
3074
3093
|
{ "path": "./tsconfig.node.json" }
|
|
3075
|
-
]
|
|
3094
|
+
],
|
|
3095
|
+
"compilerOptions": {
|
|
3096
|
+
"paths": {
|
|
3097
|
+
"@/*": ["./src/*"]
|
|
3098
|
+
}
|
|
3099
|
+
}
|
|
3076
3100
|
}`
|
|
3077
3101
|
},
|
|
3078
3102
|
{
|
|
@@ -3109,6 +3133,9 @@ import { svelte } from "@sveltejs/vite-plugin-svelte"
|
|
|
3109
3133
|
import tailwindcss from "@tailwindcss/vite"
|
|
3110
3134
|
|
|
3111
3135
|
export default defineConfig({
|
|
3136
|
+
resolve: {
|
|
3137
|
+
tsconfigPaths: true,
|
|
3138
|
+
},
|
|
3112
3139
|
plugins: [tailwindcss(), svelte()],
|
|
3113
3140
|
})`
|
|
3114
3141
|
}
|
|
@@ -3226,7 +3253,12 @@ dist-ssr
|
|
|
3226
3253
|
"references": [
|
|
3227
3254
|
{ "path": "./tsconfig.app.json" },
|
|
3228
3255
|
{ "path": "./tsconfig.node.json" }
|
|
3229
|
-
]
|
|
3256
|
+
],
|
|
3257
|
+
"compilerOptions": {
|
|
3258
|
+
"paths": {
|
|
3259
|
+
"@/*": ["./src/*"]
|
|
3260
|
+
}
|
|
3261
|
+
}
|
|
3230
3262
|
}`
|
|
3231
3263
|
},
|
|
3232
3264
|
{
|
|
@@ -3263,13 +3295,16 @@ import vue from "@vitejs/plugin-vue"
|
|
|
3263
3295
|
import tailwindcss from "@tailwindcss/vite"
|
|
3264
3296
|
|
|
3265
3297
|
export default defineConfig({
|
|
3298
|
+
resolve: {
|
|
3299
|
+
tsconfigPaths: true,
|
|
3300
|
+
},
|
|
3266
3301
|
plugins: [tailwindcss(), vue()],
|
|
3267
3302
|
})`
|
|
3268
3303
|
}
|
|
3269
3304
|
] })
|
|
3270
3305
|
};
|
|
3271
3306
|
//#endregion
|
|
3272
|
-
//#region src/commands/init/run
|
|
3307
|
+
//#region src/commands/init/run.ts
|
|
3273
3308
|
function resolvePresetFilePath(cwd, file) {
|
|
3274
3309
|
const srcPath = path.resolve(cwd, "src");
|
|
3275
3310
|
const appPath = path.resolve(cwd, "app");
|
|
@@ -3285,12 +3320,15 @@ function resolvePresetFilePath(cwd, file) {
|
|
|
3285
3320
|
}
|
|
3286
3321
|
return path.resolve(cwd, file.path);
|
|
3287
3322
|
}
|
|
3288
|
-
function
|
|
3323
|
+
function tailwindCssPathPrefix(cwd) {
|
|
3289
3324
|
const srcPath = path.resolve(cwd, "src");
|
|
3290
3325
|
const appPath = path.resolve(cwd, "app");
|
|
3291
|
-
if (fsExtra.existsSync(srcPath)) return
|
|
3292
|
-
if (fsExtra.existsSync(appPath)) return
|
|
3293
|
-
return
|
|
3326
|
+
if (fsExtra.existsSync(srcPath)) return "src";
|
|
3327
|
+
if (fsExtra.existsSync(appPath)) return "app";
|
|
3328
|
+
return "src";
|
|
3329
|
+
}
|
|
3330
|
+
function resolveTailwindCssFilePath(cwd, prefix, cssPath) {
|
|
3331
|
+
return path.resolve(cwd, prefix, cssPath);
|
|
3294
3332
|
}
|
|
3295
3333
|
function resolveItemsToApply(presetItems, requestedComponents) {
|
|
3296
3334
|
const presetItemsByName = new Map(presetItems.map((item) => [item.name, item]));
|
|
@@ -3308,6 +3346,13 @@ function resolveItemsToApply(presetItems, requestedComponents) {
|
|
|
3308
3346
|
for (const nestedDependency of matchingItem.dependencies ?? []) queue.push(nestedDependency);
|
|
3309
3347
|
continue;
|
|
3310
3348
|
}
|
|
3349
|
+
if (dependencyName.startsWith("@/")) {
|
|
3350
|
+
const extractedName = dependencyName.split("/").pop();
|
|
3351
|
+
if (extractedName && presetItemsByName.has(extractedName)) {
|
|
3352
|
+
queue.push(extractedName);
|
|
3353
|
+
continue;
|
|
3354
|
+
}
|
|
3355
|
+
}
|
|
3311
3356
|
packageNames.add(dependencyName);
|
|
3312
3357
|
}
|
|
3313
3358
|
if (requestedComponents.size > 0) {
|
|
@@ -3328,7 +3373,6 @@ async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames
|
|
|
3328
3373
|
}
|
|
3329
3374
|
const packageJson = await fsExtra.readJson(packageJsonPath);
|
|
3330
3375
|
let didChange = false;
|
|
3331
|
-
const missingPackages = [];
|
|
3332
3376
|
packageJson.dependencies ??= {};
|
|
3333
3377
|
packageJson.devDependencies ??= {};
|
|
3334
3378
|
for (const packageName of packageNames) {
|
|
@@ -3340,21 +3384,24 @@ async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames
|
|
|
3340
3384
|
}
|
|
3341
3385
|
continue;
|
|
3342
3386
|
}
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
}
|
|
3349
|
-
continue;
|
|
3387
|
+
}
|
|
3388
|
+
if (frameworkPreset.devDependencies) {
|
|
3389
|
+
for (const [devDependencyName, devDependencyVersion] of Object.entries(frameworkPreset.devDependencies)) if (!packageJson.devDependencies[devDependencyName]) {
|
|
3390
|
+
packageJson.devDependencies[devDependencyName] = devDependencyVersion;
|
|
3391
|
+
didChange = true;
|
|
3350
3392
|
}
|
|
3351
|
-
missingPackages.push(packageName);
|
|
3352
3393
|
}
|
|
3353
3394
|
if (didChange) {
|
|
3395
|
+
if (packageJson.dependencies && Object.keys(packageJson.dependencies).length > 0) packageJson.dependencies = Object.keys(packageJson.dependencies).sort().reduce((sorted, key) => {
|
|
3396
|
+
sorted[key] = packageJson.dependencies[key];
|
|
3397
|
+
return sorted;
|
|
3398
|
+
}, {});
|
|
3399
|
+
if (packageJson.devDependencies && Object.keys(packageJson.devDependencies).length > 0) packageJson.devDependencies = Object.keys(packageJson.devDependencies).sort().reduce((sorted, key) => {
|
|
3400
|
+
sorted[key] = packageJson.devDependencies[key];
|
|
3401
|
+
return sorted;
|
|
3402
|
+
}, {});
|
|
3354
3403
|
await fsExtra.writeJson(packageJsonPath, packageJson, { spaces: 2 });
|
|
3355
|
-
logger.success("Updated package.json with preset package dependencies.");
|
|
3356
3404
|
}
|
|
3357
|
-
if (missingPackages.length > 0) logger.warn(`Skipping unresolved preset packages: ${missingPackages.map((packageName) => highlighter.info(packageName)).join(", ")}.`);
|
|
3358
3405
|
}
|
|
3359
3406
|
async function runInit(options) {
|
|
3360
3407
|
let cwd = options.cwd;
|
|
@@ -3362,51 +3409,45 @@ async function runInit(options) {
|
|
|
3362
3409
|
cwd = path.resolve(options.cwd, options.name);
|
|
3363
3410
|
await fsExtra.ensureDir(cwd);
|
|
3364
3411
|
options.cwd = cwd;
|
|
3365
|
-
logger.info(`Using project directory: ${highlighter.info(options.name)}`);
|
|
3366
3412
|
}
|
|
3367
3413
|
const selectedTemplate = options.framework && options.framework in templates ? templates[options.framework] : void 0;
|
|
3368
3414
|
if (selectedTemplate?.files.length) for (const file of selectedTemplate.files) {
|
|
3369
3415
|
const targetPath = path.resolve(cwd, file.path);
|
|
3370
|
-
if (fsExtra.existsSync(targetPath) && !options.override) {
|
|
3371
|
-
logger.warn(`Skipping ${highlighter.info(file.path)} because it already exists. Use ${highlighter.info("--override")} to replace it.`);
|
|
3372
|
-
continue;
|
|
3373
|
-
}
|
|
3374
3416
|
await fsExtra.ensureDir(path.dirname(targetPath));
|
|
3375
3417
|
await fsExtra.writeFile(targetPath, file.content, "utf8");
|
|
3376
|
-
logger.success(`Created ${highlighter.info(file.path)} template file.`);
|
|
3377
3418
|
}
|
|
3378
3419
|
const componentsJsonPath = path.resolve(cwd, "components.json");
|
|
3379
|
-
logger.info("Starting project initialization...");
|
|
3380
3420
|
const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
|
|
3421
|
+
const tailwindcss = {
|
|
3422
|
+
cwd: tailwindCssPathPrefix(cwd),
|
|
3423
|
+
css: "globals.css"
|
|
3424
|
+
};
|
|
3381
3425
|
const config = {
|
|
3382
3426
|
$schema: "https://ui.primitives.com/schema.json",
|
|
3383
3427
|
framework: options.framework,
|
|
3384
3428
|
preset: options.preset,
|
|
3385
3429
|
metaframework: options.metaframework,
|
|
3386
|
-
tailwindcss: { css:
|
|
3430
|
+
tailwindcss: { css: `${tailwindcss.cwd}/${tailwindcss.css}` }
|
|
3387
3431
|
};
|
|
3388
3432
|
let backupPath = null;
|
|
3389
3433
|
if (fsExtra.existsSync(componentsJsonPath)) {
|
|
3390
3434
|
backupPath = `${componentsJsonPath}${FILE_BACKUP_SUFFIX}`;
|
|
3391
3435
|
fsExtra.copyFileSync(componentsJsonPath, backupPath);
|
|
3392
|
-
logger.info(`Created backup of existing configuration: ${path.basename(backupPath)}`);
|
|
3393
3436
|
}
|
|
3394
3437
|
try {
|
|
3395
3438
|
await fsExtra.ensureDir(path.dirname(componentsJsonPath));
|
|
3396
3439
|
await fsExtra.writeJson(componentsJsonPath, config, { spaces: 2 });
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
logger.success(`Created ${highlighter.info(config.tailwindcss.css)} from preset.`);
|
|
3440
|
+
if (frameworkPreset?.tailwindcss?.css) {
|
|
3441
|
+
if (!(fsExtra.existsSync(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css)) && !options.override)) {
|
|
3442
|
+
await fsExtra.ensureDir(path.dirname(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css)));
|
|
3443
|
+
await fsExtra.writeFile(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css), frameworkPreset.tailwindcss.css, "utf8");
|
|
3444
|
+
}
|
|
3403
3445
|
}
|
|
3404
3446
|
} catch (error) {
|
|
3405
3447
|
logger.error(`Failed to create components.json: ${error}`);
|
|
3406
3448
|
if (backupPath && fsExtra.existsSync(backupPath)) {
|
|
3407
3449
|
fsExtra.copyFileSync(backupPath, componentsJsonPath);
|
|
3408
3450
|
fsExtra.unlinkSync(backupPath);
|
|
3409
|
-
logger.info("Restored original configuration file.");
|
|
3410
3451
|
}
|
|
3411
3452
|
throw error;
|
|
3412
3453
|
}
|
|
@@ -3417,7 +3458,6 @@ async function runInit(options) {
|
|
|
3417
3458
|
return;
|
|
3418
3459
|
}
|
|
3419
3460
|
await applyPresetPackageDependencies(cwd, frameworkPreset, packageNames);
|
|
3420
|
-
logger.info(`Applying preset components: ${itemsToApply.map((item) => highlighter.info(item.name)).join(", ")}.`);
|
|
3421
3461
|
for (const item of itemsToApply) for (const file of item.files ?? []) {
|
|
3422
3462
|
const targetPath = resolvePresetFilePath(cwd, file);
|
|
3423
3463
|
if (fsExtra.existsSync(targetPath) && !options.override) {
|
|
@@ -3426,12 +3466,21 @@ async function runInit(options) {
|
|
|
3426
3466
|
}
|
|
3427
3467
|
await fsExtra.ensureDir(path.dirname(targetPath));
|
|
3428
3468
|
await fsExtra.writeFile(targetPath, file.content, "utf8");
|
|
3429
|
-
logger.success(`Created ${highlighter.info(path.relative(cwd, targetPath))} from preset component ${highlighter.info(item.name)}.`);
|
|
3430
3469
|
}
|
|
3431
3470
|
}
|
|
3432
3471
|
//#endregion
|
|
3472
|
+
//#region src/commands/init/done.ts
|
|
3473
|
+
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
3474
|
+
async function doneInit(options) {
|
|
3475
|
+
const projectDir = path.relative(process.cwd(), options.cwd);
|
|
3476
|
+
logger.log(`\nThat's it!`);
|
|
3477
|
+
logger.log(`Enter your project directory using ${highlighter.info(`cd .${path.sep}${projectDir}`)}.`);
|
|
3478
|
+
logger.log(`Install dependencies using ${highlighter.info("npm install")}.`);
|
|
3479
|
+
await sleep(200);
|
|
3480
|
+
}
|
|
3481
|
+
//#endregion
|
|
3433
3482
|
//#region src/commands/init.ts
|
|
3434
|
-
const init = new Command().name("init").alias("create").description("initialize your project and install dependencies").argument("[components...]", "names, url or local path to component").option("-p, --preset <preset>", "the preset to use. (monochrome, clay)").option("-f, --framework <framework>", "the framework to use. (react, solid, svelte, vue)").option("--metaframework <metaframework>", "the metaframework to use. (next, react-router, nuxt, sveltekit)").option("-y, --yes", "skip confirmation prompt.", true).option("-d, --defaults", "use default configuration: --preset=monochrome --framework=react --metaframework=
|
|
3483
|
+
const init = new Command().name("init").alias("create").description("initialize your project and install dependencies").argument("[components...]", "names, url or local path to component").option("-p, --preset <preset>", "the preset to use. (monochrome, clay)").option("-f, --framework <framework>", "the framework to use. (react, solid, svelte, vue)").option("--metaframework <metaframework>", "the metaframework to use. (next, react-router, nuxt, sveltekit)").option("-y, --yes", "skip confirmation prompt.", true).option("-d, --defaults", "use default configuration: --preset=monochrome --framework=react --metaframework=none", false).option("-o, --override", "override existing configuration.", false).option("-c, --cwd <cwd>", "the working directory. defaults to the current directory.", process.cwd()).option("-n, --name <name>", "the name for the new project.").option("-s, --silent", "mute output.", false).option("--reinstall", "re-install existing UI components.").option("--no-reinstall", "do not re-install existing UI components.").action(async (components, opts) => {
|
|
3435
3484
|
try {
|
|
3436
3485
|
const options = parseInitOptions(opts);
|
|
3437
3486
|
applyDefaultInitOptions(options);
|
|
@@ -3441,8 +3490,7 @@ const init = new Command().name("init").alias("create").description("initialize
|
|
|
3441
3490
|
options.components = components;
|
|
3442
3491
|
await loadEnvFiles(options.cwd);
|
|
3443
3492
|
await runInit(options);
|
|
3444
|
-
|
|
3445
|
-
logger.log(`Project initialization completed in ${highlighter.info(options.cwd)}.\nYou may now add components.`);
|
|
3493
|
+
await doneInit(options);
|
|
3446
3494
|
deleteFileBackup(path.resolve(options.cwd, "components.json"));
|
|
3447
3495
|
logger.break();
|
|
3448
3496
|
} catch (error) {
|