@andreagiugni/tailwind-dashboard-ui 1.0.4 → 1.0.6

package/README.md

@@ -199,11 +199,11 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 |---|---|
 | `Input` | `type`, `value` / `defaultValue`, `onChange`, `success`, `error`, `hint`, `disabled`, (+native input) (+override) |
 | `Label` | `htmlFor`, `children`, (+native label) |
-| `Select` | `options` (`{ value, label, icon? }[]`), `placeholder`, `defaultValue`, `onChange(value)`, `disabled` |
-| `MultiSelect` | `options`, `selected` / `defaultSelected`, `onChange`, `placeholder`, `disabled` |
+| `Select` | `options` (`{ value, label, icon? }[]`), `placeholder`, `defaultValue`, `onChange(value)`, `disabled`, `portal?` (default `true`, prevents clipping inside tables/cards) |
+| `MultiSelect` | `options`, `selected` / `defaultSelected`, `onChange`, `placeholder`, `disabled`, `portal?` (default `true`, prevents clipping inside tables/cards) |
 | `Checkbox` | `label`, `checked`, `onChange(checked)`, `disabled`, `checkedColor?` |
 | `Radio` / `RadioSm` | `id`, `name`, `value`, `checked`, `label`, `onChange(value)`, `disabled` |
-| `Switch` | `label`, `checked` / `defaultChecked`, `onChange(checked)`, `color` (blue/gray), `disabled` |
+| `Switch` | `label?`, `checked` / `defaultChecked`, `onChange(checked)`, `color` (blue/gray), `disabled` |
 | `TextArea` | `value`, `onChange`, `rows`, `success`, `error`, `hint`, `disabled` |
 | `FileInput` | `onChange`, `accept`, `multiple`, (+native input) |
 | `PasswordInput` | password field with a show/hide eye toggle, (+native input attrs) |

package/dist/index.cjs

@@ -632,6 +632,8 @@ var Input = ({
   style,
   ...rest
 }) => {
+  const placeholder = typeof rest.placeholder === "string" ? rest.placeholder.trim() : "";
+  const placeholderMinWidth = placeholder ? `${Math.min(Math.max(placeholder.length + 6, 18), 40)}ch` : void 0;
   const stateClass = disabled ? "text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10 dark:text-error-400 dark:border-error-500" : success ? "text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300 dark:text-success-400 dark:border-success-500" : "text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:text-white/90 dark:focus:border-brand-800";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -643,7 +645,11 @@ var Input = ({
           stateClass,
           className
         ),
-        style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+        style: {
+          minWidth: placeholderMinWidth,
+          ...styleOverride({ bgColor, textColor, borderColor }),
+          ...style
+        },
         ...rest
       }
     ),
@@ -807,7 +813,7 @@ function DataDrivenTable({
                 setSearch(e.target.value);
                 setPage(1);
               },
-              className: "max-w-[220px]"
+              className: "sm:w-auto"
             }
           )
         ] }),
@@ -2220,7 +2226,12 @@ var Switch = ({
   defaultChecked = false,
   disabled = false,
   onChange,
-  color = "blue"
+  color = "blue",
+  className,
+  onClick,
+  onKeyDown,
+  "aria-label": ariaLabel,
+  ...rest
 }) => {
   const isControlled = checked !== void 0;
   const [internalChecked, setInternalChecked] = React5.useState(defaultChecked);
@@ -2235,6 +2246,20 @@ var Switch = ({
       onChange(newCheckedState);
     }
   };
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      handleToggle();
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      handleToggle();
+    }
+  };
   const offTrack = "bg-gray-200 ring-1 ring-inset ring-gray-300 dark:bg-white/10 dark:ring-gray-700";
   const switchColors = color === "blue" ? {
     background: isChecked ? "bg-brand-500 " : offTrack,
@@ -2245,14 +2270,23 @@ var Switch = ({
     // Gray version
     knob: isChecked ? "translate-x-full bg-white" : "translate-x-0 bg-white"
   };
+  const hasLabel = label !== void 0 && label !== null && label !== "";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
+      role: "switch",
+      "aria-checked": isChecked,
+      "aria-disabled": disabled || void 0,
+      "aria-label": ariaLabel ?? (!hasLabel ? "Toggle switch" : void 0),
+      tabIndex: disabled ? -1 : 0,
       className: chunkYERNSNT4_cjs.cn(
         "flex cursor-pointer select-none items-center gap-3 text-sm font-medium",
-        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400"
+        disabled ? "text-gray-400" : "text-gray-700 dark:text-gray-400",
+        className
       ),
-      onClick: handleToggle,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2274,7 +2308,7 @@ var Switch = ({
             }
           )
         ] }),
