npm - @intlayer/design-system - Versions diffs - 9.4.0 → 9.4.2 - Mend

@intlayer/design-system 9.4.0 → 9.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/dist/esm/components/Select/Multiselect.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Multiselect.mjs","names":["RemoveIcon"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X as RemoveIcon } from 'lucide-react';\nimport {\n type ComponentProps,\n createContext,\n type Dispatch,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type LegacyRef,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\n/*\n Context properties for MultiSelect component state management\n \n @interface MultiSelectContextProps\n /\ntype MultiSelectContextProps = {\n /* Array of currently selected values /\n value: string[];\n /* Handler for value changes /\n onValueChange: (value: string) => void;\n /* Whether the dropdown is currently open /\n open: boolean;\n /* Function to set the open state /\n setOpen: (value: boolean) => void;\n /* Current input field value for filtering /\n inputValue: string;\n /* Function to set the input value /\n setInputValue: Dispatch<SetStateAction<string>>;\n /* Index of currently focused option for keyboard navigation /\n activeIndex: number;\n /* Function to set the active index /\n setActiveIndex: Dispatch<SetStateAction<number>>;\n /* Ref to the input element /\n ref: RefObject<HTMLInputElement \| null>;\n /* Handler for option selection /\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps \| null>(null);\n\n/\n Custom hook to access MultiSelect context\n \n Provides access to the internal state and methods of the MultiSelect component.\n * Must be used within a MultiSelect component tree.\n \n @returns MultiSelectContextProps - All context properties and methods\n * @throws Error when used outside of MultiSelect component\n \n @example\n * ```tsx\n * function CustomMultiSelectItem() {\n * const { value, onValueChange, open } = useMultiSelect();\n * // Use context properties...\n * }\n * ```\n /\nconst useMultiSelect = () => {\n const context = useContext(MultiSelectContext);\n if (!context) {\n throw new Error('useMultiSelect must be used within MultiSelectProvider');\n }\n return context;\n};\n\n/\n Props interface for the main MultiSelect component\n \n @interface MultiSelectProps\n /\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n /\n Array of selected values (controlled mode)\n * @example\n * ```tsx\n * const [selected, setSelected] = useState(['react', 'vue']);\n * <MultiSelect values={selected} onValueChange={setSelected} />\n * ```\n /\n values?: string[];\n\n /\n Default selected values for uncontrolled mode\n * @example\n * ```tsx\n * <MultiSelect defaultValues={['react']} />\n * ```\n /\n defaultValues?: string[];\n\n /\n Callback fired when selection changes\n * @param value - New array of selected values\n * @example\n * ```tsx\n * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />\n * ```\n /\n onValueChange?: (value: string[]) => void;\n\n /\n Whether keyboard navigation should loop through options\n * @default false\n * @example\n * ```tsx\n * <MultiSelect loop /> // Arrow keys wrap around at list boundaries\n * ```\n /\n loop?: boolean;\n};\n\n/\n MultiSelect - A comprehensive multi-selection dropdown component\n \n An advanced multi-select component that combines the functionality of a searchable dropdown\n * with the ability to select multiple values. Built on top of Command component primitives,\n * it provides filtering, keyboard navigation, and visual feedback through badges.\n \n ## Key Features\n * - Multi-Selection: Select multiple options with visual badge representation\n * - Searchable: Built-in filtering to quickly find options in large lists\n * - Keyboard Navigation: Full arrow key navigation with optional looping\n * - Accessibility: Screen reader support, ARIA attributes, and focus management\n * - Flexible State: Both controlled and uncontrolled usage patterns\n * - Rich UI: Customizable badges, icons, and content layout\n \n ## Use Cases\n * - Tag/category selection in forms\n * - Multi-user assignment interfaces\n * - Feature/permission selection\n * - Filter selection in search interfaces\n * - Any multi-choice selection requirement\n \n ## Architecture\n * The component follows a compound pattern similar to Select:\n * - `MultiSelect` (root): Manages state and provides context\n * - `MultiSelect.Trigger`: Container for input and selected badges\n * - `MultiSelect.Input`: Searchable input field with filtering\n * - `MultiSelect.Content`: Dropdown container for options\n * - `MultiSelect.List`: Options container with keyboard navigation\n * - `MultiSelect.Item`: Individual selectable options\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter to select, Backspace to remove\n * - Screen Readers: Proper ARIA labels and live region announcements\n * - Focus Management: Clear focus indicators and logical tab flow\n * - Search: Real-time filtering with screen reader announcements\n \n @example\n * Basic multi-select usage:\n * ```tsx\n * const [frameworks, setFrameworks] = useState<string[]>([]);\n \n <MultiSelect values={frameworks} onValueChange={setFrameworks}>\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select frameworks...\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"react\">React</MultiSelect.Item>\n * <MultiSelect.Item value=\"vue\">Vue</MultiSelect.Item>\n * <MultiSelect.Item value=\"svelte\">Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n \n @example\n * Advanced usage with keyboard looping:\n * ```tsx\n * <MultiSelect defaultValues={['react']} loop>\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Choose technologies...\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"react\">⚛️ React</MultiSelect.Item>\n * <MultiSelect.Item value=\"vue\">💚 Vue</MultiSelect.Item>\n * <MultiSelect.Item value=\"angular\">🔴 Angular</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <MultiSelect\n * values={selectedSkills}\n * onValueChange={setSelectedSkills}\n * required\n * >\n * <MultiSelect.Trigger className=\"min-h-[2.5rem]\">\n * <MultiSelect.Input placeholder=\"Select your skills...\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"javascript\">JavaScript</MultiSelect.Item>\n * <MultiSelect.Item value=\"typescript\">TypeScript</MultiSelect.Item>\n * <MultiSelect.Item value=\"python\">Python</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * </form>\n * ```\n /\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange,\n loop = false,\n className,\n children,\n dir,\n ...props\n}) => {\n const [value, setValue] = useState<string[]>(defaultValues ?? []);\n const [inputValue, setInputValue] = useState('');\n const [open, setOpen] = useState<boolean>(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isValueSelected, setIsValueSelected] = useState(false);\n const [selectedValue, setSelectedValue] = useState('');\n\n useEffect(() => {\n if (valuesProp) {\n setValue(valuesProp);\n }\n }, [valuesProp]);\n\n const onValueChangeHandler = useCallback(\n (val: string) => {\n if (value.includes(val)) {\n const newValue = value.filter((item) => item !== val);\n setValue(newValue);\n onValueChange?.(newValue);\n } else {\n const newValue = [...value, val];\n setValue(newValue);\n onValueChange?.(newValue);\n }\n },\n\n [value]\n );\n\n const handleSelect = useCallback(\n (e: SyntheticEvent<HTMLInputElement>) => {\n e.preventDefault();\n const target = e.currentTarget;\n const selection = target.value.substring(\n target.selectionStart ?? 0,\n target.selectionEnd ?? 0\n );\n\n setSelectedValue(selection);\n setIsValueSelected(selection === inputValue);\n },\n [inputValue]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n e.stopPropagation();\n const target = inputRef.current;\n\n if (!target) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1;\n setActiveIndex(\n nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n );\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1;\n setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n };\n\n const moveCurrent = () => {\n const newIndex =\n activeIndex - 1 <= 0\n ? value.length - 1 === 0\n ? -1\n : 0\n : activeIndex - 1;\n setActiveIndex(newIndex);\n };\n\n switch (e.key) {\n case 'ArrowLeft':\n if (dir === 'rtl') {\n if (value.length > 0 && (activeIndex !== -1 \|\| loop)) {\n moveNext();\n }\n } else if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n break;\n\n case 'ArrowRight':\n if (dir === 'rtl') {\n if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n } else if (value.length > 0 && (activeIndex !== -1 \|\| loop)) {\n moveNext();\n }\n break;\n\n case 'Backspace':\n case 'Delete':\n if (value.length > 0) {\n if (activeIndex !== -1 && activeIndex < value.length) {\n onValueChangeHandler(value[activeIndex]);\n moveCurrent();\n } else if (\n (target.selectionStart === 0 && selectedValue === inputValue) \|\|\n isValueSelected\n ) {\n onValueChangeHandler(value[value.length - 1]);\n }\n }\n break;\n\n case 'Enter':\n setOpen(true);\n break;\n\n case 'Escape':\n if (activeIndex !== -1) {\n setActiveIndex(-1);\n } else if (open) {\n setOpen(false);\n }\n break;\n }\n },\n\n [value, inputValue, activeIndex, loop]\n );\n\n const memoValue = useMemo(\n () => ({\n value,\n onValueChange: onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n ref: inputRef,\n handleSelect,\n }),\n [\n value,\n onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n inputRef,\n handleSelect,\n ]\n );\n\n return (\n <MultiSelectContext value={memoValue}>\n <CommandRoot\n onKeyDown={handleKeyDown}\n className={cn(\n 'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n className\n )}\n dir={dir}\n {...props}\n >\n {children}\n </CommandRoot>\n </MultiSelectContext>\n );\n};\n\nconst MultiSelectTrigger: FC<\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n> = ({\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n}) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n return (\n <div\n className={cn(\n // Base layout\n 'flex w-full flex-col gap-3',\n 'cursor-pointer select-text text-base shadow-none outline-none md:text-sm',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n // Spacing\n 'px-2 py-3 md:py-2',\n\n // Background and text\n 'bg-neutral-50 dark:bg-neutral-950',\n 'text-text',\n\n // Focus ring\n 'ring-0',\n 'focus-within:outline-none',\n 'focus-within:ring-3',\n 'focus-within:ring-neutral-200',\n 'dark:focus-within:ring-neutral-500',\n\n 'focus-within:ring-offset-white',\n 'dark:focus-within:ring-offset-neutral-500',\n\n // Remove box-shadow\n '[box-shadow:none]',\n\n // States\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-invalid:border-error',\n\n // Validation styles\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n className\n )}\n {...props}\n >\n {value.length > 0 && (\n <div className=\"flex w-full flex-wrap gap-1\">\n {value.map((item, index) => (\n <Badge\n key={item}\n className={cn(\n 'flex items-center gap-1 rounded-xl px-1',\n activeIndex === index && 'ring-2 ring-muted-foreground'\n )}\n color=\"text\"\n >\n <span className=\"text-xs\">{getBadgeValue(item)}</span>\n <button\n aria-label={`Remove ${item} option`}\n aria-roledescription=\"button to remove option\"\n onMouseDown={mousePreventDefault}\n onClick={() => onValueChange(item)}\n >\n <span className=\"sr-only\">Remove {item} option</span>\n <RemoveIcon className=\"size-4 cursor-pointer\" />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {children}\n </div>\n );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n className,\n ...props\n}) => {\n const {\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n handleSelect,\n ref: inputRef,\n } = useMultiSelect();\n\n return (\n <Command.Input\n {...props}\n tabIndex={0}\n ref={inputRef as LegacyRef<HTMLInputElement>}\n value={inputValue}\n onValueChange={activeIndex === -1 ? setInputValue : undefined}\n onSelect={handleSelect}\n onBlur={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onClick={() => setActiveIndex(-1)}\n className={cn(\n 'ml-2 flex-1 cursor-pointer outline-hidden',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n children,\n}) => {\n const { open } = useMultiSelect();\n return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n <Command.List\n className={cn(\n // Base layout\n 'absolute top-0 z-10 flex w-full flex-col gap-2',\n 'rounded-xl p-2 shadow-md',\n\n // Background and text\n 'bg-white dark:bg-neutral-950',\n 'text-text',\n\n // Border\n 'border border-neutral-200 dark:border-neutral-800',\n\n // Transitions\n 'transition-colors',\n\n className\n )}\n >\n {children}\n <Command.Empty>\n <span className=\"text-muted-foreground\">No results found</span>\n </Command.Empty>\n </Command.List>\n);\n\nconst MultiSelectItem: FC<\n { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n const isIncluded = Options.includes(value);\n return (\n <Command.Item\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n // Base layout\n 'flex cursor-pointer justify-between',\n 'rounded-lg px-2 py-1',\n\n // Hover and transitions\n 'transition-colors',\n 'hover:bg-neutral/10',\n\n // States\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50',\n\n className\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n};\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n Trigger: typeof MultiSelectTrigger;\n Input: typeof MultiSelectInput;\n Content: typeof MultiSelectContent;\n List: typeof MultiSelectList;\n Item: typeof MultiSelectItem;\n};\n\n/\n \n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select your framework\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"React\">React</MultiSelect.Item>\n * <MultiSelect.Item value=\"Vue\">Vue</MultiSelect.Item>\n * <MultiSelect.Item value=\"Svelte\">Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Multiselect.mjs","names":["RemoveIcon"],"sources":["../../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, X as RemoveIcon } from 'lucide-react';\nimport {\n type ComponentProps,\n createContext,\n type Dispatch,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type LegacyRef,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\n/*\n Context properties for MultiSelect component state management\n \n @interface MultiSelectContextProps\n /\ntype MultiSelectContextProps = {\n /* Array of currently selected values /\n value: string[];\n /* Handler for value changes /\n onValueChange: (value: string) => void;\n /* Whether the dropdown is currently open /\n open: boolean;\n /* Function to set the open state /\n setOpen: (value: boolean) => void;\n /* Current input field value for filtering /\n inputValue: string;\n /* Function to set the input value /\n setInputValue: Dispatch<SetStateAction<string>>;\n /* Index of currently focused option for keyboard navigation /\n activeIndex: number;\n /* Function to set the active index /\n setActiveIndex: Dispatch<SetStateAction<number>>;\n /* Ref to the input element /\n ref: RefObject<HTMLInputElement \| null>;\n /* Handler for option selection /\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps \| null>(null);\n\n/\n Custom hook to access MultiSelect context\n \n Provides access to the internal state and methods of the MultiSelect component.\n * Must be used within a MultiSelect component tree.\n \n @returns MultiSelectContextProps - All context properties and methods\n * @throws Error when used outside of MultiSelect component\n \n @example\n * ```tsx\n * function CustomMultiSelectItem() {\n * const { value, onValueChange, open } = useMultiSelect();\n * // Use context properties...\n * }\n * ```\n /\nconst useMultiSelect = () => {\n const context = useContext(MultiSelectContext);\n if (!context) {\n throw new Error('useMultiSelect must be used within MultiSelectProvider');\n }\n return context;\n};\n\n/\n Props interface for the main MultiSelect component\n \n @interface MultiSelectProps\n /\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n /\n Array of selected values (controlled mode)\n * @example\n * ```tsx\n * const [selected, setSelected] = useState(['react', 'vue']);\n * <MultiSelect values={selected} onValueChange={setSelected} />\n * ```\n /\n values?: string[];\n\n /\n Default selected values for uncontrolled mode\n * @example\n * ```tsx\n * <MultiSelect defaultValues={['react']} />\n * ```\n /\n defaultValues?: string[];\n\n /\n Callback fired when selection changes\n * @param value - New array of selected values\n * @example\n * ```tsx\n * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />\n * ```\n /\n onValueChange?: (value: string[]) => void;\n\n /\n Whether keyboard navigation should loop through options\n * @default false\n * @example\n * ```tsx\n * <MultiSelect loop /> // Arrow keys wrap around at list boundaries\n * ```\n /\n loop?: boolean;\n};\n\n/\n MultiSelect - A comprehensive multi-selection dropdown component\n \n An advanced multi-select component that combines the functionality of a searchable dropdown\n * with the ability to select multiple values. Built on top of Command component primitives,\n * it provides filtering, keyboard navigation, and visual feedback through badges.\n \n ## Key Features\n * - Multi-Selection: Select multiple options with visual badge representation\n * - Searchable: Built-in filtering to quickly find options in large lists\n * - Keyboard Navigation: Full arrow key navigation with optional looping\n * - Accessibility: Screen reader support, ARIA attributes, and focus management\n * - Flexible State: Both controlled and uncontrolled usage patterns\n * - Rich UI: Customizable badges, icons, and content layout\n \n ## Use Cases\n * - Tag/category selection in forms\n * - Multi-user assignment interfaces\n * - Feature/permission selection\n * - Filter selection in search interfaces\n * - Any multi-choice selection requirement\n \n ## Architecture\n * The component follows a compound pattern similar to Select:\n * - `MultiSelect` (root): Manages state and provides context\n * - `MultiSelect.Trigger`: Container for input and selected badges\n * - `MultiSelect.Input`: Searchable input field with filtering\n * - `MultiSelect.Content`: Dropdown container for options\n * - `MultiSelect.List`: Options container with keyboard navigation\n * - `MultiSelect.Item`: Individual selectable options\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter to select, Backspace to remove\n * - Screen Readers: Proper ARIA labels and live region announcements\n * - Focus Management: Clear focus indicators and logical tab flow\n * - Search: Real-time filtering with screen reader announcements\n \n @example\n * Basic multi-select usage:\n * ```tsx\n * const [frameworks, setFrameworks] = useState<string[]>([]);\n \n <MultiSelect values={frameworks} onValueChange={setFrameworks}>\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select frameworks...\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"react\">React</MultiSelect.Item>\n * <MultiSelect.Item value=\"vue\">Vue</MultiSelect.Item>\n * <MultiSelect.Item value=\"svelte\">Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n \n @example\n * Advanced usage with keyboard looping:\n * ```tsx\n * <MultiSelect defaultValues={['react']} loop>\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Choose technologies...\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"react\">⚛️ React</MultiSelect.Item>\n * <MultiSelect.Item value=\"vue\">💚 Vue</MultiSelect.Item>\n * <MultiSelect.Item value=\"angular\">🔴 Angular</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <MultiSelect\n * values={selectedSkills}\n * onValueChange={setSelectedSkills}\n * required\n * >\n * <MultiSelect.Trigger className=\"min-h-[2.5rem]\">\n * <MultiSelect.Input placeholder=\"Select your skills...\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"javascript\">JavaScript</MultiSelect.Item>\n * <MultiSelect.Item value=\"typescript\">TypeScript</MultiSelect.Item>\n * <MultiSelect.Item value=\"python\">Python</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * </form>\n * ```\n /\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange,\n loop = false,\n className,\n children,\n dir,\n ...props\n}) => {\n const [value, setValue] = useState<string[]>(defaultValues ?? []);\n const [inputValue, setInputValue] = useState('');\n const [open, setOpen] = useState<boolean>(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isValueSelected, setIsValueSelected] = useState(false);\n const [selectedValue, setSelectedValue] = useState('');\n\n useEffect(() => {\n if (valuesProp) {\n setValue(valuesProp);\n }\n }, [valuesProp]);\n\n const onValueChangeHandler = useCallback(\n (val: string) => {\n if (value.includes(val)) {\n const newValue = value.filter((item) => item !== val);\n setValue(newValue);\n onValueChange?.(newValue);\n } else {\n const newValue = [...value, val];\n setValue(newValue);\n onValueChange?.(newValue);\n }\n },\n\n [value]\n );\n\n const handleSelect = useCallback(\n (e: SyntheticEvent<HTMLInputElement>) => {\n e.preventDefault();\n const target = e.currentTarget;\n const selection = target.value.substring(\n target.selectionStart ?? 0,\n target.selectionEnd ?? 0\n );\n\n setSelectedValue(selection);\n setIsValueSelected(selection === inputValue);\n },\n [inputValue]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n e.stopPropagation();\n const target = inputRef.current;\n\n if (!target) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1;\n setActiveIndex(\n nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n );\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1;\n setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n };\n\n const moveCurrent = () => {\n const newIndex =\n activeIndex - 1 <= 0\n ? value.length - 1 === 0\n ? -1\n : 0\n : activeIndex - 1;\n setActiveIndex(newIndex);\n };\n\n switch (e.key) {\n case 'ArrowLeft':\n if (dir === 'rtl') {\n if (value.length > 0 && (activeIndex !== -1 \|\| loop)) {\n moveNext();\n }\n } else if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n break;\n\n case 'ArrowRight':\n if (dir === 'rtl') {\n if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n } else if (value.length > 0 && (activeIndex !== -1 \|\| loop)) {\n moveNext();\n }\n break;\n\n case 'Backspace':\n case 'Delete':\n if (value.length > 0) {\n if (activeIndex !== -1 && activeIndex < value.length) {\n onValueChangeHandler(value[activeIndex]);\n moveCurrent();\n } else if (\n (target.selectionStart === 0 && selectedValue === inputValue) \|\|\n isValueSelected\n ) {\n onValueChangeHandler(value[value.length - 1]);\n }\n }\n break;\n\n case 'Enter':\n setOpen(true);\n break;\n\n case 'Escape':\n if (activeIndex !== -1) {\n setActiveIndex(-1);\n } else if (open) {\n setOpen(false);\n }\n break;\n }\n },\n\n [value, inputValue, activeIndex, loop]\n );\n\n const memoValue = useMemo(\n () => ({\n value,\n onValueChange: onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n ref: inputRef,\n handleSelect,\n }),\n [\n value,\n onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n inputRef,\n handleSelect,\n ]\n );\n\n return (\n <MultiSelectContext value={memoValue}>\n <CommandRoot\n onKeyDown={handleKeyDown}\n className={cn(\n 'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n className\n )}\n dir={dir}\n {...props}\n >\n {children}\n </CommandRoot>\n </MultiSelectContext>\n );\n};\n\nconst MultiSelectTrigger: FC<\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n> = ({\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n}) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n return (\n <div\n className={cn(\n // Base layout\n 'flex w-full flex-col gap-3',\n 'cursor-pointer select-text text-base shadow-none outline-none md:text-sm',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n // Spacing\n 'px-2 py-3 md:py-2',\n\n // Background and text\n 'bg-neutral-50 dark:bg-neutral-950',\n 'text-foreground',\n\n // Focus ring\n 'ring-0',\n 'focus-within:outline-none',\n 'focus-within:ring-3',\n 'focus-within:ring-neutral-200',\n 'dark:focus-within:ring-neutral-500',\n\n 'focus-within:ring-offset-white',\n 'dark:focus-within:ring-offset-neutral-500',\n\n // Remove box-shadow\n '[box-shadow:none]',\n\n // States\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-invalid:border-error',\n\n // Validation styles\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n className\n )}\n {...props}\n >\n {value.length > 0 && (\n <div className=\"flex w-full flex-wrap gap-1\">\n {value.map((item, index) => (\n <Badge\n key={item}\n className={cn(\n 'flex items-center gap-1 rounded-xl px-1',\n activeIndex === index && 'ring-2 ring-muted-foreground'\n )}\n color=\"text\"\n >\n <span className=\"text-xs\">{getBadgeValue(item)}</span>\n <button\n aria-label={`Remove ${item} option`}\n aria-roledescription=\"button to remove option\"\n onMouseDown={mousePreventDefault}\n onClick={() => onValueChange(item)}\n >\n <span className=\"sr-only\">Remove {item} option</span>\n <RemoveIcon className=\"size-4 cursor-pointer\" />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {children}\n </div>\n );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n className,\n ...props\n}) => {\n const {\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n handleSelect,\n ref: inputRef,\n } = useMultiSelect();\n\n return (\n <Command.Input\n {...props}\n tabIndex={0}\n ref={inputRef as LegacyRef<HTMLInputElement>}\n value={inputValue}\n onValueChange={activeIndex === -1 ? setInputValue : undefined}\n onSelect={handleSelect}\n onBlur={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onClick={() => setActiveIndex(-1)}\n className={cn(\n 'ml-2 flex-1 cursor-pointer outline-hidden',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nconst MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>> = ({\n children,\n}) => {\n const { open } = useMultiSelect();\n return <div className=\"relative\">{open && children}</div>;\n};\n\nconst MultiSelectList: typeof Command.List = ({ className, children }) => (\n <Command.List\n className={cn(\n // Base layout\n 'absolute top-0 z-10 flex w-full flex-col gap-2',\n 'rounded-xl p-2 shadow-md',\n\n // Background and text\n 'bg-white dark:bg-neutral-950',\n 'text-foreground',\n\n // Border\n 'border border-neutral-200 dark:border-neutral-800',\n\n // Transitions\n 'transition-colors',\n\n className\n )}\n >\n {children}\n <Command.Empty>\n <span className=\"text-muted-foreground\">No results found</span>\n </Command.Empty>\n </Command.List>\n);\n\nconst MultiSelectItem: FC<\n { value: string } & ComponentProps<typeof Command.Item>\n> = ({ className, value, children, ...props }) => {\n const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n const isIncluded = Options.includes(value);\n return (\n <Command.Item\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n // Base layout\n 'flex cursor-pointer justify-between',\n 'rounded-lg px-2 py-1',\n\n // Hover and transitions\n 'transition-colors',\n 'hover:bg-neutral/10',\n\n // States\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50',\n\n className\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n};\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n Trigger: typeof MultiSelectTrigger;\n Input: typeof MultiSelectInput;\n Content: typeof MultiSelectContent;\n List: typeof MultiSelectList;\n Item: typeof MultiSelectItem;\n};\n\n/\n \n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select your framework\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value=\"React\">React</MultiSelect.Item>\n * <MultiSelect.Item value=\"Vue\">Vue</MultiSelect.Item>\n * <MultiSelect.Item value=\"Svelte\">Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"mappings":"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"}

package/dist/esm/components/Select/Select.mjs CHANGED Viewed

@@ -28,7 +28,7 @@ const SelectValue = SelectPrimitive.Value;
 */
 const SelectTrigger = ({ validationStyleEnabled = false, className, children, ...props }) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	suppressHydrationWarning: true,
-	className: cn("flex w-full cursor-pointer items-center justify-between whitespace-nowrap", "select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-text", "ring-0", "focus-visible:outline-none", "focus-visible:ring-3", "focus-visible:ring-neutral-200", "dark:focus-visible:ring-neutral-500", "focus-visible:ring-offset-white", "dark:focus-visible:ring-offset-neutral-500", "[box-shadow:none] focus:[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", "[&>span]:line-clamp-1", validationStyleEnabled && "valid:border-success invalid:border-error", className),
+	className: cn("flex w-full cursor-pointer items-center justify-between whitespace-nowrap", "select-text text-base shadow-none outline-none md:text-sm", "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl", "px-2 py-3 md:py-2", "bg-neutral-50 dark:bg-neutral-950", "text-foreground", "ring-0", "focus-visible:outline-none", "focus-visible:ring-3", "focus-visible:ring-neutral-200", "dark:focus-visible:ring-neutral-500", "focus-visible:ring-offset-white", "dark:focus-visible:ring-offset-neutral-500", "[box-shadow:none] focus:[box-shadow:none]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-error", "[&>span]:line-clamp-1", validationStyleEnabled && "valid:border-success invalid:border-error", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,
@@ -80,7 +80,7 @@ const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsx(
 * ```
 */
 const SelectContent = ({ className, children, position = "popper", ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
-	className: cn("relative z-50 max-h-96 min-w-32 overflow-hidden", "rounded-xl shadow-md", "bg-white dark:bg-neutral-950", "text-text", "border border-neutral-200 dark:border-neutral-800", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
+	className: cn("relative z-50 max-h-96 min-w-32 overflow-hidden", "rounded-xl shadow-md", "bg-white dark:bg-neutral-950", "text-foreground", "border border-neutral-200 dark:border-neutral-800", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
 	position,
 	...props,
 	children: [

package/dist/esm/components/Select/Select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.mjs","names":[],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { cn } from '@utils/cn';\nimport {\n CheckIcon,\n ChevronDownIcon,\n ChevronsUpDown,\n ChevronUpIcon,\n} from 'lucide-react';\nimport type { ComponentProps, FC } from 'react';\n\n/*\n Enum for Select content positioning strategies\n \n @enum SelectContentPosition\n /\nexport type SelectContentPosition = 'popper' \| 'item-aligned';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/\n Select trigger button component that displays the current selection and opens the dropdown\n \n Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n \n @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n \n @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n /\nconst SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n <SelectPrimitive.Trigger\n suppressHydrationWarning\n className={cn(\n // Base layout and typography\n 'flex w-full cursor-pointer items-center justify-between whitespace-nowrap',\n 'select-text text-base shadow-none outline-none md:text-sm',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n // Spacing\n 'px-2 py-3 md:py-2',\n\n // Background and text\n 'bg-neutral-50 dark:bg-neutral-950',\n 'text-text',\n\n // Focus ring\n 'ring-0',\n 'focus-visible:outline-none',\n 'focus-visible:ring-3',\n 'focus-visible:ring-neutral-200',\n 'dark:focus-visible:ring-neutral-500',\n\n 'focus-visible:ring-offset-white',\n 'dark:focus-visible:ring-offset-neutral-500',\n\n // Remove box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // States\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-invalid:border-error',\n '[&>span]:line-clamp-1',\n\n // Validation styles\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\n/\n Scroll up button for select content with long lists\n \n Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n);\n\n/\n Scroll down button for select content with long lists\n \n Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n);\n\n/\n Select dropdown content container with positioning and animation\n \n Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n \n @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n \n @example\n * ```tsx\n * <Select.Content position=\"popper\">\n * <Select.Item value=\"option1\">Option 1</Select.Item>\n * <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n> = ({ className, children, position = 'popper', ...props }) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n // Base styles\n 'relative z-50 max-h-96 min-w-32 overflow-hidden',\n 'rounded-xl shadow-md',\n\n // Background and text\n 'bg-white dark:bg-neutral-950',\n 'text-text',\n\n // Border\n 'border border-neutral-200 dark:border-neutral-800',\n\n // Animations\n 'data-[state=closed]:animate-out data-[state=open]:animate-in',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n\n // Positioning adjustments\n position === 'popper' &&\n 'data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',\n\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n);\n\n/\n Label component for grouping select options\n \n Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Separator />\n * <Select.Label>Vegetables</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n className,\n ...props\n}) => (\n <SelectPrimitive.Label\n className={cn('px-1 py-0.5 font-semibold text-sm', className)}\n {...props}\n />\n);\n\n/\n Individual selectable item within the dropdown\n \n Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n \n @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n \n @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n * 🌙 Dark Mode\n * </Select.Item>\n * ```\n /\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n className,\n children,\n ...props\n}) => (\n <SelectPrimitive.Item\n className={cn(\n 'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\n/\n Visual separator for grouping options in the dropdown\n \n Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Item value=\"recent\">Recent Files</Select.Item>\n * <Select.Separator />\n * <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n <SelectPrimitive.Separator\n className={cn(\n '-mx-1 my-1 h-px',\n 'bg-neutral-200 dark:bg-neutral-800',\n className\n )}\n {...props}\n />\n);\n\n/\n Type definition for the compound Select component with all subcomponents\n /\ntype SelectType = typeof SelectRoot & {\n /* Group container for organizing related options /\n Group: typeof SelectGroup;\n /* Value display component for the trigger /\n Value: typeof SelectValue;\n /* Trigger button that opens the dropdown /\n Trigger: typeof SelectTrigger;\n /* Scroll up button for long lists /\n ScrollUpButton: typeof SelectScrollUpButton;\n /* Scroll down button for long lists /\n ScrollDownButton: typeof SelectScrollDownButton;\n /* Dropdown content container /\n Content: typeof SelectContent;\n /* Label component for option groups /\n Label: typeof SelectLabel;\n /* Individual selectable item /\n Item: typeof SelectItem;\n /* Visual separator between option groups /\n Separator: typeof SelectSeparator;\n};\n\n/\n Select - A comprehensive dropdown selection component\n \n A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n \n ## Key Features\n * - Accessibility First: Full keyboard navigation, screen reader support, and ARIA attributes\n * - Flexible Positioning: Multiple positioning strategies for optimal dropdown placement\n * - Validation Integration: Built-in support for form validation with visual feedback\n * - Design System: Consistent theming with design tokens and style variants\n * - Responsive Design: Works seamlessly across desktop and mobile devices\n * - Rich Content: Support for icons, separators, labels, and complex option layouts\n \n ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter, Escape, and Home/End support\n * - Screen Readers: Proper ARIA labels and state announcements\n * - Focus Management: Intuitive focus flow and visual indicators\n * - High Contrast: Supports system high contrast modes\n \n ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n \n @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n * <Select.Trigger>\n * <Select.Value placeholder=\"Choose theme...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">☀️ Light</Select.Item>\n * <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n * <Select.Item value=\"system\">⚙️ System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Select category...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Label>Web Technologies</Select.Label>\n * <Select.Item value=\"react\">React</Select.Item>\n * <Select.Item value=\"vue\">Vue</Select.Item>\n * <Select.Separator />\n * <Select.Label>Mobile</Select.Label>\n * <Select.Item value=\"react-native\">React Native</Select.Item>\n * <Select.Item value=\"flutter\">Flutter</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <Select required name=\"country\">\n * <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n * <Select.Value placeholder=\"Select country...\" />\n * </Select.Trigger>\n * <Select.Content position=\"item-aligned\">\n * <Select.Item value=\"us\">United States</Select.Item>\n * <Select.Item value=\"ca\">Canada</Select.Item>\n * <Select.Item value=\"uk\">United Kingdom</Select.Item>\n * </Select.Content>\n * </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;AAmBA,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;;;;;;;;;;;;;;;;;;AAmBpC,MAAM,iBAcD,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,YAC7D,qBAAC,gBAAgB,SAAjB;CACE;CACA,WAAW,GAET,6EACA,6DAGA,mFAGA,qBAGA,qCACA,aAGA,UACA,8BACA,wBACA,kCACA,uCAEA,mCACA,8CAGA,6CAGA,mDACA,6BACA,yBAGA,0BAA0B,6CAE1B,SACF;CACA,GAAI;WAxCN,CA0CG,UACD,oBAAC,gBAAgB,MAAjB;EAAsB;YACpB,oBAAC,gBAAD,EAAgB,WAAU,oBAAqB;CAC3B,EACC;;;;;;;;;;AAW3B,MAAM,wBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,gBAAjB;CACE,WAAW,GACT,wDACA,SACF;CACA,GAAI;WAEJ,oBAAC,eAAD,CAAgB;AACc;;;;;;;;;AAWlC,MAAM,0BAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,kBAAjB;CACE,WAAW,GACT,wDACA,SACF;CACA,GAAI;WAEJ,oBAAC,iBAAD,CAAkB;AACc;;;;;;;;;;;;;;;;;;;AAqBpC,MAAa,iBAER,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,YAClD,oBAAC,gBAAgB,QAAjB,YACE,qBAAC,gBAAgB,SAAjB;CACE,WAAW,GAET,mDACA,wBAGA,gCACA,aAGA,qDAGA,gEACA,8DACA,gEACA,0CACA,0CACA,0CACA,0CAGA,aAAa,YACX,mIAEF,SACF;CACU;CACV,GAAI;WA7BN;EA+BE,oBAAC,sBAAD,CAAuB;EACvB,oBAAC,gBAAgB,UAAjB;GACE,WAAW,GACT,OACA,aAAa,YACX,+EACJ;GAEC;EACuB;EAC1B,oBAAC,wBAAD,CAAyB;CACF;GACH;;;;;;;;;;;;;;;;;;;;;AAuB1B,MAAa,eAAiE,EAC5E,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL;;;;;;;;;;;;;;;;;AAmBH,MAAM,cAA+D,EACnE,WACA,UACA,GAAG,YAEH,qBAAC,gBAAgB,MAAjB;CACE,WAAW,GACT,kMACA,SACF;CACA,GAAI;WALN,CAOE,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,gBAAgB,eAAjB,YACE,oBAAC,WAAD,EAAW,WAAU,SAAU,GACF;CAC3B,IACN,oBAAC,gBAAgB,UAAjB,EAA2B,SAAmC,EAC1C;;;;;;;;;;;;;;;;;;;AAoBxB,MAAa,mBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,WAAjB;CACE,WAAW,GACT,mBACA,sCACA,SACF;CACA,GAAI;AACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHH,MAAa,SAAS;AACtB,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,OAAO;AACd,OAAO,YAAY"}
1	+ {"version":3,"file":"Select.mjs","names":[],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { cn } from '@utils/cn';\nimport {\n CheckIcon,\n ChevronDownIcon,\n ChevronsUpDown,\n ChevronUpIcon,\n} from 'lucide-react';\nimport type { ComponentProps, FC } from 'react';\n\n/*\n Enum for Select content positioning strategies\n \n @enum SelectContentPosition\n /\nexport type SelectContentPosition = 'popper' \| 'item-aligned';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/\n Select trigger button component that displays the current selection and opens the dropdown\n \n Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n \n @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n \n @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n /\nconst SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n <SelectPrimitive.Trigger\n suppressHydrationWarning\n className={cn(\n // Base layout and typography\n 'flex w-full cursor-pointer items-center justify-between whitespace-nowrap',\n 'select-text text-base shadow-none outline-none md:text-sm',\n\n // Corner shape\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n\n // Spacing\n 'px-2 py-3 md:py-2',\n\n // Background and text\n 'bg-neutral-50 dark:bg-neutral-950',\n 'text-foreground',\n\n // Focus ring\n 'ring-0',\n 'focus-visible:outline-none',\n 'focus-visible:ring-3',\n 'focus-visible:ring-neutral-200',\n 'dark:focus-visible:ring-neutral-500',\n\n 'focus-visible:ring-offset-white',\n 'dark:focus-visible:ring-offset-neutral-500',\n\n // Remove box-shadow\n '[box-shadow:none] focus:[box-shadow:none]',\n\n // States\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'aria-invalid:border-error',\n '[&>span]:line-clamp-1',\n\n // Validation styles\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\n/\n Scroll up button for select content with long lists\n \n Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n);\n\n/\n Scroll down button for select content with long lists\n \n Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n);\n\n/\n Select dropdown content container with positioning and animation\n \n Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n \n @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n \n @example\n * ```tsx\n * <Select.Content position=\"popper\">\n * <Select.Item value=\"option1\">Option 1</Select.Item>\n * <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n> = ({ className, children, position = 'popper', ...props }) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n // Base styles\n 'relative z-50 max-h-96 min-w-32 overflow-hidden',\n 'rounded-xl shadow-md',\n\n // Background and text\n 'bg-white dark:bg-neutral-950',\n 'text-foreground',\n\n // Border\n 'border border-neutral-200 dark:border-neutral-800',\n\n // Animations\n 'data-[state=closed]:animate-out data-[state=open]:animate-in',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n\n // Positioning adjustments\n position === 'popper' &&\n 'data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',\n\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n);\n\n/\n Label component for grouping select options\n \n Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Separator />\n * <Select.Label>Vegetables</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n className,\n ...props\n}) => (\n <SelectPrimitive.Label\n className={cn('px-1 py-0.5 font-semibold text-sm', className)}\n {...props}\n />\n);\n\n/\n Individual selectable item within the dropdown\n \n Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n \n @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n \n @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n * 🌙 Dark Mode\n * </Select.Item>\n * ```\n /\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n className,\n children,\n ...props\n}) => (\n <SelectPrimitive.Item\n className={cn(\n 'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-neutral/10 data-disabled:pointer-events-none data-disabled:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\n/\n Visual separator for grouping options in the dropdown\n \n Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Item value=\"recent\">Recent Files</Select.Item>\n * <Select.Separator />\n * <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n <SelectPrimitive.Separator\n className={cn(\n '-mx-1 my-1 h-px',\n 'bg-neutral-200 dark:bg-neutral-800',\n className\n )}\n {...props}\n />\n);\n\n/\n Type definition for the compound Select component with all subcomponents\n /\ntype SelectType = typeof SelectRoot & {\n /* Group container for organizing related options /\n Group: typeof SelectGroup;\n /* Value display component for the trigger /\n Value: typeof SelectValue;\n /* Trigger button that opens the dropdown /\n Trigger: typeof SelectTrigger;\n /* Scroll up button for long lists /\n ScrollUpButton: typeof SelectScrollUpButton;\n /* Scroll down button for long lists /\n ScrollDownButton: typeof SelectScrollDownButton;\n /* Dropdown content container /\n Content: typeof SelectContent;\n /* Label component for option groups /\n Label: typeof SelectLabel;\n /* Individual selectable item /\n Item: typeof SelectItem;\n /* Visual separator between option groups /\n Separator: typeof SelectSeparator;\n};\n\n/\n Select - A comprehensive dropdown selection component\n \n A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n \n ## Key Features\n * - Accessibility First: Full keyboard navigation, screen reader support, and ARIA attributes\n * - Flexible Positioning: Multiple positioning strategies for optimal dropdown placement\n * - Validation Integration: Built-in support for form validation with visual feedback\n * - Design System: Consistent theming with design tokens and style variants\n * - Responsive Design: Works seamlessly across desktop and mobile devices\n * - Rich Content: Support for icons, separators, labels, and complex option layouts\n \n ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter, Escape, and Home/End support\n * - Screen Readers: Proper ARIA labels and state announcements\n * - Focus Management: Intuitive focus flow and visual indicators\n * - High Contrast: Supports system high contrast modes\n \n ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n \n @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n * <Select.Trigger>\n * <Select.Value placeholder=\"Choose theme...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">☀️ Light</Select.Item>\n * <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n * <Select.Item value=\"system\">⚙️ System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Select category...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Label>Web Technologies</Select.Label>\n * <Select.Item value=\"react\">React</Select.Item>\n * <Select.Item value=\"vue\">Vue</Select.Item>\n * <Select.Separator />\n * <Select.Label>Mobile</Select.Label>\n * <Select.Item value=\"react-native\">React Native</Select.Item>\n * <Select.Item value=\"flutter\">Flutter</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <Select required name=\"country\">\n * <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n * <Select.Value placeholder=\"Select country...\" />\n * </Select.Trigger>\n * <Select.Content position=\"item-aligned\">\n * <Select.Item value=\"us\">United States</Select.Item>\n * <Select.Item value=\"ca\">Canada</Select.Item>\n * <Select.Item value=\"uk\">United Kingdom</Select.Item>\n * </Select.Content>\n * </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;AAmBA,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;;;;;;;;;;;;;;;;;;AAmBpC,MAAM,iBAcD,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,YAC7D,qBAAC,gBAAgB,SAAjB;CACE;CACA,WAAW,GAET,6EACA,6DAGA,mFAGA,qBAGA,qCACA,mBAGA,UACA,8BACA,wBACA,kCACA,uCAEA,mCACA,8CAGA,6CAGA,mDACA,6BACA,yBAGA,0BAA0B,6CAE1B,SACF;CACA,GAAI;WAxCN,CA0CG,UACD,oBAAC,gBAAgB,MAAjB;EAAsB;YACpB,oBAAC,gBAAD,EAAgB,WAAU,oBAAqB;CAC3B,EACC;;;;;;;;;;AAW3B,MAAM,wBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,gBAAjB;CACE,WAAW,GACT,wDACA,SACF;CACA,GAAI;WAEJ,oBAAC,eAAD,CAAgB;AACc;;;;;;;;;AAWlC,MAAM,0BAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,kBAAjB;CACE,WAAW,GACT,wDACA,SACF;CACA,GAAI;WAEJ,oBAAC,iBAAD,CAAkB;AACc;;;;;;;;;;;;;;;;;;;AAqBpC,MAAa,iBAER,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,YAClD,oBAAC,gBAAgB,QAAjB,YACE,qBAAC,gBAAgB,SAAjB;CACE,WAAW,GAET,mDACA,wBAGA,gCACA,mBAGA,qDAGA,gEACA,8DACA,gEACA,0CACA,0CACA,0CACA,0CAGA,aAAa,YACX,mIAEF,SACF;CACU;CACV,GAAI;WA7BN;EA+BE,oBAAC,sBAAD,CAAuB;EACvB,oBAAC,gBAAgB,UAAjB;GACE,WAAW,GACT,OACA,aAAa,YACX,+EACJ;GAEC;EACuB;EAC1B,oBAAC,wBAAD,CAAyB;CACF;GACH;;;;;;;;;;;;;;;;;;;;;AAuB1B,MAAa,eAAiE,EAC5E,WACA,GAAG,YAEH,oBAAC,gBAAgB,OAAjB;CACE,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL;;;;;;;;;;;;;;;;;AAmBH,MAAM,cAA+D,EACnE,WACA,UACA,GAAG,YAEH,qBAAC,gBAAgB,MAAjB;CACE,WAAW,GACT,kMACA,SACF;CACA,GAAI;WALN,CAOE,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,gBAAgB,eAAjB,YACE,oBAAC,WAAD,EAAW,WAAU,SAAU,GACF;CAC3B,IACN,oBAAC,gBAAgB,UAAjB,EAA2B,SAAmC,EAC1C;;;;;;;;;;;;;;;;;;;AAoBxB,MAAa,mBAER,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB,WAAjB;CACE,WAAW,GACT,mBACA,sCACA,SACF;CACA,GAAI;AACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHH,MAAa,SAAS;AACtB,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,OAAO,iBAAiB;AACxB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,OAAO;AACd,OAAO,YAAY"}

package/dist/esm/components/Status/index.mjs ADDED Viewed

@@ -0,0 +1,28 @@
+import { useTheme } from "../../providers/ThemeProvider.mjs";
+import { jsx } from "react/jsx-runtime";
+import cn from "cnfast";
+//#region src/components/Status/index.tsx
+const Status = ({ className, ...props }) => {
+	const { theme, resolvedTheme } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("w-full max-w-[200px] overflow-hidden rounded", className),
+		children: /* @__PURE__ */ jsx("iframe", {
+			title: "Badge",
+			src: `https://status.intlayer.org/badge?theme=${resolvedTheme}`,
+			height: "30",
+			frameBorder: "0",
+			scrolling: "no",
+			style: {
+				width: "100%",
+				colorScheme: "light"
+			},
+			allowTransparency: true
+		})
+	});
+};
+//#endregion
+export { Status };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Status/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Status/index.tsx"],"sourcesContent":["import { useTheme } from '@providers/ThemeProvider';\nimport cn from 'cnfast';\nimport type { FC } from 'react';\n\nexport const Status: FC<{ className?: string }> = ({ className, ...props }) => {\n const { theme, resolvedTheme } = useTheme();\n return (\n <div\n {...props}\n className={cn('w-full max-w-[200px] overflow-hidden rounded', className)}\n >\n <iframe\n title=\"Badge\"\n src={`https://status.intlayer.org/badge?theme=${resolvedTheme}`}\n height=\"30\"\n frameBorder=\"0\"\n scrolling=\"no\"\n style={{\n width: '100%',\n colorScheme: 'light',\n }}\n allowTransparency\n />\n </div>\n );\n};\n"],"mappings":";;;;;AAIA,MAAa,UAAsC,EAAE,WAAW,GAAG,YAAY;CAC7E,MAAM,EAAE,OAAO,kBAAkB,SAAS;CAC1C,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,gDAAgD,SAAS;YAEvE,oBAAC,UAAD;GACE,OAAM;GACN,KAAK,2CAA2C;GAChD,QAAO;GACP,aAAY;GACZ,WAAU;GACV,OAAO;IACL,OAAO;IACP,aAAa;GACf;GACA;EACD;CACE;AAET"}

