@seekho/ui 0.1.32 → 0.1.34

package/dist/index.mjs

@@ -1,8 +1,11 @@
-import React8, { createContext, useState, useId, useRef, useEffect, Children, isValidElement, useCallback, cloneElement, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React10, { createContext, useState, useId, useRef, useEffect, useCallback, Children, isValidElement, cloneElement, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import ReactDOM, { createPortal } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -18,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -150,6 +154,62 @@ var AccordionDetails = ({
     }
   );
 };
+var typeMap = {
+  success: "bg-green-100 text-green-500",
+  error: "bg-red-100 text-red-500",
+  warning: "bg-orange-100 text-orange-500",
+  default: "bg-gray-100 text-gray-500"
+};
+var Chip = ({
+  label,
+  type = "default",
+  style,
+  deleteIcon,
+  disabled = false,
+  className = "",
+  onClick,
+  onDelete
+}) => {
+  var _a;
+  const typeClass = (_a = typeMap[type]) != null ? _a : typeMap.default;
+  const cursorClass = disabled ? "opacity-50 cursor-not-allowed" : onClick ? "cursor-pointer" : "cursor-default";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      style,
+      onClick: !disabled && onClick ? onClick : void 0,
+      className: `inline-flex items-center gap-1 rounded-full w-fit px-3 py-[6px] text-[12px] capitalize ${typeClass} ${cursorClass} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "leading-none", children: label }),
+        onDelete && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!disabled) onDelete(e);
+            },
+            className: "flex items-center cursor-pointer ml-0.5 opacity-60 hover:opacity-100",
+            children: deleteIcon != null ? deleteIcon : /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 function AutoComplete({
   label,
   value,
@@ -390,7 +450,7 @@ function AutoComplete({
                   isSelected({ option }) ? "font-semibold" : ""
                 ].join(" ")
               };
-              return renderOption ? /* @__PURE__ */ jsx(React8.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsx(
+              return renderOption ? /* @__PURE__ */ jsx(React10.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsx(
                 "li",
                 {
                   onMouseDown: () => handleSelect({ option }),
@@ -633,7 +693,7 @@ var CustomAnchor = ({
     }
   );
 };
-var CustomInput = React8.forwardRef(
+var CustomInput = React10.forwardRef(
   (_a, ref) => {
     var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
     return /* @__PURE__ */ jsx(
@@ -813,6 +873,123 @@ var FilterDrawer = ({
     }
   );
 };
+var GAP = 4;
+var PAD = 6;
+function reposition(menu, anchorEl, align) {
+  const rect = anchorEl.getBoundingClientRect();
+  const mw = menu.offsetWidth;
+  const mh = menu.offsetHeight;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let top = rect.bottom + GAP + mh > vh - PAD ? Math.max(PAD, rect.top - mh - GAP) : rect.bottom + GAP;
+  let left = align === "right" ? rect.right - mw : rect.left;
+  left = Math.max(PAD, Math.min(left, vw - mw - PAD));
+  menu.style.top = `${top}px`;
+  menu.style.left = `${left}px`;
+  menu.style.minWidth = `${rect.width}px`;
+  menu.style.opacity = "1";
+}
+var Menu = ({
+  anchorEl,
+  open,
+  onClose,
+  children,
+  align = "left",
+  className = ""
+}) => {
+  const menuRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  useEffect(() => {
+    if (!open || !anchorEl) return;
+    const id = requestAnimationFrame(() => {
+      if (menuRef.current) reposition(menuRef.current, anchorEl, align);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [open, anchorEl, align]);
+  useEffect(() => {
+    if (!open || !anchorEl) return;
+    const update = () => {
+      if (menuRef.current) reposition(menuRef.current, anchorEl, align);
+    };
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorEl, align]);
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handleMouseDown = (e) => {
+      var _a;
+      if ((anchorEl == null ? void 0 : anchorEl.contains(e.target)) || ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)))
+        return;
+      onCloseRef.current();
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [open, anchorEl]);
+  if (!open) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        style: {
+          position: "fixed",
+          top: -9999,
+          left: -9999,
+          opacity: 0,
+          zIndex: 9999,
+          transition: "opacity 100ms ease"
+        },
+        className: `bg-white rounded shadow-lg border border-gray-100 py-1 max-w-[calc(100vw-12px)] ${className}`,
+        children
+      }
+    ),
+    document.body
+  );
+};
+var MenuItem = ({
+  onClick,
+  children,
+  disabled = false,
+  selected = false,
+  icon,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "menuitem",
+      "aria-disabled": disabled,
+      onClick: disabled ? void 0 : onClick,
+      className: [
+        "px-3 py-2 flex gap-x-3 items-center text-[14px] tracking-wide min-w-0 w-full",
+        disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-gray-50",
+        selected ? "bg-gray-100 font-medium" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex items-center shrink-0", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children })
+      ]
+    }
+  );
+};
+var MenuDivider = () => /* @__PURE__ */ jsx("hr", { className: "my-1 border-gray-100" });
 
 // src/utils/modalStack.ts
 var stack = [];
@@ -1688,6 +1865,228 @@ var StagingAlert = ({
     ] })
   ] });
 };
+var sizeStyles = {
+  small: { padding: "4px 10px", fontSize: "13px" },
+  medium: { padding: "7px 14px", fontSize: "16px" },
+  large: { padding: "10px 16px", fontSize: "16px" }
+};
+var Select = ({
+  value,
+  onChange,
+  children,
+  disabled = false,
+  placeholder = "Select...",
+  size = "medium",
+  error = false,
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownStyle, setDropdownStyle] = useState({});
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const options = React10.Children.toArray(children).filter(Boolean).map((child) => {
+    var _a, _b, _c, _d, _e;
+    const c = child;
+    return {
+      value: (_b = (_a = c.props) == null ? void 0 : _a.value) != null ? _b : "",
+      label: (_c = c.props) == null ? void 0 : _c.children,
+      disabled: (_e = (_d = c.props) == null ? void 0 : _d.disabled) != null ? _e : false
+    };
+  });
+  const selectedOption = options.find(
+    (opt) => String(opt.value) === String(value)
+  );
+  const computePosition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const dropdownHeight = Math.min(options.length * 40, 240);
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openAbove = spaceBelow < dropdownHeight + 8 && rect.top > dropdownHeight;
+    setDropdownStyle(__spreadProps(__spreadValues({
+      position: "fixed"
+    }, openAbove ? { bottom: window.innerHeight - rect.top + 2 } : { top: rect.bottom + 2 }), {
+      left: rect.left,
+      width: rect.width,
+      zIndex: 9999
+    }));
+  }, [options.length]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target) && (!dropdownRef.current || !dropdownRef.current.contains(e.target))) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          var _a;
+          let next = prev + 1;
+          while (next < options.length && ((_a = options[next]) == null ? void 0 : _a.disabled)) next++;
+          return next < options.length ? next : prev;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          var _a;
+          let next = prev - 1;
+          while (next >= 0 && ((_a = options[next]) == null ? void 0 : _a.disabled)) next--;
+          return next >= 0 ? next : prev;
+        });
+      } else if (e.key === "Enter" && focusedIndex >= 0) {
+        const opt = options[focusedIndex];
+        if (opt && !opt.disabled) {
+          onChange({ target: { value: opt.value } });
+          setIsOpen(false);
+          setFocusedIndex(-1);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, focusedIndex, options, onChange]);
+  useEffect(() => {
+    if (focusedIndex >= 0 && dropdownRef.current) {
+      const item = dropdownRef.current.children[focusedIndex];
+      item == null ? void 0 : item.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIndex]);
+  useEffect(() => {
+    if (!isOpen) return;
+    window.addEventListener("scroll", computePosition, true);
+    window.addEventListener("resize", computePosition);
+    return () => {
+      window.removeEventListener("scroll", computePosition, true);
+      window.removeEventListener("resize", computePosition);
+    };
+  }, [isOpen, computePosition]);
+  const handleOpen = () => {
+    if (disabled) return;
+    if (!isOpen) {
+      computePosition();
+      setFocusedIndex(
+        options.findIndex((opt) => String(opt.value) === String(value))
+      );
+    }
+    setIsOpen((prev) => !prev);
+  };
+  const handleSelect = (opt) => {
+    if (opt.disabled) return;
+    onChange({ target: { value: opt.value } });
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  const borderColor = error ? "#ef4444" : isOpen ? "#534f8f" : "rgba(0,0,0,0.23)";
+  const { padding, fontSize } = sizeStyles[size];
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: triggerRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: handleOpen,
+        className: "w-full flex items-center justify-between rounded-md bg-white text-left outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+        style: { padding, border: `1px solid ${borderColor}`, transition: "border-color 0.15s ease" },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate flex-1", style: { fontSize }, children: selectedOption ? selectedOption.label : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: placeholder }) }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "18",
+              height: "18",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: `shrink-0 ml-2 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`,
+              children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: dropdownRef,
+          style: dropdownStyle,
+          className: "bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-y-auto",
+          children: options.map((opt, i) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              onClick: () => handleSelect(opt),
+              className: `px-4 py-2 text-[14px] ${opt.disabled ? "text-gray-400 cursor-not-allowed" : String(opt.value) === String(value) ? "bg-purple-100 text-[#534f8f] font-medium cursor-pointer" : focusedIndex === i ? "bg-gray-100 text-gray-800 cursor-pointer" : "text-gray-800 hover:bg-gray-50 cursor-pointer"}`,
+              children: opt.label
+            },
+            i
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/Select/SelectOption.tsx
+var SelectOption = (_props) => null;
+var Switch = ({
+  checked,
+  onChange,
+  disabled = false,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: disabled ? void 0 : onChange,
+      className: `relative inline-flex shrink-0 border-0 bg-transparent p-0 focus:outline-none ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"} ${className}`,
+      style: { width: 58, height: 38 },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute rounded-full transition-colors duration-200",
+            style: {
+              width: 34,
+              height: 14,
+              top: 12,
+              left: 12,
+              backgroundColor: checked ? "rgba(83,79,143,0.5)" : "rgba(0,0,0,0.38)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute rounded-full transition-all duration-200",
+            style: {
+              width: 20,
+              height: 20,
+              top: 9,
+              left: checked ? 29 : 9,
+              backgroundColor: checked ? "#534f8f" : "#fafafa",
+              boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 var SCROLL_STEP = 120;
 function Tabs({
   value,
@@ -1862,26 +2261,43 @@ function Tab({
     }
   );
 }
-var placementClass = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  "top-start": "bottom-full left-0 mb-2",
-  "top-end": "bottom-full right-0 mb-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-  "bottom-start": "top-full left-0 mt-2",
-  "bottom-end": "top-full right-0 mt-2",
-  left: "right-full top-1/2 -translate-y-1/2 mr-2",
-  "left-start": "right-full top-0 mr-2",
-  "left-end": "right-full bottom-0 mr-2",
-  right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  "right-start": "left-full top-0 ml-2",
-  "right-end": "left-full bottom-0 ml-2"
-};
+var GAP2 = 8;
+var VIEWPORT_PADDING = 6;
 var arrowClass = {
   top: "top-full left-1/2 -translate-x-1/2 border-t-gray-600/80 border-x-transparent border-b-transparent",
   bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-gray-600/80 border-x-transparent border-t-transparent",
   left: "left-full top-1/2 -translate-y-1/2 border-l-gray-600/80 border-y-transparent border-r-transparent",
   right: "right-full top-1/2 -translate-y-1/2 border-r-gray-600/80 border-y-transparent border-l-transparent"
 };
+function getPosition(trigger, tooltip, placement) {
+  const tw = tooltip.offsetWidth;
+  const th = tooltip.offsetHeight;
+  const { top, left, right, bottom, width, height } = trigger;
+  const positions = {
+    top: { top: top - th - GAP2, left: left + width / 2 - tw / 2 },
+    "top-start": { top: top - th - GAP2, left },
+    "top-end": { top: top - th - GAP2, left: right - tw },
+    bottom: { top: bottom + GAP2, left: left + width / 2 - tw / 2 },
+    "bottom-start": { top: bottom + GAP2, left },
+    "bottom-end": { top: bottom + GAP2, left: right - tw },
+    left: { top: top + height / 2 - th / 2, left: left - tw - GAP2 },
+    "left-start": { top, left: left - tw - GAP2 },
+    "left-end": { top: bottom - th, left: left - tw - GAP2 },
+    right: { top: top + height / 2 - th / 2, left: right + GAP2 },
+    "right-start": { top, left: right + GAP2 },
+    "right-end": { top: bottom - th, left: right + GAP2 }
+  };
+  const pos = positions[placement];
+  pos.left = Math.max(
+    VIEWPORT_PADDING,
+    Math.min(pos.left, window.innerWidth - tw - VIEWPORT_PADDING)
+  );
+  pos.top = Math.max(
+    VIEWPORT_PADDING,
+    Math.min(pos.top, window.innerHeight - th - VIEWPORT_PADDING)
+  );
+  return pos;
+}
 function Tooltip({
   title,
   children,
@@ -1894,10 +2310,34 @@ function Tooltip({
   disabled = false
 }) {
   const [visible, setVisible] = useState(false);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const enterTimer = useRef(null);
+  const leaveTimer = useRef(null);
   const isControlled = controlledOpen !== void 0;
   const show = isControlled ? controlledOpen : visible;
-  const enterTimer = React8.useRef(null);
-  const leaveTimer = React8.useRef(null);
+  const positionAndShow = useCallback(() => {
+    const tooltip = tooltipRef.current;
+    const trigger2 = triggerRef.current;
+    if (!tooltip || !trigger2) return;
+    const pos = getPosition(
+      trigger2.getBoundingClientRect(),
+      tooltip,
+      placement
+    );
+    tooltip.style.top = `${pos.top}px`;
+    tooltip.style.left = `${pos.left}px`;
+    tooltip.style.opacity = "1";
+  }, [placement]);
+  useEffect(() => {
+    if (!show) {
+      const tooltip = tooltipRef.current;
+      if (tooltip) tooltip.style.opacity = "0";
+      return;
+    }
+    const id = requestAnimationFrame(positionAndShow);
+    return () => cancelAnimationFrame(id);
+  }, [show, positionAndShow]);
   const handleEnter = () => {
     if (disabled || isControlled) return;
     if (leaveTimer.current) clearTimeout(leaveTimer.current);
@@ -1908,44 +2348,76 @@ function Tooltip({
     if (enterTimer.current) clearTimeout(enterTimer.current);
     leaveTimer.current = setTimeout(() => setVisible(false), leaveDelay);
   };
+  useEffect(() => {
+    return () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    };
+  }, []);
+  if (!React10.isValidElement(children)) return children;
   const side = placement.split("-")[0];
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const trigger = React10.cloneElement(
+    children,
     {
-      className: "relative inline-flex",
-      onMouseEnter: handleEnter,
-      onMouseLeave: handleLeave,
-      onFocus: handleEnter,
-      onBlur: handleLeave,
-      children: [
-        children,
-        show && title && !disabled && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            role: "tooltip",
-            className: [
-              "absolute z-[9999] max-w-[300px] px-2 py-1.5 whitespace-nowrap",
-              "bg-gray-600/80 text-white text-xs rounded shadow-md pointer-events-none",
-              "animate-in fade-in-0 zoom-in-95 duration-100",
-              placementClass[placement],
-              className || ""
-            ].join(" "),
-            children: [
-              arrow && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: ["absolute w-0 h-0 border-4", arrowClass[side]].join(
-                    " "
-                  )
-                }
-              ),
-              title
-            ]
-          }
-        )
-      ]
+      ref: triggerRef,
+      onMouseEnter: (e) => {
+        var _a, _b;
+        handleEnter();
+        (_b = (_a = children.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
+      },
+      onMouseLeave: (e) => {
+        var _a, _b;
+        handleLeave();
+        (_b = (_a = children.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
+      },
+      onFocus: (e) => {
+        var _a, _b;
+        handleEnter();
+        (_b = (_a = children.props).onFocus) == null ? void 0 : _b.call(_a, e);
+      },
+      onBlur: (e) => {
+        var _a, _b;
+        handleLeave();
+        (_b = (_a = children.props).onBlur) == null ? void 0 : _b.call(_a, e);
+      }
     }
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    createPortal(
+      title ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          role: "tooltip",
+          style: {
+            position: "fixed",
+            top: -9999,
+            left: -9999,
+            opacity: 0,
+            transition: "opacity 100ms ease"
+          },
+          className: [
+            "z-[99] max-w-[300px] px-2 py-1.5",
+            "bg-gray-600/80 text-white text-xs rounded shadow-md pointer-events-none",
+            className || ""
+          ].join(" "),
+          children: [
+            arrow && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: ["absolute w-0 h-0 border-4", arrowClass[side]].join(
+                  " "
+                )
+              }
+            ),
+            title
+          ]
+        }
+      ) : null,
+      document.body
+    )
+  ] });
 }
 function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState(() => {
@@ -1981,4 +2453,4 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue, remove];
 }
 
-export { Accordion, AccordionDetails, AccordionSummary, AutoComplete, Breadcrumb, ButtonLoader, CopyId, CustomAnchor, CustomInput, Drawer, FilterDrawer, InputTitleWithRequired, Modal, MonthYearPicker, Pagination, ReadMore, SearchBar, StagingAlert, Tab, Tabs, Tooltip, cn, handleAllyProps, handleCopyTextToClipboard, useLocalStorage };
+export { Accordion, AccordionDetails, AccordionSummary, AutoComplete, Breadcrumb, ButtonLoader, Chip, CopyId, CustomAnchor, CustomInput, Drawer, FilterDrawer, InputTitleWithRequired, Menu, MenuDivider, MenuItem, Modal, MonthYearPicker, Pagination, ReadMore, SearchBar, Select, SelectOption, StagingAlert, Switch, Tab, Tabs, Tooltip, cn, handleAllyProps, handleCopyTextToClipboard, useLocalStorage };