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

package/dist/components/Select/Multiselect.mjs

@@ -1,327 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { X, Check } from "lucide-react";
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from "react";
-import { cn } from "../../utils/cn.mjs";
-import { Badge, BadgeColor } from "../Badge/index.mjs";
-import { CommandRoot, Command } from "../Command/index.mjs";
-const MultiSelectContext = createContext(null);
-const useMultiSelect = () => {
-  const context = useContext(MultiSelectContext);
-  if (!context) {
-    throw new Error("useMultiSelect must be used within MultiSelectProvider");
-  }
-  return context;
-};
-const MultiSelectRoot = ({
-  values: valuesProp,
-  defaultValues,
-  onValueChange,
-  loop = false,
-  className,
-  children,
-  dir,
-  ...props
-}) => {
-  const [value, setValue] = useState(defaultValues ?? []);
-  const [inputValue, setInputValue] = useState("");
-  const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const inputRef = useRef(null);
-  const [isValueSelected, setIsValueSelected] = useState(false);
-  const [selectedValue, setSelectedValue] = useState("");
-  useEffect(() => {
-    if (valuesProp) {
-      setValue(valuesProp);
-    }
-  }, [valuesProp]);
-  const onValueChangeHandler = useCallback(
-    (val) => {
-      if (value.includes(val)) {
-        const newValue = value.filter((item) => item !== val);
-        setValue(newValue);
-        onValueChange?.(newValue);
-      } else {
-        const newValue = [...value, val];
-        setValue(newValue);
-        onValueChange?.(newValue);
-      }
-    },
-    [value]
-  );
-  const handleSelect = useCallback(
-    (e) => {
-      e.preventDefault();
-      const target = e.currentTarget;
-      const selection = target.value.substring(
-        target.selectionStart ?? 0,
-        target.selectionEnd ?? 0
-      );
-      setSelectedValue(selection);
-      setIsValueSelected(selection === inputValue);
-    },
-    [inputValue]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      e.stopPropagation();
-      const target = inputRef.current;
-      if (!target) return;
-      const moveNext = () => {
-        const nextIndex = activeIndex + 1;
-        setActiveIndex(
-          nextIndex > value.length - 1 ? loop ? 0 : -1 : nextIndex
-        );
-      };
-      const movePrev = () => {
-        const prevIndex = activeIndex - 1;
-        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);
-      };
-      const moveCurrent = () => {
-        const newIndex = activeIndex - 1 <= 0 ? value.length - 1 === 0 ? -1 : 0 : activeIndex - 1;
-        setActiveIndex(newIndex);
-      };
-      switch (e.key) {
-        case "ArrowLeft":
-          if (dir === "rtl") {
-            if (value.length > 0 && (activeIndex !== -1 || loop)) {
-              moveNext();
-            }
-          } else if (value.length > 0 && target.selectionStart === 0) {
-            movePrev();
-          }
-          break;
-        case "ArrowRight":
-          if (dir === "rtl") {
-            if (value.length > 0 && target.selectionStart === 0) {
-              movePrev();
-            }
-          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {
-            moveNext();
-          }
-          break;
-        case "Backspace":
-        case "Delete":
-          if (value.length > 0) {
-            if (activeIndex !== -1 && activeIndex < value.length) {
-              onValueChangeHandler(value[activeIndex]);
-              moveCurrent();
-            } else if (target.selectionStart === 0 && selectedValue === inputValue || isValueSelected) {
-              onValueChangeHandler(value[value.length - 1]);
-            }
-          }
-          break;
-        case "Enter":
-          setOpen(true);
-          break;
-        case "Escape":
-          if (activeIndex !== -1) {
-            setActiveIndex(-1);
-          } else if (open) {
-            setOpen(false);
-          }
-          break;
-      }
-    },
-    [value, inputValue, activeIndex, loop]
-  );
-  const memoValue = useMemo(
-    () => ({
-      value,
-      onValueChange: onValueChangeHandler,
-      open,
-      setOpen,
-      inputValue,
-      setInputValue,
-      activeIndex,
-      setActiveIndex,
-      ref: inputRef,
-      handleSelect
-    }),
-    [
-      value,
-      onValueChangeHandler,
-      open,
-      setOpen,
-      inputValue,
-      setInputValue,
-      activeIndex,
-      setActiveIndex,
-      inputRef,
-      handleSelect
-    ]
-  );
-  return /* @__PURE__ */ jsx(MultiSelectContext, { value: memoValue, children: /* @__PURE__ */ jsx(
-    CommandRoot,
-    {
-      onKeyDown: handleKeyDown,
-      className: cn(
-        "flex w-full flex-col gap-2 overflow-visible bg-transparent",
-        className
-      ),
-      dir,
-      ...props,
-      children
-    }
-  ) });
-};
-const MultiSelectTrigger = ({
-  className,
-  getBadgeValue = (value) => value,
-  validationStyleEnabled = false,
-  children,
-  ...props
-}) => {
-  const { value, onValueChange, activeIndex } = useMultiSelect();
-  const mousePreventDefault = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    []
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex w-full flex-col gap-3 rounded-lg p-1 py-2",
-        "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        "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",
-        "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-        "aria-[invalid=true]:border-error",
-        validationStyleEnabled && "valid:border-success invalid:border-error",
-        className
-      ),
-      ...props,
-      children: [
-        value.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-1", children: value.map((item, index) => /* @__PURE__ */ jsxs(
-          Badge,
-          {
-            className: cn(
-              "flex items-center gap-1 rounded-xl px-1",
-              activeIndex === index && "ring-muted-foreground ring-2"
-            ),
-            color: BadgeColor.TEXT,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs", children: getBadgeValue(item) }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  "aria-label": `Remove ${item} option`,
-                  "aria-roledescription": "button to remove option",
-                  onMouseDown: mousePreventDefault,
-                  onClick: () => onValueChange(item),
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-                      "Remove ",
-                      item,
-                      " option"
-                    ] }),
-                    /* @__PURE__ */ jsx(X, { className: "size-4 cursor-pointer" })
-                  ]
-                }
-              )
-            ]
-          },
-          item
-        )) }),
-        children
-      ]
-    }
-  );
-};
-const MultiSelectInput = ({
-  className,
-  ...props
-}) => {
-  const {
-    setOpen,
-    inputValue,
-    setInputValue,
-    activeIndex,
-    setActiveIndex,
-    handleSelect,
-    ref: inputRef
-  } = useMultiSelect();
-  return /* @__PURE__ */ jsx(
-    Command.Input,
-    {
-      ...props,
-      tabIndex: 0,
-      ref: inputRef,
-      value: inputValue,
-      onValueChange: activeIndex === -1 ? setInputValue : void 0,
-      onSelect: handleSelect,
-      onBlur: () => setOpen(false),
-      onFocus: () => setOpen(true),
-      onClick: () => setActiveIndex(-1),
-      className: cn(
-        "outline-hidden ml-2 flex-1 cursor-pointer",
-        className,
-        activeIndex !== -1 && "caret-transparent"
-      )
-    }
-  );
-};
-const MultiSelectContent = ({
-  children
-}) => {
-  const { open } = useMultiSelect();
-  return /* @__PURE__ */ jsx("div", { className: "relative", children: open && children });
-};
-const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxs(
-  Command.List,
-  {
-    className: cn(
-      "border-muted bg-input-background absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
-      className
-    ),
-    children: [
-      children,
-      /* @__PURE__ */ jsx(Command.Empty, { children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "No results found" }) })
-    ]
-  }
-);
-const MultiSelectItem = ({ className, value, children, ...props }) => {
-  const { value: Options, onValueChange, setInputValue } = useMultiSelect();
-  const mousePreventDefault = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    []
-  );
-  const isIncluded = Options.includes(value);
-  return /* @__PURE__ */ jsxs(
-    Command.Item,
-    {
-      ...props,
-      onSelect: () => {
-        onValueChange(value);
-        setInputValue("");
-      },
-      className: cn(
-        "flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors",
-        "hover:bg-neutral/10",
-        className,
-        isIncluded && "opacity-50",
-        props.disabled && "cursor-not-allowed opacity-50"
-      ),
-      onMouseDown: mousePreventDefault,
-      children: [
-        children,
-        isIncluded && /* @__PURE__ */ jsx(Check, { className: "size-4" })
-      ]
-    }
-  );
-};
-const MultiSelect = MultiSelectRoot;
-MultiSelect.Trigger = MultiSelectTrigger;
-MultiSelect.Input = MultiSelectInput;
-MultiSelect.Content = MultiSelectContent;
-MultiSelect.List = MultiSelectList;
-MultiSelect.Item = MultiSelectItem;
-export {
-  MultiSelect
-};
-//# sourceMappingURL=Multiselect.mjs.map

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

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

