npm - @intlayer/design-system - Versions diffs - 3.4.9 → 3.5.1 - Mend

@intlayer/design-system 3.4.9 → 3.5.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional /\n/ eslint-disable sonarjs/cognitive-complexity /\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ElementRef,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n value: string[];\n onValueChange: (value: string) => void;\n open: boolean;\n setOpen: (value: boolean) => void;\n inputValue: string;\n setInputValue: Dispatch<SetStateAction<string>>;\n activeIndex: number;\n setActiveIndex: Dispatch<SetStateAction<number>>;\n ref: RefObject<HTMLInputElement>;\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps \| null>(null);\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 MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n /\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n values?: string[];\n defaultValues?: string[];\n onValueChange?: (value: string[]) => void;\n loop?: boolean;\n};\n\n/\n \n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelectTrigger>\n * <MultiSelectInput placeholder=\"Select your framework\" />\n * </MultiSelectTrigger>\n * <MultiSelectContent>\n * <MultiSelectList>\n * <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n * <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n * <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n * </MultiSelectList>\n * </MultiSelectContent>\n * </MultiSelect>\n * ```\n /\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange: 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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.Provider 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.Provider>\n );\n};\n\nconst MultiSelectTrigger = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n>(\n (\n {\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n },\n ref\n ) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\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-muted-foreground ring-2'\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);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<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}\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-none',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n const { open } = useMultiSelect();\n return (\n <div ref={ref} className=\"relative\">\n {open && children}\n </div>\n );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n ElementRef<typeof Command.List>,\n ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n <Command.List\n ref={ref}\n className={cn(\n 'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\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\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n ElementRef<typeof Command.Item>,\n { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\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 ref={ref}\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n 'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n 'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n className,\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50'\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\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"],"names":["jsx","jsxs","RemoveIcon"],"mappings":"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"}
1	+ {"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional /\n/ eslint-disable sonarjs/cognitive-complexity /\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ElementRef,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n value: string[];\n onValueChange: (value: string) => void;\n open: boolean;\n setOpen: (value: boolean) => void;\n inputValue: string;\n setInputValue: Dispatch<SetStateAction<string>>;\n activeIndex: number;\n setActiveIndex: Dispatch<SetStateAction<number>>;\n ref: RefObject<HTMLInputElement>;\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps \| null>(null);\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 MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n /\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n values?: string[];\n defaultValues?: string[];\n onValueChange?: (value: string[]) => void;\n loop?: boolean;\n};\n\n/\n \n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelectTrigger>\n * <MultiSelectInput placeholder=\"Select your framework\" />\n * </MultiSelectTrigger>\n * <MultiSelectContent>\n * <MultiSelectList>\n * <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n * <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n * <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n * </MultiSelectList>\n * </MultiSelectContent>\n * </MultiSelect>\n * ```\n /\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange: 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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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.Provider 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.Provider>\n );\n};\n\nconst MultiSelectTrigger = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n>(\n (\n {\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n },\n ref\n ) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\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-muted-foreground ring-2'\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);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<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}\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-none',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n const { open } = useMultiSelect();\n return (\n <div ref={ref} className=\"relative\">\n {open && children}\n </div>\n );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n ElementRef<typeof Command.List>,\n ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n <Command.List\n ref={ref}\n className={cn(\n 'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\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\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n ElementRef<typeof Command.Item>,\n { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\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 ref={ref}\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n 'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n 'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n className,\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50'\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\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"],"names":["jsx","jsxs","RemoveIcon"],"mappings":"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"}

