npm - @intlayer/design-system - Versions diffs - 8.11.2 → 8.12.0-canary.0 - Mend

@intlayer/design-system 8.11.2 → 8.12.0-canary.0

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 (271) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow } from '@hooks/index';\nimport { useDevice } from '@hooks/useDevice';\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawer } from './useRightDrawer';\n\n/*\n Configuration for the back button functionality in the RightDrawer\n \n @interface BackButtonProps\n /\ntype BackButtonProps = {\n /* Callback function triggered when the back button is clicked /\n onBack: () => void;\n /* Optional custom text for the back buttoDefaults to \"Go back\" if not provided /\n text?: string;\n};\n\n/\n Props configuration for the RightDrawer component\n \n @interface RightDrawerProps\n /\ntype RightDrawerProps = {\n /\n Title displayed in the drawer header\n /\n title?: ReactNode;\n\n /\n Unique identifier for the drawer instancRequired for store management\n /\n identifier: string;\n\n /* The content to be displayed inside the drawer /\n children?: ReactNode;\n\n /\n Optional header content displayed below the title\n /\n header?: ReactNode;\n\n /\n Optional footer content pinned to the bottom of the drawer\n /\n footer?: ReactNode;\n\n /\n Whether the drawer should close when clicking outside of it\n * @default true\n /\n closeOnOutsideClick?: boolean;\n\n /\n Configuration for an optional back button in the drawer header\n /\n backButton?: BackButtonProps;\n\n /\n External control for the open statWhen provided, overrides internal store state\n /\n isOpen?: boolean;\n\n /\n Callback function triggered when the drawer is closed\n /\n onClose?: () => void;\n\n /\n Optional container to render the drawer into.\n * If not provided, it will be rendered into the body.\n /\n container?: HTMLElement;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n footer,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n container,\n}) => {\n const content = useIntlayer('right-drawer');\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const containerElement = useGetElementOrWindow(container);\n\n const {\n open: openDrawer,\n close: closeDrawer,\n isOpen: checkIsOpen,\n } = useRightDrawer();\n const storeIsOpen = checkIsOpen(identifier);\n const isOpen = storeIsOpen;\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n // Handle Click Outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n try {\n if (!panelRef.current) return;\n\n const isClickAble = isOpen && closeOnOutsideClick;\n const isClickOutside =\n event.target && !panelRef.current.contains(event.target as Node);\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (\n (isClickAble && isClickOutside && isAtTopAndVisible) \|\|\n !event.target\n ) {\n closeDrawer(identifier);\n onClose?.();\n }\n } catch (_e) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n window.addEventListener('mousedown', handleClickOutside);\n return () => window.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (isOpenProp === undefined) return;\n if (isOpenProp === storeIsOpen) return;\n\n if (isOpenProp) {\n openDrawer(identifier);\n } else {\n closeDrawer(identifier);\n onCloseRef.current?.();\n }\n }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n // Handle Keyboard on Spare Space (Linter Fix)\n const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) return;\n\n // Allow closing via Enter or Space if focused on the spare area\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n }\n };\n\n if (!containerElement) return <></>;\n\n return createPortal(\n <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n {/ Header /}\n <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <Button\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n label={backButton.text ?? content.goBack.value}\n onClick={backButton.onBack}\n Icon={ChevronLeft}\n >\n {backButton?.text}\n </Button>\n )}\n </div>\n <div>\n <Popover identifier=\"close-drawer\">\n <Button\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n label=\"Close\"\n className=\"ml-auto\"\n onClick={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n Icon={X}\n size={ButtonSize.ICON_MD}\n />\n\n <Popover.Detail identifier=\"close-drawer\">\n <div className=\"flex items-center gap-2 p-2\">\n <span className=\"whitespace-nowrap text-neutral text-xs\">\n {content.closeDrawer}\n </span>\n <KeyboardShortcut\n shortcut=\"Escape\"\n size=\"sm\"\n onTriggered={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n />\n </div>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n {title && (\n <h2 className=\"flex items-center justify-center font-bold text-lg\">\n {title}\n </h2>\n )}\n {header}\n </div>\n\n {/ Body /}\n <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n {/* biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events /}\n <div\n className=\"flex flex-1 flex-col outline-none\"\n onClick={handleSpareSpaceClick}\n onKeyDown={handleSpareSpaceKeyDown}\n ref={childrenContainerRef}\n role=\"button\" // Semantically acts as a button area\n tabIndex={0} // Makes it focusable to receive key events\n >\n {children}\n </div>\n </div>\n\n {/ Footer */}\n {footer && <div className=\"shrink-0\">{footer}</div>}\n </Container>\n </MaxWidthSmoother>\n </div>,\n containerElement\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"RightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow } from '@hooks/index';\nimport { useDevice } from '@hooks/useDevice';\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawer } from './useRightDrawer';\n\n/*\n Configuration for the back button functionality in the RightDrawer\n \n @interface BackButtonProps\n /\ntype BackButtonProps = {\n /* Callback function triggered when the back button is clicked /\n onBack: () => void;\n /* Optional custom text for the back buttoDefaults to \"Go back\" if not provided /\n text?: string;\n};\n\n/\n Props configuration for the RightDrawer component\n \n @interface RightDrawerProps\n /\ntype RightDrawerProps = {\n /\n Title displayed in the drawer header\n /\n title?: ReactNode;\n\n /\n Unique identifier for the drawer instancRequired for store management\n /\n identifier: string;\n\n /* The content to be displayed inside the drawer /\n children?: ReactNode;\n\n /\n Optional header content displayed below the title\n /\n header?: ReactNode;\n\n /\n Optional footer content pinned to the bottom of the drawer\n /\n footer?: ReactNode;\n\n /\n Whether the drawer should close when clicking outside of it\n * @default true\n /\n closeOnOutsideClick?: boolean;\n\n /\n Configuration for an optional back button in the drawer header\n /\n backButton?: BackButtonProps;\n\n /\n External control for the open statWhen provided, overrides internal store state\n /\n isOpen?: boolean;\n\n /\n Callback function triggered when the drawer is closed\n /\n onClose?: () => void;\n\n /\n Optional container to render the drawer into.\n * If not provided, it will be rendered into the body.\n /\n container?: HTMLElement;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n footer,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n container,\n}) => {\n const content = useIntlayer('right-drawer');\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const containerElement = useGetElementOrWindow(container);\n\n const {\n open: openDrawer,\n close: closeDrawer,\n isOpen: checkIsOpen,\n } = useRightDrawer();\n const storeIsOpen = checkIsOpen(identifier);\n const isOpen = storeIsOpen;\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n // Handle Click Outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n try {\n if (!panelRef.current) return;\n\n const isClickAble = isOpen && closeOnOutsideClick;\n const isClickOutside =\n event.target && !panelRef.current.contains(event.target as Node);\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (\n (isClickAble && isClickOutside && isAtTopAndVisible) \|\|\n !event.target\n ) {\n closeDrawer(identifier);\n onClose?.();\n }\n } catch (_e) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n window.addEventListener('mousedown', handleClickOutside);\n return () => window.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (isOpenProp === undefined) return;\n if (isOpenProp === storeIsOpen) return;\n\n if (isOpenProp) {\n openDrawer(identifier);\n } else {\n closeDrawer(identifier);\n onCloseRef.current?.();\n }\n }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) {\n return;\n }\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n };\n\n // Handle Keyboard on Spare Space (Linter Fix)\n const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n if (e.target !== e.currentTarget) return;\n\n // Allow closing via Enter or Space if focused on the spare area\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (isMobile) {\n closeDrawer(identifier);\n onClose?.();\n }\n }\n };\n\n if (!containerElement) return <></>;\n\n return createPortal(\n <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n {/ Header /}\n <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label={backButton.text ?? content.goBack.value}\n onClick={backButton.onBack}\n Icon={ChevronLeft}\n >\n {backButton?.text}\n </Button>\n )}\n </div>\n <div>\n <Popover identifier=\"close-drawer\">\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label=\"Close\"\n className=\"ml-auto\"\n onClick={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n Icon={X}\n size=\"icon-md\"\n />\n\n <Popover.Detail identifier=\"close-drawer\">\n <div className=\"flex items-center gap-2 p-2\">\n <span className=\"whitespace-nowrap text-neutral text-xs\">\n {content.closeDrawer}\n </span>\n <KeyboardShortcut\n shortcut=\"Escape\"\n size=\"sm\"\n onTriggered={() => {\n closeDrawer(identifier);\n onClose?.();\n }}\n />\n </div>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n {title && (\n <h2 className=\"flex items-center justify-center font-bold text-lg\">\n {title}\n </h2>\n )}\n {header}\n </div>\n\n {/ Body /}\n <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n {/* biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events /}\n <div\n className=\"flex flex-1 flex-col outline-none\"\n onClick={handleSpareSpaceClick}\n onKeyDown={handleSpareSpaceKeyDown}\n ref={childrenContainerRef}\n role=\"button\" // Semantically acts as a button area\n tabIndex={0} // Makes it focusable to receive key events\n >\n {children}\n </div>\n </div>\n\n {/ Footer */}\n {footer && <div className=\"shrink-0\">{footer}</div>}\n </Container>\n </MaxWidthSmoother>\n </div>,\n containerElement\n );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { Badge, BadgeColor } from "../Badge/index.mjs";
+import { Badge } from "../Badge/index.mjs";
 import { Command, CommandRoot } from "../Command/index.mjs";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Check, X } from "lucide-react";
