sprawlify 0.1.18 → 0.1.20
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 +348 -55
- 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.20";
|
|
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\";\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(88% 0.011 106.6);\n --secondary-foreground: oklch(15.3% 0.006 107.1);\n --muted: oklch(93% 0.007 106.5);\n --muted-foreground: oklch(55.6% 0 0);\n --accent: oklch(96.6% 0.005 106.5);\n --accent-foreground: oklch(22.8% 0.013 107.4);\n --destructive: oklch(57.7% 0.245 27.325);\n --destructive-foreground: oklch(57.7% 0.245 27.325);\n --border: oklch(88% 0.011 106.6);\n --input: oklch(88% 0.011 106.6);\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(96.6% 0.005 106.5);\n --sidebar-accent-foreground: oklch(22.8% 0.013 107.4);\n --sidebar-border: oklch(88% 0.011 106.6);\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(22.8% 0.013 107.4);\n --muted-foreground: oklch(73.7% 0.021 106.9);\n --accent: oklch(22.8% 0.013 107.4);\n --accent-foreground: oklch(96.6% 0.005 106.5);\n --destructive: oklch(39.6% 0.141 25.723);\n --destructive-foreground: oklch(63.7% 0.237 25.331);\n --border: oklch(28.6% 0.016 107.4);\n --input: oklch(28.6% 0.016 107.4);\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(22.8% 0.013 107.4);\n --sidebar-accent-foreground: oklch(96.6% 0.005 106.5);\n --sidebar-border: oklch(28.6% 0.016 107.4);\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,\n 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" },
|
|
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: [
|
|
@@ -361,7 +376,7 @@ const PRESETS = { monochrome: {
|
|
|
361
376
|
"lucide-react"
|
|
362
377
|
],
|
|
363
378
|
files: [{
|
|
364
|
-
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\nfunction Checkbox({
|
|
379
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\n\nfunction Checkbox({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Control\n data-slot=\"checkbox-control\"\n className=\"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\"\n >\n <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"[&>svg]:size-3.5\">\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"[&>svg]:size-3.5\"\n indeterminate\n >\n <MinusIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Control>\n {children && (\n <CheckboxPrimitive.Label\n data-slot=\"checkbox-label\"\n className=\"text-sm leading-none font-medium select-none peer-disabled:opacity-50\"\n >\n {children}\n </CheckboxPrimitive.Label>\n )}\n <CheckboxPrimitive.HiddenInput />\n </CheckboxPrimitive.Root>\n );\n}\n\nconst CheckboxRoot = React.forwardRef<\n HTMLLabelElement,\n React.ComponentProps<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n data-slot=\"checkbox\"\n className={cn(\n \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\n className,\n )}\n {...props}\n />\n));\nCheckboxRoot.displayName = \"CheckboxRoot\";\n\nconst CheckboxControl = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof CheckboxPrimitive.Control>\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Control\n ref={ref}\n data-slot=\"checkbox-control\"\n className={cn(\n \"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n className,\n )}\n {...props}\n />\n));\nCheckboxControl.displayName = \"CheckboxControl\";\n\nconst CheckboxIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof CheckboxPrimitive.Indicator>\n>(({ className, children, ...props }, ref) => (\n <CheckboxPrimitive.Indicator\n ref={ref}\n data-slot=\"checkbox-indicator\"\n className={cn(\"[&>svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? <CheckIcon />}\n </CheckboxPrimitive.Indicator>\n));\nCheckboxIndicator.displayName = \"CheckboxIndicator\";\n\nconst CheckboxLabel = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps<typeof CheckboxPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <CheckboxPrimitive.Label\n ref={ref}\n data-slot=\"checkbox-label\"\n className={cn(\n \"text-sm leading-none font-medium select-none peer-disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n));\nCheckboxLabel.displayName = \"CheckboxLabel\";\n\nconst CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;\n\nconst CheckboxGroup = CheckboxPrimitive.Group;\n\nconst CheckboxContext = CheckboxPrimitive.Context;\nconst CheckboxRootProvider = CheckboxPrimitive.RootProvider;\n\nexport {\n Checkbox,\n CheckboxRoot,\n CheckboxControl,\n CheckboxIndicator,\n CheckboxLabel,\n CheckboxHiddenInput,\n CheckboxGroup,\n CheckboxContext,\n CheckboxRootProvider,\n};\n",
|
|
365
380
|
type: "registry:ui",
|
|
366
381
|
path: "checkbox.tsx"
|
|
367
382
|
}]
|
|
@@ -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
|
}]
|
|
@@ -441,7 +455,7 @@ const PRESETS = { monochrome: {
|
|
|
441
455
|
"@sprawlify/react"
|
|
442
456
|
],
|
|
443
457
|
files: [{
|
|
444
|
-
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n return (\n <sprawlify.input\n type={type}\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n className={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-
|
|
458
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n return (\n <sprawlify.input\n type={type}\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n className={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-input/30 px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-input/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Input };\n",
|
|
445
459
|
type: "registry:ui",
|
|
446
460
|
path: "input.tsx"
|
|
447
461
|
}]
|
|
@@ -458,7 +472,7 @@ const PRESETS = { monochrome: {
|
|
|
458
472
|
"@sprawlify/react"
|
|
459
473
|
],
|
|
460
474
|
files: [{
|
|
461
|
-
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <sprawlify.div\n role=\"group\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n className={cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n return (\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-
|
|
475
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {\n return (\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"border-input bg-input/30 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <sprawlify.div\n role=\"group\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.span>) {\n return (\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n className={cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<typeof sprawlify.input>) {\n return (\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-input/50 aria-invalid:ring-0 dark:bg-input/30 dark:disabled:bg-input/50 flex-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<typeof sprawlify.textarea>) {\n return (\n <Textarea\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-input/50 aria-invalid:ring-0 dark:bg-input/30 dark:disabled:bg-transparent flex-1 resize-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n",
|
|
462
476
|
type: "registry:ui",
|
|
463
477
|
path: "input-group.tsx"
|
|
464
478
|
}]
|
|
@@ -508,7 +522,7 @@ const PRESETS = { monochrome: {
|
|
|
508
522
|
"lucide-react"
|
|
509
523
|
],
|
|
510
524
|
files: [{
|
|
511
|
-
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n return (\n <div\n className={cn(\n \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n className,\n )}\n data-scope=\"native-select\"\n data-part=\"root\"\n data-slot=\"native-select-root\"\n data-size={size}\n >\n <select\n data-slot=\"native-select\"\n data-size={size}\n className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-
|
|
525
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n return (\n <div\n className={cn(\n \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n className,\n )}\n data-scope=\"native-select\"\n data-part=\"root\"\n data-slot=\"native-select-root\"\n data-size={size}\n >\n <select\n data-slot=\"native-select\"\n data-size={size}\n className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-input/30 py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n {...props}\n />\n <ChevronDownIcon\n className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n aria-hidden=\"true\"\n data-slot=\"native-select-icon\"\n />\n </div>\n );\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n return (\n <option\n data-scope=\"native-select\"\n data-part=\"option\"\n data-slot=\"native-select-option\"\n {...props}\n />\n );\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n return (\n <optgroup\n data-scope=\"native-select\"\n data-part=\"optgroup\"\n data-slot=\"native-select-optgroup\"\n className={cn(className)}\n {...props}\n />\n );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n",
|
|
512
526
|
type: "registry:ui",
|
|
513
527
|
path: "native-select.tsx"
|
|
514
528
|
}]
|
|
@@ -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-input/30 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\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Switch as SwitchPrimitive } from \"@sprawlify/react/switch\";\n\nconst Switch = React.forwardRef<\n HTMLLabelElement,\n React.ComponentProps<typeof SwitchPrimitive.Root> & {\n size?: \"sm\" | \"default\";\n }\n>(({ className, size = \"default\", ...props }, ref) => (\n <SwitchPrimitive.Root\n ref={ref}\n data-slot=\"switch\"\n data-size={size}\n className={cn(\n \"group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n));\nSwitch.displayName = \"Switch\";\n\nconst SwitchControl = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps<typeof SwitchPrimitive.Control>\n>(({ className, ...props }, ref) => (\n <SwitchPrimitive.Control\n ref={ref}\n data-slot=\"switch-control\"\n className={cn(\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\",\n className,\n )}\n {...props}\n />\n));\nSwitchControl.displayName = \"SwitchControl\";\n\nconst SwitchThumb = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps<typeof SwitchPrimitive.Thumb>\n>(({ className, ...props }, ref) => (\n <SwitchPrimitive.Thumb\n ref={ref}\n data-slot=\"switch-thumb\"\n className={cn(\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\",\n className,\n )}\n {...props}\n />\n));\nSwitchThumb.displayName = \"SwitchThumb\";\n\nconst SwitchLabel = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps<typeof SwitchPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SwitchPrimitive.Label\n ref={ref}\n data-slot=\"switch-label\"\n className={cn(\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\",\n className,\n )}\n {...props}\n />\n));\nSwitchLabel.displayName = \"SwitchLabel\";\n\nconst SwitchHiddenInput = SwitchPrimitive.HiddenInput;\n\nconst SwitchContext = SwitchPrimitive.Context;\nconst SwitchRootProvider = SwitchPrimitive.RootProvider;\n\nexport {\n Switch,\n SwitchControl,\n SwitchThumb,\n SwitchLabel,\n SwitchHiddenInput,\n SwitchContext,\n SwitchRootProvider,\n};\n",
|
|
579
|
+
type: "registry:ui",
|
|
580
|
+
path: "switch.tsx"
|
|
581
|
+
}]
|
|
582
|
+
},
|
|
542
583
|
{
|
|
543
584
|
name: "table",
|
|
544
585
|
dependencies: [
|
|
@@ -574,7 +615,7 @@ const PRESETS = { monochrome: {
|
|
|
574
615
|
"@sprawlify/react"
|
|
575
616
|
],
|
|
576
617
|
files: [{
|
|
577
|
-
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof sprawlify.textarea>) {\n return (\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n className={cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-
|
|
618
|
+
content: "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<typeof sprawlify.textarea>) {\n return (\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n className={cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-input/30 px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Textarea };\n",
|
|
578
619
|
type: "registry:ui",
|
|
579
620
|
path: "textarea.tsx"
|
|
580
621
|
}]
|
|
@@ -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(88% 0.011 106.6);\n --secondary-foreground: oklch(15.3% 0.006 107.1);\n --muted: oklch(93% 0.007 106.5);\n --muted-foreground: oklch(55.6% 0 0);\n --accent: oklch(96.6% 0.005 106.5);\n --accent-foreground: oklch(22.8% 0.013 107.4);\n --destructive: oklch(57.7% 0.245 27.325);\n --destructive-foreground: oklch(57.7% 0.245 27.325);\n --border: oklch(88% 0.011 106.6);\n --input: oklch(88% 0.011 106.6);\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(96.6% 0.005 106.5);\n --sidebar-accent-foreground: oklch(22.8% 0.013 107.4);\n --sidebar-border: oklch(88% 0.011 106.6);\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(22.8% 0.013 107.4);\n --muted-foreground: oklch(73.7% 0.021 106.9);\n --accent: oklch(22.8% 0.013 107.4);\n --accent-foreground: oklch(96.6% 0.005 106.5);\n --destructive: oklch(39.6% 0.141 25.723);\n --destructive-foreground: oklch(63.7% 0.237 25.331);\n --border: oklch(28.6% 0.016 107.4);\n --input: oklch(28.6% 0.016 107.4);\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(22.8% 0.013 107.4);\n --sidebar-accent-foreground: oklch(96.6% 0.005 106.5);\n --sidebar-border: oklch(28.6% 0.016 107.4);\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,\n 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: [
|
|
@@ -778,7 +834,7 @@ const PRESETS = { monochrome: {
|
|
|
778
834
|
"solid-js"
|
|
779
835
|
],
|
|
780
836
|
files: [{
|
|
781
|
-
content: "import { cn } from \"@/lib/utils\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/solid/checkbox\";\nimport { CheckIcon } from \"lucide-solid\";\nimport { type ComponentProps, splitProps } from \"solid-js\";\n\nfunction Checkbox(props: ComponentProps<typeof CheckboxPrimitive.Root>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n class={cn(\n \"
|
|
837
|
+
content: "import { cn } from \"@/lib/utils\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/solid/checkbox\";\nimport { CheckIcon, MinusIcon } from \"lucide-solid\";\nimport { type ComponentProps, splitProps } from \"solid-js\";\n\nfunction Checkbox(props: ComponentProps<typeof CheckboxPrimitive.Root>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n class={cn(\n \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\n local.class,\n )}\n {...others}\n >\n <CheckboxPrimitive.Control\n data-slot=\"checkbox-control\"\n class=\"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\"\n >\n <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" class=\"[&>svg]:size-3.5\">\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n class=\"[&>svg]:size-3.5\"\n indeterminate\n >\n <MinusIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Control>\n {local.children && (\n <CheckboxPrimitive.Label\n data-slot=\"checkbox-label\"\n class=\"text-sm leading-none font-medium select-none peer-disabled:opacity-50\"\n >\n {local.children}\n </CheckboxPrimitive.Label>\n )}\n <CheckboxPrimitive.HiddenInput />\n </CheckboxPrimitive.Root>\n );\n}\n\nfunction CheckboxRoot(props: ComponentProps<typeof CheckboxPrimitive.Root>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n class={cn(\n \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction CheckboxControl(props: ComponentProps<typeof CheckboxPrimitive.Control>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CheckboxPrimitive.Control\n data-slot=\"checkbox-control\"\n class={cn(\n \"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction CheckboxIndicator(\n props: ComponentProps<typeof CheckboxPrimitive.Indicator> & { children?: any },\n) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n class={cn(\"[&>svg]:size-3.5\", local.class)}\n {...others}\n >\n {local.children ?? <CheckIcon />}\n </CheckboxPrimitive.Indicator>\n );\n}\n\nfunction CheckboxLabel(props: ComponentProps<typeof CheckboxPrimitive.Label>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <CheckboxPrimitive.Label\n data-slot=\"checkbox-label\"\n class={cn(\n \"text-sm leading-none font-medium select-none peer-disabled:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nconst CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;\nconst CheckboxGroup = CheckboxPrimitive.Group;\nconst CheckboxContext = CheckboxPrimitive.Context;\nconst CheckboxRootProvider = CheckboxPrimitive.RootProvider;\n\nexport {\n Checkbox,\n CheckboxRoot,\n CheckboxControl,\n CheckboxIndicator,\n CheckboxLabel,\n CheckboxHiddenInput,\n CheckboxGroup,\n CheckboxContext,\n CheckboxRootProvider,\n};\n",
|
|
782
838
|
type: "registry:ui",
|
|
783
839
|
path: "checkbox.tsx"
|
|
784
840
|
}]
|
|
@@ -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
|
}]
|
|
@@ -861,7 +916,7 @@ const PRESETS = { monochrome: {
|
|
|
861
916
|
"solid-js"
|
|
862
917
|
],
|
|
863
918
|
files: [{
|
|
864
|
-
content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\n\nfunction Input(props: ComponentProps<typeof sprawlify.input>) {\n const [local, others] = splitProps(props, [\"class\", \"type\"]);\n\n return (\n <sprawlify.input\n type={local.type}\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n class={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-
|
|
919
|
+
content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\n\nfunction Input(props: ComponentProps<typeof sprawlify.input>) {\n const [local, others] = splitProps(props, [\"class\", \"type\"]);\n\n return (\n <sprawlify.input\n type={local.type}\n data-scope=\"input\"\n data-part=\"root\"\n data-slot=\"input\"\n class={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-input/30 px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-input/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nexport { Input };\n",
|
|
865
920
|
type: "registry:ui",
|
|
866
921
|
path: "input.tsx"
|
|
867
922
|
}]
|
|
@@ -878,7 +933,7 @@ const PRESETS = { monochrome: {
|
|
|
878
933
|
"solid-js"
|
|
879
934
|
],
|
|
880
935
|
files: [{
|
|
881
|
-
content: "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { type ComponentProps, splitProps } from \"solid-js\";\n\nfunction InputGroup(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n role=\"group\"\n class={cn(\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nfunction InputGroupAddon(\n props: ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>,\n) {\n const [local, others] = splitProps(props, [\"class\", \"align\"]);\n const align = () => local.align ?? \"inline-start\";\n\n return (\n <sprawlify.div\n role=\"group\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n data-align={align()}\n class={cn(inputGroupAddonVariants({ align: align() }), local.class)}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...others}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nfunction InputGroupButton(\n props: Omit<ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>,\n) {\n const [local, others] = splitProps(props, [\"class\", \"type\", \"variant\", \"size\"]);\n const type = () => local.type ?? \"button\";\n const variant = () => local.variant ?? \"ghost\";\n const size = () => local.size ?? \"xs\";\n\n return (\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n type={type()}\n data-size={size()}\n variant={variant()}\n class={cn(inputGroupButtonVariants({ size: size() }), local.class)}\n {...others}\n />\n );\n}\n\nfunction InputGroupText(props: ComponentProps<typeof sprawlify.span>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n class={cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction InputGroupInput(props: ComponentProps<typeof sprawlify.input>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n class={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction InputGroupTextarea(props: ComponentProps<typeof sprawlify.textarea>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <Textarea\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n class={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n",
|
|
936
|
+
content: "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { type ComponentProps, splitProps } from \"solid-js\";\n\nfunction InputGroup(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-scope=\"input-group\"\n data-part=\"root\"\n data-slot=\"input-group\"\n role=\"group\"\n class={cn(\n \"border-input bg-input/30 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nfunction InputGroupAddon(\n props: ComponentProps<typeof sprawlify.div> & VariantProps<typeof inputGroupAddonVariants>,\n) {\n const [local, others] = splitProps(props, [\"class\", \"align\"]);\n const align = () => local.align ?? \"inline-start\";\n\n return (\n <sprawlify.div\n role=\"group\"\n data-scope=\"input-group\"\n data-part=\"addon\"\n data-slot=\"input-group-addon\"\n data-align={align()}\n class={cn(inputGroupAddonVariants({ align: align() }), local.class)}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...others}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nfunction InputGroupButton(\n props: Omit<ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>,\n) {\n const [local, others] = splitProps(props, [\"class\", \"type\", \"variant\", \"size\"]);\n const type = () => local.type ?? \"button\";\n const variant = () => local.variant ?? \"ghost\";\n const size = () => local.size ?? \"xs\";\n\n return (\n <Button\n data-scope=\"input-group\"\n data-part=\"button\"\n type={type()}\n data-size={size()}\n variant={variant()}\n class={cn(inputGroupButtonVariants({ size: size() }), local.class)}\n {...others}\n />\n );\n}\n\nfunction InputGroupText(props: ComponentProps<typeof sprawlify.span>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.span\n data-scope=\"input-group\"\n data-part=\"text\"\n data-slot=\"input-group-text\"\n class={cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction InputGroupInput(props: ComponentProps<typeof sprawlify.input>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <Input\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n class={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction InputGroupTextarea(props: ComponentProps<typeof sprawlify.textarea>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <Textarea\n data-scope=\"input-group\"\n data-part=\"control\"\n data-slot=\"input-group-control\"\n class={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n",
|
|
882
937
|
type: "registry:ui",
|
|
883
938
|
path: "input-group.tsx"
|
|
884
939
|
}]
|
|
@@ -933,7 +988,7 @@ const PRESETS = { monochrome: {
|
|
|
933
988
|
"solid-js"
|
|
934
989
|
],
|
|
935
990
|
files: [{
|
|
936
|
-
content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { ChevronDownIcon } from \"lucide-solid\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\n\ntype NativeSelectProps = Omit<ComponentProps<typeof sprawlify.select>, \"size\"> & {\n size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect(props: NativeSelectProps) {\n const [local, others] = splitProps(props, [\"class\", \"size\"]);\n const size = () => local.size || \"default\";\n\n return (\n <div\n class={cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", local.class)}\n data-scope=\"native-select\"\n data-part=\"root\"\n data-slot=\"native-select-root\"\n data-size={size()}\n >\n <sprawlify.select\n data-slot=\"native-select\"\n data-size={size()}\n class=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-
|
|
991
|
+
content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { ChevronDownIcon } from \"lucide-solid\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\n\ntype NativeSelectProps = Omit<ComponentProps<typeof sprawlify.select>, \"size\"> & {\n size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect(props: NativeSelectProps) {\n const [local, others] = splitProps(props, [\"class\", \"size\"]);\n const size = () => local.size || \"default\";\n\n return (\n <div\n class={cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", local.class)}\n data-scope=\"native-select\"\n data-part=\"root\"\n data-slot=\"native-select-root\"\n data-size={size()}\n >\n <sprawlify.select\n data-slot=\"native-select\"\n data-size={size()}\n class=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-input/30 py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n {...others}\n />\n <ChevronDownIcon\n class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n aria-hidden=\"true\"\n data-slot=\"native-select-icon\"\n />\n </div>\n );\n}\n\nfunction NativeSelectOption(props: ComponentProps<typeof sprawlify.option>) {\n return (\n <sprawlify.option\n data-scope=\"native-select\"\n data-part=\"option\"\n data-slot=\"native-select-option\"\n {...props}\n />\n );\n}\n\nfunction NativeSelectOptGroup(props: ComponentProps<typeof sprawlify.optgroup>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.optgroup\n data-scope=\"native-select\"\n data-part=\"optgroup\"\n data-slot=\"native-select-optgroup\"\n class={cn(local.class)}\n {...others}\n />\n );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n",
|
|
937
992
|
type: "registry:ui",
|
|
938
993
|
path: "native-select.tsx"
|
|
939
994
|
}]
|
|
@@ -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\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport { Select as SelectPrimitive } from \"@sprawlify/solid/select\";\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-solid\";\nimport { splitProps, type ComponentProps } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nfunction Select(props: ComponentProps<typeof SelectPrimitive.Root>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectControl(props: ComponentProps<typeof SelectPrimitive.Control>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <SelectPrimitive.Control\n data-slot=\"select-control\"\n class={cn(\"relative flex w-full items-center\", local.class)}\n {...others}\n >\n {local.children}\n </SelectPrimitive.Control>\n );\n}\n\nfunction SelectTrigger(props: ComponentProps<typeof SelectPrimitive.Trigger>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n class={cn(\n \"flex h-9 w-full items-center gap-2 rounded-md border border-input bg-input/30 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 local.class,\n )}\n {...others}\n >\n <div class=\"flex gap-2\">{local.children}</div>\n </SelectPrimitive.Trigger>\n );\n}\n\nfunction SelectIndicatorGroup(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <sprawlify.div\n data-slot=\"select-indicator-group\"\n class={cn(\n \"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-1 px-2.5\",\n local.class,\n )}\n {...others}\n >\n {local.children}\n </sprawlify.div>\n );\n}\n\nfunction SelectIndicator(props: ComponentProps<typeof SelectPrimitive.Indicator>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <SelectPrimitive.Indicator\n data-slot=\"select-indicator\"\n class={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 local.class,\n )}\n {...others}\n >\n {local.children ?? <ChevronsUpDownIcon />}\n </SelectPrimitive.Indicator>\n );\n}\n\nfunction SelectValue(props: ComponentProps<typeof SelectPrimitive.ValueText>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SelectPrimitive.ValueText\n data-slot=\"select-value\"\n class={cn(\"line-clamp-1 flex-1 text-left\", local.class)}\n {...others}\n />\n );\n}\n\nfunction SelectPositioner(props: ComponentProps<typeof SelectPrimitive.Positioner>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SelectPrimitive.Positioner\n data-slot=\"select-positioner\"\n class={cn(\"outline-none\", local.class)}\n {...others}\n />\n );\n}\n\nfunction SelectContent(props: ComponentProps<typeof SelectPrimitive.Content>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <Portal>\n <SelectPrimitive.Positioner data-slot=\"select-positioner\" class=\"outline-none\">\n <SelectPrimitive.Content\n data-slot=\"select-content\"\n class={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 local.class,\n )}\n {...others}\n >\n {local.children}\n </SelectPrimitive.Content>\n </SelectPrimitive.Positioner>\n </Portal>\n );\n}\n\nconst SelectHiddenSelect = SelectPrimitive.HiddenSelect;\n\nfunction SelectItem(props: ComponentProps<typeof SelectPrimitive.Item>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n class={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 local.class,\n )}\n {...others}\n >\n {local.children}\n </SelectPrimitive.Item>\n );\n}\n\nconst SelectItemText = SelectPrimitive.ItemText;\n\nfunction SelectItemIndicator(props: ComponentProps<typeof SelectPrimitive.ItemIndicator>) {\n const [local, others] = splitProps(props, [\"class\", \"children\"]);\n\n return (\n <SelectPrimitive.ItemIndicator\n data-slot=\"select-item-indicator\"\n class={cn(\"absolute right-2 flex size-4 items-center justify-center\", local.class)}\n {...others}\n >\n {local.children ?? <CheckIcon />}\n </SelectPrimitive.ItemIndicator>\n );\n}\n\nfunction SelectItemGroup(props: ComponentProps<typeof SelectPrimitive.ItemGroup>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SelectPrimitive.ItemGroup\n data-slot=\"select-item-group\"\n class={cn(\"flex flex-col\", local.class)}\n {...others}\n />\n );\n}\n\nfunction SelectItemGroupLabel(props: ComponentProps<typeof SelectPrimitive.ItemGroupLabel>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SelectPrimitive.ItemGroupLabel\n data-slot=\"select-item-group-label\"\n class={cn(\n \"px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction SelectLabel(props: ComponentProps<typeof SelectPrimitive.Label>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SelectPrimitive.Label\n data-slot=\"select-label\"\n class={cn(\n \"text-sm leading-none font-medium select-none data-disabled:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction SelectSeparator(props: ComponentProps<typeof sprawlify.div>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.div\n data-slot=\"select-separator\"\n class={cn(\"-mx-1 my-1 h-px bg-border\", local.class)}\n {...others}\n />\n );\n}\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",
|
|
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\";\nimport { Switch as SwitchPrimitive } from \"@sprawlify/solid/switch\";\nimport { type ComponentProps, splitProps } from \"solid-js\";\n\nfunction Switch(\n props: ComponentProps<typeof SwitchPrimitive.Root> & {\n size?: \"sm\" | \"default\";\n },\n) {\n const [local, others] = splitProps(props, [\"class\", \"size\"]);\n const size = () => local.size ?? \"default\";\n\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-size={size()}\n class={cn(\n \"group/switch inline-flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction SwitchControl(props: ComponentProps<typeof SwitchPrimitive.Control>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SwitchPrimitive.Control\n data-slot=\"switch-control\"\n class={cn(\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\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction SwitchThumb(props: ComponentProps<typeof SwitchPrimitive.Thumb>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n class={cn(\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\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nfunction SwitchLabel(props: ComponentProps<typeof SwitchPrimitive.Label>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <SwitchPrimitive.Label\n data-slot=\"switch-label\"\n class={cn(\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\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nconst SwitchHiddenInput = SwitchPrimitive.HiddenInput;\nconst SwitchContext = SwitchPrimitive.Context;\nconst SwitchRootProvider = SwitchPrimitive.RootProvider;\n\nexport {\n Switch,\n SwitchControl,\n SwitchThumb,\n SwitchLabel,\n SwitchHiddenInput,\n SwitchContext,\n SwitchRootProvider,\n};\n",
|
|
1046
|
+
type: "registry:ui",
|
|
1047
|
+
path: "switch.tsx"
|
|
1048
|
+
}]
|
|
1049
|
+
},
|
|
967
1050
|
{
|
|
968
1051
|
name: "table",
|
|
969
1052
|
dependencies: [
|
|
@@ -999,7 +1082,7 @@ const PRESETS = { monochrome: {
|
|
|
999
1082
|
"solid-js"
|
|
1000
1083
|
],
|
|
1001
1084
|
files: [{
|
|
1002
|
-
content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\n\nfunction Textarea(props: ComponentProps<typeof sprawlify.textarea>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n class={cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-
|
|
1085
|
+
content: "import { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/solid\";\nimport type { ComponentProps } from \"solid-js\";\nimport { splitProps } from \"solid-js\";\n\nfunction Textarea(props: ComponentProps<typeof sprawlify.textarea>) {\n const [local, others] = splitProps(props, [\"class\"]);\n\n return (\n <sprawlify.textarea\n data-scope=\"textarea\"\n data-part=\"root\"\n data-slot=\"textarea\"\n class={cn(\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-input/30 px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n local.class,\n )}\n {...others}\n />\n );\n}\n\nexport { Textarea };\n",
|
|
1003
1086
|
type: "registry:ui",
|
|
1004
1087
|
path: "textarea.tsx"
|
|
1005
1088
|
}]
|
|
@@ -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(88% 0.011 106.6);\n --secondary-foreground: oklch(15.3% 0.006 107.1);\n --muted: oklch(93% 0.007 106.5);\n --muted-foreground: oklch(55.6% 0 0);\n --accent: oklch(96.6% 0.005 106.5);\n --accent-foreground: oklch(22.8% 0.013 107.4);\n --destructive: oklch(57.7% 0.245 27.325);\n --destructive-foreground: oklch(57.7% 0.245 27.325);\n --border: oklch(88% 0.011 106.6);\n --input: oklch(88% 0.011 106.6);\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(96.6% 0.005 106.5);\n --sidebar-accent-foreground: oklch(22.8% 0.013 107.4);\n --sidebar-border: oklch(88% 0.011 106.6);\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(22.8% 0.013 107.4);\n --muted-foreground: oklch(73.7% 0.021 106.9);\n --accent: oklch(22.8% 0.013 107.4);\n --accent-foreground: oklch(96.6% 0.005 106.5);\n --destructive: oklch(39.6% 0.141 25.723);\n --destructive-foreground: oklch(63.7% 0.237 25.331);\n --border: oklch(28.6% 0.016 107.4);\n --input: oklch(28.6% 0.016 107.4);\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(22.8% 0.013 107.4);\n --sidebar-accent-foreground: oklch(96.6% 0.005 106.5);\n --sidebar-border: oklch(28.6% 0.016 107.4);\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,\n 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,23 +1573,108 @@ 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: [
|
|
1496
1641
|
"@/lib/utils",
|
|
1497
1642
|
"@sprawlify/svelte",
|
|
1498
|
-
"
|
|
1499
|
-
"svelte"
|
|
1643
|
+
"svelte",
|
|
1644
|
+
"lucide-svelte"
|
|
1500
1645
|
],
|
|
1501
|
-
files: [
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1646
|
+
files: [
|
|
1647
|
+
{
|
|
1648
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\r\nimport type { ComponentProps } from \"svelte\";\r\n\r\ninterface Props extends ComponentProps<typeof CheckboxPrimitive.Control> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props();\r\n<\/script>\r\n\r\n<CheckboxPrimitive.Control\r\n data-slot=\"checkbox-control\"\r\n class={cn(\r\n \"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CheckboxPrimitive.Control>",
|
|
1649
|
+
type: "registry:ui",
|
|
1650
|
+
path: "checkbox/checkbox-control.svelte"
|
|
1651
|
+
},
|
|
1652
|
+
{
|
|
1653
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\r\nimport { CheckIcon } from \"lucide-svelte\";\r\nimport type { ComponentProps, Snippet } from \"svelte\";\r\n\r\ninterface Props extends ComponentProps<typeof CheckboxPrimitive.Indicator> {\r\n children?: Snippet;\r\n}\r\n\r\nlet { class: className, children, ...rest }: Props = $props();\r\n<\/script>\r\n\r\n<CheckboxPrimitive.Indicator\r\n data-slot=\"checkbox-indicator\"\r\n class={cn(\"[&>svg]:size-3.5\", className)}\r\n {...rest}\r\n>\r\n {#if children}\r\n {@render children()}\r\n {:else}\r\n <CheckIcon />\r\n {/if}\r\n</CheckboxPrimitive.Indicator>",
|
|
1654
|
+
type: "registry:ui",
|
|
1655
|
+
path: "checkbox/checkbox-indicator.svelte"
|
|
1656
|
+
},
|
|
1657
|
+
{
|
|
1658
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\r\nimport type { ComponentProps, Snippet } from \"svelte\";\r\n\r\ninterface Props extends ComponentProps<typeof CheckboxPrimitive.Label> {\r\n children?: Snippet;\r\n}\r\n\r\nlet { class: className, children, ...rest }: Props = $props();\r\n<\/script>\r\n\r\n<CheckboxPrimitive.Label\r\n data-slot=\"checkbox-label\"\r\n class={cn(\r\n \"text-sm leading-none font-medium select-none peer-disabled:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CheckboxPrimitive.Label>",
|
|
1659
|
+
type: "registry:ui",
|
|
1660
|
+
path: "checkbox/checkbox-label.svelte"
|
|
1661
|
+
},
|
|
1662
|
+
{
|
|
1663
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\r\nimport type { ComponentProps, Snippet } from \"svelte\";\r\n\r\ninterface Props extends ComponentProps<typeof CheckboxPrimitive.Root> {\r\n children?: Snippet;\r\n}\r\n\r\nlet { class: className, children, ...rest }: Props = $props();\r\n<\/script>\r\n\r\n<CheckboxPrimitive.Root\r\n data-slot=\"checkbox\"\r\n class={cn(\r\n \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</CheckboxPrimitive.Root>",
|
|
1664
|
+
type: "registry:ui",
|
|
1665
|
+
path: "checkbox/checkbox-root.svelte"
|
|
1666
|
+
},
|
|
1667
|
+
{
|
|
1668
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\r\nimport { Check, Minus } from \"lucide-svelte\";\r\nimport type { ComponentProps } from \"svelte\";\r\n\r\ninterface Props extends ComponentProps<typeof CheckboxPrimitive.Root> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props();\r\n<\/script>\r\n\r\n<CheckboxPrimitive.Root\r\n data-slot=\"checkbox\"\r\n class={cn(\r\n \"group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n <CheckboxPrimitive.Control\r\n data-slot=\"checkbox-control\"\r\n class=\"bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\"\r\n >\r\n <CheckboxPrimitive.Indicator\r\n data-slot=\"checkbox-indicator\"\r\n class=\"[&>svg]:size-3.5\"\r\n >\r\n <Check />\r\n </CheckboxPrimitive.Indicator>\r\n <CheckboxPrimitive.Indicator\r\n data-slot=\"checkbox-indicator\"\r\n class=\"[&>svg]:size-3.5\"\r\n indeterminate\r\n >\r\n <Minus />\r\n </CheckboxPrimitive.Indicator>\r\n </CheckboxPrimitive.Control>\r\n {#if children}\r\n <CheckboxPrimitive.Label\r\n data-slot=\"checkbox-label\"\r\n class=\"text-sm leading-none font-medium select-none peer-disabled:opacity-50\"\r\n >\r\n {@render children()}\r\n </CheckboxPrimitive.Label>\r\n {/if}\r\n <CheckboxPrimitive.HiddenInput />\r\n</CheckboxPrimitive.Root>",
|
|
1669
|
+
type: "registry:ui",
|
|
1670
|
+
path: "checkbox/checkbox.svelte"
|
|
1671
|
+
},
|
|
1672
|
+
{
|
|
1673
|
+
content: "import { Checkbox as CheckboxPrimitive } from \"@sprawlify/svelte/checkbox\";\n\nexport { default as Checkbox } from \"./checkbox.svelte\";\nexport { default as CheckboxRoot } from \"./checkbox-root.svelte\";\nexport { default as CheckboxControl } from \"./checkbox-control.svelte\";\nexport { default as CheckboxIndicator } from \"./checkbox-indicator.svelte\";\nexport { default as CheckboxLabel } from \"./checkbox-label.svelte\";\n\nexport const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;\nexport const CheckboxGroup = CheckboxPrimitive.Group;\nexport const CheckboxContext = CheckboxPrimitive.Context;\nexport const CheckboxRootProvider = CheckboxPrimitive.RootProvider;\n",
|
|
1674
|
+
type: "registry:ui",
|
|
1675
|
+
path: "checkbox/index.ts"
|
|
1676
|
+
}
|
|
1677
|
+
]
|
|
1510
1678
|
},
|
|
1511
1679
|
{
|
|
1512
1680
|
name: "collapsible",
|
|
@@ -1743,66 +1911,69 @@ const PRESETS = { monochrome: {
|
|
|
1743
1911
|
name: "field",
|
|
1744
1912
|
dependencies: [
|
|
1745
1913
|
"@/lib/utils",
|
|
1746
|
-
"svelte/elements",
|
|
1747
1914
|
"@sprawlify/svelte",
|
|
1748
|
-
"
|
|
1915
|
+
"svelte/elements",
|
|
1749
1916
|
"svelte",
|
|
1750
|
-
"@/components/ui/separator"
|
|
1751
|
-
"class-variance-authority"
|
|
1917
|
+
"@/components/ui/separator"
|
|
1752
1918
|
],
|
|
1753
1919
|
files: [
|
|
1754
1920
|
{
|
|
1755
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type
|
|
1921
|
+
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
1922
|
type: "registry:ui",
|
|
1757
1923
|
path: "field/field-content.svelte"
|
|
1758
1924
|
},
|
|
1759
1925
|
{
|
|
1760
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1926
|
+
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
1927
|
type: "registry:ui",
|
|
1762
1928
|
path: "field/field-description.svelte"
|
|
1763
1929
|
},
|
|
1764
1930
|
{
|
|
1765
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport
|
|
1931
|
+
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
1932
|
type: "registry:ui",
|
|
1767
1933
|
path: "field/field-error.svelte"
|
|
1768
1934
|
},
|
|
1769
1935
|
{
|
|
1770
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type
|
|
1936
|
+
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
1937
|
type: "registry:ui",
|
|
1772
1938
|
path: "field/field-group.svelte"
|
|
1773
1939
|
},
|
|
1774
1940
|
{
|
|
1775
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1941
|
+
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
1942
|
type: "registry:ui",
|
|
1777
1943
|
path: "field/field-label.svelte"
|
|
1778
1944
|
},
|
|
1779
1945
|
{
|
|
1780
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport
|
|
1946
|
+
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
1947
|
type: "registry:ui",
|
|
1782
1948
|
path: "field/field-legend.svelte"
|
|
1783
1949
|
},
|
|
1784
1950
|
{
|
|
1785
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1951
|
+
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",
|
|
1952
|
+
type: "registry:ui",
|
|
1953
|
+
path: "field/field-required-indicator.svelte"
|
|
1954
|
+
},
|
|
1955
|
+
{
|
|
1956
|
+
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
1957
|
type: "registry:ui",
|
|
1787
1958
|
path: "field/field-separator.svelte"
|
|
1788
1959
|
},
|
|
1789
1960
|
{
|
|
1790
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport {
|
|
1961
|
+
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
1962
|
type: "registry:ui",
|
|
1792
1963
|
path: "field/field-set.svelte"
|
|
1793
1964
|
},
|
|
1794
1965
|
{
|
|
1795
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport type
|
|
1966
|
+
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
1967
|
type: "registry:ui",
|
|
1797
1968
|
path: "field/field-title.svelte"
|
|
1798
1969
|
},
|
|
1799
1970
|
{
|
|
1800
|
-
content: "<script lang=\"ts\">\r\nimport {
|
|
1971
|
+
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
1972
|
type: "registry:ui",
|
|
1802
1973
|
path: "field/field.svelte"
|
|
1803
1974
|
},
|
|
1804
1975
|
{
|
|
1805
|
-
content: "export { default as Field } from \"./field.svelte\";\nexport { default as
|
|
1976
|
+
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
1977
|
type: "registry:ui",
|
|
1807
1978
|
path: "field/index.ts"
|
|
1808
1979
|
}
|
|
@@ -1820,7 +1991,7 @@ const PRESETS = { monochrome: {
|
|
|
1820
1991
|
type: "registry:ui",
|
|
1821
1992
|
path: "input/index.ts"
|
|
1822
1993
|
}, {
|
|
1823
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLInputAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLInputAttributes, PolymorphicProps<\"input\"> {}\r\n \r\nlet { class: className, type, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"input\"\r\n type={type}\r\n data-scope=\"input\"\r\n data-part=\"root\"\r\n data-slot=\"input\"\r\n class={cn(\r\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-
|
|
1994
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLInputAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLInputAttributes, PolymorphicProps<\"input\"> {}\r\n \r\nlet { class: className, type, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"input\"\r\n type={type}\r\n data-scope=\"input\"\r\n data-part=\"root\"\r\n data-slot=\"input\"\r\n class={cn(\r\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-input/30 px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-input/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n/>",
|
|
1824
1995
|
type: "registry:ui",
|
|
1825
1996
|
path: "input/input.svelte"
|
|
1826
1997
|
}]
|
|
@@ -1869,7 +2040,7 @@ const PRESETS = { monochrome: {
|
|
|
1869
2040
|
path: "input-group/input-group-textarea.svelte"
|
|
1870
2041
|
},
|
|
1871
2042
|
{
|
|
1872
|
-
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=\"input-group\"\r\n data-part=\"root\"\r\n data-slot=\"input-group\"\r\n role=\"group\"\r\n class={cn(\r\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>",
|
|
2043
|
+
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=\"input-group\"\r\n data-part=\"root\"\r\n data-slot=\"input-group\"\r\n role=\"group\"\r\n class={cn(\r\n \"border-input bg-input/30 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\r\n className\r\n )}\r\n {...rest}\r\n>\r\n {@render children?.()}\r\n</Sprawlify>",
|
|
1873
2044
|
type: "registry:ui",
|
|
1874
2045
|
path: "input-group/input-group.svelte"
|
|
1875
2046
|
}
|
|
@@ -2008,7 +2179,7 @@ const PRESETS = { monochrome: {
|
|
|
2008
2179
|
path: "native-select/native-select-option.svelte"
|
|
2009
2180
|
},
|
|
2010
2181
|
{
|
|
2011
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDownIcon } from \"lucide-svelte\"\r\nimport type { HTMLSelectAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends Omit<HTMLSelectAttributes, \"size\"> {\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<div\r\n class={cn(\r\n \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\r\n className\r\n )}\r\n data-scope=\"native-select\"\r\n data-part=\"root\"\r\n data-slot=\"native-select-root\"\r\n data-size={size}\r\n>\r\n <select\r\n data-slot=\"native-select\"\r\n data-size={size}\r\n class=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-
|
|
2182
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDownIcon } from \"lucide-svelte\"\r\nimport type { HTMLSelectAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends Omit<HTMLSelectAttributes, \"size\"> {\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<div\r\n class={cn(\r\n \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\r\n className\r\n )}\r\n data-scope=\"native-select\"\r\n data-part=\"root\"\r\n data-slot=\"native-select-root\"\r\n data-size={size}\r\n>\r\n <select\r\n data-slot=\"native-select\"\r\n data-size={size}\r\n class=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-input/30 py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\r\n {...rest}\r\n >\r\n {@render children?.()}\r\n </select>\r\n <ChevronDownIcon class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\" aria-hidden=\"true\" data-slot=\"native-select-icon\" />\r\n</div>",
|
|
2012
2183
|
type: "registry:ui",
|
|
2013
2184
|
path: "native-select/native-select.svelte"
|
|
2014
2185
|
}
|
|
@@ -2039,6 +2210,93 @@ const PRESETS = { monochrome: {
|
|
|
2039
2210
|
}
|
|
2040
2211
|
]
|
|
2041
2212
|
},
|
|
2213
|
+
{
|
|
2214
|
+
name: "select",
|
|
2215
|
+
dependencies: [
|
|
2216
|
+
"@sprawlify/svelte",
|
|
2217
|
+
"@/lib/utils",
|
|
2218
|
+
"svelte",
|
|
2219
|
+
"svelte/elements",
|
|
2220
|
+
"lucide-svelte"
|
|
2221
|
+
],
|
|
2222
|
+
files: [
|
|
2223
|
+
{
|
|
2224
|
+
content: "export { SelectRoot as Select } from \"@sprawlify/svelte/select\";\nexport { default as SelectControl } from \"./select-control.svelte\";\nexport { default as SelectTrigger } from \"./select-trigger.svelte\";\nexport { default as SelectIndicatorGroup } from \"./select-indicator-group.svelte\";\nexport { default as SelectIndicator } from \"./select-indicator.svelte\";\nexport { default as SelectValue } from \"./select-value.svelte\";\nexport { default as SelectContent } from \"./select-content.svelte\";\nexport { default as SelectItem } from \"./select-item.svelte\";\nexport { default as SelectItemText } from \"./select-item-text.svelte\";\nexport { default as SelectItemIndicator } from \"./select-item-indicator.svelte\";\nexport { default as SelectItemGroup } from \"./select-item-group.svelte\";\nexport { default as SelectItemGroupLabel } from \"./select-item-group-label.svelte\";\nexport { default as SelectLabel } from \"./select-label.svelte\";\nexport { default as SelectSeparator } from \"./select-separator.svelte\";\nexport { SelectHiddenSelect, SelectContext, SelectRootProvider } from \"@sprawlify/svelte/select\";\n",
|
|
2225
|
+
type: "registry:ui",
|
|
2226
|
+
path: "select/index.ts"
|
|
2227
|
+
},
|
|
2228
|
+
{
|
|
2229
|
+
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",
|
|
2230
|
+
type: "registry:ui",
|
|
2231
|
+
path: "select/select-content.svelte"
|
|
2232
|
+
},
|
|
2233
|
+
{
|
|
2234
|
+
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",
|
|
2235
|
+
type: "registry:ui",
|
|
2236
|
+
path: "select/select-control.svelte"
|
|
2237
|
+
},
|
|
2238
|
+
{
|
|
2239
|
+
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",
|
|
2240
|
+
type: "registry:ui",
|
|
2241
|
+
path: "select/select-indicator-group.svelte"
|
|
2242
|
+
},
|
|
2243
|
+
{
|
|
2244
|
+
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",
|
|
2245
|
+
type: "registry:ui",
|
|
2246
|
+
path: "select/select-indicator.svelte"
|
|
2247
|
+
},
|
|
2248
|
+
{
|
|
2249
|
+
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",
|
|
2250
|
+
type: "registry:ui",
|
|
2251
|
+
path: "select/select-item-group-label.svelte"
|
|
2252
|
+
},
|
|
2253
|
+
{
|
|
2254
|
+
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",
|
|
2255
|
+
type: "registry:ui",
|
|
2256
|
+
path: "select/select-item-group.svelte"
|
|
2257
|
+
},
|
|
2258
|
+
{
|
|
2259
|
+
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",
|
|
2260
|
+
type: "registry:ui",
|
|
2261
|
+
path: "select/select-item-indicator.svelte"
|
|
2262
|
+
},
|
|
2263
|
+
{
|
|
2264
|
+
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",
|
|
2265
|
+
type: "registry:ui",
|
|
2266
|
+
path: "select/select-item-text.svelte"
|
|
2267
|
+
},
|
|
2268
|
+
{
|
|
2269
|
+
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",
|
|
2270
|
+
type: "registry:ui",
|
|
2271
|
+
path: "select/select-item.svelte"
|
|
2272
|
+
},
|
|
2273
|
+
{
|
|
2274
|
+
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",
|
|
2275
|
+
type: "registry:ui",
|
|
2276
|
+
path: "select/select-label.svelte"
|
|
2277
|
+
},
|
|
2278
|
+
{
|
|
2279
|
+
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",
|
|
2280
|
+
type: "registry:ui",
|
|
2281
|
+
path: "select/select-separator.svelte"
|
|
2282
|
+
},
|
|
2283
|
+
{
|
|
2284
|
+
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-input/30 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",
|
|
2285
|
+
type: "registry:ui",
|
|
2286
|
+
path: "select/select-trigger.svelte"
|
|
2287
|
+
},
|
|
2288
|
+
{
|
|
2289
|
+
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",
|
|
2290
|
+
type: "registry:ui",
|
|
2291
|
+
path: "select/select-value.svelte"
|
|
2292
|
+
},
|
|
2293
|
+
{
|
|
2294
|
+
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",
|
|
2295
|
+
type: "registry:ui",
|
|
2296
|
+
path: "select/select.svelte"
|
|
2297
|
+
}
|
|
2298
|
+
]
|
|
2299
|
+
},
|
|
2042
2300
|
{
|
|
2043
2301
|
name: "separator",
|
|
2044
2302
|
dependencies: [
|
|
@@ -2056,6 +2314,41 @@ const PRESETS = { monochrome: {
|
|
|
2056
2314
|
path: "separator/separator.svelte"
|
|
2057
2315
|
}]
|
|
2058
2316
|
},
|
|
2317
|
+
{
|
|
2318
|
+
name: "switch",
|
|
2319
|
+
dependencies: [
|
|
2320
|
+
"@sprawlify/svelte",
|
|
2321
|
+
"@/lib/utils",
|
|
2322
|
+
"svelte"
|
|
2323
|
+
],
|
|
2324
|
+
files: [
|
|
2325
|
+
{
|
|
2326
|
+
content: "import { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\";\n\nexport { default as Switch } from \"./switch.svelte\";\nexport { default as SwitchControl } from \"./switch-control.svelte\";\nexport { default as SwitchThumb } from \"./switch-thumb.svelte\";\nexport { default as SwitchLabel } from \"./switch-label.svelte\";\n\nexport const SwitchHiddenInput = SwitchPrimitive.HiddenInput;\nexport const SwitchContext = SwitchPrimitive.Context;\nexport const SwitchRootProvider = SwitchPrimitive.RootProvider;\n",
|
|
2327
|
+
type: "registry:ui",
|
|
2328
|
+
path: "switch/index.ts"
|
|
2329
|
+
},
|
|
2330
|
+
{
|
|
2331
|
+
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>",
|
|
2332
|
+
type: "registry:ui",
|
|
2333
|
+
path: "switch/switch-control.svelte"
|
|
2334
|
+
},
|
|
2335
|
+
{
|
|
2336
|
+
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>",
|
|
2337
|
+
type: "registry:ui",
|
|
2338
|
+
path: "switch/switch-label.svelte"
|
|
2339
|
+
},
|
|
2340
|
+
{
|
|
2341
|
+
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/>",
|
|
2342
|
+
type: "registry:ui",
|
|
2343
|
+
path: "switch/switch-thumb.svelte"
|
|
2344
|
+
},
|
|
2345
|
+
{
|
|
2346
|
+
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>",
|
|
2347
|
+
type: "registry:ui",
|
|
2348
|
+
path: "switch/switch.svelte"
|
|
2349
|
+
}
|
|
2350
|
+
]
|
|
2351
|
+
},
|
|
2059
2352
|
{
|
|
2060
2353
|
name: "table",
|
|
2061
2354
|
dependencies: [
|
|
@@ -2159,7 +2452,7 @@ const PRESETS = { monochrome: {
|
|
|
2159
2452
|
type: "registry:ui",
|
|
2160
2453
|
path: "textarea/index.ts"
|
|
2161
2454
|
}, {
|
|
2162
|
-
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLTextareaAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLTextareaAttributes, PolymorphicProps<\"textarea\"> {}\r\n \r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"textarea\"\r\n data-scope=\"textarea\"\r\n data-part=\"root\"\r\n data-slot=\"textarea\"\r\n class={cn(\r\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-
|
|
2455
|
+
content: "<script lang=\"ts\">\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Sprawlify, type PolymorphicProps } from \"@sprawlify/svelte\"\r\nimport type { HTMLTextareaAttributes } from \"svelte/elements\"\r\n\r\ninterface Props extends HTMLTextareaAttributes, PolymorphicProps<\"textarea\"> {}\r\n \r\nlet { class: className, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<Sprawlify\r\n as=\"textarea\"\r\n data-scope=\"textarea\"\r\n data-part=\"root\"\r\n data-slot=\"textarea\"\r\n class={cn(\r\n \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-input/30 px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n/>",
|
|
2163
2456
|
type: "registry:ui",
|
|
2164
2457
|
path: "textarea/textarea.svelte"
|
|
2165
2458
|
}]
|