@karakuri-ui/react 0.3.5 → 0.3.7
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/components/ui/checkbox.js +3 -1
- package/dist/components/ui/checkbox.js.map +1 -1
- package/dist/components/ui/checkbox.mjs +4 -2
- package/dist/components/ui/checkbox.mjs.map +1 -1
- package/dist/components/ui/field.d.mts +11 -1
- package/dist/components/ui/field.d.ts +11 -1
- package/dist/components/ui/field.js +37 -4
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +35 -3
- package/dist/components/ui/field.mjs.map +1 -1
- package/dist/components/ui/index.d.mts +1 -1
- package/dist/components/ui/index.d.ts +1 -1
- package/dist/components/ui/input.js +1 -0
- package/dist/components/ui/input.js.map +1 -1
- package/dist/components/ui/input.mjs +2 -1
- package/dist/components/ui/input.mjs.map +1 -1
- package/dist/components/ui/navigation-menu.js +30 -9
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +30 -9
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/pagination.js +2 -2
- package/dist/components/ui/pagination.js.map +1 -1
- package/dist/components/ui/pagination.mjs +3 -3
- package/dist/components/ui/pagination.mjs.map +1 -1
- package/dist/components/ui/radio-group.js +3 -0
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +4 -1
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/select.d.mts +1 -1
- package/dist/components/ui/select.d.ts +1 -1
- package/dist/components/ui/select.js +10 -2
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +10 -2
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/slider.js +7 -1
- package/dist/components/ui/slider.js.map +1 -1
- package/dist/components/ui/slider.mjs +7 -1
- package/dist/components/ui/slider.mjs.map +1 -1
- package/dist/components/ui/switch.js +3 -1
- package/dist/components/ui/switch.js.map +1 -1
- package/dist/components/ui/switch.mjs +4 -2
- package/dist/components/ui/switch.mjs.map +1 -1
- package/dist/components/ui/textarea.js +1 -0
- package/dist/components/ui/textarea.js.map +1 -1
- package/dist/components/ui/textarea.mjs +2 -1
- package/dist/components/ui/textarea.mjs.map +1 -1
- package/package.json +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { cn } from '../../lib/utils'\n\n// Radius (matches Input — set at Root, propagates to Trigger and Content)\ntype SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n\nconst triggerRadiusMap: Record<SelectRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Auto-mapping: root radius → content radius (3 levels)\ntype SelectContentRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusFromRoot: Record<SelectRadius, SelectContentRadius> = {\n none: 'md',\n sm: 'md',\n base: 'md',\n default: 'md',\n lg: 'lg',\n xl: 'xl',\n '2xl': 'xl',\n '3xl': 'xl',\n full: 'xl',\n}\n\nconst contentRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants (matches Input component)\ntype SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\n\n// Trigger sizes (identical to Input)\nconst triggerSizeMap: Record<SelectSize, string> = {\n xs: 'h-9 px-3 text-sm', // 36px\n sm: 'h-10 px-3 text-md', // 40px\n default: 'h-11 px-4 text-base', // 44px\n lg: 'h-12 px-4 text-base', // 48px\n xl: 'h-14 px-4 text-base', // 56px\n}\n\n// Trigger icon sizes (matches Input icon pattern)\nconst triggerIconSizeMap: Record<SelectSize, string> = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Auto-mapping: trigger size → content item size (3 levels)\ntype SelectItemSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeFromTrigger: Record<SelectSize, SelectItemSize> = {\n xs: 'sm',\n sm: 'sm',\n default: 'md',\n lg: 'md',\n xl: 'lg',\n}\n\n// Item sizes (font matches Trigger for seamless selection, padding controls density)\nconst itemSizeMap: Record<SelectItemSize, string> = {\n sm: 'pl-2 pr-6 py-1.5 text-sm',\n md: 'pl-3 pr-8 py-1.5 text-base',\n lg: 'pl-3 pr-10 py-2.5 text-base',\n}\n\n// Item indicator (check mark) — right-aligned\nconst indicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-2 h-3 w-3',\n md: 'right-2 h-3.5 w-3.5',\n lg: 'right-3 h-4 w-4',\n}\n\n// Label sizes\nconst labelSizeMap: Record<SelectItemSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\n// Flush mode — items span full width, no inner radius\nconst flushItemPaddingMap: Record<SelectItemSize, string> = {\n sm: 'pl-3 pr-7',\n md: 'pl-4 pr-9',\n lg: 'pl-4 pr-11',\n}\n\nconst flushIndicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-3 h-3 w-3',\n md: 'right-3 h-3.5 w-3.5',\n lg: 'right-4 h-4 w-4',\n}\n\nconst flushLabelPaddingMap: Record<SelectItemSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\n// Root context — set at Root, consumed by Trigger and Content\nconst SelectContext = React.createContext<{\n size: SelectSize\n radius: SelectRadius\n}>({ size: 'default', radius: 'default' })\n\n// Style context — set at Content, consumed by Item/Label\nconst SelectStyleContext = React.createContext<{\n contentRadius: SelectContentRadius\n itemSize: SelectItemSize\n flush: boolean\n}>({ contentRadius: 'xl', itemSize: 'md', flush: false })\n\n// Root — state management + size/radius context\nconst Select = ({\n size = 'default',\n radius = 'default',\n ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {\n size?: SelectSize\n radius?: SelectRadius\n}) => (\n <SelectContext.Provider value={{ size, radius }}>\n <SelectPrimitive.Root {...props} />\n </SelectContext.Provider>\n)\n\n// Value — displays selected value or placeholder\nconst SelectValue = SelectPrimitive.Value\n\n// Group — groups related items\nconst SelectGroup = SelectPrimitive.Group\n\n// Trigger — the element that opens the select (reads size + radius from context)\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted',\n 'border border-border-form',\n triggerRadiusMap[radius],\n 'transition-colors duration-micro outline-transparent',\n 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[placeholder]:text-foreground/30',\n triggerSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <svg\n className={cn('ml-2 shrink-0 text-text-muted', triggerIconSizeMap[size])}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\n// ScrollUpButton — scroll indicator at top\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\n// ScrollDownButton — scroll indicator at bottom\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\n// Content — the floating panel (reads size + radius from context, auto-maps both)\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n flush?: boolean\n }\n>(({ className, children, position = 'popper', sideOffset = 1, flush = false, onCloseAutoFocus, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n const itemSize = itemSizeFromTrigger[size]\n const contentRadius = contentRadiusFromRoot[radius]\n return (\n <SelectPrimitive.Portal>\n <SelectStyleContext.Provider value={{ contentRadius, itemSize, flush }}>\n <SelectPrimitive.Content\n ref={ref}\n onCloseAutoFocus={(e) => {\n e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'relative z-popover min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[contentRadius],\n position === 'popper' &&\n 'max-h-[var(--radix-select-content-available-height)]',\n className\n )}\n position={position}\n sideOffset={sideOffset}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n position === 'popper' &&\n 'h-[var(--radix-select-content-available-height)] w-full'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectStyleContext.Provider>\n </SelectPrimitive.Portal>\n )\n})\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\n// Item — a single selectable item (with right-aligned check indicator)\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n const { contentRadius, itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center outline-none',\n itemSizeMap[itemSize],\n !flush && itemRadiusMap[contentRadius],\n flush && flushItemPaddingMap[itemSize],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <SelectPrimitive.ItemText className=\"truncate\">{children}</SelectPrimitive.ItemText>\n <span className={cn('absolute flex items-center justify-center', flush ? flushIndicatorSizeMap[itemSize] : indicatorSizeMap[itemSize])}>\n <SelectPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </SelectPrimitive.ItemIndicator>\n </span>\n </SelectPrimitive.Item>\n )\n})\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\n// Label — non-interactive group heading\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => {\n const { itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[itemSize],\n flush && flushLabelPaddingMap[itemSize],\n className\n )}\n {...props}\n />\n )\n})\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport type { SelectRadius, SelectSize }\n\nexport {\n Select,\n SelectTrigger,\n SelectValue,\n SelectContent,\n SelectItem,\n SelectGroup,\n SelectLabel,\n SelectSeparator,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Radius (matches Input — set at Root, propagates to Trigger and Content)\ntype SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n\nconst triggerRadiusMap: Record<SelectRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Auto-mapping: root radius → content radius (3 levels)\ntype SelectContentRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusFromRoot: Record<SelectRadius, SelectContentRadius> = {\n none: 'md',\n sm: 'md',\n base: 'md',\n default: 'md',\n lg: 'lg',\n xl: 'xl',\n '2xl': 'xl',\n '3xl': 'xl',\n full: 'xl',\n}\n\nconst contentRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants (matches Input component)\ntype SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\n\n// Trigger sizes (identical to Input)\nconst triggerSizeMap: Record<SelectSize, string> = {\n xs: 'h-9 px-3 text-sm', // 36px\n sm: 'h-10 px-3 text-md', // 40px\n default: 'h-11 px-4 text-base', // 44px\n lg: 'h-12 px-4 text-base', // 48px\n xl: 'h-14 px-4 text-base', // 56px\n}\n\n// Trigger icon sizes (matches Input icon pattern)\nconst triggerIconSizeMap: Record<SelectSize, string> = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Auto-mapping: trigger size → content item size (3 levels)\ntype SelectItemSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeFromTrigger: Record<SelectSize, SelectItemSize> = {\n xs: 'sm',\n sm: 'sm',\n default: 'md',\n lg: 'md',\n xl: 'lg',\n}\n\n// Item sizes (font matches Trigger for seamless selection, padding controls density)\nconst itemSizeMap: Record<SelectItemSize, string> = {\n sm: 'pl-2 pr-6 py-1.5 text-sm',\n md: 'pl-3 pr-8 py-1.5 text-base',\n lg: 'pl-3 pr-10 py-2.5 text-base',\n}\n\n// Item indicator (check mark) — right-aligned\nconst indicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-2 h-3 w-3',\n md: 'right-2 h-3.5 w-3.5',\n lg: 'right-3 h-4 w-4',\n}\n\n// Label sizes\nconst labelSizeMap: Record<SelectItemSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\n// Flush mode — items span full width, no inner radius\nconst flushItemPaddingMap: Record<SelectItemSize, string> = {\n sm: 'pl-3 pr-7',\n md: 'pl-4 pr-9',\n lg: 'pl-4 pr-11',\n}\n\nconst flushIndicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-3 h-3 w-3',\n md: 'right-3 h-3.5 w-3.5',\n lg: 'right-4 h-4 w-4',\n}\n\nconst flushLabelPaddingMap: Record<SelectItemSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\n// Root context — set at Root, consumed by Trigger and Content\nconst SelectContext = React.createContext<{\n size: SelectSize\n radius: SelectRadius\n}>({ size: 'default', radius: 'default' })\n\n// Style context — set at Content, consumed by Item/Label\nconst SelectStyleContext = React.createContext<{\n contentRadius: SelectContentRadius\n itemSize: SelectItemSize\n flush: boolean\n}>({ contentRadius: 'xl', itemSize: 'md', flush: false })\n\n// Root — state management + size/radius context. Inside a Field it inherits the\n// Field's disabled state, like Input and Textarea.\nconst Select = ({\n size = 'default',\n radius = 'default',\n disabled,\n ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {\n size?: SelectSize\n radius?: SelectRadius\n}) => {\n const fieldContext = useFieldContext()\n return (\n <SelectContext.Provider value={{ size, radius }}>\n <SelectPrimitive.Root disabled={disabled ?? fieldContext?.disabled} {...props} />\n </SelectContext.Provider>\n )\n}\n\n// Value — displays selected value or placeholder\nconst SelectValue = SelectPrimitive.Value\n\n// Group — groups related items\nconst SelectGroup = SelectPrimitive.Group\n\n// Trigger — the element that opens the select (reads size + radius from context)\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, id, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n // Inside a Field the trigger takes the Field id, so FieldLabel names it\n const fieldContext = useFieldContext()\n useFieldControl('single', Boolean(fieldContext) && !id)\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n id={id ?? fieldContext?.id}\n className={cn(\n 'flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted',\n 'border border-border-form',\n triggerRadiusMap[radius],\n 'transition-colors duration-micro outline-transparent',\n 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[placeholder]:text-foreground/30',\n triggerSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <svg\n className={cn('ml-2 shrink-0 text-text-muted', triggerIconSizeMap[size])}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\n// ScrollUpButton — scroll indicator at top\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\n// ScrollDownButton — scroll indicator at bottom\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\n// Content — the floating panel (reads size + radius from context, auto-maps both)\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n flush?: boolean\n }\n>(({ className, children, position = 'popper', sideOffset = 1, flush = false, onCloseAutoFocus, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n const itemSize = itemSizeFromTrigger[size]\n const contentRadius = contentRadiusFromRoot[radius]\n return (\n <SelectPrimitive.Portal>\n <SelectStyleContext.Provider value={{ contentRadius, itemSize, flush }}>\n <SelectPrimitive.Content\n ref={ref}\n onCloseAutoFocus={(e) => {\n e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'relative z-popover min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[contentRadius],\n position === 'popper' &&\n 'max-h-[var(--radix-select-content-available-height)]',\n className\n )}\n position={position}\n sideOffset={sideOffset}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n position === 'popper' &&\n 'h-[var(--radix-select-content-available-height)] w-full'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectStyleContext.Provider>\n </SelectPrimitive.Portal>\n )\n})\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\n// Item — a single selectable item (with right-aligned check indicator)\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n const { contentRadius, itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center outline-none',\n itemSizeMap[itemSize],\n !flush && itemRadiusMap[contentRadius],\n flush && flushItemPaddingMap[itemSize],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <SelectPrimitive.ItemText className=\"truncate\">{children}</SelectPrimitive.ItemText>\n <span className={cn('absolute flex items-center justify-center', flush ? flushIndicatorSizeMap[itemSize] : indicatorSizeMap[itemSize])}>\n <SelectPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </SelectPrimitive.ItemIndicator>\n </span>\n </SelectPrimitive.Item>\n )\n})\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\n// Label — non-interactive group heading\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => {\n const { itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[itemSize],\n flush && flushLabelPaddingMap[itemSize],\n className\n )}\n {...props}\n />\n )\n})\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport type { SelectRadius, SelectSize }\n\nexport {\n Select,\n SelectTrigger,\n SelectValue,\n SelectContent,\n SelectItem,\n SelectGroup,\n SelectLabel,\n SelectSeparator,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
5
5
|
import { cn } from "../../lib/utils.mjs";
|
|
6
|
+
import { useFieldContext, useFieldControl } from "./field.mjs";
|
|
6
7
|
const triggerRadiusMap = {
|
|
7
8
|
none: "rounded-none",
|
|
8
9
|
sm: "rounded-sm",
|
|
@@ -107,16 +108,23 @@ const SelectStyleContext = React.createContext({ contentRadius: "xl", itemSize:
|
|
|
107
108
|
const Select = ({
|
|
108
109
|
size = "default",
|
|
109
110
|
radius = "default",
|
|
111
|
+
disabled,
|
|
110
112
|
...props
|
|
111
|
-
}) =>
|
|
113
|
+
}) => {
|
|
114
|
+
const fieldContext = useFieldContext();
|
|
115
|
+
return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size, radius }, children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { disabled: disabled ?? fieldContext?.disabled, ...props }) });
|
|
116
|
+
};
|
|
112
117
|
const SelectValue = SelectPrimitive.Value;
|
|
113
118
|
const SelectGroup = SelectPrimitive.Group;
|
|
114
|
-
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
119
|
+
const SelectTrigger = React.forwardRef(({ className, children, id, ...props }, ref) => {
|
|
115
120
|
const { size, radius } = React.useContext(SelectContext);
|
|
121
|
+
const fieldContext = useFieldContext();
|
|
122
|
+
useFieldControl("single", Boolean(fieldContext) && !id);
|
|
116
123
|
return /* @__PURE__ */ jsxs(
|
|
117
124
|
SelectPrimitive.Trigger,
|
|
118
125
|
{
|
|
119
126
|
ref,
|
|
127
|
+
id: id ?? fieldContext?.id,
|
|
120
128
|
className: cn(
|
|
121
129
|
"flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted",
|
|
122
130
|
"border border-border-form",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { cn } from '../../lib/utils'\n\n// Radius (matches Input — set at Root, propagates to Trigger and Content)\ntype SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n\nconst triggerRadiusMap: Record<SelectRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Auto-mapping: root radius → content radius (3 levels)\ntype SelectContentRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusFromRoot: Record<SelectRadius, SelectContentRadius> = {\n none: 'md',\n sm: 'md',\n base: 'md',\n default: 'md',\n lg: 'lg',\n xl: 'xl',\n '2xl': 'xl',\n '3xl': 'xl',\n full: 'xl',\n}\n\nconst contentRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants (matches Input component)\ntype SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\n\n// Trigger sizes (identical to Input)\nconst triggerSizeMap: Record<SelectSize, string> = {\n xs: 'h-9 px-3 text-sm', // 36px\n sm: 'h-10 px-3 text-md', // 40px\n default: 'h-11 px-4 text-base', // 44px\n lg: 'h-12 px-4 text-base', // 48px\n xl: 'h-14 px-4 text-base', // 56px\n}\n\n// Trigger icon sizes (matches Input icon pattern)\nconst triggerIconSizeMap: Record<SelectSize, string> = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Auto-mapping: trigger size → content item size (3 levels)\ntype SelectItemSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeFromTrigger: Record<SelectSize, SelectItemSize> = {\n xs: 'sm',\n sm: 'sm',\n default: 'md',\n lg: 'md',\n xl: 'lg',\n}\n\n// Item sizes (font matches Trigger for seamless selection, padding controls density)\nconst itemSizeMap: Record<SelectItemSize, string> = {\n sm: 'pl-2 pr-6 py-1.5 text-sm',\n md: 'pl-3 pr-8 py-1.5 text-base',\n lg: 'pl-3 pr-10 py-2.5 text-base',\n}\n\n// Item indicator (check mark) — right-aligned\nconst indicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-2 h-3 w-3',\n md: 'right-2 h-3.5 w-3.5',\n lg: 'right-3 h-4 w-4',\n}\n\n// Label sizes\nconst labelSizeMap: Record<SelectItemSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\n// Flush mode — items span full width, no inner radius\nconst flushItemPaddingMap: Record<SelectItemSize, string> = {\n sm: 'pl-3 pr-7',\n md: 'pl-4 pr-9',\n lg: 'pl-4 pr-11',\n}\n\nconst flushIndicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-3 h-3 w-3',\n md: 'right-3 h-3.5 w-3.5',\n lg: 'right-4 h-4 w-4',\n}\n\nconst flushLabelPaddingMap: Record<SelectItemSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\n// Root context — set at Root, consumed by Trigger and Content\nconst SelectContext = React.createContext<{\n size: SelectSize\n radius: SelectRadius\n}>({ size: 'default', radius: 'default' })\n\n// Style context — set at Content, consumed by Item/Label\nconst SelectStyleContext = React.createContext<{\n contentRadius: SelectContentRadius\n itemSize: SelectItemSize\n flush: boolean\n}>({ contentRadius: 'xl', itemSize: 'md', flush: false })\n\n// Root — state management + size/radius context\nconst Select = ({\n size = 'default',\n radius = 'default',\n ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {\n size?: SelectSize\n radius?: SelectRadius\n}) => (\n <SelectContext.Provider value={{ size, radius }}>\n <SelectPrimitive.Root {...props} />\n </SelectContext.Provider>\n)\n\n// Value — displays selected value or placeholder\nconst SelectValue = SelectPrimitive.Value\n\n// Group — groups related items\nconst SelectGroup = SelectPrimitive.Group\n\n// Trigger — the element that opens the select (reads size + radius from context)\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted',\n 'border border-border-form',\n triggerRadiusMap[radius],\n 'transition-colors duration-micro outline-transparent',\n 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[placeholder]:text-foreground/30',\n triggerSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <svg\n className={cn('ml-2 shrink-0 text-text-muted', triggerIconSizeMap[size])}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\n// ScrollUpButton — scroll indicator at top\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\n// ScrollDownButton — scroll indicator at bottom\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\n// Content — the floating panel (reads size + radius from context, auto-maps both)\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n flush?: boolean\n }\n>(({ className, children, position = 'popper', sideOffset = 1, flush = false, onCloseAutoFocus, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n const itemSize = itemSizeFromTrigger[size]\n const contentRadius = contentRadiusFromRoot[radius]\n return (\n <SelectPrimitive.Portal>\n <SelectStyleContext.Provider value={{ contentRadius, itemSize, flush }}>\n <SelectPrimitive.Content\n ref={ref}\n onCloseAutoFocus={(e) => {\n e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'relative z-popover min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[contentRadius],\n position === 'popper' &&\n 'max-h-[var(--radix-select-content-available-height)]',\n className\n )}\n position={position}\n sideOffset={sideOffset}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n position === 'popper' &&\n 'h-[var(--radix-select-content-available-height)] w-full'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectStyleContext.Provider>\n </SelectPrimitive.Portal>\n )\n})\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\n// Item — a single selectable item (with right-aligned check indicator)\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n const { contentRadius, itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center outline-none',\n itemSizeMap[itemSize],\n !flush && itemRadiusMap[contentRadius],\n flush && flushItemPaddingMap[itemSize],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <SelectPrimitive.ItemText className=\"truncate\">{children}</SelectPrimitive.ItemText>\n <span className={cn('absolute flex items-center justify-center', flush ? flushIndicatorSizeMap[itemSize] : indicatorSizeMap[itemSize])}>\n <SelectPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </SelectPrimitive.ItemIndicator>\n </span>\n </SelectPrimitive.Item>\n )\n})\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\n// Label — non-interactive group heading\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => {\n const { itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[itemSize],\n flush && flushLabelPaddingMap[itemSize],\n className\n )}\n {...props}\n />\n )\n})\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport type { SelectRadius, SelectSize }\n\nexport {\n Select,\n SelectTrigger,\n SelectValue,\n SelectContent,\n SelectItem,\n SelectGroup,\n SelectLabel,\n SelectSeparator,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Radius (matches Input — set at Root, propagates to Trigger and Content)\ntype SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n\nconst triggerRadiusMap: Record<SelectRadius, string> = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n}\n\n// Auto-mapping: root radius → content radius (3 levels)\ntype SelectContentRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusFromRoot: Record<SelectRadius, SelectContentRadius> = {\n none: 'md',\n sm: 'md',\n base: 'md',\n default: 'md',\n lg: 'lg',\n xl: 'xl',\n '2xl': 'xl',\n '3xl': 'xl',\n full: 'xl',\n}\n\nconst contentRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<SelectContentRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants (matches Input component)\ntype SelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\n\n// Trigger sizes (identical to Input)\nconst triggerSizeMap: Record<SelectSize, string> = {\n xs: 'h-9 px-3 text-sm', // 36px\n sm: 'h-10 px-3 text-md', // 40px\n default: 'h-11 px-4 text-base', // 44px\n lg: 'h-12 px-4 text-base', // 48px\n xl: 'h-14 px-4 text-base', // 56px\n}\n\n// Trigger icon sizes (matches Input icon pattern)\nconst triggerIconSizeMap: Record<SelectSize, string> = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Auto-mapping: trigger size → content item size (3 levels)\ntype SelectItemSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeFromTrigger: Record<SelectSize, SelectItemSize> = {\n xs: 'sm',\n sm: 'sm',\n default: 'md',\n lg: 'md',\n xl: 'lg',\n}\n\n// Item sizes (font matches Trigger for seamless selection, padding controls density)\nconst itemSizeMap: Record<SelectItemSize, string> = {\n sm: 'pl-2 pr-6 py-1.5 text-sm',\n md: 'pl-3 pr-8 py-1.5 text-base',\n lg: 'pl-3 pr-10 py-2.5 text-base',\n}\n\n// Item indicator (check mark) — right-aligned\nconst indicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-2 h-3 w-3',\n md: 'right-2 h-3.5 w-3.5',\n lg: 'right-3 h-4 w-4',\n}\n\n// Label sizes\nconst labelSizeMap: Record<SelectItemSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\n// Flush mode — items span full width, no inner radius\nconst flushItemPaddingMap: Record<SelectItemSize, string> = {\n sm: 'pl-3 pr-7',\n md: 'pl-4 pr-9',\n lg: 'pl-4 pr-11',\n}\n\nconst flushIndicatorSizeMap: Record<SelectItemSize, string> = {\n sm: 'right-3 h-3 w-3',\n md: 'right-3 h-3.5 w-3.5',\n lg: 'right-4 h-4 w-4',\n}\n\nconst flushLabelPaddingMap: Record<SelectItemSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\n// Root context — set at Root, consumed by Trigger and Content\nconst SelectContext = React.createContext<{\n size: SelectSize\n radius: SelectRadius\n}>({ size: 'default', radius: 'default' })\n\n// Style context — set at Content, consumed by Item/Label\nconst SelectStyleContext = React.createContext<{\n contentRadius: SelectContentRadius\n itemSize: SelectItemSize\n flush: boolean\n}>({ contentRadius: 'xl', itemSize: 'md', flush: false })\n\n// Root — state management + size/radius context. Inside a Field it inherits the\n// Field's disabled state, like Input and Textarea.\nconst Select = ({\n size = 'default',\n radius = 'default',\n disabled,\n ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {\n size?: SelectSize\n radius?: SelectRadius\n}) => {\n const fieldContext = useFieldContext()\n return (\n <SelectContext.Provider value={{ size, radius }}>\n <SelectPrimitive.Root disabled={disabled ?? fieldContext?.disabled} {...props} />\n </SelectContext.Provider>\n )\n}\n\n// Value — displays selected value or placeholder\nconst SelectValue = SelectPrimitive.Value\n\n// Group — groups related items\nconst SelectGroup = SelectPrimitive.Group\n\n// Trigger — the element that opens the select (reads size + radius from context)\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, id, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n // Inside a Field the trigger takes the Field id, so FieldLabel names it\n const fieldContext = useFieldContext()\n useFieldControl('single', Boolean(fieldContext) && !id)\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n id={id ?? fieldContext?.id}\n className={cn(\n 'flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted',\n 'border border-border-form',\n triggerRadiusMap[radius],\n 'transition-colors duration-micro outline-transparent',\n 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[placeholder]:text-foreground/30',\n triggerSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <svg\n className={cn('ml-2 shrink-0 text-text-muted', triggerIconSizeMap[size])}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\n// ScrollUpButton — scroll indicator at top\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\n// ScrollDownButton — scroll indicator at bottom\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn('flex items-center justify-center py-1 cursor-default', className)}\n {...props}\n >\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\n// Content — the floating panel (reads size + radius from context, auto-maps both)\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n flush?: boolean\n }\n>(({ className, children, position = 'popper', sideOffset = 1, flush = false, onCloseAutoFocus, ...props }, ref) => {\n const { size, radius } = React.useContext(SelectContext)\n const itemSize = itemSizeFromTrigger[size]\n const contentRadius = contentRadiusFromRoot[radius]\n return (\n <SelectPrimitive.Portal>\n <SelectStyleContext.Provider value={{ contentRadius, itemSize, flush }}>\n <SelectPrimitive.Content\n ref={ref}\n onCloseAutoFocus={(e) => {\n e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'relative z-popover min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[contentRadius],\n position === 'popper' &&\n 'max-h-[var(--radix-select-content-available-height)]',\n className\n )}\n position={position}\n sideOffset={sideOffset}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n position === 'popper' &&\n 'h-[var(--radix-select-content-available-height)] w-full'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectStyleContext.Provider>\n </SelectPrimitive.Portal>\n )\n})\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\n// Item — a single selectable item (with right-aligned check indicator)\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n const { contentRadius, itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center outline-none',\n itemSizeMap[itemSize],\n !flush && itemRadiusMap[contentRadius],\n flush && flushItemPaddingMap[itemSize],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <SelectPrimitive.ItemText className=\"truncate\">{children}</SelectPrimitive.ItemText>\n <span className={cn('absolute flex items-center justify-center', flush ? flushIndicatorSizeMap[itemSize] : indicatorSizeMap[itemSize])}>\n <SelectPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </SelectPrimitive.ItemIndicator>\n </span>\n </SelectPrimitive.Item>\n )\n})\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\n// Label — non-interactive group heading\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => {\n const { itemSize, flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[itemSize],\n flush && flushLabelPaddingMap[itemSize],\n className\n )}\n {...props}\n />\n )\n})\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(SelectStyleContext)\n return (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport type { SelectRadius, SelectSize }\n\nexport {\n Select,\n SelectTrigger,\n SelectValue,\n SelectContent,\n SelectItem,\n SelectGroup,\n SelectLabel,\n SelectSeparator,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -38,6 +38,7 @@ var React = __toESM(require("react"));
|
|
|
38
38
|
var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
|
|
39
39
|
var import_class_variance_authority = require("class-variance-authority");
|
|
40
40
|
var import_utils = require("../../lib/utils");
|
|
41
|
+
var import_field = require("./field");
|
|
41
42
|
const sliderVariants = (0, import_class_variance_authority.cva)(
|
|
42
43
|
"relative flex touch-none select-none",
|
|
43
44
|
{
|
|
@@ -82,8 +83,11 @@ const sliderColorMap = {
|
|
|
82
83
|
thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]"
|
|
83
84
|
}
|
|
84
85
|
};
|
|
85
|
-
const Slider = React.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, ...props }, ref) => {
|
|
86
|
+
const Slider = React.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
|
|
86
87
|
const resolvedSize = size || "default";
|
|
88
|
+
const fieldContext = (0, import_field.useFieldContext)();
|
|
89
|
+
(0, import_field.useFieldControl)("labelled", Boolean(fieldContext));
|
|
90
|
+
const thumbLabelledBy = ariaLabelledBy ?? (!ariaLabel && fieldContext?.hasLabel ? fieldContext.labelId : void 0);
|
|
87
91
|
const thumbCount = value?.length ?? defaultValue?.length ?? 1;
|
|
88
92
|
const hasTooltip = showTooltip !== "never";
|
|
89
93
|
const hasWrapper = !!(startContent || endContent);
|
|
@@ -135,6 +139,8 @@ const Slider = React.forwardRef(({ className, size, color = "default", value, de
|
|
|
135
139
|
Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
136
140
|
SliderPrimitive.Thumb,
|
|
137
141
|
{
|
|
142
|
+
"aria-label": ariaLabel,
|
|
143
|
+
"aria-labelledby": thumbLabelledBy,
|
|
138
144
|
className: (0, import_utils.cn)(
|
|
139
145
|
"group/thumb block rounded-full border-2 shadow-sm",
|
|
140
146
|
sliderColorMap[color].thumb,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Slider root variants\nconst sliderVariants = cva(\n 'relative flex touch-none select-none',\n {\n variants: {\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Track sizes per orientation\nconst trackSizes = {\n sm: 'h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1',\n default: 'h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5',\n lg: 'h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2',\n}\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]',\n default: 'w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]',\n lg: 'w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]',\n}\n\n// Content font sizes (for startContent / endContent)\nconst contentSizes = {\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n}\n\n// Color maps for range and thumb\nconst sliderColorMap = {\n default: {\n range: 'bg-foreground',\n thumb: 'bg-background border-foreground',\n thumbHover: 'hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]',\n },\n primary: {\n range: 'bg-primary',\n thumb: 'bg-primary-foreground border-primary',\n thumbHover: 'hover:shadow-primary-glow hover:border-primary-hover',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]',\n },\n} as const\n\nexport type SliderColor = keyof typeof sliderColorMap\n\nexport interface SliderProps\n extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n VariantProps<typeof sliderVariants> {\n /** Track and thumb color */\n color?: SliderColor\n /** Tooltip display mode: auto (hover/drag), always, never */\n showTooltip?: 'auto' | 'always' | 'never'\n /** Custom formatter for tooltip value */\n formatLabel?: (value: number) => string\n /** Content to display before the slider (icon, label, etc.) */\n startContent?: React.ReactNode\n /** Content to display after the slider */\n endContent?: React.ReactNode\n}\n\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, ...props }, ref) => {\n const resolvedSize = size || 'default'\n const thumbCount = value?.length ?? defaultValue?.length ?? 1\n const hasTooltip = showTooltip !== 'never'\n const hasWrapper = !!(startContent || endContent)\n const isVertical = orientation === 'vertical'\n\n // Track value internally for tooltip display\n const [internalValue, setInternalValue] = React.useState(\n () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)\n )\n const displayValues = value ?? internalValue\n\n const handleValueChange = React.useCallback((newValue: number[]) => {\n setInternalValue(newValue)\n onValueChange?.(newValue)\n }, [onValueChange])\n\n const sliderRoot = (\n <SliderPrimitive.Root\n ref={ref}\n className={cn(\n sliderVariants({ size }),\n isVertical\n ? 'h-full w-auto flex-col items-center'\n : 'w-full items-center',\n hasWrapper && (isVertical ? 'flex-1 min-h-0' : 'flex-1 min-w-0'),\n !hasWrapper && className\n )}\n value={value}\n defaultValue={defaultValue}\n onValueChange={hasTooltip ? handleValueChange : onValueChange}\n orientation={orientation}\n {...props}\n >\n <SliderPrimitive.Track\n className={cn(\n 'relative grow overflow-hidden rounded-full bg-border',\n isVertical ? 'h-full' : 'w-full',\n trackSizes[resolvedSize]\n )}\n >\n <SliderPrimitive.Range\n className={cn(\n 'absolute rounded-full', sliderColorMap[color].range,\n isVertical\n ? 'w-full transition-[top,bottom] duration-fast ease-out'\n : 'h-full transition-[left,right] duration-fast ease-out'\n )}\n />\n </SliderPrimitive.Track>\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n className={cn(\n 'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,\n isVertical\n ? 'transition-[top,box-shadow,border-color] duration-fast ease-out'\n : 'transition-[left,box-shadow,border-color] duration-fast ease-out',\n sliderColorMap[color].thumbHover,\n sliderColorMap[color].thumbActive,\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n thumbSizes[resolvedSize]\n )}\n >\n {hasTooltip && (\n <div\n className={cn(\n 'absolute pointer-events-none',\n 'transition-all duration-fast ease-out',\n isVertical\n ? 'right-full top-1/2 -translate-y-1/2 mr-2 origin-right'\n : 'bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom',\n showTooltip === 'always'\n ? 'opacity-100 scale-100'\n : [\n 'opacity-0 scale-95',\n 'group-hover/thumb:opacity-100 group-hover/thumb:scale-100',\n 'group-active/thumb:opacity-100 group-active/thumb:scale-100',\n 'group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100',\n ]\n )}\n >\n <div className=\"relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap\">\n {formatLabel ? formatLabel(displayValues[i]) : displayValues[i]}\n {/* Arrow */}\n {isVertical ? (\n <div className=\"absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground\" />\n ) : (\n <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground\" />\n )}\n </div>\n </div>\n )}\n </SliderPrimitive.Thumb>\n ))}\n </SliderPrimitive.Root>\n )\n\n if (!hasWrapper) return sliderRoot\n\n return (\n <div className={cn(\n isVertical ? 'inline-flex flex-col items-center gap-2 h-full' : 'flex items-center gap-3',\n className\n )}>\n {startContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {startContent}\n </span>\n )}\n {sliderRoot}\n {endContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {endContent}\n </span>\n )}\n </div>\n )\n})\nSlider.displayName = 'Slider'\n\nexport { Slider, sliderVariants }\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Slider root variants\nconst sliderVariants = cva(\n 'relative flex touch-none select-none',\n {\n variants: {\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Track sizes per orientation\nconst trackSizes = {\n sm: 'h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1',\n default: 'h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5',\n lg: 'h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2',\n}\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]',\n default: 'w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]',\n lg: 'w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]',\n}\n\n// Content font sizes (for startContent / endContent)\nconst contentSizes = {\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n}\n\n// Color maps for range and thumb\nconst sliderColorMap = {\n default: {\n range: 'bg-foreground',\n thumb: 'bg-background border-foreground',\n thumbHover: 'hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]',\n },\n primary: {\n range: 'bg-primary',\n thumb: 'bg-primary-foreground border-primary',\n thumbHover: 'hover:shadow-primary-glow hover:border-primary-hover',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]',\n },\n} as const\n\nexport type SliderColor = keyof typeof sliderColorMap\n\nexport interface SliderProps\n extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n VariantProps<typeof sliderVariants> {\n /** Track and thumb color */\n color?: SliderColor\n /** Tooltip display mode: auto (hover/drag), always, never */\n showTooltip?: 'auto' | 'always' | 'never'\n /** Custom formatter for tooltip value */\n formatLabel?: (value: number) => string\n /** Content to display before the slider (icon, label, etc.) */\n startContent?: React.ReactNode\n /** Content to display after the slider */\n endContent?: React.ReactNode\n}\n\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) => {\n const resolvedSize = size || 'default'\n // The thumbs carry role=\"slider\", so the accessible name goes on them, not on the\n // Root. Inside a Field the FieldLabel names the slider unless a name is given.\n const fieldContext = useFieldContext()\n useFieldControl('labelled', Boolean(fieldContext))\n const thumbLabelledBy = ariaLabelledBy ?? (!ariaLabel && fieldContext?.hasLabel ? fieldContext.labelId : undefined)\n const thumbCount = value?.length ?? defaultValue?.length ?? 1\n const hasTooltip = showTooltip !== 'never'\n const hasWrapper = !!(startContent || endContent)\n const isVertical = orientation === 'vertical'\n\n // Track value internally for tooltip display\n const [internalValue, setInternalValue] = React.useState(\n () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)\n )\n const displayValues = value ?? internalValue\n\n const handleValueChange = React.useCallback((newValue: number[]) => {\n setInternalValue(newValue)\n onValueChange?.(newValue)\n }, [onValueChange])\n\n const sliderRoot = (\n <SliderPrimitive.Root\n ref={ref}\n className={cn(\n sliderVariants({ size }),\n isVertical\n ? 'h-full w-auto flex-col items-center'\n : 'w-full items-center',\n hasWrapper && (isVertical ? 'flex-1 min-h-0' : 'flex-1 min-w-0'),\n !hasWrapper && className\n )}\n value={value}\n defaultValue={defaultValue}\n onValueChange={hasTooltip ? handleValueChange : onValueChange}\n orientation={orientation}\n {...props}\n >\n <SliderPrimitive.Track\n className={cn(\n 'relative grow overflow-hidden rounded-full bg-border',\n isVertical ? 'h-full' : 'w-full',\n trackSizes[resolvedSize]\n )}\n >\n <SliderPrimitive.Range\n className={cn(\n 'absolute rounded-full', sliderColorMap[color].range,\n isVertical\n ? 'w-full transition-[top,bottom] duration-fast ease-out'\n : 'h-full transition-[left,right] duration-fast ease-out'\n )}\n />\n </SliderPrimitive.Track>\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n aria-label={ariaLabel}\n aria-labelledby={thumbLabelledBy}\n className={cn(\n 'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,\n isVertical\n ? 'transition-[top,box-shadow,border-color] duration-fast ease-out'\n : 'transition-[left,box-shadow,border-color] duration-fast ease-out',\n sliderColorMap[color].thumbHover,\n sliderColorMap[color].thumbActive,\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n thumbSizes[resolvedSize]\n )}\n >\n {hasTooltip && (\n <div\n className={cn(\n 'absolute pointer-events-none',\n 'transition-all duration-fast ease-out',\n isVertical\n ? 'right-full top-1/2 -translate-y-1/2 mr-2 origin-right'\n : 'bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom',\n showTooltip === 'always'\n ? 'opacity-100 scale-100'\n : [\n 'opacity-0 scale-95',\n 'group-hover/thumb:opacity-100 group-hover/thumb:scale-100',\n 'group-active/thumb:opacity-100 group-active/thumb:scale-100',\n 'group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100',\n ]\n )}\n >\n <div className=\"relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap\">\n {formatLabel ? formatLabel(displayValues[i]) : displayValues[i]}\n {/* Arrow */}\n {isVertical ? (\n <div className=\"absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground\" />\n ) : (\n <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground\" />\n )}\n </div>\n </div>\n )}\n </SliderPrimitive.Thumb>\n ))}\n </SliderPrimitive.Root>\n )\n\n if (!hasWrapper) return sliderRoot\n\n return (\n <div className={cn(\n isVertical ? 'inline-flex flex-col items-center gap-2 h-full' : 'flex items-center gap-3',\n className\n )}>\n {startContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {startContent}\n </span>\n )}\n {sliderRoot}\n {endContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {endContent}\n </span>\n )}\n </div>\n )\n})\nSlider.displayName = 'Slider'\n\nexport { Slider, sliderVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -4,6 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
6
6
|
import { cn } from "../../lib/utils.mjs";
|
|
7
|
+
import { useFieldContext, useFieldControl } from "./field.mjs";
|
|
7
8
|
const sliderVariants = cva(
|
|
8
9
|
"relative flex touch-none select-none",
|
|
9
10
|
{
|
|
@@ -48,8 +49,11 @@ const sliderColorMap = {
|
|
|
48
49
|
thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]"
|
|
49
50
|
}
|
|
50
51
|
};
|
|
51
|
-
const Slider = React.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, ...props }, ref) => {
|
|
52
|
+
const Slider = React.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
|
|
52
53
|
const resolvedSize = size || "default";
|
|
54
|
+
const fieldContext = useFieldContext();
|
|
55
|
+
useFieldControl("labelled", Boolean(fieldContext));
|
|
56
|
+
const thumbLabelledBy = ariaLabelledBy ?? (!ariaLabel && fieldContext?.hasLabel ? fieldContext.labelId : void 0);
|
|
53
57
|
const thumbCount = value?.length ?? defaultValue?.length ?? 1;
|
|
54
58
|
const hasTooltip = showTooltip !== "never";
|
|
55
59
|
const hasWrapper = !!(startContent || endContent);
|
|
@@ -101,6 +105,8 @@ const Slider = React.forwardRef(({ className, size, color = "default", value, de
|
|
|
101
105
|
Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ jsx(
|
|
102
106
|
SliderPrimitive.Thumb,
|
|
103
107
|
{
|
|
108
|
+
"aria-label": ariaLabel,
|
|
109
|
+
"aria-labelledby": thumbLabelledBy,
|
|
104
110
|
className: cn(
|
|
105
111
|
"group/thumb block rounded-full border-2 shadow-sm",
|
|
106
112
|
sliderColorMap[color].thumb,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Slider root variants\nconst sliderVariants = cva(\n 'relative flex touch-none select-none',\n {\n variants: {\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Track sizes per orientation\nconst trackSizes = {\n sm: 'h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1',\n default: 'h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5',\n lg: 'h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2',\n}\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]',\n default: 'w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]',\n lg: 'w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]',\n}\n\n// Content font sizes (for startContent / endContent)\nconst contentSizes = {\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n}\n\n// Color maps for range and thumb\nconst sliderColorMap = {\n default: {\n range: 'bg-foreground',\n thumb: 'bg-background border-foreground',\n thumbHover: 'hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]',\n },\n primary: {\n range: 'bg-primary',\n thumb: 'bg-primary-foreground border-primary',\n thumbHover: 'hover:shadow-primary-glow hover:border-primary-hover',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]',\n },\n} as const\n\nexport type SliderColor = keyof typeof sliderColorMap\n\nexport interface SliderProps\n extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n VariantProps<typeof sliderVariants> {\n /** Track and thumb color */\n color?: SliderColor\n /** Tooltip display mode: auto (hover/drag), always, never */\n showTooltip?: 'auto' | 'always' | 'never'\n /** Custom formatter for tooltip value */\n formatLabel?: (value: number) => string\n /** Content to display before the slider (icon, label, etc.) */\n startContent?: React.ReactNode\n /** Content to display after the slider */\n endContent?: React.ReactNode\n}\n\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, ...props }, ref) => {\n const resolvedSize = size || 'default'\n const thumbCount = value?.length ?? defaultValue?.length ?? 1\n const hasTooltip = showTooltip !== 'never'\n const hasWrapper = !!(startContent || endContent)\n const isVertical = orientation === 'vertical'\n\n // Track value internally for tooltip display\n const [internalValue, setInternalValue] = React.useState(\n () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)\n )\n const displayValues = value ?? internalValue\n\n const handleValueChange = React.useCallback((newValue: number[]) => {\n setInternalValue(newValue)\n onValueChange?.(newValue)\n }, [onValueChange])\n\n const sliderRoot = (\n <SliderPrimitive.Root\n ref={ref}\n className={cn(\n sliderVariants({ size }),\n isVertical\n ? 'h-full w-auto flex-col items-center'\n : 'w-full items-center',\n hasWrapper && (isVertical ? 'flex-1 min-h-0' : 'flex-1 min-w-0'),\n !hasWrapper && className\n )}\n value={value}\n defaultValue={defaultValue}\n onValueChange={hasTooltip ? handleValueChange : onValueChange}\n orientation={orientation}\n {...props}\n >\n <SliderPrimitive.Track\n className={cn(\n 'relative grow overflow-hidden rounded-full bg-border',\n isVertical ? 'h-full' : 'w-full',\n trackSizes[resolvedSize]\n )}\n >\n <SliderPrimitive.Range\n className={cn(\n 'absolute rounded-full', sliderColorMap[color].range,\n isVertical\n ? 'w-full transition-[top,bottom] duration-fast ease-out'\n : 'h-full transition-[left,right] duration-fast ease-out'\n )}\n />\n </SliderPrimitive.Track>\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n className={cn(\n 'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,\n isVertical\n ? 'transition-[top,box-shadow,border-color] duration-fast ease-out'\n : 'transition-[left,box-shadow,border-color] duration-fast ease-out',\n sliderColorMap[color].thumbHover,\n sliderColorMap[color].thumbActive,\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n thumbSizes[resolvedSize]\n )}\n >\n {hasTooltip && (\n <div\n className={cn(\n 'absolute pointer-events-none',\n 'transition-all duration-fast ease-out',\n isVertical\n ? 'right-full top-1/2 -translate-y-1/2 mr-2 origin-right'\n : 'bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom',\n showTooltip === 'always'\n ? 'opacity-100 scale-100'\n : [\n 'opacity-0 scale-95',\n 'group-hover/thumb:opacity-100 group-hover/thumb:scale-100',\n 'group-active/thumb:opacity-100 group-active/thumb:scale-100',\n 'group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100',\n ]\n )}\n >\n <div className=\"relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap\">\n {formatLabel ? formatLabel(displayValues[i]) : displayValues[i]}\n {/* Arrow */}\n {isVertical ? (\n <div className=\"absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground\" />\n ) : (\n <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground\" />\n )}\n </div>\n </div>\n )}\n </SliderPrimitive.Thumb>\n ))}\n </SliderPrimitive.Root>\n )\n\n if (!hasWrapper) return sliderRoot\n\n return (\n <div className={cn(\n isVertical ? 'inline-flex flex-col items-center gap-2 h-full' : 'flex items-center gap-3',\n className\n )}>\n {startContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {startContent}\n </span>\n )}\n {sliderRoot}\n {endContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {endContent}\n </span>\n )}\n </div>\n )\n})\nSlider.displayName = 'Slider'\n\nexport { Slider, sliderVariants }\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Slider root variants\nconst sliderVariants = cva(\n 'relative flex touch-none select-none',\n {\n variants: {\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Track sizes per orientation\nconst trackSizes = {\n sm: 'h-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1',\n default: 'h-1.5 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-1.5',\n lg: 'h-2 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-2',\n}\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-slider-thumb-sm)] h-[var(--component-slider-thumb-sm)]',\n default: 'w-[var(--component-slider-thumb-default)] h-[var(--component-slider-thumb-default)]',\n lg: 'w-[var(--component-slider-thumb-lg)] h-[var(--component-slider-thumb-lg)]',\n}\n\n// Content font sizes (for startContent / endContent)\nconst contentSizes = {\n sm: 'text-xs',\n default: 'text-sm',\n lg: 'text-base',\n}\n\n// Color maps for range and thumb\nconst sliderColorMap = {\n default: {\n range: 'bg-foreground',\n thumb: 'bg-background border-foreground',\n thumbHover: 'hover:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-text)_16%,transparent)] hover:border-foreground',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-text)_16%,transparent)]',\n },\n primary: {\n range: 'bg-primary',\n thumb: 'bg-primary-foreground border-primary',\n thumbHover: 'hover:shadow-primary-glow hover:border-primary-hover',\n thumbActive: 'active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]',\n },\n} as const\n\nexport type SliderColor = keyof typeof sliderColorMap\n\nexport interface SliderProps\n extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n VariantProps<typeof sliderVariants> {\n /** Track and thumb color */\n color?: SliderColor\n /** Tooltip display mode: auto (hover/drag), always, never */\n showTooltip?: 'auto' | 'always' | 'never'\n /** Custom formatter for tooltip value */\n formatLabel?: (value: number) => string\n /** Content to display before the slider (icon, label, etc.) */\n startContent?: React.ReactNode\n /** Content to display after the slider */\n endContent?: React.ReactNode\n}\n\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) => {\n const resolvedSize = size || 'default'\n // The thumbs carry role=\"slider\", so the accessible name goes on them, not on the\n // Root. Inside a Field the FieldLabel names the slider unless a name is given.\n const fieldContext = useFieldContext()\n useFieldControl('labelled', Boolean(fieldContext))\n const thumbLabelledBy = ariaLabelledBy ?? (!ariaLabel && fieldContext?.hasLabel ? fieldContext.labelId : undefined)\n const thumbCount = value?.length ?? defaultValue?.length ?? 1\n const hasTooltip = showTooltip !== 'never'\n const hasWrapper = !!(startContent || endContent)\n const isVertical = orientation === 'vertical'\n\n // Track value internally for tooltip display\n const [internalValue, setInternalValue] = React.useState(\n () => value ?? defaultValue ?? Array(thumbCount).fill(props.min ?? 0)\n )\n const displayValues = value ?? internalValue\n\n const handleValueChange = React.useCallback((newValue: number[]) => {\n setInternalValue(newValue)\n onValueChange?.(newValue)\n }, [onValueChange])\n\n const sliderRoot = (\n <SliderPrimitive.Root\n ref={ref}\n className={cn(\n sliderVariants({ size }),\n isVertical\n ? 'h-full w-auto flex-col items-center'\n : 'w-full items-center',\n hasWrapper && (isVertical ? 'flex-1 min-h-0' : 'flex-1 min-w-0'),\n !hasWrapper && className\n )}\n value={value}\n defaultValue={defaultValue}\n onValueChange={hasTooltip ? handleValueChange : onValueChange}\n orientation={orientation}\n {...props}\n >\n <SliderPrimitive.Track\n className={cn(\n 'relative grow overflow-hidden rounded-full bg-border',\n isVertical ? 'h-full' : 'w-full',\n trackSizes[resolvedSize]\n )}\n >\n <SliderPrimitive.Range\n className={cn(\n 'absolute rounded-full', sliderColorMap[color].range,\n isVertical\n ? 'w-full transition-[top,bottom] duration-fast ease-out'\n : 'h-full transition-[left,right] duration-fast ease-out'\n )}\n />\n </SliderPrimitive.Track>\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n aria-label={ariaLabel}\n aria-labelledby={thumbLabelledBy}\n className={cn(\n 'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,\n isVertical\n ? 'transition-[top,box-shadow,border-color] duration-fast ease-out'\n : 'transition-[left,box-shadow,border-color] duration-fast ease-out',\n sliderColorMap[color].thumbHover,\n sliderColorMap[color].thumbActive,\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n thumbSizes[resolvedSize]\n )}\n >\n {hasTooltip && (\n <div\n className={cn(\n 'absolute pointer-events-none',\n 'transition-all duration-fast ease-out',\n isVertical\n ? 'right-full top-1/2 -translate-y-1/2 mr-2 origin-right'\n : 'bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom',\n showTooltip === 'always'\n ? 'opacity-100 scale-100'\n : [\n 'opacity-0 scale-95',\n 'group-hover/thumb:opacity-100 group-hover/thumb:scale-100',\n 'group-active/thumb:opacity-100 group-active/thumb:scale-100',\n 'group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100',\n ]\n )}\n >\n <div className=\"relative bg-foreground text-background text-xs font-semibold font-mono tabular-nums px-2.5 py-1 rounded-md shadow-lg whitespace-nowrap\">\n {formatLabel ? formatLabel(displayValues[i]) : displayValues[i]}\n {/* Arrow */}\n {isVertical ? (\n <div className=\"absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-foreground\" />\n ) : (\n <div className=\"absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground\" />\n )}\n </div>\n </div>\n )}\n </SliderPrimitive.Thumb>\n ))}\n </SliderPrimitive.Root>\n )\n\n if (!hasWrapper) return sliderRoot\n\n return (\n <div className={cn(\n isVertical ? 'inline-flex flex-col items-center gap-2 h-full' : 'flex items-center gap-3',\n className\n )}>\n {startContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {startContent}\n </span>\n )}\n {sliderRoot}\n {endContent && (\n <span className={cn('shrink-0 text-text-muted select-none', contentSizes[resolvedSize], props.disabled && 'opacity-50')}>\n {endContent}\n </span>\n )}\n </div>\n )\n})\nSlider.displayName = 'Slider'\n\nexport { Slider, sliderVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -113,7 +113,9 @@ const Switch = React.forwardRef(({ className, size, label, labelPosition = "end"
|
|
|
113
113
|
const resolvedSize = size || "default";
|
|
114
114
|
const resolvedDisabled = disabled ?? fieldContext?.disabled;
|
|
115
115
|
const generatedId = React.useId();
|
|
116
|
-
const
|
|
116
|
+
const hasOwnLabel = Boolean(label || startLabel || endLabel);
|
|
117
|
+
const switchId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
|
|
118
|
+
(0, import_field.useFieldControl)(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
|
|
117
119
|
const switchEl = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
118
120
|
SwitchPrimitive.Root,
|
|
119
121
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n const switchId = id ?? fieldContext?.id ?? generatedId\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n // With its own label the switch is one item of a group: keep a unique id. Only a\n // bare switch labelled by FieldLabel takes the Field id.\n const hasOwnLabel = Boolean(label || startLabel || endLabel)\n const switchId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)\n useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
6
6
|
import { cn } from "../../lib/utils.mjs";
|
|
7
|
-
import { useFieldContext } from "./field.mjs";
|
|
7
|
+
import { useFieldContext, useFieldControl } from "./field.mjs";
|
|
8
8
|
const switchVariants = cva(
|
|
9
9
|
[
|
|
10
10
|
"group peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
|
|
@@ -79,7 +79,9 @@ const Switch = React.forwardRef(({ className, size, label, labelPosition = "end"
|
|
|
79
79
|
const resolvedSize = size || "default";
|
|
80
80
|
const resolvedDisabled = disabled ?? fieldContext?.disabled;
|
|
81
81
|
const generatedId = React.useId();
|
|
82
|
-
const
|
|
82
|
+
const hasOwnLabel = Boolean(label || startLabel || endLabel);
|
|
83
|
+
const switchId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
|
|
84
|
+
useFieldControl(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
|
|
83
85
|
const switchEl = /* @__PURE__ */ jsx(
|
|
84
86
|
SwitchPrimitive.Root,
|
|
85
87
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n const switchId = id ?? fieldContext?.id ?? generatedId\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'border border-transparent transition-all duration-normal ease-out',\n 'focus-visible:focus-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'data-[state=unchecked]:bg-border',\n ].join(' '),\n {\n variants: {\n size: {\n sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n sm: 'gap-2', // 8px\n default: 'gap-2.5', // 10px\n lg: 'gap-3', // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n sm: 'text-xs', // 12px\n default: 'text-md', // 14px\n lg: 'text-base', // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n default: 'data-[state=checked]:bg-foreground',\n primary: 'data-[state=checked]:bg-primary',\n success: 'data-[state=checked]:bg-success',\n warning: 'data-[state=checked]:bg-warning',\n error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n default: 'text-foreground',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n sm: 'hidden', // 12px thumb — too small for icons\n default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n lg: 'w-3.5 h-3.5', // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n VariantProps<typeof switchVariants> {\n label?: string\n labelPosition?: SwitchLabelPosition\n startLabel?: string\n endLabel?: string\n checkedIcon?: React.ReactNode\n uncheckedIcon?: React.ReactNode\n color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedDisabled = disabled ?? fieldContext?.disabled\n const generatedId = React.useId()\n // With its own label the switch is one item of a group: keep a unique id. Only a\n // bare switch labelled by FieldLabel takes the Field id.\n const hasOwnLabel = Boolean(label || startLabel || endLabel)\n const switchId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)\n useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))\n\n const switchEl = (\n <SwitchPrimitive.Root\n ref={ref}\n id={switchId}\n disabled={resolvedDisabled}\n className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n {...props}\n >\n <SwitchPrimitive.Thumb\n className={cn(\n 'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n 'transition-transform duration-normal ease-out',\n 'data-[state=unchecked]:translate-x-0',\n thumbSizes[resolvedSize],\n thumbTranslate[resolvedSize]\n )}\n >\n {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n <>\n {checkedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n checkedIconColors[color],\n 'hidden group-data-[state=checked]/thumb:block',\n )}>\n {checkedIcon}\n </span>\n )}\n {uncheckedIcon && (\n <span className={cn(\n iconSizes[resolvedSize],\n 'text-text-muted',\n 'hidden group-data-[state=unchecked]/thumb:block',\n )}>\n {uncheckedIcon}\n </span>\n )}\n </>\n )}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n const labelClassName = cn(\n labelSizes[resolvedSize],\n 'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n 'group-hover/switch:text-foreground',\n resolvedDisabled && 'opacity-50 cursor-not-allowed'\n )\n\n // Sides mode: startLabel / endLabel\n if (startLabel || endLabel) {\n return (\n <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n {startLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {startLabel}\n </label>\n )}\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n {endLabel && (\n <label htmlFor={switchId} className={labelClassName}>\n {endLabel}\n </label>\n )}\n </div>\n )\n }\n\n if (!label) return switchEl\n\n const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n return (\n <div className={cn(\n 'group/switch flex',\n isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n !isVertical && gapSizes[resolvedSize],\n )}>\n <div className=\"flex items-center\">\n {switchEl}\n </div>\n <label htmlFor={switchId} className={labelClassName}>\n {label}\n </label>\n </div>\n )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -112,6 +112,7 @@ const Textarea = React.forwardRef(
|
|
|
112
112
|
const resolvedError = error ?? fieldContext?.error;
|
|
113
113
|
const resolvedState = resolvedError ? "error" : state;
|
|
114
114
|
const textareaId = id ?? fieldContext?.id;
|
|
115
|
+
(0, import_field.useFieldControl)("single", Boolean(fieldContext) && !id);
|
|
115
116
|
const isDisabled = props.disabled ?? fieldContext?.disabled;
|
|
116
117
|
const pointerRef = React.useRef(false);
|
|
117
118
|
const windowBlurredRef = React.useRef(false);
|