@trsys-tech/matrix-library 0.3.1 → 0.3.2

package/dist/multiselect.es.js

@@ -1,17 +1,14 @@
 import { jsxs as t, jsx as r, Fragment as N } from "react/jsx-runtime";
 import * as f from "react";
-import { tv as J } from "tailwind-variants";
+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 S } from "./badge.es.js";
+import { Badge as k } from "./badge.es.js";
 import { Button as Q } from "./button.es.js";
-import { CheckIcon as C } from "./checkicon.es.js";
-import { CloseIcon as j } from "./closeicon.es.js";
-import { Separator as k } from "./separator.es.js";
-import { CloseCircleIcon as T } from "./closecircleicon.es.js";
-import { ChevronDownIcon as I } from "./chevrondownicon.es.js";
-import { Popover as U, PopoverTrigger as W, PopoverContent as X } from "./popover.es.js";
-import { Command as Y, CommandInput as Z, CommandList as ee, CommandEmpty as re, CommandGroup as P, CommandItem as h, CommandSeparator as te } from "./command.es.js";
-const E = J({
+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({
   base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
   variants: {
     variant: {
@@ -24,10 +21,10 @@ const E = J({
   defaultVariants: {
     variant: "default"
   }
-}), oe = f.forwardRef(
+}), ae = f.forwardRef(
   ({
-    options: n,
-    onValueChange: s,
+    options: s,
+    onValueChange: n,
     value: g,
     variant: y,
     disabled: w,
@@ -38,64 +35,64 @@ const E = J({
     // asChild = false,
     className: B,
     moreText: K = "more",
-    clearText: _ = "Clear",
-    closeText: A = "Close",
-    selectAllText: L = "Select All",
-    noResultsText: M = "No results found.",
+    clearText: M = "Clear",
+    closeText: _ = "Close",
+    selectAllText: A = "Select All",
+    noResultsText: L = "No results found.",
     loading: m,
     loadingText: p = "Loading...",
     ...R
-  }, $) => {
-    const [o, l] = f.useState(O ?? g), [F, c] = f.useState(!1);
+  }, X) => {
+    const [a, l] = f.useState(O ?? g), [$, c] = f.useState(!1);
     f.useEffect(() => {
       l(g ?? []);
     }, [g]);
-    const G = (e) => {
+    const F = (e) => {
       if (e.key === "Enter")
         c(!0);
       else if (e.key === "Backspace" && !e.currentTarget.value) {
-        const a = [...o];
-        a.pop(), l(a), s(a);
+        const o = [...a];
+        o.pop(), l(o), n(o);
       }
     }, v = (e) => {
-      const a = o.includes(e) ? o.filter((u) => u !== e) : [...o, e];
-      l(a), s(a);
+      const o = a.includes(e) ? a.filter((u) => u !== e) : [...a, e];
+      l(o), n(o);
     }, b = () => {
-      l([]), s([]);
-    }, q = () => {
+      l([]), n([]);
+    }, G = () => {
       c((e) => !e);
+    }, q = () => {
+      const e = a.slice(0, d);
+      l(e), n(e);
     }, z = () => {
-      const e = o.slice(0, d);
-      l(e), s(e);
-    }, H = () => {
-      if (o.length === n.length)
+      if (a.length === s.length)
         b();
       else {
-        const e = n.map((a) => a.value);
-        l(e), s(e);
+        const e = s.map((o) => o.value);
+        l(e), n(e);
       }
     };
-    return /* @__PURE__ */ t(U, { open: F, onOpenChange: c, modal: V, children: [
-      /* @__PURE__ */ r(W, { asChild: !0, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ t(T, { open: $, onOpenChange: c, modal: V, children: [
+      /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(
         Q,
         {
-          ref: $,
+          ref: X,
           variant: "text",
           loading: m,
           disabled: w,
           ...R,
-          onClick: q,
+          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",
             B
           ),
-          children: /* @__PURE__ */ r(N, { children: o.length > 0 ? /* @__PURE__ */ t("div", { className: "flex justify-between items-center w-full", children: [
+          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: [
-              o.slice(0, d).map((e) => {
-                const a = n.find((x) => x.value === e), u = a?.icon;
-                return /* @__PURE__ */ t(S, { className: i(E({ variant: y }), { "text-gray-400 bg-gray-200": w || m }), 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: [
                   /* @__PURE__ */ r(
-                    j,
+                    S,
                     {
                       className: "h-4 w-4 cursor-pointer",
                       onClick: (x) => {
@@ -104,18 +101,18 @@ const E = J({
                     }
                   ),
                   u && /* @__PURE__ */ r(u, { className: "h-4 w-4 mr-2" }),
-                  a?.label
+                  o?.label
                 ] }, e);
               }),
-              o.length > d && /* @__PURE__ */ t(S, { className: i(E({ variant: y })), children: [
-                `+ ${o.length - d} ${K}`,
+              a.length > d && /* @__PURE__ */ t(k, { className: i(I({ variant: y })), children: [
+                `+ ${a.length - d} ${K}`,
                 /* @__PURE__ */ r(
-                  T,
+                  J,
                   {
                     role: "button",
                     className: "ml-2 h-4 w-4 cursor-pointer",
                     onClick: (e) => {
-                      e.stopPropagation(), z();
+                      e.stopPropagation(), q();
                     }
                   }
                 )
@@ -124,7 +121,7 @@ const E = J({
             ] }),
             /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-1", children: [
               /* @__PURE__ */ r(
-                j,
+                S,
                 {
                   role: "button",
                   className: "h-4.5 w-4.5 text-muted-foreground cursor-pointer",
@@ -134,48 +131,48 @@ const E = J({
                   "aria-label": "Clear"
                 }
               ),
-              /* @__PURE__ */ r(k, { orientation: "vertical", className: "flex min-h-5 h-full" }),
-              /* @__PURE__ */ r(I, { role: "button", "aria-label": "Expand dropdown", className: "h-5 w-5 text-muted-foreground cursor-pointer" })
+              /* @__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__ */ 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(I, { role: "button", "aria-label": "Expand dropdown", className: "h-5 w-5 text-muted-foreground cursor-pointer" })
+            /* @__PURE__ */ r(C, { role: "button", "aria-label": "Expand dropdown", className: "h-4 w-4 text-muted-foreground cursor-pointer" })
           ] }) })
         }
       ) }),
-      /* @__PURE__ */ r(X, { 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: G }),
+      /* @__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: M }),
-          /* @__PURE__ */ t(P, { children: [
-            /* @__PURE__ */ t(h, { onSelect: H, className: "cursor-pointer", children: [
+          /* @__PURE__ */ r(re, { children: L }),
+          /* @__PURE__ */ t(E, { children: [
+            /* @__PURE__ */ t(h, { 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",
-                    o.length === n.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    a.length === s.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                   ),
-                  children: /* @__PURE__ */ r(C, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ r(j, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ t("span", { children: [
                 "(",
-                L,
+                A,
                 ")"
               ] })
             ] }, "all"),
-            n.map((e) => {
-              const a = o.includes(e.value);
+            s.map((e) => {
+              const o = a.includes(e.value);
               return /* @__PURE__ */ t(h, { onSelect: () => v(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",
-                      a ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                      o ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                     ),
-                    children: /* @__PURE__ */ r(C, { className: "h-4 w-4" })
+                    children: /* @__PURE__ */ r(j, { className: "h-4 w-4" })
                   }
                 ),
                 e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
@@ -184,20 +181,20 @@ const E = J({
             })
           ] }),
           /* @__PURE__ */ r(te, {}),
-          /* @__PURE__ */ r(P, { children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            o.length > 0 && /* @__PURE__ */ t(N, { children: [
-              /* @__PURE__ */ r(h, { onSelect: b, className: "flex-1 justify-center cursor-pointer", children: _ }),
-              /* @__PURE__ */ r(k, { orientation: "vertical", className: "flex min-h-6 h-full" })
+          /* @__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(h, { onSelect: () => c(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: A })
+            /* @__PURE__ */ r(h, { onSelect: () => c(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: _ })
           ] }) })
         ] })
       ] }) })
     ] });
   }
 );
-oe.displayName = "MultiSelect";
+ae.displayName = "MultiSelect";
 export {
-  oe as MultiSelect
+  ae 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\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { CheckIcon } from \"../Icons/CheckIcon\";\r\nimport { CloseIcon } from \"../Icons/CloseIcon\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { CloseCircleIcon } from \"../Icons/CloseCircleIcon\";\r\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\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                          <CloseIcon\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                        <CloseCircleIcon\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                    <CloseIcon\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                    <ChevronDownIcon role=\"button\" aria-label=\"Expand dropdown\" className=\"h-5 w-5 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                  <ChevronDownIcon role=\"button\" aria-label=\"Expand dropdown\" className=\"h-5 w-5 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                    <CheckIcon 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                        <CheckIcon 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","CloseIcon","CloseCircleIcon","Separator","ChevronDownIcon","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CheckIcon","isSelected","CommandSeparator","Fragment"],"mappings":"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"}
+{"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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"}

package/dist/radiogroup.es.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as d from "react";
+import { Circle as t } from "@trsys-tech/matrix-icons";
 import * as r from "@radix-ui/react-radio-group";
 import { cn as s } from "./utils.es.js";
-import { CircleIcon as t } from "./circleicon.es.js";
 const m = d.forwardRef(({ className: o, ...a }, i) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", o), ...a, ref: i }));
 m.displayName = r.Root.displayName;
 const l = d.forwardRef(({ className: o, ...a }, i) => /* @__PURE__ */ e(

package/dist/radiogroup.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"radiogroup.es.js","sources":["../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\nimport type { RadioGroupProps, RadioGroupItemProps } from \"@radix-ui/react-radio-group\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { CircleIcon } from \"../Icons/CircleIcon\";\r\n\r\nconst RadioGroup = React.forwardRef<\r\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n  return <RadioGroupPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} ref={ref} />;\r\n});\r\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <RadioGroupPrimitive.Item\r\n      ref={ref}\r\n      className={cn(\r\n        \"aspect-square h-4 w-4 rounded-full border border-gray-400 data-[state=checked]:border-primary hover:border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\r\n        <CircleIcon className=\"h-2.5 w-2.5 fill-primary\" />\r\n      </RadioGroupPrimitive.Indicator>\r\n    </RadioGroupPrimitive.Item>\r\n  );\r\n});\r\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\r\n\r\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps };\r\n"],"names":["RadioGroup","React","className","props","ref","jsx","RadioGroupPrimitive","cn","RadioGroupItem","CircleIcon"],"mappings":";;;;;AASM,MAAAA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MACnB,gBAAAC,EAACC,EAAoB,MAApB,EAAyB,WAAWC,EAAG,cAAcL,CAAS,GAAI,GAAGC,GAAO,KAAAC,EAAU,CAAA,CAC/F;AACDJ,EAAW,cAAcM,EAAoB,KAAK;AAE5C,MAAAE,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAExB,gBAAAC;AAAA,EAACC,EAAoB;AAAA,EAApB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,IAEJ,UAAA,gBAAAE,EAACC,EAAoB,WAApB,EAA8B,WAAU,oCACvC,UAAC,gBAAAD,EAAAI,GAAA,EAAW,WAAU,2BAA2B,CAAA,EACnD,CAAA;AAAA,EAAA;AACF,CAEH;AACDD,EAAe,cAAcF,EAAoB,KAAK;"}
+{"version":3,"file":"radiogroup.es.js","sources":["../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Circle } from \"@trsys-tech/matrix-icons\";\r\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\r\nimport type { RadioGroupProps, RadioGroupItemProps } from \"@radix-ui/react-radio-group\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst RadioGroup = React.forwardRef<\r\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n  return <RadioGroupPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} ref={ref} />;\r\n});\r\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <RadioGroupPrimitive.Item\r\n      ref={ref}\r\n      className={cn(\r\n        \"aspect-square h-4 w-4 rounded-full border border-gray-400 data-[state=checked]:border-primary hover:border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\r\n        <Circle className=\"h-2.5 w-2.5 fill-primary\" />\r\n      </RadioGroupPrimitive.Indicator>\r\n    </RadioGroupPrimitive.Item>\r\n  );\r\n});\r\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\r\n\r\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps };\r\n"],"names":["RadioGroup","React","className","props","ref","jsx","RadioGroupPrimitive","cn","RadioGroupItem","Circle"],"mappings":";;;;;AASM,MAAAA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MACnB,gBAAAC,EAACC,EAAoB,MAApB,EAAyB,WAAWC,EAAG,cAAcL,CAAS,GAAI,GAAGC,GAAO,KAAAC,EAAU,CAAA,CAC/F;AACDJ,EAAW,cAAcM,EAAoB,KAAK;AAE5C,MAAAE,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAExB,gBAAAC;AAAA,EAACC,EAAoB;AAAA,EAApB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,IAEJ,UAAA,gBAAAE,EAACC,EAAoB,WAApB,EAA8B,WAAU,oCACvC,UAAC,gBAAAD,EAAAI,GAAA,EAAO,WAAU,2BAA2B,CAAA,EAC/C,CAAA;AAAA,EAAA;AACF,CAEH;AACDD,EAAe,cAAcF,EAAoB,KAAK;"}

package/dist/rating.es.js

@@ -2,7 +2,7 @@ import { jsxs as _, jsx as s } from "react/jsx-runtime";
 import f from "react";
 import { cn as a } from "./utils.es.js";
 import { tv as $ } from "tailwind-variants";
-import { StarIcon as C } from "./starticon.es.js";
+import { Star as C } from "@trsys-tech/matrix-icons";
 const E = $({
   base: "flex items-center gap-0",
   variants: {

package/dist/rating.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.es.js","sources":["../src/components/rating/Rating.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\nimport { StarIcon } from \"../Icons/StartIcon\";\r\n\r\nconst ratingVariants = tv({\r\n  base: \"flex items-center gap-0\",\r\n  variants: {\r\n    variant: {\r\n      default: \"text-yellow-400\",\r\n      primary: \"text-primary\",\r\n      secondary: \"text-secondary\",\r\n      success: \"text-success\",\r\n      danger: \"text-danger\",\r\n      warning: \"text-warning\",\r\n      info: \"text-info\",\r\n    },\r\n    size: {\r\n      sm: \"[&_*_svg]:h-5 [&_*_svg]:w-5\",\r\n      md: \"[&_*_svg]:h-6 [&_*_svg]:w-6\",\r\n      lg: \"[&_*_svg]:h-8 [&_*_svg]:w-8\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface RatingProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  precision?: \"half\" | \"full\";\r\n  variant?: VariantProps<typeof ratingVariants>[\"variant\"];\r\n  size?: VariantProps<typeof ratingVariants>[\"size\"];\r\n  readOnly?: boolean;\r\n  value?: number;\r\n  onValueChange?: (value: number) => void;\r\n  children?: React.ReactNode;\r\n  disabled?: boolean;\r\n  max?: number;\r\n  Icon?: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n}\r\n\r\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>((props, ref) => {\r\n  const {\r\n    precision = \"full\",\r\n    variant,\r\n    size,\r\n    readOnly = false,\r\n    onValueChange,\r\n    value: _value = 0,\r\n    className,\r\n    children,\r\n    max = 5,\r\n    Icon = StarIcon,\r\n    disabled,\r\n    ...restProps\r\n  } = props;\r\n\r\n  const [value, setValue] = React.useState(_value);\r\n  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);\r\n\r\n  const displayedValue = hoveredValue ?? value;\r\n\r\n  React.useEffect(() => {\r\n    setValue(_value);\r\n  }, [_value]);\r\n\r\n  const handleValueChange = (newValue: number) => {\r\n    if (readOnly) return;\r\n    setValue(newValue);\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  const handleHover = (newValue: number | null) => {\r\n    if (readOnly) return;\r\n    setHoveredValue(newValue);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(ratingVariants({ variant, size, className }))}\r\n      role=\"slider\"\r\n      data-value={value}\r\n      aria-valuenow={displayedValue}\r\n      aria-valuemin={0}\r\n      aria-valuemax={max}\r\n      aria-valuetext={`${displayedValue} out of ${max}`}\r\n      {...restProps}\r\n      ref={ref}\r\n    >\r\n      {Array.from({ length: max }).map((_, index) => (\r\n        <RatingItem\r\n          Icon={Icon}\r\n          index={index}\r\n          key={index}\r\n          displayedValue={displayedValue}\r\n          onHover={handleHover}\r\n          onValueChange={handleValueChange}\r\n          precision={precision}\r\n          readOnly={readOnly}\r\n          disabled={disabled}\r\n        />\r\n      ))}\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\ntype RatingItemProps = {\r\n  Icon: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n  index: number;\r\n  onHover: (value: number | null) => void;\r\n  onValueChange: (value: number) => void;\r\n  displayedValue: number;\r\n  precision: \"half\" | \"full\";\r\n  readOnly: boolean;\r\n  disabled?: boolean;\r\n};\r\n\r\nconst RatingItem = ({ Icon, index, displayedValue, onHover, onValueChange, precision, readOnly, disabled }: RatingItemProps) => {\r\n  if (precision === \"half\") {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"relative hover:scale-125 transition-transform px-0.5\",\r\n          readOnly && \"hover:scale-100\",\r\n          disabled && \"hover:scale-100 opacity-70\",\r\n        )}\r\n      >\r\n        <Icon className={cn(\"stroke-gray-500\")} />\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"absolute top-0 w-[calc(50%+2px)] left-0 overflow-hidden h-full\",\r\n            readOnly && \"cursor-default\",\r\n            disabled && \"cursor-default hover:scale-100 opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 0.5)}\r\n          onMouseEnter={() => onHover(index + 0.5)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 0.5}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"stroke-none absolute left-0.5 top-0 [mask-image:linear-gradient(to_right,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 0.5 && \"stroke-current fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"absolute top-0 w-[calc(50%+2px)] right-0 overflow-hidden h-full\",\r\n            readOnly && \"cursor-default\",\r\n            disabled && \"cursor-default hover:scale-100 opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 1)}\r\n          onMouseEnter={() => onHover(index + 1)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 1}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"stroke-none absolute right-0.5 top-0 [mask-image:linear-gradient(to_left,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 1 && \"stroke-current fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={() => onValueChange(index + 1)}\r\n      onMouseEnter={() => onHover(index + 1)}\r\n      onMouseLeave={() => onHover(null)}\r\n      className={cn(\r\n        \"hover:scale-125 px-0.5 transition-transform\",\r\n        readOnly && \"cursor-default hover:scale-100\",\r\n        disabled && \"cursor-default hover:scale-100 opacity-70\",\r\n      )}\r\n      disabled={disabled}\r\n      aria-label={`Set rating to ${index + 1}`}\r\n    >\r\n      <Icon className={cn(\"stroke-gray-500\", displayedValue >= index + 1 && \"stroke-current fill-current\")} />\r\n    </button>\r\n  );\r\n};\r\n\r\nexport { Rating, type RatingProps };\r\n"],"names":["ratingVariants","tv","Rating","React","props","ref","precision","variant","size","readOnly","onValueChange","_value","className","children","max","Icon","StarIcon","disabled","restProps","value","setValue","hoveredValue","setHoveredValue","displayedValue","handleValueChange","newValue","handleHover","jsxs","cn","_","index","jsx","RatingItem","onHover"],"mappings":"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"}
+{"version":3,"file":"rating.es.js","sources":["../src/components/rating/Rating.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\nimport { Star } from \"@trsys-tech/matrix-icons\";\r\n\r\nconst ratingVariants = tv({\r\n  base: \"flex items-center gap-0\",\r\n  variants: {\r\n    variant: {\r\n      default: \"text-yellow-400\",\r\n      primary: \"text-primary\",\r\n      secondary: \"text-secondary\",\r\n      success: \"text-success\",\r\n      danger: \"text-danger\",\r\n      warning: \"text-warning\",\r\n      info: \"text-info\",\r\n    },\r\n    size: {\r\n      sm: \"[&_*_svg]:h-5 [&_*_svg]:w-5\",\r\n      md: \"[&_*_svg]:h-6 [&_*_svg]:w-6\",\r\n      lg: \"[&_*_svg]:h-8 [&_*_svg]:w-8\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface RatingProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  precision?: \"half\" | \"full\";\r\n  variant?: VariantProps<typeof ratingVariants>[\"variant\"];\r\n  size?: VariantProps<typeof ratingVariants>[\"size\"];\r\n  readOnly?: boolean;\r\n  value?: number;\r\n  onValueChange?: (value: number) => void;\r\n  children?: React.ReactNode;\r\n  disabled?: boolean;\r\n  max?: number;\r\n  Icon?: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n}\r\n\r\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>((props, ref) => {\r\n  const {\r\n    precision = \"full\",\r\n    variant,\r\n    size,\r\n    readOnly = false,\r\n    onValueChange,\r\n    value: _value = 0,\r\n    className,\r\n    children,\r\n    max = 5,\r\n    Icon = Star,\r\n    disabled,\r\n    ...restProps\r\n  } = props;\r\n\r\n  const [value, setValue] = React.useState(_value);\r\n  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);\r\n\r\n  const displayedValue = hoveredValue ?? value;\r\n\r\n  React.useEffect(() => {\r\n    setValue(_value);\r\n  }, [_value]);\r\n\r\n  const handleValueChange = (newValue: number) => {\r\n    if (readOnly) return;\r\n    setValue(newValue);\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  const handleHover = (newValue: number | null) => {\r\n    if (readOnly) return;\r\n    setHoveredValue(newValue);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(ratingVariants({ variant, size, className }))}\r\n      role=\"slider\"\r\n      data-value={value}\r\n      aria-valuenow={displayedValue}\r\n      aria-valuemin={0}\r\n      aria-valuemax={max}\r\n      aria-valuetext={`${displayedValue} out of ${max}`}\r\n      {...restProps}\r\n      ref={ref}\r\n    >\r\n      {Array.from({ length: max }).map((_, index) => (\r\n        <RatingItem\r\n          Icon={Icon}\r\n          index={index}\r\n          key={index}\r\n          displayedValue={displayedValue}\r\n          onHover={handleHover}\r\n          onValueChange={handleValueChange}\r\n          precision={precision}\r\n          readOnly={readOnly}\r\n          disabled={disabled}\r\n        />\r\n      ))}\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\ntype RatingItemProps = {\r\n  Icon: React.JSXElementConstructor<React.SVGProps<SVGSVGElement>>;\r\n  index: number;\r\n  onHover: (value: number | null) => void;\r\n  onValueChange: (value: number) => void;\r\n  displayedValue: number;\r\n  precision: \"half\" | \"full\";\r\n  readOnly: boolean;\r\n  disabled?: boolean;\r\n};\r\n\r\nconst RatingItem = ({ Icon, index, displayedValue, onHover, onValueChange, precision, readOnly, disabled }: RatingItemProps) => {\r\n  if (precision === \"half\") {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"relative hover:scale-125 transition-transform px-0.5\",\r\n          readOnly && \"hover:scale-100\",\r\n          disabled && \"hover:scale-100 opacity-70\",\r\n        )}\r\n      >\r\n        <Icon className={cn(\"stroke-gray-500\")} />\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"absolute top-0 w-[calc(50%+2px)] left-0 overflow-hidden h-full\",\r\n            readOnly && \"cursor-default\",\r\n            disabled && \"cursor-default hover:scale-100 opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 0.5)}\r\n          onMouseEnter={() => onHover(index + 0.5)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 0.5}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"stroke-none absolute left-0.5 top-0 [mask-image:linear-gradient(to_right,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 0.5 && \"stroke-current fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          className={cn(\r\n            \"absolute top-0 w-[calc(50%+2px)] right-0 overflow-hidden h-full\",\r\n            readOnly && \"cursor-default\",\r\n            disabled && \"cursor-default hover:scale-100 opacity-70\",\r\n          )}\r\n          onClick={() => onValueChange(index + 1)}\r\n          onMouseEnter={() => onHover(index + 1)}\r\n          onMouseLeave={() => onHover(null)}\r\n          disabled={disabled}\r\n          aria-label={`Set rating to ${index + 1}`}\r\n        >\r\n          <Icon\r\n            className={cn(\r\n              \"stroke-none absolute right-0.5 top-0 [mask-image:linear-gradient(to_left,_black_50%,_transparent_50%)]\",\r\n              displayedValue >= index + 1 && \"stroke-current fill-current\",\r\n            )}\r\n          />\r\n        </button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={() => onValueChange(index + 1)}\r\n      onMouseEnter={() => onHover(index + 1)}\r\n      onMouseLeave={() => onHover(null)}\r\n      className={cn(\r\n        \"hover:scale-125 px-0.5 transition-transform\",\r\n        readOnly && \"cursor-default hover:scale-100\",\r\n        disabled && \"cursor-default hover:scale-100 opacity-70\",\r\n      )}\r\n      disabled={disabled}\r\n      aria-label={`Set rating to ${index + 1}`}\r\n    >\r\n      <Icon className={cn(\"stroke-gray-500\", displayedValue >= index + 1 && \"stroke-current fill-current\")} />\r\n    </button>\r\n  );\r\n};\r\n\r\nexport { Rating, type RatingProps };\r\n"],"names":["ratingVariants","tv","Rating","React","props","ref","precision","variant","size","readOnly","onValueChange","_value","className","children","max","Icon","Star","disabled","restProps","value","setValue","hoveredValue","setHoveredValue","displayedValue","handleValueChange","newValue","handleHover","jsxs","cn","_","index","jsx","RatingItem","onHover"],"mappings":"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"}

package/dist/select.es.js

@@ -1,25 +1,22 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import * as l from "react";
+import { XMark as x, ChevronDown as m, ChevronUp as b, Check as w } from "@trsys-tech/matrix-icons";
 import * as e from "@radix-ui/react-select";
 import { cn as s } from "./utils.es.js";
-import { CheckIcon as x } from "./checkicon.es.js";
-import { ChevronUpIcon as b } from "./chevronupicon.es.js";
-import { ChevronDownIcon as m } from "./chevrondownicon.es.js";
-import { CloseIcon as w } from "./closeicon.es.js";
 const p = l.createContext({ onClear: () => {
 }, value: void 0 }), N = ({ onValueChange: r, value: o, ...a }) => {
-  const n = () => {
+  const d = () => {
     r?.("");
   };
-  return /* @__PURE__ */ t(p.Provider, { value: { onClear: n, value: o }, children: /* @__PURE__ */ t(e.Root, { ...a, value: o, onValueChange: r }) });
+  return /* @__PURE__ */ t(p.Provider, { value: { onClear: d, value: o }, children: /* @__PURE__ */ t(e.Root, { ...a, value: o, onValueChange: r }) });
 };
 N.displayName = e.Root.displayName;
-const k = e.Group, z = e.Value, v = l.forwardRef(
-  ({ className: r, children: o, clearable: a, ...n }, i) => {
+const P = e.Group, k = e.Value, v = l.forwardRef(
+  ({ className: r, children: o, clearable: a, ...d }, i) => {
     const { onClear: h, value: c } = l.useContext(p), y = (g) => {
       g.stopPropagation();
     };
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ n(
       e.Trigger,
       {
         ref: i,
@@ -28,12 +25,12 @@ const k = e.Group, z = e.Value, v = l.forwardRef(
           r
         ),
         "data-value": c,
-        ...n,
+        ...d,
         children: [
           o,
-          /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-            a && c ? /* @__PURE__ */ t(e.Icon, { asChild: !0, onPointerDown: y, onClickCapture: h, children: /* @__PURE__ */ t(w, { className: "h-4.5 w-4.5" }) }) : null,
-            /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(m, { className: "h-5 w-5 text-primary group-data-[state=open]:rotate-180 transition-transform" }) })
+          /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+            a && c ? /* @__PURE__ */ t(e.Icon, { asChild: !0, onPointerDown: y, onClickCapture: h, children: /* @__PURE__ */ t(x, { className: "h-4.5 w-4.5" }) }) : null,
+            /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(m, { className: "h-4.5 w-4.5 text-primary group-data-[state=open]:rotate-180 transition-transform" }) })
           ] })
         ]
       }
@@ -45,7 +42,7 @@ const f = l.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(e.Scroll
 f.displayName = e.ScrollUpButton.displayName;
 const u = l.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(e.ScrollDownButton, { ref: a, className: s("flex cursor-default items-center justify-center py-1", r), ...o, children: /* @__PURE__ */ t(m, {}) }));
 u.displayName = e.ScrollDownButton.displayName;
-const S = l.forwardRef(({ className: r, children: o, position: a = "popper", ...n }, i) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ d(
+const S = l.forwardRef(({ className: r, children: o, position: a = "popper", ...d }, i) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ n(
   e.Content,
   {
     ref: i,
@@ -55,7 +52,7 @@ const S = l.forwardRef(({ className: r, children: o, position: a = "popper", ...
       r
     ),
     position: a,
-    ...n,
+    ...d,
     children: [
       /* @__PURE__ */ t(f, {}),
       /* @__PURE__ */ t(
@@ -74,36 +71,36 @@ const C = l.forwardRef(
   ({ className: r, ...o }, a) => /* @__PURE__ */ t(e.Label, { ref: a, className: s("px-2 py-1.5 text-sm font-semibold", r), ...o })
 );
 C.displayName = e.Label.displayName;
-const I = l.forwardRef(
-  ({ className: r, children: o, ...a }, n) => /* @__PURE__ */ d(
+const R = l.forwardRef(
+  ({ className: r, children: o, ...a }, d) => /* @__PURE__ */ n(
     e.Item,
     {
-      ref: n,
+      ref: d,
       className: s(
         "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",
         r
       ),
       ...a,
       children: [
-        /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(x, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(w, { className: "h-4 w-4" }) }) }),
         /* @__PURE__ */ t(e.ItemText, { children: o })
       ]
     }
   )
 );
-I.displayName = e.Item.displayName;
-const R = l.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(e.Separator, { ref: a, className: s("-mx-1 my-1 h-px bg-muted", r), ...o }));
-R.displayName = e.Separator.displayName;
+R.displayName = e.Item.displayName;
+const I = l.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(e.Separator, { ref: a, className: s("-mx-1 my-1 h-px bg-muted", r), ...o }));
+I.displayName = e.Separator.displayName;
 export {
   N as Select,
   S as SelectContent,
-  k as SelectGroup,
-  I as SelectItem,
+  P as SelectGroup,
+  R as SelectItem,
   C as SelectLabel,
   u as SelectScrollDownButton,
   f as SelectScrollUpButton,
-  R as SelectSeparator,
+  I as SelectSeparator,
   v as SelectTrigger,
-  z as SelectValue
+  k as SelectValue
 };
 //# sourceMappingURL=select.es.js.map