@trsys-tech/matrix-library 0.3.4 → 0.3.6

package/dist/multiselect.es.js

@@ -1,14 +1,14 @@
-import { jsxs as t, jsx as r, Fragment as N } from "react/jsx-runtime";
-import * as f from "react";
+import { jsxs as a, jsx as r, Fragment as x } from "react/jsx-runtime";
+import * as s from "react";
 import { tv as H } from "tailwind-variants";
-import { XMark as S, CircleXmark as J, ChevronDown as C, Check as j } from "@trsys-tech/matrix-icons";
-import { cn as i } from "./utils.es.js";
-import { Badge as k } from "./badge.es.js";
-import { Button as Q } from "./button.es.js";
-import { Separator as P } from "./separator.es.js";
-import { Popover as T, PopoverTrigger as U, PopoverContent as W } from "./popover.es.js";
-import { Command as Y, CommandInput as Z, CommandList as ee, CommandEmpty as re, CommandGroup as E, CommandItem as h, CommandSeparator as te } from "./command.es.js";
-const I = H({
+import { ChevronDown as J, XMark as k, CircleXmark as Q, Check as j } from "@trsys-tech/matrix-icons";
+import { cn as d } from "./utils.es.js";
+import { Badge as P } from "./badge.es.js";
+import { Button as U } from "./button.es.js";
+import { Separator as E } from "./separator.es.js";
+import { Popover as Y, PopoverTrigger as Z, PopoverContent as ee } from "./popover.es.js";
+import { Command as re, CommandInput as te, CommandList as ae, CommandEmpty as oe, CommandGroup as I, CommandItem as g, CommandSeparator as se } from "./command.es.js";
+const O = H({
   base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
   variants: {
     variant: {
@@ -21,180 +21,188 @@ const I = H({
   defaultVariants: {
     variant: "default"
   }
-}), ae = f.forwardRef(
+}), le = s.forwardRef(
   ({
-    options: s,
-    onValueChange: n,
-    value: g,
-    variant: y,
-    disabled: w,
-    defaultValue: O = [],
-    placeholder: D = "Select options",
-    maxCount: d = 3,
+    options: n,
+    onValueChange: c,
+    value: b,
+    variant: w,
+    disabled: N,
+    defaultValue: D = [],
+    placeholder: R = "Select options",
+    maxCount: m = 3,
     modalPopover: V = !1,
     // asChild = false,
     className: B,
     moreText: K = "more",
-    clearText: M = "Clear",
-    closeText: _ = "Close",
-    selectAllText: A = "Select All",
-    noResultsText: L = "No results found.",
-    loading: m,
-    loadingText: p = "Loading...",
-    ...R
-  }, X) => {
-    const [a, l] = f.useState(O ?? g), [$, c] = f.useState(!1);
-    f.useEffect(() => {
-      l(g ?? []);
-    }, [g]);
+    clearText: L = "Clear",
+    closeText: M = "Close",
+    selectAllText: _ = "Select All",
+    noResultsText: A = "No results found.",
+    loading: p,
+    loadingText: u = "Loading...",
+    ...T
+  }, W) => {
+    const [t, l] = s.useState(D ?? b), [X, i] = s.useState(!1), f = s.useRef(null), [$, S] = s.useState(!1);
+    s.useEffect(() => {
+      l(b ?? []);
+    }, [b]);
     const F = (e) => {
       if (e.key === "Enter")
-        c(!0);
+        i(!0);
       else if (e.key === "Backspace" && !e.currentTarget.value) {
-        const o = [...a];
-        o.pop(), l(o), n(o);
+        const o = [...t];
+        o.pop(), l(o), c(o);
       }
-    }, v = (e) => {
-      const o = a.includes(e) ? a.filter((u) => u !== e) : [...a, e];
-      l(o), n(o);
-    }, b = () => {
-      l([]), n([]);
+    }, C = (e) => {
+      const o = t.includes(e) ? t.filter((h) => h !== e) : [...t, e];
+      l(o), c(o);
+    }, y = () => {
+      l([]), c([]);
     }, G = () => {
-      c((e) => !e);
+      i((e) => !e);
     }, q = () => {
-      const e = a.slice(0, d);
-      l(e), n(e);
+      const e = t.slice(0, m);
+      l(e), c(e);
     }, z = () => {
-      if (a.length === s.length)
-        b();
+      if (t.length === n.length)
+        y();
       else {
-        const e = s.map((o) => o.value);
-        l(e), n(e);
+        const e = n.map((o) => o.value);
+        l(e), c(e);
       }
     };
-    return /* @__PURE__ */ t(T, { open: $, onOpenChange: c, modal: V, children: [
-      /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(
-        Q,
+    return s.useLayoutEffect(() => {
+      f.current && (f?.current?.firstChild?.offsetTop < f?.current?.lastChild?.offsetTop ? S(!0) : S(!1));
+    }, [t]), /* @__PURE__ */ a(Y, { open: X, onOpenChange: i, modal: V, children: [
+      /* @__PURE__ */ r(Z, { asChild: !0, children: /* @__PURE__ */ r(
+        U,
         {
-          ref: X,
+          ref: W,
           variant: "text",
-          loading: m,
-          disabled: w,
-          ...R,
+          loading: p,
+          disabled: N,
+          ...T,
           onClick: G,
-          className: i(
-            "flex max-h-14 h-auto w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+          className: d(
+            "group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
+            $ && "h-auto",
             B
           ),
-          children: /* @__PURE__ */ r(N, { children: a.length > 0 ? /* @__PURE__ */ t("div", { className: "flex justify-between items-center w-full", children: [
-            /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: [
-              a.slice(0, d).map((e) => {
-                const o = s.find((x) => x.value === e), u = o?.icon;
-                return /* @__PURE__ */ t(k, { className: i(I({ variant: y }), { "text-gray-400 bg-gray-200": w || m }), children: [
+          "data-placeholder": t.length ? void 0 : "",
+          endIcon: /* @__PURE__ */ r(
+            J,
+            {
+              role: "button",
+              "aria-label": "Expand dropdown",
+              className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
+            }
+          ),
+          children: /* @__PURE__ */ r(x, { children: t.length > 0 ? /* @__PURE__ */ a("div", { className: "flex justify-between items-center w-full", children: [
+            /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", ref: f, children: [
+              t.slice(0, m).map((e) => {
+                const o = n.find((v) => v.value === e), h = o?.icon;
+                return /* @__PURE__ */ a(P, { className: d(O({ variant: w }), { "text-gray-400 bg-gray-200": N || p }), children: [
                   /* @__PURE__ */ r(
-                    S,
+                    k,
                     {
                       className: "h-4 w-4 cursor-pointer",
-                      onClick: (x) => {
-                        x.stopPropagation(), v(e);
+                      onClick: (v) => {
+                        v.stopPropagation(), C(e);
                       }
                     }
                   ),
-                  u && /* @__PURE__ */ r(u, { className: "h-4 w-4 mr-2" }),
+                  h && /* @__PURE__ */ r(h, { className: "h-4 w-4 mr-2" }),
                   o?.label
                 ] }, e);
               }),
-              a.length > d && /* @__PURE__ */ t(k, { className: i(I({ variant: y })), children: [
-                `+ ${a.length - d} ${K}`,
+              t.length > m && /* @__PURE__ */ a(P, { className: d(O({ variant: w })), children: [
+                `+ ${t.length - m} ${K}`,
                 /* @__PURE__ */ r(
-                  J,
+                  Q,
                   {
                     role: "button",
-                    className: "ml-2 h-4 w-4 cursor-pointer",
+                    className: "ml-2 h-4.5 w-4.5 cursor-pointer",
                     onClick: (e) => {
                       e.stopPropagation(), q();
                     }
                   }
                 )
               ] }),
-              m && p ? p : null
+              p && u ? u : null
             ] }),
-            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-1", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-1", children: [
               /* @__PURE__ */ r(
-                S,
+                k,
                 {
                   role: "button",
-                  className: "h-4.5 w-4.5 text-muted-foreground cursor-pointer",
+                  className: "h-5 w-5 text-muted-foreground cursor-pointer",
                   onClick: (e) => {
-                    e.stopPropagation(), b();
+                    e.stopPropagation(), y();
                   },
                   "aria-label": "Clear"
                 }
               ),
-              /* @__PURE__ */ r(P, { orientation: "vertical", className: "flex min-h-5 h-full" }),
-              /* @__PURE__ */ r(C, { role: "button", "aria-label": "Expand dropdown", className: "h-4 w-4 text-muted-foreground cursor-pointer" })
+              /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-5 h-full" })
             ] })
-          ] }) : /* @__PURE__ */ t("div", { className: "flex items-center justify-between w-full mx-auto", children: [
-            /* @__PURE__ */ r("span", { className: "text-sm text-muted-foreground mx-3", children: m && p ? p : D }),
-            /* @__PURE__ */ r(C, { role: "button", "aria-label": "Expand dropdown", className: "h-4 w-4 text-muted-foreground cursor-pointer" })
-          ] }) })
+          ] }) : /* @__PURE__ */ r(x, { children: p && u ? u : R }) })
         }
       ) }),
-      /* @__PURE__ */ r(W, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => c(!1), children: /* @__PURE__ */ t(Y, { className: "w-[--radix-popper-anchor-width]", children: [
-        /* @__PURE__ */ r(Z, { placeholder: "Search...", onKeyDown: F }),
-        /* @__PURE__ */ t(ee, { className: "max-h-[--radix-popper-available-height]", children: [
-          /* @__PURE__ */ r(re, { children: L }),
-          /* @__PURE__ */ t(E, { children: [
-            /* @__PURE__ */ t(h, { onSelect: z, className: "cursor-pointer", children: [
+      /* @__PURE__ */ r(ee, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ a(re, { className: "w-[--radix-popper-anchor-width]", children: [
+        /* @__PURE__ */ r(te, { placeholder: "Search...", onKeyDown: F }),
+        /* @__PURE__ */ a(ae, { className: "max-h-[--radix-popper-available-height]", children: [
+          /* @__PURE__ */ r(oe, { children: A }),
+          /* @__PURE__ */ a(I, { children: [
+            /* @__PURE__ */ a(g, { onSelect: z, className: "cursor-pointer", children: [
               /* @__PURE__ */ r(
                 "div",
                 {
-                  className: i(
-                    "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                    a.length === s.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  className: d(
+                    "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
+                    t.length === n.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                   ),
-                  children: /* @__PURE__ */ r(j, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
                 }
               ),
-              /* @__PURE__ */ t("span", { children: [
+              /* @__PURE__ */ a("span", { children: [
                 "(",
-                A,
+                _,
                 ")"
               ] })
             ] }, "all"),
-            s.map((e) => {
-              const o = a.includes(e.value);
-              return /* @__PURE__ */ t(h, { onSelect: () => v(e.value), className: "cursor-pointer", children: [
+            n.map((e) => {
+              const o = t.includes(e.value);
+              return /* @__PURE__ */ a(g, { onSelect: () => C(e.value), className: "cursor-pointer", children: [
                 /* @__PURE__ */ r(
                   "div",
                   {
-                    className: i(
-                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                    className: d(
+                      "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
                       o ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                     ),
-                    children: /* @__PURE__ */ r(j, { className: "h-4 w-4" })
+                    children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
                   }
                 ),
-                e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4.5 w-4.5 text-muted-foreground" }),
                 /* @__PURE__ */ r("span", { children: e.label })
               ] }, e.value);
             })
           ] }),
-          /* @__PURE__ */ r(te, {}),
-          /* @__PURE__ */ r(E, { children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            a.length > 0 && /* @__PURE__ */ t(N, { children: [
-              /* @__PURE__ */ r(h, { onSelect: b, className: "flex-1 justify-center cursor-pointer", children: M }),
-              /* @__PURE__ */ r(P, { orientation: "vertical", className: "flex min-h-6 h-full" })
+          /* @__PURE__ */ r(se, {}),
+          /* @__PURE__ */ r(I, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+            t.length > 0 && /* @__PURE__ */ a(x, { children: [
+              /* @__PURE__ */ r(g, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: L }),
+              /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-6 h-full" })
             ] }),
-            /* @__PURE__ */ r(h, { onSelect: () => c(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: _ })
+            /* @__PURE__ */ r(g, { onSelect: () => i(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: M })
           ] }) })
         ] })
       ] }) })
     ] });
   }
 );
-ae.displayName = "MultiSelect";
+le.displayName = "MultiSelect";
 export {
-  ae as MultiSelect
+  le as MultiSelect
 };
 //# sourceMappingURL=multiselect.es.js.map

package/dist/multiselect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n  base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n      secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n      inverted: \"inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: string;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: string[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: string[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: string[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\r\n  (\r\n    {\r\n      options,\r\n      onValueChange,\r\n      value,\r\n      variant,\r\n      disabled,\r\n      defaultValue = [],\r\n      placeholder = \"Select options\",\r\n      maxCount = 3,\r\n      modalPopover = false,\r\n      // asChild = false,\r\n      className,\r\n      moreText = \"more\",\r\n      clearText = \"Clear\",\r\n      closeText = \"Close\",\r\n      selectAllText = \"Select All\",\r\n      noResultsText = \"No results found.\",\r\n      loading,\r\n      loadingText = \"Loading...\",\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue ?? value);\r\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n\r\n    React.useEffect(() => {\r\n      setSelectedValues(value ?? []);\r\n    }, [value]);\r\n\r\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        setSelectedValues(newSelectedValues);\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    };\r\n\r\n    const toggleOption = (option: string) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const handleClear = () => {\r\n      setSelectedValues([]);\r\n      onValueChange([]);\r\n    };\r\n\r\n    const handleTogglePopover = () => {\r\n      setIsPopoverOpen(prev => !prev);\r\n    };\r\n\r\n    const clearExtraOptions = () => {\r\n      const newSelectedValues = selectedValues.slice(0, maxCount);\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const toggleAll = () => {\r\n      if (selectedValues.length === options.length) {\r\n        handleClear();\r\n      } else {\r\n        const allValues = options.map(option => option.value);\r\n        setSelectedValues(allValues);\r\n        onValueChange(allValues);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            ref={ref}\r\n            variant=\"text\"\r\n            loading={loading}\r\n            disabled={disabled}\r\n            {...props}\r\n            onClick={handleTogglePopover}\r\n            className={cn(\r\n              \"flex max-h-14 h-auto w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n              className,\r\n            )}\r\n          >\r\n            <>\r\n              {selectedValues.length > 0 ? (\r\n                <div className=\"flex justify-between items-center w-full\">\r\n                  <div className=\"flex flex-wrap items-center gap-2\">\r\n                    {selectedValues.slice(0, maxCount).map(value => {\r\n                      const option = options.find(o => o.value === value);\r\n                      const IconComponent = option?.icon;\r\n                      return (\r\n                        <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                          <XMark\r\n                            className=\"h-4 w-4 cursor-pointer\"\r\n                            onClick={event => {\r\n                              event.stopPropagation();\r\n                              toggleOption(value);\r\n                            }}\r\n                          />\r\n                          {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n                          {option?.label}\r\n                        </Badge>\r\n                      );\r\n                    })}\r\n                    {selectedValues.length > maxCount && (\r\n                      <Badge className={cn(multiSelectVariants({ variant }))}>\r\n                        {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                        <CircleXmark\r\n                          role=\"button\"\r\n                          className=\"ml-2 h-4 w-4 cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            clearExtraOptions();\r\n                          }}\r\n                        />\r\n                      </Badge>\r\n                    )}\r\n                    {loading && loadingText ? loadingText : null}\r\n                  </div>\r\n                  <div className=\"flex items-center justify-between gap-1\">\r\n                    <XMark\r\n                      role=\"button\"\r\n                      className=\"h-4.5 w-4.5 text-muted-foreground cursor-pointer\"\r\n                      onClick={event => {\r\n                        event.stopPropagation();\r\n                        handleClear();\r\n                      }}\r\n                      aria-label=\"Clear\"\r\n                    />\r\n                    <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n\r\n                    <ChevronDown role=\"button\" aria-label=\"Expand dropdown\" className=\"h-4 w-4 text-muted-foreground cursor-pointer\" />\r\n                  </div>\r\n                </div>\r\n              ) : (\r\n                <div className=\"flex items-center justify-between w-full mx-auto\">\r\n                  <span className=\"text-sm text-muted-foreground mx-3\">{loading && loadingText ? loadingText : placeholder}</span>\r\n\r\n                  <ChevronDown role=\"button\" aria-label=\"Expand dropdown\" className=\"h-4 w-4 text-muted-foreground cursor-pointer\" />\r\n                </div>\r\n              )}\r\n            </>\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n          <Command className=\"w-[--radix-popper-anchor-width]\">\r\n            <CommandInput placeholder=\"Search...\" onKeyDown={handleInputKeyDown} />\r\n            <CommandList className=\"max-h-[--radix-popper-available-height]\">\r\n              <CommandEmpty>{noResultsText}</CommandEmpty>\r\n              <CommandGroup>\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n                      selectedValues.length === options.length ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"h-4 w-4\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n                {options.map(option => {\r\n                  const isSelected = selectedValues.includes(option.value);\r\n                  return (\r\n                    <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n                      <div\r\n                        className={cn(\r\n                          \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n                          isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                        )}\r\n                      >\r\n                        <Check className=\"h-4 w-4\" />\r\n                      </div>\r\n                      {option.icon && <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />}\r\n                      <span>{option.label}</span>\r\n                    </CommandItem>\r\n                  );\r\n                })}\r\n              </CommandGroup>\r\n              <CommandSeparator />\r\n              <CommandGroup>\r\n                <div className=\"flex items-center justify-between\">\r\n                  {selectedValues.length > 0 && (\r\n                    <>\r\n                      <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n                        {clearText}\r\n                      </CommandItem>\r\n                      <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n                    </>\r\n                  )}\r\n                  <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n                    {closeText}\r\n                  </CommandItem>\r\n                </div>\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </Command>\r\n        </PopoverContent>\r\n      </Popover>\r\n    );\r\n  },\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","React","options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","loading","loadingText","props","ref","selectedValues","setSelectedValues","isPopoverOpen","setIsPopoverOpen","handleInputKeyDown","event","newSelectedValues","toggleOption","option","handleClear","handleTogglePopover","prev","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","jsxs","o","IconComponent","Badge","XMark","CircleXmark","Separator","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","Fragment"],"mappings":"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"}
+{"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = tv({\r\n  base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n      secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n      destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n      inverted: \"inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: string;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: string[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: string[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: string[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\r\n  (\r\n    {\r\n      options,\r\n      onValueChange,\r\n      value,\r\n      variant,\r\n      disabled,\r\n      defaultValue = [],\r\n      placeholder = \"Select options\",\r\n      maxCount = 3,\r\n      modalPopover = false,\r\n      // asChild = false,\r\n      className,\r\n      moreText = \"more\",\r\n      clearText = \"Clear\",\r\n      closeText = \"Close\",\r\n      selectAllText = \"Select All\",\r\n      noResultsText = \"No results found.\",\r\n      loading,\r\n      loadingText = \"Loading...\",\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue ?? value);\r\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const [isWrapped, setIsWrapped] = React.useState(false);\r\n\r\n    React.useEffect(() => {\r\n      setSelectedValues(value ?? []);\r\n    }, [value]);\r\n\r\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        setSelectedValues(newSelectedValues);\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    };\r\n\r\n    const toggleOption = (option: string) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const handleClear = () => {\r\n      setSelectedValues([]);\r\n      onValueChange([]);\r\n    };\r\n\r\n    const handleTogglePopover = () => {\r\n      setIsPopoverOpen(prev => !prev);\r\n    };\r\n\r\n    const clearExtraOptions = () => {\r\n      const newSelectedValues = selectedValues.slice(0, maxCount);\r\n      setSelectedValues(newSelectedValues);\r\n      onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const toggleAll = () => {\r\n      if (selectedValues.length === options.length) {\r\n        handleClear();\r\n      } else {\r\n        const allValues = options.map(option => option.value);\r\n        setSelectedValues(allValues);\r\n        onValueChange(allValues);\r\n      }\r\n    };\r\n\r\n    React.useLayoutEffect(() => {\r\n      if (containerRef.current) {\r\n        if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n          setIsWrapped(true);\r\n        } else {\r\n          setIsWrapped(false);\r\n        }\r\n      }\r\n    }, [selectedValues]);\r\n\r\n    return (\r\n      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n        <PopoverTrigger asChild>\r\n          <Button\r\n            ref={ref}\r\n            variant=\"text\"\r\n            loading={loading}\r\n            disabled={disabled}\r\n            {...props}\r\n            onClick={handleTogglePopover}\r\n            className={cn(\r\n              \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n              isWrapped && \"h-auto\",\r\n              className,\r\n            )}\r\n            data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n            endIcon={\r\n              <ChevronDown\r\n                role=\"button\"\r\n                aria-label=\"Expand dropdown\"\r\n                className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n              />\r\n            }\r\n          >\r\n            <>\r\n              {selectedValues.length > 0 ? (\r\n                <div className=\"flex justify-between items-center w-full\">\r\n                  <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n                    {selectedValues.slice(0, maxCount).map(value => {\r\n                      const option = options.find(o => o.value === value);\r\n                      const IconComponent = option?.icon;\r\n                      return (\r\n                        <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                          <XMark\r\n                            className=\"h-4 w-4 cursor-pointer\"\r\n                            onClick={event => {\r\n                              event.stopPropagation();\r\n                              toggleOption(value);\r\n                            }}\r\n                          />\r\n                          {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n                          {option?.label}\r\n                        </Badge>\r\n                      );\r\n                    })}\r\n                    {selectedValues.length > maxCount && (\r\n                      <Badge className={cn(multiSelectVariants({ variant }))}>\r\n                        {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                        <CircleXmark\r\n                          role=\"button\"\r\n                          className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            clearExtraOptions();\r\n                          }}\r\n                        />\r\n                      </Badge>\r\n                    )}\r\n                    {loading && loadingText ? loadingText : null}\r\n                  </div>\r\n                  <div className=\"flex items-center justify-between gap-1\">\r\n                    <XMark\r\n                      role=\"button\"\r\n                      className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n                      onClick={event => {\r\n                        event.stopPropagation();\r\n                        handleClear();\r\n                      }}\r\n                      aria-label=\"Clear\"\r\n                    />\r\n                    <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n                  </div>\r\n                </div>\r\n              ) : (\r\n                <>{loading && loadingText ? loadingText : placeholder}</>\r\n              )}\r\n            </>\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n          <Command className=\"w-[--radix-popper-anchor-width]\">\r\n            <CommandInput placeholder=\"Search...\" onKeyDown={handleInputKeyDown} />\r\n            <CommandList className=\"max-h-[--radix-popper-available-height]\">\r\n              <CommandEmpty>{noResultsText}</CommandEmpty>\r\n              <CommandGroup>\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                      selectedValues.length === options.length ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"h-4.5 w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n                {options.map(option => {\r\n                  const isSelected = selectedValues.includes(option.value);\r\n                  return (\r\n                    <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n                      <div\r\n                        className={cn(\r\n                          \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n                          isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n                        )}\r\n                      >\r\n                        <Check className=\"h-4.5 w-4.5\" />\r\n                      </div>\r\n                      {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n                      <span>{option.label}</span>\r\n                    </CommandItem>\r\n                  );\r\n                })}\r\n              </CommandGroup>\r\n              <CommandSeparator />\r\n              <CommandGroup>\r\n                <div className=\"flex items-center justify-between\">\r\n                  {selectedValues.length > 0 && (\r\n                    <>\r\n                      <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n                        {clearText}\r\n                      </CommandItem>\r\n                      <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n                    </>\r\n                  )}\r\n                  <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n                    {closeText}\r\n                  </CommandItem>\r\n                </div>\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </Command>\r\n        </PopoverContent>\r\n      </Popover>\r\n    );\r\n  },\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","React","options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","loading","loadingText","props","ref","selectedValues","setSelectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","isWrapped","setIsWrapped","handleInputKeyDown","event","newSelectedValues","toggleOption","option","handleClear","handleTogglePopover","prev","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","o","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator"],"mappings":"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"}

package/dist/select.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.es.js","sources":["../src/components/select/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Check, ChevronDown, ChevronUp, XMark } from \"@trsys-tech/matrix-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type { SelectValueProps, SelectGroupProps } from \"@radix-ui/react-select\";\n\nimport { cn } from \"../../lib/utils\";\n\ntype ClearSelectContextValue = {\n  onClear: () => void;\n  value: string | undefined;\n};\n\nconst SelectContext = React.createContext<ClearSelectContextValue>({ onClear: () => {}, value: undefined });\n\nconst Select = ({ onValueChange, value, ...props }: SelectPrimitive.SelectProps) => {\n  const onClear = () => {\n    onValueChange?.(\"\");\n  };\n\n  return (\n    <SelectContext.Provider value={{ onClear, value }}>\n      <SelectPrimitive.Root {...props} value={value} onValueChange={onValueChange} />\n    </SelectContext.Provider>\n  );\n};\nSelect.displayName = SelectPrimitive.Root.displayName;\ntype SelectProps = React.ComponentProps<typeof Select>;\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  clearable?: boolean;\n};\n\nconst SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n  ({ className, children, clearable, ...props }: SelectTriggerProps, ref) => {\n    const { onClear, value } = React.useContext(SelectContext);\n\n    const handlePointerDown = (e: React.PointerEvent) => {\n      e.stopPropagation();\n    };\n\n    return (\n      <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"group flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-none [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\n          className,\n        )}\n        data-value={value}\n        {...props}\n      >\n        {children}\n        <div className=\"flex items-center gap-2\">\n          {clearable && value ? (\n            <SelectPrimitive.Icon asChild onPointerDown={handlePointerDown} onClickCapture={onClear}>\n              <XMark className=\"h-4.5 w-4.5\" />\n            </SelectPrimitive.Icon>\n          ) : null}\n          <SelectPrimitive.Icon asChild>\n            <ChevronDown className=\"h-4.5 w-4.5 text-primary group-data-[state=open]:rotate-180 transition-transform\" />\n          </SelectPrimitive.Icon>\n        </div>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n// type SelectTriggerProps = React.ComponentProps<typeof SelectTrigger>;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton ref={ref} className={cn(\"flex cursor-default items-center justify-center py-1\", className)} {...props}>\n    <ChevronUp />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\ntype SelectScrollUpButtonProps = React.ComponentProps<typeof SelectScrollUpButton>;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton ref={ref} className={cn(\"flex cursor-default items-center justify-center py-1\", className)} {...props}>\n    <ChevronDown />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;\ntype SelectScrollDownButtonProps = React.ComponentProps<typeof SelectScrollDownButton>;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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\",\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 max-h-[--radix-select-content-available-height]\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\")}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\ntype SelectContentProps = React.ComponentProps<typeof SelectContent>;\n\nconst SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>>(\n  ({ className, ...props }, ref) => <SelectPrimitive.Label ref={ref} className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />,\n);\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\ntype SelectLabelProps = React.ComponentProps<typeof SelectLabel>;\n\nconst SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>>(\n  ({ className, children, ...props }, ref) => (\n    <SelectPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-200 data-[active=true]:bg-gray-300 data-[active=true]:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"h-4 w-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  ),\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\ntype SelectItemProps = React.ComponentProps<typeof SelectItem>;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn(\"-mx-1 my-1 h-px bg-muted\", className)} {...props} />);\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\ntype SelectSeparatorProps = React.ComponentProps<typeof SelectSeparator>;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n  type SelectProps,\n  type SelectGroupProps,\n  type SelectValueProps,\n  type SelectTriggerProps,\n  type SelectContentProps,\n  type SelectLabelProps,\n  type SelectItemProps,\n  type SelectSeparatorProps,\n  type SelectScrollUpButtonProps,\n  type SelectScrollDownButtonProps,\n};\n"],"names":["SelectContext","React","Select","onValueChange","value","props","onClear","jsx","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","children","clearable","ref","handlePointerDown","e","jsxs","cn","XMark","ChevronDown","SelectScrollUpButton","ChevronUp","SelectScrollDownButton","SelectContent","position","SelectLabel","SelectItem","Check","SelectSeparator"],"mappings":"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"}
+{"version":3,"file":"select.es.js","sources":["../src/components/select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronDown, ChevronUp, XMark } from \"@trsys-tech/matrix-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type { SelectValueProps, SelectGroupProps } from \"@radix-ui/react-select\";\n\nimport { cn } from \"../../lib/utils\";\n\ntype ClearSelectContextValue = {\n  onClear: () => void;\n  value: string | undefined;\n};\n\nconst SelectContext = React.createContext<ClearSelectContextValue>({ onClear: () => {}, value: undefined });\n\nconst Select = ({ onValueChange, value, ...props }: SelectPrimitive.SelectProps) => {\n  const onClear = () => {\n    onValueChange?.(\"\");\n  };\n\n  return (\n    <SelectContext.Provider value={{ onClear, value }}>\n      <SelectPrimitive.Root {...props} value={value} onValueChange={onValueChange} />\n    </SelectContext.Provider>\n  );\n};\nSelect.displayName = SelectPrimitive.Root.displayName;\ntype SelectProps = React.ComponentProps<typeof Select>;\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  clearable?: boolean;\n};\n\nconst SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n  ({ className, children, clearable, ...props }: SelectTriggerProps, ref) => {\n    const { onClear, value } = React.useContext(SelectContext);\n\n    const handlePointerDown = (e: React.PointerEvent) => {\n      e.stopPropagation();\n    };\n\n    return (\n      <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          \"group flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-none [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\n          className,\n        )}\n        data-value={value}\n        {...props}\n      >\n        {children}\n        <div className=\"flex items-center gap-2\">\n          {clearable && value ? (\n            <SelectPrimitive.Icon asChild onPointerDown={handlePointerDown} onClickCapture={onClear}>\n              <XMark className=\"h-4.5 w-4.5\" />\n            </SelectPrimitive.Icon>\n          ) : null}\n          <SelectPrimitive.Icon asChild>\n            <ChevronDown className=\"h-4.5 w-4.5 text-primary group-data-[state=open]:rotate-180 transition-transform\" />\n          </SelectPrimitive.Icon>\n        </div>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n// type SelectTriggerProps = React.ComponentProps<typeof SelectTrigger>;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton ref={ref} className={cn(\"flex cursor-default items-center justify-center py-1\", className)} {...props}>\n    <ChevronUp />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\ntype SelectScrollUpButtonProps = React.ComponentProps<typeof SelectScrollUpButton>;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton ref={ref} className={cn(\"flex cursor-default items-center justify-center py-1\", className)} {...props}>\n    <ChevronDown />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;\ntype SelectScrollDownButtonProps = React.ComponentProps<typeof SelectScrollDownButton>;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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\",\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 max-h-[--radix-select-content-available-height]\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\")}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\ntype SelectContentProps = React.ComponentProps<typeof SelectContent>;\n\nconst SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>>(\n  ({ className, ...props }, ref) => <SelectPrimitive.Label ref={ref} className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />,\n);\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\ntype SelectLabelProps = React.ComponentProps<typeof SelectLabel>;\n\nconst SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>>(\n  ({ className, children, ...props }, ref) => (\n    <SelectPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-200 data-[active=true]:bg-gray-300 data-[active=true]:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"h-4 w-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  ),\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\ntype SelectItemProps = React.ComponentProps<typeof SelectItem>;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} className={cn(\"-mx-1 my-1 h-px bg-muted\", className)} {...props} />);\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\ntype SelectSeparatorProps = React.ComponentProps<typeof SelectSeparator>;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n  type SelectProps,\n  type SelectGroupProps,\n  type SelectValueProps,\n  type SelectTriggerProps,\n  type SelectContentProps,\n  type SelectLabelProps,\n  type SelectItemProps,\n  type SelectSeparatorProps,\n  type SelectScrollUpButtonProps,\n  type SelectScrollDownButtonProps,\n};\n"],"names":["SelectContext","React","Select","onValueChange","value","props","onClear","jsx","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","children","clearable","ref","handlePointerDown","e","jsxs","cn","XMark","ChevronDown","SelectScrollUpButton","ChevronUp","SelectScrollDownButton","SelectContent","position","SelectLabel","SelectItem","Check","SelectSeparator"],"mappings":"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"}