@geomak/ui 6.0.1 → 6.1.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useId, useCallback, useContext, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -951,15 +951,27 @@ function Tabs({
   const current = isControlled ? value : internal;
   const reduced = !!useReducedMotion();
   const indicatorId = useId();
-  const handle = (next) => {
+  const select = useCallback((next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
-  };
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced }, children: /* @__PURE__ */ jsx(
+  }, [isControlled, onValueChange]);
+  const registry = useRef(/* @__PURE__ */ new Map());
+  const orderRef = useRef(0);
+  const [, bump] = useState(0);
+  const registerTab = useCallback((val, meta) => {
+    const existing = registry.current.get(val);
+    registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
+    if (!existing) bump((v) => v + 1);
+  }, []);
+  const unregisterTab = useCallback((val) => {
+    if (registry.current.delete(val)) bump((v) => v + 1);
+  }, []);
+  const getTabs = useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsx(
     TabsPrimitive.Root,
     {
       value: current,
-      onValueChange: handle,
+      onValueChange: select,
       orientation,
       className: [
         "flex min-w-0",
@@ -972,7 +984,7 @@ function Tabs({
   ) });
 }
 function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
-  const { variant, orientation, reduced } = useTabsContext();
+  const { variant, orientation, reduced, value } = useTabsContext();
   const horizontal = orientation === "horizontal";
   const scrollRef = useRef(null);
   const [edges, setEdges] = useState({ start: false, end: false });
@@ -1008,6 +1020,14 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
     const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
     el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
   }, [horizontal, reduced]);
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !scrollable) return;
+    const active = el.querySelector("[role=tab][data-state=active]");
+    if (active && typeof active.scrollIntoView === "function") {
+      active.scrollIntoView({ block: "nearest", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
+    }
+  }, [value, scrollable, reduced]);
   const maskStyle = scrollable && (edges.start || edges.end) ? (() => {
     const dir = horizontal ? "to right" : "to bottom";
     const a = edges.start ? "transparent, black 36px" : "black";
@@ -1024,7 +1044,8 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
     return `flex ${horizontal ? "flex-row" : "flex-col"} ${align} gap-1 ${hairline}`;
   })();
   const scrollClass = scrollable ? horizontal ? "overflow-x-auto overflow-y-hidden hidden-scrollbar" : "overflow-y-auto overflow-x-hidden hidden-scrollbar" : "";
-  return /* @__PURE__ */ jsxs("div", { className: ["relative flex min-w-0", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
+  const overflowing = scrollable && (edges.start || edges.end);
+  return /* @__PURE__ */ jsxs("div", { className: ["relative flex min-w-0 gap-1", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
     scrollable && edges.start && /* @__PURE__ */ jsx(Chevron, { side: "start", orientation, onClick: () => nudge(-1) }),
     /* @__PURE__ */ jsx(
       TabsPrimitive.List,
@@ -1036,37 +1057,131 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
         children
       }
     ),
-    scrollable && edges.end && /* @__PURE__ */ jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) })
+    scrollable && edges.end && /* @__PURE__ */ jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) }),
+    overflowing && /* @__PURE__ */ jsx(OverflowMenu, {})
   ] });
 }
 function Chevron({ side, orientation, onClick }) {
   const horizontal = orientation === "horizontal";
   const rotate = horizontal ? side === "start" ? "rotate-180" : "" : side === "start" ? "-rotate-90" : "rotate-90";
-  const pos = horizontal ? side === "start" ? "left-0 top-1/2 -translate-y-1/2" : "right-0 top-1/2 -translate-y-1/2" : side === "start" ? "top-0 left-1/2 -translate-x-1/2" : "bottom-0 left-1/2 -translate-x-1/2";
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       "aria-label": side === "start" ? "Scroll tabs backward" : "Scroll tabs forward",
       onClick,
-      className: `absolute z-20 ${pos} flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+      className: "flex-shrink-0 self-center flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
       children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 ${rotate}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
     }
   );
 }
+function OverflowMenu() {
+  const { getTabs, value, select, orientation } = useTabsContext();
+  const horizontal = orientation === "horizontal";
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const timer = useRef(null);
+  const openNow = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setOpen(true);
+  };
+  const closeSoon = () => {
+    timer.current = setTimeout(() => setOpen(false), 160);
+  };
+  useLayoutEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const tabs = getTabs();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: "relative flex-shrink-0 self-center",
+      onMouseEnter: openNow,
+      onMouseLeave: closeSoon,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-label": "Show all tabs",
+            onClick: () => setOpen((o) => !o),
+            className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised data-[expanded=true]:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            "data-expanded": open,
+            children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.6" })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "menu",
+            onMouseEnter: openNow,
+            onMouseLeave: closeSoon,
+            className: `absolute z-30 ${horizontal ? "right-0 top-full mt-1.5" : "left-full top-0 ml-1.5"} min-w-[184px] max-h-72 overflow-y-auto hidden-scrollbar rounded-lg border border-border bg-surface p-1 shadow-md animate-in fade-in-0 zoom-in-95`,
+            children: tabs.map((t) => {
+              const isActive = t.value === value;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  disabled: t.disabled,
+                  onClick: () => {
+                    select(t.value);
+                    setOpen(false);
+                  },
+                  className: `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isActive ? "bg-surface-raised text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"}`,
+                  children: [
+                    t.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 inline-flex h-4 w-4 items-center justify-center", children: t.icon }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: t.label }),
+                    isActive && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-4 w-4 flex-shrink-0 text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  ]
+                },
+                t.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className = "", children }) {
-  const { value: active, variant, size, orientation, indicatorId, reduced } = useTabsContext();
+  const { value: active, variant, size, orientation, indicatorId, reduced, registerTab, unregisterTab } = useTabsContext();
   const isActive = active === value;
   const horizontal = orientation === "horizontal";
   const sz = SIZE[size];
-  const base = "group/trigger relative inline-flex items-center justify-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0";
+  useLayoutEffect(() => {
+    registerTab(value, { label: children, icon, disabled });
+    return () => unregisterTab(value);
+  }, [value, children, icon, disabled, registerTab, unregisterTab]);
+  const layoutCls = horizontal ? "justify-center flex-shrink-0" : "justify-start w-full";
+  const base = "group/trigger relative inline-flex items-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed";
   const variantCls = variant === "segmented" ? `rounded-md ${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent` : variant === "enclosed" ? `${horizontal ? "rounded-t-md border border-b-0 -mb-px" : "rounded-l-md border border-r-0 -mr-px"} ${isActive ? "bg-surface border-border text-foreground" : "border-transparent text-foreground-secondary hover:text-foreground hover:bg-surface-raised"} focus-visible:text-accent` : `${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent`;
   const trigger = /* @__PURE__ */ jsxs(
     TabsPrimitive.Trigger,
     {
       value,
       disabled,
-      className: [base, sz.trigger, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
+      className: [base, sz.trigger, layoutCls, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
       children: [
         variant === "segmented" && isActive && /* @__PURE__ */ jsx(
           motion.span,
@@ -1099,7 +1214,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
     }
   );
   if (!closeable) return trigger;
-  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center flex-shrink-0", children: [
+  return /* @__PURE__ */ jsxs("span", { className: `relative inline-flex items-center ${horizontal ? "flex-shrink-0" : "w-full"}`, children: [
     trigger,
     /* @__PURE__ */ jsx(
       "button",