sprawlify 0.0.103 → 0.0.104
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +110 -93
- 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.104";
|
|
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.6",
|
|
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.6",
|
|
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
|
{
|
|
@@ -877,7 +883,10 @@ const PRESETS = {
|
|
|
877
883
|
clsx: "^2.1.1",
|
|
878
884
|
"tailwind-merge": "^3.5.0"
|
|
879
885
|
},
|
|
880
|
-
devDependencies: {
|
|
886
|
+
devDependencies: {
|
|
887
|
+
"tailwind-scrollbar": "^4.0.6",
|
|
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.6",
|
|
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
|
}]
|
|
@@ -3269,7 +3281,7 @@ export default defineConfig({
|
|
|
3269
3281
|
] })
|
|
3270
3282
|
};
|
|
3271
3283
|
//#endregion
|
|
3272
|
-
//#region src/commands/init/run
|
|
3284
|
+
//#region src/commands/init/run.ts
|
|
3273
3285
|
function resolvePresetFilePath(cwd, file) {
|
|
3274
3286
|
const srcPath = path.resolve(cwd, "src");
|
|
3275
3287
|
const appPath = path.resolve(cwd, "app");
|
|
@@ -3285,12 +3297,15 @@ function resolvePresetFilePath(cwd, file) {
|
|
|
3285
3297
|
}
|
|
3286
3298
|
return path.resolve(cwd, file.path);
|
|
3287
3299
|
}
|
|
3288
|
-
function
|
|
3300
|
+
function tailwindCssPathPrefix(cwd) {
|
|
3289
3301
|
const srcPath = path.resolve(cwd, "src");
|
|
3290
3302
|
const appPath = path.resolve(cwd, "app");
|
|
3291
|
-
if (fsExtra.existsSync(srcPath)) return
|
|
3292
|
-
if (fsExtra.existsSync(appPath)) return
|
|
3293
|
-
return
|
|
3303
|
+
if (fsExtra.existsSync(srcPath)) return "src";
|
|
3304
|
+
if (fsExtra.existsSync(appPath)) return "app";
|
|
3305
|
+
return "src";
|
|
3306
|
+
}
|
|
3307
|
+
function resolveTailwindCssFilePath(cwd, prefix, cssPath) {
|
|
3308
|
+
return path.resolve(cwd, prefix, cssPath);
|
|
3294
3309
|
}
|
|
3295
3310
|
function resolveItemsToApply(presetItems, requestedComponents) {
|
|
3296
3311
|
const presetItemsByName = new Map(presetItems.map((item) => [item.name, item]));
|
|
@@ -3308,6 +3323,13 @@ function resolveItemsToApply(presetItems, requestedComponents) {
|
|
|
3308
3323
|
for (const nestedDependency of matchingItem.dependencies ?? []) queue.push(nestedDependency);
|
|
3309
3324
|
continue;
|
|
3310
3325
|
}
|
|
3326
|
+
if (dependencyName.startsWith("@/")) {
|
|
3327
|
+
const extractedName = dependencyName.split("/").pop();
|
|
3328
|
+
if (extractedName && presetItemsByName.has(extractedName)) {
|
|
3329
|
+
queue.push(extractedName);
|
|
3330
|
+
continue;
|
|
3331
|
+
}
|
|
3332
|
+
}
|
|
3311
3333
|
packageNames.add(dependencyName);
|
|
3312
3334
|
}
|
|
3313
3335
|
if (requestedComponents.size > 0) {
|
|
@@ -3328,7 +3350,6 @@ async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames
|
|
|
3328
3350
|
}
|
|
3329
3351
|
const packageJson = await fsExtra.readJson(packageJsonPath);
|
|
3330
3352
|
let didChange = false;
|
|
3331
|
-
const missingPackages = [];
|
|
3332
3353
|
packageJson.dependencies ??= {};
|
|
3333
3354
|
packageJson.devDependencies ??= {};
|
|
3334
3355
|
for (const packageName of packageNames) {
|
|
@@ -3348,13 +3369,8 @@ async function applyPresetPackageDependencies(cwd, frameworkPreset, packageNames
|
|
|
3348
3369
|
}
|
|
3349
3370
|
continue;
|
|
3350
3371
|
}
|
|
3351
|
-
missingPackages.push(packageName);
|
|
3352
|
-
}
|
|
3353
|
-
if (didChange) {
|
|
3354
|
-
await fsExtra.writeJson(packageJsonPath, packageJson, { spaces: 2 });
|
|
3355
|
-
logger.success("Updated package.json with preset package dependencies.");
|
|
3356
3372
|
}
|
|
3357
|
-
if (
|
|
3373
|
+
if (didChange) await fsExtra.writeJson(packageJsonPath, packageJson, { spaces: 2 });
|
|
3358
3374
|
}
|
|
3359
3375
|
async function runInit(options) {
|
|
3360
3376
|
let cwd = options.cwd;
|
|
@@ -3362,7 +3378,6 @@ async function runInit(options) {
|
|
|
3362
3378
|
cwd = path.resolve(options.cwd, options.name);
|
|
3363
3379
|
await fsExtra.ensureDir(cwd);
|
|
3364
3380
|
options.cwd = cwd;
|
|
3365
|
-
logger.info(`Using project directory: ${highlighter.info(options.name)}`);
|
|
3366
3381
|
}
|
|
3367
3382
|
const selectedTemplate = options.framework && options.framework in templates ? templates[options.framework] : void 0;
|
|
3368
3383
|
if (selectedTemplate?.files.length) for (const file of selectedTemplate.files) {
|
|
@@ -3378,28 +3393,30 @@ async function runInit(options) {
|
|
|
3378
3393
|
const componentsJsonPath = path.resolve(cwd, "components.json");
|
|
3379
3394
|
logger.info("Starting project initialization...");
|
|
3380
3395
|
const frameworkPreset = getFrameworkPreset(options.preset, options.framework);
|
|
3396
|
+
const tailwindcss = {
|
|
3397
|
+
cwd: tailwindCssPathPrefix(cwd),
|
|
3398
|
+
css: "globals.css"
|
|
3399
|
+
};
|
|
3381
3400
|
const config = {
|
|
3382
3401
|
$schema: "https://ui.primitives.com/schema.json",
|
|
3383
3402
|
framework: options.framework,
|
|
3384
3403
|
preset: options.preset,
|
|
3385
3404
|
metaframework: options.metaframework,
|
|
3386
|
-
tailwindcss: { css:
|
|
3405
|
+
tailwindcss: { css: `${tailwindcss.cwd}/${tailwindcss.css}` }
|
|
3387
3406
|
};
|
|
3388
3407
|
let backupPath = null;
|
|
3389
3408
|
if (fsExtra.existsSync(componentsJsonPath)) {
|
|
3390
3409
|
backupPath = `${componentsJsonPath}${FILE_BACKUP_SUFFIX}`;
|
|
3391
3410
|
fsExtra.copyFileSync(componentsJsonPath, backupPath);
|
|
3392
|
-
logger.info(`Created backup of existing configuration: ${path.basename(backupPath)}`);
|
|
3393
3411
|
}
|
|
3394
3412
|
try {
|
|
3395
3413
|
await fsExtra.ensureDir(path.dirname(componentsJsonPath));
|
|
3396
3414
|
await fsExtra.writeJson(componentsJsonPath, config, { spaces: 2 });
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
logger.success(`Created ${highlighter.info(config.tailwindcss.css)} from preset.`);
|
|
3415
|
+
if (frameworkPreset?.tailwindcss?.css) {
|
|
3416
|
+
if (!(fsExtra.existsSync(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css)) && !options.override)) {
|
|
3417
|
+
await fsExtra.ensureDir(path.dirname(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css)));
|
|
3418
|
+
await fsExtra.writeFile(resolveTailwindCssFilePath(cwd, tailwindcss.cwd, tailwindcss.css), frameworkPreset.tailwindcss.css, "utf8");
|
|
3419
|
+
}
|
|
3403
3420
|
}
|
|
3404
3421
|
} catch (error) {
|
|
3405
3422
|
logger.error(`Failed to create components.json: ${error}`);
|