@trsys-tech/matrix-library 0.5.2-alpha.1 → 0.5.2-beta.1

package/dist/combobox.es.js

@@ -1,71 +1,71 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import o, { useRef as _, useEffect as A } from "react";
-import { XMark as B, ChevronDown as O, Check as T } from "@trsys-tech/matrix-icons";
-import { cn as v } from "./utils.es.js";
-import { Button as G } from "./button.es.js";
-import { Popover as M, PopoverTrigger as X, PopoverContent as q } from "./popover.es.js";
-import { Command as z, CommandInput as H, CommandList as J, CommandEmpty as Q, CommandItem as h, CommandGroup as U } from "./command.es.js";
-const ae = ({
-  onValueChange: t,
-  options: c,
-  value: u,
-  className: x,
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import t, { useRef as A, useEffect as B, useMemo as M } from "react";
+import { XMark as O, ChevronDown as G, Check as T } from "@trsys-tech/matrix-icons";
+import { cn as x } from "./utils.es.js";
+import { Button as X } from "./button.es.js";
+import { Popover as q, PopoverTrigger as z, PopoverContent as H } from "./popover.es.js";
+import { Command as J, CommandInput as Q, CommandList as U, CommandEmpty as W, CommandItem as w, CommandGroup as Y } from "./command.es.js";
+const oe = ({
+  onValueChange: o,
+  options: d,
+  value: m,
+  className: y,
   clearable: g = !1,
-  closeOnSelect: s = !0,
-  loading: d,
-  disabled: w,
-  placeholder: y = "Select an option",
-  searchText: C = "Search...",
-  noResultsText: k = "No results found",
-  loadingText: N = "Loading...",
+  closeOnSelect: i = !0,
+  loading: n,
+  disabled: C,
+  placeholder: p = "Select an option",
+  searchText: k = "Search...",
+  noResultsText: N = "No results found",
+  loadingText: b = "Loading...",
   emptyOptionsText: P = "No Items",
-  showSearchInput: p = !0,
+  showSearchInput: f = !0,
   modalPopover: L,
   ...D
 }) => {
-  const [m, l] = o.useState(!1), f = _(null), [r, i] = o.useState(u), E = o.useCallback(
+  const [v, l] = t.useState(!1), h = A(null), [r, c] = t.useState(m), E = t.useCallback(
     (e) => {
-      e.key === "Enter" ? l(!0) : e.key === "Backspace" && !e.currentTarget.value && (i(r), t?.(r), s && l(!1));
+      e.key === "Enter" ? l(!0) : e.key === "Backspace" && !e.currentTarget.value && (c(r), o?.(r), i && l(!1));
     },
-    [r, t, s]
-  ), S = o.useCallback(
+    [r, o, i]
+  ), S = t.useCallback(
     (e) => {
-      i(e), t?.(e), s && l(!1);
+      c(e), o?.(e), i && l(!1);
     },
-    [t, s]
-  ), j = o.useCallback(
+    [o, i]
+  ), j = t.useCallback(
     (e) => {
-      e.stopPropagation(), t?.(void 0), i(void 0);
+      e.stopPropagation(), o?.(void 0), c(void 0);
     },
-    [t]
-  ), I = o.useCallback((e, K, R = [""]) => R.join("").toLocaleLowerCase().includes(K.toLocaleLowerCase()) ? 1 : 0, []), F = o.useCallback(
+    [o]
+  ), I = t.useCallback((e, R, _ = [""]) => _.join("").toLocaleLowerCase().includes(R.toLocaleLowerCase()) ? 1 : 0, []), F = t.useCallback(
     (e) => {
-      p || (e.preventDefault(), f.current?.focus());
+      f || (e.preventDefault(), h.current?.focus());
     },
-    [p]
+    [f]
   );
-  A(() => {
-    i(u);
-  }, [u]);
-  const b = r === void 0 || r === "";
-  return /* @__PURE__ */ n(M, { open: m, onOpenChange: l, modal: L, children: [
-    /* @__PURE__ */ a(X, { asChild: !0, children: /* @__PURE__ */ n(
-      G,
+  B(() => {
+    c(m);
+  }, [m]);
+  const u = r === void 0 || r === "", K = M(() => u && n ? b : u ? p : d.find((e) => e.value === r)?.label || p, [u, r, d, p, n, b]);
+  return /* @__PURE__ */ s(q, { open: v, onOpenChange: l, modal: L, children: [
+    /* @__PURE__ */ a(z, { asChild: !0, children: /* @__PURE__ */ s(
+      X,
       {
         variant: "text",
         role: "combobox",
         type: "button",
-        "aria-expanded": m,
-        className: v(
+        "aria-expanded": v,
+        className: x(
           "group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs 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 [&_svg]:disabled:text-text-300",
-          x
+          y
         ),
         "data-value": r,
-        "data-placeholder": b ? "" : void 0,
-        loading: d,
-        disabled: w,
+        "data-placeholder": u ? "" : void 0,
+        loading: n,
+        disabled: C,
         endIcon: /* @__PURE__ */ a(
-          O,
+          G,
           {
             role: "button",
             "aria-label": "Expand dropdown",
@@ -74,7 +74,7 @@ const ae = ({
         ),
         ...D,
         children: [
-          /* @__PURE__ */ a("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: b ? d ? N : y : c.find((e) => e.value === r)?.label }),
+          /* @__PURE__ */ a("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: K }),
           g && r !== void 0 && r !== null ? /* @__PURE__ */ a(
             "span",
             {
@@ -82,33 +82,33 @@ const ae = ({
               className: "p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5",
               role: "button",
               "aria-label": "Clear selection",
-              children: /* @__PURE__ */ a(B, {})
+              children: /* @__PURE__ */ a(O, {})
             }
           ) : null
         ]
       }
     ) }),
-    /* @__PURE__ */ a(q, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => l(!1), onOpenAutoFocus: F, children: /* @__PURE__ */ n(
-      z,
+    /* @__PURE__ */ a(H, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => l(!1), onOpenAutoFocus: F, children: /* @__PURE__ */ s(
+      J,
       {
         className: "w-[--radix-popper-anchor-width] focus-visible:outline-none",
         filter: I,
         defaultValue: r != null ? String(r) : void 0,
-        ref: f,
+        ref: h,
         children: [
-          p && /* @__PURE__ */ a(H, { placeholder: C, onKeyDown: E }),
-          /* @__PURE__ */ n(J, { children: [
-            !d && /* @__PURE__ */ a(Q, { children: k }),
-            !d && !c.length ? /* @__PURE__ */ a(h, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: P }) : null,
-            /* @__PURE__ */ a(U, { children: c.map((e) => /* @__PURE__ */ n(
-              h,
+          f && /* @__PURE__ */ a(Q, { placeholder: k, onKeyDown: E }),
+          /* @__PURE__ */ s(U, { children: [
+            !n && /* @__PURE__ */ a(W, { children: N }),
+            !n && !d.length ? /* @__PURE__ */ a(w, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: P }) : null,
+            /* @__PURE__ */ a(Y, { children: d.map((e) => /* @__PURE__ */ s(
+              w,
               {
                 value: e.value,
-                keywords: [e.label],
+                keywords: "keyword" in e ? [e.keyword] : [e.label],
                 onSelect: S,
                 children: [
                   e.label,
-                  /* @__PURE__ */ a(T, { className: v("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
+                  /* @__PURE__ */ a(T, { className: x("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
                 ]
               },
               String(e.value)
@@ -120,6 +120,6 @@ const ae = ({
   ] });
 };
 export {
-  ae as Combobox
+  oe as Combobox
 };
 //# sourceMappingURL=combobox.es.js.map

package/dist/combobox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useRef } from \"react\";\r\nimport { Check, ChevronDown, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../command/Command\";\r\n\r\ntype ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonElement> & {\r\n  /**\r\n   * The options to display in the combobox.\r\n   * Each option should have a label and a value.\r\n   * The label is what is displayed in the combobox.\r\n   * The value is what is returned when the option is selected.\r\n   */\r\n  options: { label: string; value: T }[];\r\n\r\n  /**\r\n   * The value of the combobox.\r\n   */\r\n  value?: T;\r\n\r\n  /**\r\n   * A function that is called when the value of the combobox changes.\r\n   */\r\n  onValueChange?: (value: T) => void;\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * @default \"Select an option\"\r\n   */\r\n  placeholder?: string;\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\r\n   * @default false\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * The text to display in the search input.\r\n   * @default \"Search...\"\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * The text to display when no results are found.\r\n   * @default \"No results found\"\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * Whether the popover should close when an option is selected.\r\n   * @default true\r\n   */\r\n  closeOnSelect?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is loading.\r\n   * @default false\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is disabled.\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The text to display when the combobox is loading.\r\n   * @default \"Loading...\"\r\n   */\r\n  loadingText?: string;\r\n\r\n  /**\r\n   * The text to display when there are no options.\r\n   * @default \"No Items\"\r\n   */\r\n  emptyOptionsText?: string;\r\n\r\n  /**\r\n   * Whether to show the search input.\r\n   * @default true\r\n   */\r\n  showSearchInput?: boolean;\r\n\r\n  /**\r\n   * Whether to show the clear button.\r\n   * @default false\r\n   */\r\n  clearable?: boolean;\r\n};\r\n\r\nconst Combobox = <T extends string | number>({\r\n  onValueChange,\r\n  options,\r\n  value,\r\n  className,\r\n  clearable = false,\r\n  closeOnSelect = true,\r\n  loading,\r\n  disabled,\r\n  placeholder = \"Select an option\",\r\n  searchText = \"Search...\",\r\n  noResultsText = \"No results found\",\r\n  loadingText = \"Loading...\",\r\n  emptyOptionsText = \"No Items\",\r\n  showSearchInput = true,\r\n  modalPopover,\r\n  ...props\r\n}: ComboboxProps<T>) => {\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const commandRef = useRef<HTMLDivElement>(null);\r\n\r\n  const [currentSelectedValue, setCurrentSelectedValue] = React.useState<T | undefined>(value);\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (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        setCurrentSelectedValue(currentSelectedValue);\r\n        onValueChange?.(currentSelectedValue!);\r\n        if (closeOnSelect) setIsPopoverOpen(false);\r\n      }\r\n    },\r\n    [currentSelectedValue, onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: T) => {\r\n      setCurrentSelectedValue(currentValue);\r\n      onValueChange?.(currentValue);\r\n      if (closeOnSelect) setIsPopoverOpen(false);\r\n    },\r\n    [onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleClear = React.useCallback(\r\n    (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onValueChange?.(undefined as unknown as T);\r\n      setCurrentSelectedValue(undefined);\r\n    },\r\n    [onValueChange],\r\n  );\r\n\r\n  const handleFilter = React.useCallback((value: string, search: string, keywords: string[] = [\"\"]) => {\r\n    return keywords.join(\"\").toLocaleLowerCase().includes(search.toLocaleLowerCase()) ? 1 : 0;\r\n  }, []);\r\n\r\n  // when search input is not shown, we need to focus on the command manually to enable keyboard navigation\r\n  const handleOpenAutoFocus = React.useCallback(\r\n    (e: Event) => {\r\n      if (!showSearchInput) {\r\n        e.preventDefault();\r\n        commandRef.current?.focus();\r\n      }\r\n    },\r\n    [showSearchInput],\r\n  );\r\n\r\n  useEffect(() => {\r\n    setCurrentSelectedValue(value);\r\n  }, [value]);\r\n\r\n  const showPlaceholder = currentSelectedValue === undefined || currentSelectedValue === \"\";\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          role=\"combobox\"\r\n          type=\"button\"\r\n          aria-expanded={isPopoverOpen}\r\n          className={cn(\r\n            \"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs 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 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-value={currentSelectedValue}\r\n          data-placeholder={showPlaceholder ? \"\" : undefined}\r\n          loading={loading}\r\n          disabled={disabled}\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 ms-auto\"\r\n            />\r\n          }\r\n          {...props}\r\n        >\r\n          <span className=\"text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]\">\r\n            {!showPlaceholder ? options.find(option => option.value === currentSelectedValue)?.label : loading ? loadingText : placeholder}\r\n          </span>\r\n          {clearable && currentSelectedValue !== undefined && currentSelectedValue !== null ? (\r\n            <span\r\n              onClick={handleClear}\r\n              className=\"p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5\"\r\n              role=\"button\"\r\n              aria-label=\"Clear selection\"\r\n            >\r\n              <XMark />\r\n            </span>\r\n          ) : null}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)} onOpenAutoFocus={handleOpenAutoFocus}>\r\n        <Command\r\n          className=\"w-[--radix-popper-anchor-width] focus-visible:outline-none\"\r\n          filter={handleFilter}\r\n          defaultValue={currentSelectedValue !== undefined && currentSelectedValue !== null ? String(currentSelectedValue) : undefined} // highlight selected value on open\r\n          ref={commandRef}\r\n        >\r\n          {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n          <CommandList>\r\n            {!loading && <CommandEmpty>{noResultsText}</CommandEmpty>}\r\n            {!loading && !options.length ? (\r\n              <CommandItem value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\" disabled>\r\n                {emptyOptionsText}\r\n              </CommandItem>\r\n            ) : null}\r\n            <CommandGroup>\r\n              {options.map(option => (\r\n                <CommandItem\r\n                  key={String(option.value)}\r\n                  value={option.value}\r\n                  keywords={[option.label]}\r\n                  onSelect={handleSelect as React.ComponentProps<typeof CommandItem>[\"onSelect\"]}\r\n                >\r\n                  {option.label}\r\n                  <Check className={cn(\"ml-auto\", currentSelectedValue === option.value ? \"opacity-100\" : \"opacity-0\")} />\r\n                </CommandItem>\r\n              ))}\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { Combobox, type ComboboxProps };\r\n"],"names":["Combobox","onValueChange","options","value","className","clearable","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","modalPopover","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","option","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":";;;;;;;AAkGA,MAAMA,KAAW,CAA4B;AAAA,EAC3C,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,kBAAAC,IAAmB;AAAA,EACnB,iBAAAC,IAAkB;AAAA,EAClB,cAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAM,SAAS,EAAK,GACxDC,IAAaC,EAAuB,IAAI,GAExC,CAACC,GAAsBC,CAAuB,IAAIJ,EAAM,SAAwBhB,CAAK,GAErFqB,IAAqBL,EAAM;AAAA,IAC/B,CAACM,MAAiD;AAChD,MAAIA,EAAM,QAAQ,UAChBP,EAAiB,EAAI,IACZO,EAAM,QAAQ,eAAe,CAACA,EAAM,cAAc,UAC3DF,EAAwBD,CAAoB,GAC5CrB,IAAgBqB,CAAqB,GACjChB,OAAgC,EAAK;AAAA,IAE7C;AAAA,IACA,CAACgB,GAAsBrB,GAAeK,CAAa;AAAA,EAAA,GAG/CoB,IAAeP,EAAM;AAAA,IACzB,CAACQ,MAAoB;AACnB,MAAAJ,EAAwBI,CAAY,GACpC1B,IAAgB0B,CAAY,GACxBrB,OAAgC,EAAK;AAAA,IAC3C;AAAA,IACA,CAACL,GAAeK,CAAa;AAAA,EAAA,GAGzBsB,IAAcT,EAAM;AAAA,IACxB,CAAC,MAAwB;AACvB,QAAE,gBAAA,GACFlB,IAAgB,MAAyB,GACzCsB,EAAwB,MAAS;AAAA,IACnC;AAAA,IACA,CAACtB,CAAa;AAAA,EAAA,GAGV4B,IAAeV,EAAM,YAAY,CAAChB,GAAe2B,GAAgBC,IAAqB,CAAC,EAAE,MACtFA,EAAS,KAAK,EAAE,EAAE,kBAAA,EAAoB,SAASD,EAAO,mBAAmB,IAAI,IAAI,GACvF,CAAA,CAAE,GAGCE,IAAsBb,EAAM;AAAA,IAChC,CAAC,MAAa;AACZ,MAAKL,MACH,EAAE,eAAA,GACFM,EAAW,SAAS,MAAA;AAAA,IAExB;AAAA,IACA,CAACN,CAAe;AAAA,EAAA;AAGlB,EAAAmB,EAAU,MAAM;AACd,IAAAV,EAAwBpB,CAAK;AAAA,EAC/B,GAAG,CAACA,CAAK,CAAC;AAEV,QAAM+B,IAAkBZ,MAAyB,UAAaA,MAAyB;AAEvF,2BACGa,GAAA,EAAQ,MAAMlB,GAAe,cAAcC,GAAkB,OAAOH,GACnE,UAAA;AAAA,IAAA,gBAAAqB,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAetB;AAAA,QACf,WAAWuB;AAAA,UACT;AAAA,UACApC;AAAA,QAAA;AAAA,QAEF,cAAYkB;AAAA,QACZ,oBAAkBY,IAAkB,KAAK;AAAA,QACzC,SAAA3B;AAAA,QACA,UAAAC;AAAA,QACA,SACE,gBAAA4B;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGb,GAAGzB;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAoB,EAAC,QAAA,EAAK,WAAU,6FACb,UAACF,IAAyF3B,IAAUK,IAAcH,IAA/FP,EAAQ,KAAK,CAAAwC,MAAUA,EAAO,UAAUpB,CAAoB,GAAG,OACrF;AAAA,UACCjB,KAAaiB,MAAyB,UAAaA,MAAyB,OAC3E,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASR;AAAA,cACT,WAAU;AAAA,cACV,MAAK;AAAA,cACL,cAAW;AAAA,cAEX,4BAACe,GAAA,CAAA,CAAM;AAAA,YAAA;AAAA,UAAA,IAEP;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAe,WAAU,cAAa,OAAM,SAAQ,iBAAiB,MAAM1B,EAAiB,EAAK,GAAG,iBAAiBc,GACpH,UAAA,gBAAAM;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,QAAQhB;AAAA,QACR,cAAoDP,KAAyB,OAAO,OAAOA,CAAoB,IAAI;AAAA,QACnH,KAAKF;AAAA,QAEJ,UAAA;AAAA,UAAAN,KAAmB,gBAAAsB,EAACU,GAAA,EAAa,aAAapC,GAAY,WAAWc,GAAoB;AAAA,4BACzFuB,GAAA,EACE,UAAA;AAAA,YAAA,CAACxC,KAAW,gBAAA6B,EAACY,GAAA,EAAc,UAAArC,EAAA,CAAc;AAAA,YACzC,CAACJ,KAAW,CAACL,EAAQ,SACpB,gBAAAkC,EAACa,GAAA,EAAY,OAAM,qEAAoE,UAAQ,IAC5F,UAAApC,EAAA,CACH,IACE;AAAA,YACJ,gBAAAuB,EAACc,GAAA,EACE,UAAAhD,EAAQ,IAAI,CAAAwC,MACX,gBAAAJ;AAAA,cAACW;AAAA,cAAA;AAAA,gBAEC,OAAOP,EAAO;AAAA,gBACd,UAAU,CAACA,EAAO,KAAK;AAAA,gBACvB,UAAUhB;AAAA,gBAET,UAAA;AAAA,kBAAAgB,EAAO;AAAA,kBACR,gBAAAN,EAACe,GAAA,EAAM,WAAWX,EAAG,WAAWlB,MAAyBoB,EAAO,QAAQ,gBAAgB,WAAW,EAAA,CAAG;AAAA,gBAAA;AAAA,cAAA;AAAA,cANjG,OAAOA,EAAO,KAAK;AAAA,YAAA,CAQ3B,EAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useMemo, useRef } from \"react\";\r\nimport { Check, ChevronDown, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../command/Command\";\r\n\r\ntype ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonElement> & {\r\n  /**\r\n   * The options to display in the combobox.\r\n   * Each option should have a label and a value.\r\n   * The label is what is displayed in the combobox.\r\n   * The value is what is returned when the option is selected.\r\n   */\r\n  options: ({ label: string; value: T } | { label: React.ReactElement; value: T; keyword: string })[];\r\n\r\n  /**\r\n   * The value of the combobox.\r\n   */\r\n  value?: T;\r\n\r\n  /**\r\n   * A function that is called when the value of the combobox changes.\r\n   */\r\n  onValueChange?: (value: T) => void;\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * @default \"Select an option\"\r\n   */\r\n  placeholder?: string;\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\r\n   * @default false\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * The text to display in the search input.\r\n   * @default \"Search...\"\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * The text to display when no results are found.\r\n   * @default \"No results found\"\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * Whether the popover should close when an option is selected.\r\n   * @default true\r\n   */\r\n  closeOnSelect?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is loading.\r\n   * @default false\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is disabled.\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The text to display when the combobox is loading.\r\n   * @default \"Loading...\"\r\n   */\r\n  loadingText?: string;\r\n\r\n  /**\r\n   * The text to display when there are no options.\r\n   * @default \"No Items\"\r\n   */\r\n  emptyOptionsText?: string;\r\n\r\n  /**\r\n   * Whether to show the search input.\r\n   * @default true\r\n   */\r\n  showSearchInput?: boolean;\r\n\r\n  /**\r\n   * Whether to show the clear button.\r\n   * @default false\r\n   */\r\n  clearable?: boolean;\r\n};\r\n\r\nconst Combobox = <T extends string | number>({\r\n  onValueChange,\r\n  options,\r\n  value,\r\n  className,\r\n  clearable = false,\r\n  closeOnSelect = true,\r\n  loading,\r\n  disabled,\r\n  placeholder = \"Select an option\",\r\n  searchText = \"Search...\",\r\n  noResultsText = \"No results found\",\r\n  loadingText = \"Loading...\",\r\n  emptyOptionsText = \"No Items\",\r\n  showSearchInput = true,\r\n  modalPopover,\r\n  ...props\r\n}: ComboboxProps<T>) => {\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const commandRef = useRef<HTMLDivElement>(null);\r\n\r\n  const [currentSelectedValue, setCurrentSelectedValue] = React.useState<T | undefined>(value);\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (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        setCurrentSelectedValue(currentSelectedValue);\r\n        onValueChange?.(currentSelectedValue!);\r\n        if (closeOnSelect) setIsPopoverOpen(false);\r\n      }\r\n    },\r\n    [currentSelectedValue, onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: T) => {\r\n      setCurrentSelectedValue(currentValue);\r\n      onValueChange?.(currentValue);\r\n      if (closeOnSelect) setIsPopoverOpen(false);\r\n    },\r\n    [onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleClear = React.useCallback(\r\n    (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onValueChange?.(undefined as unknown as T);\r\n      setCurrentSelectedValue(undefined);\r\n    },\r\n    [onValueChange],\r\n  );\r\n\r\n  const handleFilter = React.useCallback((value: string, search: string, keywords: string[] = [\"\"]) => {\r\n    return keywords.join(\"\").toLocaleLowerCase().includes(search.toLocaleLowerCase()) ? 1 : 0;\r\n  }, []);\r\n\r\n  // when search input is not shown, we need to focus on the command manually to enable keyboard navigation\r\n  const handleOpenAutoFocus = React.useCallback(\r\n    (e: Event) => {\r\n      if (!showSearchInput) {\r\n        e.preventDefault();\r\n        commandRef.current?.focus();\r\n      }\r\n    },\r\n    [showSearchInput],\r\n  );\r\n\r\n  useEffect(() => {\r\n    setCurrentSelectedValue(value);\r\n  }, [value]);\r\n\r\n  const showPlaceholder = currentSelectedValue === undefined || currentSelectedValue === \"\";\r\n\r\n  const label = useMemo(() => {\r\n    if (showPlaceholder && loading) return loadingText;\r\n    if (showPlaceholder) return placeholder;\r\n    return options.find(option => option.value === currentSelectedValue)?.label || placeholder;\r\n  }, [showPlaceholder, currentSelectedValue, options, placeholder, loading, loadingText]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          role=\"combobox\"\r\n          type=\"button\"\r\n          aria-expanded={isPopoverOpen}\r\n          className={cn(\r\n            \"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs 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 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-value={currentSelectedValue}\r\n          data-placeholder={showPlaceholder ? \"\" : undefined}\r\n          loading={loading}\r\n          disabled={disabled}\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 ms-auto\"\r\n            />\r\n          }\r\n          {...props}\r\n        >\r\n          <span className=\"text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]\">{label}</span>\r\n          {clearable && currentSelectedValue !== undefined && currentSelectedValue !== null ? (\r\n            <span\r\n              onClick={handleClear}\r\n              className=\"p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5\"\r\n              role=\"button\"\r\n              aria-label=\"Clear selection\"\r\n            >\r\n              <XMark />\r\n            </span>\r\n          ) : null}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)} onOpenAutoFocus={handleOpenAutoFocus}>\r\n        <Command\r\n          className=\"w-[--radix-popper-anchor-width] focus-visible:outline-none\"\r\n          filter={handleFilter}\r\n          defaultValue={currentSelectedValue !== undefined && currentSelectedValue !== null ? String(currentSelectedValue) : undefined} // highlight selected value on open\r\n          ref={commandRef}\r\n        >\r\n          {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n          <CommandList>\r\n            {!loading && <CommandEmpty>{noResultsText}</CommandEmpty>}\r\n            {!loading && !options.length ? (\r\n              <CommandItem value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\" disabled>\r\n                {emptyOptionsText}\r\n              </CommandItem>\r\n            ) : null}\r\n            <CommandGroup>\r\n              {options.map(option => (\r\n                <CommandItem\r\n                  key={String(option.value)}\r\n                  value={option.value}\r\n                  keywords={\"keyword\" in option ? [option.keyword] : [option.label]}\r\n                  onSelect={handleSelect as React.ComponentProps<typeof CommandItem>[\"onSelect\"]}\r\n                >\r\n                  {option.label}\r\n                  <Check className={cn(\"ml-auto\", currentSelectedValue === option.value ? \"opacity-100\" : \"opacity-0\")} />\r\n                </CommandItem>\r\n              ))}\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { Combobox, type ComboboxProps };\r\n"],"names":["Combobox","onValueChange","options","value","className","clearable","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","modalPopover","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","label","useMemo","option","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":"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"}

package/dist/components/combobox/Combobox.d.ts

@@ -6,10 +6,14 @@ type ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonE
      * The label is what is displayed in the combobox.
      * The value is what is returned when the option is selected.
      */
-    options: {
+    options: ({
         label: string;
         value: T;
-    }[];
+    } | {
+        label: React.ReactElement;
+        value: T;
+        keyword: string;
+    })[];
     /**
      * The value of the combobox.
      */

package/dist/components/combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxF;;;;;OAKG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAA;KAAE,EAAE,CAAC;IAEvC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,6MAiBxC,aAAa,CAAC,CAAC,CAAC,4CAmIlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAQ1D,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxF;;;;;OAKG;IACH,OAAO,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAEpG;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,6MAiBxC,aAAa,CAAC,CAAC,CAAC,4CAuIlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}

package/dist/components/form-combobox/FormCombobox.d.ts

@@ -3,10 +3,7 @@ import { FormItem } from '../form/Form';
 import { Combobox } from '../combobox/Combobox';
 type FormComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, "render"> & React.ComponentProps<typeof FormItem> & {
     label: string;
-    options: {
-        value: string | number;
-        label: string;
-    }[];
+    options: React.ComponentProps<typeof Combobox>["options"];
     loading?: boolean;
     loadingText?: string;
     emptyOptionsText?: string;

package/dist/components/form-combobox/FormCombobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCombobox.d.ts","sourceRoot":"","sources":["../../../src/components/form-combobox/FormCombobox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,KAAK,iBAAiB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CAC9H,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,aAAa,CAAC,EAAE,IAAI,CAClB,KAAK,CAAC,wBAAwB,CAAC,OAAO,QAAQ,CAAC,EAC/C,SAAS,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,GAAG,aAAa,GAAG,kBAAkB,GAAG,aAAa,GAAG,UAAU,GAAG,iBAAiB,CACxI,CAAC;KACH,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,YAAY,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,mCACpF,iBAAiB,CAAC,YAAY,EAAE,KAAK,CAAC,4CA4D9C,CAAC;AACF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"FormCombobox.d.ts","sourceRoot":"","sources":["../../../src/components/form-combobox/FormCombobox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,KAAK,iBAAiB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CAC9H,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,aAAa,CAAC,EAAE,IAAI,CAClB,KAAK,CAAC,wBAAwB,CAAC,OAAO,QAAQ,CAAC,EAC/C,SAAS,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,GAAG,aAAa,GAAG,kBAAkB,GAAG,aAAa,GAAG,UAAU,GAAG,iBAAiB,CACxI,CAAC;KACH,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,YAAY,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,mCACpF,iBAAiB,CAAC,YAAY,EAAE,KAAK,CAAC,4CA4D9C,CAAC;AACF,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC"}

package/dist/components/multi-select/MultiSelect.d.ts

@@ -118,6 +118,15 @@ interface MultiSelectProps<T extends string | number> extends Omit<React.ButtonH
      * Text to display on the select all button when the multi-select component is open.
      */
     selectAllText?: string;
+    /**
+     * Text to display in the search input.
+     */
+    searchText?: string;
+    /**
+     * If true, a new option will be added when the user submits a search query if it doesn't already exist.
+     * Optional, defaults to false.
+     */
+    addOptionOnSearchNotFound?: boolean;
     /**
      * Text to display on the clear button when the multi-select component is open.
      */

package/dist/components/multi-select/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;OAGG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgOD,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;OAGG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuPD,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

package/dist/formcombobox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formcombobox.es.js","sources":["../src/components/form-combobox/FormCombobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { Combobox } from \"../combobox/Combobox\";\r\n\r\ntype FormComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    options: { value: string | number; label: string }[];\r\n    loading?: boolean;\r\n    loadingText?: string;\r\n    emptyOptionsText?: string;\r\n    showSearchInput?: boolean;\r\n    clearable?: boolean;\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      comboboxProps?: Omit<\r\n        React.ComponentPropsWithoutRef<typeof Combobox>,\r\n        \"options\" | \"value\" | \"onValueChange\" | \"loading\" | \"loadingText\" | \"emptyOptionsText\" | \"placeholder\" | \"disabled\" | \"showSearchInput\"\r\n      >;\r\n    };\r\n  };\r\n\r\nconst FormCombobox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n  props: FormComboboxProps<TFieldValues, TName>,\r\n) => {\r\n  const {\r\n    name,\r\n    control,\r\n    clearable = false,\r\n    defaultValue,\r\n    disabled,\r\n    readOnly,\r\n    rules,\r\n    shouldUnregister,\r\n    label,\r\n    options,\r\n    loading,\r\n    loadingText,\r\n    emptyOptionsText,\r\n    showSearchInput,\r\n    placeholder,\r\n    slotProps,\r\n    required,\r\n    ...formItemProps\r\n  } = props;\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl>\r\n              <Combobox\r\n                options={options}\r\n                value={field.value}\r\n                onValueChange={field.onChange}\r\n                loading={loading}\r\n                loadingText={loadingText}\r\n                emptyOptionsText={emptyOptionsText}\r\n                placeholder={placeholder}\r\n                disabled={disabled || readOnly}\r\n                showSearchInput={showSearchInput}\r\n                clearable={clearable}\r\n                {...(slotProps?.comboboxProps ?? {})}\r\n              />\r\n            </FormControl>\r\n\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCombobox, type FormComboboxProps };\r\n"],"names":["FormCombobox","props","name","control","clearable","defaultValue","disabled","readOnly","rules","shouldUnregister","label","options","loading","loadingText","emptyOptionsText","showSearchInput","placeholder","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","Combobox","FormMessage"],"mappings":";;;AAgCA,MAAMA,IAAe,CACnBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDlB;AAEJ,SACE,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAlB;AAAA,MACA,MAAAD;AAAA,MACA,cAAAG;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAa,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAP;AAAA,UACAQ,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCM,GAAA,EACC,UAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,SAAAhB;AAAA,YACA,OAAOW,EAAM;AAAA,YACb,eAAeA,EAAM;AAAA,YACrB,SAAAV;AAAA,YACA,aAAAC;AAAA,YACA,kBAAAC;AAAA,YACA,aAAAE;AAAA,YACA,UAAUV,KAAYC;AAAA,YACtB,iBAAAQ;AAAA,YACA,WAAAX;AAAA,YACC,GAAIa,GAAW,iBAAiB,CAAA;AAAA,UAAC;AAAA,QAAA,GAEtC;AAAA,0BAECW,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"formcombobox.es.js","sources":["../src/components/form-combobox/FormCombobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { Combobox } from \"../combobox/Combobox\";\r\n\r\ntype FormComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    options: React.ComponentProps<typeof Combobox>[\"options\"];\r\n    loading?: boolean;\r\n    loadingText?: string;\r\n    emptyOptionsText?: string;\r\n    showSearchInput?: boolean;\r\n    clearable?: boolean;\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n      comboboxProps?: Omit<\r\n        React.ComponentPropsWithoutRef<typeof Combobox>,\r\n        \"options\" | \"value\" | \"onValueChange\" | \"loading\" | \"loadingText\" | \"emptyOptionsText\" | \"placeholder\" | \"disabled\" | \"showSearchInput\"\r\n      >;\r\n    };\r\n  };\r\n\r\nconst FormCombobox = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n  props: FormComboboxProps<TFieldValues, TName>,\r\n) => {\r\n  const {\r\n    name,\r\n    control,\r\n    clearable = false,\r\n    defaultValue,\r\n    disabled,\r\n    readOnly,\r\n    rules,\r\n    shouldUnregister,\r\n    label,\r\n    options,\r\n    loading,\r\n    loadingText,\r\n    emptyOptionsText,\r\n    showSearchInput,\r\n    placeholder,\r\n    slotProps,\r\n    required,\r\n    ...formItemProps\r\n  } = props;\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl>\r\n              <Combobox\r\n                options={options}\r\n                value={field.value}\r\n                onValueChange={field.onChange}\r\n                loading={loading}\r\n                loadingText={loadingText}\r\n                emptyOptionsText={emptyOptionsText}\r\n                placeholder={placeholder}\r\n                disabled={disabled || readOnly}\r\n                showSearchInput={showSearchInput}\r\n                clearable={clearable}\r\n                {...(slotProps?.comboboxProps ?? {})}\r\n              />\r\n            </FormControl>\r\n\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormCombobox, type FormComboboxProps };\r\n"],"names":["FormCombobox","props","name","control","clearable","defaultValue","disabled","readOnly","rules","shouldUnregister","label","options","loading","loadingText","emptyOptionsText","showSearchInput","placeholder","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","Combobox","FormMessage"],"mappings":";;;AAgCA,MAAMA,IAAe,CACnBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDlB;AAEJ,SACE,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAlB;AAAA,MACA,MAAAD;AAAA,MACA,cAAAG;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAa,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAP;AAAA,UACAQ,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCM,GAAA,EACC,UAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,SAAAhB;AAAA,YACA,OAAOW,EAAM;AAAA,YACb,eAAeA,EAAM;AAAA,YACrB,SAAAV;AAAA,YACA,aAAAC;AAAA,YACA,kBAAAC;AAAA,YACA,aAAAE;AAAA,YACA,UAAUV,KAAYC;AAAA,YACtB,iBAAAQ;AAAA,YACA,WAAAX;AAAA,YACC,GAAIa,GAAW,iBAAiB,CAAA;AAAA,UAAC;AAAA,QAAA,GAEtC;AAAA,0BAECW,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/multiselect.es.js

@@ -1,14 +1,14 @@
-import { jsxs as a, jsx as r, Fragment as w } from "react/jsx-runtime";
-import * as s from "react";
-import { tv as H } from "tailwind-variants";
-import { XMark as k, CircleXmark as J, ChevronDown 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 M = H({
+import { jsxs as s, jsx as r, Fragment as w } from "react/jsx-runtime";
+import * as o from "react";
+import { tv as ee } from "tailwind-variants";
+import { XMark as P, CircleXmark as re, ChevronDown as te, Check as E } from "@trsys-tech/matrix-icons";
+import { cn as u } from "./utils.es.js";
+import { Badge as M } from "./badge.es.js";
+import { Button as ae } from "./button.es.js";
+import { Separator as I } from "./separator.es.js";
+import { Popover as se, PopoverTrigger as oe, PopoverContent as le } from "./popover.es.js";
+import { Command as ne, CommandInput as ce, CommandList as ie, CommandEmpty as de, CommandGroup as O, CommandItem as g, CommandSeparator as ue } from "./command.es.js";
+const V = ee({
   base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
   variants: {
     variant: {
@@ -21,165 +21,178 @@ const M = H({
   defaultVariants: {
     variant: "default"
   }
-}), le = ({
-  options: n,
+}), me = ({
+  options: b,
   onValueChange: c,
-  value: b,
+  value: y,
   variant: x,
   disabled: N,
-  defaultValue: O = [],
-  placeholder: D = "Select options",
+  defaultValue: D = [],
+  placeholder: T = "Select options",
   maxCount: m = 3,
-  modalPopover: R = !1,
+  modalPopover: A = !1,
   // asChild = false,
-  className: V,
+  className: R,
   moreText: B = "more",
   clearText: K = "Clear",
   closeText: L = "Close",
-  selectAllText: _ = "Select All",
-  noResultsText: A = "No results found.",
+  selectAllText: z = "Select All",
+  noResultsText: F = "No results found.",
+  searchText: W = "Search...",
+  addOptionOnSearchNotFound: X = !1,
   loading: p,
-  loadingText: u = "Loading...",
-  ...F
-}, T) => {
-  const [t, l] = s.useState(O ?? b), [W, i] = s.useState(!1), f = s.useRef(null), [X, S] = s.useState(!1);
-  s.useEffect(() => {
-    l(b ?? []);
-  }, [b]);
-  const $ = (e) => {
-    if (e.key === "Enter")
+  loadingText: f = "Loading...",
+  ...$
+}, G) => {
+  const [t, n] = o.useState(D ?? y), [_, i] = o.useState(!1), h = o.useRef(null), [q, S] = o.useState(""), [H, C] = o.useState(!1), [d, k] = o.useState(
+    new Map(b.map((e) => [e.value, e]))
+  );
+  o.useEffect(() => {
+    k(new Map(b.map((e) => [e.value, e])));
+  }, [b]), o.useEffect(() => {
+    n(y ?? []);
+  }, [y]);
+  const J = (e) => {
+    if (e.key === "Enter" && X) {
+      if (i(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
+      const a = { value: e.currentTarget.value, label: e.currentTarget.value };
+      if (k((l) => new Map(l).set(a.value, a)), d.get(a.value) === void 0) {
+        const l = [...t, a.value];
+        n(l), c(l), S("");
+      }
+    } else if (e.key === "Enter")
       i(!0);
     else if (e.key === "Backspace" && !e.currentTarget.value) {
-      const o = [...t];
-      o.pop(), l(o), c(o);
+      const a = [...t];
+      a.pop(), n(a), c(a);
     }
-  }, C = (e) => {
-    const o = t.includes(e) ? t.filter((h) => h !== e) : [...t, e];
-    l(o), c(o);
-  }, y = () => {
-    l([]), c([]);
-  }, G = () => {
+  }, j = (e) => {
+    const a = t.includes(e) ? t.filter((l) => l !== e) : [...t, e];
+    n(a), c(a);
+  }, v = () => {
+    n([]), c([]);
+  }, Q = () => {
     i((e) => !e);
-  }, q = () => {
+  }, U = () => {
     const e = t.slice(0, m);
-    l(e), c(e);
-  }, z = () => {
-    if (t.length === n.length)
-      y();
+    n(e), c(e);
+  }, Y = () => {
+    if (t.length === d.size)
+      v();
     else {
-      const e = n.map((o) => o.value);
-      l(e), c(e);
+      const e = Array.from(d.keys());
+      n(e), c(e);
     }
   };
-  return s.useLayoutEffect(() => {
-    f.current && (f?.current?.firstChild?.offsetTop < f?.current?.lastChild?.offsetTop ? S(!0) : S(!1));
-  }, [t]), /* @__PURE__ */ a(Y, { open: W, onOpenChange: i, modal: R, children: [
-    /* @__PURE__ */ r(Z, { asChild: !0, children: /* @__PURE__ */ r(
-      U,
+  return o.useLayoutEffect(() => {
+    h.current && (h?.current?.firstChild?.offsetTop < h?.current?.lastChild?.offsetTop ? C(!0) : C(!1));
+  }, [t]), /* @__PURE__ */ s(se, { open: _, onOpenChange: i, modal: A, children: [
+    /* @__PURE__ */ r(oe, { asChild: !0, children: /* @__PURE__ */ r(
+      ae,
       {
-        ref: T,
+        ref: G,
         variant: "text",
         loading: p,
         disabled: N,
-        ...F,
-        onClick: G,
-        className: d(
+        ...$,
+        onClick: Q,
+        className: u(
           "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",
-          X && "h-auto",
-          V
+          H && "h-auto",
+          R
         ),
         "data-placeholder": t.length ? void 0 : "",
         endIcon: /* @__PURE__ */ r(
-          Q,
+          te,
           {
             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(w, { 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: [
+        children: /* @__PURE__ */ r(w, { children: t.length > 0 ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", ref: h, children: [
             t.slice(0, m).map((e) => {
-              const o = n.find((v) => v.value === e), h = o?.icon;
-              return /* @__PURE__ */ a(P, { className: d(M({ variant: x }), { "text-gray-400 bg-gray-200": N || p }), children: [
+              const a = d.get(e), l = a?.icon;
+              return /* @__PURE__ */ s(M, { className: u(V({ variant: x }), { "text-gray-400 bg-gray-200": N || p }), children: [
                 /* @__PURE__ */ r(
-                  k,
+                  P,
                   {
                     className: "h-4 w-4 cursor-pointer",
-                    onClick: (v) => {
-                      v.stopPropagation(), C(e);
+                    onClick: (Z) => {
+                      Z.stopPropagation(), j(e);
                     }
                   }
                 ),
-                h && /* @__PURE__ */ r(h, { className: "h-4 w-4 mr-2" }),
-                o?.label
+                l && /* @__PURE__ */ r(l, { className: "h-4 w-4 mr-2" }),
+                a?.label
               ] }, e);
             }),
-            t.length > m && /* @__PURE__ */ a(P, { className: d(M({ variant: x })), children: [
+            t.length > m && /* @__PURE__ */ s(M, { className: u(V({ variant: x })), children: [
               `+ ${t.length - m} ${B}`,
               /* @__PURE__ */ r(
-                J,
+                re,
                 {
                   role: "button",
                   className: "ml-2 h-4.5 w-4.5 cursor-pointer",
                   onClick: (e) => {
-                    e.stopPropagation(), q();
+                    e.stopPropagation(), U();
                   }
                 }
               )
             ] }),
-            p && u ? u : null
+            p && f ? f : null
           ] }),
-          /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-1", children: [
             /* @__PURE__ */ r(
-              k,
+              P,
               {
                 role: "button",
                 className: "h-5 w-5 text-muted-foreground cursor-pointer",
                 onClick: (e) => {
-                  e.stopPropagation(), y();
+                  e.stopPropagation(), v();
                 },
                 "aria-label": "Clear"
               }
             ),
-            /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-5 h-full" })
+            /* @__PURE__ */ r(I, { orientation: "vertical", className: "flex min-h-5 h-full" })
           ] })
-        ] }) : /* @__PURE__ */ r(w, { children: p && u ? u : D }) })
+        ] }) : /* @__PURE__ */ r(w, { children: p && f ? f : T }) })
       }
     ) }),
-    /* @__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: $ }),
-      /* @__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(le, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ s(ne, { className: "w-[--radix-popper-anchor-width]", children: [
+      /* @__PURE__ */ r(ce, { placeholder: W, onKeyDown: J, value: q, onValueChange: S }),
+      /* @__PURE__ */ s(ie, { className: "max-h-[--radix-popper-available-height]", children: [
+        /* @__PURE__ */ r(de, { children: F }),
+        /* @__PURE__ */ s(O, { children: [
+          /* @__PURE__ */ s(g, { onSelect: Y, className: "cursor-pointer", children: [
             /* @__PURE__ */ r(
               "div",
               {
-                className: d(
+                className: u(
                   "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"
+                  t.length === d.size ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                 ),
-                children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
+                children: /* @__PURE__ */ r(E, { className: "h-4.5 w-4.5" })
               }
             ),
-            /* @__PURE__ */ a("span", { children: [
+            /* @__PURE__ */ s("span", { children: [
               "(",
-              _,
+              z,
               ")"
             ] })
           ] }, "all"),
-          n.map((e) => {
-            const o = t.includes(e.value);
-            return /* @__PURE__ */ a(g, { onSelect: () => C(e.value), className: "cursor-pointer", children: [
+          Array.from(d.values()).map((e) => {
+            const a = t.includes(e.value);
+            return /* @__PURE__ */ s(g, { onSelect: () => j(e.value), className: "cursor-pointer", children: [
               /* @__PURE__ */ r(
                 "div",
                 {
-                  className: d(
+                  className: u(
                     "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"
+                    a ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                   ),
-                  children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
+                  children: /* @__PURE__ */ r(E, { className: "h-4.5 w-4.5" })
                 }
               ),
               e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4.5 w-4.5 text-muted-foreground" }),
@@ -187,20 +200,20 @@ const M = H({
             ] }, e.value);
           })
         ] }),
-        /* @__PURE__ */ r(se, {}),
-        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-          t.length > 0 && /* @__PURE__ */ a(w, { children: [
-            /* @__PURE__ */ r(g, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: K }),
-            /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-6 h-full" })
+        /* @__PURE__ */ r(ue, {}),
+        /* @__PURE__ */ r(O, { children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+          t.length > 0 && /* @__PURE__ */ s(w, { children: [
+            /* @__PURE__ */ r(g, { onSelect: v, className: "flex-1 justify-center cursor-pointer", children: K }),
+            /* @__PURE__ */ r(I, { orientation: "vertical", className: "flex min-h-6 h-full" })
           ] }),
           /* @__PURE__ */ r(g, { onSelect: () => i(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: L })
         ] }) })
       ] })
     ] }) })
   ] });
-}, ne = s.forwardRef(le);
-ne.displayName = "MultiSelect";
+}, pe = o.forwardRef(me);
+pe.displayName = "MultiSelect";
 export {
-  ne as MultiSelect
+  pe 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":["\"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<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    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: T;\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: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\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 = <T extends string | number>(\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  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const [selectedValues, setSelectedValues] = React.useState<T[]>(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: T) => {\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\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","loading","loadingText","props","ref","selectedValues","setSelectedValues","React","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","ForwardedMultiSelect"],"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<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    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: T;\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: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\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 in the search input.\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n   * Optional, defaults to false.\r\n   */\r\n  addOptionOnSearchNotFound?: boolean;\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 = <T extends string | number>(\r\n  {\r\n    options: _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    searchText = \"Search...\",\r\n    addOptionOnSearchNotFound = false,\r\n    loading,\r\n    loadingText = \"Loading...\",\r\n    ...props\r\n  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const [selectedValues, setSelectedValues] = React.useState<T[]>(defaultValue ?? value);\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [searchValue, setSearchValue] = React.useState(\"\");\r\n  const [isWrapped, setIsWrapped] = React.useState(false);\r\n  const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n    new Map(_options.map(option => [option.value, option])),\r\n  );\r\n\r\n  React.useEffect(() => {\r\n    setOptions(new Map(_options.map(option => [option.value, option])));\r\n  }, [_options]);\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\" && addOptionOnSearchNotFound) {\r\n      setIsPopoverOpen(true);\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      if (!event.currentTarget.value) return;\r\n      const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n      setOptions(prev => new Map(prev).set(newOption.value, newOption));\r\n      if (options.get(newOption.value) === undefined) {\r\n        const newSelectedValues = [...selectedValues, newOption.value];\r\n        setSelectedValues(newSelectedValues);\r\n        onValueChange(newSelectedValues);\r\n        setSearchValue(\"\");\r\n      }\r\n    } else 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: T) => {\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.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\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.get(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={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\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.size ? \"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              {Array.from(options.values()).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\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","loading","loadingText","props","ref","selectedValues","setSelectedValues","React","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}

package/dist/textfield.es.js

@@ -32,7 +32,7 @@ const h = g({
         disabled: i,
         ...t?.inputProps ?? {},
         className: n(
-          "focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300",
+          "focus:outline-none w-full h-full py-1 rounded-sm file:border-0 bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300",
           r ? "ps-1 pe-3" : "px-3",
           t?.inputProps?.className
         )

package/dist/textfield.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.es.js","sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n  base: [\r\n    \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n    \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n    \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"h-7\",\r\n      md: \"h-8\",\r\n      lg: \"h-11\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface TextFieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n  type?: React.HTMLInputTypeAttribute;\r\n  disabled?: boolean;\r\n  suffix?: React.ReactNode;\r\n  endAdornment?: React.ReactNode;\r\n  startAdornment?: React.ReactNode;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  value?: string | number;\r\n  defaultValue?: string | number;\r\n  slotProps?: {\r\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n  };\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n  ({ className, slotProps, suffix, endAdornment, startAdornment, size, value, onChange, defaultValue, type, disabled, ...props }, ref) => {\r\n    return (\r\n      <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n        {startAdornment}\r\n        <input\r\n          type={type}\r\n          ref={ref}\r\n          onChange={onChange}\r\n          value={value}\r\n          defaultValue={defaultValue}\r\n          disabled={disabled}\r\n          {...(slotProps?.inputProps ?? {})}\r\n          className={cn(\r\n            \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n            !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n            slotProps?.inputProps?.className,\r\n          )}\r\n        />\r\n        {typeof suffix === \"string\" || typeof suffix === \"number\" ? (\r\n          <span className=\"inline-flex items-center px-2 text-xs font-medium text-primary bg-primary-50 m-0.5 rounded-sm\">{suffix}</span>\r\n        ) : (\r\n          suffix\r\n        )}\r\n        {endAdornment}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, type TextFieldProps };\r\n"],"names":["textFieldVariants","tv","TextField","React","className","slotProps","suffix","endAdornment","startAdornment","size","value","onChange","defaultValue","type","disabled","props","ref","jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAMA,IAAoBC,EAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBKC,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,WAAAC,GAAW,QAAAC,GAAQ,cAAAC,GAAc,gBAAAC,GAAgB,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAE5H,gBAAAC,EAAC,OAAA,EAAK,GAAGF,GAAO,WAAWG,EAAGlB,EAAkB,EAAE,MAAAS,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,iBAAeU,GACnF,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,KAAAG;AAAA,QACA,UAAAL;AAAA,QACA,OAAAD;AAAA,QACA,cAAAE;AAAA,QACA,UAAAE;AAAA,QACC,GAAIT,GAAW,cAAc,CAAA;AAAA,QAC9B,WAAWa;AAAA,UACT;AAAA,UACCV,IAA0B,cAAT;AAAA,UAClBH,GAAW,YAAY;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,IAED,OAAOC,KAAW,YAAY,OAAOA,KAAW,WAC/C,gBAAAa,EAAC,QAAA,EAAK,WAAU,iGAAiG,UAAAb,EAAA,CAAO,IAExHA;AAAA,IAEDC;AAAA,EAAA,GACH;AAGN;AACAL,EAAU,cAAc;"}
+{"version":3,"file":"textfield.es.js","sources":["../src/components/text-field/TextField.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\nconst textFieldVariants = tv({\r\n  base: [\r\n    \"flex items-center w-full rounded-sm border border-input text-text bg-transparent p-0 text-xs [&_input]:text-xs font-medium transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\r\n    \"placeholder:text-text-300 hover:border-primary-400 focus-within:border-primary-400 focus-within:outline-none focus-within:ring focus-within:ring-primary-100\",\r\n    \"aria-disabled:text-text-300 aria-disabled:bg-gray-100 aria-disabled:border-gray-100\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"h-7\",\r\n      md: \"h-8\",\r\n      lg: \"h-11\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n  },\r\n});\r\n\r\ninterface TextFieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof textFieldVariants> {\r\n  type?: React.HTMLInputTypeAttribute;\r\n  disabled?: boolean;\r\n  suffix?: React.ReactNode;\r\n  endAdornment?: React.ReactNode;\r\n  startAdornment?: React.ReactNode;\r\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\r\n  value?: string | number;\r\n  defaultValue?: string | number;\r\n  slotProps?: {\r\n    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\r\n  };\r\n}\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\r\n  ({ className, slotProps, suffix, endAdornment, startAdornment, size, value, onChange, defaultValue, type, disabled, ...props }, ref) => {\r\n    return (\r\n      <div {...props} className={cn(textFieldVariants({ size, className }))} aria-disabled={disabled}>\r\n        {startAdornment}\r\n        <input\r\n          type={type}\r\n          ref={ref}\r\n          onChange={onChange}\r\n          value={value}\r\n          defaultValue={defaultValue}\r\n          disabled={disabled}\r\n          {...(slotProps?.inputProps ?? {})}\r\n          className={cn(\r\n            \"focus:outline-none w-full h-full py-1 rounded-sm file:border-0 bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-300\",\r\n            !startAdornment ? \"px-3\" : \"ps-1 pe-3\",\r\n            slotProps?.inputProps?.className,\r\n          )}\r\n        />\r\n        {typeof suffix === \"string\" || typeof suffix === \"number\" ? (\r\n          <span className=\"inline-flex items-center px-2 text-xs font-medium text-primary bg-primary-50 m-0.5 rounded-sm\">{suffix}</span>\r\n        ) : (\r\n          suffix\r\n        )}\r\n        {endAdornment}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nTextField.displayName = \"TextField\";\r\n\r\nexport { TextField, type TextFieldProps };\r\n"],"names":["textFieldVariants","tv","TextField","React","className","slotProps","suffix","endAdornment","startAdornment","size","value","onChange","defaultValue","type","disabled","props","ref","jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAMA,IAAoBC,EAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBKC,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,WAAAC,GAAW,QAAAC,GAAQ,cAAAC,GAAc,gBAAAC,GAAgB,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAE5H,gBAAAC,EAAC,OAAA,EAAK,GAAGF,GAAO,WAAWG,EAAGlB,EAAkB,EAAE,MAAAS,GAAM,WAAAL,EAAA,CAAW,CAAC,GAAG,iBAAeU,GACnF,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,KAAAG;AAAA,QACA,UAAAL;AAAA,QACA,OAAAD;AAAA,QACA,cAAAE;AAAA,QACA,UAAAE;AAAA,QACC,GAAIT,GAAW,cAAc,CAAA;AAAA,QAC9B,WAAWa;AAAA,UACT;AAAA,UACCV,IAA0B,cAAT;AAAA,UAClBH,GAAW,YAAY;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,IAED,OAAOC,KAAW,YAAY,OAAOA,KAAW,WAC/C,gBAAAa,EAAC,QAAA,EAAK,WAAU,iGAAiG,UAAAb,EAAA,CAAO,IAExHA;AAAA,IAEDC;AAAA,EAAA,GACH;AAGN;AACAL,EAAU,cAAc;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@trsys-tech/matrix-library",
   "description": "MatrixUI Library",
   "private": false,
-  "version": "0.5.2-alpha.1",
+  "version": "0.5.2-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",