@intlayer/design-system 6.1.5 → 6.1.6-canary.0

package/dist/components/Select/Select.d.ts

@@ -1,46 +1,253 @@
 import { ComponentProps, FC } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+/**
+ * Enum for Select content positioning strategies
+ *
+ * @enum SelectContentPosition
+ */
 export declare enum SelectContentPosition {
+    /** Position relative to the trigger with automatic placement */
     POPPER = "popper",
+    /** Align content with the selected item */
     ITEM_ALIGNED = "item-aligned"
 }
 declare const SelectRoot: FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
 declare const SelectValue: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import('react').RefAttributes<HTMLSpanElement>>;
+/**
+ * Select trigger button component that displays the current selection and opens the dropdown
+ *
+ * Features comprehensive styling with validation states, focus management, and accessibility support.
+ * Uses design tokens for consistent theming across the application.
+ *
+ * @param validationStyleEnabled - Enables automatic success/error styling based on form validation state
+ * @param className - Additional CSS classes for custom styling
+ * @param children - Content to display inside the trigger (typically SelectValue)
+ *
+ * @example
+ * ```tsx
+ * <Select.Trigger validationStyleEnabled>
+ *   <Select.Value placeholder="Choose option..." />
+ * </Select.Trigger>
+ * ```
+ */
 declare const SelectTrigger: FC<ComponentProps<typeof SelectPrimitive.Trigger> & {
+    /**
+     * Enables success/error border styling based on HTML5 validation state
+     * @default false
+     * @example
+     * ```tsx
+     * <Select.Trigger validationStyleEnabled>
+     *   <Select.Value placeholder="Required field" />
+     * </Select.Trigger>
+     * ```
+     */
     validationStyleEnabled?: boolean;
 }>;
+/**
+ * Scroll up button for select content with long lists
+ *
+ * Automatically appears when content is scrollable upward, providing intuitive navigation
+ * for users with large option lists.
+ *
+ * @param className - Additional CSS classes for custom styling
+ */
 declare const SelectScrollUpButton: FC<ComponentProps<typeof SelectPrimitive.ScrollUpButton>>;
+/**
+ * Scroll down button for select content with long lists
+ *
+ * Automatically appears when content is scrollable downward, providing clear visual
+ * indication of additional options below the current view.
+ *
+ * @param className - Additional CSS classes for custom styling
+ */
 declare const SelectScrollDownButton: FC<ComponentProps<typeof SelectPrimitive.ScrollDownButton>>;
+/**
+ * Select dropdown content container with positioning and animation
+ *
+ * Provides the dropdown interface containing all selectable options. Features smooth
+ * animations, flexible positioning strategies, and responsive design for optimal UX.
+ *
+ * @param position - Positioning strategy for the dropdown content
+ * @param className - Additional CSS classes for custom styling
+ * @param children - Select items, labels, and separators
+ *
+ * @example
+ * ```tsx
+ * <Select.Content position={SelectContentPosition.POPPER}>
+ *   <Select.Item value="option1">Option 1</Select.Item>
+ *   <Select.Item value="option2">Option 2</Select.Item>
+ * </Select.Content>
+ * ```
+ */
 export declare const SelectContent: FC<ComponentProps<typeof SelectPrimitive.Content>>;
+/**
+ * Label component for grouping select options
+ *
+ * Provides semantic grouping and visual organization of related options within
+ * the select dropdown. Enhances accessibility and user experience.
+ *
+ * @param className - Additional CSS classes for custom styling
+ *
+ * @example
+ * ```tsx
+ * <Select.Content>
+ *   <Select.Label>Fruits</Select.Label>
+ *   <Select.Item value="apple">Apple</Select.Item>
+ *   <Select.Item value="banana">Banana</Select.Item>
+ *   <Select.Separator />
+ *   <Select.Label>Vegetables</Select.Label>
+ *   <Select.Item value="carrot">Carrot</Select.Item>
+ * </Select.Content>
+ * ```
+ */
 export declare const SelectLabel: FC<ComponentProps<typeof SelectPrimitive.Label>>;