package/dist/components/Select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\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));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\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));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\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));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none 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));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/*\n Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"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 */\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"],"names":["SelectPrimitive","forwardRef","jsxs","cn","jsx","ChevronsUpDown","ChevronUpIcon","ChevronDownIcon","CheckIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,aAAaA,2BAAgB;AACnC,MAAM,cAAcA,2BAAgB;AACpC,MAAM,cAAcA,2BAAgB;AAEpC,MAAM,gBAAgBC,WAKpB,WAAA,CAAC,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,SAAS,QACpEC,2BAAA,kBAAA;AAAA,EAACF,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,0BACE;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACDC,2BAAAA,kBAAAA,IAACJ,2BAAgB,MAAhB,EAAqB,SAAO,MAC3B,UAACI,2BAAA,kBAAA,IAAAC,YAAA,gBAAA,EAAe,WAAU,oBAAA,CAAoB,EAChD,CAAA;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACD,cAAc,cAAcL,2BAAgB,QAAQ;AAEpD,MAAM,uBAAuBC,sBAG3B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BG,2BAAA,kBAAA;AAAA,EAACJ,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,2DAACG,YAAc,eAAA,EAAA;AAAA,EAAA;AACjB,CACD;AACD,qBAAqB,cAAcN,2BAAgB,eAAe;AAElE,MAAM,yBAAyBC,sBAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BG,2BAAA,kBAAA;AAAA,EAACJ,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,2DAACI,YAAgB,iBAAA,EAAA;AAAA,EAAA;AACnB,CACD;AACD,uBAAuB,cACrBP,2BAAgB,iBAAiB;AAE5B,MAAM,gBAAgBC,WAAA,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,MAAS,GAAA,QACxDG,2BAAA,kBAAA,IAAAJ,2BAAgB,QAAhB,EACC,UAAAE,2BAAA,kBAAA;AAAA,EAACF,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,aAAa,YACX;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAA,kBAAA,IAAC,sBAAqB,EAAA;AAAA,MACtBA,2BAAA,kBAAA;AAAA,QAACJ,2BAAgB;AAAA,QAAhB;AAAA,UACC,WAAWG,SAAA;AAAA,YACT;AAAA,YACA,aAAa,YACX;AAAA,UACJ;AAAA,UAEC;AAAA,QAAA;AAAA,MACH;AAAA,uDACC,wBAAuB,EAAA;AAAA,IAAA;AAAA,EAAA;AAC1B,EAAA,CACF,CACD;AACD,cAAc,cAAcH,2BAAgB,QAAQ;AAEvC,MAAA,cAAcC,sBAGzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BG,2BAAA,kBAAA;AAAA,EAACJ,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAAA,GAAG,qCAAqC,SAAS;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAcH,2BAAgB,MAAM;AAEhD,MAAM,aAAaC,WAAAA,WAGjB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QACpCC,2BAAA,kBAAA;AAAA,EAACF,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAA,kBAAA,IAAC,QAAK,EAAA,WAAU,8DACd,UAAAA,2BAAA,kBAAA,IAACJ,2BAAgB,eAAhB,EACC,UAAAI,2BAAA,kBAAA,IAACI,uBAAU,EAAA,WAAU,SAAS,CAAA,EAChC,CAAA,GACF;AAAA,MACCJ,2BAAAA,kBAAAA,IAAAJ,2BAAgB,UAAhB,EAA0B,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACtC,CACD;AACD,WAAW,cAAcA,2BAAgB,KAAK;AAEjC,MAAA,kBAAkBC,sBAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BG,2BAAA,kBAAA;AAAA,EAACJ,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWG,SAAAA,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA,EAAA;AACN,CACD;AACD,gBAAgB,cAAcH,2BAAgB,UAAU;AA6BjD,MAAM,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.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\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));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\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));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\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));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none 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));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/*\n Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"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 */\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"],"names":["SelectPrimitive","forwardRef","jsxs","cn","jsx","ChevronsUpDown","ChevronUpIcon","ChevronDownIcon","CheckIcon"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\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));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\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));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\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));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none 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));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/*\n Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"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 */\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"],"names":["jsxs","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\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));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\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));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\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));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\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-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none 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));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/*\n Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"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 */\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"],"names":["jsxs","jsx"],"mappings":";;;;;;AAgBA,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AACpC,MAAM,cAAc,gBAAgB;AAEpC,MAAM,gBAAgB,WAKpB,CAAC,EAAE,yBAAyB,OAAO,WAAW,UAAU,GAAG,SAAS,QACpEA,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,0BACE;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACDC,kCAAAA,IAAC,gBAAgB,MAAhB,EAAqB,SAAO,MAC3B,UAACA,kCAAAA,IAAA,gBAAA,EAAe,WAAU,oBAAoB,CAAA,EAChD,CAAA;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEpD,MAAM,uBAAuB,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BA,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,gDAAC,eAAc,CAAA,CAAA;AAAA,EAAA;AACjB,CACD;AACD,qBAAqB,cAAc,gBAAgB,eAAe;AAElE,MAAM,yBAAyB,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BA,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,gDAAC,iBAAgB,CAAA,CAAA;AAAA,EAAA;AACnB,CACD;AACD,uBAAuB,cACrB,gBAAgB,iBAAiB;AAE5B,MAAM,gBAAgB,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,MAAS,GAAA,QACxDA,kCAAA,IAAA,gBAAgB,QAAhB,EACC,UAAAD,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,aAAa,YACX;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,kCAAA,IAAC,sBAAqB,EAAA;AAAA,MACtBA,kCAAA;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aAAa,YACX;AAAA,UACJ;AAAA,UAEC;AAAA,QAAA;AAAA,MACH;AAAA,4CACC,wBAAuB,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAC1B,GACF,CACD;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEvC,MAAA,cAAc,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BA,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,qCAAqC,SAAS;AAAA,IAC3D,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAc,gBAAgB,MAAM;AAEhD,MAAM,aAAa,WAGjB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QACpCD,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,kCAAA,IAAC,QAAK,EAAA,WAAU,8DACd,UAAAA,kCAAA,IAAC,gBAAgB,eAAhB,EACC,UAAAA,kCAAA,IAAC,WAAU,EAAA,WAAU,SAAS,CAAA,EAChC,CAAA,GACF;AAAA,MACCA,kCAAAA,IAAA,gBAAgB,UAAhB,EAA0B,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACtC,CACD;AACD,WAAW,cAAc,gBAAgB,KAAK;AAEjC,MAAA,kBAAkB,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BA,kCAAA;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA,EAAA;AACN,CACD;AACD,gBAAgB,cAAc,gBAAgB,UAAU;AA6BjD,MAAM,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/components/SwitchSelector/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\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 = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\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"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwBA,uBAAA;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,~~IACT~~;AAAA,~~EACF~~;~~AACF~~;AAEA,MAAM,gBAAgBA,uBAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,~~MACN~~;AAAA,~~IACF~~;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,~~IACR~~;AAAA,~~EACF~~;~~AACF~~;AAEA,MAAM,mBAAmBA,uBAAA;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,EACF;~~AACF~~;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAIC,WAAA;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,~~EAAA~~;~~AAEhC~~,QAAA,cAAcC,~~kBAA4B~~,~~CAAA~~,~~CAAE~~;AAC5C,QAAA,eAAeA,kBAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4BC,sBAAA,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,~~EAAA~~;~~AAInB~~,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAAC,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAWC,SAAA;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,~~gBAAA~~,~~CACD~~;AAAA,cACH;AAAA,cACA,KAAK,aAAaF,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,~~cAC/B~~;AAAA,~~YAAA~~;AAAA,YAEC;AAAA,~~UAAA~~;AAAA,~~QACH~~,CAEH;AAAA,QACA,2BACCF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAA;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,~~cAAA~~,~~CACD~~;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,~~QACP~~;AAAA,~~MAAA~~,~~GAEJ~~;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGN~~;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\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 = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\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"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\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 = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\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"],"names":["jsx","jsxs","value"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,~~IACT~~;AAAA,~~EACF~~;~~AACF~~;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,~~MACN~~;AAAA,~~IACF~~;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,~~IACR~~;AAAA,~~EACF~~;~~AACF~~;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,EACF;~~AACF~~;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,~~EAAA~~;~~AAEhC~~,QAAA,cAAc,OAA4B,~~CAAA,CAAE~~;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,~~EAAA~~;~~AAInB~~,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,~~gBAAA~~,~~CACD~~;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,~~cAC/B~~;AAAA,~~YAAA~~;AAAA,YAEC;AAAA,~~UAAA~~;AAAA,~~QACH~~,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,~~cAAA~~,~~CACD~~;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,~~QACP~~;AAAA,~~MAAA~~,~~GAEJ~~;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGN~~;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\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 = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\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"],"names":["jsx","jsxs","value"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwB;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AAmBO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AACtB,QAAA,CAAC,YAAY,QAAQ,IAAI;AAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EACtC;AACM,QAAA,cAAc,OAA4B,EAAE;AAC5C,QAAA,eAAe,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4B,gBAAgB,WAAW;AAEzD,QAAA,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EACrB;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,kCAAA,KAAC,OAAI,EAAA,WAAU,gEACZ,UAAA;AAAA,QAAQ,QAAA,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,YAAgB,IAAA;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAG3B,iBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBACD,CAAA;AAAA,cACH;AAAA,cACA,KAAK,aAAaA,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACC,4BAAA,QAAQ,KAAK,IAAI;AAAA,cAAA;AAAA,YAC/B;AAAA,YAEC;AAAA,UACH;AAAA,QAAA,CAEH;AAAA,QACA,2BACCF,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cACD,CAAA;AAAA,YACH;AAAA,YACA,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,EAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/TabSelector/TabSelector.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n },\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,qBAAqBA,uBAAA;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,~~IACT~~;AAAA,~~EACF~~;~~AACF~~;AAEA,MAAM,mBAAmBA,uBAAA;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,EACF;~~AACF~~;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAcC,~~kBAAsB~~,~~CAAA~~,~~CAAE~~;AACtC,QAAA,eAAeA,kBAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4BC,sBAAA;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,~~EAAA~~;~~AAIA~~,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,WAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,~~YAC/B~~;AAAA,~~UAAA~~,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,~~QACrE~~;AAAA,~~MAAA~~;AAAA,IAAA;AAAA,~~EAAA~~;~~AAIR~~;;"}
1	+ {"version":3,"file":"TabSelector.cjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n },\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["cva","useRef","useItemSelector","jsxs","cn","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,qBAAqBA,uBAAA;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmBA,uBAAA;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAcC,WAAsB,OAAA,EAAE;AACtC,QAAA,eAAeA,kBAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4BC,sBAAA;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAOC,WAAAA,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAAA;AAAA,UAC/B,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAEJ;AAEJ;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n },\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,~~IACT~~;AAAA,~~EACF~~;~~AACF~~;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,~~MACR~~;AAAA,~~IACF~~;AAAA,EACF;~~AACF~~;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAc,OAAsB,~~CAAA,CAAE~~;AACtC,QAAA,eAAe,OAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,~~EAAA~~;~~AAIA~~,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,~~YAC/B~~;AAAA,~~UAAA~~,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,~~QACrE~~;AAAA,~~MAAA~~;AAAA,IAAA;AAAA,~~EAAA~~;~~AAIR~~;"}
1	+ {"version":3,"file":"TabSelector.mjs","sources":["../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useRef,\n type HTMLAttributes,\n type ReactElement,\n cloneElement,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nconst tabSelectorVariant = cva(\n 'relative flex size-full flex-row items-center gap-2',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary/10 aria-selected:text-text dark:bg-primary-dark/10 dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary/10 aria-selected:text-text dark:bg-secondary-dark/10 dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive/10 aria-selected:text-text dark:bg-destructive-dark/10 dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral/10 aria-selected:text-white dark:bg-neutral-dark/10 dark:aria-selected:text-text',\n light: 'bg-white/10 aria-selected:text-black',\n dark: 'bg-neutral-800/10 aria-selected:text-white',\n text: 'bg-text/10 aria-selected:text-text-dark dark:bg-text-dark/10 dark:aria-selected:text-text',\n },\n },\n }\n);\n\nexport type TabProps = HTMLAttributes<HTMLElement> & {\n key: string \| number;\n};\n\ntype TabSelectorProps<T extends TabProps> = {\n tabs: ReactElement<T>[];\n selectedChoice: T['key'];\n onTabClick?: (choice: T['key']) => void;\n hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n VariantProps<typeof tabSelectorVariant>;\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <TabSelector\n * selectedChoice=\"option1\"\n * onTabClick={(choice) => console.log(choice)}\n * hoverable={true}\n * >\n * <Button key=\"option1\"/>\n * <Button key=\"option2\"/>\n * <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabProps>({\n tabs,\n selectedChoice,\n onTabClick,\n color = 'primary',\n hoverable = false,\n className,\n}: TabSelectorProps<T>) => {\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(\n optionsRefs,\n undefined,\n hoverable\n );\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation=\"horizontal\"\n aria-multiselectable=\"false\"\n role=\"tablist\"\n >\n {tabs.map((Tab, index) => {\n const key = Tab.key!;\n\n const isSelected = selectedChoice === key;\n\n return cloneElement(Tab, {\n key: key ?? index,\n role: 'tab',\n onClick: () => onTabClick?.(key),\n 'aria-selected': isSelected,\n ref: (el: HTMLElement) => {\n optionsRefs.current[index] = el!;\n },\n } as unknown as T);\n })}\n {choiceIndicatorPosition && (\n <div\n className={indicatorVariant({\n color,\n })}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n />\n )}\n </div>\n );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ;AA+BO,MAAM,cAAc,CAAqB;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,MAA2B;AACnB,QAAA,cAAc,OAAsB,EAAE;AACtC,QAAA,eAAe,OAA8B,IAAI;AACjD,QAAA,EAAE,4BAA4B;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,mBAAmB;AAAA,UACjB;AAAA,QAAA,CACD;AAAA,QACD;AAAA,MACF;AAAA,MACA,oBAAiB;AAAA,MACjB,wBAAqB;AAAA,MACrB,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAK,KAAA,IAAI,CAAC,KAAK,UAAU;AACxB,gBAAM,MAAM,IAAI;AAEhB,gBAAM,aAAa,mBAAmB;AAEtC,iBAAO,aAAa,KAAK;AAAA,YACvB,KAAK,OAAO;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,GAAG;AAAA,YAC/B,iBAAiB;AAAA,YACjB,KAAK,CAAC,OAAoB;AACZ,0BAAA,QAAQ,KAAK,IAAI;AAAA,YAAA;AAAA,UAC/B,CACe;AAAA,QAAA,CAClB;AAAA,QACA,2BACCC,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,iBAAiB;AAAA,cAC1B;AAAA,YAAA,CACD;AAAA,YACD,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,UACA,GAAG,cAAc,GAAG,KAAK,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/components/Tag/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n success:\n 'bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark',\n error:\n 'bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark',\n warning:\n 'bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark',\n neutral:\n 'bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark',\n info: 'bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark',\n text: 'bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark',\n },\n size: {\n xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n md: 'py-1 px-2 text-base border-2',\n lg: 'py-2 px-3 text-lg border-2',\n xl: 'py-4 px-5 text-xl border-2',\n },\n border: {\n none: 'border-none',\n with: 'border-text dark:border-text-dark border-[1.5px]',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nTag.displayName = 'Tag';\n"],"names":["cva","forwardRef","jsx"],"mappings":";;;;;AAMA,MAAM,oBAAoBA,2BAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SACE;AAAA,MACF,OACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,~~IACR~~;AAAA,~~EACF~~;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,~~EACR~~;~~AACF~~,CAAC;AAEM,MAAM,MAAMC,WAAA;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AAED,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,kBAAkB;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,~~IAAA~~;AAAA,~~EAGP~~;~~AACF~~;AAEA,IAAI,cAAc;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n success:\n 'bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark',\n error:\n 'bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark',\n warning:\n 'bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark',\n neutral:\n 'bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark',\n info: 'bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark',\n text: 'bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark',\n },\n size: {\n xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n md: 'py-1 px-2 text-base border-2',\n lg: 'py-2 px-3 text-lg border-2',\n xl: 'py-4 px-5 text-xl border-2',\n },\n border: {\n none: 'border-none',\n with: 'border-text dark:border-text-dark border-[1.5px]',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nTag.displayName = 'Tag';\n"],"names":["cva","forwardRef","jsx"],"mappings":";;;;;AAMA,MAAM,oBAAoBA,2BAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SACE;AAAA,MACF,OACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,CAAC;AAEM,MAAM,MAAMC,WAAA;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AAED,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,kBAAkB;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,IAAI,cAAc;;"}

