@trsys-tech/matrix-library 0.5.3 → 0.5.5

package/dist/combobox.es.js

@@ -1,11 +1,11 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import a, { useRef as _, useMemo as A } from "react";
-import { XMark as B, ChevronDown as M, Check as O } from "@trsys-tech/matrix-icons";
+import a, { useRef as A, useMemo as B } from "react";
+import { XMark as M, ChevronDown as O, Check as S } from "@trsys-tech/matrix-icons";
 import { cn as h } from "./utils.es.js";
-import { Button as S } from "./button.es.js";
-import { Popover as G, PopoverTrigger as T, PopoverContent as X } from "./popover.es.js";
-import { Command as q, CommandInput as z, CommandList as H, CommandEmpty as J, CommandItem as x, CommandGroup as Q } from "./command.es.js";
-const re = ({
+import { Button as G } from "./button.es.js";
+import { Popover as T, 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 x, CommandGroup as U } from "./command.es.js";
+const oe = ({
   onValueChange: t,
   options: d,
   value: r,
@@ -21,32 +21,33 @@ const re = ({
   emptyOptionsText: k = "No Items",
   showSearchInput: m = !0,
   modalPopover: N,
-  ...P
+  extraContent: P,
+  ...L
 }) => {
-  const [f, s] = a.useState(!1), b = _(null), L = a.useCallback(
+  const [f, s] = a.useState(!1), b = A(null), D = a.useCallback(
     (e) => {
       e.key === "Enter" ? s(!0) : e.key === "Backspace" && !e.currentTarget.value && (t?.(r), i && s(!1));
     },
     [t, i, r]
-  ), D = a.useCallback(
+  ), j = a.useCallback(
     (e) => {
       t?.(e), i && s(!1);
     },
     [t, i]
-  ), j = a.useCallback(
+  ), E = a.useCallback(
     (e) => {
       e.stopPropagation(), t?.(void 0);
     },
     [t]
-  ), E = a.useCallback((e, K, R = [""]) => R.join("").toLocaleLowerCase().includes(K.toLocaleLowerCase()) ? 1 : 0, []), I = a.useCallback(
+  ), I = a.useCallback((e, R, _ = [""]) => _.join("").toLocaleLowerCase().includes(R.toLocaleLowerCase()) ? 1 : 0, []), F = a.useCallback(
     (e) => {
       m || (e.preventDefault(), b.current?.focus());
     },
     [m]
-  ), c = r === void 0 || r === "", F = A(() => c && n ? p : c ? u : d.find((e) => e.value === r)?.label || u, [c, r, d, u, n, p]);
-  return /* @__PURE__ */ l(G, { open: f, onOpenChange: s, modal: N, children: [
-    /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ l(
-      S,
+  ), c = r === void 0 || r === "", K = B(() => c && n ? p : c ? u : d.find((e) => e.value === r)?.label || u, [c, r, d, u, n, p]);
+  return /* @__PURE__ */ l(T, { open: f, onOpenChange: s, modal: N, children: [
+    /* @__PURE__ */ o(X, { asChild: !0, children: /* @__PURE__ */ l(
+      G,
       {
         variant: "text",
         role: "combobox",
@@ -61,50 +62,51 @@ const re = ({
         loading: n,
         disabled: v,
         endIcon: /* @__PURE__ */ o(
-          M,
+          O,
           {
             role: "button",
             "aria-label": "Expand dropdown",
             className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform ms-auto"
           }
         ),
-        ...P,
+        ...L,
         children: [
-          /* @__PURE__ */ o("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: F }),
+          /* @__PURE__ */ o("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: K }),
           y && r !== void 0 && r !== null ? /* @__PURE__ */ o(
             "span",
             {
-              onClick: j,
+              onClick: E,
               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__ */ o(B, {})
+              children: /* @__PURE__ */ o(M, {})
             }
           ) : null
         ]
       }
     ) }),
-    /* @__PURE__ */ o(X, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => s(!1), onOpenAutoFocus: I, children: /* @__PURE__ */ l(
-      q,
+    /* @__PURE__ */ o(q, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => s(!1), onOpenAutoFocus: F, children: /* @__PURE__ */ l(
+      z,
       {
         className: "w-[--radix-popper-anchor-width] focus-visible:outline-none",
-        filter: E,
+        filter: I,
         defaultValue: r != null ? String(r) : void 0,
         ref: b,
         children: [
-          m && /* @__PURE__ */ o(z, { placeholder: g, onKeyDown: L }),
-          /* @__PURE__ */ l(H, { children: [
-            !n && /* @__PURE__ */ o(J, { children: C }),
+          m && /* @__PURE__ */ o(H, { placeholder: g, onKeyDown: D }),
+          P,
+          /* @__PURE__ */ l(J, { children: [
+            !n && /* @__PURE__ */ o(Q, { children: C }),
             !n && !d.length ? /* @__PURE__ */ o(x, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: k }) : null,
-            /* @__PURE__ */ o(Q, { children: d.map((e) => /* @__PURE__ */ l(
+            /* @__PURE__ */ o(U, { children: d.map((e) => /* @__PURE__ */ l(
               x,
               {
                 value: e.value,
                 keywords: "keyword" in e ? [e.keyword] : [e.label],
-                onSelect: D,
+                onSelect: j,
                 children: [
                   e.label,
-                  /* @__PURE__ */ o(O, { className: h("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
+                  /* @__PURE__ */ o(S, { className: h("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
                 ]
               },
               String(e.value)
@@ -116,6 +118,6 @@ const re = ({
   ] });
 };
 export {
-  re 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, { 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 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        onValueChange?.(value!);\r\n        if (closeOnSelect) setIsPopoverOpen(false);\r\n      }\r\n    },\r\n    [onValueChange, closeOnSelect, value],\r\n  );\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: T) => {\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    },\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  const showPlaceholder = value === undefined || value === \"\";\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 === value)?.label || placeholder;\r\n  }, [showPlaceholder, value, 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={value}\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 && value !== undefined && value !== 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={value !== undefined && value !== null ? String(value) : 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\", value === 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","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","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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"}
+{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { 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\n   * Extra content to be displayed in the combobox dropdown.\r\n   */\r\n  extraContent?: React.ReactNode;\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  extraContent,\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 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        onValueChange?.(value!);\r\n        if (closeOnSelect) setIsPopoverOpen(false);\r\n      }\r\n    },\r\n    [onValueChange, closeOnSelect, value],\r\n  );\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: T) => {\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    },\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  const showPlaceholder = value === undefined || value === \"\";\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 === value)?.label || placeholder;\r\n  }, [showPlaceholder, value, 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={value}\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 && value !== undefined && value !== 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={value !== undefined && value !== null ? String(value) : undefined} // highlight selected value on open\r\n          ref={commandRef}\r\n        >\r\n          {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n          {extraContent}\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\", value === 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","extraContent","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","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

@@ -79,7 +79,11 @@ type ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonE
      * @default false
      */
     clearable?: boolean;
+    /**
+     * Extra content to be displayed in the combobox dropdown.
+     */
+    extraContent?: React.ReactNode;
 };
-declare const Combobox: <T extends string | number>({ onValueChange, options, value, className, clearable, closeOnSelect, loading, disabled, placeholder, searchText, noResultsText, loadingText, emptyOptionsText, showSearchInput, modalPopover, ...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, modalPopover, extraContent, ...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,KAA0B,MAAM,OAAO,CAAC;AAQ/C,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,4CA8HlB,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,KAA0B,MAAM,OAAO,CAAC;AAQ/C,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;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,2NAkBxC,aAAa,CAAC,CAAC,CAAC,4CA+HlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,9 +1,11 @@
-import { TooltipProps, TooltipProviderProps, TooltipTriggerProps, TooltipContentProps } from '@radix-ui/react-tooltip';
+import { Content, TooltipContentProps as ContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps } from '@radix-ui/react-tooltip';
 import * as React from "react";
 declare const TooltipProvider: React.FC<TooltipProviderProps>;
 declare const Tooltip: React.FC<TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<Omit< TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type TooltipContentProps = React.ComponentProps<typeof TooltipContent>;
+declare const TooltipContent: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+type TooltipContentProps = ContentProps & {
+    ref: React.Ref<React.ElementRef<typeof Content>>;
+};
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, type TooltipProps, type TooltipContentProps, type TooltipTriggerProps, type TooltipProviderProps, };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAInJ,QAAA,MAAM,eAAe,gCAAW,CAAC;AAEjC,QAAA,MAAM,OAAO,wBAAO,CAAC;AAErB,QAAA,MAAM,cAAc,+FAAU,CAAC;AAE/B,QAAA,MAAM,cAAc,iLAiBnB,CAAC;AAEF,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,OAAO,EACP,mBAAmB,IAAI,YAAY,EAEnC,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAIjC,QAAA,MAAM,eAAe,gCAAW,CAAC;AAEjC,QAAA,MAAM,OAAO,wBAAO,CAAC;AAErB,QAAA,MAAM,cAAc,+FAAU,CAAC;AAE/B,QAAA,MAAM,cAAc,qFAelB,CAAC;AAEH,KAAK,mBAAmB,GAAG,YAAY,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAA;CAAE,CAAC;AAE/F,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,eAAe,EACf,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,CAAC"}