sprawlify 0.1.16 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.mjs +120 -1294
  2. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -10,7 +10,7 @@ import { faker } from "@faker-js/faker";
10
10
  import { cosmiconfig } from "cosmiconfig";
11
11
  import { createMatchPath, loadConfig } from "tsconfig-paths";
12
12
  //#region package.json
13
- var version = "0.1.16";
13
+ var version = "0.1.17";
14
14
  //#endregion
15
15
  //#region src/utils/file-helper.ts
16
16
  const FILE_BACKUP_SUFFIX = ".bak";
@@ -177,8 +177,7 @@ async function loadEnvFiles(cwd = process.cwd()) {
177
177
  const FRAMEWORKS = {
178
178
  react: { title: "React" },
179
179
  solid: { title: "Solid" },
180
- svelte: { title: "Svelte" },
181
- vue: { title: "Vue" }
180
+ svelte: { title: "Svelte" }
182
181
  };
183
182
  const METAFRAMEWORKS = { next: {
184
183
  title: "Next.js",
@@ -191,18 +190,18 @@ const PRESETS = { monochrome: {
191
190
  frameworks: {
192
191
  react: {
193
192
  dependencies: {
194
- react: "^18.2.0",
195
- "@sprawlify/react": "^0.1.9",
193
+ "react": "^18.2.0",
194
+ "@sprawlify/react": "^0.1.12",
196
195
  "lucide-react": "^1.7.0",
197
196
  "class-variance-authority": "^0.7.1",
198
- clsx: "^2.1.1",
197
+ "clsx": "^2.1.1",
199
198
  "tailwind-merge": "^3.5.0"
200
199
  },
201
200
  devDependencies: {
202
201
  "tailwind-scrollbar": "^4.0.2",
203
202
  "tw-animate-css": "^1.4.0"
204
203
  },
205
- 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" },
204
+ 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" },
206
205
  items: [
207
206
  {
208
207
  name: "accordion",
@@ -324,6 +323,22 @@ const PRESETS = { monochrome: {
324
323
  path: "button-group.tsx"
325
324
  }]
326
325
  },
326
+ {
327
+ name: "calendar",
328
+ dependencies: [
329
+ "react",
330
+ "@/lib/utils",
331
+ "@/components/ui/button",
332
+ "@sprawlify/react",
333
+ "@internationalized/date",
334
+ "lucide-react"
335
+ ],
336
+ files: [{
337
+ content: "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n DatePicker as DatePickerPrimitive,\r\n} from \"@sprawlify/react/date-picker\"\r\nimport { type DateValue } from \"@internationalized/date\"\r\nimport {\r\n ChevronDownIcon,\r\n ChevronLeftIcon,\r\n ChevronRightIcon,\r\n} from \"lucide-react\"\r\n\r\nfunction CalendarViewHeader({\r\n buttonVariant = \"ghost\",\r\n}: {\r\n buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\r\n}) {\r\n return (\r\n <DatePickerPrimitive.ViewControl className=\"relative flex w-full items-center justify-between gap-1\">\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild>\r\n <DatePickerPrimitive.PrevTrigger>\r\n <ChevronLeftIcon className=\"size-4\" />\r\n </DatePickerPrimitive.PrevTrigger>\r\n </Button>\r\n\r\n <DatePickerPrimitive.ViewTrigger className=\"flex h-(--cell-size) items-center justify-center text-sm font-medium select-none\">\r\n <DatePickerPrimitive.RangeText />\r\n </DatePickerPrimitive.ViewTrigger>\r\n\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild>\r\n <DatePickerPrimitive.NextTrigger>\r\n <ChevronRightIcon className=\"size-4\" />\r\n </DatePickerPrimitive.NextTrigger>\r\n </Button>\r\n </DatePickerPrimitive.ViewControl>\r\n )\r\n}\r\n\r\nfunction CalendarSelectHeader({\r\n buttonVariant = \"ghost\",\r\n className,\r\n}: {\r\n buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\r\n className?: string\r\n}) {\r\n return (\r\n <DatePickerPrimitive.ViewControl\r\n className={cn(\r\n \"relative flex w-full items-center justify-between gap-1\",\r\n className\r\n )}\r\n >\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild>\r\n <DatePickerPrimitive.PrevTrigger>\r\n <ChevronLeftIcon className=\"size-4\" />\r\n </DatePickerPrimitive.PrevTrigger>\r\n </Button>\r\n\r\n <div className=\"flex items-center gap-1\">\r\n <span className=\"relative\">\r\n <DatePickerPrimitive.MonthSelect className=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\" />\r\n <ChevronDownIcon className=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\r\n </span>\r\n <span className=\"relative\">\r\n <DatePickerPrimitive.YearSelect className=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\" />\r\n <ChevronDownIcon className=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\r\n </span>\r\n </div>\r\n\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild>\r\n <DatePickerPrimitive.NextTrigger>\r\n <ChevronRightIcon className=\"size-4\" />\r\n </DatePickerPrimitive.NextTrigger>\r\n </Button>\r\n </DatePickerPrimitive.ViewControl>\r\n )\r\n}\r\n\r\nfunction CalendarDayView({\r\n showOutsideDays = true,\r\n header,\r\n cell,\r\n}: {\r\n showOutsideDays?: boolean\r\n header?: React.ReactNode\r\n cell?: (day: DateValue) => React.ReactNode\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"day\" className=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => (\r\n <>\r\n {header ?? <CalendarSelectHeader />}\r\n <CalendarDayTable\r\n weeks={api.weeks}\r\n weekDays={api.weekDays}\r\n focusedMonth={api.focusedValue.month}\r\n showOutsideDays={showOutsideDays}\r\n cell={cell}\r\n />\r\n </>\r\n )}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n )\r\n}\r\n\r\nfunction CalendarMonthView({\r\n header,\r\n cell,\r\n}: {\r\n header?: React.ReactNode\r\n cell?: (month: { label: string; value: number }) => React.ReactNode\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"month\" className=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => (\r\n <>\r\n {header ?? <CalendarSelectHeader />}\r\n <DatePickerPrimitive.Table className=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableBody>\r\n {api\r\n .getMonthsGrid({ columns: 4, format: \"short\" })\r\n .map((months, rowIndex) => (\r\n <DatePickerPrimitive.TableRow\r\n key={rowIndex}\r\n className=\"mt-2 flex w-full\"\r\n >\r\n {months.map((month, colIndex) => (\r\n <DatePickerPrimitive.TableCell\r\n key={colIndex}\r\n value={month.value}\r\n className=\"flex-1 p-0 text-center\"\r\n >\r\n <DatePickerPrimitive.TableCellTrigger asChild>\r\n <Button\r\n variant=\"ghost\"\r\n className=\"w-full text-sm font-normal\"\r\n >\r\n {cell ? cell(month) : month.label}\r\n </Button>\r\n </DatePickerPrimitive.TableCellTrigger>\r\n </DatePickerPrimitive.TableCell>\r\n ))}\r\n </DatePickerPrimitive.TableRow>\r\n ))}\r\n </DatePickerPrimitive.TableBody>\r\n </DatePickerPrimitive.Table>\r\n </>\r\n )}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n )\r\n}\r\n\r\nfunction CalendarYearView({\r\n header,\r\n cell,\r\n}: {\r\n header?: React.ReactNode\r\n cell?: (year: { label: string; value: number }) => React.ReactNode\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"year\" className=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => (\r\n <>\r\n {header ?? <CalendarSelectHeader />}\r\n <DatePickerPrimitive.Table className=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableBody>\r\n {api.getYearsGrid({ columns: 4 }).map((years, rowIndex) => (\r\n <DatePickerPrimitive.TableRow\r\n key={rowIndex}\r\n className=\"mt-2 flex w-full\"\r\n >\r\n {years.map((year, colIndex) => (\r\n <DatePickerPrimitive.TableCell\r\n key={colIndex}\r\n value={year.value}\r\n className=\"flex-1 p-0 text-center\"\r\n >\r\n <DatePickerPrimitive.TableCellTrigger asChild>\r\n <Button\r\n variant=\"ghost\"\r\n className=\"w-full text-sm font-normal\"\r\n >\r\n {cell ? cell(year) : year.label}\r\n </Button>\r\n </DatePickerPrimitive.TableCellTrigger>\r\n </DatePickerPrimitive.TableCell>\r\n ))}\r\n </DatePickerPrimitive.TableRow>\r\n ))}\r\n </DatePickerPrimitive.TableBody>\r\n </DatePickerPrimitive.Table>\r\n </>\r\n )}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n )\r\n}\r\n\r\nfunction CalendarDayButton({\r\n children,\r\n className,\r\n ...props\r\n}: React.ComponentProps<typeof DatePickerPrimitive.TableCellTrigger>) {\r\n return (\r\n <DatePickerPrimitive.TableCellTrigger\r\n className={cn(\r\n \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) items-center justify-center gap-1 rounded-(--cell-radius) border-0 text-sm leading-none font-normal\",\r\n \"hover:bg-accent hover:text-accent-foreground\",\r\n \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\r\n \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\r\n \"data-[outside-range]:text-muted-foreground/50\",\r\n \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\r\n \"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[unavailable]:opacity-40\",\r\n \"data-[in-range]:rounded-none data-[in-range]:bg-accent data-[in-range]:text-accent-foreground\",\r\n \"data-[range-start]:rounded-l-(--cell-radius) data-[range-start]:bg-primary data-[range-start]:text-primary-foreground\",\r\n \"data-[range-end]:rounded-r-(--cell-radius) data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\r\n \"focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n </DatePickerPrimitive.TableCellTrigger>\r\n )\r\n}\r\n\r\nfunction CalendarDayTable({\r\n weeks,\r\n weekDays,\r\n focusedMonth,\r\n showOutsideDays = true,\r\n visibleRange,\r\n cell,\r\n}: {\r\n weeks: DateValue[][]\r\n weekDays: { short: string }[]\r\n focusedMonth: number\r\n showOutsideDays?: boolean\r\n visibleRange?: { start: DateValue; end: DateValue }\r\n cell?: (day: DateValue) => React.ReactNode\r\n}) {\r\n return (\r\n <DatePickerPrimitive.Table className=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableHead>\r\n <DatePickerPrimitive.TableRow className=\"flex\">\r\n {weekDays.map((weekDay, i) => (\r\n <DatePickerPrimitive.TableHeader\r\n key={i}\r\n className=\"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\"\r\n >\r\n {weekDay.short}\r\n </DatePickerPrimitive.TableHeader>\r\n ))}\r\n </DatePickerPrimitive.TableRow>\r\n </DatePickerPrimitive.TableHead>\r\n <DatePickerPrimitive.TableBody>\r\n {weeks.map((week, weekIndex) => (\r\n <DatePickerPrimitive.TableRow key={weekIndex} className=\"mt-2 flex w-full\">\r\n {week.map((day, dayIndex) => {\r\n const isOutside = day.month !== focusedMonth\r\n if (!showOutsideDays && isOutside) {\r\n return (\r\n <td key={dayIndex} className=\"flex-1 p-0\" aria-hidden />\r\n )\r\n }\r\n return (\r\n <DatePickerPrimitive.TableCell\r\n key={dayIndex}\r\n value={day}\r\n visibleRange={visibleRange}\r\n className={cn(\r\n \"group/day relative aspect-square h-full w-full flex-1 rounded-(--cell-radius) p-0 text-center select-none\",\r\n \"[&:last-child[data-selected]_div]:rounded-r-(--cell-radius)\",\r\n \"[&:first-child[data-selected]_div]:rounded-l-(--cell-radius)\"\r\n )}\r\n >\r\n <CalendarDayButton>\r\n {cell ? cell(day) : day.day}\r\n </CalendarDayButton>\r\n </DatePickerPrimitive.TableCell>\r\n )\r\n })}\r\n </DatePickerPrimitive.TableRow>\r\n ))}\r\n </DatePickerPrimitive.TableBody>\r\n </DatePickerPrimitive.Table>\r\n )\r\n}\r\n\r\nfunction CalendarDualMonthDayView({\r\n showOutsideDays = true,\r\n cell,\r\n}: {\r\n showOutsideDays?: boolean\r\n cell?: (day: DateValue) => React.ReactNode\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"day\" className=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => {\r\n const offset = api.getOffset({ months: 1 })\r\n return (\r\n <div className=\"flex gap-4 flex-row\">\r\n {/* First month */}\r\n <div className=\"flex flex-col gap-4\">\r\n <div className=\"relative flex w-full items-center justify-between gap-1\">\r\n <DatePickerPrimitive.PrevTrigger asChild>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n <ChevronLeftIcon className=\"size-4\" />\r\n </Button>\r\n </DatePickerPrimitive.PrevTrigger>\r\n <span className=\"text-sm font-medium select-none\">\r\n {api.visibleRangeText.start}\r\n </span>\r\n <div className=\"size-(--cell-size)\" />\r\n </div>\r\n <CalendarDayTable\r\n weeks={api.weeks}\r\n weekDays={api.weekDays}\r\n focusedMonth={api.focusedValue.month}\r\n showOutsideDays={showOutsideDays}\r\n cell={cell}\r\n />\r\n </div>\r\n {/* Second month */}\r\n <div className=\"flex flex-col gap-4\">\r\n <div className=\"relative flex w-full items-center justify-between gap-1\">\r\n <div className=\"size-(--cell-size)\" />\r\n <span className=\"text-sm font-medium select-none\">\r\n {api.visibleRangeText.end}\r\n </span>\r\n <DatePickerPrimitive.NextTrigger asChild>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n <ChevronRightIcon className=\"size-4\" />\r\n </Button>\r\n </DatePickerPrimitive.NextTrigger>\r\n </div>\r\n <CalendarDayTable\r\n weeks={offset.weeks}\r\n weekDays={api.weekDays}\r\n focusedMonth={offset.visibleRange.start.month}\r\n showOutsideDays={showOutsideDays}\r\n visibleRange={offset.visibleRange}\r\n cell={cell}\r\n />\r\n </div>\r\n </div>\r\n )\r\n }}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n )\r\n}\r\n\r\nfunction Calendar({\r\n className,\r\n showOutsideDays = true,\r\n children,\r\n numOfMonths,\r\n ...props\r\n}: Omit<React.ComponentProps<typeof DatePickerPrimitive.Root>, \"inline\"> & {\r\n className?: string\r\n showOutsideDays?: boolean\r\n children?: React.ReactNode\r\n}) {\r\n const isDualMonth = numOfMonths && numOfMonths >= 2\r\n\r\n return (\r\n <DatePickerPrimitive.Root inline numOfMonths={numOfMonths} {...props}>\r\n <div\r\n data-slot=\"calendar\"\r\n className={cn(\r\n \"group/calendar w-fit bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\r\n className\r\n )}\r\n >\r\n {children || (\r\n <>\r\n {isDualMonth ? (\r\n <CalendarDualMonthDayView\r\n showOutsideDays={showOutsideDays}\r\n />\r\n ) : (\r\n <CalendarDayView showOutsideDays={showOutsideDays} />\r\n )}\r\n <CalendarMonthView />\r\n <CalendarYearView />\r\n </>\r\n )}\r\n </div>\r\n </DatePickerPrimitive.Root>\r\n )\r\n}\r\n\r\nconst CalendarPresetTrigger = DatePickerPrimitive.PresetTrigger\r\n\r\nexport {\r\n Calendar,\r\n CalendarDayView,\r\n CalendarDualMonthDayView,\r\n CalendarDayTable,\r\n CalendarMonthView,\r\n CalendarYearView,\r\n CalendarViewHeader,\r\n CalendarSelectHeader,\r\n CalendarDayButton,\r\n CalendarPresetTrigger,\r\n}",
338
+ type: "registry:ui",
339
+ path: "calendar.tsx"
340
+ }]
341
+ },
327
342
  {
328
343
  name: "card",
329
344
  dependencies: [
@@ -384,7 +399,7 @@ const PRESETS = { monochrome: {
384
399
  "lucide-react"
385
400
  ],
386
401
  files: [{
387
- content: "\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return (\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu\"\n positioning={{ offset: { mainAxis: 4 } }}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n className={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 className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset: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 className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n data-inset={inset}\n className={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: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 className,\n )}\n checked={checked}\n {...props}\n >\n <span\n className=\"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 {children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {\n return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n data-inset={inset}\n className={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: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 className,\n )}\n {...props}\n >\n <span\n className=\"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 {children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.ItemGroupLabel\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.TriggerItem\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={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: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 className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"cn-rtl-flip ml-auto\" />\n </DropdownMenuPrimitive.TriggerItem>\n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-sub-content\"\n className={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 className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n",
402
+ content: "\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return (\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu\"\n positioning={{ offset: { mainAxis: 4 } }}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps<typeof Portal>) {\n return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n className={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 className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset: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 className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n data-inset={inset}\n className={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: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 className,\n )}\n checked={checked}\n {...props}\n >\n <span\n className=\"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 {children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>) {\n return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n data-inset={inset}\n className={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: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 className,\n )}\n {...props}\n >\n <span\n className=\"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 {children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.ItemGroupLabel\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n inset?: boolean;\n}) {\n return (\n <DropdownMenuPrimitive.TriggerItem\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={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: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 className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </DropdownMenuPrimitive.TriggerItem>\n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-sub-content\"\n className={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 className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n",
388
403
  type: "registry:ui",
389
404
  path: "dropdown-menu.tsx"
390
405
  }]
@@ -572,7 +587,7 @@ const PRESETS = { monochrome: {
572
587
  "@/lib/utils"
573
588
  ],
574
589
  files: [{
575
- content: "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/react/tooltip\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Portal } from \"@sprawlify/react/portal\"\r\n\r\nfunction TooltipProvider({\r\n ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.RootProvider>) {\r\n return (\r\n <TooltipPrimitive.RootProvider\r\n data-slot=\"tooltip-provider\"\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction Tooltip({\r\n ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\r\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\r\n}\r\n\r\nfunction TooltipTrigger({\r\n ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\r\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\r\n}\r\n\r\nfunction TooltipContent({\r\n className,\r\n children,\r\n ...props\r\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\r\n return (\r\n <Portal>\r\n <TooltipPrimitive.Positioner>\r\n <TooltipPrimitive.Content\r\n data-slot=\"tooltip-content\"\r\n className={cn(\r\n \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <TooltipPrimitive.Arrow className=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n <TooltipPrimitive.ArrowTip className=\"rounded-xs\" />\r\n </TooltipPrimitive.Arrow>\r\n </TooltipPrimitive.Content>\r\n </TooltipPrimitive.Positioner>\r\n\r\n </Portal>\r\n )\r\n}\r\n\r\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\r\n",
590
+ content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/react/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Portal } from \"@sprawlify/react/portal\";\n\nfunction TooltipProvider({ ...props }: React.ComponentProps<typeof TooltipPrimitive.RootProvider>) {\n return <TooltipPrimitive.RootProvider data-slot=\"tooltip-provider\" {...props} />;\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <Portal>\n <TooltipPrimitive.Positioner>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n className={cn(\n \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n className,\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\n <TooltipPrimitive.ArrowTip className=\"rounded-xs\" />\n </TooltipPrimitive.Arrow>\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Positioner>\n </Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n",
576
591
  type: "registry:ui",
577
592
  path: "tooltip.tsx"
578
593
  }]
@@ -590,18 +605,18 @@ const PRESETS = { monochrome: {
590
605
  },
591
606
  solid: {
592
607
  dependencies: {
593
- "@sprawlify/solid": "^0.1.9",
608
+ "@sprawlify/solid": "^0.1.12",
594
609
  "lucide-solid": "^1.7.0",
595
610
  "solid-js": "^1.8.0",
596
611
  "class-variance-authority": "^0.7.1",
597
- clsx: "^2.1.1",
612
+ "clsx": "^2.1.1",
598
613
  "tailwind-merge": "^3.5.0"
599
614
  },
600
615
  devDependencies: {
601
616
  "tailwind-scrollbar": "^4.0.2",
602
617
  "tw-animate-css": "^1.4.0"
603
618
  },
604
- 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" },
619
+ 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" },
605
620
  items: [
606
621
  {
607
622
  name: "accordion",
@@ -725,6 +740,22 @@ const PRESETS = { monochrome: {
725
740
  path: "button-group.tsx"
726
741
  }]
727
742
  },
743
+ {
744
+ name: "calendar",
745
+ dependencies: [
746
+ "@/lib/utils",
747
+ "@/components/ui/button",
748
+ "@sprawlify/solid",
749
+ "@internationalized/date",
750
+ "lucide-solid",
751
+ "solid-js"
752
+ ],
753
+ files: [{
754
+ content: "import { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { DatePicker as DatePickerPrimitive } from \"@sprawlify/solid/date-picker\";\r\nimport type { DateValue } from \"@internationalized/date\";\r\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-solid\";\r\nimport { splitProps, type ComponentProps, type JSX, Show, For } from \"solid-js\";\r\n\r\nfunction CalendarViewHeader(props: {\r\n buttonVariant?: ComponentProps<typeof Button>[\"variant\"];\r\n}) {\r\n const [local] = splitProps(props, [\"buttonVariant\"]);\r\n\r\n const buttonVariant = () => local.buttonVariant || \"ghost\";\r\n\r\n return (\r\n <DatePickerPrimitive.ViewControl class=\"relative flex w-full items-center justify-between gap-1\">\r\n <Button\r\n variant={buttonVariant()}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild={(props) => (\r\n <DatePickerPrimitive.PrevTrigger {...props()}>\r\n <ChevronLeftIcon class=\"size-4\" />\r\n </DatePickerPrimitive.PrevTrigger>\r\n )}\r\n />\r\n\r\n <DatePickerPrimitive.ViewTrigger class=\"flex h-(--cell-size) items-center justify-center text-sm font-medium select-none\">\r\n <DatePickerPrimitive.RangeText />\r\n </DatePickerPrimitive.ViewTrigger>\r\n\r\n <Button\r\n variant={buttonVariant()}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild={(props) => (\r\n <DatePickerPrimitive.NextTrigger {...props()}>\r\n <ChevronRightIcon class=\"size-4\" />\r\n </DatePickerPrimitive.NextTrigger>\r\n )}\r\n />\r\n </DatePickerPrimitive.ViewControl>\r\n );\r\n}\r\n\r\nfunction CalendarSelectHeader(props: {\r\n buttonVariant?: ComponentProps<typeof Button>[\"variant\"];\r\n class?: string;\r\n}) {\r\n const [local, others] = splitProps(props, [\"buttonVariant\", \"class\"]);\r\n\r\n const buttonVariant = () => local.buttonVariant || \"ghost\";\r\n\r\n return (\r\n <DatePickerPrimitive.ViewControl\r\n class={cn(\r\n \"relative flex w-full items-center justify-between gap-1\",\r\n local.class\r\n )}\r\n {...others}\r\n >\r\n <Button\r\n variant={buttonVariant()}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild={(props) => (\r\n <DatePickerPrimitive.PrevTrigger {...props()}>\r\n <ChevronLeftIcon class=\"size-4\" />\r\n </DatePickerPrimitive.PrevTrigger>\r\n )}\r\n />\r\n\r\n <div class=\"flex items-center gap-1\">\r\n <span class=\"relative\">\r\n <DatePickerPrimitive.MonthSelect class=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\" />\r\n <ChevronDownIcon class=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\r\n </span>\r\n <span class=\"relative\">\r\n <DatePickerPrimitive.YearSelect class=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\" />\r\n <ChevronDownIcon class=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\r\n </span>\r\n </div>\r\n\r\n <Button\r\n variant={buttonVariant()}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n asChild={(props) => (\r\n <DatePickerPrimitive.NextTrigger {...props()}>\r\n <ChevronRightIcon class=\"size-4\" />\r\n </DatePickerPrimitive.NextTrigger>\r\n )}\r\n />\r\n </DatePickerPrimitive.ViewControl>\r\n );\r\n}\r\n\r\nfunction CalendarDayView(props: {\r\n showOutsideDays?: boolean;\r\n header?: JSX.Element;\r\n cell?: (day: DateValue) => JSX.Element;\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"day\" class=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => (\r\n <>\r\n <Show when={props.header} fallback={<CalendarSelectHeader />}>\r\n {props.header}\r\n </Show>\r\n <CalendarDayTable\r\n weeks={api().weeks}\r\n weekDays={api().weekDays}\r\n focusedMonth={api().focusedValue.month}\r\n showOutsideDays={props.showOutsideDays ?? true}\r\n cell={props.cell}\r\n />\r\n </>\r\n )}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n );\r\n}\r\n\r\nfunction CalendarMonthView(props: {\r\n header?: JSX.Element;\r\n cell?: (month: { label: string; value: number }) => JSX.Element;\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"month\" class=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => (\r\n <>\r\n <Show when={props.header} fallback={<CalendarSelectHeader />}>\r\n {props.header}\r\n </Show>\r\n <DatePickerPrimitive.Table class=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableBody>\r\n <For each={api().getMonthsGrid({ columns: 4, format: \"short\" })}>\r\n {(months) => (\r\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\r\n <For each={months}>\r\n {(month) => (\r\n <DatePickerPrimitive.TableCell\r\n value={month.value}\r\n class=\"flex-1 p-0 text-center\"\r\n >\r\n <DatePickerPrimitive.TableCellTrigger>\r\n <Button\r\n variant=\"ghost\"\r\n class=\"w-full text-sm font-normal\"\r\n >\r\n {props.cell ? props.cell(month) : month.label}\r\n </Button>\r\n </DatePickerPrimitive.TableCellTrigger>\r\n </DatePickerPrimitive.TableCell>\r\n )}\r\n </For>\r\n </DatePickerPrimitive.TableRow>\r\n )}\r\n </For>\r\n </DatePickerPrimitive.TableBody>\r\n </DatePickerPrimitive.Table>\r\n </>\r\n )}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n );\r\n}\r\n\r\nfunction CalendarYearView(props: {\r\n header?: JSX.Element;\r\n cell?: (year: { label: string; value: number }) => JSX.Element;\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"year\" class=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => (\r\n <>\r\n <Show when={props.header} fallback={<CalendarSelectHeader />}>\r\n {props.header}\r\n </Show>\r\n <DatePickerPrimitive.Table class=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableBody>\r\n <For each={api().getYearsGrid({ columns: 4 })}>\r\n {(years) => (\r\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\r\n <For each={years}>\r\n {(year) => (\r\n <DatePickerPrimitive.TableCell\r\n value={year.value}\r\n class=\"flex-1 p-0 text-center\"\r\n >\r\n <DatePickerPrimitive.TableCellTrigger>\r\n <Button\r\n variant=\"ghost\"\r\n class=\"w-full text-sm font-normal\"\r\n >\r\n {props.cell ? props.cell(year) : year.label}\r\n </Button>\r\n </DatePickerPrimitive.TableCellTrigger>\r\n </DatePickerPrimitive.TableCell>\r\n )}\r\n </For>\r\n </DatePickerPrimitive.TableRow>\r\n )}\r\n </For>\r\n </DatePickerPrimitive.TableBody>\r\n </DatePickerPrimitive.Table>\r\n </>\r\n )}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n );\r\n}\r\n\r\nfunction CalendarDayButton(props: ComponentProps<typeof DatePickerPrimitive.TableCellTrigger>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <DatePickerPrimitive.TableCellTrigger\r\n class={cn(\r\n \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) items-center justify-center gap-1 rounded-(--cell-radius) border-0 text-sm leading-none font-normal\",\r\n \"hover:bg-accent hover:text-accent-foreground\",\r\n \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\r\n \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\r\n \"data-[outside-range]:text-muted-foreground/50\",\r\n \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\r\n \"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[unavailable]:opacity-40\",\r\n \"data-[in-range]:rounded-none data-[in-range]:bg-accent data-[in-range]:text-accent-foreground\",\r\n \"data-[range-start]:rounded-l-(--cell-radius) data-[range-start]:bg-primary data-[range-start]:text-primary-foreground\",\r\n \"data-[range-end]:rounded-r-(--cell-radius) data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\r\n \"focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\r\n local.class\r\n )}\r\n {...others}\r\n >\r\n {local.children}\r\n </DatePickerPrimitive.TableCellTrigger>\r\n );\r\n}\r\n\r\nfunction CalendarDayTable(props: {\r\n weeks: DateValue[][];\r\n weekDays: { short: string }[];\r\n focusedMonth: number;\r\n showOutsideDays?: boolean;\r\n visibleRange?: { start: DateValue; end: DateValue };\r\n cell?: (day: DateValue) => JSX.Element;\r\n}) {\r\n return (\r\n <DatePickerPrimitive.Table class=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableHead>\r\n <DatePickerPrimitive.TableRow class=\"flex\">\r\n <For each={props.weekDays}>\r\n {(weekDay) => (\r\n <DatePickerPrimitive.TableHeader\r\n class=\"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\"\r\n >\r\n {weekDay.short}\r\n </DatePickerPrimitive.TableHeader>\r\n )}\r\n </For>\r\n </DatePickerPrimitive.TableRow>\r\n </DatePickerPrimitive.TableHead>\r\n <DatePickerPrimitive.TableBody>\r\n <For each={props.weeks}>\r\n {(week) => (\r\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\r\n <For each={week}>\r\n {(day) => {\r\n const isOutside = day.month !== props.focusedMonth;\r\n const showOutsideDays = props.showOutsideDays ?? true;\r\n\r\n if (!showOutsideDays && isOutside) {\r\n return (\r\n <td class=\"flex-1 p-0\" aria-hidden />\r\n );\r\n }\r\n\r\n return (\r\n <DatePickerPrimitive.TableCell\r\n value={day}\r\n visibleRange={props.visibleRange}\r\n class={cn(\r\n \"group/day relative aspect-square h-full w-full flex-1 rounded-(--cell-radius) p-0 text-center select-none\",\r\n \"[&:last-child[data-selected]_div]:rounded-r-(--cell-radius)\",\r\n \"[&:first-child[data-selected]_div]:rounded-l-(--cell-radius)\"\r\n )}\r\n >\r\n <CalendarDayButton>\r\n {props.cell ? props.cell(day) : day.day}\r\n </CalendarDayButton>\r\n </DatePickerPrimitive.TableCell>\r\n );\r\n }}\r\n </For>\r\n </DatePickerPrimitive.TableRow>\r\n )}\r\n </For>\r\n </DatePickerPrimitive.TableBody>\r\n </DatePickerPrimitive.Table>\r\n );\r\n}\r\n\r\nfunction CalendarDualMonthDayView(props: {\r\n showOutsideDays?: boolean;\r\n cell?: (day: DateValue) => JSX.Element;\r\n}) {\r\n return (\r\n <DatePickerPrimitive.View view=\"day\" class=\"flex flex-col gap-4\">\r\n <DatePickerPrimitive.Context>\r\n {(api) => {\r\n const offset = api().getOffset({ months: 1 });\r\n return (\r\n <div class=\"flex gap-4 flex-row\">\r\n {/* First month */}\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"relative flex w-full items-center justify-between gap-1\">\r\n <DatePickerPrimitive.PrevTrigger>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n <ChevronLeftIcon class=\"size-4\" />\r\n </Button>\r\n </DatePickerPrimitive.PrevTrigger>\r\n <span class=\"text-sm font-medium select-none\">\r\n {api().visibleRangeText.start}\r\n </span>\r\n <div class=\"size-(--cell-size)\" />\r\n </div>\r\n <CalendarDayTable\r\n weeks={api().weeks}\r\n weekDays={api().weekDays}\r\n focusedMonth={api().focusedValue.month}\r\n showOutsideDays={props.showOutsideDays}\r\n cell={props.cell}\r\n />\r\n </div>\r\n {/* Second month */}\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"relative flex w-full items-center justify-between gap-1\">\r\n <div class=\"size-(--cell-size)\" />\r\n <span class=\"text-sm font-medium select-none\">\r\n {api().visibleRangeText.end}\r\n </span>\r\n <DatePickerPrimitive.NextTrigger>\r\n <Button\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n <ChevronRightIcon class=\"size-4\" />\r\n </Button>\r\n </DatePickerPrimitive.NextTrigger>\r\n </div>\r\n <CalendarDayTable\r\n weeks={offset.weeks}\r\n weekDays={api().weekDays}\r\n focusedMonth={offset.visibleRange.start.month}\r\n showOutsideDays={props.showOutsideDays}\r\n visibleRange={offset.visibleRange}\r\n cell={props.cell}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }}\r\n </DatePickerPrimitive.Context>\r\n </DatePickerPrimitive.View>\r\n );\r\n}\r\n\r\nfunction Calendar(\r\n props: Omit<ComponentProps<typeof DatePickerPrimitive.Root>, \"inline\"> & {\r\n class?: string;\r\n showOutsideDays?: boolean;\r\n children?: JSX.Element;\r\n numOfMonths?: number;\r\n }\r\n) {\r\n const [local, others] = splitProps(props, [\r\n \"class\",\r\n \"showOutsideDays\",\r\n \"children\",\r\n \"numOfMonths\",\r\n ]);\r\n\r\n const isDualMonth = () => local.numOfMonths && local.numOfMonths >= 2;\r\n const showOutsideDays = () => local.showOutsideDays ?? true;\r\n\r\n return (\r\n <DatePickerPrimitive.Root inline numOfMonths={local.numOfMonths} {...others}>\r\n <div\r\n data-slot=\"calendar\"\r\n class={cn(\r\n \"group/calendar w-fit bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\r\n local.class\r\n )}\r\n >\r\n <Show\r\n when={local.children}\r\n fallback={\r\n <>\r\n <Show\r\n when={isDualMonth()}\r\n fallback={<CalendarDayView showOutsideDays={showOutsideDays()} />}\r\n >\r\n <CalendarDualMonthDayView showOutsideDays={showOutsideDays()} />\r\n </Show>\r\n <CalendarMonthView />\r\n <CalendarYearView />\r\n </>\r\n }\r\n >\r\n {local.children}\r\n </Show>\r\n </div>\r\n </DatePickerPrimitive.Root>\r\n );\r\n}\r\n\r\nconst CalendarPresetTrigger = DatePickerPrimitive.PresetTrigger;\r\n\r\nexport {\r\n Calendar,\r\n CalendarDayView,\r\n CalendarDualMonthDayView,\r\n CalendarDayTable,\r\n CalendarMonthView,\r\n CalendarYearView,\r\n CalendarViewHeader,\r\n CalendarSelectHeader,\r\n CalendarDayButton,\r\n CalendarPresetTrigger,\r\n};",
755
+ type: "registry:ui",
756
+ path: "calendar.tsx"
757
+ }]
758
+ },
728
759
  {
729
760
  name: "card",
730
761
  dependencies: [
@@ -787,7 +818,7 @@ const PRESETS = { monochrome: {
787
818
  "solid-js/web"
788
819
  ],
789
820
  files: [{
790
- content: "import { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/solid/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nfunction DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return (\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu\"\n positioning={{ offset: { mainAxis: 4 } }}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuPortal(props: ComponentProps<any>) {\n return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent(props: ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n const [local, others] = splitProps(props, [\"class\"]);\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n class={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 local.class,\n )}\n {...others}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nfunction DropdownMenuGroup(props: ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem(\n props: ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"inset\", \"variant\"]);\n const variant = () => local.variant ?? \"default\";\n\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={local.inset}\n data-variant={variant()}\n class={cn(\n \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset: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 local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem(\n props: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"children\", \"checked\", \"inset\"]);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n data-inset={local.inset}\n class={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: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 local.class,\n )}\n checked={local.checked}\n {...others}\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 {local.children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup(\n props: ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>,\n) {\n return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem(\n props: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"children\", \"inset\"]);\n\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n data-inset={local.inset}\n class={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: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 local.class,\n )}\n {...others}\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 {local.children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel(\n props: ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"inset\"]);\n\n return (\n <DropdownMenuPrimitive.ItemGroupLabel\n data-slot=\"dropdown-menu-label\"\n data-inset={local.inset}\n class={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuSeparator(props: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n class={cn(\"bg-border -mx-1 my-1 h-px\", local.class)}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuShortcut(props: ComponentProps<\"span\">) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n class={cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuSub(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger(\n props: ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"inset\", \"children\"]);\n\n return (\n <DropdownMenuPrimitive.TriggerItem\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={local.inset}\n class={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: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 local.class,\n )}\n {...others}\n >\n {local.children}\n <ChevronRightIcon class=\"cn-rtl-flip ml-auto\" />\n </DropdownMenuPrimitive.TriggerItem>\n );\n}\n\nfunction DropdownMenuSubContent(props: ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-sub-content\"\n class={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 local.class,\n )}\n {...others}\n />\n </DropdownMenuPrimitive.Positioner>\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n",
821
+ content: "import { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/solid/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nfunction DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return (\n <DropdownMenuPrimitive.Root\n data-slot=\"dropdown-menu\"\n positioning={{ offset: { mainAxis: 4 } }}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuPortal(props: ComponentProps<any>) {\n return <Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent(props: ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n const [local, others] = splitProps(props, [\"class\"]);\n return (\n <Portal>\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n class={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 local.class,\n )}\n {...others}\n />\n </DropdownMenuPrimitive.Positioner>\n </Portal>\n );\n}\n\nfunction DropdownMenuGroup(props: ComponentProps<typeof DropdownMenuPrimitive.ItemGroup>) {\n return <DropdownMenuPrimitive.ItemGroup data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem(\n props: ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"inset\", \"variant\"]);\n const variant = () => local.variant ?? \"default\";\n\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={local.inset}\n data-variant={variant()}\n class={cn(\n \"gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset: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 local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem(\n props: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"children\", \"checked\", \"inset\"]);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n data-inset={local.inset}\n class={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: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 local.class,\n )}\n checked={local.checked}\n {...others}\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 {local.children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup(\n props: ComponentProps<typeof DropdownMenuPrimitive.RadioItemGroup>,\n) {\n return <DropdownMenuPrimitive.RadioItemGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem(\n props: ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"children\", \"inset\"]);\n\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n data-inset={local.inset}\n class={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: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 local.class,\n )}\n {...others}\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 {local.children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel(\n props: ComponentProps<typeof DropdownMenuPrimitive.ItemGroupLabel> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"inset\"]);\n\n return (\n <DropdownMenuPrimitive.ItemGroupLabel\n data-slot=\"dropdown-menu-label\"\n data-inset={local.inset}\n class={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuSeparator(props: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n class={cn(\"bg-border -mx-1 my-1 h-px\", local.class)}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuShortcut(props: ComponentProps<\"span\">) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n class={cn(\n \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction DropdownMenuSub(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger(\n props: ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> & {\n inset?: boolean;\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"inset\", \"children\"]);\n\n return (\n <DropdownMenuPrimitive.TriggerItem\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={local.inset}\n class={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: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 local.class,\n )}\n {...others}\n >\n {local.children}\n <ChevronRightIcon class=\"ml-auto\" />\n </DropdownMenuPrimitive.TriggerItem>\n );\n}\n\nfunction DropdownMenuSubContent(props: ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <DropdownMenuPrimitive.Positioner>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-sub-content\"\n class={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 local.class,\n )}\n {...others}\n />\n </DropdownMenuPrimitive.Positioner>\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n",
791
822
  type: "registry:ui",
792
823
  path: "dropdown-menu.tsx"
793
824
  }]
@@ -982,7 +1013,7 @@ const PRESETS = { monochrome: {
982
1013
  "solid-js"
983
1014
  ],
984
1015
  files: [{
985
- content: "import { Tooltip as TooltipPrimitive } from \"@sprawlify/solid/tooltip\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Portal } from \"solid-js/web\";\r\nimport { splitProps, type ComponentProps } from \"solid-js\";\r\n\r\nfunction TooltipProvider(props: ComponentProps<typeof TooltipPrimitive.RootProvider>) {\r\n return (\r\n <TooltipPrimitive.RootProvider\r\n data-slot=\"tooltip-provider\"\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nfunction Tooltip(props: ComponentProps<typeof TooltipPrimitive.Root>) {\r\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\r\n}\r\n\r\nfunction TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\r\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\r\n}\r\n\r\nfunction TooltipContent(props: ComponentProps<typeof TooltipPrimitive.Content>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <Portal>\r\n <TooltipPrimitive.Positioner>\r\n <TooltipPrimitive.Content\r\n data-slot=\"tooltip-content\"\r\n class={cn(\r\n \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n local.class\r\n )}\r\n {...others}\r\n >\r\n {local.children}\r\n <TooltipPrimitive.Arrow class=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n <TooltipPrimitive.ArrowTip class=\"rounded-xs\" />\r\n </TooltipPrimitive.Arrow>\r\n </TooltipPrimitive.Content>\r\n </TooltipPrimitive.Positioner>\r\n </Portal>\r\n );\r\n}\r\n\r\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };",
1016
+ content: "import { Tooltip as TooltipPrimitive } from \"@sprawlify/solid/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Portal } from \"solid-js/web\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\n\nfunction TooltipProvider(props: ComponentProps<typeof TooltipPrimitive.RootProvider>) {\n return <TooltipPrimitive.RootProvider data-slot=\"tooltip-provider\" {...props} />;\n}\n\nfunction Tooltip(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent(props: ComponentProps<typeof TooltipPrimitive.Content>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <Portal>\n <TooltipPrimitive.Positioner>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n class={cn(\n \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n local.class,\n )}\n {...others}\n >\n {local.children}\n <TooltipPrimitive.Arrow class=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\n <TooltipPrimitive.ArrowTip class=\"rounded-xs\" />\n </TooltipPrimitive.Arrow>\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Positioner>\n </Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n",
986
1017
  type: "registry:ui",
987
1018
  path: "tooltip.tsx"
988
1019
  }]
@@ -1000,18 +1031,18 @@ const PRESETS = { monochrome: {
1000
1031
  },
1001
1032
  svelte: {
1002
1033
  dependencies: {
1003
- "@sprawlify/svelte": "^0.1.9",
1004
- svelte: "^5.54.0",
1034
+ "@sprawlify/svelte": "^0.1.12",
1035
+ "svelte": "^5.54.0",
1005
1036
  "lucide-svelte": "^1.0.1",
1006
1037
  "class-variance-authority": "^0.7.1",
1007
- clsx: "^2.1.1",
1038
+ "clsx": "^2.1.1",
1008
1039
  "tailwind-merge": "^3.5.0"
1009
1040
  },
1010
1041
  devDependencies: {
1011
1042
  "tailwind-scrollbar": "^4.0.2",
1012
1043
  "tw-animate-css": "^1.4.0"
1013
1044
  },
1014
- 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" },
1045
+ 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" },
1015
1046
  items: [
1016
1047
  {
1017
1048
  name: "accordion",
@@ -1341,6 +1372,74 @@ const PRESETS = { monochrome: {
1341
1372
  }
1342
1373
  ]
1343
1374
  },
1375
+ {
1376
+ name: "calendar",
1377
+ dependencies: [
1378
+ "@sprawlify/svelte",
1379
+ "@/lib/utils",
1380
+ "svelte",
1381
+ "@internationalized/date",
1382
+ "lucide-svelte",
1383
+ "@/components/ui/button"
1384
+ ],
1385
+ files: [
1386
+ {
1387
+ content: "<script lang=\"ts\">\r\n import { DatePicker as DatePickerPrimitive } from \"@sprawlify/svelte/date-picker\"\r\n import { cn } from \"@/lib/utils\"\r\n import type { ComponentProps, Snippet } from \"svelte\"\r\n \r\n interface CalendarDayButtonProps extends ComponentProps<typeof DatePickerPrimitive.TableCellTrigger> {}\r\n\r\n let { \r\n children, \r\n class: className, \r\n ...props \r\n }: CalendarDayButtonProps = $props()\r\n<\/script>\r\n\r\n<DatePickerPrimitive.TableCellTrigger\r\n class={cn(\r\n \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) items-center justify-center gap-1 rounded-(--cell-radius) border-0 text-sm leading-none font-normal\",\r\n \"hover:bg-accent hover:text-accent-foreground\",\r\n \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\r\n \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\r\n \"data-[outside-range]:text-muted-foreground/50\",\r\n \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\r\n \"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[unavailable]:opacity-40\",\r\n \"data-[in-range]:rounded-none data-[in-range]:bg-accent data-[in-range]:text-accent-foreground\",\r\n \"data-[range-start]:rounded-l-(--cell-radius) data-[range-start]:bg-primary data-[range-start]:text-primary-foreground\",\r\n \"data-[range-end]:rounded-r-(--cell-radius) data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\r\n \"focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\r\n className\r\n )}\r\n {...props}\r\n>\r\n {#if children}\r\n {@render children()}\r\n {/if}\r\n</DatePickerPrimitive.TableCellTrigger>",
1388
+ type: "registry:ui",
1389
+ path: "calendar/calendar-day-button.svelte"
1390
+ },
1391
+ {
1392
+ content: "<script lang=\"ts\">\r\n import { DatePicker as DatePickerPrimitive } from \"@sprawlify/svelte/date-picker\"\r\n import { cn } from \"@/lib/utils\"\r\n import CalendarDayButton from \"./calendar-day-button.svelte\"\r\n import type { DateValue } from \"@internationalized/date\"\r\n import type { Snippet } from \"svelte\"\r\n\r\n interface CalendarDayTableProps {\r\n weeks: DateValue[][]\r\n weekDays: { short: string }[]\r\n focusedMonth: number\r\n showOutsideDays?: boolean\r\n visibleRange?: { start: DateValue; end: DateValue }\r\n cell?: Snippet<[DateValue]>\r\n }\r\n\r\n let {\r\n weeks,\r\n weekDays,\r\n focusedMonth,\r\n showOutsideDays = true,\r\n visibleRange,\r\n cell\r\n }: CalendarDayTableProps = $props()\r\n<\/script>\r\n\r\n<DatePickerPrimitive.Table class=\"w-full border-collapse\">\r\n <DatePickerPrimitive.TableHead>\r\n <DatePickerPrimitive.TableRow class=\"flex\">\r\n {#each weekDays as weekDay}\r\n <DatePickerPrimitive.TableHeader\r\n class=\"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\"\r\n >\r\n {weekDay.short}\r\n </DatePickerPrimitive.TableHeader>\r\n {/each}\r\n </DatePickerPrimitive.TableRow>\r\n </DatePickerPrimitive.TableHead>\r\n <DatePickerPrimitive.TableBody>\r\n {#each weeks as week}\r\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\r\n {#each week as day, dayIndex (dayIndex)}\r\n {@const isOutside = day.month !== focusedMonth}\r\n {#if !showOutsideDays && isOutside}\r\n <td class=\"flex-1 p-0\" aria-hidden=\"true\"></td>\r\n {:else}\r\n <DatePickerPrimitive.TableCell\r\n value={day}\r\n {visibleRange}\r\n class={cn(\r\n \"group/day relative aspect-square h-full w-full flex-1 rounded-(--cell-radius) p-0 text-center select-none\",\r\n \"[&:last-child[data-selected]_div]:rounded-r-(--cell-radius)\",\r\n \"[&:first-child[data-selected]_div]:rounded-l-(--cell-radius)\"\r\n )}\r\n >\r\n <CalendarDayButton>\r\n {#if cell}\r\n {@render cell(day)}\r\n {:else}\r\n {day.day}\r\n {/if}\r\n </CalendarDayButton>\r\n </DatePickerPrimitive.TableCell>\r\n {/if}\r\n {/each}\r\n </DatePickerPrimitive.TableRow>\r\n {/each}\r\n </DatePickerPrimitive.TableBody>\r\n</DatePickerPrimitive.Table>",
1393
+ type: "registry:ui",
1394
+ path: "calendar/calendar-day-table.svelte"
1395
+ },
1396
+ {
1397
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\"\r\n import CalendarSelectHeader from \"./calendar-select-header.svelte\"\r\n import CalendarDayTable from \"./calendar-day-table.svelte\"\r\n import type { DateValue } from \"@internationalized/date\"\r\n import type { Snippet } from \"svelte\"\r\n\r\n interface CalendarDayViewProps {\r\n showOutsideDays?: boolean\r\n header?: Snippet\r\n cell?: Snippet<[DateValue]>\r\n }\r\n\r\n let {\r\n showOutsideDays = true,\r\n header,\r\n cell\r\n }: CalendarDayViewProps = $props()\r\n<\/script>\r\n\r\n<DatePicker.View view=\"day\" class=\"flex flex-col gap-4\">\r\n <DatePicker.Context>\r\n {#snippet render(api)}\r\n {#if header}\r\n {@render header()}\r\n {:else}\r\n <CalendarSelectHeader />\r\n {/if}\r\n <CalendarDayTable\r\n weeks={api().weeks}\r\n weekDays={api().weekDays}\r\n focusedMonth={api().focusedValue.month}\r\n {showOutsideDays}\r\n {cell}\r\n />\r\n {/snippet}\r\n </DatePicker.Context>\r\n</DatePicker.View>",
1398
+ type: "registry:ui",
1399
+ path: "calendar/calendar-day-view.svelte"
1400
+ },
1401
+ {
1402
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\"\r\n import CalendarDayTable from \"./calendar-day-table.svelte\"\r\n import Button from \"../button/button.svelte\"\r\n import { ChevronLeft, ChevronRight } from \"lucide-svelte\"\r\n import type { DateValue } from \"@internationalized/date\"\r\n import type { Snippet } from \"svelte\"\r\n\r\n interface CalendarDualMonthDayViewProps {\r\n showOutsideDays?: boolean\r\n cell?: Snippet<[DateValue]>\r\n }\r\n\r\n let {\r\n showOutsideDays = true,\r\n cell\r\n }: CalendarDualMonthDayViewProps = $props()\r\n<\/script>\r\n\r\n<DatePicker.View view=\"day\" class=\"flex flex-col gap-4\">\r\n <DatePicker.Context>\r\n {#snippet render(api)}\r\n {@const offset = api().getOffset({ months: 1 })}\r\n <div class=\"flex gap-4 flex-row\">\r\n <!-- First month -->\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"relative flex w-full items-center justify-between gap-1\">\r\n <DatePicker.PrevTrigger>\r\n {#snippet asChild(props)}\r\n <Button\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n {...props()}\r\n >\r\n <ChevronLeft class=\"size-4\" />\r\n </Button>\r\n {/snippet}\r\n </DatePicker.PrevTrigger>\r\n <span class=\"text-sm font-medium select-none\">\r\n {api().visibleRangeText.start}\r\n </span>\r\n <div class=\"size-(--cell-size)\"></div>\r\n </div>\r\n <CalendarDayTable\r\n weeks={api().weeks}\r\n weekDays={api().weekDays}\r\n focusedMonth={api().focusedValue.month}\r\n {showOutsideDays}\r\n {cell}\r\n />\r\n </div>\r\n <!-- Second month -->\r\n <div class=\"flex flex-col gap-4\">\r\n <div class=\"relative flex w-full items-center justify-between gap-1\">\r\n <div class=\"size-(--cell-size)\"></div>\r\n <span class=\"text-sm font-medium select-none\">\r\n {api().visibleRangeText.end}\r\n </span>\r\n <DatePicker.NextTrigger>\r\n {#snippet asChild(props)}\r\n <Button\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n {...props()}\r\n >\r\n <ChevronRight class=\"size-4\" />\r\n </Button>\r\n {/snippet}\r\n </DatePicker.NextTrigger>\r\n </div>\r\n <CalendarDayTable\r\n weeks={offset.weeks}\r\n weekDays={api().weekDays}\r\n focusedMonth={offset.visibleRange.start.month}\r\n {showOutsideDays}\r\n visibleRange={offset.visibleRange}\r\n {cell}\r\n />\r\n </div>\r\n </div>\r\n {/snippet}\r\n </DatePicker.Context>\r\n</DatePicker.View>",
1403
+ type: "registry:ui",
1404
+ path: "calendar/calendar-dual-month-day-view.svelte"
1405
+ },
1406
+ {
1407
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\"\r\n import CalendarSelectHeader from \"./calendar-select-header.svelte\"\r\n import Button from \"../button/button.svelte\"\r\n import type { Snippet } from \"svelte\"\r\n\r\n interface CalendarMonthViewProps {\r\n header?: Snippet\r\n cell?: Snippet<[{ label: string; value: number }]>\r\n }\r\n\r\n let {\r\n header,\r\n cell\r\n }: CalendarMonthViewProps = $props()\r\n<\/script>\r\n\r\n<DatePicker.View view=\"month\" class=\"flex flex-col gap-4\">\r\n <DatePicker.Context>\r\n {#snippet render(api)}\r\n {#if header}\r\n {@render header()}\r\n {:else}\r\n <CalendarSelectHeader />\r\n {/if}\r\n <DatePicker.Table class=\"w-full border-collapse\">\r\n <DatePicker.TableBody>\r\n {#each api().getMonthsGrid({ columns: 4, format: \"short\" }) as months}\r\n <DatePicker.TableRow class=\"mt-2 flex w-full\">\r\n {#each months as month}\r\n <DatePicker.TableCell\r\n value={month.value}\r\n class=\"flex-1 p-0 text-center\"\r\n >\r\n <DatePicker.TableCellTrigger>\r\n {#snippet asChild(props)}\r\n <Button\r\n variant=\"ghost\"\r\n class=\"w-full text-sm font-normal\"\r\n {...props()}\r\n >\r\n {#if cell}\r\n {@render cell(month)}\r\n {:else}\r\n {month.label}\r\n {/if}\r\n </Button>\r\n {/snippet}\r\n </DatePicker.TableCellTrigger>\r\n </DatePicker.TableCell>\r\n {/each}\r\n </DatePicker.TableRow>\r\n {/each}\r\n </DatePicker.TableBody>\r\n </DatePicker.Table>\r\n {/snippet}\r\n </DatePicker.Context>\r\n</DatePicker.View>",
1408
+ type: "registry:ui",
1409
+ path: "calendar/calendar-month-view.svelte"
1410
+ },
1411
+ {
1412
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\";\r\n import type { ComponentProps } from \"svelte\";\r\n\r\n interface CalendarPresetTriggerProps\r\n extends ComponentProps<typeof DatePicker.PresetTrigger> {}\r\n\r\n let { children, ...props }: CalendarPresetTriggerProps = $props();\r\n<\/script>\r\n\r\n<DatePicker.PresetTrigger {...props}>\r\n {@render children?.()}\r\n</DatePicker.PresetTrigger>\r\n",
1413
+ type: "registry:ui",
1414
+ path: "calendar/calendar-preset-trigger.svelte"
1415
+ },
1416
+ {
1417
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\";\r\n import { Button } from \"@/components/ui/button\";\r\n import { ChevronLeft, ChevronRight, ChevronDown } from \"lucide-svelte\";\r\n import { cn } from \"@/lib/utils\";\r\n import type { ComponentProps } from \"svelte\";\r\n\r\n interface CalendarSelectHeaderProps {\r\n buttonVariant?: ComponentProps<typeof Button>[\"variant\"];\r\n class?: string;\r\n }\r\n\r\n let { buttonVariant = \"ghost\", class: className }: CalendarSelectHeaderProps =\r\n $props();\r\n<\/script>\r\n\r\n<DatePicker.ViewControl\r\n class={cn(\r\n \"relative flex w-full items-center justify-between gap-1\",\r\n className,\r\n )}\r\n>\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n {#snippet asChild(props)}\r\n <DatePicker.PrevTrigger {...props()}>\r\n <ChevronLeft class=\"size-4\" />\r\n </DatePicker.PrevTrigger>\r\n {/snippet}\r\n </Button>\r\n\r\n <div class=\"flex items-center gap-1\">\r\n <span class=\"relative\">\r\n <DatePicker.MonthSelect\r\n class=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\"\r\n />\r\n <ChevronDown\r\n class=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\"\r\n />\r\n </span>\r\n <span class=\"relative\">\r\n <DatePicker.YearSelect\r\n class=\"appearance-none rounded-md bg-transparent py-1 pr-6 pl-2 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50\"\r\n />\r\n <ChevronDown\r\n class=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\"\r\n />\r\n </span>\r\n </div>\r\n \r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n {#snippet asChild(props)}\r\n <DatePicker.NextTrigger {...props()}>\r\n <ChevronRight class=\"size-4\" />\r\n </DatePicker.NextTrigger>\r\n {/snippet}\r\n </Button>\r\n</DatePicker.ViewControl>\r\n",
1418
+ type: "registry:ui",
1419
+ path: "calendar/calendar-select-header.svelte"
1420
+ },
1421
+ {
1422
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\"\r\n import { Button } from \"@/components/ui/button\"\r\n import { ChevronLeft, ChevronRight } from \"lucide-svelte\"\r\n import type { ComponentProps } from \"svelte\";\r\n\r\n interface CalendarViewHeaderProps {\r\n buttonVariant?: ComponentProps<typeof Button>[\"variant\"]\r\n }\r\n\r\n let { buttonVariant = \"ghost\" }: CalendarViewHeaderProps = $props()\r\n<\/script>\r\n\r\n<DatePicker.ViewControl class=\"relative flex w-full items-center justify-between gap-1\">\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n {#snippet asChild(props)}\r\n <DatePicker.PrevTrigger {...props()}>\r\n <ChevronLeft class=\"size-4\" />\r\n </DatePicker.PrevTrigger>\r\n {/snippet}\r\n </Button>\r\n\r\n <DatePicker.ViewTrigger class=\"flex h-(--cell-size) items-center justify-center text-sm font-medium select-none\">\r\n <DatePicker.RangeText />\r\n </DatePicker.ViewTrigger>\r\n\r\n <Button\r\n variant={buttonVariant}\r\n size=\"icon\"\r\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\r\n >\r\n {#snippet asChild(props)}\r\n <DatePicker.NextTrigger {...props()}>\r\n <ChevronRight class=\"size-4\" />\r\n </DatePicker.NextTrigger>\r\n {/snippet}\r\n </Button>\r\n</DatePicker.ViewControl>",
1423
+ type: "registry:ui",
1424
+ path: "calendar/calendar-view-header.svelte"
1425
+ },
1426
+ {
1427
+ content: "<script lang=\"ts\">\r\n import { DatePicker } from \"@sprawlify/svelte/date-picker\"\r\n import CalendarSelectHeader from \"./calendar-select-header.svelte\"\r\n import Button from \"../button/button.svelte\"\r\n import type { Snippet } from \"svelte\"\r\n\r\n interface CalendarYearViewProps {\r\n header?: Snippet\r\n cell?: Snippet<[{ label: string; value: number }]>\r\n }\r\n\r\n let {\r\n header,\r\n cell\r\n }: CalendarYearViewProps = $props()\r\n<\/script>\r\n\r\n<DatePicker.View view=\"year\" class=\"flex flex-col gap-4\">\r\n <DatePicker.Context>\r\n {#snippet render(api)}\r\n {#if header}\r\n {@render header()}\r\n {:else}\r\n <CalendarSelectHeader />\r\n {/if}\r\n <DatePicker.Table class=\"w-full border-collapse\">\r\n <DatePicker.TableBody>\r\n {#each api().getYearsGrid({ columns: 4 }) as years}\r\n <DatePicker.TableRow class=\"mt-2 flex w-full\">\r\n {#each years as year}\r\n <DatePicker.TableCell\r\n value={year.value}\r\n class=\"flex-1 p-0 text-center\"\r\n >\r\n <DatePicker.TableCellTrigger>\r\n {#snippet asChild(props)}\r\n <Button\r\n variant=\"ghost\"\r\n class=\"w-full text-sm font-normal\"\r\n {...props()}\r\n >\r\n {#if cell}\r\n {@render cell(year)}\r\n {:else}\r\n {year.label}\r\n {/if}\r\n </Button>\r\n {/snippet}\r\n </DatePicker.TableCellTrigger>\r\n </DatePicker.TableCell>\r\n {/each}\r\n </DatePicker.TableRow>\r\n {/each}\r\n </DatePicker.TableBody>\r\n </DatePicker.Table>\r\n {/snippet}\r\n </DatePicker.Context>\r\n</DatePicker.View>",
1428
+ type: "registry:ui",
1429
+ path: "calendar/calendar-year-view.svelte"
1430
+ },
1431
+ {
1432
+ content: "<script lang=\"ts\">\r\n import { cn } from \"@/lib/utils\"\r\n import { DatePicker as DatePickerPrimitive } from \"@sprawlify/svelte/date-picker\"\r\n import type { ComponentProps, Snippet } from \"svelte\"\r\n import CalendarDayView from \"./calendar-day-view.svelte\"\r\n import CalendarDualMonthDayView from \"./calendar-dual-month-day-view.svelte\"\r\n import CalendarMonthView from \"./calendar-month-view.svelte\"\r\n import CalendarYearView from \"./calendar-year-view.svelte\"\r\n\r\n interface CalendarProps extends Omit<ComponentProps<typeof DatePickerPrimitive.Root>, \"inline\"> {\r\n showOutsideDays?: boolean\r\n children?: Snippet\r\n }\r\n\r\n let {\r\n class: className,\r\n showOutsideDays = true,\r\n children,\r\n numOfMonths,\r\n ...props\r\n }: CalendarProps = $props()\r\n\r\n const isDualMonth = () => numOfMonths && numOfMonths >= 2\r\n<\/script>\r\n\r\n<DatePickerPrimitive.Root inline {numOfMonths} {...props}>\r\n <div\r\n data-slot=\"calendar\"\r\n class={cn(\r\n \"group/calendar w-fit bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\r\n className\r\n )}\r\n >\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n {#if isDualMonth()}\r\n <CalendarDualMonthDayView {showOutsideDays} />\r\n {:else}\r\n <CalendarDayView {showOutsideDays} />\r\n {/if}\r\n <CalendarMonthView />\r\n <CalendarYearView />\r\n {/if}\r\n </div>\r\n</DatePickerPrimitive.Root>",
1433
+ type: "registry:ui",
1434
+ path: "calendar/calendar.svelte"
1435
+ },
1436
+ {
1437
+ content: "export { default as Calendar } from \"./calendar.svelte\"\r\nexport { default as CalendarDayView } from \"./calendar-day-view.svelte\"\r\nexport { default as CalendarDualMonthDayView } from \"./calendar-dual-month-day-view.svelte\"\r\nexport { default as CalendarDayTable } from \"./calendar-day-table.svelte\"\r\nexport { default as CalendarMonthView } from \"./calendar-month-view.svelte\"\r\nexport { default as CalendarYearView } from \"./calendar-year-view.svelte\"\r\nexport { default as CalendarViewHeader } from \"./calendar-view-header.svelte\"\r\nexport { default as CalendarSelectHeader } from \"./calendar-select-header.svelte\"\r\nexport { default as CalendarDayButton } from \"./calendar-day-button.svelte\"\r\nexport { default as CalendarPresetTrigger } from \"./calendar-preset-trigger.svelte\"",
1438
+ type: "registry:ui",
1439
+ path: "calendar/index.ts"
1440
+ }
1441
+ ]
1442
+ },
1344
1443
  {
1345
1444
  name: "card",
1346
1445
  dependencies: [
@@ -1568,7 +1667,7 @@ const PRESETS = { monochrome: {
1568
1667
  path: "dropdown-menu/dropdown-menu-sub-content.svelte"
1569
1668
  },
1570
1669
  {
1571
- content: "<script lang=\"ts\">\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/svelte/dropdown-menu\"\r\nimport { ChevronRightIcon } from \"lucide-svelte\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> { inset?: boolean }\r\n\r\nlet { class: className, inset, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DropdownMenuPrimitive.TriggerItem\r\n data-slot=\"dropdown-menu-sub-trigger\"\r\n data-inset={inset}\r\n class={cn(\r\n \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n <ChevronRightIcon class=\"cn-rtl-flip ml-auto\" />\r\n</DropdownMenuPrimitive.TriggerItem>",
1670
+ content: "<script lang=\"ts\">\r\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/svelte/dropdown-menu\"\r\nimport { ChevronRightIcon } from \"lucide-svelte\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof DropdownMenuPrimitive.TriggerItem> { inset?: boolean }\r\n\r\nlet { class: className, inset, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<DropdownMenuPrimitive.TriggerItem\r\n data-slot=\"dropdown-menu-sub-trigger\"\r\n data-inset={inset}\r\n class={cn(\r\n \"w-full data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n <ChevronRightIcon class=\"ml-auto\" />\r\n</DropdownMenuPrimitive.TriggerItem>",
1572
1671
  type: "registry:ui",
1573
1672
  path: "dropdown-menu/dropdown-menu-sub-trigger.svelte"
1574
1673
  },
@@ -2074,7 +2173,7 @@ const PRESETS = { monochrome: {
2074
2173
  ],
2075
2174
  files: [
2076
2175
  {
2077
- content: "export { default as Tooltip } from \"./tooltip.svelte\";\r\nexport { default as TooltipProvider } from \"./tooltip-provider.svelte\";\r\nexport { default as TooltipTrigger } from \"./tooltip-trigger.svelte\";\r\nexport { default as TooltipContent } from \"./tooltip-content.svelte\";\r\n",
2176
+ content: "export { default as Tooltip } from \"./tooltip.svelte\";\nexport { default as TooltipProvider } from \"./tooltip-provider.svelte\";\nexport { default as TooltipTrigger } from \"./tooltip-trigger.svelte\";\nexport { default as TooltipContent } from \"./tooltip-content.svelte\";\n",
2078
2177
  type: "registry:ui",
2079
2178
  path: "tooltip/index.ts"
2080
2179
  },
@@ -2110,1113 +2209,6 @@ const PRESETS = { monochrome: {
2110
2209
  }]
2111
2210
  }
2112
2211
  ]
2113
- },
2114
- vue: {
2115
- dependencies: {
2116
- "@sprawlify/vue": "^0.1.9",
2117
- vue: "^3.4.0",
2118
- "lucide-vue-next": "^1.0.0",
2119
- "class-variance-authority": "^0.7.1",
2120
- clsx: "^2.1.1",
2121
- "tailwind-merge": "^3.5.0"
2122
- },
2123
- devDependencies: {
2124
- "tailwind-scrollbar": "^4.0.2",
2125
- "tw-animate-css": "^1.4.0"
2126
- },
2127
- 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" },
2128
- items: [
2129
- {
2130
- name: "accordion",
2131
- dependencies: [
2132
- "@sprawlify/vue",
2133
- "vue",
2134
- "@/lib/utils",
2135
- "lucide-vue-next"
2136
- ],
2137
- files: [
2138
- {
2139
- content: "<script lang=\"ts\">\nimport type { AccordionItemContentProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionContentProps extends /* @vue-ignore */ AccordionItemContentProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<AccordionContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AccordionPrimitive.ItemContent\n data-slot=\"accordion-content\"\n class=\"data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up text-sm overflow-hidden\"\n v-bind=\"rest\"\n >\n <div :class=\"className\">\n <slot />\n </div>\n </AccordionPrimitive.ItemContent>\n</template>\n",
2140
- type: "registry:ui",
2141
- path: "accordion/accordion-content.vue"
2142
- },
2143
- {
2144
- content: "<script lang=\"ts\">\nimport type { AccordionItemProps as AccordionPrimitiveItemProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionItemProps extends /* @vue-ignore */ AccordionPrimitiveItemProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nconst { value, disabled, ...rest } = defineProps<AccordionItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"group not-last:border-b\", attrs.class as string));\n<\/script>\n\n<template>\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n :value=\"value\"\n :disabled=\"disabled\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </AccordionPrimitive.Item>\n</template>\n",
2145
- type: "registry:ui",
2146
- path: "accordion/accordion-item.vue"
2147
- },
2148
- {
2149
- content: "<script lang=\"ts\">\nimport type { AccordionItemTriggerProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionTriggerProps extends /* @vue-ignore */ AccordionItemTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/vue/accordion\";\nimport { ChevronDownIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst props = defineProps<AccordionTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"w-full focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AccordionPrimitive.ItemTrigger v-bind=\"props\" :class=\"className\" data-slot=\"accordion-trigger\">\n <slot />\n <AccordionPrimitive.ItemIndicator\n class=\"ml-2 transition-transform duration-200 data-[state=open]:rotate-180\"\n >\n <ChevronDownIcon data-slot=\"accordion-trigger-icon\" class=\"pointer-events-none shrink-0\" />\n </AccordionPrimitive.ItemIndicator>\n </AccordionPrimitive.ItemTrigger>\n</template>\n",
2150
- type: "registry:ui",
2151
- path: "accordion/accordion-trigger.vue"
2152
- },
2153
- {
2154
- content: "<script lang=\"ts\">\nimport type { AccordionRootProps } from \"@sprawlify/vue/accordion\";\n\nexport interface AccordionProps extends /* @vue-ignore */ AccordionRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { useAttrs, computed } from \"vue\";\nimport { AccordionRoot } from \"@sprawlify/vue/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AccordionProps extends /* @vue-ignore */ AccordionRootProps {}\n\nconst { collapsible, defaultValue, multiple, ...rest } = defineProps<AccordionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"flex w-full flex-col\", attrs.class as string));\n<\/script>\n\n<template>\n <AccordionRoot\n data-slot=\"accordion\"\n :collapsible=\"collapsible\"\n :default-value=\"defaultValue\"\n :multiple=\"multiple\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot />\n </AccordionRoot>\n</template>\n",
2155
- type: "registry:ui",
2156
- path: "accordion/accordion.vue"
2157
- },
2158
- {
2159
- content: "export { default as Accordion } from \"./accordion.vue\";\nexport { default as AccordionItem } from \"./accordion-item.vue\";\nexport { default as AccordionTrigger } from \"./accordion-trigger.vue\";\nexport { default as AccordionContent } from \"./accordion-content.vue\";\n",
2160
- type: "registry:ui",
2161
- path: "accordion/index.ts"
2162
- }
2163
- ]
2164
- },
2165
- {
2166
- name: "alert",
2167
- dependencies: [
2168
- "@sprawlify/vue",
2169
- "vue",
2170
- "@/lib/utils",
2171
- "class-variance-authority"
2172
- ],
2173
- files: [
2174
- {
2175
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface AlertActionProps 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<AlertActionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"absolute top-2 right-2\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"action\"\n data-slot=\"alert-action\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2176
- type: "registry:ui",
2177
- path: "alert/alert-action.vue"
2178
- },
2179
- {
2180
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDescriptionProps 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<AlertDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"description\"\n data-slot=\"alert-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2181
- type: "registry:ui",
2182
- path: "alert/alert-description.vue"
2183
- },
2184
- {
2185
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertTitleProps 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<AlertTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"alert\"\n data-part=\"title\"\n data-slot=\"alert-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2186
- type: "registry:ui",
2187
- path: "alert/alert-title.vue"
2188
- },
2189
- {
2190
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport const alertVariants = cva(\n \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive:\n \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface AlertProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {\n variant?: VariantProps<typeof alertVariants>[\"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, role = \"alert\", variant = \"default\", ...rest } = defineProps<AlertProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(alertVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n :role=\"role\"\n data-scope=\"alert\"\n data-part=\"root\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2191
- type: "registry:ui",
2192
- path: "alert/alert.vue"
2193
- },
2194
- {
2195
- content: "export { default as Alert } from \"./alert.vue\";\nexport { default as AlertTitle } from \"./alert-title.vue\";\nexport { default as AlertDescription } from \"./alert-description.vue\";\nexport { default as AlertAction } from \"./alert-action.vue\";\n",
2196
- type: "registry:ui",
2197
- path: "alert/index.ts"
2198
- }
2199
- ]
2200
- },
2201
- {
2202
- name: "alert-dialog",
2203
- dependencies: [
2204
- "@sprawlify/vue",
2205
- "vue",
2206
- "@/lib/utils",
2207
- "@/components/ui/button"
2208
- ],
2209
- files: [
2210
- {
2211
- content: "<script lang=\"ts\">\nimport type { AlertDialogBackdropProps as AlertDialogPrimitiveBackdropProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogBackdropProps\n extends /* @vue-ignore */ AlertDialogPrimitiveBackdropProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogBackdropProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Backdrop\n data-slot=\"alert-dialog-backdrop\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Backdrop>\n</template>\n",
2212
- type: "registry:ui",
2213
- path: "alert-dialog/alert-dialog-backdrop.vue"
2214
- },
2215
- {
2216
- content: "<script lang=\"ts\">\nimport type { AlertDialogCloseTriggerProps } from \"@sprawlify/vue/alert-dialog\";\nimport { type ButtonProps } from \"@/components/ui/button\";\n\nexport interface AlertDialogCloseProps\n extends /* @vue-ignore */ AlertDialogCloseTriggerProps, Pick<ButtonProps, \"variant\" | \"size\"> {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n asChild,\n variant = \"default\",\n size = \"default\",\n ...rest\n} = defineProps<AlertDialogCloseProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <Button :variant=\"variant\" :size=\"size\" asChild>\n <AlertDialogPrimitive.CloseTrigger\n data-slot=\"alert-dialog-close\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.CloseTrigger>\n </Button>\n</template>\n",
2217
- type: "registry:ui",
2218
- path: "alert-dialog/alert-dialog-close.vue"
2219
- },
2220
- {
2221
- content: "<script lang=\"ts\">\nimport type { AlertDialogContentProps as AlertDialogPrimitiveContentProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogContentProps\n extends /* @vue-ignore */ AlertDialogPrimitiveContentProps {\n size?: \"default\" | \"sm\";\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport AlertDialogPortal from \"./alert-dialog-portal.vue\";\nimport AlertDialogBackdrop from \"./alert-dialog-backdrop.vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, size = \"default\", ...rest } = defineProps<AlertDialogContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPortal>\n <AlertDialogBackdrop />\n <AlertDialogPrimitive.Content\n data-slot=\"alert-dialog-content\"\n :data-size=\"size\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Content>\n </AlertDialogPortal>\n</template>\n",
2222
- type: "registry:ui",
2223
- path: "alert-dialog/alert-dialog-content.vue"
2224
- },
2225
- {
2226
- content: "<script lang=\"ts\">\nimport type { AlertDialogDescriptionProps as AlertDialogPrimitiveDescriptionProps } from \"@sprawlify/vue/alert-dialog\";\nexport interface AlertDialogDescriptionProps\n extends /* @vue-ignore */ AlertDialogPrimitiveDescriptionProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Description\n data-slot=\"alert-dialog-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Description>\n</template>\n",
2227
- type: "registry:ui",
2228
- path: "alert-dialog/alert-dialog-description.vue"
2229
- },
2230
- {
2231
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogFooterProps\n 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<AlertDialogFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"alert-dialog-footer\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2232
- type: "registry:ui",
2233
- path: "alert-dialog/alert-dialog-footer.vue"
2234
- },
2235
- {
2236
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogHeaderProps\n 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<AlertDialogHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"alert-dialog-header\"\n :class=\"className\"\n :as-child=\"asChild\"\n v-bind=\"rest\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2237
- type: "registry:ui",
2238
- path: "alert-dialog/alert-dialog-header.vue"
2239
- },
2240
- {
2241
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AlertDialogMediaProps 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<AlertDialogMediaProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-slot=\"alert-dialog-media\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2242
- type: "registry:ui",
2243
- path: "alert-dialog/alert-dialog-media.vue"
2244
- },
2245
- {
2246
- content: "<script lang=\"ts\">\nexport interface AlertDialogPortalProps {\n to?: string | Element;\n disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<AlertDialogPortalProps>();\n<\/script>\n\n<template>\n <Teleport\n data-slot=\"alert-dialog-portal\"\n :to=\"to || 'body'\"\n :disabled=\"disabled || false\"\n v-bind=\"rest\"\n >\n <slot />\n </Teleport>\n</template>\n",
2247
- type: "registry:ui",
2248
- path: "alert-dialog/alert-dialog-portal.vue"
2249
- },
2250
- {
2251
- content: "<script lang=\"ts\">\nimport type { AlertDialogTitleProps as AlertDialogPrimitiveTitleProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogTitleProps extends /* @vue-ignore */ AlertDialogPrimitiveTitleProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 cn-font-heading\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Title\n data-slot=\"alert-dialog-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Title>\n</template>\n",
2252
- type: "registry:ui",
2253
- path: "alert-dialog/alert-dialog-title.vue"
2254
- },
2255
- {
2256
- content: "<script lang=\"ts\">\nimport type { AlertDialogTriggerProps as AlertDialogPrimitiveTriggerProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogTriggerProps\n extends /* @vue-ignore */ AlertDialogPrimitiveTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<AlertDialogTriggerProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Trigger\n data-slot=\"alert-dialog-trigger\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </AlertDialogPrimitive.Trigger>\n</template>\n",
2257
- type: "registry:ui",
2258
- path: "alert-dialog/alert-dialog-trigger.vue"
2259
- },
2260
- {
2261
- content: "<script lang=\"ts\">\nimport type { AlertDialogRootProps } from \"@sprawlify/vue/alert-dialog\";\n\nexport interface AlertDialogProps extends /* @vue-ignore */ AlertDialogRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/vue/alert-dialog\";\n\nconst { ...rest } = defineProps<AlertDialogProps>();\n<\/script>\n\n<template>\n <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" v-bind=\"rest\">\n <slot />\n </AlertDialogPrimitive.Root>\n</template>\n",
2262
- type: "registry:ui",
2263
- path: "alert-dialog/alert-dialog.vue"
2264
- },
2265
- {
2266
- content: "export { default as AlertDialog } from \"./alert-dialog.vue\";\nexport { default as AlertDialogTrigger } from \"./alert-dialog-trigger.vue\";\nexport { default as AlertDialogPortal } from \"./alert-dialog-portal.vue\";\nexport { default as AlertDialogBackdrop } from \"./alert-dialog-backdrop.vue\";\nexport { default as AlertDialogContent } from \"./alert-dialog-content.vue\";\nexport { default as AlertDialogHeader } from \"./alert-dialog-header.vue\";\nexport { default as AlertDialogTitle } from \"./alert-dialog-title.vue\";\nexport { default as AlertDialogDescription } from \"./alert-dialog-description.vue\";\nexport { default as AlertDialogMedia } from \"./alert-dialog-media.vue\";\nexport { default as AlertDialogFooter } from \"./alert-dialog-footer.vue\";\nexport { default as AlertDialogClose } from \"./alert-dialog-close.vue\";\n",
2267
- type: "registry:ui",
2268
- path: "alert-dialog/index.ts"
2269
- }
2270
- ]
2271
- },
2272
- {
2273
- name: "aspect-ratio",
2274
- dependencies: ["@sprawlify/vue"],
2275
- files: [{
2276
- 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",
2277
- type: "registry:ui",
2278
- path: "aspect-ratio/aspect-ratio.vue"
2279
- }, {
2280
- content: "export { default as AspectRatio } from \"./aspect-ratio.vue\";\n",
2281
- type: "registry:ui",
2282
- path: "aspect-ratio/index.ts"
2283
- }]
2284
- },
2285
- {
2286
- name: "avatar",
2287
- dependencies: [
2288
- "@sprawlify/vue",
2289
- "vue",
2290
- "@/lib/utils"
2291
- ],
2292
- files: [
2293
- {
2294
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AvatarBadgeProps 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<AvatarBadgeProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none\",\n \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.span\n data-scope=\"avatar\"\n data-part=\"badge\"\n data-slot=\"avatar-badge\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
2295
- type: "registry:ui",
2296
- path: "avatar/avatar-badge.vue"
2297
- },
2298
- {
2299
- 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",
2300
- type: "registry:ui",
2301
- path: "avatar/avatar-fallback.vue"
2302
- },
2303
- {
2304
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AvatarGroupCountProps 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<AvatarGroupCountProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"avatar\"\n data-part=\"group-count\"\n data-slot=\"avatar-group-count\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2305
- type: "registry:ui",
2306
- path: "avatar/avatar-group-count.vue"
2307
- },
2308
- {
2309
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface AvatarGroupProps 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<AvatarGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"avatar\"\n data-part=\"group\"\n data-slot=\"avatar-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2310
- type: "registry:ui",
2311
- path: "avatar/avatar-group.vue"
2312
- },
2313
- {
2314
- 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",
2315
- type: "registry:ui",
2316
- path: "avatar/avatar-image.vue"
2317
- },
2318
- {
2319
- 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",
2320
- type: "registry:ui",
2321
- path: "avatar/avatar.vue"
2322
- },
2323
- {
2324
- content: "export { default as Avatar } from \"./avatar.vue\";\nexport { default as AvatarImage } from \"./avatar-image.vue\";\nexport { default as AvatarFallback } from \"./avatar-fallback.vue\";\nexport { default as AvatarBadge } from \"./avatar-badge.vue\";\nexport { default as AvatarGroup } from \"./avatar-group.vue\";\nexport { default as AvatarGroupCount } from \"./avatar-group-count.vue\";\n",
2325
- type: "registry:ui",
2326
- path: "avatar/index.ts"
2327
- }
2328
- ]
2329
- },
2330
- {
2331
- name: "badge",
2332
- dependencies: [
2333
- "@sprawlify/vue",
2334
- "vue",
2335
- "class-variance-authority",
2336
- "@/lib/utils"
2337
- ],
2338
- files: [{
2339
- 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 badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary: \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nexport interface BadgeProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {\n variant?: VariantProps<typeof badgeVariants>[\"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<BadgeProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(badgeVariants({ variant }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.span\n data-scope=\"badge\"\n data-part=\"root\"\n data-slot=\"badge\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
2340
- type: "registry:ui",
2341
- path: "badge/badge.vue"
2342
- }, {
2343
- content: "export { default as Badge } from \"./badge.vue\";\n",
2344
- type: "registry:ui",
2345
- path: "badge/index.ts"
2346
- }]
2347
- },
2348
- {
2349
- name: "breadcrumb",
2350
- dependencies: [
2351
- "@sprawlify/vue",
2352
- "vue",
2353
- "lucide-vue-next",
2354
- "@/lib/utils"
2355
- ],
2356
- files: [
2357
- {
2358
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbEllipsisProps\n extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { MoreHorizontalIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n role = \"presentation\",\n \"aria-hidden\": ariaHidden = \"true\",\n ...rest\n} = defineProps<BreadcrumbEllipsisProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"flex h-9 w-9 items-center justify-center\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.span\n data-scope=\"breadcrumb\"\n data-part=\"ellipsis\"\n data-slot=\"breadcrumb-ellipsis\"\n :role=\"role\"\n :aria-hidden=\"ariaHidden\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <MoreHorizontalIcon class=\"size-4\" />\n <span class=\"sr-only\">More</span>\n </sprawlify.span>\n</template>\n",
2359
- type: "registry:ui",
2360
- path: "breadcrumb/breadcrumb-ellipsis.vue"
2361
- },
2362
- {
2363
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbItemProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<BreadcrumbItemProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"inline-flex items-center gap-1.5\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.li\n data-scope=\"breadcrumb\"\n data-part=\"item\"\n data-slot=\"breadcrumb-item\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.li>\n</template>\n",
2364
- type: "registry:ui",
2365
- path: "breadcrumb/breadcrumb-item.vue"
2366
- },
2367
- {
2368
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbLinkProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<BreadcrumbLinkProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"transition-colors hover:text-foreground\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.a\n data-scope=\"breadcrumb\"\n data-part=\"link\"\n data-slot=\"breadcrumb-link\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.a>\n</template>\n",
2369
- type: "registry:ui",
2370
- path: "breadcrumb/breadcrumb-link.vue"
2371
- },
2372
- {
2373
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbListProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<BreadcrumbListProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.ol\n data-scope=\"breadcrumb\"\n data-part=\"list\"\n data-slot=\"breadcrumb-list\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.ol>\n</template>\n",
2374
- type: "registry:ui",
2375
- path: "breadcrumb/breadcrumb-list.vue"
2376
- },
2377
- {
2378
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbPageProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface BreadcrumbPageProps extends PolymorphicProps {}\n\nconst {\n role = \"link\",\n \"aria-disabled\": ariaDisabled = \"true\",\n \"aria-current\": ariaCurrent = \"page\",\n asChild,\n ...rest\n} = defineProps<BreadcrumbPageProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"font-normal text-foreground\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.span\n data-scope=\"breadcrumb\"\n data-part=\"page\"\n data-slot=\"breadcrumb-page\"\n :role=\"role\"\n :aria-disabled=\"ariaDisabled\"\n :aria-current=\"ariaCurrent\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.span>\n</template>\n",
2379
- type: "registry:ui",
2380
- path: "breadcrumb/breadcrumb-page.vue"
2381
- },
2382
- {
2383
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbSeparatorProps\n extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { ChevronRightIcon } from \"lucide-vue-next\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n role = \"presentation\",\n \"aria-hidden\": ariaHidden = \"true\",\n asChild,\n ...rest\n} = defineProps<BreadcrumbSeparatorProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"[&>svg]:size-3.5\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.li\n data-scope=\"breadcrumb\"\n data-part=\"separator\"\n data-slot=\"breadcrumb-separator\"\n :role=\"role\"\n :aria-hidden=\"ariaHidden\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot>\n <ChevronRightIcon />\n </slot>\n </sprawlify.li>\n</template>\n",
2384
- type: "registry:ui",
2385
- path: "breadcrumb/breadcrumb-separator.vue"
2386
- },
2387
- {
2388
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { type HTMLAttributes } from \"vue\";\n\nexport interface BreadcrumbProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { computed, useAttrs } from \"vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst {\n role = \"navigation\",\n \"aria-label\": ariaLabel = \"breadcrumb\",\n asChild,\n ...rest\n} = defineProps<BreadcrumbProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.nav\n data-scope=\"breadcrumb\"\n data-part=\"root\"\n data-slot=\"breadcrumb\"\n :role=\"role\"\n :aria-label=\"ariaLabel\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.nav>\n</template>\n",
2389
- type: "registry:ui",
2390
- path: "breadcrumb/breadcrumb.vue"
2391
- },
2392
- {
2393
- content: "export { default as Breadcrumb } from \"./breadcrumb.vue\";\nexport { default as BreadcrumbList } from \"./breadcrumb-list.vue\";\nexport { default as BreadcrumbItem } from \"./breadcrumb-item.vue\";\nexport { default as BreadcrumbLink } from \"./breadcrumb-link.vue\";\nexport { default as BreadcrumbPage } from \"./breadcrumb-page.vue\";\nexport { default as BreadcrumbSeparator } from \"./breadcrumb-separator.vue\";\nexport { default as BreadcrumbEllipsis } from \"./breadcrumb-ellipsis.vue\";\n",
2394
- type: "registry:ui",
2395
- path: "breadcrumb/index.ts"
2396
- }
2397
- ]
2398
- },
2399
- {
2400
- name: "button",
2401
- dependencies: [
2402
- "@sprawlify/vue",
2403
- "vue",
2404
- "class-variance-authority",
2405
- "@/lib/utils"
2406
- ],
2407
- files: [{
2408
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { ButtonHTMLAttributes } from \"vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonVariants = cva(\n \"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 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive:\n \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps extends PolymorphicProps, /* @vue-ignore */ ButtonHTMLAttributes {\n variant?: VariantProps<typeof buttonVariants>[\"variant\"];\n size?: VariantProps<typeof buttonVariants>[\"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 { variant = \"default\", size = \"default\", ...rest } = defineProps<ButtonProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(buttonVariants({ variant, size }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.button\n data-scope=\"button\"\n data-part=\"root\"\n data-slot=\"button\"\n :data-variant=\"variant\"\n :data-size=\"size\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.button>\n</template>\n",
2409
- type: "registry:ui",
2410
- path: "button/button.vue"
2411
- }, {
2412
- content: "export { default as Button, buttonVariants, type ButtonProps } from \"./button.vue\";\n",
2413
- type: "registry:ui",
2414
- path: "button/index.ts"
2415
- }]
2416
- },
2417
- {
2418
- name: "button-group",
2419
- dependencies: [
2420
- "@/components/ui/separator",
2421
- "vue",
2422
- "@/lib/utils",
2423
- "@sprawlify/vue",
2424
- "class-variance-authority"
2425
- ],
2426
- files: [
2427
- {
2428
- 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",
2429
- type: "registry:ui",
2430
- path: "button-group/button-group-separator.vue"
2431
- },
2432
- {
2433
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface ButtonGroupTextProps\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<ButtonGroupTextProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_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.div :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
2434
- type: "registry:ui",
2435
- path: "button-group/button-group-text.vue"
2436
- },
2437
- {
2438
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport const buttonGroupVariants = cva(\n \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n vertical:\n \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n },\n);\n\nexport interface ButtonGroupProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n orientation?: VariantProps<typeof buttonGroupVariants>[\"orientation\"];\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 { orientation = \"horizontal\", role = \"group\", ...rest } = defineProps<ButtonGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(buttonGroupVariants({ orientation }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"button-group\"\n data-part=\"root\"\n :role=\"role\"\n data-slot=\"button-group\"\n :data-orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2439
- type: "registry:ui",
2440
- path: "button-group/button-group.vue"
2441
- },
2442
- {
2443
- content: "export { default as ButtonGroup } from \"./button-group.vue\";\nexport { default as ButtonGroupText } from \"./button-group-text.vue\";\nexport { default as ButtonGroupSeparator } from \"./button-group-separator.vue\";\n",
2444
- type: "registry:ui",
2445
- path: "button-group/index.ts"
2446
- }
2447
- ]
2448
- },
2449
- {
2450
- name: "card",
2451
- dependencies: [
2452
- "@sprawlify/vue",
2453
- "vue",
2454
- "@/lib/utils",
2455
- "class-variance-authority"
2456
- ],
2457
- files: [
2458
- {
2459
- 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",
2460
- type: "registry:ui",
2461
- path: "card/card-action.vue"
2462
- },
2463
- {
2464
- 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",
2465
- type: "registry:ui",
2466
- path: "card/card-content.vue"
2467
- },
2468
- {
2469
- 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",
2470
- type: "registry:ui",
2471
- path: "card/card-description.vue"
2472
- },
2473
- {
2474
- 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",
2475
- type: "registry:ui",
2476
- path: "card/card-footer.vue"
2477
- },
2478
- {
2479
- 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",
2480
- type: "registry:ui",
2481
- path: "card/card-header.vue"
2482
- },
2483
- {
2484
- 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",
2485
- type: "registry:ui",
2486
- path: "card/card-title.vue"
2487
- },
2488
- {
2489
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\nimport { cva } from \"class-variance-authority\";\n\nexport const cardVariants = cva(\n \"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n);\n\nexport interface CardProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n size?: \"default\" | \"sm\";\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 { size = \"default\", asChild, ...rest } = defineProps<CardProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(cardVariants(), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"card\"\n data-part=\"root\"\n data-slot=\"card\"\n :class=\"className\"\n :data-size=\"size\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2490
- type: "registry:ui",
2491
- path: "card/card.vue"
2492
- },
2493
- {
2494
- content: "export { default as Card } from \"./card.vue\";\nexport { default as CardHeader } from \"./card-header.vue\";\nexport { default as CardTitle } from \"./card-title.vue\";\nexport { default as CardDescription } from \"./card-description.vue\";\nexport { default as CardAction } from \"./card-action.vue\";\nexport { default as CardContent } from \"./card-content.vue\";\nexport { default as CardFooter } from \"./card-footer.vue\";\n",
2495
- type: "registry:ui",
2496
- path: "card/index.ts"
2497
- }
2498
- ]
2499
- },
2500
- {
2501
- name: "checkbox",
2502
- dependencies: [
2503
- "@sprawlify/vue",
2504
- "vue",
2505
- "@/lib/utils",
2506
- "lucide-vue-next"
2507
- ],
2508
- files: [{
2509
- 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",
2510
- type: "registry:ui",
2511
- path: "checkbox/checkbox.vue"
2512
- }, {
2513
- content: "export { default as Checkbox } from \"./checkbox.vue\";\n",
2514
- type: "registry:ui",
2515
- path: "checkbox/index.ts"
2516
- }]
2517
- },
2518
- {
2519
- name: "collapsible",
2520
- dependencies: [
2521
- "@sprawlify/vue",
2522
- "vue",
2523
- "@/lib/utils"
2524
- ],
2525
- files: [
2526
- {
2527
- 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",
2528
- type: "registry:ui",
2529
- path: "collapsible/collapsible-content.vue"
2530
- },
2531
- {
2532
- 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",
2533
- type: "registry:ui",
2534
- path: "collapsible/collapsible-trigger.vue"
2535
- },
2536
- {
2537
- 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",
2538
- type: "registry:ui",
2539
- path: "collapsible/collapsible.vue"
2540
- },
2541
- {
2542
- content: "export { default as Collapsible } from \"./collapsible.vue\";\nexport { default as CollapsibleTrigger } from \"./collapsible-trigger.vue\";\nexport { default as CollapsibleContent } from \"./collapsible-content.vue\";\n",
2543
- type: "registry:ui",
2544
- path: "collapsible/index.ts"
2545
- }
2546
- ]
2547
- },
2548
- {
2549
- name: "dialog",
2550
- dependencies: [
2551
- "@sprawlify/vue",
2552
- "vue",
2553
- "@/lib/utils",
2554
- "@/components/ui/button",
2555
- "lucide-vue-next"
2556
- ],
2557
- files: [
2558
- {
2559
- content: "<script lang=\"ts\">\nimport type { DialogCloseTriggerProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogCloseProps extends /* @vue-ignore */ DialogCloseTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\n\nconst { asChild, ...rest } = defineProps<DialogCloseProps>();\n<\/script>\n\n<template>\n <DialogPrimitive.CloseTrigger data-slot=\"dialog-close\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </DialogPrimitive.CloseTrigger>\n</template>\n",
2560
- type: "registry:ui",
2561
- path: "dialog/dialog-close.vue"
2562
- },
2563
- {
2564
- content: "<script lang=\"ts\">\nimport type { DialogContentProps as DialogPrimitiveContentProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogContentProps extends /* @vue-ignore */ DialogPrimitiveContentProps {\n showCloseButton?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport DialogPortal from \"./dialog-portal.vue\";\nimport DialogOverlay from \"./dialog-overlay.vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { XIcon } from \"lucide-vue-next\";\n\nconst { asChild, showCloseButton = true, ...rest } = defineProps<DialogContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n <template v-if=\"showCloseButton\">\n <DialogPrimitive.CloseTrigger as-child data-slot=\"dialog-close\">\n <Button variant=\"ghost\" size=\"icon-sm\" class=\"absolute top-2 right-2\">\n <XIcon />\n <span class=\"sr-only\">Close</span>\n </Button>\n </DialogPrimitive.CloseTrigger>\n </template>\n </DialogPrimitive.Content>\n </DialogPortal>\n</template>\n",
2565
- type: "registry:ui",
2566
- path: "dialog/dialog-content.vue"
2567
- },
2568
- {
2569
- content: "<script lang=\"ts\">\nimport type { DialogDescriptionProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogDescriptionComponentProps extends /* @vue-ignore */ DialogDescriptionProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogDescriptionComponentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DialogPrimitive.Description>\n</template>\n",
2570
- type: "registry:ui",
2571
- path: "dialog/dialog-description.vue"
2572
- },
2573
- {
2574
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface DialogFooterProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {\n showCloseButton?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nconst { showCloseButton = false, asChild, ...rest } = defineProps<DialogFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"dialog-footer\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n <template v-if=\"showCloseButton\">\n <DialogPrimitive.CloseTrigger as-child>\n <Button variant=\"outline\">Close</Button>\n </DialogPrimitive.CloseTrigger>\n </template>\n </sprawlify.div>\n</template>\n",
2575
- type: "registry:ui",
2576
- path: "dialog/dialog-footer.vue"
2577
- },
2578
- {
2579
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface DialogHeaderProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"flex flex-col gap-2\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div data-slot=\"dialog-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.div>\n</template>\n",
2580
- type: "registry:ui",
2581
- path: "dialog/dialog-header.vue"
2582
- },
2583
- {
2584
- content: "<script lang=\"ts\">\nimport type { DialogBackdropProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogOverlayProps extends /* @vue-ignore */ DialogBackdropProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogOverlayProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DialogPrimitive.Backdrop>\n</template>\n",
2585
- type: "registry:ui",
2586
- path: "dialog/dialog-overlay.vue"
2587
- },
2588
- {
2589
- content: "<script lang=\"ts\">\nexport interface DialogPortalProps {\n to?: string | Element;\n disabled?: boolean;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nconst { to, disabled, ...rest } = defineProps<DialogPortalProps>();\n<\/script>\n\n<template>\n <Teleport\n data-slot=\"dialog-portal\"\n :to=\"to || 'body'\"\n :disabled=\"disabled || false\"\n v-bind=\"rest\"\n >\n <slot />\n </Teleport>\n</template>\n",
2590
- type: "registry:ui",
2591
- path: "dialog/dialog-portal.vue"
2592
- },
2593
- {
2594
- content: "<script lang=\"ts\">\nimport type { DialogTitleProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogTitleComponentProps extends /* @vue-ignore */ DialogTitleProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<DialogTitleComponentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"cn-font-heading text-base leading-none font-medium\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </DialogPrimitive.Title>\n</template>\n",
2595
- type: "registry:ui",
2596
- path: "dialog/dialog-title.vue"
2597
- },
2598
- {
2599
- content: "<script lang=\"ts\">\nimport type { DialogTriggerProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogTriggerComponentProps extends /* @vue-ignore */ DialogTriggerProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\n\nconst { asChild, ...rest } = defineProps<DialogTriggerComponentProps>();\n<\/script>\n\n<template>\n <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </DialogPrimitive.Trigger>\n</template>\n",
2600
- type: "registry:ui",
2601
- path: "dialog/dialog-trigger.vue"
2602
- },
2603
- {
2604
- content: "<script lang=\"ts\">\nimport type { DialogRootProps } from \"@sprawlify/vue/dialog\";\n\nexport interface DialogProps extends /* @vue-ignore */ DialogRootProps {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { Dialog as DialogPrimitive } from \"@sprawlify/vue/dialog\";\n\nconst { ...rest } = defineProps<DialogProps>();\n<\/script>\n\n<template>\n <DialogPrimitive.Root data-slot=\"dialog\" v-bind=\"rest\">\n <slot />\n </DialogPrimitive.Root>\n</template>\n",
2605
- type: "registry:ui",
2606
- path: "dialog/dialog.vue"
2607
- },
2608
- {
2609
- content: "export { default as Dialog } from \"./dialog.vue\";\nexport { default as DialogTrigger } from \"./dialog-trigger.vue\";\nexport { default as DialogPortal } from \"./dialog-portal.vue\";\nexport { default as DialogOverlay } from \"./dialog-overlay.vue\";\nexport { default as DialogContent } from \"./dialog-content.vue\";\nexport { default as DialogClose } from \"./dialog-close.vue\";\nexport { default as DialogHeader } from \"./dialog-header.vue\";\nexport { default as DialogFooter } from \"./dialog-footer.vue\";\nexport { default as DialogTitle } from \"./dialog-title.vue\";\nexport { default as DialogDescription } from \"./dialog-description.vue\";\n",
2610
- type: "registry:ui",
2611
- path: "dialog/index.ts"
2612
- }
2613
- ]
2614
- },
2615
- {
2616
- name: "dropdown-menu",
2617
- dependencies: [
2618
- "@sprawlify/vue",
2619
- "vue",
2620
- "@/lib/utils",
2621
- "lucide-vue-next"
2622
- ],
2623
- files: [
2624
- {
2625
- 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",
2626
- type: "registry:ui",
2627
- path: "dropdown-menu/dropdown-menu-checkbox-item.vue"
2628
- },
2629
- {
2630
- 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",
2631
- type: "registry:ui",
2632
- path: "dropdown-menu/dropdown-menu-content.vue"
2633
- },
2634
- {
2635
- 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",
2636
- type: "registry:ui",
2637
- path: "dropdown-menu/dropdown-menu-group.vue"
2638
- },
2639
- {
2640
- 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",
2641
- type: "registry:ui",
2642
- path: "dropdown-menu/dropdown-menu-item.vue"
2643
- },
2644
- {
2645
- 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",
2646
- type: "registry:ui",
2647
- path: "dropdown-menu/dropdown-menu-label.vue"
2648
- },
2649
- {
2650
- 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",
2651
- type: "registry:ui",
2652
- path: "dropdown-menu/dropdown-menu-portal.vue"
2653
- },
2654
- {
2655
- 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",
2656
- type: "registry:ui",
2657
- path: "dropdown-menu/dropdown-menu-radio-group.vue"
2658
- },
2659
- {
2660
- 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",
2661
- type: "registry:ui",
2662
- path: "dropdown-menu/dropdown-menu-radio-item.vue"
2663
- },
2664
- {
2665
- 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",
2666
- type: "registry:ui",
2667
- path: "dropdown-menu/dropdown-menu-separator.vue"
2668
- },
2669
- {
2670
- 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",
2671
- type: "registry:ui",
2672
- path: "dropdown-menu/dropdown-menu-shortcut.vue"
2673
- },
2674
- {
2675
- 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",
2676
- type: "registry:ui",
2677
- path: "dropdown-menu/dropdown-menu-sub-content.vue"
2678
- },
2679
- {
2680
- 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",
2681
- type: "registry:ui",
2682
- path: "dropdown-menu/dropdown-menu-sub-trigger.vue"
2683
- },
2684
- {
2685
- 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",
2686
- type: "registry:ui",
2687
- path: "dropdown-menu/dropdown-menu-sub.vue"
2688
- },
2689
- {
2690
- 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",
2691
- type: "registry:ui",
2692
- path: "dropdown-menu/dropdown-menu-trigger.vue"
2693
- },
2694
- {
2695
- 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",
2696
- type: "registry:ui",
2697
- path: "dropdown-menu/dropdown-menu.vue"
2698
- },
2699
- {
2700
- content: "export { default as DropdownMenu } from \"./dropdown-menu.vue\";\nexport { default as DropdownMenuPortal } from \"./dropdown-menu-portal.vue\";\nexport { default as DropdownMenuTrigger } from \"./dropdown-menu-trigger.vue\";\nexport { default as DropdownMenuContent } from \"./dropdown-menu-content.vue\";\nexport { default as DropdownMenuGroup } from \"./dropdown-menu-group.vue\";\nexport { default as DropdownMenuItem } from \"./dropdown-menu-item.vue\";\nexport { default as DropdownMenuCheckboxItem } from \"./dropdown-menu-checkbox-item.vue\";\nexport { default as DropdownMenuRadioGroup } from \"./dropdown-menu-radio-group.vue\";\nexport { default as DropdownMenuRadioItem } from \"./dropdown-menu-radio-item.vue\";\nexport { default as DropdownMenuLabel } from \"./dropdown-menu-label.vue\";\nexport { default as DropdownMenuSeparator } from \"./dropdown-menu-separator.vue\";\nexport { default as DropdownMenuShortcut } from \"./dropdown-menu-shortcut.vue\";\nexport { default as DropdownMenuSub } from \"./dropdown-menu-sub.vue\";\nexport { default as DropdownMenuSubTrigger } from \"./dropdown-menu-sub-trigger.vue\";\nexport { default as DropdownMenuSubContent } from \"./dropdown-menu-sub-content.vue\";\n",
2701
- type: "registry:ui",
2702
- path: "dropdown-menu/index.ts"
2703
- }
2704
- ]
2705
- },
2706
- {
2707
- name: "empty",
2708
- dependencies: [
2709
- "@sprawlify/vue",
2710
- "vue",
2711
- "@/lib/utils",
2712
- "class-variance-authority"
2713
- ],
2714
- files: [
2715
- {
2716
- 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",
2717
- type: "registry:ui",
2718
- path: "empty/empty-content.vue"
2719
- },
2720
- {
2721
- 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",
2722
- type: "registry:ui",
2723
- path: "empty/empty-description.vue"
2724
- },
2725
- {
2726
- 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",
2727
- type: "registry:ui",
2728
- path: "empty/empty-header.vue"
2729
- },
2730
- {
2731
- 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",
2732
- type: "registry:ui",
2733
- path: "empty/empty-media.vue"
2734
- },
2735
- {
2736
- 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",
2737
- type: "registry:ui",
2738
- path: "empty/empty-title.vue"
2739
- },
2740
- {
2741
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface EmptyProps\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<EmptyProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"empty\"\n data-part=\"root\"\n data-slot=\"empty\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2742
- type: "registry:ui",
2743
- path: "empty/empty.vue"
2744
- },
2745
- {
2746
- content: "export { default as Empty } from \"./empty.vue\";\nexport { default as EmptyHeader } from \"./empty-header.vue\";\nexport { default as EmptyMedia } from \"./empty-media.vue\";\nexport { default as EmptyTitle } from \"./empty-title.vue\";\nexport { default as EmptyDescription } from \"./empty-description.vue\";\nexport { default as EmptyContent } from \"./empty-content.vue\";\n",
2747
- type: "registry:ui",
2748
- path: "empty/index.ts"
2749
- }
2750
- ]
2751
- },
2752
- {
2753
- name: "field",
2754
- dependencies: [
2755
- "@sprawlify/vue",
2756
- "vue",
2757
- "@/lib/utils",
2758
- "@/components/ui/label",
2759
- "@/components/ui/separator",
2760
- "class-variance-authority"
2761
- ],
2762
- files: [
2763
- {
2764
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldContentProps\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<FieldContentProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"gap-0.5 group/field-content flex flex-1 flex-col leading-snug\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"content\"\n data-slot=\"field-content\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2765
- type: "registry:ui",
2766
- path: "field/field-content.vue"
2767
- },
2768
- {
2769
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldDescriptionProps\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<FieldDescriptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>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\n data-scope=\"field\"\n data-part=\"description\"\n data-slot=\"field-description\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.p>\n</template>\n",
2770
- type: "registry:ui",
2771
- path: "field/field-description.vue"
2772
- },
2773
- {
2774
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldErrorProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n errors?: Array<{ message?: string } | undefined>;\n}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs, useSlots } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { role = \"alert\", errors, ...rest } = defineProps<FieldErrorProps>();\nconst attrs = useAttrs();\nconst slots = useSlots();\n\nconst className = computed(() => cn(\"text-destructive text-sm font-normal\", attrs.class as string));\n\nconst content = computed(() => {\n if (slots.default) {\n return \"slot\";\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n if (uniqueErrors?.length === 1) {\n return uniqueErrors[0]?.message;\n }\n\n return uniqueErrors.filter((error) => error?.message);\n});\n\nconst hasContent = computed(() => {\n return slots.default || content.value;\n});\n<\/script>\n\n<template>\n <sprawlify.div\n v-if=\"hasContent\"\n :role=\"role\"\n data-scope=\"field\"\n data-part=\"error\"\n data-slot=\"field-error\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <slot v-if=\"slots.default\" />\n <template v-else-if=\"typeof content === 'string'\">\n {{ content }}\n </template>\n <ul v-else-if=\"Array.isArray(content)\" class=\"ml-4 flex list-disc flex-col gap-1\">\n <li v-for=\"(error, index) in content\" :key=\"index\">\n {{ error?.message }}\n </li>\n </ul>\n </sprawlify.div>\n</template>\n",
2775
- type: "registry:ui",
2776
- path: "field/field-error.vue"
2777
- },
2778
- {
2779
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldGroupProps\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<FieldGroupProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"group\"\n data-slot=\"field-group\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2780
- type: "registry:ui",
2781
- path: "field/field-group.vue"
2782
- },
2783
- {
2784
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldLabelProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<FieldLabelProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <Label\n data-scope=\"field\"\n data-part=\"label\"\n data-slot=\"field-label\"\n v-bind=\"rest\"\n :class=\"className\"\n :as-child=\"asChild\"\n >\n <slot />\n </Label>\n</template>\n",
2785
- type: "registry:ui",
2786
- path: "field/field-label.vue"
2787
- },
2788
- {
2789
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldLegendProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n variant?: \"legend\" | \"label\";\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 { asChild, variant = \"legend\", ...rest } = defineProps<FieldLegendProps>();\n\nconst className = computed(() =>\n cn(\n \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n rest.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.legend\n data-scope=\"field\"\n data-part=\"legend\"\n data-slot=\"field-legend\"\n :data-variant=\"variant\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.legend>\n</template>\n",
2790
- type: "registry:ui",
2791
- path: "field/field-legend.vue"
2792
- },
2793
- {
2794
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldSeparatorProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs, useSlots } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst { ...rest } = defineProps<FieldSeparatorProps>();\n\nconst attrs = useAttrs();\nconst slots = useSlots();\n\nconst className = computed(() =>\n cn(\n \"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\",\n attrs.class as string,\n ),\n);\n\nconst hasContent = computed(() => !!slots.default);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"separator\"\n data-slot=\"field-separator\"\n :data-content=\"hasContent\"\n :class=\"className\"\n v-bind=\"rest\"\n >\n <Separator class=\"absolute inset-0 top-1/2\" />\n <span\n v-if=\"hasContent\"\n class=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n data-scope=\"field\"\n data-part=\"separator-content\"\n data-slot=\"field-separator-content\"\n >\n <slot />\n </span>\n </sprawlify.div>\n</template>\n",
2795
- type: "registry:ui",
2796
- path: "field/field-separator.vue"
2797
- },
2798
- {
2799
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldSetProps\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<FieldSetProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.fieldset\n data-scope=\"field\"\n data-part=\"set\"\n data-slot=\"field-set\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.fieldset>\n</template>\n",
2800
- type: "registry:ui",
2801
- path: "field/field-set.vue"
2802
- },
2803
- {
2804
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface FieldTitleProps\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<FieldTitleProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"title\"\n data-slot=\"field-title\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2805
- type: "registry:ui",
2806
- path: "field/field-title.vue"
2807
- },
2808
- {
2809
- 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 fieldVariants = cva(\n \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n {\n variants: {\n orientation: {\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n responsive:\n \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n },\n);\n\nexport interface FieldProps\n extends\n PolymorphicProps,\n /* @vue-ignore */\n HTMLAttributes {\n orientation?: VariantProps<typeof fieldVariants>[\"orientation\"];\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, orientation = \"vertical\", role = \"group\", ...rest } = defineProps<FieldProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(fieldVariants({ orientation }), attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.div\n :role=\"role\"\n data-scope=\"field\"\n data-part=\"root\"\n data-slot=\"field\"\n :data-orientation=\"orientation\"\n :class=\"className\"\n v-bind=\"rest\"\n :as-child=\"asChild\"\n >\n <slot />\n </sprawlify.div>\n</template>\n",
2810
- type: "registry:ui",
2811
- path: "field/field.vue"
2812
- },
2813
- {
2814
- content: "export { default as Field } from \"./field.vue\";\nexport { default as FieldSet } from \"./field-set.vue\";\nexport { default as FieldLegend } from \"./field-legend.vue\";\nexport { default as FieldGroup } from \"./field-group.vue\";\nexport { default as FieldContent } from \"./field-content.vue\";\nexport { default as FieldLabel } from \"./field-label.vue\";\nexport { default as FieldTitle } from \"./field-title.vue\";\nexport { default as FieldDescription } from \"./field-description.vue\";\nexport { default as FieldSeparator } from \"./field-separator.vue\";\nexport { default as FieldError } from \"./field-error.vue\";\n",
2815
- type: "registry:ui",
2816
- path: "field/index.ts"
2817
- }
2818
- ]
2819
- },
2820
- {
2821
- name: "input",
2822
- dependencies: [
2823
- "@sprawlify/vue",
2824
- "vue",
2825
- "@/lib/utils"
2826
- ],
2827
- files: [{
2828
- content: "export { default as Input } from \"./input.vue\";\n",
2829
- type: "registry:ui",
2830
- path: "input/index.ts"
2831
- }, {
2832
- 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",
2833
- type: "registry:ui",
2834
- path: "input/input.vue"
2835
- }]
2836
- },
2837
- {
2838
- name: "input-group",
2839
- dependencies: [
2840
- "@sprawlify/vue",
2841
- "vue",
2842
- "class-variance-authority",
2843
- "@/lib/utils",
2844
- "@/components/ui/button",
2845
- "@/components/ui/input",
2846
- "@/components/ui/textarea"
2847
- ],
2848
- files: [
2849
- {
2850
- content: "export { default as InputGroup } from \"./input-group.vue\";\nexport { default as InputGroupAddon } from \"./input-group-addon.vue\";\nexport { default as InputGroupButton } from \"./input-group-button.vue\";\nexport { default as InputGroupText } from \"./input-group-text.vue\";\nexport { default as InputGroupInput } from \"./input-group-input.vue\";\nexport { default as InputGroupTextarea } from \"./input-group-textarea.vue\";\n",
2851
- type: "registry:ui",
2852
- path: "input-group/index.ts"
2853
- },
2854
- {
2855
- 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",
2856
- type: "registry:ui",
2857
- path: "input-group/input-group-addon.vue"
2858
- },
2859
- {
2860
- 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",
2861
- type: "registry:ui",
2862
- path: "input-group/input-group-button.vue"
2863
- },
2864
- {
2865
- 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",
2866
- type: "registry:ui",
2867
- path: "input-group/input-group-input.vue"
2868
- },
2869
- {
2870
- 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",
2871
- type: "registry:ui",
2872
- path: "input-group/input-group-text.vue"
2873
- },
2874
- {
2875
- 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",
2876
- type: "registry:ui",
2877
- path: "input-group/input-group-textarea.vue"
2878
- },
2879
- {
2880
- 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",
2881
- type: "registry:ui",
2882
- path: "input-group/input-group.vue"
2883
- }
2884
- ]
2885
- },
2886
- {
2887
- name: "item",
2888
- dependencies: [
2889
- "@sprawlify/vue",
2890
- "vue",
2891
- "@/lib/utils",
2892
- "class-variance-authority",
2893
- "@/components/ui/separator"
2894
- ],
2895
- files: [
2896
- {
2897
- content: "export { default as Item } from \"./item.vue\";\nexport { default as ItemGroup } from \"./item-group.vue\";\nexport { default as ItemSeparator } from \"./item-separator.vue\";\nexport { default as ItemMedia } from \"./item-media.vue\";\nexport { default as ItemContent } from \"./item-content.vue\";\nexport { default as ItemTitle } from \"./item-title.vue\";\nexport { default as ItemDescription } from \"./item-description.vue\";\nexport { default as ItemActions } from \"./item-actions.vue\";\nexport { default as ItemHeader } from \"./item-header.vue\";\nexport { default as ItemFooter } from \"./item-footer.vue\";\n",
2898
- type: "registry:ui",
2899
- path: "item/index.ts"
2900
- },
2901
- {
2902
- 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",
2903
- type: "registry:ui",
2904
- path: "item/item-actions.vue"
2905
- },
2906
- {
2907
- 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",
2908
- type: "registry:ui",
2909
- path: "item/item-content.vue"
2910
- },
2911
- {
2912
- 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",
2913
- type: "registry:ui",
2914
- path: "item/item-description.vue"
2915
- },
2916
- {
2917
- 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",
2918
- type: "registry:ui",
2919
- path: "item/item-footer.vue"
2920
- },
2921
- {
2922
- 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",
2923
- type: "registry:ui",
2924
- path: "item/item-group.vue"
2925
- },
2926
- {
2927
- 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",
2928
- type: "registry:ui",
2929
- path: "item/item-header.vue"
2930
- },
2931
- {
2932
- 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",
2933
- type: "registry:ui",
2934
- path: "item/item-media.vue"
2935
- },
2936
- {
2937
- 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",
2938
- type: "registry:ui",
2939
- path: "item/item-separator.vue"
2940
- },
2941
- {
2942
- 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",
2943
- type: "registry:ui",
2944
- path: "item/item-title.vue"
2945
- },
2946
- {
2947
- 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",
2948
- type: "registry:ui",
2949
- path: "item/item.vue"
2950
- }
2951
- ]
2952
- },
2953
- {
2954
- name: "kbd",
2955
- dependencies: [
2956
- "@sprawlify/vue",
2957
- "vue",
2958
- "@/lib/utils"
2959
- ],
2960
- files: [
2961
- {
2962
- content: "export { default as Kbd } from \"./kbd.vue\";\nexport { default as KbdGroup } from \"./kbd-group.vue\";\n",
2963
- type: "registry:ui",
2964
- path: "kbd/index.ts"
2965
- },
2966
- {
2967
- 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",
2968
- type: "registry:ui",
2969
- path: "kbd/kbd-group.vue"
2970
- },
2971
- {
2972
- 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",
2973
- type: "registry:ui",
2974
- path: "kbd/kbd.vue"
2975
- }
2976
- ]
2977
- },
2978
- {
2979
- name: "label",
2980
- dependencies: [
2981
- "@sprawlify/vue",
2982
- "vue",
2983
- "@/lib/utils"
2984
- ],
2985
- files: [{
2986
- content: "export { default as Label } from \"./label.vue\";\n",
2987
- type: "registry:ui",
2988
- path: "label/index.ts"
2989
- }, {
2990
- 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",
2991
- type: "registry:ui",
2992
- path: "label/label.vue"
2993
- }]
2994
- },
2995
- {
2996
- name: "native-select",
2997
- dependencies: [
2998
- "vue",
2999
- "@/lib/utils",
3000
- "lucide-vue-next"
3001
- ],
3002
- files: [
3003
- {
3004
- content: "export { default as NativeSelect } from \"./native-select.vue\";\nexport { default as NativeSelectOption } from \"./native-select-option.vue\";\nexport { default as NativeSelectOptGroup } from \"./native-select-optgroup.vue\";\n",
3005
- type: "registry:ui",
3006
- path: "native-select/index.ts"
3007
- },
3008
- {
3009
- 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",
3010
- type: "registry:ui",
3011
- path: "native-select/native-select-optgroup.vue"
3012
- },
3013
- {
3014
- 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",
3015
- type: "registry:ui",
3016
- path: "native-select/native-select-option.vue"
3017
- },
3018
- {
3019
- 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",
3020
- type: "registry:ui",
3021
- path: "native-select/native-select.vue"
3022
- }
3023
- ]
3024
- },
3025
- {
3026
- name: "scroll-area",
3027
- dependencies: [
3028
- "@sprawlify/vue",
3029
- "vue",
3030
- "@/lib/utils"
3031
- ],
3032
- files: [
3033
- {
3034
- content: "export { default as ScrollArea } from \"./scroll-area.vue\";\nexport { default as ScrollBar } from \"./scroll-bar.vue\";\n",
3035
- type: "registry:ui",
3036
- path: "scroll-area/index.ts"
3037
- },
3038
- {
3039
- 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",
3040
- type: "registry:ui",
3041
- path: "scroll-area/scroll-area.vue"
3042
- },
3043
- {
3044
- 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",
3045
- type: "registry:ui",
3046
- path: "scroll-area/scroll-bar.vue"
3047
- }
3048
- ]
3049
- },
3050
- {
3051
- name: "separator",
3052
- dependencies: [
3053
- "@sprawlify/vue",
3054
- "vue",
3055
- "@/lib/utils"
3056
- ],
3057
- files: [{
3058
- content: "export { default as Separator, type SeparatorProps } from \"./separator.vue\";\n",
3059
- type: "registry:ui",
3060
- path: "separator/index.ts"
3061
- }, {
3062
- 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",
3063
- type: "registry:ui",
3064
- path: "separator/separator.vue"
3065
- }]
3066
- },
3067
- {
3068
- name: "table",
3069
- dependencies: [
3070
- "@sprawlify/vue",
3071
- "vue",
3072
- "@/lib/utils"
3073
- ],
3074
- files: [
3075
- {
3076
- content: "export { default as Table } from \"./table.vue\";\nexport { default as TableHeader } from \"./table-header.vue\";\nexport { default as TableBody } from \"./table-body.vue\";\nexport { default as TableFooter } from \"./table-footer.vue\";\nexport { default as TableRow } from \"./table-row.vue\";\nexport { default as TableHead } from \"./table-head.vue\";\nexport { default as TableCell } from \"./table-cell.vue\";\nexport { default as TableCaption } from \"./table-caption.vue\";\n",
3077
- type: "registry:ui",
3078
- path: "table/index.ts"
3079
- },
3080
- {
3081
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableBodyProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableBodyProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"[&_tr:last-child]:border-0\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.tbody data-slot=\"table-body\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.tbody>\n</template>\n",
3082
- type: "registry:ui",
3083
- path: "table/table-body.vue"
3084
- },
3085
- {
3086
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableCaptionProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableCaptionProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"mt-4 text-sm text-muted-foreground\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.caption data-slot=\"table-caption\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.caption>\n</template>\n",
3087
- type: "registry:ui",
3088
- path: "table/table-caption.vue"
3089
- },
3090
- {
3091
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TdHTMLAttributes } from \"vue\";\n\nexport interface TableCellProps extends PolymorphicProps, /* @vue-ignore */ TdHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableCellProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.td data-slot=\"table-cell\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.td>\n</template>\n",
3092
- type: "registry:ui",
3093
- path: "table/table-cell.vue"
3094
- },
3095
- {
3096
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableFooterProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableFooterProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", attrs.class as string),\n);\n<\/script>\n\n<template>\n <sprawlify.tfoot data-slot=\"table-footer\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.tfoot>\n</template>\n",
3097
- type: "registry:ui",
3098
- path: "table/table-footer.vue"
3099
- },
3100
- {
3101
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { ThHTMLAttributes } from \"vue\";\n\nexport interface TableHeadProps extends PolymorphicProps, /* @vue-ignore */ ThHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableHeadProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.th data-slot=\"table-head\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.th>\n</template>\n",
3102
- type: "registry:ui",
3103
- path: "table/table-head.vue"
3104
- },
3105
- {
3106
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableHeaderProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableHeaderProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"[&_tr]:border-b\", attrs.class as string));\n<\/script>\n\n<template>\n <sprawlify.thead data-slot=\"table-header\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.thead>\n</template>\n",
3107
- type: "registry:ui",
3108
- path: "table/table-header.vue"
3109
- },
3110
- {
3111
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { HTMLAttributes } from \"vue\";\n\nexport interface TableRowProps extends PolymorphicProps, /* @vue-ignore */ HTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableRowProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() =>\n cn(\n \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n attrs.class as string,\n ),\n);\n<\/script>\n\n<template>\n <sprawlify.tr data-slot=\"table-row\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.tr>\n</template>\n",
3112
- type: "registry:ui",
3113
- path: "table/table-row.vue"
3114
- },
3115
- {
3116
- content: "<script lang=\"ts\">\nimport type { PolymorphicProps } from \"@sprawlify/vue\";\nimport type { TableHTMLAttributes } from \"vue\";\n\nexport interface TableProps extends PolymorphicProps, /* @vue-ignore */ TableHTMLAttributes {}\n<\/script>\n\n<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\";\nimport { sprawlify } from \"@sprawlify/vue\";\nimport { cn } from \"@/lib/utils\";\n\nconst { asChild, ...rest } = defineProps<TableProps>();\nconst attrs = useAttrs();\n\nconst className = computed(() => cn(\"w-full caption-bottom text-sm\", attrs.class as string));\n<\/script>\n\n<template>\n <div data-slot=\"table-container\" class=\"relative w-full overflow-x-auto\">\n <sprawlify.table data-slot=\"table\" :class=\"className\" v-bind=\"rest\" :as-child=\"asChild\">\n <slot />\n </sprawlify.table>\n </div>\n</template>\n",
3117
- type: "registry:ui",
3118
- path: "table/table.vue"
3119
- }
3120
- ]
3121
- },
3122
- {
3123
- name: "tabs",
3124
- dependencies: [
3125
- "@sprawlify/vue",
3126
- "vue",
3127
- "@/lib/utils",
3128
- "class-variance-authority"
3129
- ],
3130
- files: [
3131
- {
3132
- content: "export { default as Tabs } from \"./tabs.vue\";\nexport { default as TabsList } from \"./tabs-list.vue\";\nexport { default as TabsTrigger } from \"./tabs-trigger.vue\";\nexport { default as TabsContent } from \"./tabs-content.vue\";\n",
3133
- type: "registry:ui",
3134
- path: "tabs/index.ts"
3135
- },
3136
- {
3137
- 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",
3138
- type: "registry:ui",
3139
- path: "tabs/tabs-content.vue"
3140
- },
3141
- {
3142
- 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",
3143
- type: "registry:ui",
3144
- path: "tabs/tabs-list.vue"
3145
- },
3146
- {
3147
- 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",
3148
- type: "registry:ui",
3149
- path: "tabs/tabs-trigger.vue"
3150
- },
3151
- {
3152
- 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",
3153
- type: "registry:ui",
3154
- path: "tabs/tabs.vue"
3155
- }
3156
- ]
3157
- },
3158
- {
3159
- name: "textarea",
3160
- dependencies: [
3161
- "@sprawlify/vue",
3162
- "vue",
3163
- "@/lib/utils"
3164
- ],
3165
- files: [{
3166
- content: "export { default as Textarea } from \"./textarea.vue\";\n",
3167
- type: "registry:ui",
3168
- path: "textarea/index.ts"
3169
- }, {
3170
- 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",
3171
- type: "registry:ui",
3172
- path: "textarea/textarea.vue"
3173
- }]
3174
- },
3175
- {
3176
- name: "tooltip",
3177
- dependencies: [
3178
- "@sprawlify/vue",
3179
- "vue",
3180
- "@/lib/utils"
3181
- ],
3182
- files: [
3183
- {
3184
- content: "export { default as Tooltip } from \"./tooltip.vue\";\r\nexport { default as TooltipProvider } from \"./tooltip-provider.vue\";\r\nexport { default as TooltipTrigger } from \"./tooltip-trigger.vue\";\r\nexport { default as TooltipContent } from \"./tooltip-content.vue\";",
3185
- type: "registry:ui",
3186
- path: "tooltip/index.ts"
3187
- },
3188
- {
3189
- content: "<script lang=\"ts\">\r\nimport type { TooltipContentProps as TooltipPrimitiveContentProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipContentProps extends /* @vue-ignore */ TooltipPrimitiveContentProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, useAttrs } from \"vue\";\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst { asChild, ...rest } = defineProps<TooltipContentProps>();\r\nconst attrs = useAttrs();\r\n\r\nconst className = computed(() =>\r\n cn(\r\n \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\r\n attrs.class as string,\r\n ),\r\n);\r\n<\/script>\r\n\r\n<template>\r\n <Teleport to=\"body\">\r\n <TooltipPrimitive.Positioner>\r\n <TooltipPrimitive.Content\r\n data-slot=\"tooltip-content\"\r\n :class=\"className\"\r\n v-bind=\"rest\"\r\n :as-child=\"asChild\"\r\n >\r\n <slot />\r\n <TooltipPrimitive.Arrow class=\"[--arrow-background:var(--foreground)] [--arrow-size:8px]\">\r\n <TooltipPrimitive.ArrowTip class=\"rounded-xs\" />\r\n </TooltipPrimitive.Arrow>\r\n </TooltipPrimitive.Content>\r\n </TooltipPrimitive.Positioner>\r\n </Teleport>\r\n</template>",
3190
- type: "registry:ui",
3191
- path: "tooltip/tooltip-content.vue"
3192
- },
3193
- {
3194
- content: "<script lang=\"ts\">\r\nimport type { TooltipRootProviderProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipProviderProps extends /* @vue-ignore */ TooltipRootProviderProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\n\r\nconst { ...rest } = defineProps<TooltipProviderProps>();\r\n<\/script>\r\n\r\n<template>\r\n <TooltipPrimitive.RootProvider data-slot=\"tooltip-provider\" v-bind=\"rest\">\r\n <slot />\r\n </TooltipPrimitive.RootProvider>\r\n</template>",
3195
- type: "registry:ui",
3196
- path: "tooltip/tooltip-provider.vue"
3197
- },
3198
- {
3199
- content: "<script lang=\"ts\">\r\nimport type { TooltipTriggerProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipTriggerComponentProps extends /* @vue-ignore */ TooltipTriggerProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\n\r\nconst { asChild, ...rest } = defineProps<TooltipTriggerComponentProps>();\r\n<\/script>\r\n\r\n<template>\r\n <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" v-bind=\"rest\" :as-child=\"asChild\">\r\n <slot />\r\n </TooltipPrimitive.Trigger>\r\n</template>",
3200
- type: "registry:ui",
3201
- path: "tooltip/tooltip-trigger.vue"
3202
- },
3203
- {
3204
- content: "<script lang=\"ts\">\r\nimport type { TooltipRootProps } from \"@sprawlify/vue/tooltip\";\r\n\r\nexport interface TooltipProps extends /* @vue-ignore */ TooltipRootProps {}\r\n<\/script>\r\n\r\n<script setup lang=\"ts\">\r\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/vue/tooltip\";\r\n\r\nconst { ...rest } = defineProps<TooltipProps>();\r\n<\/script>\r\n\r\n<template>\r\n <TooltipPrimitive.Root data-slot=\"tooltip\" v-bind=\"rest\">\r\n <slot />\r\n </TooltipPrimitive.Root>\r\n</template>",
3205
- type: "registry:ui",
3206
- path: "tooltip/tooltip.vue"
3207
- }
3208
- ]
3209
- },
3210
- {
3211
- name: "utils",
3212
- dependencies: ["clsx", "tailwind-merge"],
3213
- files: [{
3214
- content: "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n",
3215
- type: "registry:utils",
3216
- path: "utils.ts"
3217
- }]
3218
- }
3219
- ]
3220
2212
  }
3221
2213
  }
3222
2214
  } };
@@ -4091,171 +3083,6 @@ export default defineConfig({
4091
3083
  tsconfigPaths: true,
4092
3084
  },
4093
3085
  plugins: [tailwindcss(), svelte()],
4094
- })`
4095
- }
4096
- ] }),
4097
- vue: createTemplate({ files: [
4098
- {
4099
- path: "src/root.vue",
4100
- content: `<template>
4101
- <div>
4102
- <h1 class="text-2xl font-bold">Welcome to Sprawlify + Vue!</h1>
4103
- <p class="mt-4 text-lg">This is your root component.</p>
4104
- </div>
4105
- </template>`
4106
- },
4107
- {
4108
- path: "src/main.ts",
4109
- content: `import { createApp } from "vue"
4110
- import Root from './root.vue'
4111
- import './globals.css'
4112
-
4113
- createApp(Root).mount('#root')`
4114
- },
4115
- {
4116
- path: ".gitignore",
4117
- content: `# Logs
4118
- logs
4119
- *.log
4120
- npm-debug.log*
4121
- yarn-debug.log*
4122
- yarn-error.log*
4123
- pnpm-debug.log*
4124
- lerna-debug.log*
4125
-
4126
- node_modules
4127
- dist
4128
- dist-ssr
4129
- *.local
4130
-
4131
- # Editor directories and files
4132
- .vscode/*
4133
- !.vscode/extensions.json
4134
- .idea
4135
- .DS_Store
4136
- *.suo
4137
- *.ntvs*
4138
- *.njsproj
4139
- *.sln
4140
- *.sw?`
4141
- },
4142
- {
4143
- path: "index.html",
4144
- content: `<!DOCTYPE html>
4145
- <html lang="en">
4146
- <head>
4147
- <meta charset="UTF-8" />
4148
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4149
- <title>Sprawlify + Vue</title>
4150
- </head>
4151
- <body>
4152
- <div id="root"></div>
4153
- <script type="module" src="/src/main.ts"><\/script>
4154
- </body>
4155
- </html>`
4156
- },
4157
- {
4158
- path: "package.json",
4159
- content: `{
4160
- "private": true,
4161
- "version": "0.0.0",
4162
- "type": "module",
4163
- "scripts": {
4164
- "dev": "vite",
4165
- "build": "vue-tsc -b && vite build",
4166
- "preview": "vite preview"
4167
- },
4168
- "dependencies": {
4169
- "@sprawlify/primitives": "^0.1.9",
4170
- "@sprawlify/vue": "^0.1.9",
4171
- "vue": "^3.5.30"
4172
- },
4173
- "devDependencies": {
4174
- "@tailwindcss/vite": "^4.2.2",
4175
- "@types/node": "^24.12.0",
4176
- "@vitejs/plugin-vue": "^6.0.5",
4177
- "@vue/tsconfig": "^0.9.0",
4178
- "tailwindcss": "^4.2.2",
4179
- "typescript": "^5.9.3",
4180
- "vite": "^8.0.1",
4181
- "vue-tsc": "^3.2.6"
4182
- }
4183
- }`
4184
- },
4185
- {
4186
- path: "tsconfig.app.json",
4187
- content: `{
4188
- "extends": "@vue/tsconfig/tsconfig.dom.json",
4189
- "compilerOptions": {
4190
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4191
- "types": ["vite/client"],
4192
- /* Linting */
4193
- "strict": true,
4194
- "noUnusedLocals": true,
4195
- "noUnusedParameters": true,
4196
- "erasableSyntaxOnly": true,
4197
- "noFallthroughCasesInSwitch": true,
4198
- "noUncheckedSideEffectImports": true,
4199
- "paths": {
4200
- "@/*": ["./src/*"]
4201
- }
4202
- },
4203
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
4204
- }`
4205
- },
4206
- {
4207
- path: "tsconfig.json",
4208
- content: `{
4209
- "files": [],
4210
- "references": [
4211
- { "path": "./tsconfig.app.json" },
4212
- { "path": "./tsconfig.node.json" }
4213
- ],
4214
- "compilerOptions": {
4215
- "paths": {
4216
- "@/*": ["./src/*"]
4217
- }
4218
- }
4219
- }`
4220
- },
4221
- {
4222
- path: "tsconfig.node.json",
4223
- content: `{
4224
- "compilerOptions": {
4225
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4226
- "target": "ES2023",
4227
- "lib": ["ES2023"],
4228
- "module": "ESNext",
4229
- "types": ["node"],
4230
- "skipLibCheck": true,
4231
- /* Bundler mode */
4232
- "moduleResolution": "bundler",
4233
- "allowImportingTsExtensions": true,
4234
- "verbatimModuleSyntax": true,
4235
- "moduleDetection": "force",
4236
- "noEmit": true,
4237
- /* Linting */
4238
- "strict": true,
4239
- "noUnusedLocals": true,
4240
- "noUnusedParameters": true,
4241
- "erasableSyntaxOnly": true,
4242
- "noFallthroughCasesInSwitch": true,
4243
- "noUncheckedSideEffectImports": true
4244
- },
4245
- "include": ["vite.config.ts"]
4246
- }`
4247
- },
4248
- {
4249
- path: "vite.config.ts",
4250
- content: `import { defineConfig } from "vite"
4251
- import vue from "@vitejs/plugin-vue"
4252
- import tailwindcss from "@tailwindcss/vite"
4253
-
4254
- export default defineConfig({
4255
- resolve: {
4256
- tsconfigPaths: true,
4257
- },
4258
- plugins: [tailwindcss(), vue()],
4259
3086
  })`
4260
3087
  }
4261
3088
  ] }),
@@ -4647,8 +3474,7 @@ function resolveImport(importPath, config) {
4647
3474
  ".jsx",
4648
3475
  ".js",
4649
3476
  ".css",
4650
- ".svelte",
4651
- ".vue"
3477
+ ".svelte"
4652
3478
  ]);
4653
3479
  }
4654
3480
  //#endregion