package/dist/components/Tag/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n success:\n 'bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark',\n error:\n 'bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark',\n warning:\n 'bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark',\n neutral:\n 'bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark',\n info: 'bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark',\n text: 'bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark',\n },\n size: {\n xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n md: 'py-1 px-2 text-base border-2',\n lg: 'py-2 px-3 text-lg border-2',\n xl: 'py-4 px-5 text-xl border-2',\n },\n border: {\n none: 'border-none',\n with: 'border-text dark:border-text-dark border-[1.5px]',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nTag.displayName = 'Tag';\n"],"names":["jsx"],"mappings":";;;AAMA,MAAM,oBAAoB,IAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SACE;AAAA,MACF,OACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,~~IACR~~;AAAA,~~EACF~~;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,~~EACR~~;~~AACF~~,CAAC;AAEM,MAAM,MAAM;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AAED,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,kBAAkB;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,~~IAAA~~;AAAA,~~EAGP~~;~~AACF~~;AAEA,IAAI,cAAc;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n success:\n 'bg-success/10 dark:bg-success-dark/10 border-success dark:border-success-dark text-success dark:text-success-dark',\n error:\n 'bg-error/10 dark:bg-error-dark/10 border-error dark:border-error-dark text-error dark:text-error-dark',\n warning:\n 'bg-warning/10 dark:bg-warning-dark/10 border-warning dark:border-warning-dark text-warning dark:text-warning-dark',\n neutral:\n 'bg-neutral/10 dark:bg-neutral-dark/10 border-neutral dark:border-neutral-dark text-neutral dark:text-neutral-dark',\n info: 'bg-info/10 dark:bg-info-dark/10 border-info dark:border-info-dark text-info dark:text-info-dark',\n text: 'bg-text/10 dark:bg-text-dark/10 border-text dark:border-text-dark text-text dark:text-text-dark',\n },\n size: {\n xs: 'py-0.5 px-2 text-xs border-[1.2px]',\n sm: 'py-0.5 px-2 text-sm border-[1.5px]',\n md: 'py-1 px-2 text-base border-2',\n lg: 'py-2 px-3 text-lg border-2',\n xl: 'py-4 px-5 text-xl border-2',\n },\n border: {\n none: 'border-none',\n with: 'border-text dark:border-text-dark border-[1.5px]',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nTag.displayName = 'Tag';\n"],"names":["jsx"],"mappings":";;;AAMA,MAAM,oBAAoB,IAAI,uBAAuB;AAAA,EACnD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,OAAO;AAAA,MACL,SACE;AAAA,MACF,OACE;AAAA,MACF,SACE;AAAA,MACF,SACE;AAAA,MACF,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EAEA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAEV,CAAC;AAEM,MAAM,MAAM;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AAED,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,kBAAkB;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,IAAI,cAAc;"}

package/dist/components/TextArea/AutoSizeTextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["import {\n useRef,\n useEffect,\n type ChangeEventHandler,\n forwardRef,\n useImperativeHandle,\n useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n autoSize?: boolean;\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea = forwardRef<\n HTMLTextAreaElement,\n AutoSizedTextAreaProps\n>(({ className, autoSize = true, onChange, maxRows = 999, ...props }, ref) => {\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = useCallback(() => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl \|\| !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height =\n Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n }, [autoSize, maxRows]);\n\n useEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = useCallback(\n (el: HTMLTextAreaElement \| null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n },\n [adjustHeight]\n );\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn(\n 'overflow-y-scroll',\n autoSize ? 'resize-none' : '',\n className\n )}\n {...props}\n />\n );\n});\n\nAutoSizedTextArea.displayName = 'AutoSizedTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useCallback","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;AAgBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAoBA,WAAA,WAG/B,CAAC,EAAE,WAAW,WAAW,MAAM,UAAU,UAAU,KAAK,GAAG,MAAA,GAAS,QAAQ;AACtE,QAAA,cAAcC,kBAAmC,IAAI;AAEvCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAeC,WAAAA,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtBC,aAAAA,UAAU,MAAM;AACD;EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC;~~EAAA~~;~~AAGf~~,QAAM,SAASD,WAAA;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO;~~MACf~~;AAAA,~~IACF~~;AAAA,IACA,CAAC,YAAY;AAAA,~~EAAA~~;~~AAIb~~,SAAAE,2BAAA,kBAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGV~~,CAAC;AAED,kBAAkB,cAAc;;"}
1	+ {"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["import {\n useRef,\n useEffect,\n type ChangeEventHandler,\n forwardRef,\n useImperativeHandle,\n useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n autoSize?: boolean;\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea = forwardRef<\n HTMLTextAreaElement,\n AutoSizedTextAreaProps\n>(({ className, autoSize = true, onChange, maxRows = 999, ...props }, ref) => {\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = useCallback(() => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl \|\| !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height =\n Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n }, [autoSize, maxRows]);\n\n useEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = useCallback(\n (el: HTMLTextAreaElement \| null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n },\n [adjustHeight]\n );\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn(\n 'overflow-y-scroll',\n autoSize ? 'resize-none' : '',\n className\n )}\n {...props}\n />\n );\n});\n\nAutoSizedTextArea.displayName = 'AutoSizedTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useCallback","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;AAgBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAoBA,WAAA,WAG/B,CAAC,EAAE,WAAW,WAAW,MAAM,UAAU,UAAU,KAAK,GAAG,MAAA,GAAS,QAAQ;AACtE,QAAA,cAAcC,kBAAmC,IAAI;AAEvCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAeC,WAAAA,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtBC,aAAAA,UAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEA,QAAM,SAASD,WAAA;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGE,SAAAE,2BAAA,kBAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AAED,kBAAkB,cAAc;;"}