package/dist/esm/components/Steps/index.mjs CHANGED Viewed

@@ -16,7 +16,7 @@ const Step = ({ number, title, isOptional = false, children, className, ...props
 			children: [
 				/* @__PURE__ */ jsx("div", { className: "ml-4 h-10 border-text/20 border-l border-dashed group-first-of-type:hidden" }),
 				/* @__PURE__ */ jsx("span", {
-					className: cn("flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-text/70 max-md:hidden", "group-first-of-type:mt-10"),
+					className: cn("flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-foreground/70 max-md:hidden", "group-first-of-type:mt-10"),
 					children: number
 				}),
 				/* @__PURE__ */ jsx("div", { className: cn("ml-4 flex-1 border-text/20 border-l border-dashed", "group-last-of-type:h-40 group-last-of-type:flex-none group-last-of-type:[-webkit-mask-image:linear-gradient(to_bottom,black,transparent)] group-last-of-type:[mask-image:linear-gradient(to_bottom,black,transparent)]") })
@@ -29,10 +29,10 @@ const Step = ({ number, title, isOptional = false, children, className, ...props
 					isClickable: true,
 					id: `step-${number}-${slugify(title)}`,
 					"aria-label": `${stepLabel} ${number}: ${title}`,
-					className: "font-semibold text-lg text-text",
+					className: "font-semibold text-foreground text-lg",
 					children: title
 				}), isOptional && /* @__PURE__ */ jsx("span", {
-					className: "mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs",
+					className: "mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-foreground/90 text-xs",
 					children: optionalLabel
 				})]
 			}), children]