-        label
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
       ]
     }
   );
@@ -2285,15 +2319,20 @@ var Select = ({
   onChange,
   className,
   defaultValue = "",
-  disabled = false
+  disabled = false,
+  portal = true
 }) => {
   const [selectedValue, setSelectedValue] = React5.useState(defaultValue);
   const [isOpen, setIsOpen] = React5.useState(false);
   const rootRef = React5.useRef(null);
+  const triggerRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const [menuPosition, setMenuPosition] = React5.useState();
   React5.useEffect(() => {
     if (!isOpen) return;
     const onPointerDown = (e) => {
-      if (rootRef.current && !rootRef.current.contains(e.target)) {
+      const target = e.target;
+      if (rootRef.current && !rootRef.current.contains(target) && !menuRef.current?.contains(target)) {
         setIsOpen(false);
       }
     };
@@ -2307,6 +2346,33 @@ var Select = ({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen]);
+  React5.useLayoutEffect(() => {
+    if (!isOpen || !portal) return;
+    const updatePosition = () => {
+      const trigger = triggerRef.current;
+      const menu = menuRef.current;
+      if (!trigger || !menu) return;
+      const rect = trigger.getBoundingClientRect();
+      const menuHeight = menu.offsetHeight;
+      const viewportPadding = 8;
+      const gap = 6;
+      const width = rect.width;
+      const fitsBelow = window.innerHeight - rect.bottom - gap >= menuHeight + viewportPadding;
+      const top = fitsBelow ? rect.bottom + gap : Math.max(viewportPadding, rect.top - gap - menuHeight);
+      const left = Math.min(
+        Math.max(viewportPadding, rect.left),
+        window.innerWidth - width - viewportPadding
+      );
+      setMenuPosition({ top, left, width });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, portal]);
   const toggleOpen = () => {
     if (!disabled) setIsOpen((prev) => !prev);
   };
@@ -2320,6 +2386,7 @@ var Select = ({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: toggleOpen,
         disabled,
@@ -2355,52 +2422,61 @@ var Select = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      "ul",
-      {
-        role: "listbox",
-        className: chunkYERNSNT4_cjs.cn(
-          "absolute left-0 top-full mt-1.5 max-h-60 w-full overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900",
-          chunkTF3G3E72_cjs.layers.menu
-        ),
-        children: options.map((option) => {
-          const isSelected = option.value === selectedValue;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "li",
-            {
-              role: "option",
-              "aria-selected": isSelected,
-              onClick: () => handleSelect(option.value),
-              className: chunkYERNSNT4_cjs.cn(
-                "flex cursor-pointer items-center justify-between px-4 py-2 text-sm transition hover:bg-gray-50 dark:hover:bg-white/5",
-                isSelected ? "bg-brand-50 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-                  option.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
+    isOpen && (() => {
+      const menu = /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          ref: menuRef,
+          role: "listbox",
+          className: chunkYERNSNT4_cjs.cn(
+            "max-h-60 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900",
+            portal ? chunkYERNSNT4_cjs.cn("fixed", chunkTF3G3E72_cjs.layers.portal) : chunkYERNSNT4_cjs.cn("absolute left-0 top-full mt-1.5 w-full", chunkTF3G3E72_cjs.layers.menu)
+          ),
+          style: {
+            ...portal && !menuPosition ? { visibility: "hidden" } : void 0,
+            ...portal ? menuPosition : void 0
+          },
+          children: options.map((option) => {
+            const isSelected = option.value === selectedValue;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => handleSelect(option.value),
+                className: chunkYERNSNT4_cjs.cn(
+                  "flex cursor-pointer items-center justify-between px-4 py-2 text-sm transition hover:bg-gray-50 dark:hover:bg-white/5",
+                  isSelected ? "bg-brand-50 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                    option.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
+                        children: option.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+                  ] }),
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                    lucideReact.Check,
                     {
-                      "aria-hidden": "true",
-                      className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:size-4",
-                      children: option.icon
+                      className: "ml-2 size-4 shrink-0 stroke-current",
+                      "aria-hidden": "true"
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
-                ] }),
-                isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.Check,
-                  {
-                    className: "ml-2 size-4 shrink-0 stroke-current",
-                    "aria-hidden": "true"
-                  }
-                )
-              ]
-            },
-            option.value
-          );
-        })
-      }
-    )
+                  )
+                ]
+              },
+              option.value
+            );
+          })
+        }
+      );
+      if (!portal || typeof document === "undefined") return menu;
+      return reactDom.createPortal(menu, document.body);
+    })()
   ] });
 };
 var MultiSelect = ({
@@ -2408,10 +2484,60 @@ var MultiSelect = ({
   options,
   defaultSelected = [],
   onChange,
-  disabled = false
+  disabled = false,
+  portal = true
 }) => {
   const [selectedOptions, setSelectedOptions] = React5.useState(defaultSelected);
   const [isOpen, setIsOpen] = React5.useState(false);
+  const rootRef = React5.useRef(null);
+  const triggerRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const [menuPosition, setMenuPosition] = React5.useState();
+  React5.useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (rootRef.current && !rootRef.current.contains(target) && !menuRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+  React5.useLayoutEffect(() => {
+    if (!isOpen || !portal) return;
+    const updatePosition = () => {
+      const trigger = triggerRef.current;
+      const menu = menuRef.current;
+      if (!trigger || !menu) return;
+      const rect = trigger.getBoundingClientRect();
+      const menuHeight = menu.offsetHeight;
+      const viewportPadding = 8;
+      const gap = 6;
+      const width = rect.width;
+      const fitsBelow = window.innerHeight - rect.bottom - gap >= menuHeight + viewportPadding;
+      const top = fitsBelow ? rect.bottom + gap : Math.max(viewportPadding, rect.top - gap - menuHeight);
+      const left = Math.min(
+        Math.max(viewportPadding, rect.left),
+        window.innerWidth - width - viewportPadding
+      );
+      setMenuPosition({ top, left, width });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isOpen, portal]);
   const toggleDropdown = () => {
     if (disabled) return;
     setIsOpen((prev) => !prev);
@@ -2429,94 +2555,110 @@ var MultiSelect = ({
   const selectedValuesText = selectedOptions.map(
     (value) => options.find((option) => option.value === value)?.text || ""
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: "w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative inline-block w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex h-11 rounded-lg border border-gray-300 bg-white py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pl-2.5 pr-2 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-initial max-w-full", children: text }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row-reverse flex-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  onClick: () => removeOption(index, selectedOptions[index]),
-                  className: "pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", role: "button", "aria-hidden": "true" })
-                }
-              ) })
-            ]
-          },
-          index
-        )) : /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            placeholder: "Select option",
-            className: "w-full h-full p-1 pr-2 text-sm bg-transparent border-0 outline-hidden appearance-none placeholder:text-gray-800 focus:border-0 focus:outline-hidden focus:ring-0 dark:placeholder:text-white/90",
-            readOnly: true,
-            value: "Select option"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center py-1 pl-1 pr-1 w-7", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: toggleDropdown,
-            className: "w-5 h-5 text-gray-700 outline-hidden cursor-pointer focus:outline-hidden dark:text-gray-400",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronDown,
-              {
-                className: `size-4 stroke-current ${isOpen ? "rotate-180" : ""}`,
-                "aria-hidden": "true"
-              }
-            )
-          }
-        ) })
-      ] }) }),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: chunkYERNSNT4_cjs.cn(
-            "absolute left-0 top-full max-h-select w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
-            chunkTF3G3E72_cjs.layers.menu
-          ),
-          onClick: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
-            const isSelected = selectedOptions.includes(option.value);
-            return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ref: triggerRef,
+          className: "mb-2 flex h-11 rounded-lg border border-gray-300 bg-white py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: `w-full cursor-pointer rounded-t border-b border-gray-200 hover:bg-brand-500/5 dark:border-gray-800`,
-                onClick: () => handleSelect(option.value),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                className: "group flex items-center justify-center rounded-full border-[0.7px] border-transparent bg-gray-100 py-1 pl-2.5 pr-2 text-sm text-gray-800 hover:border-gray-200 dark:bg-gray-800 dark:text-white/90 dark:hover:border-gray-800",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-initial max-w-full", children: text }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row-reverse flex-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      onClick: () => removeOption(index, selectedOptions[index]),
+                      className: "pl-2 text-gray-500 cursor-pointer group-hover:text-gray-400 dark:text-gray-400",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4", role: "button", "aria-hidden": "true" })
+                    }
+                  ) })
+                ]
+              },
+              index
+            )) : /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                placeholder: "Select option",
+                className: "w-full h-full p-1 pr-2 text-sm bg-transparent border-0 outline-hidden appearance-none placeholder:text-gray-800 focus:border-0 focus:outline-hidden focus:ring-0 dark:placeholder:text-white/90",
+                readOnly: true,
+                value: "Select option"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center py-1 pl-1 pr-1 w-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggleDropdown,
+                className: "w-5 h-5 text-gray-700 outline-hidden cursor-pointer focus:outline-hidden dark:text-gray-400",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.ChevronDown,
                   {
-                    className: `relative flex w-full items-center justify-between p-2 pl-2 ${isSelected ? "bg-brand-500/10" : ""}`,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: `mx-2 leading-6 ${isSelected ? "font-medium text-brand-600 dark:text-brand-400" : "text-gray-800 dark:text-white/90"}`,
-                          children: option.text
-                        }
-                      ),
-                      isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                        lucideReact.Check,
-                        {
-                          className: "mr-2 size-4 shrink-0 stroke-current text-brand-500",
-                          "aria-hidden": "true"
-                        }
-                      )
-                    ]
+                    className: `size-4 stroke-current ${isOpen ? "rotate-180" : ""}`,
+                    "aria-hidden": "true"
                   }
                 )
               }