package/dist/components/TextArea/AutoSizeTextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["import {\n useRef,\n useEffect,\n type ChangeEventHandler,\n forwardRef,\n useImperativeHandle,\n useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n autoSize?: boolean;\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea = forwardRef<\n HTMLTextAreaElement,\n AutoSizedTextAreaProps\n>(({ className, autoSize = true, onChange, maxRows = 999, ...props }, ref) => {\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = useCallback(() => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl \|\| !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height =\n Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n }, [autoSize, maxRows]);\n\n useEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = useCallback(\n (el: HTMLTextAreaElement \| null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n },\n [adjustHeight]\n );\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn(\n 'overflow-y-scroll',\n autoSize ? 'resize-none' : '',\n className\n )}\n {...props}\n />\n );\n});\n\nAutoSizedTextArea.displayName = 'AutoSizedTextArea';\n"],"names":["jsx"],"mappings":";;;;AAgBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAoB,WAG/B,CAAC,EAAE,WAAW,WAAW,MAAM,UAAU,UAAU,KAAK,GAAG,MAAA,GAAS,QAAQ;AACtE,QAAA,cAAc,OAAmC,IAAI;AAEvC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAe,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtB,YAAU,MAAM;AACD;EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC;~~EAAA~~;~~AAGf~~,QAAM,SAAS;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO;~~MACf~~;AAAA,~~IACF~~;AAAA,IACA,CAAC,YAAY;AAAA,~~EAAA~~;~~AAIb~~,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGV~~,CAAC;AAED,kBAAkB,cAAc;"}
1	+ {"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["import {\n useRef,\n useEffect,\n type ChangeEventHandler,\n forwardRef,\n useImperativeHandle,\n useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n autoSize?: boolean;\n maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea = forwardRef<\n HTMLTextAreaElement,\n AutoSizedTextAreaProps\n>(({ className, autoSize = true, onChange, maxRows = 999, ...props }, ref) => {\n const textAreaRef = useRef<HTMLTextAreaElement \| null>(null);\n\n useImperativeHandle(ref, () => textAreaRef.current!);\n\n const adjustHeight = useCallback(() => {\n const textAreaEl = textAreaRef.current;\n\n if (!textAreaEl \|\| !autoSize) return;\n\n const textAreaStyle = textAreaEl.style;\n\n // Reset height to get accurate scrollHeight\n textAreaStyle.height = 'auto';\n const scrollHeight = textAreaEl.scrollHeight;\n const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n // Set the new height\n textAreaStyle.height =\n Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n }, [autoSize, maxRows]);\n\n useEffect(() => {\n adjustHeight();\n }, [props.value, props.defaultValue, adjustHeight]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n onChange?.(e);\n adjustHeight();\n };\n\n const setRef = useCallback(\n (el: HTMLTextAreaElement \| null) => {\n textAreaRef.current = el;\n if (el) {\n adjustHeight();\n }\n },\n [adjustHeight]\n );\n\n return (\n <TextArea\n ref={setRef}\n onChange={handleChange}\n className={cn(\n 'overflow-y-scroll',\n autoSize ? 'resize-none' : '',\n className\n )}\n {...props}\n />\n );\n});\n\nAutoSizedTextArea.displayName = 'AutoSizedTextArea';\n"],"names":["jsx"],"mappings":";;;;AAgBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAoB,WAG/B,CAAC,EAAE,WAAW,WAAW,MAAM,UAAU,UAAU,KAAK,GAAG,MAAA,GAAS,QAAQ;AACtE,QAAA,cAAc,OAAmC,IAAI;AAEvC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAE7C,QAAA,eAAe,YAAY,MAAM;AACrC,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAAA,GAC1D,CAAC,UAAU,OAAO,CAAC;AAEtB,YAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,OAAmC;AAClC,kBAAY,UAAU;AACtB,UAAI,IAAI;AACO,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;AAED,kBAAkB,cAAc;"}

package/dist/components/TextArea/TextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.cjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n forwardRef,\n type TextareaHTMLAttributes,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { inputVariants } from '../Input';\n\nexport type TextAreaProps = DetailedHTMLProps<\n DetailedHTMLProps<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n >,\n HTMLTextAreaElement\n> & {\n validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ className, variant, validationStyleEnabled = false, ...props }, ref) => (\n <textarea\n className={cn(\n 'resize-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled\n ? 'enabled'\n : 'disabled',\n className,\n })\n )}\n ref={ref}\n {...props}\n />\n )\n);\n\nTextArea.displayName = 'TextArea';\n"],"names":["forwardRef","jsx","cn","inputVariants"],"mappings":";;;;;;;;AAmBO,MAAM,WAAWA,WAAA;AAAA,EACtB,CAAC,EAAE,WAAW,SAAS,yBAAyB,OAAO,GAAG,MAAM,GAAG,QACjEC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACAC,qCAAc;AAAA,UACZ;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,~~QAAA~~,~~CACD~~;AAAA,MACH;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,~~EACN~~;~~AAEJ~~;AAEA,SAAS,cAAc;;"}
1	+ {"version":3,"file":"TextArea.cjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n forwardRef,\n type TextareaHTMLAttributes,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { inputVariants } from '../Input';\n\nexport type TextAreaProps = DetailedHTMLProps<\n DetailedHTMLProps<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n >,\n HTMLTextAreaElement\n> & {\n validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ className, variant, validationStyleEnabled = false, ...props }, ref) => (\n <textarea\n className={cn(\n 'resize-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled\n ? 'enabled'\n : 'disabled',\n className,\n })\n )}\n ref={ref}\n {...props}\n />\n )\n);\n\nTextArea.displayName = 'TextArea';\n"],"names":["forwardRef","jsx","cn","inputVariants"],"mappings":";;;;;;;;AAmBO,MAAM,WAAWA,WAAA;AAAA,EACtB,CAAC,EAAE,WAAW,SAAS,yBAAyB,OAAO,GAAG,MAAM,GAAG,QACjEC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACAC,qCAAc;AAAA,UACZ;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,cAAc;;"}

package/dist/components/TextArea/TextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n forwardRef,\n type TextareaHTMLAttributes,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { inputVariants } from '../Input';\n\nexport type TextAreaProps = DetailedHTMLProps<\n DetailedHTMLProps<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n >,\n HTMLTextAreaElement\n> & {\n validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ className, variant, validationStyleEnabled = false, ...props }, ref) => (\n <textarea\n className={cn(\n 'resize-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled\n ? 'enabled'\n : 'disabled',\n className,\n })\n )}\n ref={ref}\n {...props}\n />\n )\n);\n\nTextArea.displayName = 'TextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAmBO,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,SAAS,yBAAyB,OAAO,GAAG,MAAM,GAAG,QACjEA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,UACZ;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,~~QAAA~~,~~CACD~~;AAAA,MACH;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,~~EACN~~;~~AAEJ~~;AAEA,SAAS,cAAc;"}
1	+ {"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n forwardRef,\n type TextareaHTMLAttributes,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { inputVariants } from '../Input';\n\nexport type TextAreaProps = DetailedHTMLProps<\n DetailedHTMLProps<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n >,\n HTMLTextAreaElement\n> & {\n validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ className, variant, validationStyleEnabled = false, ...props }, ref) => (\n <textarea\n className={cn(\n 'resize-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled\n ? 'enabled'\n : 'disabled',\n className,\n })\n )}\n ref={ref}\n {...props}\n />\n )\n);\n\nTextArea.displayName = 'TextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAmBO,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,SAAS,yBAAyB,OAAO,GAAG,MAAM,GAAG,QACjEA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,UACZ;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,cAAc;"}

package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DesktopThemeSwitcher.cjs","sources":["../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { type ButtonProps, Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"names":["jsx","Button","Modes","useState","mode","jsxs","DropDown","CircleDashed","Sun","Moon","Container"],"mappings":";;;;;;;;;;AASA,MAAM,aAA8B,CAAC,EAAE,MAAM,UAAU,GAAG,MAAA,MACxDA,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,2BAAA,kBAAA;AAAA,EAACC,yBAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA,aAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,~~EACF,CAAA~~;AASK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqBC,~~6CAAM~~,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAIC,~~oBAAgB~~,WAAW;AAE7C,QAAA,aAAa,CAACC,UAAgB;AAC9BA,QAAAA,UAASF,6CAAM,QAAQ;AAChB,eAAA,eAAeA,6CAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAASE,KAAI;AAAA,~~IACf~~;~~AACA~~,YAAQA,KAAI;AAAA,~~EAAA~~;~~AAGd~~,QAAM,kBAAkB;AAGtB,SAAAC,2BAAA,kBAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,iBACpB,UAAA;AAAA,IAAAD,2BAAA,kBAAA;AAAA,MAACC,0BAAAA,SAAS;AAAA,MAAT;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SAASJ,uCAAM,MAAA,UAAWF,2BAAAA,kBAAAA,IAAAO,YAAAA,cAAA,EAAa,aAAU,UAAS;AAAA,UAC1D,SAASL,uCAAM,MAAA,SAAUF,2BAAAA,kBAAAA,IAAAQ,YAAAA,KAAA,EAAI,aAAU,SAAQ;AAAA,UAC/C,SAASN,uCAAM,MAAA,QAASF,2BAAAA,kBAAAA,IAAAS,YAAAA,MAAA,EAAK,aAAU,~~QAAO~~;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAECT,2BAAA,kBAAA,IAAAM,0BAAA,SAAS,OAAT,EAAe,YAAY,iBAAiB,aAAW,MAAC,YAAU,MACjE,UAACD,2BAAAA,kBAAAA,KAAAK,2BAAAA,WAAA,EAAU,WAAU,iCAAgC,WAAU,KAC7D,UAAA;AAAA,MAAAV,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMO,YAAA;AAAA,UACN,SAAS,MAAM,WAAWL,uCAAA,MAAM,MAAM;AAAA,UACtC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMQ,YAAA;AAAA,UACN,SAAS,MAAM,WAAWN,uCAAA,MAAM,KAAK;AAAA,UACrC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMS,YAAA;AAAA,UACN,SAAS,MAAM,WAAWP,uCAAA,MAAM,IAAI;AAAA,UACpC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,~~MAED~~;AAAA,~~IAAA~~,EAAA,CACF,EACF,CAAA;AAAA,~~EACF,~~EAAA,~~CAAA~~;AAEJ;;"}
1	+ {"version":3,"file":"DesktopThemeSwitcher.cjs","sources":["../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { type ButtonProps, Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"names":["jsx","Button","Modes","useState","mode","jsxs","DropDown","CircleDashed","Sun","Moon","Container"],"mappings":";;;;;;;;;;AASA,MAAM,aAA8B,CAAC,EAAE,MAAM,UAAU,GAAG,MAAA,MACxDA,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,2BAAA,kBAAA;AAAA,EAACC,yBAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA,aAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,GACF;AASK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqBC,uCAAA,MAAM,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAIC,WAAAA,SAAgB,WAAW;AAE7C,QAAA,aAAa,CAACC,UAAgB;AAC9BA,QAAAA,UAASF,6CAAM,QAAQ;AAChB,eAAA,eAAeA,6CAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAASE,KAAI;AAAA,IAAA;AAEf,YAAQA,KAAI;AAAA,EACd;AAEA,QAAM,kBAAkB;AAGtB,SAAAC,2BAAA,kBAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,iBACpB,UAAA;AAAA,IAAAD,2BAAA,kBAAA;AAAA,MAACC,0BAAAA,SAAS;AAAA,MAAT;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SAASJ,uCAAM,MAAA,UAAWF,2BAAAA,kBAAAA,IAAAO,YAAAA,cAAA,EAAa,aAAU,UAAS;AAAA,UAC1D,SAASL,uCAAM,MAAA,SAAUF,2BAAAA,kBAAAA,IAAAQ,YAAAA,KAAA,EAAI,aAAU,SAAQ;AAAA,UAC/C,SAASN,uCAAM,MAAA,QAASF,2BAAAA,kBAAAA,IAAAS,YAAAA,MAAA,EAAK,aAAU,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAECT,2BAAA,kBAAA,IAAAM,0BAAA,SAAS,OAAT,EAAe,YAAY,iBAAiB,aAAW,MAAC,YAAU,MACjE,UAACD,2BAAAA,kBAAAA,KAAAK,2BAAAA,WAAA,EAAU,WAAU,iCAAgC,WAAU,KAC7D,UAAA;AAAA,MAAAV,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMO,YAAA;AAAA,UACN,SAAS,MAAM,WAAWL,uCAAA,MAAM,MAAM;AAAA,UACtC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMQ,YAAA;AAAA,UACN,SAAS,MAAM,WAAWN,uCAAA,MAAM,KAAK;AAAA,UACrC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAF,2BAAA,kBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAMS,YAAA;AAAA,UACN,SAAS,MAAM,WAAWP,uCAAA,MAAM,IAAI;AAAA,UACpC,UAAU,SAASA,uCAAAA,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DesktopThemeSwitcher.mjs","sources":["../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { type ButtonProps, Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"names":["jsx","mode","jsxs"],"mappings":";;;;;;;;AASA,MAAM,aAA8B,CAAC,EAAE,MAAM,UAAU,GAAG,MAAA,MACxDA,kCAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA,aAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,~~EACF,CAAA~~;AASK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqB,MAAM,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAgB,WAAW;AAE7C,QAAA,aAAa,CAACC,UAAgB;AAC9BA,QAAAA,UAAS,MAAM,QAAQ;AAChB,eAAA,eAAe,MAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAASA,KAAI;AAAA,~~IACf~~;~~AACA~~,YAAQA,KAAI;AAAA,~~EAAA~~;~~AAGd~~,QAAM,kBAAkB;AAGtB,SAAAC,kCAAA,KAAC,UAAS,EAAA,YAAY,iBACpB,UAAA;AAAA,IAAAA,kCAAA;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SAAS,MAAM,UAAWF,kCAAAA,IAAA,cAAA,EAAa,aAAU,UAAS;AAAA,UAC1D,SAAS,MAAM,SAAUA,kCAAAA,IAAA,KAAA,EAAI,aAAU,SAAQ;AAAA,UAC/C,SAAS,MAAM,QAASA,kCAAAA,IAAA,MAAA,EAAK,aAAU,~~QAAO~~;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAECA,kCAAA,IAAA,SAAS,OAAT,EAAe,YAAY,iBAAiB,aAAW,MAAC,YAAU,MACjE,UAACE,kCAAAA,KAAA,WAAA,EAAU,WAAU,iCAAgC,WAAU,KAC7D,UAAA;AAAA,MAAAF,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,MAAM,MAAM;AAAA,UACtC,UAAU,SAAS,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,MAAM,KAAK;AAAA,UACrC,UAAU,SAAS,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,MAAM,IAAI;AAAA,UACpC,UAAU,SAAS,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,~~MAED~~;AAAA,~~IAAA~~,EAAA,CACF,EACF,CAAA;AAAA,~~EACF,~~EAAA,~~CAAA~~;AAEJ;"}
1	+ {"version":3,"file":"DesktopThemeSwitcher.mjs","sources":["../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { type ButtonProps, Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n <div className=\"relative w-full p-0.5\">\n <Button\n className=\"hover:bg-text/10 focus:bg-text-opposite/20 dark:hover:bg-text-opposite/10 dark:focus:bg-text-opposite/20 w-full cursor-pointer rounded-lg p-1 text-left focus:outline-none disabled:text-white/25\"\n Icon={Icon}\n data-mode=\"system\"\n role=\"option\"\n variant=\"none\"\n {...props}\n >\n {children}\n </Button>\n </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n theme: Modes;\n setTheme: (theme: Modes) => void;\n systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n theme,\n setTheme,\n systemTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const switchMode = (mode: Modes) => {\n if (mode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(mode);\n }\n setMode(mode);\n };\n\n const panelIdentifier = 'theme-switcher';\n\n return (\n <DropDown identifier={panelIdentifier}>\n <DropDown.Trigger\n className=\"p-2\"\n identifier={panelIdentifier}\n aria-label=\"Theme selector\"\n >\n {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n {mode === Modes.light && <Sun data-mode=\"light\" />}\n {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n </DropDown.Trigger>\n\n <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n <ButtonItem\n Icon={CircleDashed}\n onClick={() => switchMode(Modes.system)}\n isActive={mode === Modes.system}\n label=\"Restore to system mode\"\n >\n System\n </ButtonItem>\n <ButtonItem\n Icon={Sun}\n onClick={() => switchMode(Modes.light)}\n isActive={mode === Modes.light}\n label=\"Switch to light mode\"\n >\n Light\n </ButtonItem>\n <ButtonItem\n Icon={Moon}\n onClick={() => switchMode(Modes.dark)}\n isActive={mode === Modes.dark}\n label=\"Switch to dark mode\"\n >\n Dark\n </ButtonItem>\n </Container>\n </DropDown.Panel>\n </DropDown>\n );\n};\n"],"names":["jsx","mode","jsxs"],"mappings":";;;;;;;;AASA,MAAM,aAA8B,CAAC,EAAE,MAAM,UAAU,GAAG,MAAA,MACxDA,kCAAA,IAAC,OAAI,EAAA,WAAU,yBACb,UAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV;AAAA,IACA,aAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACP,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,GACF;AASK,MAAM,uBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqB,MAAM,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAgB,WAAW;AAE7C,QAAA,aAAa,CAACC,UAAgB;AAC9BA,QAAAA,UAAS,MAAM,QAAQ;AAChB,eAAA,eAAe,MAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAASA,KAAI;AAAA,IAAA;AAEf,YAAQA,KAAI;AAAA,EACd;AAEA,QAAM,kBAAkB;AAGtB,SAAAC,kCAAA,KAAC,UAAS,EAAA,YAAY,iBACpB,UAAA;AAAA,IAAAA,kCAAA;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SAAS,MAAM,UAAWF,kCAAAA,IAAA,cAAA,EAAa,aAAU,UAAS;AAAA,UAC1D,SAAS,MAAM,SAAUA,kCAAAA,IAAA,KAAA,EAAI,aAAU,SAAQ;AAAA,UAC/C,SAAS,MAAM,QAASA,kCAAAA,IAAA,MAAA,EAAK,aAAU,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD;AAAA,IAECA,kCAAA,IAAA,SAAS,OAAT,EAAe,YAAY,iBAAiB,aAAW,MAAC,YAAU,MACjE,UAACE,kCAAAA,KAAA,WAAA,EAAU,WAAU,iCAAgC,WAAU,KAC7D,UAAA;AAAA,MAAAF,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,MAAM,MAAM;AAAA,UACtC,UAAU,SAAS,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,MAAM,KAAK;AAAA,UACrC,UAAU,SAAS,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MACAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,MAAM,IAAI;AAAA,UACpC,UAAU,SAAS,MAAM;AAAA,UACzB,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ThemeSwitcherDropDown/MobileThemeSwitcher.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileThemeSwitcher.cjs","sources":["../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"names":["cn","Modes","useState","jsxs","jsx","CircleDashed","Moon","Sun"],"mappings":";;;;;;;;AAcA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIEA,SAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEK,MAAM,sBAAoD,CAAC;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqBC,~~6CAAM~~,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAIC,~~oBAAgB~~,WAAW;AAE7C,QAAA;AAAA;AAAA;AAAA,IAGJ,SAASD,uCAAAA,MAAM,SACX,UAAUA,uCAAAA,MAAM,OACdA,uCAAA,MAAM,QACNA,uCAAAA,MAAM;AAAA;AAAA;AAAA,MAGR,qBACEA,uCAAM,MAAA;AAAA;AAAA;AAAA,QAGN,SAASA,~~uCAAA~~,MAAM,QACbA,~~uCAAA~~,MAAM,OACNA,~~uCAAM~~,~~MAAA~~;AAAA;AAAA;AAAA;AAEhB,QAAM,aAAa,MAAM;AACnB,QAAA,aAAaA,6CAAM,QAAQ;AACpB,eAAA,eAAeA,6CAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAAS,QAAQ;AAAA,~~IACnB~~;~~AACA~~,YAAQ,QAAQ;AAAA,~~EAAA~~;~~AAGlB~~,SACGE,2BAAAA,kBAAAA,KAAA,UAAA,EAAO,WAAU,0BAAyB,cAAW,kBACpD,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAa;AAAA,UACtB,eAAe,SAASJ,uCAAAA,MAAM;AAAA,UAC9B,YAAY,aAAaA,~~uCAAAA,MAAM~~;AAAA,QAAA,CAChC;AAAA,QACD,SAAS;AAAA,QACT,aAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEAG,2BAAA,kBAAA;AAAA,MAACE,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAa;AAAA,UACtB,eAAe,SAASL,uCAAAA,MAAM;AAAA,UAC9B,YAAY,aAAaA,~~uCAAAA,MAAM~~;AAAA,QAAA,CAChC;AAAA,QACD,SAAS;AAAA,QACT,aAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEAG,2BAAA,kBAAA;AAAA,MAACG,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAa;AAAA,UACtB,eAAe,SAASN,uCAAAA,MAAM;AAAA,UAC9B,YAAY,aAAaA,~~uCAAAA,MAAM~~;AAAA,QAAA,CAChC;AAAA,QACD,SAAS;AAAA,QACT,aAAU;AAAA,MAAA;AAAA,~~IACZ~~;AAAA,~~EACF~~,~~EAAA,CAAA~~;AAEJ;;"}
1	+ {"version":3,"file":"MobileThemeSwitcher.cjs","sources":["../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n'use client';\n\nimport { Moon, Sun, CircleDashed } from 'lucide-react';\nimport { useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"names":["cn","Modes","useState","jsxs","jsx","CircleDashed","Moon","Sun"],"mappings":";;;;;;;;AAcA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIEA,SAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEK,MAAM,sBAAoD,CAAC;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB,gBAAgB;AACrC,QAAA,cAAc,qBAAqBC,uCAAA,MAAM,SAAS;AAExD,QAAM,CAAC,MAAM,OAAO,IAAIC,WAAAA,SAAgB,WAAW;AAE7C,QAAA;AAAA;AAAA;AAAA,IAGJ,SAASD,uCAAAA,MAAM,SACX,UAAUA,uCAAAA,MAAM,OACdA,uCAAA,MAAM,QACNA,uCAAAA,MAAM;AAAA;AAAA;AAAA,MAGR,qBACEA,uCAAM,MAAA;AAAA;AAAA;AAAA,QAGN,SAASA,uCAAAA,MAAM,QACbA,uCAAAA,MAAM,OACNA,uCAAAA,MAAM;AAAA;AAAA;AAAA;AAEhB,QAAM,aAAa,MAAM;AACnB,QAAA,aAAaA,6CAAM,QAAQ;AACpB,eAAA,eAAeA,6CAAM,KAAK;AAAA,IAAA,OAC9B;AACL,eAAS,QAAQ;AAAA,IAAA;AAEnB,YAAQ,QAAQ;AAAA,EAClB;AAEA,SACGE,2BAAAA,kBAAAA,KAAA,UAAA,EAAO,WAAU,0BAAyB,cAAW,kBACpD,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAa;AAAA,UACtB,eAAe,SAASJ,uCAAAA,MAAM;AAAA,UAC9B,YAAY,aAAaA,6CAAM;AAAA,QAAA,CAChC;AAAA,QACD,SAAS;AAAA,QACT,aAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEAG,2BAAA,kBAAA;AAAA,MAACE,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAa;AAAA,UACtB,eAAe,SAASL,uCAAAA,MAAM;AAAA,UAC9B,YAAY,aAAaA,6CAAM;AAAA,QAAA,CAChC;AAAA,QACD,SAAS;AAAA,QACT,aAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAEAG,2BAAA,kBAAA;AAAA,MAACG,YAAA;AAAA,MAAA;AAAA,QACC,WAAW,aAAa;AAAA,UACtB,eAAe,SAASN,uCAAAA,MAAM;AAAA,UAC9B,YAAY,aAAaA,6CAAM;AAAA,QAAA,CAChC;AAAA,QACD,SAAS;AAAA,QACT,aAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;;"}