npm - @intlayer/design-system - Versions diffs - 6.1.5 → 6.1.6 - Mend

@intlayer/design-system 6.1.5 → 6.1.6

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

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 CheckIcon,\n ChevronDownIcon,\n ChevronsUpDown,\n ChevronUpIcon,\n} from 'lucide-react';\nimport { type ComponentProps, type FC } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum SelectContentPosition {\n POPPER = 'popper',\n ITEM_ALIGNED = 'item-aligned',\n}\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n <SelectPrimitive.Trigger\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background text-input-text 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 hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error',\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\nconst SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n);\n\nconst SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n);\n\nexport const SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n> = ({\n className,\n children,\n position = SelectContentPosition.POPPER,\n ...props\n}) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n 'bg-input-background text-input-text 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);\n\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n className,\n ...props\n}) => (\n <SelectPrimitive.Label\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n);\n\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n className,\n children,\n ...props\n}) => (\n <SelectPrimitive.Item\n className={cn(\n 'focus:bg-neutral/10 outline-hidden relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\nexport const SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n <SelectPrimitive.Separator\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n);\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":["SelectContentPosition"],"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 CheckIcon,\n ChevronDownIcon,\n ChevronsUpDown,\n ChevronUpIcon,\n} from 'lucide-react';\nimport { type ComponentProps, type FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Enum for Select content positioning strategies\n \n @enum SelectContentPosition\n /\nexport enum SelectContentPosition {\n /* Position relative to the trigger with automatic placement /\n POPPER = 'popper',\n /* Align content with the selected item /\n ITEM_ALIGNED = 'item-aligned',\n}\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\n/\n Select trigger button component that displays the current selection and opens the dropdown\n \n Features comprehensive styling with validation states, focus management, and accessibility support.\n * Uses design tokens for consistent theming across the application.\n \n @param validationStyleEnabled - Enables automatic success/error styling based on form validation state\n * @param className - Additional CSS classes for custom styling\n * @param children - Content to display inside the trigger (typically SelectValue)\n \n @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Choose option...\" />\n * </Select.Trigger>\n * ```\n /\nconst SelectTrigger: FC<\n ComponentProps<typeof SelectPrimitive.Trigger> & {\n /\n Enables success/error border styling based on HTML5 validation state\n * @default false\n * @example\n * ```tsx\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Required field\" />\n * </Select.Trigger>\n * ```\n /\n validationStyleEnabled?: boolean;\n }\n> = ({ validationStyleEnabled = false, className, children, ...props }) => (\n <SelectPrimitive.Trigger\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background text-input-text 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 hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error',\n validationStyleEnabled && 'valid:border-success invalid:border-error',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n);\n\n/\n Scroll up button for select content with long lists\n \n Automatically appears when content is scrollable upward, providing intuitive navigation\n * for users with large option lists.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollUpButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollUpButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n);\n\n/\n Scroll down button for select content with long lists\n \n Automatically appears when content is scrollable downward, providing clear visual\n * indication of additional options below the current view.\n \n @param className - Additional CSS classes for custom styling\n /\nconst SelectScrollDownButton: FC<\n ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n> = ({ className, ...props }) => (\n <SelectPrimitive.ScrollDownButton\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n);\n\n/\n Select dropdown content container with positioning and animation\n \n Provides the dropdown interface containing all selectable options. Features smooth\n * animations, flexible positioning strategies, and responsive design for optimal UX.\n \n @param position - Positioning strategy for the dropdown content\n * @param className - Additional CSS classes for custom styling\n * @param children - Select items, labels, and separators\n \n @example\n * ```tsx\n * <Select.Content position={SelectContentPosition.POPPER}>\n * <Select.Item value=\"option1\">Option 1</Select.Item>\n * <Select.Item value=\"option2\">Option 2</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectContent: FC<\n ComponentProps<typeof SelectPrimitive.Content>\n> = ({\n className,\n children,\n position = SelectContentPosition.POPPER,\n ...props\n}) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={cn(\n 'bg-input-background text-input-text 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);\n\n/\n Label component for grouping select options\n \n Provides semantic grouping and visual organization of related options within\n * the select dropdown. Enhances accessibility and user experience.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Label>Fruits</Select.Label>\n * <Select.Item value=\"apple\">Apple</Select.Item>\n * <Select.Item value=\"banana\">Banana</Select.Item>\n * <Select.Separator />\n * <Select.Label>Vegetables</Select.Label>\n * <Select.Item value=\"carrot\">Carrot</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>> = ({\n className,\n ...props\n}) => (\n <SelectPrimitive.Label\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n);\n\n/\n Individual selectable item within the dropdown\n \n Represents a single option that users can select. Features hover states,\n * selection indicators, and keyboard navigation support for accessible interaction.\n \n @param className - Additional CSS classes for custom styling\n * @param children - The display text/content for the option\n \n @example\n * ```tsx\n * <Select.Item value=\"dark-mode\">\n * 🌙 Dark Mode\n * </Select.Item>\n * ```\n /\nconst SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>> = ({\n className,\n children,\n ...props\n}) => (\n <SelectPrimitive.Item\n className={cn(\n 'focus:bg-neutral/10 outline-hidden relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n);\n\n/\n Visual separator for grouping options in the dropdown\n \n Creates clear visual division between groups of related options,\n * improving readability and organization in complex select menus.\n \n @param className - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * <Select.Content>\n * <Select.Item value=\"recent\">Recent Files</Select.Item>\n * <Select.Separator />\n * <Select.Item value=\"all\">All Files</Select.Item>\n * </Select.Content>\n * ```\n /\nexport const SelectSeparator: FC<\n ComponentProps<typeof SelectPrimitive.Separator>\n> = ({ className, ...props }) => (\n <SelectPrimitive.Separator\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n);\n\n/\n Type definition for the compound Select component with all subcomponents\n /\ntype SelectType = typeof SelectRoot & {\n /* Group container for organizing related options /\n Group: typeof SelectGroup;\n /* Value display component for the trigger /\n Value: typeof SelectValue;\n /* Trigger button that opens the dropdown /\n Trigger: typeof SelectTrigger;\n /* Scroll up button for long lists /\n ScrollUpButton: typeof SelectScrollUpButton;\n /* Scroll down button for long lists /\n ScrollDownButton: typeof SelectScrollDownButton;\n /* Dropdown content container /\n Content: typeof SelectContent;\n /* Label component for option groups /\n Label: typeof SelectLabel;\n /* Individual selectable item /\n Item: typeof SelectItem;\n /* Visual separator between option groups /\n Separator: typeof SelectSeparator;\n};\n\n/\n Select - A comprehensive dropdown selection component\n \n A fully-featured select component built on Radix UI primitives with extensive customization,\n * accessibility features, and design system integration. Supports single selection with\n * keyboard navigation, validation states, and flexible content positioning.\n \n ## Key Features\n * - Accessibility First: Full keyboard navigation, screen reader support, and ARIA attributes\n * - Flexible Positioning: Multiple positioning strategies for optimal dropdown placement\n * - Validation Integration: Built-in support for form validation with visual feedback\n * - Design System: Consistent theming with design tokens and style variants\n * - Responsive Design: Works seamlessly across desktop and mobile devices\n * - Rich Content: Support for icons, separators, labels, and complex option layouts\n \n ## Use Cases\n * - Form field selections (theme, language, category)\n * - Settings and configuration options\n * - Filter and sort controls\n * - User preference selections\n * - Any single-choice dropdown interface\n \n ## Accessibility\n * - Keyboard Navigation: Arrow keys, Enter, Escape, and Home/End support\n * - Screen Readers: Proper ARIA labels and state announcements\n * - Focus Management: Intuitive focus flow and visual indicators\n * - High Contrast: Supports system high contrast modes\n \n ## Architecture\n * The Select component follows a compound component pattern with the following structure:\n * - `Select` (root): Manages state and provides context\n * - `Select.Trigger`: Button that displays current value and opens dropdown\n * - `Select.Value`: Displays the selected value with placeholder support\n * - `Select.Content`: Container for the dropdown options\n * - `Select.Item`: Individual selectable options\n * - `Select.Label`: Group labels for organizing options\n * - `Select.Separator`: Visual dividers between option groups\n \n @example\n * Basic usage with simple options:\n * ```tsx\n * <Select defaultValue=\"system\">\n * <Select.Trigger>\n * <Select.Value placeholder=\"Choose theme...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">☀️ Light</Select.Item>\n * <Select.Item value=\"dark\">🌙 Dark</Select.Item>\n * <Select.Item value=\"system\">⚙️ System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Advanced usage with groups and labels:\n * ```tsx\n * <Select>\n * <Select.Trigger validationStyleEnabled>\n * <Select.Value placeholder=\"Select category...\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Label>Web Technologies</Select.Label>\n * <Select.Item value=\"react\">React</Select.Item>\n * <Select.Item value=\"vue\">Vue</Select.Item>\n * <Select.Separator />\n * <Select.Label>Mobile</Select.Label>\n * <Select.Item value=\"react-native\">React Native</Select.Item>\n * <Select.Item value=\"flutter\">Flutter</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n \n @example\n * Form integration with validation:\n * ```tsx\n * <form>\n * <Select required name=\"country\">\n * <Select.Trigger validationStyleEnabled aria-invalid={hasError}>\n * <Select.Value placeholder=\"Select country...\" />\n * </Select.Trigger>\n * <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>\n * <Select.Item value=\"us\">United States</Select.Item>\n * <Select.Item value=\"ca\">Canada</Select.Item>\n * <Select.Item value=\"uk\">United Kingdom</Select.Item>\n * </Select.Content>\n * </Select>\n * </form>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["SelectContentPosition"],"mappings":"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"}

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 {\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} 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\nexport type 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\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\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 [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'border-destructive bg-destructive text-destructive',\n [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral ',\n [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n [SwitchSelectorColor.TEXT]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: SwitchSelectorColor.PRIMARY,\n },\n }\n);\n\nexport enum SwitchSelectorSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'py-1 px-2 text-xs',\n [SwitchSelectorSize.MD]: 'p-2 text-sm',\n [SwitchSelectorSize.LG]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: SwitchSelectorSize.MD,\n },\n }\n);\n\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 [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'bg-destructive aria-selected:text-text',\n [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white ',\n [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\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 = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.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 useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\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":["SwitchSelectorColor","cva","SwitchSelectorSize","useState","useRef","useItemSelector","useEffect","jsx","jsxs","value","createElement","cn"],"mappings":"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"}
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 {\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\n/*\n Configuration for a single choice in the SwitchSelector\n \n @template T - The type of the choice value\n * @interface SwitchSelectorChoice\n /\nexport type SwitchSelectorChoice<T = boolean> = {\n /* The visual content displayed for this choice (text, icons, or React elements) /\n content: ReactNode;\n /* The value associated with this choice /\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\n\n/\n Array of choices for the SwitchSelector component\n \n @template T - The type of the choice values\n /\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\n/\n Props interface for the SwitchSelector component\n \n @template T - The type of the choice values\n * @interface SwitchSelectorProps\n /\nexport type SwitchSelectorProps<T = boolean> = {\n /\n Array of selectable choices\n * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]\n * @example\n * ```tsx\n * <SwitchSelector choices={[\n * { content: 'Draft', value: 'draft' },\n * { content: 'Published', value: 'published' },\n * { content: 'Archived', value: 'archived' }\n * ]} />\n * ```\n /\n choices?: SwitchSelectorChoices<T>;\n\n /\n Controlled value for the selected choice\n * @example\n * ```tsx\n * const [status, setStatus] = useState('draft');\n * <SwitchSelector value={status} onChange={setStatus} />\n * ```\n /\n value?: T;\n\n /\n Default selected value for uncontrolled mode\n * @example\n * ```tsx\n * <SwitchSelector defaultValue=\"published\" />\n * ```\n /\n defaultValue?: T;\n\n /\n Callback function triggered when selection changes\n * @param choice - The newly selected choice value\n * @example\n * ```tsx\n * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />\n * ```\n /\n onChange?: (choice: T) => void;\n\n /* Additional CSS classes for custom styling /\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\n/\n Color variants for the SwitchSelector component\n \n @enum SwitchSelectorColor\n /\nexport enum SwitchSelectorColor {\n /* Primary brand color theme /\n PRIMARY = 'primary',\n /* Secondary accent color theme /\n SECONDARY = 'secondary',\n /* Destructive/error color theme for dangerous actions /\n DESTRUCTIVE = 'destructive',\n /* Neutral gray color theme /\n NEUTRAL = 'neutral',\n /* Light color theme for dark backgrounds /\n LIGHT = 'light',\n /* Dark color theme for light backgrounds /\n DARK = 'dark',\n /* Text color theme that adapts to content /\n TEXT = 'text',\n}\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 [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'border-destructive bg-destructive text-destructive',\n [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral ',\n [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n [SwitchSelectorColor.TEXT]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: SwitchSelectorColor.PRIMARY,\n },\n }\n);\n\n/\n Size variants for the SwitchSelector component\n \n @enum SwitchSelectorSize\n /\nexport enum SwitchSelectorSize {\n /* Small size - compact for tight layouts /\n SM = 'sm',\n /* Medium size - standard for most use cases /\n MD = 'md',\n /* Large size - prominent for important selections /\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'py-1 px-2 text-xs',\n [SwitchSelectorSize.MD]: 'p-2 text-sm',\n [SwitchSelectorSize.LG]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: SwitchSelectorSize.MD,\n },\n }\n);\n\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 [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'bg-destructive aria-selected:text-text',\n [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white ',\n [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\n },\n },\n }\n);\n\n/\n SwitchSelector - A versatile toggle component for multi-option selection\n \n A sophisticated switch selector component that provides an elegant way to choose between\n * multiple options with smooth animations and visual feedback. Built with accessibility\n * in mind, it supports keyboard navigation and screen reader announcements.\n \n ## Key Features\n * - Smooth Animations: Fluid indicator transitions between options\n * - Accessible: Full keyboard navigation and ARIA support\n * - Flexible Styling: Multiple color themes and size variants\n * - Generic Types: Type-safe values with TypeScript generics\n * - Controlled/Uncontrolled: Supports both usage patterns\n * - Custom Content: Rich content support including icons and text\n \n ## Use Cases\n * - Settings toggles (On/Off, Light/Dark theme)\n * - Status selectors (Draft/Published/Archived)\n * - View mode switches (List/Grid/Card)\n * - Filter options (All/Active/Completed)\n * - Language or region selection\n * - Any multi-option toggle interface\n \n ## Accessibility\n * - Keyboard Navigation: Tab to focus, arrow keys to navigate options\n * - Screen Readers: Proper ARIA labels and role attributes\n * - Focus Management: Clear visual focus indicators\n * - State Announcements: Selection changes announced to assistive technology\n \n ## Visual Design\n * The component features a pill-shaped container with individual choice buttons.\n * A smooth-sliding background indicator highlights the active selection, creating\n * an intuitive and polished user experience.\n \n @template T - The type of values for the choices (string, number, boolean, etc.)\n \n @example\n * Basic boolean toggle:\n * ```tsx\n * <SwitchSelector\n * defaultValue={false}\n * onChange={(value) => setEnabled(value)}\n * />\n * ```\n \n @example\n * Multi-option selector with custom content:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: <>📝 Draft</>, value: 'draft' },\n * { content: <>✅ Published</>, value: 'published' },\n * { content: <>📦 Archived</>, value: 'archived' }\n * ]}\n * value={currentStatus}\n * onChange={setStatus}\n * color={SwitchSelectorColor.SECONDARY}\n * size={SwitchSelectorSize.LG}\n * />\n * ```\n \n @example\n * View mode switcher:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: 'List', value: 'list' },\n * { content: 'Grid', value: 'grid' },\n * { content: 'Card', value: 'card' }\n * ]}\n * defaultValue=\"grid\"\n * color={SwitchSelectorColor.NEUTRAL}\n * onChange={(view) => setViewMode(view)}\n * />\n * ```\n \n @example\n * Theme selector with icons:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: <>☀️ Light</>, value: 'light' },\n * { content: <>🌙 Dark</>, value: 'dark' },\n * { content: <>⚙️ System</>, value: 'system' }\n * ]}\n * value={theme}\n * onChange={setTheme}\n * size={SwitchSelectorSize.SM}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.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 useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\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":["SwitchSelectorColor","cva","SwitchSelectorSize","useState","useRef","useItemSelector","useEffect","jsx","jsxs","value","createElement","cn"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAA;AAAA,EACzB,EAAE,SAAS,MAAM,OAAO,KAAA;AAC1B;AA8DO,IAAK,wCAAAA,yBAAL;AAELA,uBAAA,SAAA,IAAU;AAEVA,uBAAA,WAAA,IAAY;AAEZA,uBAAA,aAAA,IAAc;AAEdA,uBAAA,SAAA,IAAU;AAEVA,uBAAA,OAAA,IAAQ;AAERA,uBAAA,MAAA,IAAO;AAEPA,uBAAA,MAAA,IAAO;AAdG,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAiBZ,MAAM,wBAAwBC,uBAAAA;AAAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,WAA8B;AAAA,QAC/B;AAAA,UAAC;AAAA;AAAA,WAAgC;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WAA8B;AAAA,QAC/B;AAAA,UAAC;AAAA;AAAA,WAA4B;AAAA,QAC7B;AAAA,UAAC;AAAA;AAAA,WAA2B;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,WAA2B;AAAA,MAAA;AAAA,IAC9B;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA;AAAA,IAAA;AAAA,EACT;AAEJ;AAOO,IAAK,uCAAAC,wBAAL;AAELA,sBAAA,IAAA,IAAK;AAELA,sBAAA,IAAA,IAAK;AAELA,sBAAA,IAAA,IAAK;AANK,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AASZ,MAAM,gBAAgBD,uBAAAA;AAAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,WAAwB;AAAA,QACzB;AAAA,UAAC;AAAA;AAAA,WAAwB;AAAA,QACzB;AAAA,UAAC;AAAA;AAAA,WAAwB;AAAA,MAAA;AAAA,IAC3B;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,mBAAmBA,uBAAAA;AAAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,WAA8B;AAAA,QAC/B;AAAA,UAAC;AAAA;AAAA,WAAgC;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WAA8B;AAAA,QAC/B;AAAA,UAAC;AAAA;AAAA,WAA4B;AAAA,QAC7B;AAAA,UAAC;AAAA;AAAA,WAA2B;AAAA,QAC5B;AAAA,UAAC;AAAA;AAAA,WAA2B;AAAA,MAAA;AAAA,IAC9B;AAAA,EACF;AAEJ;AA6FO,MAAM,iBAAiB,CAAK;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AACF,MAA8B;AAC5B,QAAM,CAAC,YAAY,QAAQ,IAAIE,aAAAA;AAAAA,IAC7B,SAAS,gBAAgB,QAAQ,CAAC,EAAE;AAAA,EAAA;AAEtC,QAAM,cAAcC,aAAAA,OAA4B,EAAE;AAClD,QAAM,eAAeA,aAAAA,OAA8B,IAAI;AACvD,QAAM,EAAE,wBAAA,IAA4BC,sBAAAA,gBAAgB,WAAW;AAE/D,QAAM,eAAe,CAAC,aAAgB;AACpC,aAAS,QAAQ;AACjB,eAAW,QAAQ;AAAA,EACrB;AAEAC,eAAAA,UAAU,MAAM;AACd,QAAI,UAAU,OAAW;AACzB,aAAS,KAAK;AAAA,EAChB,GAAG,CAAC,KAAK,CAAC;AAEV,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,sBAAsB;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACD,MAAK;AAAA,MAEL,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,gEACZ,UAAA;AAAA,QAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,EAAE,SAAS,OAAAC,QAAO,GAAG,gBAAgB;AAE3C,gBAAM,aACJ,OAAOA,WAAU,YAAY,OAAOA,WAAU;AAEhD,gBAAM,aAAaA,WAAU;AAE7B,iBACEC,6BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAWC,SAAAA;AAAAA,gBACT,cAAc;AAAA,kBACZ;AAAA,gBAAA,CACD;AAAA,cAAA;AAAA,cAEH,KAAK,aAAaF,SAAQ;AAAA,cAC1B,MAAK;AAAA,cACL,SAAS,MAAM,aAAaA,MAAK;AAAA,cACjC,iBAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK,CAAC,OAAO;AACX,4BAAY,QAAQ,KAAK,IAAI;AAAA,cAC/B;AAAA,YAAA;AAAA,YAEC;AAAA,UAAA;AAAA,QAGP,CAAC;AAAA,QACA,2BACCF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT,iBAAiB;AAAA,gBACf;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,YAEH,OAAO;AAAA,YACP,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACP,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;;;;"}

package/dist/components/SwitchSelector/index.d.ts CHANGED Viewed

@@ -1,51 +1,200 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Configuration for a single choice in the SwitchSelector
+ *
+ * @template T - The type of the choice value
+ * @interface SwitchSelectorChoice
+ */
 export type SwitchSelectorChoice<T = boolean> = {
+    /** The visual content displayed for this choice (text, icons, or React elements) */
     content: ReactNode;
+    /** The value associated with this choice */
     value: T;
 } & HTMLAttributes<HTMLButtonElement>;
+/**
+ * Array of choices for the SwitchSelector component
+ *
+ * @template T - The type of the choice values
+ */
 export type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];
+/**
+ * Props interface for the SwitchSelector component
+ *
+ * @template T - The type of the choice values
+ * @interface SwitchSelectorProps
+ */
 export type SwitchSelectorProps<T = boolean> = {
+    /**
+     * Array of selectable choices
+     * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]
+     * @example
+     * ```tsx
+     * <SwitchSelector choices={[
+     *   { content: 'Draft', value: 'draft' },
+     *   { content: 'Published', value: 'published' },
+     *   { content: 'Archived', value: 'archived' }
+     * ]} />
+     * ```
+     */
     choices?: SwitchSelectorChoices<T>;
+    /**
+     * Controlled value for the selected choice
+     * @example
+     * ```tsx
+     * const [status, setStatus] = useState('draft');
+     * <SwitchSelector value={status} onChange={setStatus} />
+     * ```
+     */
     value?: T;
+    /**
+     * Default selected value for uncontrolled mode
+     * @example
+     * ```tsx
+     * <SwitchSelector defaultValue="published" />
+     * ```
+     */
     defaultValue?: T;
+    /**
+     * Callback function triggered when selection changes
+     * @param choice - The newly selected choice value
+     * @example
+     * ```tsx
+     * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />
+     * ```
+     */
     onChange?: (choice: T) => void;
+    /** Additional CSS classes for custom styling */
     className?: string;
 } & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
+/**
+ * Color variants for the SwitchSelector component
+ *
+ * @enum SwitchSelectorColor
+ */
 export declare enum SwitchSelectorColor {
+    /** Primary brand color theme */
     PRIMARY = "primary",
+    /** Secondary accent color theme */
     SECONDARY = "secondary",
+    /** Destructive/error color theme for dangerous actions */
     DESTRUCTIVE = "destructive",
+    /** Neutral gray color theme */
     NEUTRAL = "neutral",
+    /** Light color theme for dark backgrounds */
     LIGHT = "light",
+    /** Dark color theme for light backgrounds */
     DARK = "dark",
+    /** Text color theme that adapts to content */
     TEXT = "text"
 }
 declare const switchSelectorVariant: (props?: ({
     color?: SwitchSelectorColor | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Size variants for the SwitchSelector component
+ *
+ * @enum SwitchSelectorSize
+ */
 export declare enum SwitchSelectorSize {
+    /** Small size - compact for tight layouts */
     SM = "sm",
+    /** Medium size - standard for most use cases */
     MD = "md",
+    /** Large size - prominent for important selections */
     LG = "lg"
 }
 declare const choiceVariant: (props?: ({
     size?: SwitchSelectorSize | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
+ * SwitchSelector - A versatile toggle component for multi-option selection
+ *
+ * A sophisticated switch selector component that provides an elegant way to choose between
+ * multiple options with smooth animations and visual feedback. Built with accessibility
+ * in mind, it supports keyboard navigation and screen reader announcements.
+ *
+ * ## Key Features
+ * - **Smooth Animations**: Fluid indicator transitions between options
+ * - **Accessible**: Full keyboard navigation and ARIA support
+ * - **Flexible Styling**: Multiple color themes and size variants
+ * - **Generic Types**: Type-safe values with TypeScript generics
+ * - **Controlled/Uncontrolled**: Supports both usage patterns
+ * - **Custom Content**: Rich content support including icons and text
+ *
+ * ## Use Cases
+ * - Settings toggles (On/Off, Light/Dark theme)
+ * - Status selectors (Draft/Published/Archived)
+ * - View mode switches (List/Grid/Card)
+ * - Filter options (All/Active/Completed)
+ * - Language or region selection
+ * - Any multi-option toggle interface
  *
- * Component that allows the user to select one of the provided choices.
+ * ## Accessibility
+ * - **Keyboard Navigation**: Tab to focus, arrow keys to navigate options
+ * - **Screen Readers**: Proper ARIA labels and role attributes
+ * - **Focus Management**: Clear visual focus indicators
+ * - **State Announcements**: Selection changes announced to assistive technology
+ *
+ * ## Visual Design
+ * The component features a pill-shaped container with individual choice buttons.
+ * A smooth-sliding background indicator highlights the active selection, creating
+ * an intuitive and polished user experience.
+ *
+ * @template T - The type of values for the choices (string, number, boolean, etc.)
+ *
+ * @example
+ * Basic boolean toggle:
+ * ```tsx
+ * <SwitchSelector
+ *   defaultValue={false}
+ *   onChange={(value) => setEnabled(value)}
+ * />
+ * ```
+ *
+ * @example
+ * Multi-option selector with custom content:
+ * ```tsx
+ * <SwitchSelector
+ *   choices={[
+ *     { content: <>📝 Draft</>, value: 'draft' },
+ *     { content: <>✅ Published</>, value: 'published' },
+ *     { content: <>📦 Archived</>, value: 'archived' }
+ *   ]}
+ *   value={currentStatus}
+ *   onChange={setStatus}
+ *   color={SwitchSelectorColor.SECONDARY}
+ *   size={SwitchSelectorSize.LG}
+ * />
+ * ```
+ *
+ * @example
+ * View mode switcher:
+ * ```tsx
+ * <SwitchSelector
+ *   choices={[
+ *     { content: 'List', value: 'list' },
+ *     { content: 'Grid', value: 'grid' },
+ *     { content: 'Card', value: 'card' }
+ *   ]}
+ *   defaultValue="grid"
+ *   color={SwitchSelectorColor.NEUTRAL}
+ *   onChange={(view) => setViewMode(view)}
+ * />
+ * ```
  *
- * Example:
- * ```jsx
+ * @example
+ * Theme selector with icons:
+ * ```tsx
  * <SwitchSelector
  *   choices={[
- *     { content: 'Option 1', value: 'option1' },
- *     { content: 'Option 2', value: 'option2' },
- *     { content: 'Option 3', value: 'option3' },
+ *     { content: <>☀️ Light</>, value: 'light' },
+ *     { content: <>🌙 Dark</>, value: 'dark' },
+ *     { content: <>⚙️ System</>, value: 'system' }
  *   ]}
- *   value="option1"
- *   onChange={(choice) => console.log(choice)}
+ *   value={theme}
+ *   onChange={setTheme}
+ *   size={SwitchSelectorSize.SM}
  * />
  * ```
  */

package/dist/components/SwitchSelector/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;~~AACtC~~,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC7C,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;~~IACnC~~,KAAK,CAAC,EAAE,CAAC,CAAC;~~IACV~~,YAAY,CAAC,EAAE,CAAC,CAAC;~~IACjB~~,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;~~IAC~~/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,oBAAY,mBAAmB;IAC7B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,qBAAqB;;8EAmB1B,CAAC;AAEF,oBAAY,kBAAkB;IAC5B,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAoBF~~;;;;;;;;;;;;;;;;GAgBG~~;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,qEAQhC,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,oFAAoF;IACpF,OAAO,EAAE,SAAS,CAAC;IACnB,4CAA4C;IAC5C,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEtC;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC7C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAEnC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IAEjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAE/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,gCAAgC;IAChC,OAAO,YAAY;IACnB,mCAAmC;IACnC,SAAS,cAAc;IACvB,0DAA0D;IAC1D,WAAW,gBAAgB;IAC3B,+BAA+B;IAC/B,OAAO,YAAY;IACnB,6CAA6C;IAC7C,KAAK,UAAU;IACf,6CAA6C;IAC7C,IAAI,SAAS;IACb,8CAA8C;IAC9C,IAAI,SAAS;CACd;AAED,QAAA,MAAM,qBAAqB;;8EAmB1B,CAAC;AAEF;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,6CAA6C;IAC7C,EAAE,OAAO;IACT,gDAAgD;IAChD,EAAE,OAAO;IACT,sDAAsD;IACtD,EAAE,OAAO;CACV;AAED,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,qEAQhC,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}

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 {\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} 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\nexport type 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\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\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 [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'border-destructive bg-destructive text-destructive',\n [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral ',\n [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n [SwitchSelectorColor.TEXT]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: SwitchSelectorColor.PRIMARY,\n },\n }\n);\n\nexport enum SwitchSelectorSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'py-1 px-2 text-xs',\n [SwitchSelectorSize.MD]: 'p-2 text-sm',\n [SwitchSelectorSize.LG]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: SwitchSelectorSize.MD,\n },\n }\n);\n\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 [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'bg-destructive aria-selected:text-text',\n [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white ',\n [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\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 = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.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 useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\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":["SwitchSelectorColor","SwitchSelectorSize","value"],"mappings":"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"}
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 {\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\n/*\n Configuration for a single choice in the SwitchSelector\n \n @template T - The type of the choice value\n * @interface SwitchSelectorChoice\n /\nexport type SwitchSelectorChoice<T = boolean> = {\n /* The visual content displayed for this choice (text, icons, or React elements) /\n content: ReactNode;\n /* The value associated with this choice /\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\n\n/\n Array of choices for the SwitchSelector component\n \n @template T - The type of the choice values\n /\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\n/\n Props interface for the SwitchSelector component\n \n @template T - The type of the choice values\n * @interface SwitchSelectorProps\n /\nexport type SwitchSelectorProps<T = boolean> = {\n /\n Array of selectable choices\n * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]\n * @example\n * ```tsx\n * <SwitchSelector choices={[\n * { content: 'Draft', value: 'draft' },\n * { content: 'Published', value: 'published' },\n * { content: 'Archived', value: 'archived' }\n * ]} />\n * ```\n /\n choices?: SwitchSelectorChoices<T>;\n\n /\n Controlled value for the selected choice\n * @example\n * ```tsx\n * const [status, setStatus] = useState('draft');\n * <SwitchSelector value={status} onChange={setStatus} />\n * ```\n /\n value?: T;\n\n /\n Default selected value for uncontrolled mode\n * @example\n * ```tsx\n * <SwitchSelector defaultValue=\"published\" />\n * ```\n /\n defaultValue?: T;\n\n /\n Callback function triggered when selection changes\n * @param choice - The newly selected choice value\n * @example\n * ```tsx\n * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />\n * ```\n /\n onChange?: (choice: T) => void;\n\n /* Additional CSS classes for custom styling /\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\n/\n Color variants for the SwitchSelector component\n \n @enum SwitchSelectorColor\n /\nexport enum SwitchSelectorColor {\n /* Primary brand color theme /\n PRIMARY = 'primary',\n /* Secondary accent color theme /\n SECONDARY = 'secondary',\n /* Destructive/error color theme for dangerous actions /\n DESTRUCTIVE = 'destructive',\n /* Neutral gray color theme /\n NEUTRAL = 'neutral',\n /* Light color theme for dark backgrounds /\n LIGHT = 'light',\n /* Dark color theme for light backgrounds /\n DARK = 'dark',\n /* Text color theme that adapts to content /\n TEXT = 'text',\n}\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 [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'border-destructive bg-destructive text-destructive',\n [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral ',\n [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n [SwitchSelectorColor.TEXT]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: SwitchSelectorColor.PRIMARY,\n },\n }\n);\n\n/\n Size variants for the SwitchSelector component\n \n @enum SwitchSelectorSize\n /\nexport enum SwitchSelectorSize {\n /* Small size - compact for tight layouts /\n SM = 'sm',\n /* Medium size - standard for most use cases /\n MD = 'md',\n /* Large size - prominent for important selections /\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'py-1 px-2 text-xs',\n [SwitchSelectorSize.MD]: 'p-2 text-sm',\n [SwitchSelectorSize.LG]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: SwitchSelectorSize.MD,\n },\n }\n);\n\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 [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'bg-destructive aria-selected:text-text',\n [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white ',\n [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\n },\n },\n }\n);\n\n/\n SwitchSelector - A versatile toggle component for multi-option selection\n \n A sophisticated switch selector component that provides an elegant way to choose between\n * multiple options with smooth animations and visual feedback. Built with accessibility\n * in mind, it supports keyboard navigation and screen reader announcements.\n \n ## Key Features\n * - Smooth Animations: Fluid indicator transitions between options\n * - Accessible: Full keyboard navigation and ARIA support\n * - Flexible Styling: Multiple color themes and size variants\n * - Generic Types: Type-safe values with TypeScript generics\n * - Controlled/Uncontrolled: Supports both usage patterns\n * - Custom Content: Rich content support including icons and text\n \n ## Use Cases\n * - Settings toggles (On/Off, Light/Dark theme)\n * - Status selectors (Draft/Published/Archived)\n * - View mode switches (List/Grid/Card)\n * - Filter options (All/Active/Completed)\n * - Language or region selection\n * - Any multi-option toggle interface\n \n ## Accessibility\n * - Keyboard Navigation: Tab to focus, arrow keys to navigate options\n * - Screen Readers: Proper ARIA labels and role attributes\n * - Focus Management: Clear visual focus indicators\n * - State Announcements: Selection changes announced to assistive technology\n \n ## Visual Design\n * The component features a pill-shaped container with individual choice buttons.\n * A smooth-sliding background indicator highlights the active selection, creating\n * an intuitive and polished user experience.\n \n @template T - The type of values for the choices (string, number, boolean, etc.)\n \n @example\n * Basic boolean toggle:\n * ```tsx\n * <SwitchSelector\n * defaultValue={false}\n * onChange={(value) => setEnabled(value)}\n * />\n * ```\n \n @example\n * Multi-option selector with custom content:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: <>📝 Draft</>, value: 'draft' },\n * { content: <>✅ Published</>, value: 'published' },\n * { content: <>📦 Archived</>, value: 'archived' }\n * ]}\n * value={currentStatus}\n * onChange={setStatus}\n * color={SwitchSelectorColor.SECONDARY}\n * size={SwitchSelectorSize.LG}\n * />\n * ```\n \n @example\n * View mode switcher:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: 'List', value: 'list' },\n * { content: 'Grid', value: 'grid' },\n * { content: 'Card', value: 'card' }\n * ]}\n * defaultValue=\"grid\"\n * color={SwitchSelectorColor.NEUTRAL}\n * onChange={(view) => setViewMode(view)}\n * />\n * ```\n \n @example\n * Theme selector with icons:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: <>☀️ Light</>, value: 'light' },\n * { content: <>🌙 Dark</>, value: 'dark' },\n * { content: <>⚙️ System</>, value: 'system' }\n * ]}\n * value={theme}\n * onChange={setTheme}\n * size={SwitchSelectorSize.SM}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.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 useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\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":["SwitchSelectorColor","SwitchSelectorSize","value"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;~~AAaO~~,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA;AAAAA,MAACG,yCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGFJ,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}
1	+ {"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;AAqMO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA;AAAAA,MAACG,yCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGFJ,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}

package/dist/components/Table/Table.d.ts CHANGED Viewed

@@ -1,7 +1,191 @@
 import { HTMLAttributes, FC } from 'react';
+/**
+ * Properties for the Table component that extends standard HTML table attributes
+ *
+ * @interface TableProps
+ * @extends {HTMLAttributes<HTMLTableElement>}
+ *
+ * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper
+ * @property {string} [className] - Additional CSS classes for custom styling
+ * @property {ReactNode} children - The table content including thead, tbody, tfoot elements
+ *
+ * @example
+ * ```tsx
+ * // Basic table usage
+ * <Table>
+ *   <thead>
+ *     <tr>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ *
+ * // Collapsible table with custom styling
+ * <Table isRollable className="border border-gray-300 rounded-lg">
+ *   <thead>
+ *     <tr>
+ *       <th>Product</th>
+ *       <th>Price</th>
+ *       <th>Stock</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>Laptop</td>
+ *       <td>$999</td>
+ *       <td>15</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ * ```
+ */
 type TableProps = HTMLAttributes<HTMLTableElement> & {
     isRollable?: boolean;
 };
+/**
+ * Table component that provides an enhanced table experience with modal expansion and collapsible content
+ *
+ * The Table component wraps a standard HTML table element with additional functionality:
+ * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
+ * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
+ * - **Responsive Design**: Handles large tables gracefully with modal overflow
+ * - **Sticky Controls**: Table controls remain accessible even when scrolling
+ *
+ * ## Features
+ * - **Modal View**: Full-screen modal for better viewing of large tables
+ * - **Expand/Collapse**: Optional collapsible wrapper to save space
+ * - **Responsive**: Handles overflow and responsive behavior automatically
+ * - **Accessibility**: Maintains proper table semantics and keyboard navigation
+ * - **Customizable**: Supports all standard HTML table attributes and styling
+ *
+ * ## Best Practices
+ * - Use semantic HTML table structure (thead, tbody, tfoot)
+ * - Provide proper column headers with scope attributes
+ * - Use the isRollable prop for large tables that might need space management
+ * - Apply consistent styling through the className prop
+ * - Consider pagination for very large datasets
+ *
+ * @param {TableProps} props - The properties for the Table component
+ * @returns {JSX.Element} The rendered table with enhanced functionality
+ *
+ * @example
+ * ```tsx
+ * // Simple data table
+ * <Table>
+ *   <thead>
+ *     <tr>
+ *       <th scope="col">Name</th>
+ *       <th scope="col">Email</th>
+ *       <th scope="col">Status</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *       <td>
+ *         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
+ *           Active
+ *         </span>
+ *       </td>
+ *     </tr>
+ *     <tr>
+ *       <td>Jane Smith</td>
+ *       <td>jane@example.com</td>
+ *       <td>
+ *         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
+ *           Pending
+ *         </span>
+ *       </td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ *
+ * // Large collapsible table with custom styling
+ * <Table
+ *   isRollable
+ *   className="border border-gray-200 rounded-lg overflow-hidden"
+ * >
+ *   <thead className="bg-gray-50">
+ *     <tr>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Product ID
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Name
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Category
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Price
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Stock
+ *       </th>
+ *     </tr>
+ *   </thead>
+ *   <tbody className="bg-white divide-y divide-gray-200">
+ *     {products.map((product) => (
+ *       <tr key={product.id} className="hover:bg-gray-50">
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+ *           #{product.id}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+ *           {product.name}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+ *           {product.category}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+ *           ${product.price.toFixed(2)}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+ *           {product.stock} units
+ *         </td>
+ *       </tr>
+ *     ))}
+ *   </tbody>
+ * </Table>
+ *
+ * // Financial data table with formatted numbers
+ * <Table className="w-full border-collapse">
+ *   <thead>
+ *     <tr className="border-b-2 border-gray-300">
+ *       <th scope="col" className="text-left py-3 px-4">Quarter</th>
+ *       <th scope="col" className="text-right py-3 px-4">Revenue</th>
+ *       <th scope="col" className="text-right py-3 px-4">Profit</th>
+ *       <th scope="col" className="text-right py-3 px-4">Growth</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr className="border-b border-gray-200">
+ *       <td className="py-3 px-4 font-medium">Q1 2024</td>
+ *       <td className="py-3 px-4 text-right">$2,450,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
+ *     </tr>
+ *     <tr className="border-b border-gray-200">
+ *       <td className="py-3 px-4 font-medium">Q2 2024</td>
+ *       <td className="py-3 px-4 text-right">$2,780,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ * ```
+ *
+ * @see {@link ExpandCollapse} - Component used for collapsible table content
+ * @see {@link Modal} - Component used for full-screen table view
+ * @see {@link Button} - Component used for the modal trigger button
+ */
 export declare const Table: FC<TableProps>;
 export {};
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/Table/Table.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwIG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}