-            ) }, index);
-          }) })
+            ) })
+          ]
         }
-      )
+      ) }),
+      isOpen && (() => {
+        const menu = /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: menuRef,
+            className: chunkYERNSNT4_cjs.cn(
+              "max-h-select overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900",
+              portal ? chunkYERNSNT4_cjs.cn("fixed", chunkTF3G3E72_cjs.layers.portal) : chunkYERNSNT4_cjs.cn("absolute left-0 top-full w-full", chunkTF3G3E72_cjs.layers.menu)
+            ),
+            style: {
+              ...portal && !menuPosition ? { visibility: "hidden" } : void 0,
+              ...portal ? menuPosition : void 0
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: options.map((option, index) => {
+              const isSelected = selectedOptions.includes(option.value);
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `w-full cursor-pointer rounded-t border-b border-gray-200 hover:bg-brand-500/5 dark:border-gray-800`,
+                  onClick: () => handleSelect(option.value),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: `relative flex w-full items-center justify-between p-2 pl-2 ${isSelected ? "bg-brand-500/10" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: `mx-2 leading-6 ${isSelected ? "font-medium text-brand-600 dark:text-brand-400" : "text-gray-800 dark:text-white/90"}`,
+                            children: option.text
+                          }
+                        ),
+                        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.Check,
+                          {
+                            className: "mr-2 size-4 shrink-0 stroke-current text-brand-500",
+                            "aria-hidden": "true"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }, index);
+            }) })
+          }
+        );
+        if (!portal || typeof document === "undefined") return menu;
+        return reactDom.createPortal(menu, document.body);
+      })()
     ] }) })
   ] });
 };