package/dist/esm/components/Steps/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Steps/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, OlHTMLAttributes, ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { H3 } from '../Headers';\n\nconst slugify = (text: string) =>\n String(text)\n .normalize('NFD')\n .replace(/[̀-ͯ]/g, '')\n .replace(/\\s+/g, '-')\n .toLowerCase();\n\ntype StepProps = HTMLAttributes<HTMLLIElement> & {\n number: number \| string;\n title?: string;\n isOptional?: boolean;\n children: ReactNode;\n};\n\nexport const Step: FC<StepProps> = ({\n number,\n title,\n isOptional = false,\n children,\n className,\n ...props\n}) => {\n const { stepLabel, optionalLabel } = useIntlayer('steps');\n\n return (\n <li\n className={cn('group relative flex w-full flex-1 gap-4', className)}\n {...props}\n >\n <div className=\"flex flex-col max-md:hidden\" aria-hidden=\"true\">\n <div className=\"ml-4 h-10 border-text/20 border-l border-dashed group-first-of-type:hidden\" />\n <span\n className={cn(\n 'flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-~~text~~/70 max-md:hidden',\n 'group-first-of-type:mt-10'\n )}\n >\n {number}\n </span>\n <div\n className={cn(\n 'ml-4 flex-1 border-text/20 border-l border-dashed',\n 'group-last-of-type:h-40 group-last-of-type:flex-none group-last-of-type:[-webkit-mask-image:linear-gradient(to_bottom,black,transparent)] group-last-of-type:[mask-image:linear-gradient(to_bottom,black,transparent)]'\n )}\n />\n </div>\n\n <div className=\"mt-10 mb-8 flex w-full min-w-0 flex-col gap-8\">\n {title && (\n <div className=\"flex items-center items-center gap-2\">\n <H3\n isClickable\n id={`step-${number}-${slugify(title)}`}\n aria-label={`${stepLabel} ${number}: ${title}`}\n className=\"font-semibold text-lg text-~~text~~\"\n >\n {title}\n </H3>\n {isOptional && (\n <span className=\"mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-~~text~~/90 text-xs\">\n {optionalLabel}\n </span>\n )}\n </div>\n )}\n {children}\n </div>\n </li>\n );\n};\n\ntype StepsProps = OlHTMLAttributes<HTMLOListElement> & {\n children: ReactNode;\n};\n\nexport const Steps: FC<StepsProps> = ({ children, className, ...props }) => (\n <ol className={cn('list-none', className)} {...props}>\n {children}\n </ol>\n);\n"],"mappings":";;;;;;AAKA,MAAM,WAAW,SACf,OAAO,IAAI,CAAC,CACT,UAAU,KAAK,CAAC,CAChB,QAAQ,UAAU,EAAE,CAAC,CACrB,QAAQ,QAAQ,GAAG,CAAC,CACpB,YAAY;AASjB,MAAa,QAAuB,EAClC,QACA,OACA,aAAa,OACb,UACA,WACA,GAAG,YACC;CACJ,MAAM,EAAE,WAAW,kBAAkB,YAAY,OAAO;CAExD,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAFN,CAIE,qBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;aAAzD;IACE,oBAAC,OAAD,EAAK,WAAU,6EAA8E;IAC7F,oBAAC,QAAD;KACE,WAAW,GACT,~~qKACA~~,2BACF;eAEC;IACG;IACN,oBAAC,OAAD,EACE,WAAW,GACT,qDACA,wNACF,EACD;GACE;MAEL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,IAAD;KACE;KACA,IAAI,QAAQ,OAAO,GAAG,QAAQ,KAAK;KACnC,cAAY,GAAG,UAAU,GAAG,OAAO,IAAI;KACvC,WAAU;eAET;IACC,IACH,cACC,oBAAC,QAAD;KAAM,WAAU;eACb;IACG,EAEL;OAEN,QACE;IACH;;AAER;AAMA,MAAa,SAAyB,EAAE,UAAU,WAAW,GAAG,YAC9D,oBAAC,MAAD;CAAI,WAAW,GAAG,aAAa,SAAS;CAAG,GAAI;CAC5C;AACC"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Steps/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, OlHTMLAttributes, ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { H3 } from '../Headers';\n\nconst slugify = (text: string) =>\n String(text)\n .normalize('NFD')\n .replace(/[̀-ͯ]/g, '')\n .replace(/\\s+/g, '-')\n .toLowerCase();\n\ntype StepProps = HTMLAttributes<HTMLLIElement> & {\n number: number \| string;\n title?: string;\n isOptional?: boolean;\n children: ReactNode;\n};\n\nexport const Step: FC<StepProps> = ({\n number,\n title,\n isOptional = false,\n children,\n className,\n ...props\n}) => {\n const { stepLabel, optionalLabel } = useIntlayer('steps');\n\n return (\n <li\n className={cn('group relative flex w-full flex-1 gap-4', className)}\n {...props}\n >\n <div className=\"flex flex-col max-md:hidden\" aria-hidden=\"true\">\n <div className=\"ml-4 h-10 border-text/20 border-l border-dashed group-first-of-type:hidden\" />\n <span\n className={cn(\n 'flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-foreground/70 max-md:hidden',\n 'group-first-of-type:mt-10'\n )}\n >\n {number}\n </span>\n <div\n className={cn(\n 'ml-4 flex-1 border-text/20 border-l border-dashed',\n 'group-last-of-type:h-40 group-last-of-type:flex-none group-last-of-type:[-webkit-mask-image:linear-gradient(to_bottom,black,transparent)] group-last-of-type:[mask-image:linear-gradient(to_bottom,black,transparent)]'\n )}\n />\n </div>\n\n <div className=\"mt-10 mb-8 flex w-full min-w-0 flex-col gap-8\">\n {title && (\n <div className=\"flex items-center items-center gap-2\">\n <H3\n isClickable\n id={`step-${number}-${slugify(title)}`}\n aria-label={`${stepLabel} ${number}: ${title}`}\n className=\"font-semibold text-foreground text-lg\"\n >\n {title}\n </H3>\n {isOptional && (\n <span className=\"mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-foreground/90 text-xs\">\n {optionalLabel}\n </span>\n )}\n </div>\n )}\n {children}\n </div>\n </li>\n );\n};\n\ntype StepsProps = OlHTMLAttributes<HTMLOListElement> & {\n children: ReactNode;\n};\n\nexport const Steps: FC<StepsProps> = ({ children, className, ...props }) => (\n <ol className={cn('list-none', className)} {...props}>\n {children}\n </ol>\n);\n"],"mappings":";;;;;;AAKA,MAAM,WAAW,SACf,OAAO,IAAI,CAAC,CACT,UAAU,KAAK,CAAC,CAChB,QAAQ,UAAU,EAAE,CAAC,CACrB,QAAQ,QAAQ,GAAG,CAAC,CACpB,YAAY;AASjB,MAAa,QAAuB,EAClC,QACA,OACA,aAAa,OACb,UACA,WACA,GAAG,YACC;CACJ,MAAM,EAAE,WAAW,kBAAkB,YAAY,OAAO;CAExD,OACE,qBAAC,MAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;YAFN,CAIE,qBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;aAAzD;IACE,oBAAC,OAAD,EAAK,WAAU,6EAA8E;IAC7F,oBAAC,QAAD;KACE,WAAW,GACT,2KACA,2BACF;eAEC;IACG;IACN,oBAAC,OAAD,EACE,WAAW,GACT,qDACA,wNACF,EACD;GACE;MAEL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,IAAD;KACE;KACA,IAAI,QAAQ,OAAO,GAAG,QAAQ,KAAK;KACnC,cAAY,GAAG,UAAU,GAAG,OAAO,IAAI;KACvC,WAAU;eAET;IACC,IACH,cACC,oBAAC,QAAD;KAAM,WAAU;eACb;IACG,EAEL;OAEN,QACE;IACH;;AAER;AAMA,MAAa,SAAyB,EAAE,UAAU,WAAW,GAAG,YAC9D,oBAAC,MAAD;CAAI,WAAW,GAAG,aAAa,SAAS;CAAG,GAAI;CAC5C;AACC"}

package/dist/esm/components/SwitchSelector/SwitchSelector.mjs CHANGED Viewed

@@ -20,9 +20,10 @@ const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-row gap-
 			primary: "border-primary text-primary",
 			secondary: "border-secondary text-secondary",
 			neutral: "border-neutral text-neutral",
-			light: "border-white text-white",
-			dark: "border-neutral-800 text-neutral-800",
-			text: "border-text text-text"
+			white: "border-white text-white",
+			black: "border-black text-black",
+			text: "border-foreground text-foreground",
+			error: "border-error text-error"
 		},
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
@@ -30,11 +31,11 @@ const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-row gap-
 		}
 	},
 	defaultVariants: {
-		color: `text`,
+		color: "text",
 		disabled: false
 	}
 });