@@ -334,9 +334,9 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
 *   </MultiSelect.Trigger>
 *   <MultiSelect.Content>
 *     <MultiSelect.List>
-*       <MultiSelect.Item value={"React"}>React</MultiSelect.Item>
-*       <MultiSelect.Item value={"Vue"}>Vue</MultiSelect.Item>
-*       <MultiSelect.Item value={"Svelte"}>Svelte</MultiSelect.Item>
+*       <MultiSelect.Item value="React">React</MultiSelect.Item>
+*       <MultiSelect.Item value="Vue">Vue</MultiSelect.Item>
+*       <MultiSelect.Item value="Svelte">Svelte</MultiSelect.Item>
 *     </MultiSelect.List>
 *   </MultiSelect.Content>
 * </MultiSelect>

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, BadgeColor } 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={BadgeColor.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-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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"}

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

@@ -6,18 +6,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
 //#region src/components/Select/Select.tsx
-/**
-* Enum for Select content positioning strategies
-*
-* @enum SelectContentPosition
-*/
-let SelectContentPosition = /* @__PURE__ */ function(SelectContentPosition) {
-	/** Position relative to the trigger with automatic placement */
-	SelectContentPosition["POPPER"] = "popper";
-	/** Align content with the selected item */
-	SelectContentPosition["ITEM_ALIGNED"] = "item-aligned";
-	return SelectContentPosition;
-}({});
 const SelectRoot = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
@@ -85,7 +73,7 @@ const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsx(
 *
 * @example
 * ```tsx
-* <Select.Content position={SelectContentPosition.POPPER}>
+* <Select.Content position="popper">
 *   <Select.Item value="option1">Option 1</Select.Item>
 *   <Select.Item value="option2">Option 2</Select.Item>
 * </Select.Content>
@@ -253,7 +241,7 @@ const SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectP
 *     <Select.Trigger validationStyleEnabled aria-invalid={hasError}>
 *       <Select.Value placeholder="Select country..." />
 *     </Select.Trigger>
-*     <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>
+*     <Select.Content position="item-aligned">
 *       <Select.Item value="us">United States</Select.Item>
 *       <Select.Item value="ca">Canada</Select.Item>
 *       <Select.Item value="uk">United Kingdom</Select.Item>
@@ -274,5 +262,5 @@ Select.Item = SelectItem;
 Select.Separator = SelectSeparator;
 //#endregion
-export { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator };
+export { Select, SelectContent, SelectLabel, SelectSeparator };
 //# sourceMappingURL=Select.mjs.map

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 enum SelectContentPosition {\n /* Position relative to the trigger with automatic placement /\n POPPER = 'popper',\n /* Align content with the selected item /\n ITEM_ALIGNED = 'item-aligned',\n}\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={SelectContentPosition.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> = ({\n className,\n children,\n position = SelectContentPosition.POPPER,\n ...props\n}) => (\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={SelectContentPosition.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":";;;;;;;;;;;;;AAiBA,IAAY,wBAAL;;CAEL;;CAEA;;AACF;AAEA,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,EACH,WACA,UACA,qBACA,GAAG,YAEH,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 = \n \| 'popper' \|\n '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> = ({\n className,\n children,\n position = 'popper',\n ...props\n}) => (\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":";;;;;;;;AAqBA,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,EACH,WACA,UACA,WAAW,UACX,GAAG,YAEH,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"}

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

@@ -1,4 +1,4 @@
 import { MultiSelect } from "./Multiselect.mjs";
-import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select.mjs";
+import { Select, SelectContent, SelectLabel, SelectSeparator } from "./Select.mjs";
-export { MultiSelect, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator };
+export { MultiSelect, Select, SelectContent, SelectLabel, SelectSeparator };

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

@@ -0,0 +1,48 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+//#region src/components/Steps/index.tsx
+const slugify = (text) => String(text).normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/\s+/g, "-").toLowerCase();
+const Step = ({ number, title, isOptional = false, children, className, ...props }) => {
+	const { stepLabel, optionalLabel } = useIntlayer("steps");
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn("group relative flex w-full flex-1 gap-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col max-md:hidden",
+			"aria-hidden": "true",
+			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"),
+					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)]") })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-10 mb-8 flex w-full min-w-0 flex-col gap-8",
+			children: [title && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: `step-${number}-${slugify(title)}`,
+					"aria-label": `${stepLabel} ${number}: ${title}`,
+					className: "font-semibold text-lg text-text",
+					children: title
+				}), isOptional && /* @__PURE__ */ jsx("span", {
+					className: "ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs",
+					children: optionalLabel
+				})]
+			}), children]
+		})]
+	});
+};
+const Steps = ({ children, className, ...props }) => /* @__PURE__ */ jsx("ol", {
+	className: cn("list-none", className),
+	...props,
+	children
+});
+//#endregion
+export { Step, Steps };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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';\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 gap-2\">\n <h3\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=\"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":";;;;;AAIA,MAAM,WAAW,SACf,OAAO,IAAI,EACR,UAAU,KAAK,EACf,QAAQ,UAAU,EAAE,EACpB,QAAQ,QAAQ,GAAG,EACnB,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,MAAD;KACE,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/Steps/steps.content.mjs ADDED Viewed

@@ -0,0 +1,55 @@
+import { t } from "intlayer";
+//#region src/components/Steps/steps.content.ts
+const stepsContent = {
+	key: "steps",
+	content: {
+		stepLabel: t({
+			en: "Step",
+			"en-GB": "Step",
+			fr: "Étape",
+			es: "Paso",
+			de: "Schritt",
+			ja: "ステップ",
+			ko: "단계",
+			zh: "步骤",
+			it: "Passo",
+			pt: "Passo",
+			hi: "चरण",
+			ar: "خطوة",
+			ru: "Шаг",
+			tr: "Adım",
+			pl: "Krok",
+			id: "Langkah",
+			vi: "Bước",
+			uk: "Крок"
+		}),
+		optionalLabel: t({
+			en: "Optional",
+			"en-GB": "Optional",
+			fr: "Facultatif",
+			es: "Opcional",
+			de: "Optional",
+			ja: "オプション",
+			ko: "선택사항",
+			zh: "可选",
+			it: "Opzionale",
+			pt: "Opcional",
+			hi: "वैकल्पिक",
+			ar: "اختياري",
+			ru: "Необязательно",
+			tr: "İsteğe bağlı",
+			pl: "Opcjonalne",
+			id: "Opsional",
+			vi: "Tùy chọn",
+			uk: "Необов'язково"
+		})
+	},
+	title: "Steps component",
+	description: "Content declaration for the steps component, providing accessible labels for step headings and optional step badges.",
+	tags: ["component", "steps"]
+};
+//#endregion
+export { stepsContent as default, stepsContent };
+//# sourceMappingURL=steps.content.mjs.map

package/dist/esm/components/Steps/steps.content.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"steps.content.mjs","names":[],"sources":["../../../../src/components/Steps/steps.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const stepsContent = {\n key: 'steps',\n content: {\n stepLabel: t({\n en: 'Step',\n 'en-GB': 'Step',\n fr: 'Étape',\n es: 'Paso',\n de: 'Schritt',\n ja: 'ステップ',\n ko: '단계',\n zh: '步骤',\n it: 'Passo',\n pt: 'Passo',\n hi: 'चरण',\n ar: 'خطوة',\n ru: 'Шаг',\n tr: 'Adım',\n pl: 'Krok',\n id: 'Langkah',\n vi: 'Bước',\n uk: 'Крок',\n }),\n optionalLabel: t({\n en: 'Optional',\n 'en-GB': 'Optional',\n fr: 'Facultatif',\n es: 'Opcional',\n de: 'Optional',\n ja: 'オプション',\n ko: '선택사항',\n zh: '可选',\n it: 'Opzionale',\n pt: 'Opcional',\n hi: 'वैकल्पिक',\n ar: 'اختياري',\n ru: 'Необязательно',\n tr: 'İsteğe bağlı',\n pl: 'Opcjonalne',\n id: 'Opsional',\n vi: 'Tùy chọn',\n uk: \"Необов'язково\",\n }),\n },\n title: 'Steps component',\n description:\n 'Content declaration for the steps component, providing accessible labels for step headings and optional step badges.',\n tags: ['component', 'steps'],\n} satisfies Dictionary;\n\nexport default stepsContent;\n"],"mappings":";;;AAEA,MAAa,eAAe;CAC1B,KAAK;CACL,SAAS;EACP,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;EACD,eAAe,EAAE;GACf,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;CACH;CACA,OAAO;CACP,aACE;CACF,MAAM,CAAC,aAAa,OAAO;AAC7B"}

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

@@ -14,31 +14,15 @@ const defaultChoices = [{
 	content: "On",
 	value: true
 }];
-let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor) {
-	SwitchSelectorColor["PRIMARY"] = "primary";
-	SwitchSelectorColor["SECONDARY"] = "secondary";
-	SwitchSelectorColor["NEUTRAL"] = "neutral";
-	SwitchSelectorColor["LIGHT"] = "light";
-	SwitchSelectorColor["DARK"] = "dark";
-	SwitchSelectorColor["TEXT"] = "text";
-	return SwitchSelectorColor;
-}({});
-let SwitchSelectorSize = /* @__PURE__ */ function(SwitchSelectorSize) {
-	SwitchSelectorSize["XS"] = "xs";
-	SwitchSelectorSize["SM"] = "sm";
-	SwitchSelectorSize["MD"] = "md";
-	SwitchSelectorSize["LG"] = "lg";
-	return SwitchSelectorSize;
-}({});
 const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-row gap-2 rounded-full border-[1.3px] p-[1.5px]", {
 	variants: {
 		color: {
-			[`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"
+			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"
 		},
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
@@ -52,21 +36,21 @@ const switchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-row gap-
 });
 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", {
 	variants: { size: {
-		[`xs`]: "px-2 py-0.5 text-xs",
-		[`sm`]: "px-2 py-1 text-xs",
-		[`md`]: "p-2 text-sm",
-		[`lg`]: "p-4 text-base"
+		xs: "px-2 py-0.5 text-xs",
+		sm: "px-2 py-1 text-xs",
+		md: "p-2 text-sm",
+		lg: "p-4 text-base"
 	} },
