@trsys-tech/matrix-library 0.4.6-alpha → 0.4.7

package/dist/combobox.es.js

@@ -1,63 +1,70 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import o, { useRef as F, useEffect as K } from "react";
-import { cn as h } from "./utils.es.js";
-import { Button as R } from "./button.es.js";
-import { ChevronDown as _, Check as A } from "@trsys-tech/matrix-icons";
-import { Popover as B, PopoverTrigger as O, PopoverContent as T } from "./popover.es.js";
-import { Command as G, CommandInput as q, CommandList as z, CommandEmpty as H, CommandItem as v, CommandGroup as J } from "./command.es.js";
-const $ = ({
-  onValueChange: l,
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import o, { useRef as R, useEffect as _ } from "react";
+import { ChevronDown as A, XMark as B, Check as O } from "@trsys-tech/matrix-icons";
+import { cn as v } from "./utils.es.js";
+import { Button as T } from "./button.es.js";
+import { Popover as G, PopoverTrigger as M, PopoverContent as X } from "./popover.es.js";
+import { Command as q, CommandInput as z, CommandList as H, CommandEmpty as J, CommandItem as h, CommandGroup as Q } from "./command.es.js";
+const re = ({
+  onValueChange: t,
   options: c,
-  value: i,
+  value: u,
   className: x,
-  closeOnSelect: n = !0,
-  loading: s,
+  clearable: g = !1,
+  closeOnSelect: s = !0,
+  loading: d,
   disabled: w,
-  placeholder: g = "Select an option",
-  searchText: y = "Search...",
-  noResultsText: C = "No results found",
-  loadingText: k = "Loading...",
-  emptyOptionsText: N = "No Items",
-  showSearchInput: u = !0,
+  placeholder: y = "Select an option",
+  searchText: C = "Search...",
+  noResultsText: k = "No results found",
+  loadingText: N = "Loading...",
+  emptyOptionsText: P = "No Items",
+  showSearchInput: p = !0,
   ...L
 }) => {
-  const [p, t] = o.useState(!1), f = F(null), [r, m] = o.useState(i), P = o.useCallback(
+  const [m, l] = o.useState(!1), f = R(null), [r, i] = o.useState(u), D = o.useCallback(
     (e) => {
-      e.key === "Enter" ? t(!0) : e.key === "Backspace" && !e.currentTarget.value && (m(r), l?.(r), n && t(!1));
+      e.key === "Enter" ? l(!0) : e.key === "Backspace" && !e.currentTarget.value && (i(r), t?.(r), s && l(!1));
     },
-    [r, l, n]
-  ), D = o.useCallback(
+    [r, t, s]
+  ), E = o.useCallback(
     (e) => {
-      m(e), l?.(e), n && t(!1);
+      i(e), t?.(e), s && l(!1);
     },
-    [l, n]
-  ), E = o.useCallback((e, j, I = [""]) => I.join("").toLocaleLowerCase().includes(j.toLocaleLowerCase()) ? 1 : 0, []), S = o.useCallback(
+    [t, s]
+  ), S = o.useCallback(
     (e) => {
-      u || (e.preventDefault(), f.current?.focus());
+      e.stopPropagation(), t?.(void 0), i(void 0);
     },
-    [u]
+    [t]
+  ), j = o.useCallback((e, F, K = [""]) => K.join("").toLocaleLowerCase().includes(F.toLocaleLowerCase()) ? 1 : 0, []), I = o.useCallback(
+    (e) => {
+      p || (e.preventDefault(), f.current?.focus());
+    },
+    [p]
   );
-  K(() => {
-    m(i);
-  }, [i]);
+  _(() => {
+    i(u);
+  }, [u]);
   const b = r === void 0 || r === "";
-  return /* @__PURE__ */ d(B, { open: p, onOpenChange: t, children: [
-    /* @__PURE__ */ a(O, { asChild: !0, children: /* @__PURE__ */ a(
-      R,
+  return /* @__PURE__ */ n(G, { open: m, onOpenChange: l, children: [
+    /* @__PURE__ */ a(M, { asChild: !0, children: /* @__PURE__ */ n(
+      T,
       {
         variant: "text",
         role: "combobox",
-        "aria-expanded": p,
-        className: h(
+        type: "button",
+        "aria-expanded": m,
+        className: v(
           "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-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 [&_svg]:disabled:text-text-300",
           x
         ),
         "data-value": r,
         "data-placeholder": b ? "" : void 0,
-        loading: s,
+        loading: d,
         disabled: w,
         endIcon: /* @__PURE__ */ a(
-          _,
+          A,
           {
             role: "button",
             "aria-label": "Expand dropdown",
@@ -65,30 +72,42 @@ const $ = ({
           }
         ),
         ...L,
-        children: /* @__PURE__ */ a("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: b ? s ? k : g : c.find((e) => e.value === r)?.label })
+        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 }),
+          g && r !== void 0 && r !== null ? /* @__PURE__ */ a(
+            "span",
+            {
+              onClick: S,
+              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, {})
+            }
+          ) : null
+        ]
       }
     ) }),
-    /* @__PURE__ */ a(T, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => t(!1), onOpenAutoFocus: S, children: /* @__PURE__ */ d(
-      G,
+    /* @__PURE__ */ a(X, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => l(!1), onOpenAutoFocus: I, children: /* @__PURE__ */ n(
+      q,
       {
         className: "w-[--radix-popper-anchor-width] focus-visible:outline-none",
-        filter: E,
-        defaultValue: r !== void 0 ? String(r) : void 0,
+        filter: j,
+        defaultValue: r != null ? String(r) : void 0,
         ref: f,
         children: [
-          u && /* @__PURE__ */ a(q, { placeholder: y, onKeyDown: P }),
-          /* @__PURE__ */ d(z, { children: [
-            !s && /* @__PURE__ */ a(H, { children: C }),
-            !s && !c.length ? /* @__PURE__ */ a(v, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: N }) : null,
-            /* @__PURE__ */ a(J, { children: c.map((e) => /* @__PURE__ */ d(
-              v,
+          p && /* @__PURE__ */ a(z, { placeholder: C, onKeyDown: D }),
+          /* @__PURE__ */ n(H, { children: [
+            !d && /* @__PURE__ */ a(J, { children: k }),
+            !d && !c.length ? /* @__PURE__ */ a(h, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: P }) : null,
+            /* @__PURE__ */ a(Q, { children: c.map((e) => /* @__PURE__ */ n(
+              h,
               {
                 value: e.value,
                 keywords: [e.label],
-                onSelect: D,
+                onSelect: E,
                 children: [
                   e.label,
-                  /* @__PURE__ */ a(A, { className: h("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
+                  /* @__PURE__ */ a(O, { className: v("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
                 ]
               },
               String(e.value)
@@ -100,6 +119,6 @@ const $ = ({
   ] });
 };
 export {
-  $ as Combobox
+  re 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\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Check, ChevronDown } from \"@trsys-tech/matrix-icons\";\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\nconst Combobox = <T extends string | number>({\r\n  onValueChange,\r\n  options,\r\n  value,\r\n  className,\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  ...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 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}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          role=\"combobox\"\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-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 [&_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        </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 ? 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","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","jsxs","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","option","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":"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"}
+{"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  ...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}>\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-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 [&_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","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","jsxs","Popover","jsx","PopoverTrigger","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,GAAGC;AACL,MAAwB;AACtB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAM,SAAS,EAAK,GACxDC,IAAaC,EAAuB,IAAI,GAExC,CAACC,GAAsBC,CAAuB,IAAIJ,EAAM,SAAwBf,CAAK,GAErFoB,IAAqBL,EAAM;AAAA,IAC/B,CAACM,MAAiD;AAC5C,MAAAA,EAAM,QAAQ,UAChBP,EAAiB,EAAI,IACZO,EAAM,QAAQ,eAAe,CAACA,EAAM,cAAc,UAC3DF,EAAwBD,CAAoB,GAC5CpB,IAAgBoB,CAAqB,GACjCf,OAAgC,EAAK;AAAA,IAE7C;AAAA,IACA,CAACe,GAAsBpB,GAAeK,CAAa;AAAA,EACrD,GAEMmB,IAAeP,EAAM;AAAA,IACzB,CAACQ,MAAoB;AACnB,MAAAJ,EAAwBI,CAAY,GACpCzB,IAAgByB,CAAY,GACxBpB,OAAgC,EAAK;AAAA,IAC3C;AAAA,IACA,CAACL,GAAeK,CAAa;AAAA,EAC/B,GAEMqB,IAAcT,EAAM;AAAA,IACxB,CAAC,MAAwB;AACvB,QAAE,gBAAgB,GAClBjB,IAAgB,MAAyB,GACzCqB,EAAwB,MAAS;AAAA,IACnC;AAAA,IACA,CAACrB,CAAa;AAAA,EAChB,GAEM2B,IAAeV,EAAM,YAAY,CAACf,GAAe0B,GAAgBC,IAAqB,CAAC,EAAE,MACtFA,EAAS,KAAK,EAAE,EAAE,kBAAA,EAAoB,SAASD,EAAO,mBAAmB,IAAI,IAAI,GACvF,EAAE,GAGCE,IAAsBb,EAAM;AAAA,IAChC,CAAC,MAAa;AACZ,MAAKJ,MACH,EAAE,eAAe,GACjBK,EAAW,SAAS,MAAM;AAAA,IAE9B;AAAA,IACA,CAACL,CAAe;AAAA,EAClB;AAEA,EAAAkB,EAAU,MAAM;AACd,IAAAV,EAAwBnB,CAAK;AAAA,EAAA,GAC5B,CAACA,CAAK,CAAC;AAEJ,QAAA8B,IAAkBZ,MAAyB,UAAaA,MAAyB;AAEvF,SACG,gBAAAa,EAAAC,GAAA,EAAQ,MAAMnB,GAAe,cAAcC,GAC1C,UAAA;AAAA,IAAC,gBAAAmB,EAAAC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAetB;AAAA,QACf,WAAWuB;AAAA,UACT;AAAA,UACAnC;AAAA,QACF;AAAA,QACA,cAAYiB;AAAA,QACZ,oBAAkBY,IAAkB,KAAK;AAAA,QACzC,SAAA1B;AAAA,QACA,UAAAC;AAAA,QACA,SACE,gBAAA4B;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,WAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAED,GAAGzB;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAqB,EAAC,QAAK,EAAA,WAAU,6FACb,UAACH,IAAyF1B,IAAUK,IAAcH,IAA/FP,EAAQ,KAAK,CAAUuC,MAAAA,EAAO,UAAUpB,CAAoB,GAAG,OACrF;AAAA,UACChB,KAAagB,MAAyB,UAAaA,MAAyB,OAC3E,gBAAAe;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAST;AAAA,cACT,WAAU;AAAA,cACV,MAAK;AAAA,cACL,cAAW;AAAA,cAEX,4BAACe,GAAM,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,IAEP;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IACC,gBAAAN,EAAAO,GAAA,EAAe,WAAU,cAAa,OAAM,SAAQ,iBAAiB,MAAM1B,EAAiB,EAAK,GAAG,iBAAiBc,GACpH,UAAA,gBAAAG;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,QAAQhB;AAAA,QACR,cAAoDP,KAAyB,OAAO,OAAOA,CAAoB,IAAI;AAAA,QACnH,KAAKF;AAAA,QAEJ,UAAA;AAAA,UAAAL,KAAoB,gBAAAsB,EAAAS,GAAA,EAAa,aAAanC,GAAY,WAAWa,GAAoB;AAAA,4BACzFuB,GACE,EAAA,UAAA;AAAA,YAAC,CAAAvC,KAAY,gBAAA6B,EAAAW,GAAA,EAAc,UAAcpC,EAAA,CAAA;AAAA,YACzC,CAACJ,KAAW,CAACL,EAAQ,SACpB,gBAAAkC,EAACY,GAAY,EAAA,OAAM,qEAAoE,UAAQ,IAC5F,UAAAnC,EAAA,CACH,IACE;AAAA,YACH,gBAAAuB,EAAAa,GAAA,EACE,UAAQ/C,EAAA,IAAI,CACXuC,MAAA,gBAAAP;AAAA,cAACc;AAAA,cAAA;AAAA,gBAEC,OAAOP,EAAO;AAAA,gBACd,UAAU,CAACA,EAAO,KAAK;AAAA,gBACvB,UAAUhB;AAAA,gBAET,UAAA;AAAA,kBAAOgB,EAAA;AAAA,kBACR,gBAAAL,EAACc,GAAM,EAAA,WAAWX,EAAG,WAAWlB,MAAyBoB,EAAO,QAAQ,gBAAgB,WAAW,EAAG,CAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cANjG,OAAOA,EAAO,KAAK;AAAA,YAAA,CAQ3B,EACH,CAAA;AAAA,UAAA,EACF,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -70,7 +70,12 @@ type ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonE
      * @default true
      */
     showSearchInput?: boolean;
+    /**
+     * Whether to show the clear button.
+     * @default false
+     */
+    clearable?: boolean;
 };
-declare const Combobox: <T extends string | number>({ onValueChange, options, value, className, closeOnSelect, loading, disabled, placeholder, searchText, noResultsText, loadingText, emptyOptionsText, showSearchInput, ...props }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Combobox: <T extends string | number>({ onValueChange, options, value, className, clearable, closeOnSelect, loading, disabled, placeholder, searchText, noResultsText, loadingText, emptyOptionsText, showSearchInput, ...props }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Combobox, type ComboboxProps };
 //# sourceMappingURL=Combobox.d.ts.map

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;CAC3B,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,oLAexC,aAAa,CAAC,CAAC,CAAC,4CA+GlB,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,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,+LAgBxC,aAAa,CAAC,CAAC,CAAC,4CAmIlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}

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

@@ -11,6 +11,7 @@ type FormComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath
     loadingText?: string;
     emptyOptionsText?: string;
     showSearchInput?: boolean;
+    clearable?: boolean;
     placeholder?: string;
     required?: boolean;
     readOnly?: boolean;

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,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,4CA0D9C,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;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"}

package/dist/formcombobox.es.js

@@ -1,61 +1,63 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { FormField as P, FormItem as I, FormLabel as j, FormControl as v, FormMessage as y } from "./form.es.js";
-import { Combobox as L } from "./combobox.es.js";
-const V = (n) => {
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { FormField as I, FormItem as j, FormLabel as v, FormControl as y, FormMessage as L } from "./form.es.js";
+import { Combobox as M } from "./combobox.es.js";
+const q = (s) => {
   const {
-    name: a,
+    name: n,
     control: t,
-    defaultValue: m,
+    clearable: m = !1,
+    defaultValue: d,
     disabled: r,
-    readOnly: d,
-    rules: i,
-    shouldUnregister: p,
-    label: b,
-    options: c,
-    loading: u,
-    loadingText: h,
-    emptyOptionsText: x,
-    showSearchInput: g,
+    readOnly: i,
+    rules: p,
+    shouldUnregister: b,
+    label: c,
+    options: u,
+    loading: h,
+    loadingText: x,
+    emptyOptionsText: g,
+    showSearchInput: f,
     placeholder: F,
-    slotProps: e,
-    required: f,
-    ...C
-  } = n;
-  return /* @__PURE__ */ o(
-    P,
+    slotProps: o,
+    required: C,
+    ...P
+  } = s;
+  return /* @__PURE__ */ e(
+    I,
     {
       control: t,
-      name: a,
-      defaultValue: m,
+      name: n,
+      defaultValue: d,
       disabled: r,
-      rules: i,
-      shouldUnregister: p,
-      render: ({ field: l }) => /* @__PURE__ */ s(I, { ...C, children: [
-        /* @__PURE__ */ s(j, { ...e?.formLabelProps ?? {}, children: [
-          b,
-          f && /* @__PURE__ */ o("span", { className: "text-danger text-sm leading-4", children: "*" })
+      rules: p,
+      shouldUnregister: b,
+      render: ({ field: l }) => /* @__PURE__ */ a(j, { ...P, children: [
+        /* @__PURE__ */ a(v, { ...o?.formLabelProps ?? {}, children: [
+          c,
+          C && /* @__PURE__ */ e("span", { className: "text-danger text-sm leading-4", children: "*" })
         ] }),
-        /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(
-          L,
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+          M,
           {
-            options: c,
+            options: u,
             value: l.value,
             onValueChange: l.onChange,
-            loading: u,
-            loadingText: h,
-            emptyOptionsText: x,
+            loading: h,
+            loadingText: x,
+            emptyOptionsText: g,
             placeholder: F,
-            disabled: r || d,
-            showSearchInput: g,
-            ...e?.comboboxProps ?? {}
+            disabled: r || i,
+            showSearchInput: f,
+            clearable: m,
+            ...o?.comboboxProps ?? {}
           }
         ) }),
-        /* @__PURE__ */ o(y, { ...e?.formMessageProps ?? {} })
+        /* @__PURE__ */ e(L, { ...o?.formMessageProps ?? {} })
       ] })
     }
   );
 };
 export {
-  V as FormCombobox
+  q as FormCombobox
 };
 //# sourceMappingURL=formcombobox.es.js.map

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    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    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                {...(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","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":";;;AA+BM,MAAAA,IAAe,CACnBC,MACG;AACG,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,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,IACDjB;AAGF,SAAA,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAjB;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAa,QAEP,gBAAAC,EAACC,GAAU,EAAA,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAW,EAAA,GAAIR,GAAW,kBAAkB,CAC1C,GAAA,UAAA;AAAA,UAAAP;AAAA,UACAQ,KAAY,gBAAAE,EAAC,QAAK,EAAA,WAAU,iCAAgC,UAAC,IAAA,CAAA;AAAA,QAAA,GAChE;AAAA,0BACCM,GACC,EAAA,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,YACC,GAAIE,GAAW,iBAAiB,CAAA;AAAA,UAAC;AAAA,QAAA,GAEtC;AAAA,0BAECW,GAAa,EAAA,GAAIX,GAAW,oBAAoB,CAAA,EAAK,CAAA;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"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":";;;AAgCM,MAAAA,IAAe,CACnBC,MACG;AACG,QAAA;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;AAGF,SAAA,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,GAAU,EAAA,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAW,EAAA,GAAIR,GAAW,kBAAkB,CAC1C,GAAA,UAAA;AAAA,UAAAP;AAAA,UACAQ,KAAY,gBAAAE,EAAC,QAAK,EAAA,WAAU,iCAAgC,UAAC,IAAA,CAAA;AAAA,QAAA,GAChE;AAAA,0BACCM,GACC,EAAA,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,EAAK,CAAA;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EACF;AAEJ;"}