sprawlify 0.1.19 → 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 +59 -36
- 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\";\
|
|
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",
|
|
@@ -376,7 +376,7 @@ const PRESETS = { monochrome: {
|
|
|
376
376
|
"lucide-react"
|
|
377
377
|
],
|
|
378
378
|
files: [{
|
|
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 } 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",
|
|
380
380
|
type: "registry:ui",
|
|
381
381
|
path: "checkbox.tsx"
|
|
382
382
|
}]
|
|
@@ -455,7 +455,7 @@ const PRESETS = { monochrome: {
|
|
|
455
455
|
"@sprawlify/react"
|
|
456
456
|
],
|
|
457
457
|
files: [{
|
|
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-
|
|
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",
|
|
459
459
|
type: "registry:ui",
|
|
460
460
|
path: "input.tsx"
|
|
461
461
|
}]
|
|
@@ -472,7 +472,7 @@ const PRESETS = { monochrome: {
|
|
|
472
472
|
"@sprawlify/react"
|
|
473
473
|
],
|
|
474
474
|
files: [{
|
|
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 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",
|
|
476
476
|
type: "registry:ui",
|
|
477
477
|
path: "input-group.tsx"
|
|
478
478
|
}]
|
|
@@ -522,7 +522,7 @@ const PRESETS = { monochrome: {
|
|
|
522
522
|
"lucide-react"
|
|
523
523
|
],
|
|
524
524
|
files: [{
|
|
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-
|
|
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",
|
|
526
526
|
type: "registry:ui",
|
|
527
527
|
path: "native-select.tsx"
|
|
528
528
|
}]
|
|
@@ -549,7 +549,7 @@ const PRESETS = { monochrome: {
|
|
|
549
549
|
"lucide-react"
|
|
550
550
|
],
|
|
551
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-
|
|
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
553
|
type: "registry:ui",
|
|
554
554
|
path: "select.tsx"
|
|
555
555
|
}]
|
|
@@ -575,7 +575,7 @@ const PRESETS = { monochrome: {
|
|
|
575
575
|
"@sprawlify/react"
|
|
576
576
|
],
|
|
577
577
|
files: [{
|
|
578
|
-
content: "\"use client\"
|
|
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
579
|
type: "registry:ui",
|
|
580
580
|
path: "switch.tsx"
|
|
581
581
|
}]
|
|
@@ -615,7 +615,7 @@ const PRESETS = { monochrome: {
|
|
|
615
615
|
"@sprawlify/react"
|
|
616
616
|
],
|
|
617
617
|
files: [{
|
|
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-
|
|
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",
|
|
619
619
|
type: "registry:ui",
|
|
620
620
|
path: "textarea.tsx"
|
|
621
621
|
}]
|
|
@@ -657,7 +657,7 @@ const PRESETS = { monochrome: {
|
|
|
657
657
|
"tailwind-scrollbar": "^4.0.2",
|
|
658
658
|
"tw-animate-css": "^1.4.0"
|
|
659
659
|
},
|
|
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(
|
|
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" },
|
|
661
661
|
items: [
|
|
662
662
|
{
|
|
663
663
|
name: "accordion",
|
|
@@ -834,7 +834,7 @@ const PRESETS = { monochrome: {
|
|
|
834
834
|
"solid-js"
|
|
835
835
|
],
|
|
836
836
|
files: [{
|
|
837
|
-
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",
|
|
838
838
|
type: "registry:ui",
|
|
839
839
|
path: "checkbox.tsx"
|
|
840
840
|
}]
|
|
@@ -916,7 +916,7 @@ const PRESETS = { monochrome: {
|
|
|
916
916
|
"solid-js"
|
|
917
917
|
],
|
|
918
918
|
files: [{
|
|
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-
|
|
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",
|
|
920
920
|
type: "registry:ui",
|
|
921
921
|
path: "input.tsx"
|
|
922
922
|
}]
|
|
@@ -933,7 +933,7 @@ const PRESETS = { monochrome: {
|
|
|
933
933
|
"solid-js"
|
|
934
934
|
],
|
|
935
935
|
files: [{
|
|
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 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",
|
|
937
937
|
type: "registry:ui",
|
|
938
938
|
path: "input-group.tsx"
|
|
939
939
|
}]
|
|
@@ -988,7 +988,7 @@ const PRESETS = { monochrome: {
|
|
|
988
988
|
"solid-js"
|
|
989
989
|
],
|
|
990
990
|
files: [{
|
|
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-
|
|
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",
|
|
992
992
|
type: "registry:ui",
|
|
993
993
|
path: "native-select.tsx"
|
|
994
994
|
}]
|
|
@@ -1016,7 +1016,7 @@ const PRESETS = { monochrome: {
|
|
|
1016
1016
|
"solid-js/web"
|
|
1017
1017
|
],
|
|
1018
1018
|
files: [{
|
|
1019
|
-
content: "import { cn } from \"@/lib/utils\";\
|
|
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
1020
|
type: "registry:ui",
|
|
1021
1021
|
path: "select.tsx"
|
|
1022
1022
|
}]
|
|
@@ -1042,7 +1042,7 @@ const PRESETS = { monochrome: {
|
|
|
1042
1042
|
"solid-js"
|
|
1043
1043
|
],
|
|
1044
1044
|
files: [{
|
|
1045
|
-
content: "import { cn } from \"@/lib/utils\";\
|
|
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
1046
|
type: "registry:ui",
|
|
1047
1047
|
path: "switch.tsx"
|
|
1048
1048
|
}]
|
|
@@ -1082,7 +1082,7 @@ const PRESETS = { monochrome: {
|
|
|
1082
1082
|
"solid-js"
|
|
1083
1083
|
],
|
|
1084
1084
|
files: [{
|
|
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-
|
|
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",
|
|
1086
1086
|
type: "registry:ui",
|
|
1087
1087
|
path: "textarea.tsx"
|
|
1088
1088
|
}]
|
|
@@ -1125,7 +1125,7 @@ const PRESETS = { monochrome: {
|
|
|
1125
1125
|
"tailwind-scrollbar": "^4.0.2",
|
|
1126
1126
|
"tw-animate-css": "^1.4.0"
|
|
1127
1127
|
},
|
|
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(
|
|
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" },
|
|
1129
1129
|
items: [
|
|
1130
1130
|
{
|
|
1131
1131
|
name: "accordion",
|
|
@@ -1640,18 +1640,41 @@ const PRESETS = { monochrome: {
|
|
|
1640
1640
|
dependencies: [
|
|
1641
1641
|
"@/lib/utils",
|
|
1642
1642
|
"@sprawlify/svelte",
|
|
1643
|
-
"
|
|
1644
|
-
"svelte"
|
|
1643
|
+
"svelte",
|
|
1644
|
+
"lucide-svelte"
|
|
1645
1645
|
],
|
|
1646
|
-
files: [
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
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
|
+
]
|
|
1655
1678
|
},
|
|
1656
1679
|
{
|
|
1657
1680
|
name: "collapsible",
|
|
@@ -1968,7 +1991,7 @@ const PRESETS = { monochrome: {
|
|
|
1968
1991
|
type: "registry:ui",
|
|
1969
1992
|
path: "input/index.ts"
|
|
1970
1993
|
}, {
|
|
1971
|
-
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/>",
|
|
1972
1995
|
type: "registry:ui",
|
|
1973
1996
|
path: "input/input.svelte"
|
|
1974
1997
|
}]
|
|
@@ -2017,7 +2040,7 @@ const PRESETS = { monochrome: {
|
|
|
2017
2040
|
path: "input-group/input-group-textarea.svelte"
|
|
2018
2041
|
},
|
|
2019
2042
|
{
|
|
2020
|
-
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>",
|
|
2021
2044
|
type: "registry:ui",
|
|
2022
2045
|
path: "input-group/input-group.svelte"
|
|
2023
2046
|
}
|
|
@@ -2156,7 +2179,7 @@ const PRESETS = { monochrome: {
|
|
|
2156
2179
|
path: "native-select/native-select-option.svelte"
|
|
2157
2180
|
},
|
|
2158
2181
|
{
|
|
2159
|
-
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>",
|
|
2160
2183
|
type: "registry:ui",
|
|
2161
2184
|
path: "native-select/native-select.svelte"
|
|
2162
2185
|
}
|
|
@@ -2198,7 +2221,7 @@ const PRESETS = { monochrome: {
|
|
|
2198
2221
|
],
|
|
2199
2222
|
files: [
|
|
2200
2223
|
{
|
|
2201
|
-
content: "export { SelectRoot as Select } from \"@sprawlify/svelte/select\";\
|
|
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",
|
|
2202
2225
|
type: "registry:ui",
|
|
2203
2226
|
path: "select/index.ts"
|
|
2204
2227
|
},
|
|
@@ -2258,7 +2281,7 @@ const PRESETS = { monochrome: {
|
|
|
2258
2281
|
path: "select/select-separator.svelte"
|
|
2259
2282
|
},
|
|
2260
2283
|
{
|
|
2261
|
-
content: "<script lang=\"ts\">\r\nimport { Select as SelectPrimitive } from \"@sprawlify/svelte/select\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport type { ComponentProps } from \"svelte\"\r\n\r\ninterface Props extends ComponentProps<typeof SelectPrimitive.Trigger> {}\r\n\r\nlet { class: className, children, ...rest }: Props = $props()\r\n<\/script>\r\n\r\n<SelectPrimitive.Trigger\r\n data-slot=\"select-trigger\"\r\n class={cn(\r\n \"flex h-9 w-full items-center gap-2 rounded-md border border-input bg-
|
|
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",
|
|
2262
2285
|
type: "registry:ui",
|
|
2263
2286
|
path: "select/select-trigger.svelte"
|
|
2264
2287
|
},
|
|
@@ -2300,7 +2323,7 @@ const PRESETS = { monochrome: {
|
|
|
2300
2323
|
],
|
|
2301
2324
|
files: [
|
|
2302
2325
|
{
|
|
2303
|
-
content: "import { Switch as SwitchPrimitive } from \"@sprawlify/svelte/switch\";\
|
|
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",
|
|
2304
2327
|
type: "registry:ui",
|
|
2305
2328
|
path: "switch/index.ts"
|
|
2306
2329
|
},
|
|
@@ -2429,7 +2452,7 @@ const PRESETS = { monochrome: {
|
|
|
2429
2452
|
type: "registry:ui",
|
|
2430
2453
|
path: "textarea/index.ts"
|
|
2431
2454
|
}, {
|
|
2432
|
-
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/>",
|
|
2433
2456
|
type: "registry:ui",
|
|
2434
2457
|
path: "textarea/textarea.svelte"
|
|
2435
2458
|
}]
|