package/dist/components/Select/Select.cjs

@@ -1,155 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const SelectPrimitive = require("@radix-ui/react-select");
-const lucideReact = require("lucide-react");
-const utils_cn = require("../../utils/cn.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
-var SelectContentPosition = /* @__PURE__ */ ((SelectContentPosition2) => {
-  SelectContentPosition2["POPPER"] = "popper";
-  SelectContentPosition2["ITEM_ALIGNED"] = "item-aligned";
-  return SelectContentPosition2;
-})(SelectContentPosition || {});
-const SelectRoot = SelectPrimitive__namespace.Root;
-const SelectGroup = SelectPrimitive__namespace.Group;
-const SelectValue = SelectPrimitive__namespace.Value;
-const SelectTrigger = ({ validationStyleEnabled = false, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Trigger,
-  {
-    className: utils_cn.cn(
-      "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",
-      "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",
-      "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-      "aria-[invalid=true]:border-error",
-      validationStyleEnabled && "valid:border-success invalid:border-error",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "size-4 opacity-50" }) })
-    ]
-  }
-);
-const SelectScrollUpButton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.ScrollUpButton,
-  {
-    className: utils_cn.cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {})
-  }
-);
-const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.ScrollDownButton,
-  {
-    className: utils_cn.cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
-  }
-);
-const SelectContent = ({
-  className,
-  children,
-  position = "popper",
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Content,
-  {
-    className: utils_cn.cn(
-      "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",
-      "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",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SelectPrimitive__namespace.Viewport,
-        {
-          className: utils_cn.cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
-    ]
-  }
-) });
-const SelectLabel = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Label,
-  {
-    className: utils_cn.cn("px-1 py-0.5 text-sm font-semibold", className),
-    ...props
-  }
-);
-const SelectItem = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Item,
-  {
-    className: utils_cn.cn(
-      "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",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-4" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
-    ]
-  }
-);
-const SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  SelectPrimitive__namespace.Separator,
-  {
-    className: utils_cn.cn("-mx-1 my-1 h-px bg-red-300", className),
-    ...props
-  }
-);
-const Select = SelectRoot;
-Select.Group = SelectGroup;
-Select.Value = SelectValue;
-Select.Trigger = SelectTrigger;
-Select.ScrollUpButton = SelectScrollUpButton;
-Select.ScrollDownButton = SelectScrollDownButton;
-Select.Content = SelectContent;
-Select.Label = SelectLabel;
-Select.Item = SelectItem;
-Select.Separator = SelectSeparator;
-exports.Select = Select;
-exports.SelectContent = SelectContent;
-exports.SelectContentPosition = SelectContentPosition;
-exports.SelectLabel = SelectLabel;
-exports.SelectSeparator = SelectSeparator;
-//# sourceMappingURL=Select.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n  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","SelectPrimitive","jsxs","cn","jsx","ChevronsUpDown","ChevronUpIcon","ChevronDownIcon","CheckIcon"],"mappings":"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"}