-	defaultVariants: { size: `md` }
+	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",
-	[`${SwitchSelectorColor.ERROR}`]: "bg-error data-[indicator=true]:text-text",
-	[`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"
+	primary: "bg-primary data-[indicator=true]:text-text",
+	secondary: "bg-secondary data-[indicator=true]:text-text",
+	error: "bg-error data-[indicator=true]:text-text",
+	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"
 } } });
 /**
 * Component that allows the user to select one of the provided choices.
@@ -91,7 +75,7 @@ const SwitchSelector = (props) => {
 		role: "tablist",
 		"aria-disabled": disabled ? "true" : void 0,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative flex h-full w-full flex-row items-center justify-center",
+			className: "relative flex size-full flex-row items-center justify-center",
 			children: [choices.map((choice, index) => {
 				const { content, value, ...buttonProps } = choice;
 				const isKeyOfKey = typeof value === "string" || typeof value === "number";
@@ -123,5 +107,5 @@ const SwitchSelector = (props) => {
 };
 //#endregion
-export { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, choiceVariant, defaultChoices, indicatorVariant, switchSelectorVariant };
+export { SwitchSelector, choiceVariant, defaultChoices, indicatorVariant, switchSelectorVariant };
 //# sourceMappingURL=SwitchSelector.mjs.map

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 ~~enum~~ SwitchSelectorColor {\n ~~PRIMARY~~ = 'primary',\n ~~SECONDARY~~ = 'secondary',\n ~~NEUTRAL~~ = 'neutral',\n ~~LIGHT~~ = 'light',\n ~~DARK~~ = 'dark',\n ~~TEXT~~ = 'text',\n}\n\nexport ~~enum~~ SwitchSelectorSize ~~{\n XS~~ = 'xs'~~,\n SM~~ = 'sm'~~,\n MD~~ = 'md'~~,\n LG~~ = 'lg',\n}\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-[1.5px]',\n {\n variants: {\n color: {\n ~~[`${SwitchSelectorColor.PRIMARY}`]~~: 'border-primary text-primary',\n ~~[`${SwitchSelectorColor.SECONDARY}`]~~: 'border-secondary text-secondary',\n ~~[`${SwitchSelectorColor.NEUTRAL}`]~~: 'border-neutral text-neutral',\n ~~[`${SwitchSelectorColor.LIGHT}`]~~: 'border-white text-white',\n ~~[`${SwitchSelectorColor.DARK}`]~~: 'border-neutral-800 text-neutral-800',\n ~~[`${SwitchSelectorColor.TEXT}`]~~: 'border-text text-text',\n },\n disabled: {\n true: 'cursor-not-allowed opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n color: `${~~SwitchSelectorColor.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 ~~[`${SwitchSelectorSize.XS}`]~~: 'px-2 py-0.5 text-xs',\n ~~[`${SwitchSelectorSize.SM}`]~~: 'px-2 py-1 text-xs',\n ~~[`${SwitchSelectorSize.MD}`]~~: 'p-2 text-sm',\n ~~[`${SwitchSelectorSize.LG}`]~~: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: ~~`${SwitchSelectorSize.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 ~~[`${SwitchSelectorColor.PRIMARY}`]:\n~~ 'bg-primary data-[indicator=true]:text-text',\n ~~[`${SwitchSelectorColor.SECONDARY}`]:\n~~ 'bg-secondary data-[indicator=true]:text-text',\n ~~[`${SwitchSelectorColor.ERROR}`]:\n~~ 'bg-error data-[indicator=true]:text-text',\n ~~[`${SwitchSelectorColor.NEUTRAL}`]:\n~~ 'bg-neutral data-[indicator=true]:text-white',\n ~~[`${SwitchSelectorColor.LIGHT}`]:\n~~ 'bg-white data-[indicator=true]:text-black',\n ~~[`${SwitchSelectorColor.DARK}`]:\n~~ 'bg-neutral-800 data-[indicator=true]:text-white',\n ~~[`${SwitchSelectorColor.TEXT}`]:\n~~ '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 = ~~SwitchSelectorColor.PRIMARY~~,\n size = ~~SwitchSelectorSize.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 h-full ~~w-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 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;~~AAEA~~,~~IAAY,sBAAL;CACL;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,IAAY,qBAAL;CACL;CACA;CACA;CACA;;AACF;AAkBA,~~MAAa,wBAAwB,IACnC,wFACA;CACE,UAAU;EACR,OAAO;~~IACJ~~,~~YAAmC~~;~~IACnC~~,~~cAAqC~~;~~IACrC~~,~~YAAmC~~;~~IACnC~~,~~UAAiC~~;~~IACjC~~,~~SAAgC~~;~~IAChC~~,~~SAAgC~~;~~EACnC~~;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;~~GACH~~,~~OAA6B~~;~~GAC7B~~,~~OAA6B~~;~~GAC7B~~,~~OAA6B~~;~~GAC7B~~,~~OAA6B~~;~~CAChC~~,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,MAAa,mBAAmB,IAC9B,uHACA,EACE,UAAU,EACR,OAAO;~~EACJ~~,~~YACC~~;~~EACD~~,~~cACC~~;~~EACD~~,~~GAAG,oBAAoB,UACtB~~;~~EACD~~,~~YACC~~;~~EACD~~,~~UACC~~;~~EACD~~,~~SACC~~;~~EACD~~,~~SACC~~;~~AACJ~~,EACF,EACF,CACF;;;;;AAMA,MAAa,kBAAsB,UAAkC;CACnE,MAAM,EACJ,UAAU,gBACV,~~mBACA~~,~~aACA~~,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,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 \| '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-[1.5px]',\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 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,wFACA;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,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"}