sprawlify 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +300 -30
- 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.
|
|
13
|
+
var version = "0.1.19";
|
|
14
14
|
//#endregion
|
|
15
15
|
//#region src/utils/file-helper.ts
|
|
16
16
|
const FILE_BACKUP_SUFFIX = ".bak";
|
|
@@ -201,7 +201,7 @@ const PRESETS = { monochrome: {
|
|
|
201
201
|
"tailwind-scrollbar": "^4.0.2",
|
|
202
202
|
"tw-animate-css": "^1.4.0"
|
|
203
203
|
},
|
|
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(
|
|
204
|
+
tailwindcss: { css: "@import \"tailwindcss\";\r\n@import \"tw-animate-css\";\r\n@plugin 'tailwind-scrollbar';\r\n\r\n@custom-variant dark (&:is(.dark *));\r\n\r\n:root {\r\n --background: oklch(100% 0 0);\r\n --foreground: oklch(14.5% 0 0);\r\n --card: oklch(100% 0 0);\r\n --card-foreground: oklch(14.5% 0 0);\r\n --popover: oklch(100% 0 0);\r\n --popover-foreground: oklch(14.5% 0 0);\r\n --primary: oklch(15.3% 0.006 107.1);\r\n --primary-foreground: oklch(100% 0 0);\r\n --secondary: oklch(98.8% 0.003 106.5);\r\n --secondary-foreground: oklch(15.3% 0.006 107.1);\r\n --muted: oklch(97% 0 0);\r\n --muted-foreground: oklch(55.6% 0 0);\r\n --accent: oklch(97% 0 0);\r\n --accent-foreground: oklch(20.5% 0 0);\r\n --destructive: oklch(57.7% 0.245 27.325);\r\n --destructive-foreground: oklch(57.7% 0.245 27.325);\r\n --border: oklch(92.2% 0 0);\r\n --input: oklch(92.2% 0 0);\r\n --ring: oklch(70.8% 0 0);\r\n --radius: 0.625rem;\r\n --sidebar: oklch(98.5% 0 0);\r\n --sidebar-foreground: oklch(14.5% 0 0);\r\n --sidebar-primary: oklch(20.5% 0 0);\r\n --sidebar-primary-foreground: oklch(98.5% 0 0);\r\n --sidebar-accent: oklch(97% 0 0);\r\n --sidebar-accent-foreground: oklch(20.5% 0 0);\r\n --sidebar-border: oklch(92.2% 0 0);\r\n --sidebar-ring: oklch(70.8% 0 0);\r\n}\r\n\r\n.dark {\r\n --background: oklch(14.5% 0 0);\r\n --foreground: oklch(98.5% 0 0);\r\n --card: oklch(14.5% 0 0);\r\n --card-foreground: oklch(98.5% 0 0);\r\n --popover: oklch(14.5% 0 0);\r\n --popover-foreground: oklch(98.5% 0 0);\r\n --primary: oklch(88% 0.011 106.6);\r\n --primary-foreground: oklch(15.3% 0.006 107.1);\r\n --secondary: oklch(28.6% 0.016 107.4);\r\n --secondary-foreground: oklch(98.5% 0 0);\r\n --muted: oklch(26.9% 0 0);\r\n --muted-foreground: oklch(70.8% 0 0);\r\n --accent: oklch(26.9% 0 0);\r\n --accent-foreground: oklch(98.5% 0 0);\r\n --destructive: oklch(39.6% 0.141 25.723);\r\n --destructive-foreground: oklch(63.7% 0.237 25.331);\r\n --border: oklch(26.9% 0 0);\r\n --input: oklch(26.9% 0 0);\r\n --ring: oklch(43.9% 0 0);\r\n --sidebar: oklch(20.5% 0 0);\r\n --sidebar-foreground: oklch(98.5% 0 0);\r\n --sidebar-primary: oklch(48.8% 0.243 264.376);\r\n --sidebar-primary-foreground: oklch(98.5% 0 0);\r\n --sidebar-accent: oklch(26.9% 0 0);\r\n --sidebar-accent-foreground: oklch(98.5% 0 0);\r\n --sidebar-border: oklch(26.9% 0 0);\r\n --sidebar-ring: oklch(43.9% 0 0);\r\n}\r\n\r\n@theme inline {\r\n --color-background: var(--background);\r\n --color-foreground: var(--foreground);\r\n --color-card: var(--card);\r\n --color-card-foreground: var(--card-foreground);\r\n --color-popover: var(--popover);\r\n --color-popover-foreground: var(--popover-foreground);\r\n --color-primary: var(--primary);\r\n --color-primary-foreground: var(--primary-foreground);\r\n --color-secondary: var(--secondary);\r\n --color-secondary-foreground: var(--secondary-foreground);\r\n --color-muted: var(--muted);\r\n --color-muted-foreground: var(--muted-foreground);\r\n --color-accent: var(--accent);\r\n --color-accent-foreground: var(--accent-foreground);\r\n --color-destructive: var(--destructive);\r\n --color-destructive-foreground: var(--destructive-foreground);\r\n --color-border: var(--border);\r\n --color-input: var(--input);\r\n --color-ring: var(--ring);\r\n --radius-sm: calc(var(--radius) - 4px);\r\n --radius-md: calc(var(--radius) - 2px);\r\n --radius-lg: var(--radius);\r\n --radius-xl: calc(var(--radius) + 4px);\r\n --color-sidebar: var(--sidebar);\r\n --color-sidebar-foreground: var(--sidebar-foreground);\r\n --color-sidebar-primary: var(--sidebar-primary);\r\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\r\n --color-sidebar-accent: var(--sidebar-accent);\r\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\r\n --color-sidebar-border: var(--sidebar-border);\r\n --color-sidebar-ring: var(--sidebar-ring);\r\n\r\n --color-neutral-50: oklch(98.8% 0.003 106.5);\r\n --color-neutral-100: oklch(96.6% 0.005 106.5);\r\n --color-neutral-200: oklch(93% 0.007 106.5);\r\n --color-neutral-300: oklch(88% 0.011 106.6);\r\n --color-neutral-400: oklch(73.7% 0.021 106.9);\r\n --color-neutral-500: oklch(58% 0.031 107.3);\r\n --color-neutral-600: oklch(46.6% 0.025 107.3);\r\n --color-neutral-700: oklch(39.4% 0.023 107.4);\r\n --color-neutral-800: oklch(28.6% 0.016 107.4);\r\n --color-neutral-900: oklch(22.8% 0.013 107.4);\r\n --color-neutral-950: oklch(15.3% 0.006 107.1);\r\n}\r\n\r\n@layer base {\r\n * {\r\n @apply border-border outline-ring/50;\r\n }\r\n\r\n html {\r\n @apply bg-neutral-100 text-foreground;\r\n }\r\n\r\n html.dark, html[data-theme=\"dark\"] {\r\n @apply bg-neutral-950 text-foreground;\r\n }\r\n\r\n button:not(:disabled),\r\n [role=\"button\"]:not(:disabled) {\r\n cursor: pointer;\r\n }\r\n}\r\n" },
|
|
205
205
|
items: [
|
|
206
206
|
{
|
|
207
207
|
name: "accordion",
|
|
@@ -334,7 +334,7 @@ const PRESETS = { monochrome: {
|
|
|
334
334
|
"lucide-react"
|
|
335
335
|
],
|
|
336
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}",
|
|
337
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DatePicker as DatePickerPrimitive } from \"@sprawlify/react/date-picker\";\nimport { type DateValue } from \"@internationalized/date\";\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nfunction CalendarViewHeader({\n buttonVariant = \"ghost\",\n}: {\n buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n}) {\n return (\n <DatePickerPrimitive.ViewControl className=\"relative flex w-full items-center justify-between gap-1\">\n <Button\n variant={buttonVariant}\n size=\"icon\"\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild\n >\n <DatePickerPrimitive.PrevTrigger>\n <ChevronLeftIcon className=\"size-4\" />\n </DatePickerPrimitive.PrevTrigger>\n </Button>\n\n <DatePickerPrimitive.ViewTrigger className=\"flex h-(--cell-size) items-center justify-center text-sm font-medium select-none\">\n <DatePickerPrimitive.RangeText />\n </DatePickerPrimitive.ViewTrigger>\n\n <Button\n variant={buttonVariant}\n size=\"icon\"\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild\n >\n <DatePickerPrimitive.NextTrigger>\n <ChevronRightIcon className=\"size-4\" />\n </DatePickerPrimitive.NextTrigger>\n </Button>\n </DatePickerPrimitive.ViewControl>\n );\n}\n\nfunction CalendarSelectHeader({\n buttonVariant = \"ghost\",\n className,\n}: {\n buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n className?: string;\n}) {\n return (\n <DatePickerPrimitive.ViewControl\n className={cn(\"relative flex w-full items-center justify-between gap-1\", className)}\n >\n <Button\n variant={buttonVariant}\n size=\"icon\"\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild\n >\n <DatePickerPrimitive.PrevTrigger>\n <ChevronLeftIcon className=\"size-4\" />\n </DatePickerPrimitive.PrevTrigger>\n </Button>\n\n <div className=\"flex items-center gap-1\">\n <span className=\"relative\">\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\" />\n <ChevronDownIcon className=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n </span>\n <span className=\"relative\">\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\" />\n <ChevronDownIcon className=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n </span>\n </div>\n\n <Button\n variant={buttonVariant}\n size=\"icon\"\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild\n >\n <DatePickerPrimitive.NextTrigger>\n <ChevronRightIcon className=\"size-4\" />\n </DatePickerPrimitive.NextTrigger>\n </Button>\n </DatePickerPrimitive.ViewControl>\n );\n}\n\nfunction CalendarDayView({\n showOutsideDays = true,\n header,\n cell,\n}: {\n showOutsideDays?: boolean;\n header?: React.ReactNode;\n cell?: (day: DateValue) => React.ReactNode;\n}) {\n return (\n <DatePickerPrimitive.View view=\"day\" className=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => (\n <>\n {header ?? <CalendarSelectHeader />}\n <CalendarDayTable\n weeks={api.weeks}\n weekDays={api.weekDays}\n focusedMonth={api.focusedValue.month}\n showOutsideDays={showOutsideDays}\n cell={cell}\n />\n </>\n )}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction CalendarMonthView({\n header,\n cell,\n}: {\n header?: React.ReactNode;\n cell?: (month: { label: string; value: number }) => React.ReactNode;\n}) {\n return (\n <DatePickerPrimitive.View view=\"month\" className=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => (\n <>\n {header ?? <CalendarSelectHeader />}\n <DatePickerPrimitive.Table className=\"w-full border-collapse\">\n <DatePickerPrimitive.TableBody>\n {api.getMonthsGrid({ columns: 4, format: \"short\" }).map((months, rowIndex) => (\n <DatePickerPrimitive.TableRow key={rowIndex} className=\"mt-2 flex w-full\">\n {months.map((month, colIndex) => (\n <DatePickerPrimitive.TableCell\n key={colIndex}\n value={month.value}\n className=\"flex-1 p-0 text-center\"\n >\n <DatePickerPrimitive.TableCellTrigger asChild>\n <Button variant=\"ghost\" className=\"w-full text-sm font-normal\">\n {cell ? cell(month) : month.label}\n </Button>\n </DatePickerPrimitive.TableCellTrigger>\n </DatePickerPrimitive.TableCell>\n ))}\n </DatePickerPrimitive.TableRow>\n ))}\n </DatePickerPrimitive.TableBody>\n </DatePickerPrimitive.Table>\n </>\n )}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction CalendarYearView({\n header,\n cell,\n}: {\n header?: React.ReactNode;\n cell?: (year: { label: string; value: number }) => React.ReactNode;\n}) {\n return (\n <DatePickerPrimitive.View view=\"year\" className=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => (\n <>\n {header ?? <CalendarSelectHeader />}\n <DatePickerPrimitive.Table className=\"w-full border-collapse\">\n <DatePickerPrimitive.TableBody>\n {api.getYearsGrid({ columns: 4 }).map((years, rowIndex) => (\n <DatePickerPrimitive.TableRow key={rowIndex} className=\"mt-2 flex w-full\">\n {years.map((year, colIndex) => (\n <DatePickerPrimitive.TableCell\n key={colIndex}\n value={year.value}\n className=\"flex-1 p-0 text-center\"\n >\n <DatePickerPrimitive.TableCellTrigger asChild>\n <Button variant=\"ghost\" className=\"w-full text-sm font-normal\">\n {cell ? cell(year) : year.label}\n </Button>\n </DatePickerPrimitive.TableCellTrigger>\n </DatePickerPrimitive.TableCell>\n ))}\n </DatePickerPrimitive.TableRow>\n ))}\n </DatePickerPrimitive.TableBody>\n </DatePickerPrimitive.Table>\n </>\n )}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction CalendarDayButton({\n children,\n className,\n ...props\n}: React.ComponentProps<typeof DatePickerPrimitive.TableCellTrigger>) {\n return (\n <DatePickerPrimitive.TableCellTrigger\n className={cn(\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\",\n \"hover:bg-accent hover:text-accent-foreground\",\n \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\n \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\n \"data-[outside-range]:text-muted-foreground/50\",\n \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\n \"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[unavailable]:opacity-40\",\n \"data-[in-range]:rounded-none data-[in-range]:bg-accent data-[in-range]:text-accent-foreground\",\n \"data-[range-start]:rounded-l-(--cell-radius) data-[range-start]:bg-primary data-[range-start]:text-primary-foreground\",\n \"data-[range-end]:rounded-r-(--cell-radius) data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\n \"focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n className,\n )}\n {...props}\n >\n {children}\n </DatePickerPrimitive.TableCellTrigger>\n );\n}\n\nfunction CalendarDayTable({\n weeks,\n weekDays,\n focusedMonth,\n showOutsideDays = true,\n visibleRange,\n cell,\n}: {\n weeks: DateValue[][];\n weekDays: { short: string }[];\n focusedMonth: number;\n showOutsideDays?: boolean;\n visibleRange?: { start: DateValue; end: DateValue };\n cell?: (day: DateValue) => React.ReactNode;\n}) {\n return (\n <DatePickerPrimitive.Table className=\"w-full border-collapse\">\n <DatePickerPrimitive.TableHead>\n <DatePickerPrimitive.TableRow className=\"flex\">\n {weekDays.map((weekDay, i) => (\n <DatePickerPrimitive.TableHeader\n key={i}\n className=\"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\"\n >\n {weekDay.short}\n </DatePickerPrimitive.TableHeader>\n ))}\n </DatePickerPrimitive.TableRow>\n </DatePickerPrimitive.TableHead>\n <DatePickerPrimitive.TableBody>\n {weeks.map((week, weekIndex) => (\n <DatePickerPrimitive.TableRow key={weekIndex} className=\"mt-2 flex w-full\">\n {week.map((day, dayIndex) => {\n const isOutside = day.month !== focusedMonth;\n if (!showOutsideDays && isOutside) {\n return <td key={dayIndex} className=\"flex-1 p-0\" aria-hidden />;\n }\n return (\n <DatePickerPrimitive.TableCell\n key={dayIndex}\n value={day}\n visibleRange={visibleRange}\n className={cn(\n \"group/day relative aspect-square h-full w-full flex-1 rounded-(--cell-radius) p-0 text-center select-none\",\n \"[&:last-child[data-selected]_div]:rounded-r-(--cell-radius)\",\n \"[&:first-child[data-selected]_div]:rounded-l-(--cell-radius)\",\n )}\n >\n <CalendarDayButton>{cell ? cell(day) : day.day}</CalendarDayButton>\n </DatePickerPrimitive.TableCell>\n );\n })}\n </DatePickerPrimitive.TableRow>\n ))}\n </DatePickerPrimitive.TableBody>\n </DatePickerPrimitive.Table>\n );\n}\n\nfunction CalendarDualMonthDayView({\n showOutsideDays = true,\n cell,\n}: {\n showOutsideDays?: boolean;\n cell?: (day: DateValue) => React.ReactNode;\n}) {\n return (\n <DatePickerPrimitive.View view=\"day\" className=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => {\n const offset = api.getOffset({ months: 1 });\n return (\n <div className=\"flex gap-4 flex-row\">\n {/* First month */}\n <div className=\"flex flex-col gap-4\">\n <div className=\"relative flex w-full items-center justify-between gap-1\">\n <DatePickerPrimitive.PrevTrigger asChild>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n >\n <ChevronLeftIcon className=\"size-4\" />\n </Button>\n </DatePickerPrimitive.PrevTrigger>\n <span className=\"text-sm font-medium select-none\">\n {api.visibleRangeText.start}\n </span>\n <div className=\"size-(--cell-size)\" />\n </div>\n <CalendarDayTable\n weeks={api.weeks}\n weekDays={api.weekDays}\n focusedMonth={api.focusedValue.month}\n showOutsideDays={showOutsideDays}\n cell={cell}\n />\n </div>\n {/* Second month */}\n <div className=\"flex flex-col gap-4\">\n <div className=\"relative flex w-full items-center justify-between gap-1\">\n <div className=\"size-(--cell-size)\" />\n <span className=\"text-sm font-medium select-none\">\n {api.visibleRangeText.end}\n </span>\n <DatePickerPrimitive.NextTrigger asChild>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n >\n <ChevronRightIcon className=\"size-4\" />\n </Button>\n </DatePickerPrimitive.NextTrigger>\n </div>\n <CalendarDayTable\n weeks={offset.weeks}\n weekDays={api.weekDays}\n focusedMonth={offset.visibleRange.start.month}\n showOutsideDays={showOutsideDays}\n visibleRange={offset.visibleRange}\n cell={cell}\n />\n </div>\n </div>\n );\n }}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction Calendar({\n className,\n showOutsideDays = true,\n children,\n numOfMonths,\n ...props\n}: Omit<React.ComponentProps<typeof DatePickerPrimitive.Root>, \"inline\"> & {\n className?: string;\n showOutsideDays?: boolean;\n children?: React.ReactNode;\n}) {\n const isDualMonth = numOfMonths && numOfMonths >= 2;\n\n return (\n <DatePickerPrimitive.Root inline numOfMonths={numOfMonths} {...props}>\n <div\n data-slot=\"calendar\"\n className={cn(\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\",\n className,\n )}\n >\n {children || (\n <>\n {isDualMonth ? (\n <CalendarDualMonthDayView showOutsideDays={showOutsideDays} />\n ) : (\n <CalendarDayView showOutsideDays={showOutsideDays} />\n )}\n <CalendarMonthView />\n <CalendarYearView />\n </>\n )}\n </div>\n </DatePickerPrimitive.Root>\n );\n}\n\nconst CalendarPresetTrigger = DatePickerPrimitive.PresetTrigger;\n\nexport {\n Calendar,\n CalendarDayView,\n CalendarDualMonthDayView,\n CalendarDayTable,\n CalendarMonthView,\n CalendarYearView,\n CalendarViewHeader,\n CalendarSelectHeader,\n CalendarDayButton,\n CalendarPresetTrigger,\n};\n",
|
|
338
338
|
type: "registry:ui",
|
|
339
339
|
path: "calendar.tsx"
|
|
340
340
|
}]
|
|
@@ -352,6 +352,21 @@ const PRESETS = { monochrome: {
|
|
|
352
352
|
path: "card.tsx"
|
|
353
353
|
}]
|
|
354
354
|
},
|
|
355
|
+
{
|
|
356
|
+
name: "carousel",
|
|
357
|
+
dependencies: [
|
|
358
|
+
"react",
|
|
359
|
+
"@/lib/utils",
|
|
360
|
+
"@/components/ui/button",
|
|
361
|
+
"@sprawlify/react",
|
|
362
|
+
"lucide-react"
|
|
363
|
+
],
|
|
364
|
+
files: [{
|
|
365
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/react/carousel\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nconst Carousel = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Root>\n>(({ className, spacing = \"1rem\", loop = false, page, ...props }, ref) => (\n <CarouselPrimitive.Root\n ref={ref}\n data-slot=\"carousel\"\n spacing={spacing}\n loop={loop}\n page={page}\n className={cn(\n \"relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row\",\n className,\n )}\n {...props}\n />\n));\nCarousel.displayName = \"Carousel\";\n\nconst CarouselContent = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.ItemGroup>,\n React.ComponentPropsWithoutRef<typeof CarouselPrimitive.ItemGroup>\n>(({ className, ...props }, ref) => (\n <CarouselPrimitive.ItemGroup\n ref={ref}\n data-slot=\"carousel-content\"\n className={cn(\n \"flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n className,\n )}\n {...props}\n />\n));\nCarouselContent.displayName = \"CarouselContent\";\n\nconst CarouselItem = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Item>\n>(({ className, ...props }, ref) => (\n <CarouselPrimitive.Item\n ref={ref}\n data-slot=\"carousel-item\"\n className={cn(\"min-w-0 shrink-0 grow-0 basis-full\", className)}\n {...props}\n />\n));\nCarouselItem.displayName = \"CarouselItem\";\n\nconst CarouselControl = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.Control>,\n React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Control>\n>(({ className, ...props }, ref) => (\n <CarouselPrimitive.Control\n ref={ref}\n data-slot=\"carousel-control\"\n className={cn(\n \"flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col\",\n className,\n )}\n {...props}\n />\n));\nCarouselControl.displayName = \"CarouselControl\";\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n ({ className, children, variant = \"outline\", size = \"icon-sm\", ...props }, ref) => (\n <CarouselPrimitive.PrevTrigger asChild>\n <Button\n ref={ref}\n data-slot=\"carousel-previous\"\n variant={variant}\n size={size}\n className={cn(\"touch-manipulation rounded-full disabled:opacity-50\", className)}\n {...props}\n >\n {children ?? <ChevronLeftIcon className=\"cn-rtl-flip size-4\" />}\n <span className=\"sr-only\">Previous slide</span>\n </Button>\n </CarouselPrimitive.PrevTrigger>\n ),\n);\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n ({ className, children, variant = \"outline\", size = \"icon-sm\", ...props }, ref) => (\n <CarouselPrimitive.NextTrigger asChild>\n <Button\n ref={ref}\n data-slot=\"carousel-next\"\n variant={variant}\n size={size}\n className={cn(\"touch-manipulation rounded-full disabled:opacity-50\", className)}\n {...props}\n >\n {children ?? <ChevronRightIcon className=\"cn-rtl-flip size-4\" />}\n <span className=\"sr-only\">Next slide</span>\n </Button>\n </CarouselPrimitive.NextTrigger>\n ),\n);\nCarouselNext.displayName = \"CarouselNext\";\n\nconst CarouselIndicatorGroup = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.IndicatorGroup>,\n React.ComponentPropsWithoutRef<typeof CarouselPrimitive.IndicatorGroup>\n>(({ className, ...props }, ref) => (\n <CarouselPrimitive.IndicatorGroup\n ref={ref}\n data-slot=\"carousel-indicator-group\"\n className={cn(\"flex justify-center gap-2 data-[orientation=vertical]:flex-col\", className)}\n {...props}\n />\n));\nCarouselIndicatorGroup.displayName = \"CarouselIndicatorGroup\";\n\nconst CarouselIndicator = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.Indicator>,\n React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n <CarouselPrimitive.Indicator\n ref={ref}\n data-slot=\"carousel-indicator\"\n className={cn(\n \"size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary\",\n className,\n )}\n {...props}\n />\n));\nCarouselIndicator.displayName = \"CarouselIndicator\";\n\nconst CarouselIndicators = React.forwardRef<\n React.ElementRef<typeof CarouselPrimitive.IndicatorGroup>,\n Omit<React.ComponentPropsWithoutRef<typeof CarouselPrimitive.Indicator>, \"index\">\n>(function CarouselIndicators(props, ref) {\n return (\n <CarouselPrimitive.Context>\n {(api) => (\n <CarouselIndicatorGroup ref={ref}>\n {api.pageSnapPoints.map((_, index) => (\n <CarouselIndicator key={index} index={index} {...props} />\n ))}\n </CarouselIndicatorGroup>\n )}\n </CarouselPrimitive.Context>\n );\n});\nCarouselIndicators.displayName = \"CarouselIndicators\";\n\nconst CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;\nconst CarouselContext = CarouselPrimitive.Context;\nconst CarouselRootProvider = CarouselPrimitive.RootProvider;\n\nexport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselControl,\n CarouselPrevious,\n CarouselNext,\n CarouselIndicatorGroup,\n CarouselIndicator,\n CarouselIndicators,\n CarouselAutoplayTrigger,\n CarouselContext,\n CarouselRootProvider,\n};\n",
|
|
366
|
+
type: "registry:ui",
|
|
367
|
+
path: "carousel.tsx"
|
|
368
|
+
}]
|
|
369
|
+
},
|
|
355
370
|
{
|
|
356
371
|
name: "checkbox",
|
|
357
372
|
dependencies: [
|
|
@@ -421,14 +436,13 @@ const PRESETS = { monochrome: {
|
|
|
421
436
|
name: "field",
|
|
422
437
|
dependencies: [
|
|
423
438
|
"react",
|
|
424
|
-
"class-variance-authority",
|
|
425
439
|
"@/lib/utils",
|
|
426
|
-
"@/components/ui/label",
|
|
427
440
|
"@/components/ui/separator",
|
|
428
|
-
"@sprawlify/react"
|
|
441
|
+
"@sprawlify/react",
|
|
442
|
+
"class-variance-authority"
|
|
429
443
|
],
|
|
430
444
|
files: [{
|
|
431
|
-
content: "\"use client\";\n\nimport
|
|
445
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\nimport { Field as FieldPrimitive } from \"@sprawlify/react/field\";\nimport { Fieldset as FieldsetPrimitive } from \"@sprawlify/react/fieldset\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<typeof FieldsetPrimitive.Root>) {\n return (\n <FieldsetPrimitive.Root\n data-slot=\"field-set\"\n className={cn(\n \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<typeof FieldsetPrimitive.Legend> & {\n variant?: \"legend\" | \"label\";\n}) {\n return (\n <FieldsetPrimitive.Legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-slot=\"field-group\"\n className={cn(\n \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\", {\n variants: {\n orientation: {\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto\",\n responsive:\n \"@md/field-group:has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n});\n\nfunction Field({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<typeof FieldPrimitive.Root> & VariantProps<typeof fieldVariants>) {\n return (\n <FieldPrimitive.Root\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"content\"\n data-slot=\"field-content\"\n className={cn(\"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\", className)}\n {...props}\n />\n );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof FieldPrimitive.Label>) {\n return (\n <FieldPrimitive.Label\n data-slot=\"field-label\"\n className={cn(\n \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"title\"\n data-slot=\"field-title\"\n className={cn(\n \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldDescription({\n className,\n ...props\n}: React.ComponentProps<typeof FieldPrimitive.HelperText>) {\n return (\n <FieldPrimitive.HelperText\n data-slot=\"field-description\"\n className={cn(\n \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & {\n children?: React.ReactNode;\n}) {\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"separator\"\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n className,\n )}\n {...props}\n >\n <Separator className=\"absolute inset-0 top-1/2\" />\n {children && (\n <sprawlify.span\n data-scope=\"field\"\n data-part=\"separator-content\"\n className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </sprawlify.span>\n )}\n </sprawlify.div>\n );\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<typeof FieldPrimitive.ErrorText> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\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 (\n <sprawlify.ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {uniqueErrors.map(\n (error, index) =>\n error?.message && <sprawlify.li key={index}>{error.message}</sprawlify.li>,\n )}\n </sprawlify.ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <FieldPrimitive.ErrorText\n role=\"alert\"\n data-scope=\"field\"\n data-part=\"error\"\n data-slot=\"field-error\"\n className={cn(\"text-sm font-normal text-destructive\", className)}\n {...props}\n >\n {content}\n </FieldPrimitive.ErrorText>\n );\n}\n\nfunction FieldRequiredIndicator({\n className,\n ...props\n}: React.ComponentProps<typeof FieldPrimitive.RequiredIndicator>) {\n return (\n <FieldPrimitive.RequiredIndicator\n data-slot=\"field-required-indicator\"\n className={cn(\"text-destructive\", className)}\n {...props}\n />\n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n FieldRequiredIndicator,\n};\n",
|
|
432
446
|
type: "registry:ui",
|
|
433
447
|
path: "field.tsx"
|
|
434
448
|
}]
|
|
@@ -526,6 +540,20 @@ const PRESETS = { monochrome: {
|
|
|
526
540
|
path: "scroll-area.tsx"
|
|
527
541
|
}]
|
|
528
542
|
},
|
|
543
|
+
{
|
|
544
|
+
name: "select",
|
|
545
|
+
dependencies: [
|
|
546
|
+
"react",
|
|
547
|
+
"@/lib/utils",
|
|
548
|
+
"@sprawlify/react",
|
|
549
|
+
"lucide-react"
|
|
550
|
+
],
|
|
551
|
+
files: [{
|
|
552
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { Select as SelectPrimitive } from \"@sprawlify/react/select\";\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectControl = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.Control>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Control\n ref={ref}\n data-slot=\"select-control\"\n className={cn(\"relative flex w-full items-center\", className)}\n {...props}\n >\n {children}\n </SelectPrimitive.Control>\n));\nSelectControl.displayName = \"SelectControl\";\n\nconst SelectTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n data-slot=\"select-trigger\"\n className={cn(\n \"flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent py-2 pr-10 pl-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-150 ease-in-out outline-none\",\n \"data-placeholder-shown:text-muted-foreground\",\n \"hover:border-ring/50\",\n \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20\",\n \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n \"data-invalid:border-destructive data-invalid:focus-visible:ring-destructive/20\",\n className,\n )}\n {...props}\n >\n {children}\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectIndicatorGroup = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof sprawlify.div>\n>(({ className, children, ...props }, ref) => (\n <sprawlify.div\n ref={ref}\n data-slot=\"select-indicator-group\"\n className={cn(\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1 px-2.5\",\n className,\n )}\n {...props}\n >\n {children}\n </sprawlify.div>\n));\nSelectIndicatorGroup.displayName = \"SelectIndicatorGroup\";\n\nconst SelectIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.Indicator>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Indicator\n ref={ref}\n data-slot=\"select-indicator\"\n className={cn(\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-muted-foreground/60 [&_svg]:size-4\",\n className,\n )}\n {...props}\n >\n {children ?? <ChevronsUpDownIcon />}\n </SelectPrimitive.Indicator>\n));\nSelectIndicator.displayName = \"SelectIndicator\";\n\nconst SelectValue = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps<typeof SelectPrimitive.ValueText>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ValueText\n ref={ref}\n data-slot=\"select-value\"\n className={cn(\"line-clamp-1 flex-1 text-left\", className)}\n {...props}\n />\n));\nSelectValue.displayName = \"SelectValue\";\n\nconst SelectPositioner = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.Positioner>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Positioner\n ref={ref}\n data-slot=\"select-positioner\"\n className={cn(\"outline-none\", className)}\n {...props}\n />\n));\nSelectPositioner.displayName = \"SelectPositioner\";\n\nconst SelectContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n <Portal>\n <SelectPrimitive.Positioner data-slot=\"select-positioner\" className=\"outline-none\">\n <SelectPrimitive.Content\n ref={ref}\n data-slot=\"select-content\"\n className={cn(\n \"z-50 flex flex-col gap-0.5 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\n \"min-w-(--reference-width)\",\n \"max-h-[min(var(--available-height,300px),300px)] overflow-y-auto\",\n \"origin-(--transform-origin)\",\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%]\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]\",\n className,\n )}\n {...props}\n >\n {children}\n </SelectPrimitive.Content>\n </SelectPrimitive.Positioner>\n </Portal>\n));\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectHiddenSelect = SelectPrimitive.HiddenSelect;\n\nconst SelectItem = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n data-slot=\"select-item\"\n className={cn(\n \"relative flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 pr-8 text-sm outline-none select-none\",\n \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n \"data-[state=checked]:font-medium\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n {children}\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\nconst SelectItemText = SelectPrimitive.ItemText;\n\nconst SelectItemIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.ItemIndicator>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.ItemIndicator\n ref={ref}\n data-slot=\"select-item-indicator\"\n className={cn(\"absolute right-2 flex size-4 items-center justify-center\", className)}\n {...props}\n >\n {children ?? <CheckIcon />}\n </SelectPrimitive.ItemIndicator>\n));\nSelectItemIndicator.displayName = \"SelectItemIndicator\";\n\nconst SelectItemGroup = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.ItemGroup>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ItemGroup\n ref={ref}\n data-slot=\"select-item-group\"\n className={cn(\"flex flex-col\", className)}\n {...props}\n />\n));\nSelectItemGroup.displayName = \"SelectItemGroup\";\n\nconst SelectItemGroupLabel = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof SelectPrimitive.ItemGroupLabel>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ItemGroupLabel\n ref={ref}\n data-slot=\"select-item-group-label\"\n className={cn(\n \"px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground\",\n className,\n )}\n {...props}\n />\n));\nSelectItemGroupLabel.displayName = \"SelectItemGroupLabel\";\n\nconst SelectLabel = React.forwardRef<\n HTMLLabelElement,\n React.ComponentProps<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n data-slot=\"select-label\"\n className={cn(\n \"text-sm leading-none font-medium select-none data-disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\nconst SelectSeparator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof sprawlify.div>\n>(({ className, ...props }, ref) => (\n <sprawlify.div\n ref={ref}\n data-slot=\"select-separator\"\n className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n {...props}\n />\n));\nSelectSeparator.displayName = \"SelectSeparator\";\n\nconst SelectContext = SelectPrimitive.Context;\nconst SelectRootProvider = SelectPrimitive.RootProvider;\n\nexport {\n Select,\n SelectControl,\n SelectTrigger,\n SelectIndicator,\n SelectValue,\n SelectPositioner,\n SelectContent,\n SelectHiddenSelect,\n SelectItem,\n SelectItemText,\n SelectItemIndicator,\n SelectItemGroup,\n SelectItemGroupLabel,\n SelectLabel,\n SelectSeparator,\n SelectIndicatorGroup,\n SelectContext,\n SelectRootProvider,\n};\n",
|
|
553
|
+
type: "registry:ui",
|
|
554
|
+
path: "select.tsx"
|
|
555
|
+
}]
|
|
556
|
+
},
|
|
529
557
|
{
|
|
530
558
|
name: "separator",
|
|
531
559
|
dependencies: [
|
|
@@ -539,6 +567,19 @@ const PRESETS = { monochrome: {
|
|
|
539
567
|
path: "separator.tsx"
|
|
540
568
|
}]
|
|
541
569
|
},
|
|
570
|
+
{
|
|
571
|
+
name: "switch",
|
|
572
|
+
dependencies: [
|
|
573
|
+
"react",
|
|
574
|
+
"@/lib/utils",
|
|
575
|
+
"@sprawlify/react"
|
|
576
|
+
],
|
|
577
|
+
files: [{
|
|
578
|
+
content: "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Switch as SwitchPrimitive } from \"@sprawlify/react/switch\"\r\n\r\nconst Switch = React.forwardRef<\r\n HTMLLabelElement,\r\n React.ComponentProps<typeof SwitchPrimitive.Root> & {\r\n size?: \"sm\" | \"default\"\r\n }\r\n>(({ className, size = \"default\", ...props }, ref) => (\r\n <SwitchPrimitive.Root\r\n ref={ref}\r\n data-slot=\"switch\"\r\n data-size={size}\r\n className={cn(\r\n \"group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSwitch.displayName = \"Switch\"\r\n\r\nconst SwitchControl = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentProps<typeof SwitchPrimitive.Control>\r\n>(({ className, ...props }, ref) => (\r\n <SwitchPrimitive.Control\r\n ref={ref}\r\n data-slot=\"switch-control\"\r\n className={cn(\r\n \"inline-flex h-5 group-data-[size=sm]/switch:h-4 w-9 group-data-[size=sm]/switch:w-7 shrink-0 cursor-pointer items-center rounded-full border ring-2 border-transparent ring-transparent transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 dark:data-[state=unchecked]:bg-input/80\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSwitchControl.displayName = \"SwitchControl\"\r\n\r\nconst SwitchThumb = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentProps<typeof SwitchPrimitive.Thumb>\r\n>(({ className, ...props }, ref) => (\r\n <SwitchPrimitive.Thumb\r\n ref={ref}\r\n data-slot=\"switch-thumb\"\r\n className={cn(\r\n \"pointer-events-none block size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSwitchThumb.displayName = \"SwitchThumb\"\r\n\r\nconst SwitchLabel = React.forwardRef<\r\n HTMLSpanElement,\r\n React.ComponentProps<typeof SwitchPrimitive.Label>\r\n>(({ className, ...props }, ref) => (\r\n <SwitchPrimitive.Label\r\n ref={ref}\r\n data-slot=\"switch-label\"\r\n className={cn(\r\n \"text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nSwitchLabel.displayName = \"SwitchLabel\"\r\n\r\nconst SwitchHiddenInput = SwitchPrimitive.HiddenInput\r\n\r\nconst SwitchContext = SwitchPrimitive.Context\r\nconst SwitchRootProvider = SwitchPrimitive.RootProvider\r\n\r\nexport {\r\n Switch,\r\n SwitchControl,\r\n SwitchThumb,\r\n SwitchLabel,\r\n SwitchHiddenInput,\r\n SwitchContext,\r\n SwitchRootProvider,\r\n}",
|
|
579
|
+
type: "registry:ui",
|
|
580
|
+
path: "switch.tsx"
|
|
581
|
+
}]
|
|
582
|
+
},
|
|
542
583
|
{
|
|
543
584
|
name: "table",
|
|
544
585
|
dependencies: [
|
|
@@ -616,7 +657,7 @@ const PRESETS = { monochrome: {
|
|
|
616
657
|
"tailwind-scrollbar": "^4.0.2",
|
|
617
658
|
"tw-animate-css": "^1.4.0"
|
|
618
659
|
},
|
|
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(
|
|
660
|
+
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(100% 0 0);\n --foreground: oklch(14.5% 0 0);\n --card: oklch(100% 0 0);\n --card-foreground: oklch(14.5% 0 0);\n --popover: oklch(100% 0 0);\n --popover-foreground: oklch(14.5% 0 0);\n --primary: oklch(15.3% 0.006 107.1);\n --primary-foreground: oklch(100% 0 0);\n --secondary: oklch(98.8% 0.003 106.5);\n --secondary-foreground: oklch(15.3% 0.006 107.1);\n --muted: oklch(97% 0 0);\n --muted-foreground: oklch(55.6% 0 0);\n --accent: oklch(97% 0 0);\n --accent-foreground: oklch(20.5% 0 0);\n --destructive: oklch(57.7% 0.245 27.325);\n --destructive-foreground: oklch(57.7% 0.245 27.325);\n --border: oklch(92.2% 0 0);\n --input: oklch(92.2% 0 0);\n --ring: oklch(70.8% 0 0);\n --radius: 0.625rem;\n --sidebar: oklch(98.5% 0 0);\n --sidebar-foreground: oklch(14.5% 0 0);\n --sidebar-primary: oklch(20.5% 0 0);\n --sidebar-primary-foreground: oklch(98.5% 0 0);\n --sidebar-accent: oklch(97% 0 0);\n --sidebar-accent-foreground: oklch(20.5% 0 0);\n --sidebar-border: oklch(92.2% 0 0);\n --sidebar-ring: oklch(70.8% 0 0);\n}\n\n.dark {\n --background: oklch(14.5% 0 0);\n --foreground: oklch(98.5% 0 0);\n --card: oklch(14.5% 0 0);\n --card-foreground: oklch(98.5% 0 0);\n --popover: oklch(14.5% 0 0);\n --popover-foreground: oklch(98.5% 0 0);\n --primary: oklch(88% 0.011 106.6);\n --primary-foreground: oklch(15.3% 0.006 107.1);\n --secondary: oklch(28.6% 0.016 107.4);\n --secondary-foreground: oklch(98.5% 0 0);\n --muted: oklch(26.9% 0 0);\n --muted-foreground: oklch(70.8% 0 0);\n --accent: oklch(26.9% 0 0);\n --accent-foreground: oklch(98.5% 0 0);\n --destructive: oklch(39.6% 0.141 25.723);\n --destructive-foreground: oklch(63.7% 0.237 25.331);\n --border: oklch(26.9% 0 0);\n --input: oklch(26.9% 0 0);\n --ring: oklch(43.9% 0 0);\n --sidebar: oklch(20.5% 0 0);\n --sidebar-foreground: oklch(98.5% 0 0);\n --sidebar-primary: oklch(48.8% 0.243 264.376);\n --sidebar-primary-foreground: oklch(98.5% 0 0);\n --sidebar-accent: oklch(26.9% 0 0);\n --sidebar-accent-foreground: oklch(98.5% 0 0);\n --sidebar-border: oklch(26.9% 0 0);\n --sidebar-ring: oklch(43.9% 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 --color-neutral-50: oklch(98.8% 0.003 106.5);\n --color-neutral-100: oklch(96.6% 0.005 106.5);\n --color-neutral-200: oklch(93% 0.007 106.5);\n --color-neutral-300: oklch(88% 0.011 106.6);\n --color-neutral-400: oklch(73.7% 0.021 106.9);\n --color-neutral-500: oklch(58% 0.031 107.3);\n --color-neutral-600: oklch(46.6% 0.025 107.3);\n --color-neutral-700: oklch(39.4% 0.023 107.4);\n --color-neutral-800: oklch(28.6% 0.016 107.4);\n --color-neutral-900: oklch(22.8% 0.013 107.4);\n --color-neutral-950: oklch(15.3% 0.006 107.1);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n\n html {\n @apply bg-neutral-100 text-foreground;\n }\n\n html.dark, html[data-theme=\"dark\"] {\n @apply bg-neutral-950 text-foreground;\n }\n\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n" },
|
|
620
661
|
items: [
|
|
621
662
|
{
|
|
622
663
|
name: "accordion",
|
|
@@ -751,7 +792,7 @@ const PRESETS = { monochrome: {
|
|
|
751
792
|
"solid-js"
|
|
752
793
|
],
|
|
753
794
|
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};",
|
|
795
|
+
content: "import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DatePicker as DatePickerPrimitive } from \"@sprawlify/solid/date-picker\";\nimport type { DateValue } from \"@internationalized/date\";\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-solid\";\nimport { splitProps, type ComponentProps, type JSX, Show, For } from \"solid-js\";\n\nfunction CalendarViewHeader(props: { buttonVariant?: ComponentProps<typeof Button>[\"variant\"] }) {\n const [local] = splitProps(props, [\"buttonVariant\"]);\n\n const buttonVariant = () => local.buttonVariant || \"ghost\";\n\n return (\n <DatePickerPrimitive.ViewControl class=\"relative flex w-full items-center justify-between gap-1\">\n <Button\n variant={buttonVariant()}\n size=\"icon\"\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild={(props) => (\n <DatePickerPrimitive.PrevTrigger {...props()}>\n <ChevronLeftIcon class=\"size-4\" />\n </DatePickerPrimitive.PrevTrigger>\n )}\n />\n\n <DatePickerPrimitive.ViewTrigger class=\"flex h-(--cell-size) items-center justify-center text-sm font-medium select-none\">\n <DatePickerPrimitive.RangeText />\n </DatePickerPrimitive.ViewTrigger>\n\n <Button\n variant={buttonVariant()}\n size=\"icon\"\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild={(props) => (\n <DatePickerPrimitive.NextTrigger {...props()}>\n <ChevronRightIcon class=\"size-4\" />\n </DatePickerPrimitive.NextTrigger>\n )}\n />\n </DatePickerPrimitive.ViewControl>\n );\n}\n\nfunction CalendarSelectHeader(props: {\n buttonVariant?: ComponentProps<typeof Button>[\"variant\"];\n class?: string;\n}) {\n const [local, others] = splitProps(props, [\"buttonVariant\", \"class\"]);\n\n const buttonVariant = () => local.buttonVariant || \"ghost\";\n\n return (\n <DatePickerPrimitive.ViewControl\n class={cn(\"relative flex w-full items-center justify-between gap-1\", local.class)}\n {...others}\n >\n <Button\n variant={buttonVariant()}\n size=\"icon\"\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild={(props) => (\n <DatePickerPrimitive.PrevTrigger {...props()}>\n <ChevronLeftIcon class=\"size-4\" />\n </DatePickerPrimitive.PrevTrigger>\n )}\n />\n\n <div class=\"flex items-center gap-1\">\n <span class=\"relative\">\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\" />\n <ChevronDownIcon class=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n </span>\n <span class=\"relative\">\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\" />\n <ChevronDownIcon class=\"pointer-events-none absolute top-1/2 right-1 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n </span>\n </div>\n\n <Button\n variant={buttonVariant()}\n size=\"icon\"\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n asChild={(props) => (\n <DatePickerPrimitive.NextTrigger {...props()}>\n <ChevronRightIcon class=\"size-4\" />\n </DatePickerPrimitive.NextTrigger>\n )}\n />\n </DatePickerPrimitive.ViewControl>\n );\n}\n\nfunction CalendarDayView(props: {\n showOutsideDays?: boolean;\n header?: JSX.Element;\n cell?: (day: DateValue) => JSX.Element;\n}) {\n return (\n <DatePickerPrimitive.View view=\"day\" class=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => (\n <>\n <Show when={props.header} fallback={<CalendarSelectHeader />}>\n {props.header}\n </Show>\n <CalendarDayTable\n weeks={api().weeks}\n weekDays={api().weekDays}\n focusedMonth={api().focusedValue.month}\n showOutsideDays={props.showOutsideDays ?? true}\n cell={props.cell}\n />\n </>\n )}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction CalendarMonthView(props: {\n header?: JSX.Element;\n cell?: (month: { label: string; value: number }) => JSX.Element;\n}) {\n return (\n <DatePickerPrimitive.View view=\"month\" class=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => (\n <>\n <Show when={props.header} fallback={<CalendarSelectHeader />}>\n {props.header}\n </Show>\n <DatePickerPrimitive.Table class=\"w-full border-collapse\">\n <DatePickerPrimitive.TableBody>\n <For each={api().getMonthsGrid({ columns: 4, format: \"short\" })}>\n {(months) => (\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\n <For each={months}>\n {(month) => (\n <DatePickerPrimitive.TableCell\n value={month.value}\n class=\"flex-1 p-0 text-center\"\n >\n <DatePickerPrimitive.TableCellTrigger>\n <Button variant=\"ghost\" class=\"w-full text-sm font-normal\">\n {props.cell ? props.cell(month) : month.label}\n </Button>\n </DatePickerPrimitive.TableCellTrigger>\n </DatePickerPrimitive.TableCell>\n )}\n </For>\n </DatePickerPrimitive.TableRow>\n )}\n </For>\n </DatePickerPrimitive.TableBody>\n </DatePickerPrimitive.Table>\n </>\n )}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction CalendarYearView(props: {\n header?: JSX.Element;\n cell?: (year: { label: string; value: number }) => JSX.Element;\n}) {\n return (\n <DatePickerPrimitive.View view=\"year\" class=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => (\n <>\n <Show when={props.header} fallback={<CalendarSelectHeader />}>\n {props.header}\n </Show>\n <DatePickerPrimitive.Table class=\"w-full border-collapse\">\n <DatePickerPrimitive.TableBody>\n <For each={api().getYearsGrid({ columns: 4 })}>\n {(years) => (\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\n <For each={years}>\n {(year) => (\n <DatePickerPrimitive.TableCell\n value={year.value}\n class=\"flex-1 p-0 text-center\"\n >\n <DatePickerPrimitive.TableCellTrigger>\n <Button variant=\"ghost\" class=\"w-full text-sm font-normal\">\n {props.cell ? props.cell(year) : year.label}\n </Button>\n </DatePickerPrimitive.TableCellTrigger>\n </DatePickerPrimitive.TableCell>\n )}\n </For>\n </DatePickerPrimitive.TableRow>\n )}\n </For>\n </DatePickerPrimitive.TableBody>\n </DatePickerPrimitive.Table>\n </>\n )}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction CalendarDayButton(props: ComponentProps<typeof DatePickerPrimitive.TableCellTrigger>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <DatePickerPrimitive.TableCellTrigger\n class={cn(\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\",\n \"hover:bg-accent hover:text-accent-foreground\",\n \"data-[selected]:bg-primary data-[selected]:text-primary-foreground\",\n \"data-[today]:bg-accent data-[today]:text-accent-foreground\",\n \"data-[outside-range]:text-muted-foreground/50\",\n \"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50\",\n \"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[unavailable]:opacity-40\",\n \"data-[in-range]:rounded-none data-[in-range]:bg-accent data-[in-range]:text-accent-foreground\",\n \"data-[range-start]:rounded-l-(--cell-radius) data-[range-start]:bg-primary data-[range-start]:text-primary-foreground\",\n \"data-[range-end]:rounded-r-(--cell-radius) data-[range-end]:bg-primary data-[range-end]:text-primary-foreground\",\n \"focus-visible:relative focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n local.class,\n )}\n {...others}\n >\n {local.children}\n </DatePickerPrimitive.TableCellTrigger>\n );\n}\n\nfunction CalendarDayTable(props: {\n weeks: DateValue[][];\n weekDays: { short: string }[];\n focusedMonth: number;\n showOutsideDays?: boolean;\n visibleRange?: { start: DateValue; end: DateValue };\n cell?: (day: DateValue) => JSX.Element;\n}) {\n return (\n <DatePickerPrimitive.Table class=\"w-full border-collapse\">\n <DatePickerPrimitive.TableHead>\n <DatePickerPrimitive.TableRow class=\"flex\">\n <For each={props.weekDays}>\n {(weekDay) => (\n <DatePickerPrimitive.TableHeader class=\"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\">\n {weekDay.short}\n </DatePickerPrimitive.TableHeader>\n )}\n </For>\n </DatePickerPrimitive.TableRow>\n </DatePickerPrimitive.TableHead>\n <DatePickerPrimitive.TableBody>\n <For each={props.weeks}>\n {(week) => (\n <DatePickerPrimitive.TableRow class=\"mt-2 flex w-full\">\n <For each={week}>\n {(day) => {\n const isOutside = day.month !== props.focusedMonth;\n const showOutsideDays = props.showOutsideDays ?? true;\n\n if (!showOutsideDays && isOutside) {\n return <td class=\"flex-1 p-0\" aria-hidden />;\n }\n\n return (\n <DatePickerPrimitive.TableCell\n value={day}\n visibleRange={props.visibleRange}\n class={cn(\n \"group/day relative aspect-square h-full w-full flex-1 rounded-(--cell-radius) p-0 text-center select-none\",\n \"[&:last-child[data-selected]_div]:rounded-r-(--cell-radius)\",\n \"[&:first-child[data-selected]_div]:rounded-l-(--cell-radius)\",\n )}\n >\n <CalendarDayButton>\n {props.cell ? props.cell(day) : day.day}\n </CalendarDayButton>\n </DatePickerPrimitive.TableCell>\n );\n }}\n </For>\n </DatePickerPrimitive.TableRow>\n )}\n </For>\n </DatePickerPrimitive.TableBody>\n </DatePickerPrimitive.Table>\n );\n}\n\nfunction CalendarDualMonthDayView(props: {\n showOutsideDays?: boolean;\n cell?: (day: DateValue) => JSX.Element;\n}) {\n return (\n <DatePickerPrimitive.View view=\"day\" class=\"flex flex-col gap-4\">\n <DatePickerPrimitive.Context>\n {(api) => {\n const offset = api().getOffset({ months: 1 });\n return (\n <div class=\"flex gap-4 flex-row\">\n {/* First month */}\n <div class=\"flex flex-col gap-4\">\n <div class=\"relative flex w-full items-center justify-between gap-1\">\n <DatePickerPrimitive.PrevTrigger>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n >\n <ChevronLeftIcon class=\"size-4\" />\n </Button>\n </DatePickerPrimitive.PrevTrigger>\n <span class=\"text-sm font-medium select-none\">\n {api().visibleRangeText.start}\n </span>\n <div class=\"size-(--cell-size)\" />\n </div>\n <CalendarDayTable\n weeks={api().weeks}\n weekDays={api().weekDays}\n focusedMonth={api().focusedValue.month}\n showOutsideDays={props.showOutsideDays}\n cell={props.cell}\n />\n </div>\n {/* Second month */}\n <div class=\"flex flex-col gap-4\">\n <div class=\"relative flex w-full items-center justify-between gap-1\">\n <div class=\"size-(--cell-size)\" />\n <span class=\"text-sm font-medium select-none\">{api().visibleRangeText.end}</span>\n <DatePickerPrimitive.NextTrigger>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n class=\"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\"\n >\n <ChevronRightIcon class=\"size-4\" />\n </Button>\n </DatePickerPrimitive.NextTrigger>\n </div>\n <CalendarDayTable\n weeks={offset.weeks}\n weekDays={api().weekDays}\n focusedMonth={offset.visibleRange.start.month}\n showOutsideDays={props.showOutsideDays}\n visibleRange={offset.visibleRange}\n cell={props.cell}\n />\n </div>\n </div>\n );\n }}\n </DatePickerPrimitive.Context>\n </DatePickerPrimitive.View>\n );\n}\n\nfunction Calendar(\n props: Omit<ComponentProps<typeof DatePickerPrimitive.Root>, \"inline\"> & {\n class?: string;\n showOutsideDays?: boolean;\n children?: JSX.Element;\n numOfMonths?: number;\n },\n) {\n const [local, others] = splitProps(props, [\n \"class\",\n \"showOutsideDays\",\n \"children\",\n \"numOfMonths\",\n ]);\n\n const isDualMonth = () => local.numOfMonths && local.numOfMonths >= 2;\n const showOutsideDays = () => local.showOutsideDays ?? true;\n\n return (\n <DatePickerPrimitive.Root inline numOfMonths={local.numOfMonths} {...others}>\n <div\n data-slot=\"calendar\"\n class={cn(\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\",\n local.class,\n )}\n >\n <Show\n when={local.children}\n fallback={\n <>\n <Show\n when={isDualMonth()}\n fallback={<CalendarDayView showOutsideDays={showOutsideDays()} />}\n >\n <CalendarDualMonthDayView showOutsideDays={showOutsideDays()} />\n </Show>\n <CalendarMonthView />\n <CalendarYearView />\n </>\n }\n >\n {local.children}\n </Show>\n </div>\n </DatePickerPrimitive.Root>\n );\n}\n\nconst CalendarPresetTrigger = DatePickerPrimitive.PresetTrigger;\n\nexport {\n Calendar,\n CalendarDayView,\n CalendarDualMonthDayView,\n CalendarDayTable,\n CalendarMonthView,\n CalendarYearView,\n CalendarViewHeader,\n CalendarSelectHeader,\n CalendarDayButton,\n CalendarPresetTrigger,\n};\n",
|
|
755
796
|
type: "registry:ui",
|
|
756
797
|
path: "calendar.tsx"
|
|
757
798
|
}]
|
|
@@ -769,6 +810,21 @@ const PRESETS = { monochrome: {
|
|
|
769
810
|
path: "card.tsx"
|
|
770
811
|
}]
|
|
771
812
|
},
|
|
813
|
+
{
|
|
814
|
+
name: "carousel",
|
|
815
|
+
dependencies: [
|
|
816
|
+
"@/lib/utils",
|
|
817
|
+
"@/components/ui/button",
|
|
818
|
+
"@sprawlify/solid",
|
|
819
|
+
"lucide-solid",
|
|
820
|
+
"solid-js"
|
|
821
|
+
],
|
|
822
|
+
files: [{
|
|
823
|
+
content: "import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/solid/carousel\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { For, splitProps } from \"solid-js\";\n\nfunction Carousel(props: ComponentProps<typeof CarouselPrimitive.Root>) {\n const [local, others] = splitProps(props, [\"class\", \"spacing\", \"loop\", \"page\"]);\n\n const spacing = () => local.spacing ?? \"1rem\";\n const loop = () => local.loop ?? false;\n\n return (\n <CarouselPrimitive.Root\n data-slot=\"carousel\"\n spacing={spacing()}\n loop={loop()}\n page={local.page}\n class={cn(\n \"relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction CarouselContent(props: ComponentProps<typeof CarouselPrimitive.ItemGroup>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CarouselPrimitive.ItemGroup\n data-slot=\"carousel-content\"\n class={cn(\n \"flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction CarouselItem(props: ComponentProps<typeof CarouselPrimitive.Item>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CarouselPrimitive.Item\n data-slot=\"carousel-item\"\n class={cn(\"min-w-0 shrink-0 grow-0 basis-full\", local.class)}\n {...others}\n />\n );\n}\n\nfunction CarouselControl(props: ComponentProps<typeof CarouselPrimitive.Control>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CarouselPrimitive.Control\n data-slot=\"carousel-control\"\n class={cn(\n \"flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction CarouselPrevious(props: ComponentProps<typeof Button>) {\n const [local, others] = splitProps(props, [\"class\", \"children\", \"variant\", \"size\"]);\n\n const variant = () => local.variant ?? \"outline\";\n const size = () => local.size ?? \"icon-sm\";\n\n return (\n <CarouselPrimitive.PrevTrigger\n asChild={(triggerProps) => (\n <Button\n data-slot=\"carousel-previous\"\n variant={variant()}\n size={size()}\n class={cn(\"touch-manipulation rounded-full disabled:opacity-50\", local.class)}\n {...triggerProps()}\n {...others}\n >\n {local.children ?? <ChevronLeftIcon class=\"cn-rtl-flip size-4\" />}\n <span class=\"sr-only\">Previous slide</span>\n </Button>\n )}\n />\n );\n}\n\nfunction CarouselNext(props: ComponentProps<typeof Button>) {\n const [local, others] = splitProps(props, [\"class\", \"children\", \"variant\", \"size\"]);\n\n const variant = () => local.variant ?? \"outline\";\n const size = () => local.size ?? \"icon-sm\";\n\n return (\n <CarouselPrimitive.NextTrigger\n asChild={(triggerProps) => (\n <Button\n data-slot=\"carousel-next\"\n variant={variant()}\n size={size()}\n class={cn(\"touch-manipulation rounded-full disabled:opacity-50\", local.class)}\n {...triggerProps()}\n {...others}\n >\n {local.children ?? <ChevronRightIcon class=\"cn-rtl-flip size-4\" />}\n <span class=\"sr-only\">Next slide</span>\n </Button>\n )}\n />\n );\n}\n\nfunction CarouselIndicatorGroup(props: ComponentProps<typeof CarouselPrimitive.IndicatorGroup>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CarouselPrimitive.IndicatorGroup\n data-slot=\"carousel-indicator-group\"\n class={cn(\"flex justify-center gap-2 data-[orientation=vertical]:flex-col\", local.class)}\n {...others}\n />\n );\n}\n\nfunction CarouselIndicator(props: ComponentProps<typeof CarouselPrimitive.Indicator>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CarouselPrimitive.Indicator\n data-slot=\"carousel-indicator\"\n class={cn(\n \"size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction CarouselIndicators(\n props: Omit<ComponentProps<typeof CarouselPrimitive.Indicator>, \"index\">,\n) {\n return (\n <CarouselPrimitive.Context>\n {(api) => (\n <CarouselIndicatorGroup>\n <For each={api().pageSnapPoints}>\n {(_, index) => <CarouselIndicator index={index()} {...props} />}\n </For>\n </CarouselIndicatorGroup>\n )}\n </CarouselPrimitive.Context>\n );\n}\n\nconst CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;\nconst CarouselContext = CarouselPrimitive.Context;\nconst CarouselRootProvider = CarouselPrimitive.RootProvider;\n\nexport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselControl,\n CarouselPrevious,\n CarouselNext,\n CarouselIndicatorGroup,\n CarouselIndicator,\n CarouselIndicators,\n CarouselAutoplayTrigger,\n CarouselContext,\n CarouselRootProvider,\n};\n\nexport { useCarousel, useCarouselContext } from \"@sprawlify/solid/carousel\";\n",
|
|
824
|
+
type: "registry:ui",
|
|
825
|
+
path: "carousel.tsx"
|
|
826
|
+
}]
|
|
827
|
+
},
|
|
772
828
|
{
|
|
773
829
|
name: "checkbox",
|
|
774
830
|
dependencies: [
|
|
@@ -840,15 +896,14 @@ const PRESETS = { monochrome: {
|
|
|
840
896
|
{
|
|
841
897
|
name: "field",
|
|
842
898
|
dependencies: [
|
|
843
|
-
"
|
|
899
|
+
"solid-js",
|
|
844
900
|
"@/lib/utils",
|
|
845
|
-
"@/components/ui/label",
|
|
846
901
|
"@/components/ui/separator",
|
|
847
902
|
"@sprawlify/solid",
|
|
848
|
-
"
|
|
903
|
+
"class-variance-authority"
|
|
849
904
|
],
|
|
850
905
|
files: [{
|
|
851
|
-
content: "import {
|
|
906
|
+
content: "import { createMemo, type ComponentProps, For } from \"solid-js\";\nimport { splitProps, Show } from \"solid-js\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { Field as FieldPrimitive } from \"@sprawlify/solid/field\";\nimport { Fieldset as FieldsetPrimitive } from \"@sprawlify/solid/fieldset\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nfunction FieldSet(props: ComponentProps<typeof FieldsetPrimitive.Root>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <FieldsetPrimitive.Root\n data-slot=\"field-set\"\n class={cn(\n \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction FieldLegend(\n props: ComponentProps<typeof FieldsetPrimitive.Legend> & {\n variant?: \"legend\" | \"label\";\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"variant\"]);\n const variant = () => local.variant ?? \"legend\";\n\n return (\n <FieldsetPrimitive.Legend\n data-slot=\"field-legend\"\n data-variant={variant()}\n class={cn(\n \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction FieldGroup(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"group\"\n data-slot=\"field-group\"\n class={cn(\n \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\", {\n variants: {\n orientation: {\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto\",\n responsive:\n \"@md/field-group:has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n});\n\nfunction Field(\n props: ComponentProps<typeof FieldPrimitive.Root> & VariantProps<typeof fieldVariants>,\n) {\n const [local, others] = splitProps(props, [\"class\", \"orientation\"]);\n const orientation = () => local.orientation ?? \"vertical\";\n\n return (\n <FieldPrimitive.Root\n data-slot=\"field\"\n data-orientation={orientation()}\n class={cn(fieldVariants({ orientation: orientation() }), local.class)}\n {...others}\n />\n );\n}\n\nfunction FieldContent(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"content\"\n data-slot=\"field-content\"\n class={cn(\"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\", local.class)}\n {...others}\n />\n );\n}\n\nfunction FieldLabel(props: ComponentProps<typeof FieldPrimitive.Label>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <FieldPrimitive.Label\n data-slot=\"field-label\"\n class={cn(\n \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction FieldTitle(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"title\"\n data-slot=\"field-title\"\n class={cn(\n \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction FieldDescription(props: ComponentProps<typeof FieldPrimitive.HelperText>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <FieldPrimitive.HelperText\n data-slot=\"field-description\"\n class={cn(\n \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction FieldSeparator(props: ComponentProps<typeof sprawlify.div> & { children?: any }) {\n const [local, others] = splitProps(props, [\"children\", \"class\"]);\n\n return (\n <sprawlify.div\n data-scope=\"field\"\n data-part=\"separator\"\n data-slot=\"field-separator\"\n data-content={!!local.children}\n class={cn(\n \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n local.class,\n )}\n {...others}\n >\n <Separator class=\"absolute inset-0 top-1/2\" />\n <Show when={local.children}>\n <sprawlify.span\n class=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n data-slot=\"field-separator-content\"\n >\n {local.children}\n </sprawlify.span>\n </Show>\n </sprawlify.div>\n );\n}\n\nfunction FieldError(\n props: ComponentProps<typeof FieldPrimitive.ErrorText> & {\n errors?: Array<{ message?: string } | undefined>;\n },\n) {\n const [local, others] = splitProps(props, [\"children\", \"errors\", \"class\"]);\n\n const content = createMemo(() => {\n if (local.children) {\n return local.children;\n }\n\n if (!local.errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(local.errors.map((error) => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length === 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <sprawlify.ul class=\"ml-4 flex list-disc flex-col gap-1\">\n <For each={uniqueErrors}>\n {(error) => error?.message && <sprawlify.li>{error.message}</sprawlify.li>}\n </For>\n </sprawlify.ul>\n );\n });\n\n return (\n <Show when={content()}>\n <FieldPrimitive.ErrorText\n data-slot=\"field-error\"\n class={cn(\"text-sm font-normal text-destructive\", local.class)}\n {...others}\n >\n {content()}\n </FieldPrimitive.ErrorText>\n </Show>\n );\n}\n\nfunction FieldRequiredIndicator(props: ComponentProps<typeof FieldPrimitive.RequiredIndicator>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <FieldPrimitive.RequiredIndicator\n data-slot=\"field-required-indicator\"\n class={cn(\"text-destructive\", local.class)}\n {...others}\n />\n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n FieldRequiredIndicator,\n};\n",
|
|
852
907
|
type: "registry:ui",
|
|
853
908
|
path: "field.tsx"
|
|
854
909
|
}]
|
|
@@ -951,6 +1006,21 @@ const PRESETS = { monochrome: {
|
|
|
951
1006
|
path: "scroll-area.tsx"
|
|
952
1007
|
}]
|
|
953
1008
|
},
|
|
1009
|
+
{
|
|
1010
|
+
name: "select",
|
|
1011
|
+
dependencies: [
|
|
1012
|
+
"@/lib/utils",
|
|
1013
|
+
"@sprawlify/solid",
|
|
1014
|
+
"lucide-solid",
|
|
1015
|
+
"solid-js",
|
|
1016
|
+
"solid-js/web"
|
|
1017
|
+
],
|
|
1018
|
+
files: [{
|
|
1019
|
+
content: "import { cn } from \"@/lib/utils\";\r\nimport { sprawlify } from \"@sprawlify/solid\";\r\nimport { Select as SelectPrimitive } from \"@sprawlify/solid/select\";\r\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-solid\";\r\nimport { splitProps, type ComponentProps } from \"solid-js\";\r\nimport { Portal } from \"solid-js/web\";\r\n\r\nfunction Select(props: ComponentProps<typeof SelectPrimitive.Root>) {\r\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\r\n}\r\n\r\nfunction SelectControl(props: ComponentProps<typeof SelectPrimitive.Control>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <SelectPrimitive.Control\r\n data-slot=\"select-control\"\r\n class={cn(\"relative flex w-full items-center\", local.class)}\r\n {...others}\r\n >\r\n {local.children}\r\n </SelectPrimitive.Control>\r\n );\r\n}\r\n\r\nfunction SelectTrigger(props: ComponentProps<typeof SelectPrimitive.Trigger>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <SelectPrimitive.Trigger\r\n data-slot=\"select-trigger\"\r\n class={cn(\r\n \"flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent py-2 pr-10 pl-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-150 ease-in-out outline-none\",\r\n \"data-placeholder-shown:text-muted-foreground\",\r\n \"hover:border-ring/50\",\r\n \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20\",\r\n \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n \"data-invalid:border-destructive data-invalid:focus-visible:ring-destructive/20\",\r\n local.class,\r\n )}\r\n {...others}\r\n >\r\n <div class=\"flex gap-2\">{local.children}</div>\r\n </SelectPrimitive.Trigger>\r\n );\r\n}\r\n\r\nfunction SelectIndicatorGroup(props: ComponentProps<typeof sprawlify.div>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <sprawlify.div\r\n data-slot=\"select-indicator-group\"\r\n class={cn(\r\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1 px-2.5\",\r\n local.class,\r\n )}\r\n {...others}\r\n >\r\n {local.children}\r\n </sprawlify.div>\r\n );\r\n}\r\n\r\nfunction SelectIndicator(props: ComponentProps<typeof SelectPrimitive.Indicator>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <SelectPrimitive.Indicator\r\n data-slot=\"select-indicator\"\r\n class={cn(\r\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-muted-foreground/60 [&_svg]:size-4\",\r\n local.class,\r\n )}\r\n {...others}\r\n >\r\n {local.children ?? <ChevronsUpDownIcon />}\r\n </SelectPrimitive.Indicator>\r\n );\r\n}\r\n\r\nfunction SelectValue(props: ComponentProps<typeof SelectPrimitive.ValueText>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SelectPrimitive.ValueText\r\n data-slot=\"select-value\"\r\n class={cn(\"line-clamp-1 flex-1 text-left\", local.class)}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SelectPositioner(props: ComponentProps<typeof SelectPrimitive.Positioner>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SelectPrimitive.Positioner\r\n data-slot=\"select-positioner\"\r\n class={cn(\"outline-none\", local.class)}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SelectContent(props: ComponentProps<typeof SelectPrimitive.Content>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <Portal>\r\n <SelectPrimitive.Positioner data-slot=\"select-positioner\" class=\"outline-none\">\r\n <SelectPrimitive.Content\r\n data-slot=\"select-content\"\r\n class={cn(\r\n \"z-50 flex flex-col gap-0.5 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\r\n \"min-w-(--reference-width)\",\r\n \"max-h-[min(var(--available-height,300px),300px)] overflow-y-auto\",\r\n \"origin-(--transform-origin)\",\r\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%]\",\r\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]\",\r\n local.class,\r\n )}\r\n {...others}\r\n >\r\n {local.children}\r\n </SelectPrimitive.Content>\r\n </SelectPrimitive.Positioner>\r\n </Portal>\r\n );\r\n}\r\n\r\nconst SelectHiddenSelect = SelectPrimitive.HiddenSelect;\r\n\r\nfunction SelectItem(props: ComponentProps<typeof SelectPrimitive.Item>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <SelectPrimitive.Item\r\n data-slot=\"select-item\"\r\n class={cn(\r\n \"relative flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 pr-8 text-sm outline-none select-none\",\r\n \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\r\n \"data-[state=checked]:font-medium\",\r\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n local.class,\r\n )}\r\n {...others}\r\n >\r\n {local.children}\r\n </SelectPrimitive.Item>\r\n );\r\n}\r\n\r\nconst SelectItemText = SelectPrimitive.ItemText;\r\n\r\nfunction SelectItemIndicator(props: ComponentProps<typeof SelectPrimitive.ItemIndicator>) {\r\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\r\n\r\n return (\r\n <SelectPrimitive.ItemIndicator\r\n data-slot=\"select-item-indicator\"\r\n class={cn(\"absolute right-2 flex size-4 items-center justify-center\", local.class)}\r\n {...others}\r\n >\r\n {local.children ?? <CheckIcon />}\r\n </SelectPrimitive.ItemIndicator>\r\n );\r\n}\r\n\r\nfunction SelectItemGroup(props: ComponentProps<typeof SelectPrimitive.ItemGroup>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SelectPrimitive.ItemGroup\r\n data-slot=\"select-item-group\"\r\n class={cn(\"flex flex-col\", local.class)}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SelectItemGroupLabel(props: ComponentProps<typeof SelectPrimitive.ItemGroupLabel>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SelectPrimitive.ItemGroupLabel\r\n data-slot=\"select-item-group-label\"\r\n class={cn(\"px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground\", local.class)}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SelectLabel(props: ComponentProps<typeof SelectPrimitive.Label>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SelectPrimitive.Label\r\n data-slot=\"select-label\"\r\n class={cn(\r\n \"text-sm leading-none font-medium select-none data-disabled:opacity-50\",\r\n local.class,\r\n )}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SelectSeparator(props: ComponentProps<typeof sprawlify.div>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <sprawlify.div\r\n data-slot=\"select-separator\"\r\n class={cn(\"-mx-1 my-1 h-px bg-border\", local.class)}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nconst SelectContext = SelectPrimitive.Context;\r\nconst SelectRootProvider = SelectPrimitive.RootProvider;\r\n\r\nexport {\r\n Select,\r\n SelectControl,\r\n SelectTrigger,\r\n SelectIndicator,\r\n SelectValue,\r\n SelectPositioner,\r\n SelectContent,\r\n SelectHiddenSelect,\r\n SelectItem,\r\n SelectItemText,\r\n SelectItemIndicator,\r\n SelectItemGroup,\r\n SelectItemGroupLabel,\r\n SelectLabel,\r\n SelectSeparator,\r\n SelectIndicatorGroup,\r\n SelectContext,\r\n SelectRootProvider,\r\n};\r\n",
|
|
1020
|
+
type: "registry:ui",
|
|
1021
|
+
path: "select.tsx"
|
|
1022
|
+
}]
|
|
1023
|
+
},
|
|
954
1024
|
{
|
|
955
1025
|
name: "separator",
|
|
956
1026
|
dependencies: [
|
|
@@ -964,6 +1034,19 @@ const PRESETS = { monochrome: {
|
|
|
964
1034
|
path: "separator.tsx"
|
|
965
1035
|
}]
|
|
966
1036
|
},
|
|
1037
|
+
{
|
|
1038
|
+
name: "switch",
|
|
1039
|
+
dependencies: [
|
|
1040
|
+
"@/lib/utils",
|
|
1041
|
+
"@sprawlify/solid",
|
|
1042
|
+
"solid-js"
|
|
1043
|
+
],
|
|
1044
|
+
files: [{
|
|
1045
|
+
content: "import { cn } from \"@/lib/utils\";\r\nimport { Switch as SwitchPrimitive } from \"@sprawlify/solid/switch\";\r\nimport { type ComponentProps, splitProps } from \"solid-js\";\r\n\r\nfunction Switch(\r\n props: ComponentProps<typeof SwitchPrimitive.Root> & {\r\n size?: \"sm\" | \"default\";\r\n },\r\n) {\r\n const [local, others] = splitProps(props, [\"class\", \"size\"]);\r\n const size = () => local.size ?? \"default\";\r\n\r\n return (\r\n <SwitchPrimitive.Root\r\n data-slot=\"switch\"\r\n data-size={size()}\r\n class={cn(\r\n \"group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n local.class,\r\n )}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SwitchControl(props: ComponentProps<typeof SwitchPrimitive.Control>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SwitchPrimitive.Control\r\n data-slot=\"switch-control\"\r\n class={cn(\r\n \"inline-flex h-5 group-data-[size=sm]/switch:h-4 w-9 group-data-[size=sm]/switch:w-7 shrink-0 cursor-pointer items-center rounded-full border ring-2 border-transparent ring-transparent transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 dark:data-[state=unchecked]:bg-input/80\",\r\n local.class,\r\n )}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SwitchThumb(props: ComponentProps<typeof SwitchPrimitive.Thumb>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SwitchPrimitive.Thumb\r\n data-slot=\"switch-thumb\"\r\n class={cn(\r\n \"pointer-events-none block size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground\",\r\n local.class,\r\n )}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nfunction SwitchLabel(props: ComponentProps<typeof SwitchPrimitive.Label>) {\r\n const [local, others] = splitProps(props, [\"class\"]);\r\n\r\n return (\r\n <SwitchPrimitive.Label\r\n data-slot=\"switch-label\"\r\n class={cn(\r\n \"text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n local.class,\r\n )}\r\n {...others}\r\n />\r\n );\r\n}\r\n\r\nconst SwitchHiddenInput = SwitchPrimitive.HiddenInput;\r\nconst SwitchContext = SwitchPrimitive.Context;\r\nconst SwitchRootProvider = SwitchPrimitive.RootProvider;\r\n\r\nexport {\r\n Switch,\r\n SwitchControl,\r\n SwitchThumb,\r\n SwitchLabel,\r\n SwitchHiddenInput,\r\n SwitchContext,\r\n SwitchRootProvider,\r\n};",
|
|
1046
|
+
type: "registry:ui",
|
|
1047
|
+
path: "switch.tsx"
|
|
1048
|
+
}]
|
|
1049
|
+
},
|
|
967
1050
|
{
|
|
968
1051
|
name: "table",
|
|
969
1052
|
dependencies: [
|
|
@@ -1042,7 +1125,7 @@ const PRESETS = { monochrome: {
|
|
|
1042
1125
|
"tailwind-scrollbar": "^4.0.2",
|
|
1043
1126
|
"tw-animate-css": "^1.4.0"
|
|
1044
1127
|
},
|
|
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(
|
|
1128
|
+
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(100% 0 0);\n --foreground: oklch(14.5% 0 0);\n --card: oklch(100% 0 0);\n --card-foreground: oklch(14.5% 0 0);\n --popover: oklch(100% 0 0);\n --popover-foreground: oklch(14.5% 0 0);\n --primary: oklch(15.3% 0.006 107.1);\n --primary-foreground: oklch(100% 0 0);\n --secondary: oklch(98.8% 0.003 106.5);\n --secondary-foreground: oklch(15.3% 0.006 107.1);\n --muted: oklch(97% 0 0);\n --muted-foreground: oklch(55.6% 0 0);\n --accent: oklch(97% 0 0);\n --accent-foreground: oklch(20.5% 0 0);\n --destructive: oklch(57.7% 0.245 27.325);\n --destructive-foreground: oklch(57.7% 0.245 27.325);\n --border: oklch(92.2% 0 0);\n --input: oklch(92.2% 0 0);\n --ring: oklch(70.8% 0 0);\n --radius: 0.625rem;\n --sidebar: oklch(98.5% 0 0);\n --sidebar-foreground: oklch(14.5% 0 0);\n --sidebar-primary: oklch(20.5% 0 0);\n --sidebar-primary-foreground: oklch(98.5% 0 0);\n --sidebar-accent: oklch(97% 0 0);\n --sidebar-accent-foreground: oklch(20.5% 0 0);\n --sidebar-border: oklch(92.2% 0 0);\n --sidebar-ring: oklch(70.8% 0 0);\n}\n\n.dark {\n --background: oklch(14.5% 0 0);\n --foreground: oklch(98.5% 0 0);\n --card: oklch(14.5% 0 0);\n --card-foreground: oklch(98.5% 0 0);\n --popover: oklch(14.5% 0 0);\n --popover-foreground: oklch(98.5% 0 0);\n --primary: oklch(88% 0.011 106.6);\n --primary-foreground: oklch(15.3% 0.006 107.1);\n --secondary: oklch(28.6% 0.016 107.4);\n --secondary-foreground: oklch(98.5% 0 0);\n --muted: oklch(26.9% 0 0);\n --muted-foreground: oklch(70.8% 0 0);\n --accent: oklch(26.9% 0 0);\n --accent-foreground: oklch(98.5% 0 0);\n --destructive: oklch(39.6% 0.141 25.723);\n --destructive-foreground: oklch(63.7% 0.237 25.331);\n --border: oklch(26.9% 0 0);\n --input: oklch(26.9% 0 0);\n --ring: oklch(43.9% 0 0);\n --sidebar: oklch(20.5% 0 0);\n --sidebar-foreground: oklch(98.5% 0 0);\n --sidebar-primary: oklch(48.8% 0.243 264.376);\n --sidebar-primary-foreground: oklch(98.5% 0 0);\n --sidebar-accent: oklch(26.9% 0 0);\n --sidebar-accent-foreground: oklch(98.5% 0 0);\n --sidebar-border: oklch(26.9% 0 0);\n --sidebar-ring: oklch(43.9% 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 --color-neutral-50: oklch(98.8% 0.003 106.5);\n --color-neutral-100: oklch(96.6% 0.005 106.5);\n --color-neutral-200: oklch(93% 0.007 106.5);\n --color-neutral-300: oklch(88% 0.011 106.6);\n --color-neutral-400: oklch(73.7% 0.021 106.9);\n --color-neutral-500: oklch(58% 0.031 107.3);\n --color-neutral-600: oklch(46.6% 0.025 107.3);\n --color-neutral-700: oklch(39.4% 0.023 107.4);\n --color-neutral-800: oklch(28.6% 0.016 107.4);\n --color-neutral-900: oklch(22.8% 0.013 107.4);\n --color-neutral-950: oklch(15.3% 0.006 107.1);\n}\n\n@layer base {\n * {\n @apply border-border outline-ring/50;\n }\n\n html {\n @apply bg-neutral-100 text-foreground;\n }\n\n html.dark, html[data-theme=\"dark\"] {\n @apply bg-neutral-950 text-foreground;\n }\n\n button:not(:disabled),\n [role=\"button\"]:not(:disabled) {\n cursor: pointer;\n }\n}\n" },
|
|
1046
1129
|
items: [
|
|
1047
1130
|
{
|
|
1048
1131
|
name: "accordion",
|
|
@@ -1434,7 +1517,7 @@ const PRESETS = { monochrome: {
|
|
|
1434
1517
|
path: "calendar/calendar.svelte"
|
|
1435
1518
|
},
|
|
1436
1519
|
{
|
|
1437
|
-
content: "export { default as Calendar } from \"./calendar.svelte\"
|
|
1520
|
+
content: "export { default as Calendar } from \"./calendar.svelte\";\nexport { default as CalendarDayView } from \"./calendar-day-view.svelte\";\nexport { default as CalendarDualMonthDayView } from \"./calendar-dual-month-day-view.svelte\";\nexport { default as CalendarDayTable } from \"./calendar-day-table.svelte\";\nexport { default as CalendarMonthView } from \"./calendar-month-view.svelte\";\nexport { default as CalendarYearView } from \"./calendar-year-view.svelte\";\nexport { default as CalendarViewHeader } from \"./calendar-view-header.svelte\";\nexport { default as CalendarSelectHeader } from \"./calendar-select-header.svelte\";\nexport { default as CalendarDayButton } from \"./calendar-day-button.svelte\";\nexport { default as CalendarPresetTrigger } from \"./calendar-preset-trigger.svelte\";\n",
|
|
1438
1521
|
type: "registry:ui",
|
|
1439
1522
|
path: "calendar/index.ts"
|
|
1440
1523
|
}
|
|
@@ -1490,6 +1573,68 @@ const PRESETS = { monochrome: {
|
|
|
1490
1573
|
}
|
|
1491
1574
|
]
|
|
1492
1575
|
},
|
|
1576
|
+
{
|
|
1577
|
+
name: "carousel",
|
|
1578
|
+
dependencies: [
|
|
1579
|
+
"@sprawlify/svelte",
|
|
1580
|
+
"@/lib/utils",
|
|
1581
|
+
"svelte",
|
|
1582
|
+
"@/components/ui/button",
|
|
1583
|
+
"lucide-svelte"
|
|
1584
|
+
],
|
|
1585
|
+
files: [
|
|
1586
|
+
{
|
|
1587
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof CarouselPrimitive.ItemGroup> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.ItemGroup\r\n data-slot=\"carousel-content\"\r\n class={cn(\r\n \"flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CarouselPrimitive.ItemGroup>\r\n",
|
|
1588
|
+
type: "registry:ui",
|
|
1589
|
+
path: "carousel/carousel-content.svelte"
|
|
1590
|
+
},
|
|
1591
|
+
{
|
|
1592
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof CarouselPrimitive.Control> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.Control\r\n data-slot=\"carousel-control\"\r\n class={cn(\r\n \"flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CarouselPrimitive.Control>\r\n",
|
|
1593
|
+
type: "registry:ui",
|
|
1594
|
+
path: "carousel/carousel-control.svelte"
|
|
1595
|
+
},
|
|
1596
|
+
{
|
|
1597
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof CarouselPrimitive.IndicatorGroup> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.IndicatorGroup\r\n data-slot=\"carousel-indicator-group\"\r\n class={cn(\"flex justify-center gap-2 data-[orientation=vertical]:flex-col\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CarouselPrimitive.IndicatorGroup>\r\n",
|
|
1598
|
+
type: "registry:ui",
|
|
1599
|
+
path: "carousel/carousel-indicator-group.svelte"
|
|
1600
|
+
},
|
|
1601
|
+
{
|
|
1602
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof CarouselPrimitive.Indicator> {}\r\n\r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.Indicator\r\n data-slot=\"carousel-indicator\"\r\n class={cn(\r\n \"size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary\",\r\n className\r\n )}\r\n {...rest}\r\n/>\r\n",
|
|
1603
|
+
type: "registry:ui",
|
|
1604
|
+
path: "carousel/carousel-indicator.svelte"
|
|
1605
|
+
},
|
|
1606
|
+
{
|
|
1607
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport CarouselIndicator from \"./carousel-indicator.svelte\"\r\nimport CarouselIndicatorGroup from \"./carousel-indicator-group.svelte\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends Omit<ComponentProps<typeof CarouselPrimitive.Indicator>, \"index\"> {}\r\n\r\nlet { ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.Context>\r\n {#snippet render(api)}\r\n <CarouselIndicatorGroup>\r\n {#each api().pageSnapPoints as _, index (index)}\r\n <CarouselIndicator index={index} {...rest} />\r\n {/each}\r\n </CarouselIndicatorGroup>\r\n {/snippet}\r\n</CarouselPrimitive.Context>\r\n",
|
|
1608
|
+
type: "registry:ui",
|
|
1609
|
+
path: "carousel/carousel-indicators.svelte"
|
|
1610
|
+
},
|
|
1611
|
+
{
|
|
1612
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof CarouselPrimitive.Item> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.Item\r\n data-slot=\"carousel-item\"\r\n class={cn(\"min-w-0 shrink-0 grow-0 basis-full\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CarouselPrimitive.Item>\r\n",
|
|
1613
|
+
type: "registry:ui",
|
|
1614
|
+
path: "carousel/carousel-item.svelte"
|
|
1615
|
+
},
|
|
1616
|
+
{
|
|
1617
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronRightIcon } from \"lucide-svelte\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof Button> {}\r\n\r\nlet {\r\n class: className,\r\n children,\r\n variant = \"outline\",\r\n size = \"icon-sm\",\r\n ...rest\r\n}: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.NextTrigger>\r\n {#snippet asChild(props)}\r\n <Button\r\n data-slot=\"carousel-next\"\r\n {variant}\r\n {size}\r\n class={cn(\"touch-manipulation rounded-full disabled:opacity-50\", className)}\r\n {...props()}\r\n {...rest}\r\n >\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n <ChevronRightIcon class=\"cn-rtl-flip size-4\" />\r\n {/if}\r\n <span class=\"sr-only\">Next slide</span>\r\n </Button>\r\n {/snippet}\r\n</CarouselPrimitive.NextTrigger>\r\n",
|
|
1618
|
+
type: "registry:ui",
|
|
1619
|
+
path: "carousel/carousel-next.svelte"
|
|
1620
|
+
},
|
|
1621
|
+
{
|
|
1622
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronLeftIcon } from \"lucide-svelte\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof Button> {}\r\n\r\nlet {\r\n class: className,\r\n children,\r\n variant = \"outline\",\r\n size = \"icon-sm\",\r\n ...rest\r\n}: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.PrevTrigger>\r\n {#snippet asChild(props)}\r\n <Button\r\n data-slot=\"carousel-previous\"\r\n {variant}\r\n {size}\r\n class={cn(\"touch-manipulation rounded-full disabled:opacity-50\", className)}\r\n {...props()}\r\n {...rest}\r\n >\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n <ChevronLeftIcon class=\"cn-rtl-flip size-4\" />\r\n {/if}\r\n <span class=\"sr-only\">Previous slide</span>\r\n </Button>\r\n {/snippet}\r\n</CarouselPrimitive.PrevTrigger>\r\n",
|
|
1623
|
+
type: "registry:ui",
|
|
1624
|
+
path: "carousel/carousel-previous.svelte"
|
|
1625
|
+
},
|
|
1626
|
+
{
|
|
1627
|
+
content: "<script lang=\"ts\">\r\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof CarouselPrimitive.Root> {}\r\n\r\nlet {\r\n children,\r\n class: className,\r\n spacing = \"1rem\",\r\n loop = false,\r\n ...rest\r\n}: Props = $props()\r\n<\/script>\r\n\r\n<CarouselPrimitive.Root\r\n data-slot=\"carousel\"\r\n {spacing}\r\n {loop}\r\n class={cn(\r\n \"relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CarouselPrimitive.Root>\r\n",
|
|
1628
|
+
type: "registry:ui",
|
|
1629
|
+
path: "carousel/carousel.svelte"
|
|
1630
|
+
},
|
|
1631
|
+
{
|
|
1632
|
+
content: "import { Carousel as CarouselPrimitive } from \"@sprawlify/svelte/carousel\";\n\nexport { default as Carousel } from \"./carousel.svelte\";\nexport { default as CarouselContent } from \"./carousel-content.svelte\";\nexport { default as CarouselItem } from \"./carousel-item.svelte\";\nexport { default as CarouselControl } from \"./carousel-control.svelte\";\nexport { default as CarouselPrevious } from \"./carousel-previous.svelte\";\nexport { default as CarouselNext } from \"./carousel-next.svelte\";\nexport { default as CarouselIndicatorGroup } from \"./carousel-indicator-group.svelte\";\nexport { default as CarouselIndicator } from \"./carousel-indicator.svelte\";\nexport { default as CarouselIndicators } from \"./carousel-indicators.svelte\";\n\nexport const CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;\nexport const CarouselContext = CarouselPrimitive.Context;\nexport const CarouselRootProvider = CarouselPrimitive.RootProvider;\n",
|
|
1633
|
+
type: "registry:ui",
|
|
1634
|
+
path: "carousel/index.ts"
|
|
1635
|
+
}
|
|
1636
|
+
]
|
|
1637
|
+
},
|
|
1493
1638
|
{
|
|
1494
1639
|
name: "checkbox",
|
|
1495
1640
|
dependencies: [
|
|
@@ -1743,66 +1888,69 @@ const PRESETS = { monochrome: {
|
|
|
1743
1888
|
name: "field",
|
|
1744
1889
|
dependencies: [
|
|
1745
1890
|
"@/lib/utils",
|
|
1746
|
-
"svelte/elements",
|
|
1747
1891
|
"@sprawlify/svelte",
|
|
1748
|
-
"
|
|
1892
|
+
"svelte/elements",
|
|
1749
1893
|
"svelte",
|
|
1750
|
-
"@/components/ui/separator"
|
|
1751
|
-
"class-variance-authority"
|
|
1894
|
+
"@/components/ui/separator"
|
|
1752
1895
|
],
|
|
1753
1896
|
files: [
|
|
1754
1897
|
{
|
|
1755
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type
|
|
1898
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-scope=\"field\"\r\n data-part=\"content\" \r\n data-slot=\"field-content\"\r\n class={cn(\r\n \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>\r\n",
|
|
1756
1899
|
type: "registry:ui",
|
|
1757
1900
|
path: "field/field-content.svelte"
|
|
1758
1901
|
},
|
|
1759
1902
|
{
|
|
1760
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1903
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Field as FieldPrimitive } from \"@sprawlify/svelte/field\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldPrimitive.HelperText> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<FieldPrimitive.HelperText\r\n data-slot=\"field-description\"\r\n class={cn(\r\n \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\r\n \"last:mt-0 nth-last-2:-mt-1\",\r\n \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</FieldPrimitive.HelperText>\r\n",
|
|
1761
1904
|
type: "registry:ui",
|
|
1762
1905
|
path: "field/field-description.svelte"
|
|
1763
1906
|
},
|
|
1764
1907
|
{
|
|
1765
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport
|
|
1908
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Field as FieldPrimitive } from \"@sprawlify/svelte/field\"\r\nimport { Sprawlify } from \"@sprawlify/svelte\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldPrimitive.ErrorText> {\r\n errors?: Array<{ message?: string } | undefined>\r\n}\r\n\r\nlet { class: className, children, errors, ...rest }: Props = $props()\r\n\r\nconst content = $derived.by(() => {\r\n if (children) return children\r\n\r\n if (!errors?.length) return null\r\n\r\n const uniqueErrors = [\r\n ...new Map(errors.map((error) => [error?.message, error])).values(),\r\n ]\r\n\r\n return uniqueErrors\r\n})\r\n<\/script>\r\n\r\n{#if content}\r\n <FieldPrimitive.ErrorText\r\n data-slot=\"field-error\"\r\n class={cn(\"text-sm font-normal text-destructive\", className)}\r\n {...rest}\r\n >\r\n {#if children}\r\n {@render children()}\r\n {:else if Array.isArray(content)}\r\n {#if content.length === 1}\r\n {content[0]?.message}\r\n {:else}\r\n <Sprawlify as=\"ul\" class=\"ml-4 flex list-disc flex-col gap-1\">\r\n {#each content as error, i (i)}\r\n {#if error?.message}\r\n <Sprawlify as=\"li\">{error.message}</Sprawlify>\r\n {/if}\r\n {/each}\r\n </Sprawlify>\r\n {/if}\r\n {/if}\r\n </FieldPrimitive.ErrorText>\r\n{/if}\r\n",
|
|
1766
1909
|
type: "registry:ui",
|
|
1767
1910
|
path: "field/field-error.svelte"
|
|
1768
1911
|
},
|
|
1769
1912
|
{
|
|
1770
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type
|
|
1913
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-scope=\"field\"\r\n data-part=\"group\"\r\n data-slot=\"field-group\"\r\n class={cn(\r\n \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>\r\n",
|
|
1771
1914
|
type: "registry:ui",
|
|
1772
1915
|
path: "field/field-group.svelte"
|
|
1773
1916
|
},
|
|
1774
1917
|
{
|
|
1775
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1918
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Field as FieldPrimitive } from \"@sprawlify/svelte/field\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldPrimitive.Label> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<FieldPrimitive.Label\r\n data-slot=\"field-label\"\r\n class={cn(\r\n \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10\",\r\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</FieldPrimitive.Label>\r\n",
|
|
1776
1919
|
type: "registry:ui",
|
|
1777
1920
|
path: "field/field-label.svelte"
|
|
1778
1921
|
},
|
|
1779
1922
|
{
|
|
1780
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport
|
|
1923
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Fieldset as FieldsetPrimitive } from \"@sprawlify/svelte/fieldset\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldsetPrimitive.Legend> {\r\n variant?: \"legend\" | \"label\"\r\n}\r\n\r\nlet { class: className, variant = \"legend\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<FieldsetPrimitive.Legend\r\n data-slot=\"field-legend\"\r\n data-variant={variant}\r\n class={cn(\r\n \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</FieldsetPrimitive.Legend>\r\n",
|
|
1781
1924
|
type: "registry:ui",
|
|
1782
1925
|
path: "field/field-legend.svelte"
|
|
1783
1926
|
},
|
|
1784
1927
|
{
|
|
1785
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1928
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Field as FieldPrimitive } from \"@sprawlify/svelte/field\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldPrimitive.RequiredIndicator> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<FieldPrimitive.RequiredIndicator\r\n data-slot=\"field-required-indicator\"\r\n class={cn(\"text-destructive\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</FieldPrimitive.RequiredIndicator>\r\n",
|
|
1929
|
+
type: "registry:ui",
|
|
1930
|
+
path: "field/field-required-indicator.svelte"
|
|
1931
|
+
},
|
|
1932
|
+
{
|
|
1933
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { Snippet } from \"svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\";\r\n\r\ninterface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {\r\n children?: Snippet\r\n}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-scope=\"field\"\r\n data-part=\"separator\"\r\n data-slot=\"field-separator\"\r\n data-content={!!children}\r\n class={cn(\r\n \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n <Separator class=\"absolute inset-0 top-1/2\" />\r\n {#if children}\r\n <Sprawlify\r\n as=\"span\"\r\n class=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\r\n data-scope=\"field\"\r\n data-part=\"separator-content\"\r\n data-slot=\"field-separator-content\"\r\n >\r\n {@render children()}\r\n </Sprawlify>\r\n {/if}\r\n</Sprawlify>\r\n",
|
|
1786
1934
|
type: "registry:ui",
|
|
1787
1935
|
path: "field/field-separator.svelte"
|
|
1788
1936
|
},
|
|
1789
1937
|
{
|
|
1790
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1938
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Fieldset as FieldsetPrimitive } from \"@sprawlify/svelte/fieldset\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldsetPrimitive.Root> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<FieldsetPrimitive.Root\r\n data-slot=\"field-set\"\r\n class={cn(\r\n \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</FieldsetPrimitive.Root>\r\n",
|
|
1791
1939
|
type: "registry:ui",
|
|
1792
1940
|
path: "field/field-set.svelte"
|
|
1793
1941
|
},
|
|
1794
1942
|
{
|
|
1795
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type
|
|
1943
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<\"div\"> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"div\"\r\n data-scope=\"field\"\r\n data-part=\"title\"\r\n data-slot=\"field-title\"\r\n class={cn(\r\n \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>\r\n",
|
|
1796
1944
|
type: "registry:ui",
|
|
1797
1945
|
path: "field/field-title.svelte"
|
|
1798
1946
|
},
|
|
1799
1947
|
{
|
|
1800
|
-
content: "<script lang=\"ts\">\r\nimport {
|
|
1948
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Field as FieldPrimitive } from \"@sprawlify/svelte/field\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ntype Orientation = \"vertical\" | \"horizontal\" | \"responsive\"\r\n\r\ninterface Props extends ComponentProps<typeof FieldPrimitive.Root> {\r\n orientation?: Orientation\r\n}\r\n\r\nlet { class: className, orientation = \"vertical\", children, ...rest }: Props = $props()\r\n\r\nconst orientationClasses: Record<Orientation, string> = {\r\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\r\n horizontal:\r\n \"has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto\",\r\n responsive:\r\n \"@md/field-group:has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto\",\r\n}\r\n<\/script>\r\n\r\n<FieldPrimitive.Root\r\n data-slot=\"field\"\r\n data-orientation={orientation}\r\n class={cn(\r\n \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\r\n orientationClasses[orientation],\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</FieldPrimitive.Root>\r\n",
|
|
1801
1949
|
type: "registry:ui",
|
|
1802
1950
|
path: "field/field.svelte"
|
|
1803
1951
|
},
|
|
1804
1952
|
{
|
|
1805
|
-
content: "export { default as Field } from \"./field.svelte\";\nexport { default as
|
|
1953
|
+
content: "export { default as Field } from \"./field.svelte\";\nexport { default as FieldLabel } from \"./field-label.svelte\";\nexport { default as FieldDescription } from \"./field-description.svelte\";\nexport { default as FieldError } from \"./field-error.svelte\";\nexport { default as FieldGroup } from \"./field-group.svelte\";\nexport { default as FieldLegend } from \"./field-legend.svelte\";\nexport { default as FieldSeparator } from \"./field-separator.svelte\";\nexport { default as FieldSet } from \"./field-set.svelte\";\nexport { default as FieldContent } from \"./field-content.svelte\";\nexport { default as FieldTitle } from \"./field-title.svelte\";\nexport { default as FieldRequiredIndicator } from \"./field-required-indicator.svelte\";\n",
|
|
1806
1954
|
type: "registry:ui",
|
|
1807
1955
|
path: "field/index.ts"
|
|
1808
1956
|
}
|
|
@@ -2039,6 +2187,93 @@ const PRESETS = { monochrome: {
|
|
|
2039
2187
|
}
|
|
2040
2188
|
]
|
|
2041
2189
|
},
|
|
2190
|
+
{
|
|
2191
|
+
name: "select",
|
|
2192
|
+
dependencies: [
|
|
2193
|
+
"@sprawlify/svelte",
|
|
2194
|
+
"@/lib/utils",
|
|
2195
|
+
"svelte",
|
|
2196
|
+
"svelte/elements",
|
|
2197
|
+
"lucide-svelte"
|
|
2198
|
+
],
|
|
2199
|
+
files: [
|
|
2200
|
+
{
|
|
2201
|
+
content: "export { SelectRoot as Select } from \"@sprawlify/svelte/select\";\r\nexport { default as SelectControl } from \"./select-control.svelte\";\r\nexport { default as SelectTrigger } from \"./select-trigger.svelte\";\r\nexport { default as SelectIndicatorGroup } from \"./select-indicator-group.svelte\";\r\nexport { default as SelectIndicator } from \"./select-indicator.svelte\";\r\nexport { default as SelectValue } from \"./select-value.svelte\";\r\nexport { default as SelectContent } from \"./select-content.svelte\";\r\nexport { default as SelectItem } from \"./select-item.svelte\";\r\nexport { default as SelectItemText } from \"./select-item-text.svelte\";\r\nexport { default as SelectItemIndicator } from \"./select-item-indicator.svelte\";\r\nexport { default as SelectItemGroup } from \"./select-item-group.svelte\";\r\nexport { default as SelectItemGroupLabel } from \"./select-item-group-label.svelte\";\r\nexport { default as SelectLabel } from \"./select-label.svelte\";\r\nexport { default as SelectSeparator } from \"./select-separator.svelte\";\r\nexport { SelectHiddenSelect, SelectContext, SelectRootProvider } from \"@sprawlify/svelte/select\";\r\n",
|
|
2202
|
+
type: "registry:ui",
|
|
2203
|
+
path: "select/index.ts"
|
|
2204
|
+
},
|
|
2205
|
+
{
|
|
2206
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { Portal } from \"@sprawlify/svelte/portal\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Content> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Portal>\r\n <SelectPrimitive.Positioner data-slot=\"select-positioner\" class=\"outline-none\">\r\n <SelectPrimitive.Content\r\n data-slot=\"select-content\"\r\n class={cn(\r\n \"z-50 flex flex-col gap-0.5 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg outline-none\",\r\n \"min-w-(--reference-width)\",\r\n \"max-h-[min(var(--available-height,300px),300px)] overflow-y-auto\",\r\n \"origin-(--transform-origin)\",\r\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%]\",\r\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]\",\r\n className,\r\n )}\r\n {...rest}\r\n >\r\n {@render children?.()}\r\n </SelectPrimitive.Content>\r\n </SelectPrimitive.Positioner>\r\n</Portal>\r\n",
|
|
2207
|
+
type: "registry:ui",
|
|
2208
|
+
path: "select/select-content.svelte"
|
|
2209
|
+
},
|
|
2210
|
+
{
|
|
2211
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Control> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Control\r\n data-slot=\"select-control\"\r\n class={cn(\"relative flex w-full items-center\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</SelectPrimitive.Control>\r\n",
|
|
2212
|
+
type: "registry:ui",
|
|
2213
|
+
path: "select/select-control.svelte"
|
|
2214
|
+
},
|
|
2215
|
+
{
|
|
2216
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { HTMLAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLAttributes<HTMLDivElement> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<div\r\n data-slot=\"select-indicator-group\"\r\n class={cn(\r\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1 px-2.5\",\r\n className,\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</div>\r\n",
|
|
2217
|
+
type: "registry:ui",
|
|
2218
|
+
path: "select/select-indicator-group.svelte"
|
|
2219
|
+
},
|
|
2220
|
+
{
|
|
2221
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { ChevronsUpDown } from \"lucide-svelte\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Indicator> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Indicator\r\n data-slot=\"select-indicator\"\r\n class={cn(\r\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-muted-foreground/60 [&_svg]:size-4\",\r\n className,\r\n )}\r\n {...rest}\r\n>\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n <ChevronsUpDown />\r\n {/if}\r\n</SelectPrimitive.Indicator>\r\n",
|
|
2222
|
+
type: "registry:ui",
|
|
2223
|
+
path: "select/select-indicator.svelte"
|
|
2224
|
+
},
|
|
2225
|
+
{
|
|
2226
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.ItemGroupLabel> {}\r\n\r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.ItemGroupLabel\r\n data-slot=\"select-item-group-label\"\r\n class={cn(\r\n \"px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground\",\r\n className,\r\n )}\r\n {...rest}\r\n></SelectPrimitive.ItemGroupLabel>\r\n",
|
|
2227
|
+
type: "registry:ui",
|
|
2228
|
+
path: "select/select-item-group-label.svelte"
|
|
2229
|
+
},
|
|
2230
|
+
{
|
|
2231
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.ItemGroup> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.ItemGroup\r\n data-slot=\"select-item-group\"\r\n class={cn(\"flex flex-col\", className)}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</SelectPrimitive.ItemGroup>\r\n",
|
|
2232
|
+
type: "registry:ui",
|
|
2233
|
+
path: "select/select-item-group.svelte"
|
|
2234
|
+
},
|
|
2235
|
+
{
|
|
2236
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { Check } from \"lucide-svelte\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.ItemIndicator> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.ItemIndicator\r\n data-slot=\"select-item-indicator\"\r\n class={cn(\"absolute right-2 flex size-4 items-center justify-center\", className)}\r\n {...rest}\r\n>\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n <Check />\r\n {/if}\r\n</SelectPrimitive.ItemIndicator>\r\n",
|
|
2237
|
+
type: "registry:ui",
|
|
2238
|
+
path: "select/select-item-indicator.svelte"
|
|
2239
|
+
},
|
|
2240
|
+
{
|
|
2241
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.ItemText> {}\r\n\r\nlet { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.ItemText data-slot=\"select-item-text\" {...rest}>\r\n {@render children?.()}\r\n</SelectPrimitive.ItemText>\r\n",
|
|
2242
|
+
type: "registry:ui",
|
|
2243
|
+
path: "select/select-item-text.svelte"
|
|
2244
|
+
},
|
|
2245
|
+
{
|
|
2246
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Item> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Item\r\n data-slot=\"select-item\"\r\n class={cn(\r\n \"relative flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1.5 pr-8 text-sm outline-none select-none\",\r\n \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\r\n \"data-[state=checked]:font-medium\",\r\n \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n className,\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</SelectPrimitive.Item>\r\n",
|
|
2247
|
+
type: "registry:ui",
|
|
2248
|
+
path: "select/select-item.svelte"
|
|
2249
|
+
},
|
|
2250
|
+
{
|
|
2251
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Label> {}\r\n\r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Label\r\n data-slot=\"select-label\"\r\n class={cn(\r\n \"text-sm leading-none font-medium select-none data-disabled:opacity-50\",\r\n className,\r\n )}\r\n {...rest}\r\n/>\r\n",
|
|
2252
|
+
type: "registry:ui",
|
|
2253
|
+
path: "select/select-label.svelte"
|
|
2254
|
+
},
|
|
2255
|
+
{
|
|
2256
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { HTMLAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLAttributes<HTMLDivElement> {}\r\n\r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<div\r\n data-slot=\"select-separator\"\r\n class={cn(\"-mx-1 my-1 h-px bg-border\", className)}\r\n {...rest}\r\n></div>\r\n",
|
|
2257
|
+
type: "registry:ui",
|
|
2258
|
+
path: "select/select-separator.svelte"
|
|
2259
|
+
},
|
|
2260
|
+
{
|
|
2261
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Trigger> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Trigger\r\n data-slot=\"select-trigger\"\r\n class={cn(\r\n \"flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent py-2 pr-10 pl-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-150 ease-in-out outline-none\",\r\n \"data-placeholder-shown:text-muted-foreground\",\r\n \"hover:border-ring/50\",\r\n \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20\",\r\n \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n \"data-invalid:border-destructive data-invalid:focus-visible:ring-destructive/20\",\r\n className,\r\n )}\r\n {...rest}\r\n>\r\n <div class=\"flex gap-2\">\r\n {@render children?.()}\r\n </div>\r\n</SelectPrimitive.Trigger>\r\n",
|
|
2262
|
+
type: "registry:ui",
|
|
2263
|
+
path: "select/select-trigger.svelte"
|
|
2264
|
+
},
|
|
2265
|
+
{
|
|
2266
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.ValueText> {}\r\n\r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.ValueText\r\n data-slot=\"select-value\"\r\n class={cn(\"line-clamp-1 flex-1 text-left\", className)}\r\n {...rest}\r\n/>\r\n",
|
|
2267
|
+
type: "registry:ui",
|
|
2268
|
+
path: "select/select-value.svelte"
|
|
2269
|
+
},
|
|
2270
|
+
{
|
|
2271
|
+
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Root> {}\r\n\r\nlet { children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Root data-slot=\"select\" {...rest}>\r\n {@render children?.()}\r\n</SelectPrimitive.Root>\r\n",
|
|
2272
|
+
type: "registry:ui",
|
|
2273
|
+
path: "select/select.svelte"
|
|
2274
|
+
}
|
|
2275
|
+
]
|
|
2276
|
+
},
|
|
2042
2277
|
{
|
|
2043
2278
|
name: "separator",
|
|
2044
2279
|
dependencies: [
|
|
@@ -2056,6 +2291,41 @@ const PRESETS = { monochrome: {
|
|
|
2056
2291
|
path: "separator/separator.svelte"
|
|
2057
2292
|
}]
|
|
2058
2293
|
},
|
|
2294
|
+
{
|
|
2295
|
+
name: "switch",
|
|
2296
|
+
dependencies: [
|
|
2297
|
+
"@sprawlify/svelte",
|
|
2298
|
+
"@/lib/utils",
|
|
2299
|
+
"svelte"
|
|
2300
|
+
],
|
|
2301
|
+
files: [
|
|
2302
|
+
{
|
|
2303
|
+
content: "import { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\";\r\n\r\nexport { default as Switch } from \"./switch.svelte\";\r\nexport { default as SwitchControl } from \"./switch-control.svelte\";\r\nexport { default as SwitchThumb } from \"./switch-thumb.svelte\";\r\nexport { default as SwitchLabel } from \"./switch-label.svelte\";\r\n\r\nexport const SwitchHiddenInput = SwitchPrimitive.HiddenInput\r\nexport const SwitchContext = SwitchPrimitive.Context;\r\nexport const SwitchRootProvider = SwitchPrimitive.RootProvider;",
|
|
2304
|
+
type: "registry:ui",
|
|
2305
|
+
path: "switch/index.ts"
|
|
2306
|
+
},
|
|
2307
|
+
{
|
|
2308
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SwitchPrimitive.Control> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SwitchPrimitive.Control\r\n data-slot=\"switch-control\"\r\n class={cn(\r\n \"inline-flex h-5 group-data-[size=sm]/switch:h-4 w-9 group-data-[size=sm]/switch:w-7 shrink-0 cursor-pointer items-center rounded-full border ring-2 border-transparent ring-transparent transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-2 focus-visible:outline-ring data-invalid:border-destructive data-invalid:ring-destructive/20 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 dark:data-[state=unchecked]:bg-input/80\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</SwitchPrimitive.Control>",
|
|
2309
|
+
type: "registry:ui",
|
|
2310
|
+
path: "switch/switch-control.svelte"
|
|
2311
|
+
},
|
|
2312
|
+
{
|
|
2313
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SwitchPrimitive.Label> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SwitchPrimitive.Label\r\n data-slot=\"switch-label\"\r\n class={cn(\r\n \"text-sm group-data-[size=sm]/switch:text-xs leading-none font-medium select-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</SwitchPrimitive.Label>",
|
|
2314
|
+
type: "registry:ui",
|
|
2315
|
+
path: "switch/switch-label.svelte"
|
|
2316
|
+
},
|
|
2317
|
+
{
|
|
2318
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SwitchPrimitive.Thumb> {}\r\n\r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SwitchPrimitive.Thumb\r\n data-slot=\"switch-thumb\"\r\n class={cn(\r\n \"pointer-events-none block size-4 group-data-[size=sm]/switch:size-3 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground\",\r\n className\r\n )}\r\n {...rest}\r\n/>",
|
|
2319
|
+
type: "registry:ui",
|
|
2320
|
+
path: "switch/switch-thumb.svelte"
|
|
2321
|
+
},
|
|
2322
|
+
{
|
|
2323
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SwitchPrimitive.Root> {\r\n size?: \"sm\" | \"default\"\r\n}\r\n\r\nlet { class: className, size = \"default\", children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SwitchPrimitive.Root\r\n data-slot=\"switch\"\r\n data-size={size}\r\n class={cn(\r\n \"group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</SwitchPrimitive.Root>",
|
|
2324
|
+
type: "registry:ui",
|
|
2325
|
+
path: "switch/switch.svelte"
|
|
2326
|
+
}
|
|
2327
|
+
]
|
|
2328
|
+
},
|
|
2059
2329
|
{
|
|
2060
2330
|
name: "table",
|
|
2061
2331
|
dependencies: [
|