@seekho/ui 0.1.22 → 0.1.26

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import React2, { createContext, useState, useId, useRef, useEffect, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React2, { createContext, useState, useId, useRef, useEffect, Children, isValidElement, useCallback, cloneElement, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { createPortal } from 'react-dom';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -751,7 +752,7 @@ var FilterDrawer = ({
       open,
       anchor,
       onClose: handleClose,
-      className: drawerClassName || "w-[450px]",
+      className: drawerClassName || "w-full lg:!w-[30%]",
       children: /* @__PURE__ */ jsxs("div", { className: "relative h-full bg-white flex flex-col justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 bg-gray-100 flex justify-between items-center z-10", children: [
           /* @__PURE__ */ jsx("h6", { className: "text-lg font-bold flex items-center gap-1", children: title }),
@@ -783,6 +784,7 @@ var FilterDrawer = ({
         /* @__PURE__ */ jsx(
           "div",
           {
+            id: "HideScroll",
             className: [
               "flex-1 overflow-auto px-2 pb-3",
               childrenClassName || ""
@@ -961,6 +963,564 @@ function Modal({
     }
   ) });
 }
+var MONTHS_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var MONTHS_FULL = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var colorMap = {
+  skprimary: {
+    triggerOpen: "border-skprimary bg-skprimary/10 text-skprimary",
+    triggerIcon: "text-skprimary",
+    monthSelected: "bg-skprimary text-white shadow-sm",
+    monthHover: "hover:bg-skprimary/10 hover:text-skprimary"
+  },
+  blue: {
+    triggerOpen: "border-blue-400 bg-blue-50 text-blue-600",
+    triggerIcon: "text-blue-500",
+    monthSelected: "bg-blue-600 text-white shadow-sm",
+    monthHover: "hover:bg-blue-50 hover:text-blue-600"
+  },
+  green: {
+    triggerOpen: "border-green-400 bg-green-50 text-green-600",
+    triggerIcon: "text-green-500",
+    monthSelected: "bg-green-600 text-white shadow-sm",
+    monthHover: "hover:bg-green-50 hover:text-green-600"
+  },
+  purple: {
+    triggerOpen: "border-purple-400 bg-purple-50 text-purple-600",
+    triggerIcon: "text-purple-500",
+    monthSelected: "bg-purple-600 text-white shadow-sm",
+    monthHover: "hover:bg-purple-50 hover:text-purple-600"
+  },
+  red: {
+    triggerOpen: "border-red-400 bg-red-50 text-red-600",
+    triggerIcon: "text-red-500",
+    monthSelected: "bg-red-600 text-white shadow-sm",
+    monthHover: "hover:bg-red-50 hover:text-red-600"
+  },
+  orange: {
+    triggerOpen: "border-orange-400 bg-orange-50 text-orange-600",
+    triggerIcon: "text-orange-500",
+    monthSelected: "bg-orange-600 text-white shadow-sm",
+    monthHover: "hover:bg-orange-50 hover:text-orange-600"
+  },
+  pink: {
+    triggerOpen: "border-pink-400 bg-pink-50 text-pink-600",
+    triggerIcon: "text-pink-500",
+    monthSelected: "bg-pink-600 text-white shadow-sm",
+    monthHover: "hover:bg-pink-50 hover:text-pink-600"
+  },
+  teal: {
+    triggerOpen: "border-teal-400 bg-teal-50 text-teal-600",
+    triggerIcon: "text-teal-500",
+    monthSelected: "bg-teal-600 text-white shadow-sm",
+    monthHover: "hover:bg-teal-50 hover:text-teal-600"
+  }
+};
+var triggerSizeClass = {
+  sm: "px-2.5 py-1 text-[12px] gap-x-1.5",
+  md: "px-3 py-1.5 text-[13px] gap-x-2",
+  lg: "px-4 py-2 text-[14px] gap-x-2"
+};
+var iconSizeClass = {
+  sm: "w-3 h-3",
+  md: "w-3.5 h-3.5",
+  lg: "w-4 h-4"
+};
+var triggerVariantBase = {
+  outlined: "border border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50",
+  ghost: "border border-transparent bg-transparent text-gray-600 hover:bg-gray-100",
+  plain: "border border-transparent bg-transparent text-gray-600 hover:text-gray-900"
+};
+var isAfter = (a, b) => a.year > b.year || a.year === b.year && a.month > b.month;
+var isBefore = (a, b) => a.year < b.year || a.year === b.year && a.month < b.month;
+var isSame = (a, b) => a.year === b.year && a.month === b.month;
+var MonthYearPicker = ({
+  month,
+  year,
+  onChange,
+  disableFuture = true,
+  disablePast = false,
+  minDate,
+  maxDate,
+  placement = "right",
+  variant = "outlined",
+  size = "md",
+  color = "skprimary",
+  disabled = false,
+  className,
+  triggerClassName,
+  dropdownClassName
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [pickerYear, setPickerYear] = useState(year);
+  const ref = useRef(null);
+  const now = /* @__PURE__ */ new Date();
+  const currentMonth = now.getMonth() + 1;
+  const currentYear = now.getFullYear();
+  const theme = colorMap[color];
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+  };
+  const handleSelectMonth = (monthIndex) => {
+    onChange({ month: monthIndex + 1, year: pickerYear });
+    setIsOpen(false);
+  };
+  const handlePrevYear = () => setPickerYear((y) => y - 1);
+  const handleNextYear = () => setPickerYear((y) => y + 1);
+  const isMonthDisabled = (monthIndex) => {
+    const candidate = { month: monthIndex + 1, year: pickerYear };
+    const today = { month: currentMonth, year: currentYear };
+    if (disableFuture && isAfter(candidate, today)) return true;
+    if (disablePast && isBefore(candidate, today)) return true;
+    if (minDate && isBefore(candidate, minDate)) return true;
+    if (maxDate && isAfter(candidate, maxDate)) return true;
+    return false;
+  };
+  const isPrevYearDisabled = () => {
+    if (minDate && pickerYear - 1 < minDate.year) return true;
+    return false;
+  };
+  const isNextYearDisabled = () => {
+    if (disableFuture && pickerYear >= currentYear) return true;
+    if (maxDate && pickerYear >= maxDate.year) return true;
+    return false;
+  };
+  useEffect(() => {
+    setPickerYear(year);
+  }, [year]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: ["relative inline-block", className || ""].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggle,
+            disabled,
+            className: [
+              "flex items-center font-medium rounded-lg transition-all",
+              triggerSizeClass[size],
+              isOpen ? theme.triggerOpen : triggerVariantBase[variant],
+              disabled ? "opacity-40 cursor-not-allowed pointer-events-none" : "cursor-pointer",
+              triggerClassName || ""
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: [
+                    iconSizeClass[size],
+                    isOpen ? theme.triggerIcon : "text-gray-400"
+                  ].join(" "),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { children: [
+                MONTHS_FULL[month - 1],
+                ", ",
+                year
+              ] }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: [
+                    iconSizeClass[size],
+                    "transition-transform",
+                    isOpen ? `rotate-180 ${theme.triggerIcon}` : "text-gray-400"
+                  ].join(" "),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2.5,
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: [
+              "absolute top-[calc(100%+8px)] z-50",
+              "bg-white border border-gray-100 rounded-2xl shadow-xl p-4 w-[240px]",
+              placement === "right" ? "left-0" : "right-0",
+              dropdownClassName || ""
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handlePrevYear,
+                    disabled: isPrevYearDisabled(),
+                    className: [
+                      "w-7 h-7 flex items-center justify-center rounded-full text-lg leading-none",
+                      isPrevYearDisabled() ? "text-gray-200 cursor-not-allowed" : "hover:bg-gray-100 text-gray-500"
+                    ].join(" "),
+                    children: "\u2039"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-[14px] font-semibold text-gray-800 tracking-wide", children: pickerYear }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleNextYear,
+                    disabled: isNextYearDisabled(),
+                    className: [
+                      "w-7 h-7 flex items-center justify-center rounded-full text-lg leading-none",
+                      isNextYearDisabled() ? "text-gray-200 cursor-not-allowed" : "hover:bg-gray-100 text-gray-500"
+                    ].join(" "),
+                    children: "\u203A"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTHS_SHORT.map((m, i) => {
+                const isSelected = isSame(
+                  { month: i + 1, year: pickerYear },
+                  { month, year }
+                );
+                const isDisabled = isMonthDisabled(i);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDisabled,
+                    onClick: () => !isDisabled && handleSelectMonth(i),
+                    className: [
+                      "py-2 rounded-xl text-[12px] font-medium transition-colors",
+                      isDisabled ? "text-gray-300 cursor-not-allowed" : isSelected ? theme.monthSelected : `text-gray-600 ${theme.monthHover}`
+                    ].join(" "),
+                    children: m
+                  },
+                  m
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function range(start, end) {
+  return Array.from(
+    { length: Math.max(end - start + 1, 0) },
+    (_, i) => start + i
+  );
+}
+function buildItems(count, page, siblingCount, boundaryCount, showFirstButton, showLastButton, hidePrevButton, hideNextButton) {
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(
+    Math.max(count - boundaryCount + 1, boundaryCount + 1),
+    count
+  );
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : count - 1
+  );
+  const items = [];
+  if (showFirstButton) items.push("first");
+  if (!hidePrevButton) items.push("previous");
+  items.push(...startPages);
+  if (siblingsStart > boundaryCount + 2) {
+    items.push("start-ellipsis");
+  } else if (boundaryCount + 1 < count - boundaryCount) {
+    items.push(boundaryCount + 1);
+  }
+  items.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < count - boundaryCount - 1) {
+    items.push("end-ellipsis");
+  } else if (count - boundaryCount > boundaryCount) {
+    items.push(count - boundaryCount);
+  }
+  items.push(...endPages);
+  if (!hideNextButton) items.push("next");
+  if (showLastButton) items.push("last");
+  return items;
+}
+var iconSize = {
+  small: "w-3 h-3",
+  medium: "w-4 h-4",
+  large: "w-5 h-5"
+};
+function ChevronFirst({ size }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className: iconSize[size],
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "11 17 6 12 11 7" }),
+        /* @__PURE__ */ jsx("polyline", { points: "18 17 13 12 18 7" })
+      ]
+    }
+  );
+}
+function ChevronLast({ size }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className: iconSize[size],
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "13 17 18 12 13 7" }),
+        /* @__PURE__ */ jsx("polyline", { points: "6 17 11 12 6 7" })
+      ]
+    }
+  );
+}
+function ChevronLeft({ size }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className: iconSize[size],
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+}
+function ChevronRight({ size }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className: iconSize[size],
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+}
+var Pagination = ({
+  count,
+  page,
+  onChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showFirstButton = false,
+  showLastButton = false,
+  hidePrevButton = false,
+  hideNextButton = false,
+  disabled = false,
+  size = "medium",
+  variant = "text",
+  shape = "rounded",
+  className
+}) => {
+  if (count < 1) return null;
+  const items = buildItems(
+    count,
+    page,
+    siblingCount,
+    boundaryCount,
+    showFirstButton,
+    showLastButton,
+    hidePrevButton,
+    hideNextButton
+  );
+  const sizeClasses = {
+    small: "h-7 min-w-[1.75rem] text-xs",
+    medium: "h-8 min-w-[2rem] text-sm",
+    large: "h-10 min-w-[2.5rem] text-base"
+  };
+  const shapeClasses = {
+    circular: "rounded-full",
+    rounded: "rounded-md"
+  };
+  const getButtonClasses = (isActive, isItemDisabled) => {
+    const base = "inline-flex items-center justify-center font-medium select-none transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-skprimary focus-visible:ring-offset-1 px-1";
+    const sz = sizeClasses[size];
+    const sh = shapeClasses[shape];
+    const borderClass = variant === "outlined" ? isActive ? "border border-skprimary" : "border border-gray-300" : "";
+    let stateClass;
+    if (isActive) {
+      stateClass = cn(
+        "bg-skprimary text-white",
+        isItemDisabled && "opacity-60"
+      );
+    } else if (isItemDisabled) {
+      stateClass = "text-gray-400 cursor-not-allowed";
+    } else {
+      stateClass = "text-gray-700 hover:bg-skprimary/10 hover:text-skprimary cursor-pointer";
+    }
+    return cn(base, sz, sh, borderClass, stateClass);
+  };
+  const handleClick = (targetPage) => {
+    if (!disabled && targetPage !== page && targetPage >= 1 && targetPage <= count) {
+      onChange(targetPage);
+    }
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", className: cn("flex items-center", className), children: /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-1 list-none m-0 p-0", children: items.map((item, index) => {
+    if (item === "start-ellipsis" || item === "end-ellipsis") {
+      return /* @__PURE__ */ jsx("li", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center justify-center text-gray-500",
+            sizeClasses[size]
+          ),
+          children: "\u2026"
+        }
+      ) }, item);
+    }
+    if (item === "first") {
+      const isItemDisabled = disabled || page <= 1;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Go to first page",
+          disabled: isItemDisabled,
+          onClick: () => handleClick(1),
+          className: getButtonClasses(false, isItemDisabled),
+          children: /* @__PURE__ */ jsx(ChevronFirst, { size })
+        }
+      ) }, "first");
+    }
+    if (item === "last") {
+      const isItemDisabled = disabled || page >= count;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Go to last page",
+          disabled: isItemDisabled,
+          onClick: () => handleClick(count),
+          className: getButtonClasses(false, isItemDisabled),
+          children: /* @__PURE__ */ jsx(ChevronLast, { size })
+        }
+      ) }, "last");
+    }
+    if (item === "previous") {
+      const isItemDisabled = disabled || page <= 1;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Go to previous page",
+          disabled: isItemDisabled,
+          onClick: () => handleClick(page - 1),
+          className: getButtonClasses(false, isItemDisabled),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size })
+        }
+      ) }, "previous");
+    }
+    if (item === "next") {
+      const isItemDisabled = disabled || page >= count;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Go to next page",
+          disabled: isItemDisabled,
+          onClick: () => handleClick(page + 1),
+          className: getButtonClasses(false, isItemDisabled),
+          children: /* @__PURE__ */ jsx(ChevronRight, { size })
+        }
+      ) }, "next");
+    }
+    const isActive = item === page;
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Go to page ${item}`,
+        "aria-current": isActive ? "page" : void 0,
+        disabled,
+        onClick: () => handleClick(item),
+        className: getButtonClasses(isActive, disabled && !isActive),
+        children: item
+      }
+    ) }, `${item}-${index}`);
+  }) }) });
+};
 function ReadMore({
   readMore,
   index,
@@ -1129,6 +1689,302 @@ var StagingAlert = ({
     ] })
   ] });
 };
+var SCROLL_STEP = 120;
+function Tabs({
+  value,
+  onChange,
+  children,
+  variant = "standard",
+  scrollButtons = "auto",
+  allowScrollButtonsMobile = false,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const listRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const tabRefs = useRef([]);
+  const tabs = Children.toArray(children).filter(isValidElement);
+  function resolveIndex(val) {
+    var _a;
+    for (let i = 0; i < tabs.length; i++) {
+      const tabVal = (_a = tabs[i].props.value) != null ? _a : i;
+      if (tabVal === val) return i;
+    }
+    return -1;
+  }
+  const selectedIndex = resolveIndex(value);
+  const updateScrollState = useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+  useEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    updateScrollState();
+    el.addEventListener("scroll", updateScrollState);
+    const ro = new ResizeObserver(updateScrollState);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      ro.disconnect();
+    };
+  }, [updateScrollState]);
+  useEffect(() => {
+    const el = tabRefs.current[selectedIndex];
+    el == null ? void 0 : el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: "smooth" });
+  }, [selectedIndex]);
+  const scroll = (dir) => {
+    var _a;
+    (_a = listRef.current) == null ? void 0 : _a.scrollBy({
+      left: dir === "left" ? -SCROLL_STEP : SCROLL_STEP,
+      behavior: "smooth"
+    });
+  };
+  const showButtons = variant === "scrollable" && scrollButtons !== false;
+  const mobileHideClass = allowScrollButtonsMobile ? "" : "hidden sm:flex";
+  const showLeft = showButtons && (scrollButtons === true || scrollButtons === "auto" && canScrollLeft);
+  const showRight = showButtons && (scrollButtons === true || scrollButtons === "auto" && canScrollRight);
+  const listClass = [
+    "relative flex overflow-x-auto overflow-y-hidden scrollbar-none scroll-smooth",
+    variant === "fullWidth" ? "w-full" : ""
+  ].join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: [
+        "relative flex items-center border-b border-gray-200",
+        className || ""
+      ].join(" "),
+      children: [
+        showLeft && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => scroll("left"),
+            "aria-label": "scroll left",
+            className: [
+              "shrink-0 flex items-center justify-center w-8 h-full",
+              "text-gray-500 hover:text-gray-800 transition-colors",
+              mobileHideClass
+            ].join(" "),
+            children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: listRef, className: listClass, children: tabs.map((tab, i) => {
+          var _a;
+          const tabValue = (_a = tab.props.value) != null ? _a : i;
+          const selected = tabValue === value;
+          return cloneElement(tab, {
+            key: i,
+            selected,
+            onChange: (e) => {
+              onChange(e, tabValue);
+            },
+            tabRef: (el) => {
+              tabRefs.current[i] = el;
+            },
+            className: [
+              tab.props.className || "",
+              variant === "fullWidth" ? "flex-1" : ""
+            ].join(" ").trim(),
+            activeClassName: tab.props.activeClassName
+          });
+        }) }),
+        showRight && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => scroll("right"),
+            "aria-label": "scroll right",
+            className: [
+              "shrink-0 flex items-center justify-center w-8 h-full",
+              "text-gray-500 hover:text-gray-800 transition-colors",
+              mobileHideClass
+            ].join(" "),
+            children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function handleAllyProps({ index }) {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+}
+function Tab({
+  label,
+  disabled = false,
+  className,
+  activeClassName,
+  selected = false,
+  onChange,
+  tabRef
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: tabRef,
+      role: "tab",
+      "aria-selected": selected,
+      disabled,
+      onClick: onChange,
+      className: [
+        "relative shrink-0 inline-flex items-center justify-center",
+        "px-4 py-2 text-sm font-semibold transition-all duration-150 select-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        selected ? "text-primary bg-[rgb(218,219,254)] border border-b-0 border-primary rounded-t-lg z-10" : "text-gray-500 hover:text-gray-700 border border-transparent",
+        disabled ? "opacity-40 cursor-not-allowed pointer-events-none" : "cursor-pointer",
+        className || "",
+        selected ? activeClassName || "" : ""
+      ].join(" "),
+      children: label
+    }
+  );
+}
+var GAP = 8;
+function computePosition(triggerRect, tooltipEl, placement) {
+  const tw = tooltipEl.offsetWidth;
+  const th = tooltipEl.offsetHeight;
+  const { top, left, right, bottom, width, height } = triggerRect;
+  const map = {
+    top: { top: top - th - GAP, left: left + width / 2 - tw / 2 },
+    "top-start": { top: top - th - GAP, left },
+    "top-end": { top: top - th - GAP, left: right - tw },
+    bottom: { top: bottom + GAP, left: left + width / 2 - tw / 2 },
+    "bottom-start": { top: bottom + GAP, left },
+    "bottom-end": { top: bottom + GAP, left: right - tw },
+    left: { top: top + height / 2 - th / 2, left: left - tw - GAP },
+    "left-start": { top, left: left - tw - GAP },
+    "left-end": { top: bottom - th, left: left - tw - GAP },
+    right: { top: top + height / 2 - th / 2, left: right + GAP },
+    "right-start": { top, left: right + GAP },
+    "right-end": { top: bottom - th, left: right + GAP }
+  };
+  return map[placement];
+}
+var arrowSideClass = {
+  top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-t-gray-600/80 border-x-transparent border-b-transparent",
+  bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-gray-600/80 border-x-transparent border-t-transparent",
+  left: "right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-gray-600/80 border-y-transparent border-r-transparent",
+  right: "left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-gray-600/80 border-y-transparent border-l-transparent"
+};
+function Tooltip({
+  title,
+  children,
+  placement = "top",
+  arrow = false,
+  open: controlledOpen,
+  enterDelay = 100,
+  leaveDelay = 0,
+  className,
+  disabled = false
+}) {
+  const [internalVisible, setInternalVisible] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const enterTimer = useRef(null);
+  const leaveTimer = useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const visible = isControlled ? controlledOpen : internalVisible;
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const pos = computePosition(rect, tooltipRef.current, placement);
+    setCoords(pos);
+  }, [placement]);
+  useEffect(() => {
+    if (!visible) return;
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [visible, updatePosition]);
+  const show = useCallback(() => {
+    if (disabled || isControlled) return;
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    enterTimer.current = setTimeout(() => setInternalVisible(true), enterDelay);
+  }, [disabled, isControlled, enterDelay]);
+  const hide = useCallback(() => {
+    if (isControlled) return;
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    leaveTimer.current = setTimeout(
+      () => setInternalVisible(false),
+      leaveDelay
+    );
+  }, [isControlled, leaveDelay]);
+  useEffect(() => {
+    return () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (leaveTimer.current) clearTimeout(leaveTimer.current);
+    };
+  }, []);
+  if (!isValidElement(children)) return children;
+  const child = children;
+  const trigger = cloneElement(child, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      var _a, _b;
+      show();
+      (_b = (_a = child.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
+    },
+    onMouseLeave: (e) => {
+      var _a, _b;
+      hide();
+      (_b = (_a = child.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
+    },
+    onFocus: (e) => {
+      var _a, _b;
+      show();
+      (_b = (_a = child.props).onFocus) == null ? void 0 : _b.call(_a, e);
+    },
+    onBlur: (e) => {
+      var _a, _b;
+      hide();
+      (_b = (_a = child.props).onBlur) == null ? void 0 : _b.call(_a, e);
+    }
+  });
+  const side = placement.split("-")[0];
+  const tooltipNode = visible && title ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tooltipRef,
+      role: "tooltip",
+      style: { top: coords.top, left: coords.left },
+      className: [
+        "fixed z-[9999] max-w-[300px] px-2 py-1.5",
+        "bg-gray-600/80 text-white text-xs rounded",
+        "shadow-md pointer-events-none",
+        "animate-in fade-in-0 zoom-in-95 duration-100",
+        className || ""
+      ].join(" "),
+      children: [
+        arrow && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: ["absolute w-0 h-0 border-4", arrowSideClass[side]].join(
+              " "
+            )
+          }
+        ),
+        title
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    createPortal(tooltipNode, document.body)
+  ] });
+}
 function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState(() => {
     if (typeof window === "undefined") return initialValue;
@@ -1163,4 +2019,4 @@ function useLocalStorage(key, initialValue) {
   return [storedValue, setValue, remove];
 }
 
-export { Accordion, AccordionDetails, AccordionSummary, AutoComplete, Breadcrumb, ButtonLoader, CopyId, CustomAnchor, CustomInput, Drawer, FilterDrawer, InputTitleWithRequired, Modal, ReadMore, SearchBar, StagingAlert, cn, handleCopyTextToClipboard, useLocalStorage };
+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 };