@intlayer/design-system 5.0.6 → 5.1.1

package/dist/components/Select/Multiselect.cjs

@@ -1,15 +1,15 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
-const require$$0 = require("react");
+const ReactExports = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Badge_index = require("../Badge/index.cjs");
 const components_Command_index = require("../Command/index.cjs");
-const MultiSelectContext = require$$0.createContext(null);
+const MultiSelectContext = ReactExports.createContext(null);
 const useMultiSelect = () => {
-  const context = require$$0.useContext(MultiSelectContext);
+  const context = ReactExports.useContext(MultiSelectContext);
   if (!context) {
     throw new Error("useMultiSelect must be used within MultiSelectProvider");
   }
@@ -25,19 +25,19 @@ const MultiSelectRoot = ({
   dir,
   ...props
 }) => {
-  const [value, setValue] = require$$0.useState(defaultValues ?? []);
-  const [inputValue, setInputValue] = require$$0.useState("");
-  const [open, setOpen] = require$$0.useState(false);
-  const [activeIndex, setActiveIndex] = require$$0.useState(-1);
-  const inputRef = require$$0.useRef(null);
-  const [isValueSelected, setIsValueSelected] = require$$0.useState(false);
-  const [selectedValue, setSelectedValue] = require$$0.useState("");
-  require$$0.useEffect(() => {
+  const [value, setValue] = ReactExports.useState(defaultValues ?? []);
+  const [inputValue, setInputValue] = ReactExports.useState("");
+  const [open, setOpen] = ReactExports.useState(false);
+  const [activeIndex, setActiveIndex] = ReactExports.useState(-1);
+  const inputRef = ReactExports.useRef(null);
+  const [isValueSelected, setIsValueSelected] = ReactExports.useState(false);
+  const [selectedValue, setSelectedValue] = ReactExports.useState("");
+  ReactExports.useEffect(() => {
     if (valuesProp) {
       setValue(valuesProp);
     }
   }, [valuesProp]);
-  const onValueChangeHandler = require$$0.useCallback(
+  const onValueChangeHandler = ReactExports.useCallback(
     (val) => {
       if (value.includes(val)) {
         const newValue = value.filter((item) => item !== val);
@@ -49,10 +49,9 @@ const MultiSelectRoot = ({
         onValueChange?.(newValue);
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [value]
   );
-  const handleSelect = require$$0.useCallback(
+  const handleSelect = ReactExports.useCallback(
     (e) => {
       e.preventDefault();
       const target = e.currentTarget;
@@ -65,7 +64,7 @@ const MultiSelectRoot = ({
     },
     [inputValue]
   );
-  const handleKeyDown = require$$0.useCallback(
+  const handleKeyDown = ReactExports.useCallback(
     (e) => {
       e.stopPropagation();
       const target = inputRef.current;
@@ -126,10 +125,9 @@ const MultiSelectRoot = ({
           break;
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [value, inputValue, activeIndex, loop]
   );
-  const memoValue = require$$0.useMemo(
+  const memoValue = ReactExports.useMemo(
     () => ({
       value,
       onValueChange: onValueChangeHandler,
@@ -155,7 +153,7 @@ const MultiSelectRoot = ({
       handleSelect
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(MultiSelectContext.Provider, { value: memoValue, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectContext, { value: memoValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     components_Command_index.CommandRoot,
     {
       onKeyDown: handleKeyDown,
@@ -169,72 +167,71 @@ const MultiSelectRoot = ({
     }
   ) });
 };
-const MultiSelectTrigger = require$$0.forwardRef(
-  ({
-    className,
-    getBadgeValue = (value) => value,
-    validationStyleEnabled = false,
-    children,
-    ...props
-  }, ref) => {
-    const { value, onValueChange, activeIndex } = useMultiSelect();
-    const mousePreventDefault = require$$0.useCallback((e) => {
+const MultiSelectTrigger = ({
+  className,
+  getBadgeValue = (value) => value,
+  validationStyleEnabled = false,
+  children,
+  ...props
+}) => {
+  const { value, onValueChange, activeIndex } = useMultiSelect();
+  const mousePreventDefault = ReactExports.useCallback(
+    (e) => {
       e.preventDefault();
       e.stopPropagation();
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
-      "div",
-      {
-        ref,
-        className: utils_cn.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 flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-          "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
-          "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-          "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
-          validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
-          className
-        ),
-        ...props,
-        children: [
-          value.length > 0 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-1", children: value.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
-            components_Badge_index.Badge,
-            {
-              className: utils_cn.cn(
-                "flex items-center gap-1 rounded-xl px-1",
-                activeIndex === index && "ring-muted-foreground ring-2"
-              ),
-              color: "text",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-xs", children: getBadgeValue(item) }),
-                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
-                  "button",
-                  {
-                    "aria-label": `Remove ${item} option`,
-                    "aria-roledescription": "button to remove option",
-                    onMouseDown: mousePreventDefault,
-                    onClick: () => onValueChange(item),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "sr-only", children: [
-                        "Remove ",
-                        item,
-                        " option"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.X, { className: "size-4 cursor-pointer" })
-                    ]
-                  }
-                )
-              ]
-            },
-            item
-          )) }),
-          children
-        ]
-      }
-    );
-  }
-);
-MultiSelectTrigger.displayName = "MultiSelectTrigger";
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.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 flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all",
+        "border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
+        "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
+        validationStyleEnabled && "valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark",
+        className
+      ),
+      ...props,
+      children: [
+        value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-wrap gap-1", children: value.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          components_Badge_index.Badge,
+          {
+            className: utils_cn.cn(
+              "flex items-center gap-1 rounded-xl px-1",
+              activeIndex === index && "ring-muted-foreground ring-2"
+            ),
+            color: "text",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: getBadgeValue(item) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  "aria-label": `Remove ${item} option`,
+                  "aria-roledescription": "button to remove option",
+                  onMouseDown: mousePreventDefault,
+                  onClick: () => onValueChange(item),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+                      "Remove ",
+                      item,
+                      " option"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4 cursor-pointer" })
+                  ]
+                }
+              )
+            ]
+          },
+          item
+        )) }),
+        children
+      ]
+    }
+  );
+};
 const MultiSelectInput = ({
   className,
   ...props
@@ -248,7 +245,7 @@ const MultiSelectInput = ({
     handleSelect,
     ref: inputRef
   } = useMultiSelect();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     components_Command_index.Command.Input,
     {
       ...props,
@@ -268,30 +265,28 @@ const MultiSelectInput = ({
     }
   );
 };
-MultiSelectInput.displayName = "MultiSelectInput";
-const MultiSelectContent = require$$0.forwardRef(({ children }, ref) => {
+const MultiSelectContent = ({
+  children
+}) => {
   const { open } = useMultiSelect();
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { ref, className: "relative", children: open && children });
-});
-MultiSelectContent.displayName = "MultiSelectContent";
-const MultiSelectList = require$$0.forwardRef(({ className, children }, ref) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: open && children });
+};
+const MultiSelectList = ({ className, children }) => /* @__PURE__ */ jsxRuntime.jsxs(
   components_Command_index.Command.List,
   {
-    ref,
     className: utils_cn.cn(
       "border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors",
       className
     ),
     children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Command_index.Command.Empty, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "No results found" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(components_Command_index.Command.Empty, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "No results found" }) })
     ]
   }
-));
-MultiSelectList.displayName = "MultiSelectList";
-const MultiSelectItem = require$$0.forwardRef(({ className, value, children, ...props }, ref) => {
+);
+const MultiSelectItem = ({ className, value, children, ...props }) => {
   const { value: Options, onValueChange, setInputValue } = useMultiSelect();
-  const mousePreventDefault = require$$0.useCallback(
+  const mousePreventDefault = ReactExports.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -299,10 +294,9 @@ const MultiSelectItem = require$$0.forwardRef(({ className, value, children, ...
     []
   );
   const isIncluded = Options.includes(value);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     components_Command_index.Command.Item,
     {
-      ref,
       ...props,
       onSelect: () => {
         onValueChange(value);
@@ -318,11 +312,11 @@ const MultiSelectItem = require$$0.forwardRef(({ className, value, children, ...
       onMouseDown: mousePreventDefault,
       children: [
         children,
-        isIncluded && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.Check, { className: "size-4" })
+        isIncluded && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" })
       ]
     }
   );
-});
+};
 MultiSelectItem.displayName = "MultiSelectItem";
 const MultiSelect = MultiSelectRoot;
 MultiSelect.Trigger = MultiSelectTrigger;

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

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.cjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n/* eslint-disable sonarjs/cognitive-complexity */\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ElementRef,\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEventHandler,\n  type RefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [value]\n  );\n\n  const handleSelect = useCallback(\n    (e: SyntheticEvent<HTMLInputElement>) => {\n      e.preventDefault();\n      const target = e.currentTarget;\n      const selection = target.value.substring(\n        target.selectionStart ?? 0,\n        target.selectionEnd ?? 0\n      );\n\n      setSelectedValue(selection);\n      setIsValueSelected(selection === inputValue);\n    },\n    [inputValue]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      e.stopPropagation();\n      const target = inputRef.current;\n\n      if (!target) return;\n\n      const moveNext = () => {\n        const nextIndex = activeIndex + 1;\n        setActiveIndex(\n          nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n        );\n      };\n\n      const movePrev = () => {\n        const prevIndex = activeIndex - 1;\n        setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n      };\n\n      const moveCurrent = () => {\n        const newIndex =\n          activeIndex - 1 <= 0\n            ? value.length - 1 === 0\n              ? -1\n              : 0\n            : activeIndex - 1;\n        setActiveIndex(newIndex);\n      };\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          if (dir === 'rtl') {\n            if (value.length > 0 && (activeIndex !== -1 || loop)) {\n              moveNext();\n            }\n          } else if (value.length > 0 && target.selectionStart === 0) {\n            movePrev();\n          }\n          break;\n\n        case 'ArrowRight':\n          if (dir === 'rtl') {\n            if (value.length > 0 && target.selectionStart === 0) {\n              movePrev();\n            }\n          } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n            moveNext();\n          }\n          break;\n\n        case 'Backspace':\n        case 'Delete':\n          if (value.length > 0) {\n            if (activeIndex !== -1 && activeIndex < value.length) {\n              onValueChangeHandler(value[activeIndex]);\n              moveCurrent();\n            } else if (\n              (target.selectionStart === 0 && selectedValue === inputValue) ||\n              isValueSelected\n            ) {\n              onValueChangeHandler(value[value.length - 1]);\n            }\n          }\n          break;\n\n        case 'Enter':\n          setOpen(true);\n          break;\n\n        case 'Escape':\n          if (activeIndex !== -1) {\n            setActiveIndex(-1);\n          } else if (open) {\n            setOpen(false);\n          }\n          break;\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [value, inputValue, activeIndex, loop]\n  );\n\n  const memoValue = useMemo(\n    () => ({\n      value,\n      onValueChange: onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      ref: inputRef,\n      handleSelect,\n    }),\n    [\n      value,\n      onValueChangeHandler,\n      open,\n      setOpen,\n      inputValue,\n      setInputValue,\n      activeIndex,\n      setActiveIndex,\n      inputRef,\n      handleSelect,\n    ]\n  );\n\n  return (\n    <MultiSelectContext.Provider value={memoValue}>\n      <CommandRoot\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n          className\n        )}\n        dir={dir}\n        {...props}\n      >\n        {children}\n      </CommandRoot>\n    </MultiSelectContext.Provider>\n  );\n};\n\nconst MultiSelectTrigger = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement> & {\n    getBadgeValue?: (value: string) => string;\n    validationStyleEnabled?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      getBadgeValue = (value) => value,\n      validationStyleEnabled = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { value, onValueChange, activeIndex } = useMultiSelect();\n\n    const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n      useCallback((e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }, []);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n          'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n          'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n          'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          validationStyleEnabled &&\n            'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n          className\n        )}\n        {...props}\n      >\n        {value.length > 0 && (\n          <div className=\"flex w-full flex-wrap gap-1\">\n            {value.map((item, index) => (\n              <Badge\n                key={item}\n                className={cn(\n                  'flex items-center gap-1 rounded-xl px-1',\n                  activeIndex === index && 'ring-muted-foreground ring-2'\n                )}\n                color=\"text\"\n              >\n                <span className=\"text-xs\">{getBadgeValue(item)}</span>\n                <button\n                  aria-label={`Remove ${item} option`}\n                  aria-roledescription=\"button to remove option\"\n                  onMouseDown={mousePreventDefault}\n                  onClick={() => onValueChange(item)}\n                >\n                  <span className=\"sr-only\">Remove {item} option</span>\n                  <RemoveIcon className=\"size-4 cursor-pointer\" />\n                </button>\n              </Badge>\n            ))}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n  }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-none',\n        className,\n        activeIndex !== -1 && 'caret-transparent'\n      )}\n    />\n  );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n  const { open } = useMultiSelect();\n  return (\n    <div ref={ref} className=\"relative\">\n      {open && children}\n    </div>\n  );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n  ElementRef<typeof Command.List>,\n  ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n  <Command.List\n    ref={ref}\n    className={cn(\n      'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n  ElementRef<typeof Command.Item>,\n  { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\n  const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n  const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const isIncluded = Options.includes(value);\n  return (\n    <Command.Item\n      ref={ref}\n      {...props}\n      onSelect={() => {\n        onValueChange(value);\n        setInputValue('');\n      }}\n      className={cn(\n        'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n        'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["createContext","useContext","useState","useRef","useEffect","useCallback","useMemo","jsx","CommandRoot","cn","forwardRef","jsxs","Badge","RemoveIcon","Command","Check"],"mappings":"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"}
+{"version":3,"file":"Multiselect.cjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["'use client';\n\nimport { X as RemoveIcon, Check } 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 } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n  value: string[];\n  onValueChange: (value: string) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inputValue: string;\n  setInputValue: Dispatch<SetStateAction<string>>;\n  activeIndex: number;\n  setActiveIndex: Dispatch<SetStateAction<number>>;\n  ref: RefObject<HTMLInputElement | null>;\n  handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n  const context = useContext(MultiSelectContext);\n  if (!context) {\n    throw new Error('useMultiSelect must be used within MultiSelectProvider');\n  }\n  return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentProps<typeof CommandRoot> & {\n  values?: string[];\n  defaultValues?: string[];\n  onValueChange?: (value: string[]) => void;\n  loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelectTrigger>\n *     <MultiSelectInput placeholder=\"Select your framework\" />\n *   </MultiSelectTrigger>\n *   <MultiSelectContent>\n *     <MultiSelectList>\n *       <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n *       <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n *       <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n *     </MultiSelectList>\n *   </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n  values: valuesProp,\n  defaultValues,\n  onValueChange: onValueChange,\n  loop = false,\n  className,\n  children,\n  dir,\n  ...props\n}) => {\n  const [value, setValue] = useState<string[]>(defaultValues ?? []);\n  const [inputValue, setInputValue] = useState('');\n  const [open, setOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isValueSelected, setIsValueSelected] = useState(false);\n  const [selectedValue, setSelectedValue] = useState('');\n\n  useEffect(() => {\n    if (valuesProp) {\n      setValue(valuesProp);\n    }\n  }, [valuesProp]);\n\n  const onValueChangeHandler = useCallback(\n    (val: string) => {\n      if (value.includes(val)) {\n        const newValue = value.filter((item) => item !== val);\n        setValue(newValue);\n        onValueChange?.(newValue);\n      } else {\n        const newValue = [...value, val];\n        setValue(newValue);\n        onValueChange?.(newValue);\n      }\n    },\n\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 flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n        'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n        'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        validationStyleEnabled &&\n          'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n        className\n      )}\n      {...props}\n    >\n      {value.length > 0 && (\n        <div className=\"flex w-full flex-wrap gap-1\">\n          {value.map((item, index) => (\n            <Badge\n              key={item}\n              className={cn(\n                'flex items-center gap-1 rounded-xl px-1',\n                activeIndex === index && 'ring-muted-foreground ring-2'\n              )}\n              color=\"text\"\n            >\n              <span className=\"text-xs\">{getBadgeValue(item)}</span>\n              <button\n                aria-label={`Remove ${item} option`}\n                aria-roledescription=\"button to remove option\"\n                onMouseDown={mousePreventDefault}\n                onClick={() => onValueChange(item)}\n              >\n                <span className=\"sr-only\">Remove {item} option</span>\n                <RemoveIcon className=\"size-4 cursor-pointer\" />\n              </button>\n            </Badge>\n          ))}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nconst MultiSelectInput: FC<ComponentProps<typeof Command.Input>> = ({\n  className,\n  ...props\n}) => {\n  const {\n    setOpen,\n    inputValue,\n    setInputValue,\n    activeIndex,\n    setActiveIndex,\n    handleSelect,\n    ref: inputRef,\n  } = useMultiSelect();\n\n  return (\n    <Command.Input\n      {...props}\n      tabIndex={0}\n      ref={inputRef as LegacyRef<HTMLInputElement>}\n      value={inputValue}\n      onValueChange={activeIndex === -1 ? setInputValue : undefined}\n      onSelect={handleSelect}\n      onBlur={() => setOpen(false)}\n      onFocus={() => setOpen(true)}\n      onClick={() => setActiveIndex(-1)}\n      className={cn(\n        'ml-2 flex-1 cursor-pointer outline-none',\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 dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n      className\n    )}\n  >\n    {children}\n    <Command.Empty>\n      <span className=\"text-muted-foreground\">No results found</span>\n    </Command.Empty>\n  </Command.List>\n);\n\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 dark:hover:bg-neutral-dark/10',\n        className,\n        isIncluded && 'opacity-50',\n        props.disabled && 'cursor-not-allowed opacity-50'\n      )}\n      onMouseDown={mousePreventDefault}\n    >\n      {children}\n      {isIncluded && <Check className=\"size-4\" />}\n    </Command.Item>\n  );\n};\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n  Trigger: typeof MultiSelectTrigger;\n  Input: typeof MultiSelectInput;\n  Content: typeof MultiSelectContent;\n  List: typeof MultiSelectList;\n  Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n *   values={value}\n *   onValuesChange={setValue}\n *   loop\n * >\n *   <MultiSelect.Trigger>\n *     <MultiSelect.Input placeholder=\"Select your framework\" />\n *   </MultiSelect.Trigger>\n *   <MultiSelect.Content>\n *     <MultiSelect.List>\n *       <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n *       <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n *     </MultiSelect.List>\n *   </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["createContext","useContext","useState","useRef","useEffect","useCallback","useMemo","jsx","CommandRoot","cn","jsxs","Badge","RemoveIcon","Command","Check"],"mappings":";;;;;;;;;AAuCA,MAAM,qBAAqBA,2BAA8C,IAAI;AAE7E,MAAM,iBAAiB,MAAM;AACrB,QAAA,UAAUC,wBAAW,kBAAkB;AAC7C,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,wDAAwD;AAAA,EAAA;AAEnE,SAAA;AACT;AAmCA,MAAM,kBAAwC,CAAC;AAAA,EAC7C,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAIC,aAAAA,SAAmB,iBAAiB,CAAA,CAAE;AAChE,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,EAAE;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,aAAAA,SAAkB,KAAK;AAC/C,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAiB,EAAE;AACnD,QAAA,WAAWC,oBAAyB,IAAI;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAID,aAAAA,SAAS,KAAK;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAIA,aAAAA,SAAS,EAAE;AAErDE,eAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AACd,eAAS,UAAU;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,uBAAuBC,aAAA;AAAA,IAC3B,CAAC,QAAgB;AACX,UAAA,MAAM,SAAS,GAAG,GAAG;AACvB,cAAM,WAAW,MAAM,OAAO,CAAC,SAAS,SAAS,GAAG;AACpD,iBAAS,QAAQ;AACjB,wBAAgB,QAAQ;AAAA,MAAA,OACnB;AACL,cAAM,WAAW,CAAC,GAAG,OAAO,GAAG;AAC/B,iBAAS,QAAQ;AACjB,wBAAgB,QAAQ;AAAA,MAAA;AAAA,IAE5B;AAAA,IAEA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,eAAeA,aAAA;AAAA,IACnB,CAAC,MAAwC;AACvC,QAAE,eAAe;AACjB,YAAM,SAAS,EAAE;AACX,YAAA,YAAY,OAAO,MAAM;AAAA,QAC7B,OAAO,kBAAkB;AAAA,QACzB,OAAO,gBAAgB;AAAA,MACzB;AAEA,uBAAiB,SAAS;AAC1B,yBAAmB,cAAc,UAAU;AAAA,IAC7C;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,gBAAgBA,aAAA;AAAA,IACpB,CAAC,MAAqC;AACpC,QAAE,gBAAgB;AAClB,YAAM,SAAS,SAAS;AAExB,UAAI,CAAC,OAAQ;AAEb,YAAM,WAAW,MAAM;AACrB,cAAM,YAAY,cAAc;AAChC;AAAA,UACE,YAAY,MAAM,SAAS,IAAK,OAAO,IAAI,KAAM;AAAA,QACnD;AAAA,MACF;AAEA,YAAM,WAAW,MAAM;AACrB,cAAM,YAAY,cAAc;AAChC,uBAAe,YAAY,IAAI,MAAM,SAAS,IAAI,SAAS;AAAA,MAC7D;AAEA,YAAM,cAAc,MAAM;AAClB,cAAA,WACJ,cAAc,KAAK,IACf,MAAM,SAAS,MAAM,IACnB,KACA,IACF,cAAc;AACpB,uBAAe,QAAQ;AAAA,MACzB;AAEA,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AACH,cAAI,QAAQ,OAAO;AACjB,gBAAI,MAAM,SAAS,MAAM,gBAAgB,MAAM,OAAO;AAC3C,uBAAA;AAAA,YAAA;AAAA,UACX,WACS,MAAM,SAAS,KAAK,OAAO,mBAAmB,GAAG;AACjD,qBAAA;AAAA,UAAA;AAEX;AAAA,QAEF,KAAK;AACH,cAAI,QAAQ,OAAO;AACjB,gBAAI,MAAM,SAAS,KAAK,OAAO,mBAAmB,GAAG;AAC1C,uBAAA;AAAA,YAAA;AAAA,UACX,WACS,MAAM,SAAS,MAAM,gBAAgB,MAAM,OAAO;AAClD,qBAAA;AAAA,UAAA;AAEX;AAAA,QAEF,KAAK;AAAA,QACL,KAAK;AACC,cAAA,MAAM,SAAS,GAAG;AACpB,gBAAI,gBAAgB,MAAM,cAAc,MAAM,QAAQ;AAC/B,mCAAA,MAAM,WAAW,CAAC;AAC3B,0BAAA;AAAA,YAAA,WAEX,OAAO,mBAAmB,KAAK,kBAAkB,cAClD,iBACA;AACA,mCAAqB,MAAM,MAAM,SAAS,CAAC,CAAC;AAAA,YAAA;AAAA,UAC9C;AAEF;AAAA,QAEF,KAAK;AACH,kBAAQ,IAAI;AACZ;AAAA,QAEF,KAAK;AACH,cAAI,gBAAgB,IAAI;AACtB,2BAAe,EAAE;AAAA,qBACR,MAAM;AACf,oBAAQ,KAAK;AAAA,UAAA;AAEf;AAAA,MAAA;AAAA,IAEN;AAAA,IAEA,CAAC,OAAO,YAAY,aAAa,IAAI;AAAA,EACvC;AAEA,QAAM,YAAYC,aAAA;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAC,2BAAAA,IAAC,oBAAmB,EAAA,OAAO,WACzB,UAAAA,2BAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,MAAM,qBAKF,CAAC;AAAA,EACH;AAAA,EACA,gBAAgB,CAAC,UAAU;AAAA,EAC3B,yBAAyB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,eAAe,YAAA,IAAgB,eAAe;AAE7D,QAAM,sBAA4DJ,aAAA;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAA;AAAA,EACF;AAGE,SAAAK,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAM,MAAA,SAAS,KACdF,2BAAAA,IAAC,OAAI,EAAA,WAAU,+BACZ,UAAM,MAAA,IAAI,CAAC,MAAM,UAChBG,2BAAA;AAAA,UAACC,uBAAA;AAAA,UAAA;AAAA,YAEC,WAAWF,SAAA;AAAA,cACT;AAAA,cACA,gBAAgB,SAAS;AAAA,YAC3B;AAAA,YACA,OAAM;AAAA,YAEN,UAAA;AAAA,cAAAF,+BAAC,QAAK,EAAA,WAAU,WAAW,UAAA,cAAc,IAAI,GAAE;AAAA,cAC/CG,2BAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,cAAY,UAAU,IAAI;AAAA,kBAC1B,wBAAqB;AAAA,kBACrB,aAAa;AAAA,kBACb,SAAS,MAAM,cAAc,IAAI;AAAA,kBAEjC,UAAA;AAAA,oBAACA,2BAAAA,KAAA,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,sBAAA;AAAA,sBAAQ;AAAA,sBAAK;AAAA,oBAAA,GAAO;AAAA,oBAC9CH,2BAAAA,IAACK,YAAW,GAAA,EAAA,WAAU,wBAAwB,CAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA;AAAA,UAhBK;AAAA,QAkBR,CAAA,GACH;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;AAEA,MAAM,mBAA6D,CAAC;AAAA,EAClE;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,eAAe;AAGjB,SAAAL,2BAAA;AAAA,IAACM,yBAAAA,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,eAAe,gBAAgB,KAAK,gBAAgB;AAAA,MACpD,UAAU;AAAA,MACV,QAAQ,MAAM,QAAQ,KAAK;AAAA,MAC3B,SAAS,MAAM,QAAQ,IAAI;AAAA,MAC3B,SAAS,MAAM,eAAe,EAAE;AAAA,MAChC,WAAWJ,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,gBAAgB,MAAM;AAAA,MAAA;AAAA,IACxB;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAyD,CAAC;AAAA,EAC9D;AACF,MAAM;AACE,QAAA,EAAE,KAAK,IAAI,eAAe;AAChC,SAAQF,2BAAA,IAAA,OAAA,EAAI,WAAU,YAAY,kBAAQ,UAAS;AACrD;AAEA,MAAM,kBAAuC,CAAC,EAAE,WAAW,SACzD,MAAAG,2BAAA;AAAA,EAACG,yBAAAA,QAAQ;AAAA,EAAR;AAAA,IACC,WAAWJ,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IAEC,UAAA;AAAA,MAAA;AAAA,MACDF,2BAAAA,IAACM,iCAAQ,OAAR,EACC,yCAAC,QAAK,EAAA,WAAU,yBAAwB,UAAA,mBAAgB,CAAA,EAC1D,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;AAGF,MAAM,kBAEF,CAAC,EAAE,WAAW,OAAO,UAAU,GAAG,YAAY;AAChD,QAAM,EAAE,OAAO,SAAS,eAAe,cAAA,IAAkB,eAAe;AAExE,QAAM,sBAAyDR,aAAA;AAAA,IAC7D,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAA;AAAA,EACF;AAEM,QAAA,aAAa,QAAQ,SAAS,KAAK;AAEvC,SAAAK,2BAAA;AAAA,IAACG,yBAAAA,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,MAAM;AACd,sBAAc,KAAK;AACnB,sBAAc,EAAE;AAAA,MAClB;AAAA,MACA,WAAWJ,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,MAAM,YAAY;AAAA,MACpB;AAAA,MACA,aAAa;AAAA,MAEZ,UAAA;AAAA,QAAA;AAAA,QACA,cAAcF,2BAAAA,IAACO,YAAAA,OAAM,EAAA,WAAU,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC3C;AAEJ;AAEA,gBAAgB,cAAc;AAgCvB,MAAM,cAAc;AAC3B,YAAY,UAAU;AACtB,YAAY,QAAQ;AACpB,YAAY,UAAU;AACtB,YAAY,OAAO;AACnB,YAAY,OAAO;;"}

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

@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
+import { ComponentProps, FC, HTMLAttributes } from 'react';
 import { Command, CommandRoot } from '../Command';
 /**
  * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}
  */
-type MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {
+type MultiSelectProps = ComponentProps<typeof CommandRoot> & {
     values?: string[];
     defaultValues?: string[];
     onValueChange?: (value: string[]) => void;
@@ -32,36 +32,16 @@ type MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {
  * ```
  */
 declare const MultiSelectRoot: FC<MultiSelectProps>;
-declare const MultiSelectTrigger: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const MultiSelectTrigger: FC<HTMLAttributes<HTMLDivElement> & {
     getBadgeValue?: (value: string) => string;
     validationStyleEnabled?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>>;
-declare const MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>>;
-declare const MultiSelectContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-declare const MultiSelectList: import('react').ForwardRefExoticComponent<Omit<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
-    label?: string;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const MultiSelectItem: import('react').ForwardRefExoticComponent<{
+}>;
+declare const MultiSelectInput: FC<ComponentProps<typeof Command.Input>>;
+declare const MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>>;
+declare const MultiSelectList: typeof Command.List;
+declare const MultiSelectItem: FC<{
     value: string;
-} & Omit<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    keywords?: string[];
-    forceMount?: boolean;
-} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+} & ComponentProps<typeof Command.Item>>;
 type MultiSelectType = typeof MultiSelectRoot & {
     Trigger: typeof MultiSelectTrigger;
     Input: typeof MultiSelectInput;

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

@@ -1 +1 @@
-{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Multiselect.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,EAAE,EACP,KAAK,cAAc,EAcpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAyBlD;;GAEG;AAEH,KAAK,gBAAgB,GAAG,wBAAwB,CAAC,OAAO,WAAW,CAAC,GAAG;IACrE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmLzC,CAAC;AAEF,QAAA,MAAM,kBAAkB;oBAGJ,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6BAChB,OAAO;kDAiEnC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAgCxE,CAAC;AAIF,QAAA,MAAM,kBAAkB,2HAUtB,CAAC;AAIH,QAAA,MAAM,eAAe;eA/XlB,MAAO,SAAS;;UA0dO,MAAO,GAAG;;;;;kKA3ElC,CAAC;AAIH,QAAA,MAAM,eAAe;WAEV,MAAM;;eArZd,MAAO,SAAS;;UA+doV,MAAO,GAAG;;;;;;;;;kKAxC/W,CAAC;AAIH,KAAK,eAAe,GAAG,OAAO,eAAe,GAAG;IAC9C,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAsB,eAAe,CAAC"}
+{"version":3,"file":"Multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,EAAE,EACP,KAAK,cAAc,EAcpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAyBlD;;GAEG;AAEH,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,gBAAgB,CAmLzC,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAC1B,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CA4DF,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,CAgC9D,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,CAK1D,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,OAAO,OAAO,CAAC,IAYrC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CACvB;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAiCxD,CAAC;AAIF,KAAK,eAAe,GAAG,OAAO,eAAe,GAAG;IAC9C,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,EAAsB,eAAe,CAAC"}