+/**
+ * Individual selectable item within the dropdown
+ *
+ * Represents a single option that users can select. Features hover states,
+ * selection indicators, and keyboard navigation support for accessible interaction.
+ *
+ * @param className - Additional CSS classes for custom styling
+ * @param children - The display text/content for the option
+ *
+ * @example
+ * ```tsx
+ * <Select.Item value="dark-mode">
+ *   🌙 Dark Mode
+ * </Select.Item>
+ * ```
+ */
 declare const SelectItem: FC<ComponentProps<typeof SelectPrimitive.Item>>;
+/**
+ * Visual separator for grouping options in the dropdown
+ *
+ * Creates clear visual division between groups of related options,
+ * improving readability and organization in complex select menus.
+ *
+ * @param className - Additional CSS classes for custom styling
+ *
+ * @example
+ * ```tsx
+ * <Select.Content>
+ *   <Select.Item value="recent">Recent Files</Select.Item>
+ *   <Select.Separator />
+ *   <Select.Item value="all">All Files</Select.Item>
+ * </Select.Content>
+ * ```
+ */
 export declare const SelectSeparator: FC<ComponentProps<typeof SelectPrimitive.Separator>>;
+/**
+ * Type definition for the compound Select component with all subcomponents
+ */
 type SelectType = typeof SelectRoot & {
+    /** Group container for organizing related options */
     Group: typeof SelectGroup;
+    /** Value display component for the trigger */
     Value: typeof SelectValue;
+    /** Trigger button that opens the dropdown */
     Trigger: typeof SelectTrigger;
+    /** Scroll up button for long lists */
     ScrollUpButton: typeof SelectScrollUpButton;
+    /** Scroll down button for long lists */
     ScrollDownButton: typeof SelectScrollDownButton;
+    /** Dropdown content container */
     Content: typeof SelectContent;
+    /** Label component for option groups */
     Label: typeof SelectLabel;
+    /** Individual selectable item */
     Item: typeof SelectItem;
+    /** Visual separator between option groups */
     Separator: typeof SelectSeparator;
 };
 /**
- * Usage example:
- * ```jsx
- * <Select>
+ * Select - A comprehensive dropdown selection component
+ *
+ * A fully-featured select component built on Radix UI primitives with extensive customization,
+ * accessibility features, and design system integration. Supports single selection with
+ * keyboard navigation, validation states, and flexible content positioning.
+ *
+ * ## Key Features
+ * - **Accessibility First**: Full keyboard navigation, screen reader support, and ARIA attributes
+ * - **Flexible Positioning**: Multiple positioning strategies for optimal dropdown placement
+ * - **Validation Integration**: Built-in support for form validation with visual feedback
+ * - **Design System**: Consistent theming with design tokens and style variants
+ * - **Responsive Design**: Works seamlessly across desktop and mobile devices
+ * - **Rich Content**: Support for icons, separators, labels, and complex option layouts
+ *
+ * ## Use Cases
+ * - Form field selections (theme, language, category)
+ * - Settings and configuration options
+ * - Filter and sort controls
+ * - User preference selections
+ * - Any single-choice dropdown interface
+ *
+ * ## Accessibility
+ * - **Keyboard Navigation**: Arrow keys, Enter, Escape, and Home/End support
+ * - **Screen Readers**: Proper ARIA labels and state announcements
+ * - **Focus Management**: Intuitive focus flow and visual indicators
+ * - **High Contrast**: Supports system high contrast modes
+ *
+ * ## Architecture
+ * The Select component follows a compound component pattern with the following structure:
+ * - `Select` (root): Manages state and provides context
+ * - `Select.Trigger`: Button that displays current value and opens dropdown
+ * - `Select.Value`: Displays the selected value with placeholder support
+ * - `Select.Content`: Container for the dropdown options
+ * - `Select.Item`: Individual selectable options
+ * - `Select.Label`: Group labels for organizing options
+ * - `Select.Separator`: Visual dividers between option groups
+ *
+ * @example
+ * Basic usage with simple options:
+ * ```tsx
+ * <Select defaultValue="system">
  *   <Select.Trigger>
- *     <Select.Value placeholder="Theme" />
+ *     <Select.Value placeholder="Choose theme..." />
  *   </Select.Trigger>
  *   <Select.Content>
- *     <Select.Item value="light">Light</Select.Item>
- *     <Select.Item value="dark">Dark</Select.Item>
- *     <Select.Item value="system">System</Select.Item>
+ *     <Select.Item value="light">☀️ Light</Select.Item>
+ *     <Select.Item value="dark">🌙 Dark</Select.Item>
+ *     <Select.Item value="system">⚙️ System</Select.Item>
  *   </Select.Content>
  * </Select>
  * ```
+ *
+ * @example
+ * Advanced usage with groups and labels:
+ * ```tsx
+ * <Select>
+ *   <Select.Trigger validationStyleEnabled>
+ *     <Select.Value placeholder="Select category..." />
+ *   </Select.Trigger>
+ *   <Select.Content>
+ *     <Select.Label>Web Technologies</Select.Label>
+ *     <Select.Item value="react">React</Select.Item>
+ *     <Select.Item value="vue">Vue</Select.Item>
+ *     <Select.Separator />
+ *     <Select.Label>Mobile</Select.Label>
+ *     <Select.Item value="react-native">React Native</Select.Item>
+ *     <Select.Item value="flutter">Flutter</Select.Item>
+ *   </Select.Content>
+ * </Select>
+ * ```
+ *
+ * @example
+ * Form integration with validation:
+ * ```tsx
+ * <form>
+ *   <Select required name="country">
+ *     <Select.Trigger validationStyleEnabled aria-invalid={hasError}>
+ *       <Select.Value placeholder="Select country..." />
+ *     </Select.Trigger>
+ *     <Select.Content position={SelectContentPosition.ITEM_ALIGNED}>
+ *       <Select.Item value="us">United States</Select.Item>
+ *       <Select.Item value="ca">Canada</Select.Item>
+ *       <Select.Item value="uk">United Kingdom</Select.Item>
+ *     </Select.Content>
+ *   </Select>
+ * </form>
+ * ```
  */
 export declare const Select: SelectType;
 export {};

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAO1D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGrD,oBAAY,qBAAqB;IAC/B,MAAM,WAAW;IACjB,YAAY,iBAAiB;CAC9B;AAED,QAAA,MAAM,UAAU,iCAAuB,CAAC;AACxC,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAC1C,QAAA,MAAM,WAAW,8HAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,EAAE,EAAE,CACrB,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAC/C,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAkBF,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAC5B,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,CAWtD,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAC9B,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,CAWxD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAC5B,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAgC/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAQxE,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAmB/D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAC9B,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,CAMjD,CAAC;AAEF,KAAK,UAAU,GAAG,OAAO,UAAU,GAAG;IACpC,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,cAAc,EAAE,OAAO,oBAAoB,CAAC;IAC5C,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;IAChD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,EAAiB,UAAU,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAO1D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGrD;;;;GAIG;AACH,oBAAY,qBAAqB;IAC/B,gEAAgE;IAChE,MAAM,WAAW;IACjB,2CAA2C;IAC3C,YAAY,iBAAiB;CAC9B;AAED,QAAA,MAAM,UAAU,iCAAuB,CAAC;AACxC,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAC1C,QAAA,MAAM,WAAW,8HAAwB,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CACrB,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAC/C;;;;;;;;;OASG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAkBF,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAC5B,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,CAWtD,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAC9B,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,CAWxD,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAC5B,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAgC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAQxE,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAmB/D,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAC9B,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,CAMjD,CAAC;AAEF;;GAEG;AACH,KAAK,UAAU,GAAG,OAAO,UAAU,GAAG;IACpC,qDAAqD;IACrD,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,sCAAsC;IACtC,cAAc,EAAE,OAAO,oBAAoB,CAAC;IAC5C,wCAAwC;IACxC,gBAAgB,EAAE,OAAO,sBAAsB,CAAC;IAChD,iCAAiC;IACjC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,wCAAwC;IACxC,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,iCAAiC;IACjC,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,6CAA6C;IAC7C,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,eAAO,MAAM,MAAM,EAAiB,UAAU,CAAC"}

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

@@ -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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"}
+{"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

@@ -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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"}
+{"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":"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"}

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

@@ -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

@@ -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"}
+{"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"}