-const choiceVariant = cva("z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none", {
+const choiceVariant = cva("z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-background motion-reduce:transition-none", {
 	variants: { size: {
 		xs: "px-2 py-0.5 text-xs",
 		sm: "px-2 py-1 text-xs",
@@ -44,13 +45,13 @@ const choiceVariant = cva("z-1 flex-1 cursor-pointer font-medium text-sm transit
 	defaultVariants: { size: "md" }
 });
 const indicatorVariant = cva("absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
-	primary: "bg-primary data-[indicator=true]:text-text",
-	secondary: "bg-secondary data-[indicator=true]:text-text",
-	error: "bg-error data-[indicator=true]:text-text",
+	primary: "bg-primary data-[indicator=true]:text-primary-foreground",
+	secondary: "bg-secondary data-[indicator=true]:text-secondary-foreground",
 	neutral: "bg-neutral data-[indicator=true]:text-white",
-	light: "bg-white data-[indicator=true]:text-black",
-	dark: "bg-neutral-800 data-[indicator=true]:text-white",
-	text: "bg-text data-[indicator=true]:text-text-opposite"
+	white: "bg-white data-[indicator=true]:text-black",
+	black: "bg-black data-[indicator=true]:text-white",
+	text: "bg-foreground data-[indicator=true]:text-background",
+	error: "bg-error data-[indicator=true]:text-white"
 } } });
 /**
 * Component that allows the user to select one of the provided choices.

package/dist/esm/components/SwitchSelector/SwitchSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| '~~light~~'\n \| '~~dark~~'\n \| 'text';\n\nexport type SwitchSelectorSize = 'xs' \| 'sm' \| 'md' \| 'lg';\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n itemClassName?: string;\n hoverable?: boolean;\n disabled?: boolean;\n [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-0.38',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n neutral: 'border-neutral text-neutral',\n ~~light~~: 'border-white text-white',\n ~~dark~~: 'border-~~neutral-800~~ text-~~neutral-800~~',\n text: 'border-text text-~~text~~',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: ~~`${~~'text'~~}`,\~~n disabled: false,\n },\n }\n);\n\nexport const choiceVariant = cva(\n 'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-~~text-opposite~~ motion-reduce:transition-none',\n {\n variants: {\n size: {\n xs: 'px-2 py-0.5 text-xs',\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport const indicatorVariant = cva(\n 'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-~~text~~',\n secondary: 'bg-secondary data-[indicator=true]:text-~~text~~',\n ~~error~~: 'bg-~~error~~ data-[indicator=true]:text-~~text~~',\n ~~neutral~~: 'bg-~~neutral~~ data-[indicator=true]:text-~~white~~',\n ~~light~~: 'bg-~~white~~ data-[indicator=true]:text-~~black~~',\n ~~dark~~: 'bg-~~neutral-800~~ data-[indicator=true]:text-~~white~~',\n ~~text~~: 'bg-~~text~~ data-[indicator=true]:text-~~text-opposite~~',\n },\n },\n }\n);\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'horizontal'\n );\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n type=\"button\"\n className={cn(\n choiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;~~AA4BA~~,MAAa,wBAAwB,IACnC,qFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,MAAM;GACN,~~MAAM~~;~~EACR~~;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,~~6LACA~~;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,~~WAAW~~;~~CACX~~,~~OAAO;CACP,~~SAAS;CACT,OAAO;CACP,MAAM;CACN,~~MAAM~~;~~AACR~~,EACF,EACF,CACF;;;;;~~AAMA~~,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,MAAK;KACL,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}
1	+ {"version":3,"file":"SwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/SwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nexport const defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorColor =\n \| 'primary'\n \| 'secondary'\n \| 'neutral'\n \| 'white'\n \| 'black'\n \| 'text'\n \| 'error';\n\nexport type SwitchSelectorSize = 'xs' \| 'sm' \| 'md' \| 'lg';\n\nexport type SwitchSelectorBaseProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n itemClassName?: string;\n hoverable?: boolean;\n disabled?: boolean;\n [key: string]: any;\n};\n\nexport type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> &\n VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport const switchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-0.38',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n neutral: 'border-neutral text-neutral',\n white: 'border-white text-white',\n black: 'border-black text-black',\n text: 'border-foreground text-foreground',\n error: 'border-error text-error',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: 'text',\n disabled: false,\n },\n }\n);\n\nexport const choiceVariant = cva(\n 'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-background motion-reduce:transition-none',\n {\n variants: {\n size: {\n xs: 'px-2 py-0.5 text-xs',\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nexport const indicatorVariant = cva(\n 'absolute top-0 z-0 h-full w-auto rounded-full transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-primary-foreground',\n secondary:\n 'bg-secondary data-[indicator=true]:text-secondary-foreground',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n white: 'bg-white data-[indicator=true]:text-black',\n black: 'bg-black data-[indicator=true]:text-white',\n text: 'bg-foreground data-[indicator=true]:text-background',\n error: 'bg-error data-[indicator=true]:text-white',\n },\n },\n }\n);\n/*\n Component that allows the user to select one of the provided choices.\n * This component is horizontal.\n */\nexport const SwitchSelector = <T,>(props: SwitchSelectorProps<T>) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'horizontal'\n );\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n type=\"button\"\n className={cn(\n choiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiD,CAC5D;CAAE,SAAS;CAAO,OAAO;AAAM,GAC/B;CAAE,SAAS;CAAM,OAAO;AAAK,CAC/B;AA6BA,MAAa,wBAAwB,IACnC,qFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,SAAS;GACT,OAAO;GACP,OAAO;GACP,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B,0LACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WACE;CACF,SAAS;CACT,OAAO;CACP,OAAO;CACP,MAAM;CACN,OAAO;AACT,EACF,EACF,CACF;;;;;AAKA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,YACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,sBAAsB;GAC/B;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,MAAK;KACL,WAAW,GACT,cAAc,EACZ,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAClC;KACV,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,iBAAiB,EACf,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

package/dist/esm/components/SwitchSelector/VerticalSwitchSelector.mjs CHANGED Viewed

@@ -17,7 +17,7 @@ const verticalSwitchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-
 			neutral: "border-neutral text-neutral",
 			light: "border-white text-white",
 			dark: "border-neutral-800 text-neutral-800",
-			text: "border-text text-text"
+			text: "border-text text-foreground"
 		},
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
@@ -29,7 +29,7 @@ const verticalSwitchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-
 		disabled: false
 	}
 });
-const verticalChoiceVariant = cva("z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none", {
+const verticalChoiceVariant = cva("z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-foreground-opposite motion-reduce:transition-none", {
 	variants: { size: {
 		sm: "px-2 py-1 text-xs",
 		md: "p-2 text-sm",
@@ -38,13 +38,13 @@ const verticalChoiceVariant = cva("z-1 w-full cursor-pointer font-medium text-sm
 	defaultVariants: { size: `md` }
 });
 const verticalIndicatorVariant = cva("absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
-	primary: "bg-primary data-[indicator=true]:text-text",
-	secondary: "bg-secondary data-[indicator=true]:text-text",
-	[`error`]: "bg-error data-[indicator=true]:text-text",
+	primary: "bg-primary data-[indicator=true]:text-foreground",
+	secondary: "bg-secondary data-[indicator=true]:text-foreground",
+	[`error`]: "bg-error data-[indicator=true]:text-foreground",
 	neutral: "bg-neutral data-[indicator=true]:text-white",
 	light: "bg-white data-[indicator=true]:text-black",
 	dark: "bg-neutral-800 data-[indicator=true]:text-white",
-	text: "bg-text data-[indicator=true]:text-text-opposite"
+	text: "bg-text data-[indicator=true]:text-foreground-opposite"
 } } });
 /**
 * Component that allows the user to select one of the provided choices.

package/dist/esm/components/SwitchSelector/VerticalSwitchSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/VerticalSwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n defaultChoices,\n type SwitchSelectorBaseProps,\n type SwitchSelectorChoices,\n} from './SwitchSelector';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nconst verticalSwitchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n [`${'error'}`]: 'border-error bg-error text-error',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-~~text~~',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${'primary'}`,\n disabled: false,\n },\n }\n);\n\nconst verticalChoiceVariant = cva(\n 'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-~~text~~-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${'md'}`,\n },\n }\n);\n\nconst verticalIndicatorVariant = cva(\n 'absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-~~text~~',\n secondary: 'bg-secondary data-[indicator=true]:text-~~text~~',\n [`${'error'}`]: 'bg-error data-[indicator=true]:text-~~text~~',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n light: 'bg-white data-[indicator=true]:text-black',\n dark: 'bg-neutral-800 data-[indicator=true]:text-white',\n text: 'bg-text data-[indicator=true]:text-~~text~~-opposite',\n },\n },\n }\n);\n\nexport type VerticalSwitchSelectorProps<T = boolean> =\n SwitchSelectorBaseProps<T> &\n VariantProps<typeof verticalSwitchSelectorVariant> &\n VariantProps<typeof verticalChoiceVariant>;\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is vertical.\n */\nexport const VerticalSwitchSelector = <T,>(\n props: VerticalSwitchSelectorProps<T>\n) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'vertical'\n );\n\n return (\n <div\n className={verticalSwitchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex h-fit w-full flex-col items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n verticalChoiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled \|\| isSelected}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n verticalIndicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gCAAgC,IACpC,iFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;IACV,UAAe;GAChB,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAM,wBAAwB,IAC5B,~~6LACA~~;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAM,2BAA2B,IAC/B,sHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;EACV,UAAe;CAChB,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;AACR,EACF,EACF,CACF;;;;;AAWA,MAAa,0BACX,UACG;CACH,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,UACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,8BAA8B;GACvC;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,sBAAsB,EACpB,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,yBAAyB,EACvB,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}
1	+ {"version":3,"file":"VerticalSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/VerticalSwitchSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n defaultChoices,\n type SwitchSelectorBaseProps,\n type SwitchSelectorChoices,\n} from './SwitchSelector';\nimport { useSwitchSelector } from './useSwitchSelector';\n\nconst verticalSwitchSelectorVariant = cva(\n 'flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1',\n {\n variants: {\n color: {\n primary: 'border-primary text-primary',\n secondary: 'border-secondary text-secondary',\n [`${'error'}`]: 'border-error bg-error text-error',\n neutral: 'border-neutral text-neutral',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-foreground',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${'primary'}`,\n disabled: false,\n },\n }\n);\n\nconst verticalChoiceVariant = cva(\n 'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-foreground-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n sm: 'px-2 py-1 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: `${'md'}`,\n },\n }\n);\n\nconst verticalIndicatorVariant = cva(\n 'absolute left-0 z-0 h-auto w-full rounded-xl transition-all duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary: 'bg-primary data-[indicator=true]:text-foreground',\n secondary: 'bg-secondary data-[indicator=true]:text-foreground',\n [`${'error'}`]: 'bg-error data-[indicator=true]:text-foreground',\n neutral: 'bg-neutral data-[indicator=true]:text-white',\n light: 'bg-white data-[indicator=true]:text-black',\n dark: 'bg-neutral-800 data-[indicator=true]:text-white',\n text: 'bg-text data-[indicator=true]:text-foreground-opposite',\n },\n },\n }\n);\n\nexport type VerticalSwitchSelectorProps<T = boolean> =\n SwitchSelectorBaseProps<T> &\n VariantProps<typeof verticalSwitchSelectorVariant> &\n VariantProps<typeof verticalChoiceVariant>;\n\n/*\n Component that allows the user to select one of the provided choices.\n * This component is vertical.\n */\nexport const VerticalSwitchSelector = <T,>(\n props: VerticalSwitchSelectorProps<T>\n) => {\n const {\n choices = defaultChoices as SwitchSelectorChoices<T>,\n color = 'primary',\n size = 'md',\n className,\n itemClassName,\n } = props;\n\n const {\n selectedIndex,\n indicatorIndex,\n handleChange,\n optionsRefs,\n indicatorRef,\n choiceIndicatorPosition,\n setHoveredIndex,\n disabled,\n } = useSwitchSelector(\n {\n choices,\n value: props.value,\n defaultValue: props.defaultValue,\n onChange: props.onChange,\n hoverable: props.hoverable,\n disabled: props.disabled,\n },\n 'vertical'\n );\n\n return (\n <div\n className={verticalSwitchSelectorVariant({\n color,\n disabled,\n className,\n })}\n role=\"tablist\"\n aria-disabled={disabled ? 'true' : undefined}\n >\n <div className=\"relative flex h-fit w-full flex-col items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = index === selectedIndex;\n const isIndicatorOwner = index === indicatorIndex;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n verticalChoiceVariant({\n size,\n }),\n disabled && 'cursor-not-allowed',\n itemClassName\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected ? 'true' : undefined}\n data-indicator={isIndicatorOwner ? 'true' : undefined}\n disabled={disabled \|\| isSelected}\n tabIndex={isSelected ? 0 : -1}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n onMouseEnter={() => !disabled && setHoveredIndex(index)}\n onMouseLeave={() => !disabled && setHoveredIndex(null)}\n >\n {content}\n </button>\n );\n })}\n\n {choiceIndicatorPosition && (\n <div\n className={cn(\n verticalIndicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gCAAgC,IACpC,iFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;IACV,UAAe;GAChB,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,OAAO;EACP,UAAU;CACZ;AACF,CACF;AAEA,MAAM,wBAAwB,IAC5B,mMACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAM,2BAA2B,IAC/B,sHACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;EACV,UAAe;CAChB,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;AACR,EACF,EACF,CACF;;;;;AAWA,MAAa,0BACX,UACG;CACH,MAAM,EACJ,UAAU,gBACV,QAAQ,WACR,OAAO,MACP,WACA,kBACE;CAEJ,MAAM,EACJ,eACA,gBACA,cACA,aACA,cACA,yBACA,iBACA,aACE,kBACF;EACE;EACA,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,UAAU,MAAM;CAClB,GACA,UACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,8BAA8B;GACvC;GACA;GACA;EACF,CAAC;EACD,MAAK;EACL,iBAAe,WAAW,SAAS;YAEnC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,OAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAO,UAAU,YAAY,OAAO,UAAU;IAEhD,MAAM,aAAa,UAAU;IAC7B,MAAM,mBAAmB,UAAU;IAEnC,OACE,8BAAC,UAAD;KACE,GAAI;KACJ,WAAW,GACT,sBAAsB,EACpB,KACF,CAAC,GACD,YAAY,sBACZ,aACF;KACA,KAAK,aAAa,QAAQ;KAC1B,MAAK;KACL,eAAe,aAAa,KAAK;KACjC,iBAAe,aAAa,SAAS;KACrC,kBAAgB,mBAAmB,SAAS;KAC5C,UAAU,YAAY;KACtB,UAAU,aAAa,IAAI;KAC3B,MAAM,OAAO;MACX,YAAY,QAAQ,SAAS;KAC/B;KACA,oBAAoB,CAAC,YAAY,gBAAgB,KAAK;KACtD,oBAAoB,CAAC,YAAY,gBAAgB,IAAI;IAG/C,GADL,OACK;GAEZ,CAAC,GAEA,2BACC,oBAAC,OAAD;IACE,WAAW,GACT,yBAAyB,EACvB,MACF,CAAC,CACH;IACA,OAAO;IACP,KAAK;GACN,EAEA;;CACF;AAET"}

package/dist/esm/components/Tab/Tab.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,7 +37,7 @@ const TabContext = createContext(void 0);
 const tabContainerVariant = cva("relative w-full rounded-lg", {
 	variants: {
 		background: {
-			with: "border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur",
+			with: "border bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur",
 			without: ""
 		},
 		variant: {

package/dist/esm/components/Tab/Tab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { useHorizontalSwipe } from '@hooks/useHorizontalSwipe';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Children,\n createContext,\n type HTMLAttributes,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useState,\n} from 'react';\nimport { TabSelector } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n/*\n Builds an id fragment usable in `id` / `aria-controls`.\n \n Tab values come from markdown (`<Tab value=\"Extract command\">`), so they can\n * hold spaces — which makes `aria-controls` reference a list of ids rather than\n * the one panel, and silently breaks the association for screen readers.\n /\nconst toIdFragment = (value: string) =>\n value\n .trim()\n .replace(/\\s+/g, '-')\n .replace(/[^\\w-]/g, '');\n\n/\n Builds one id fragment per tab, free of collisions.\n \n Sanitizing alone is not enough: two values can reduce to the same fragment\n * (`>=9.4` and `<9.4` both reduce to `94`), which would give two tabs the same\n * DOM id and cross-wire `aria-controls` between their panels.\n /\nconst toIdFragments = (values: string[]): string[] => {\n const fragmentUsageCount = new Map<string, number>();\n\n return values.map((value, index) => {\n const fragment = toIdFragment(value) \|\| String(index);\n const previousUsageCount = fragmentUsageCount.get(fragment) ?? 0;\n\n fragmentUsageCount.set(fragment, previousUsageCount + 1);\n\n return previousUsageCount === 0\n ? fragment\n : `${fragment}-${previousUsageCount + 1}`;\n });\n};\n\n// Context for managing tab state\ntype TabContextType = {\n activeTab: string;\n setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType \| undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva('relative w-full rounded-lg', {\n variants: {\n background: {\n with: 'border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n without: '',\n },\n variant: {\n default: '',\n bordered: 'border-2',\n ghost: 'border-0 bg-transparent shadow-none',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof tabContainerVariant> & {\n defaultTab?: string;\n group?: string;\n children: ReactNode;\n headerClassName?: string;\n fullHeight?: boolean;\n };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n label?: string;\n value?: string;\n disabled?: boolean;\n children: ReactNode;\n};\n\n/* A tab item whose identifier has been resolved to a usable string. /\ntype ResolvedTabItem = TabItemProps & { value: string };\n\n/\n Resolves the identifier of a tab.\n \n Both `label` and `value` are optional for markdown-authored tabs\n * (`<Tab label=\"next-intl\">`), so the identifier falls back to the label, then\n * to the position, keeping every tab addressable instead of rendering ids from\n * `undefined`.\n /\nconst resolveTabValue = (\n { value, label }: TabItemProps,\n index: number\n): string => {\n const identifier = value ?? label;\n\n return typeof identifier === 'string' ? identifier : String(index);\n};\n\n/\n TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n /\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n // This component is primarily used for its props by the parent Tab component\n // The actual rendering is handled by the Tab component\n <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/\n Tab container component that manages tab state and renders tab headers and content\n \n Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n * <Tab.Item label=\"First Tab\" value=\"tab1\">\n * Content for first tab\n * </Tab.Item>\n * <Tab.Item label=\"Second Tab\" value=\"tab2\">\n * Content for second tab\n * </Tab.Item>\n * </Tab>\n * ```\n /\nconst TabComponent = ({\n defaultTab,\n group,\n variant,\n children,\n className,\n headerClassName,\n fullHeight,\n ...props\n}: TabProps) => {\n // Extract TabItem children to get their props\n const tabItems: ResolvedTabItem[] = (\n Children.toArray(children).filter((child) => {\n return isValidElement(child) && child.type === TabItem;\n }) as ReactElement<TabItemProps>[]\n ).map((child, index) => ({\n ...child.props,\n value: resolveTabValue(child.props, index),\n }));\n\n const firstTabValue = tabItems[0]?.value;\n const { tabsValues, setTabsValues } = useTabContext();\n const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n const hasGroup = group && typeof tabsValues === 'object';\n const currentTabValue =\n (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n const activeTabIndex = tabItems.findIndex(\n (tab) => tab.value === currentTabValue\n );\n\n const tabsCount = tabItems.length;\n const idFragments = toIdFragments(tabItems.map(({ value }) => value));\n\n const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n itemIndex: activeTabIndex,\n itemCount: tabsCount,\n onSwipeLeft: () => {\n const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n const nextValue = tabItems[targetIndex]?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n onSwipeRight: () => {\n const targetIndex = Math.max(0, activeTabIndex - 1);\n const nextValue = tabItems[targetIndex]?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n });\n\n const handleSetActiveTab = (tab: string) => {\n setActiveTab(tab);\n\n if (typeof setTabsValues === 'function') {\n setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n }\n };\n\n const contextValue: TabContextType = {\n activeTab: activeTab ?? firstTabValue ?? '',\n setActiveTab: handleSetActiveTab,\n };\n\n return (\n <TabContext.Provider value={contextValue}>\n <div\n className={cn(\n tabContainerVariant({ variant }),\n fullHeight && 'flex h-full flex-col overflow-hidden',\n className\n )}\n {...props}\n >\n {/ Tab Headers — `TabSelector` is the tablist; wrapping it in another\n one would nest two, leaving the outer without any `tab` child. /}\n <div className={cn('flex shrink-0 gap-3 p-3', headerClassName)}>\n <TabSelector\n selectedChoice={currentTabValue}\n tabs={tabItems.map(({ label, value, disabled }, index) => {\n const isActive = currentTabValue === value;\n const idFragment = idFragments[index];\n\n return (\n <button\n key={value}\n className={cn(\n 'cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n !isActive && 'text-neutral/70'\n )}\n data-active={isActive}\n disabled={disabled}\n onClick={() => !disabled && handleSetActiveTab(value)}\n role=\"tab\"\n aria-selected={isActive}\n aria-controls={`tabpanel-${idFragment}`}\n id={`tab-${idFragment}`}\n type=\"button\"\n >\n {label ?? value}\n </button>\n );\n })}\n hoverable\n color=\"text\"\n />\n </div>\n {/ Tab Content /}\n {/ Clipper: no overflow; uses clip-path /}\n <div\n className={cn(\n 'relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]',\n fullHeight && 'min-h-0 flex-1'\n )}\n {...containerProps}\n >\n {/ Track — presentational: it carries the sliding transform, while\n the panels it holds are the tablist's controlled regions. /}\n <div\n className={cn(\n 'grid w-full min-w-0',\n fullHeight && 'h-full',\n isDragging\n ? 'transition-none'\n : 'transition-transform duration-300 ease-in-out'\n )}\n style={{\n gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n transform: `translateX(-${activeTabIndex 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n }}\n >\n {tabItems.map(\n ({ value, children, className: itemClassName }, index) => {\n const isActive = index === activeTabIndex;\n const idFragment = idFragments[index];\n\n return (\n <div\n key={value}\n role=\"tabpanel\"\n aria-labelledby={`tab-${idFragment}`}\n id={`tabpanel-${idFragment}`}\n // `inert` takes the whole subtree out of the tab order and\n // the accessibility tree at once. `aria-hidden` alone leaves\n // the buttons and links of an off-screen panel focusable,\n // which strands keyboard users on invisible controls.\n inert={!isActive}\n tabIndex={isActive ? 0 : -1}\n data-active={isActive}\n className={cn(\n 'w-full min-w-0 p-3 opacity-100 transition-opacity duration-300 ease-in-out',\n fullHeight && 'h-full overflow-y-auto',\n !isActive && 'pointer-events-none opacity-0', // prevent offscreen interaction\n itemClassName\n )}\n >\n <div\n className={cn(\n 'flex w-full min-w-0 flex-col items-stretch gap-6',\n fullHeight && 'min-h-full'\n )}\n >\n {children}\n </div>\n </div>\n );\n }\n )}\n </div>\n </div>\n </div>\n </TabContext.Provider>\n );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n Item: TabItem,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB,UACpB,MACG,KAAK,CAAC,CACN,QAAQ,QAAQ,GAAG,CAAC,CACpB,QAAQ,WAAW,EAAE;;;;;;;;AAS1B,MAAM,iBAAiB,WAA+B;CACpD,MAAM,qCAAqB,IAAI,IAAoB;CAEnD,OAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,WAAW,aAAa,KAAK,KAAK,OAAO,KAAK;EACpD,MAAM,qBAAqB,mBAAmB,IAAI,QAAQ,KAAK;EAE/D,mBAAmB,IAAI,UAAU,qBAAqB,CAAC;EAEvD,OAAO,uBAAuB,IAC1B,WACA,GAAG,SAAS,GAAG,qBAAqB;CAC1C,CAAC;AACH;AAQA,MAAM,aAAa,cAA0C,MAAS;AAGtE,MAAM,sBAAsB,IAAI,8BAA8B;CAC5D,UAAU;EACR,YAAY;GACV,MAAM;GACN,SAAS;EACX;EACA,SAAS;GACP,SAAS;GACT,UAAU;GACV,OAAO;EACT;CACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;;;;;;;;;AA6BD,MAAM,mBACJ,EAAE,OAAO,SACT,UACW;CACX,MAAM,aAAa,SAAS;CAE5B,OAAO,OAAO,eAAe,WAAW,aAAa,OAAO,KAAK;AACnE;;;;;AAMA,MAAM,WAAW,EAAE,UAAU,GAAG,YAG9B,oBAAC,OAAD;CAAK,GAAI;CAAQ;AAAc;AAIjC,QAAQ,cAAc;;;;;;;;;;;;;;;;AAiBtB,MAAM,gBAAgB,EACpB,YACA,OACA,SACA,UACA,WACA,iBACA,YACA,GAAG,YACW;CAEd,MAAM,WACJ,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAAQ,UAAU;EAC3C,OAAO,eAAe,KAAK,KAAK,MAAM,SAAS;CACjD,CAAC,CAAC,CACF,KAAK,OAAO,WAAW;EACvB,GAAG,MAAM;EACT,OAAO,gBAAgB,MAAM,OAAO,KAAK;CAC3C,EAAE;CAEF,MAAM,gBAAgB,SAAS,EAAE,EAAE;CACnC,MAAM,EAAE,YAAY,kBAAkB,cAAc;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc,iBAAiB,EAAE;CAE5E,MAAM,mBADW,SAAS,OAAO,eAAe,WAElC,aAAa,SAAS,cAAc,cAAc;CAChE,MAAM,iBAAiB,SAAS,WAC7B,QAAQ,IAAI,UAAU,eACzB;CAEA,MAAM,YAAY,SAAS;CAC3B,MAAM,cAAc,cAAc,SAAS,KAAK,EAAE,YAAY,KAAK,CAAC;CAEpE,MAAM,EAAE,gBAAgB,cAAc,eAAe,mBAAmB;EACtE,WAAW;EACX,WAAW;EACX,mBAAmB;GACjB,MAAM,cAAc,KAAK,IAAI,YAAY,GAAG,iBAAiB,CAAC;GAC9D,MAAM,YAAY,SAAS,YAAY,EAAE;GACzC,IAAI,WAAW,mBAAmB,SAAS;EAC7C;EACA,oBAAoB;GAClB,MAAM,cAAc,KAAK,IAAI,GAAG,iBAAiB,CAAC;GAClD,MAAM,YAAY,SAAS,YAAY,EAAE;GACzC,IAAI,WAAW,mBAAmB,SAAS;EAC7C;CACF,CAAC;CAED,MAAM,sBAAsB,QAAgB;EAC1C,aAAa,GAAG;EAEhB,IAAI,OAAO,kBAAkB,YAC3B,eAAe,UAAU;GAAE,GAAG;IAAO,QAAS;EAAI,EAAE;CAExD;CAEA,MAAM,eAA+B;EACnC,WAAW,aAAa,iBAAiB;EACzC,cAAc;CAChB;CAEA,OACE,oBAAC,WAAW,UAAZ;EAAqB,OAAO;YAC1B,qBAAC,OAAD;GACE,WAAW,GACT,oBAAoB,EAAE,QAAQ,CAAC,GAC/B,cAAc,wCACd,SACF;GACA,GAAI;aANN,CAUE,oBAAC,OAAD;IAAK,WAAW,GAAG,2BAA2B,eAAe;cAC3D,oBAAC,aAAD;KACE,gBAAgB;KAChB,MAAM,SAAS,KAAK,EAAE,OAAO,OAAO,YAAY,UAAU;MACxD,MAAM,WAAW,oBAAoB;MACrC,MAAM,aAAa,YAAY;MAE/B,OACE,oBAAC,UAAD;OAEE,WAAW,GACT,kHACA,CAAC,YAAY,iBACf;OACA,eAAa;OACH;OACV,eAAe,CAAC,YAAY,mBAAmB,KAAK;OACpD,MAAK;OACL,iBAAe;OACf,iBAAe,YAAY;OAC3B,IAAI,OAAO;OACX,MAAK;iBAEJ,SAAS;MACJ,GAfD,KAeC;KAEZ,CAAC;KACD;KACA,OAAM;IACP;GACE,IAGL,oBAAC,OAAD;IACE,WAAW,GACT,6FACA,cAAc,gBAChB;IACA,GAAI;cAIJ,oBAAC,OAAD;KACE,WAAW,GACT,uBACA,cAAc,UACd,aACI,oBACA,+CACN;KACA,OAAO;MACL,qBAAqB,UAAU,SAAS,OAAO;MAC/C,WAAW,eAAe,iBAAiB,OAAO,aAAa,eAAe,GAAG;KACnF;eAEC,SAAS,KACP,EAAE,OAAO,UAAU,WAAW,iBAAiB,UAAU;MACxD,MAAM,WAAW,UAAU;MAC3B,MAAM,aAAa,YAAY;MAE/B,OACE,oBAAC,OAAD;OAEE,MAAK;OACL,mBAAiB,OAAO;OACxB,IAAI,YAAY;OAKhB,OAAO,CAAC;OACR,UAAU,WAAW,IAAI;OACzB,eAAa;OACb,WAAW,GACT,8EACA,cAAc,0BACd,CAAC,YAAY,iCACb,aACF;iBAEA,oBAAC,OAAD;QACE,WAAW,GACT,oDACA,cAAc,YAChB;QAEC;OACE;MACF,GA1BE,KA0BF;KAET,CACF;IACG;GACF,EACF;;CACc;AAEzB;AAGA,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,QACR,CAAC"}
1	+ {"version":3,"file":"Tab.mjs","names":[],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { useHorizontalSwipe } from '@hooks/useHorizontalSwipe';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Children,\n createContext,\n type HTMLAttributes,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useState,\n} from 'react';\nimport { TabSelector } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n/*\n Builds an id fragment usable in `id` / `aria-controls`.\n \n Tab values come from markdown (`<Tab value=\"Extract command\">`), so they can\n * hold spaces — which makes `aria-controls` reference a list of ids rather than\n * the one panel, and silently breaks the association for screen readers.\n /\nconst toIdFragment = (value: string) =>\n value\n .trim()\n .replace(/\\s+/g, '-')\n .replace(/[^\\w-]/g, '');\n\n/\n Builds one id fragment per tab, free of collisions.\n \n Sanitizing alone is not enough: two values can reduce to the same fragment\n * (`>=9.4` and `<9.4` both reduce to `94`), which would give two tabs the same\n * DOM id and cross-wire `aria-controls` between their panels.\n /\nconst toIdFragments = (values: string[]): string[] => {\n const fragmentUsageCount = new Map<string, number>();\n\n return values.map((value, index) => {\n const fragment = toIdFragment(value) \|\| String(index);\n const previousUsageCount = fragmentUsageCount.get(fragment) ?? 0;\n\n fragmentUsageCount.set(fragment, previousUsageCount + 1);\n\n return previousUsageCount === 0\n ? fragment\n : `${fragment}-${previousUsageCount + 1}`;\n });\n};\n\n// Context for managing tab state\ntype TabContextType = {\n activeTab: string;\n setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType \| undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva('relative w-full rounded-lg', {\n variants: {\n background: {\n with: 'border bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n without: '',\n },\n variant: {\n default: '',\n bordered: 'border-2',\n ghost: 'border-0 bg-transparent shadow-none',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof tabContainerVariant> & {\n defaultTab?: string;\n group?: string;\n children: ReactNode;\n headerClassName?: string;\n fullHeight?: boolean;\n };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n label?: string;\n value?: string;\n disabled?: boolean;\n children: ReactNode;\n};\n\n/* A tab item whose identifier has been resolved to a usable string. /\ntype ResolvedTabItem = TabItemProps & { value: string };\n\n/\n Resolves the identifier of a tab.\n \n Both `label` and `value` are optional for markdown-authored tabs\n * (`<Tab label=\"next-intl\">`), so the identifier falls back to the label, then\n * to the position, keeping every tab addressable instead of rendering ids from\n * `undefined`.\n /\nconst resolveTabValue = (\n { value, label }: TabItemProps,\n index: number\n): string => {\n const identifier = value ?? label;\n\n return typeof identifier === 'string' ? identifier : String(index);\n};\n\n/\n TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n /\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n // This component is primarily used for its props by the parent Tab component\n // The actual rendering is handled by the Tab component\n <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/\n Tab container component that manages tab state and renders tab headers and content\n \n Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n * <Tab.Item label=\"First Tab\" value=\"tab1\">\n * Content for first tab\n * </Tab.Item>\n * <Tab.Item label=\"Second Tab\" value=\"tab2\">\n * Content for second tab\n * </Tab.Item>\n * </Tab>\n * ```\n /\nconst TabComponent = ({\n defaultTab,\n group,\n variant,\n children,\n className,\n headerClassName,\n fullHeight,\n ...props\n}: TabProps) => {\n // Extract TabItem children to get their props\n const tabItems: ResolvedTabItem[] = (\n Children.toArray(children).filter((child) => {\n return isValidElement(child) && child.type === TabItem;\n }) as ReactElement<TabItemProps>[]\n ).map((child, index) => ({\n ...child.props,\n value: resolveTabValue(child.props, index),\n }));\n\n const firstTabValue = tabItems[0]?.value;\n const { tabsValues, setTabsValues } = useTabContext();\n const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n const hasGroup = group && typeof tabsValues === 'object';\n const currentTabValue =\n (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n const activeTabIndex = tabItems.findIndex(\n (tab) => tab.value === currentTabValue\n );\n\n const tabsCount = tabItems.length;\n const idFragments = toIdFragments(tabItems.map(({ value }) => value));\n\n const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n itemIndex: activeTabIndex,\n itemCount: tabsCount,\n onSwipeLeft: () => {\n const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n const nextValue = tabItems[targetIndex]?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n onSwipeRight: () => {\n const targetIndex = Math.max(0, activeTabIndex - 1);\n const nextValue = tabItems[targetIndex]?.value;\n if (nextValue) handleSetActiveTab(nextValue);\n },\n });\n\n const handleSetActiveTab = (tab: string) => {\n setActiveTab(tab);\n\n if (typeof setTabsValues === 'function') {\n setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n }\n };\n\n const contextValue: TabContextType = {\n activeTab: activeTab ?? firstTabValue ?? '',\n setActiveTab: handleSetActiveTab,\n };\n\n return (\n <TabContext.Provider value={contextValue}>\n <div\n className={cn(\n tabContainerVariant({ variant }),\n fullHeight && 'flex h-full flex-col overflow-hidden',\n className\n )}\n {...props}\n >\n {/ Tab Headers — `TabSelector` is the tablist; wrapping it in another\n one would nest two, leaving the outer without any `tab` child. /}\n <div className={cn('flex shrink-0 gap-3 p-3', headerClassName)}>\n <TabSelector\n selectedChoice={currentTabValue}\n tabs={tabItems.map(({ label, value, disabled }, index) => {\n const isActive = currentTabValue === value;\n const idFragment = idFragments[index];\n\n return (\n <button\n key={value}\n className={cn(\n 'cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n !isActive && 'text-neutral/70'\n )}\n data-active={isActive}\n disabled={disabled}\n onClick={() => !disabled && handleSetActiveTab(value)}\n role=\"tab\"\n aria-selected={isActive}\n aria-controls={`tabpanel-${idFragment}`}\n id={`tab-${idFragment}`}\n type=\"button\"\n >\n {label ?? value}\n </button>\n );\n })}\n hoverable\n color=\"text\"\n />\n </div>\n {/ Tab Content /}\n {/ Clipper: no overflow; uses clip-path /}\n <div\n className={cn(\n 'relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]',\n fullHeight && 'min-h-0 flex-1'\n )}\n {...containerProps}\n >\n {/ Track — presentational: it carries the sliding transform, while\n the panels it holds are the tablist's controlled regions. /}\n <div\n className={cn(\n 'grid w-full min-w-0',\n fullHeight && 'h-full',\n isDragging\n ? 'transition-none'\n : 'transition-transform duration-300 ease-in-out'\n )}\n style={{\n gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n transform: `translateX(-${activeTabIndex 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n }}\n >\n {tabItems.map(\n ({ value, children, className: itemClassName }, index) => {\n const isActive = index === activeTabIndex;\n const idFragment = idFragments[index];\n\n return (\n <div\n key={value}\n role=\"tabpanel\"\n aria-labelledby={`tab-${idFragment}`}\n id={`tabpanel-${idFragment}`}\n // `inert` takes the whole subtree out of the tab order and\n // the accessibility tree at once. `aria-hidden` alone leaves\n // the buttons and links of an off-screen panel focusable,\n // which strands keyboard users on invisible controls.\n inert={!isActive}\n tabIndex={isActive ? 0 : -1}\n data-active={isActive}\n className={cn(\n 'w-full min-w-0 p-3 opacity-100 transition-opacity duration-300 ease-in-out',\n fullHeight && 'h-full overflow-y-auto',\n !isActive && 'pointer-events-none opacity-0', // prevent offscreen interaction\n itemClassName\n )}\n >\n <div\n className={cn(\n 'flex w-full min-w-0 flex-col items-stretch gap-6',\n fullHeight && 'min-h-full'\n )}\n >\n {children}\n </div>\n </div>\n );\n }\n )}\n </div>\n </div>\n </div>\n </TabContext.Provider>\n );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n Item: TabItem,\n});\n"],"mappings":"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"}

package/dist/esm/components/TabSelector/TabSelector.mjs CHANGED Viewed

@@ -15,20 +15,20 @@ const tabSelectorVariant = cva("relative z-0 flex size-full flex-row items-cente
 		neutral: "border-neutral text-neutral",
 		light: "border-white text-white",
 		dark: "border-neutral-800 text-neutral-800",
-		text: "border-text text-text"
+		text: "border-text text-foreground"
 	} },
 	defaultVariants: { color: "primary" }
 });
 const indicatorVariant = cva("absolute -z-1 rounded-lg duration-300 ease-in-out motion-reduce:transition-none", {
 	variants: {
 		color: {
-			primary: "bg-primary/10 aria-selected:text-text",
-			secondary: "bg-secondary/10 aria-selected:text-text",
-			error: "bg-error/10 aria-selected:text-text",
+			primary: "bg-primary/10 aria-selected:text-foreground",
+			secondary: "bg-secondary/10 aria-selected:text-foreground",
+			error: "bg-error/10 aria-selected:text-foreground",
 			neutral: "bg-neutral/10 aria-selected:text-white/10",
 			light: "bg-white/10 aria-selected:text-black",
 			dark: "bg-neutral-800/10 aria-selected:text-white",
-			text: "bg-text/10 aria-selected:text-text-opposite"
+			text: "bg-text/10 aria-selected:text-foreground-opposite"
 		},
 		orientation: {
 			horizontal: "top-0 h-full w-auto transition-[left,width]",