@geomak/ui 5.10.0 → 6.0.0

package/dist/index.cjs

@@ -958,131 +958,225 @@ function Tooltip({
   ] }) });
 }
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
+var TabsContext = React8.createContext(null);
+function useTabsContext() {
+  const ctx = React8.useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
+  return ctx;
+}
+var SIZE = {
+  sm: { trigger: "h-8 text-xs px-2.5", icon: "h-3.5 w-3.5", add: "h-8 w-8" },
+  md: { trigger: "h-10 text-sm px-3", icon: "h-4 w-4", add: "h-10 w-9" },
+  lg: { trigger: "h-12 text-sm px-4", icon: "h-[18px] w-[18px]", add: "h-12 w-10" }
+};
+var MARKER_TRANSITION = { duration: 0.26, ease: [0.16, 1, 0.3, 1] };
 function Tabs({
-  tabs = [],
-  onTabChange,
-  onTabClose,
-  isLazy,
-  tabsClosable = true,
-  defaultActiveTab
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  size = "md",
+  orientation = "horizontal",
+  className = "",
+  style,
+  children
 }) {
-  const [value, setValue] = React8.useState(() => defaultActiveTab ?? tabs[0]?.key ?? "");
-  React8.useEffect(() => {
-    if (defaultActiveTab) setValue(defaultActiveTab);
-  }, [defaultActiveTab]);
-  React8.useEffect(() => {
-    if (tabs.length === 0) {
-      setValue("");
-      return;
-    }
-    const exists = tabs.find((t) => t.key === value);
-    if (!exists) {
-      setValue(tabs[tabs.length - 1].key);
-    }
-  }, [tabs, value]);
-  const handleValueChange = (newValue) => {
-    const prev = tabs.find((t) => t.key === value);
-    const next = tabs.find((t) => t.key === newValue);
-    onTabChange?.(prev, next);
-    setValue(newValue);
-  };
-  const toPreviousTab = () => {
-    const idx = tabs.findIndex((t) => t.key === value);
-    if (idx > 0) handleValueChange(tabs[idx - 1].key);
-  };
-  const toNextTab = () => {
-    const idx = tabs.findIndex((t) => t.key === value);
-    if (idx < tabs.length - 1) handleValueChange(tabs[idx + 1].key);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React8.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const reduced = !!framerMotion.useReducedMotion();
+  const indicatorId = React8.useId();
+  const handle = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
   };
-  if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced }, children: /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Root,
+    {
+      value: current,
+      onValueChange: handle,
+      orientation,
+      className: [
+        "flex min-w-0",
+        orientation === "vertical" ? "flex-row gap-4" : "flex-col gap-3",
+        className
+      ].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  ) });
+}
+function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
+  const { variant, orientation, reduced } = useTabsContext();
+  const horizontal = orientation === "horizontal";
+  const scrollRef = React8.useRef(null);
+  const [edges, setEdges] = React8.useState({ start: false, end: false });
+  const scrollable = variant !== "segmented";
+  React8.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !scrollable) return;
+    const update = () => {
+      if (horizontal) {
+        setEdges({
+          start: el.scrollLeft > 1,
+          end: el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+        });
+      } else {
+        setEdges({
+          start: el.scrollTop > 1,
+          end: el.scrollTop + el.clientHeight < el.scrollHeight - 1
+        });
+      }
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, [horizontal, scrollable, children]);
+  const nudge = React8.useCallback((dir) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
+    el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
+  }, [horizontal, reduced]);
+  const maskStyle = scrollable && (edges.start || edges.end) ? (() => {
+    const dir = horizontal ? "to right" : "to bottom";
+    const a = edges.start ? "transparent, black 36px" : "black";
+    const b = edges.end ? "black calc(100% - 36px), transparent" : "black";
+    const img = `linear-gradient(${dir}, ${a}, ${b})`;
+    return { maskImage: img, WebkitMaskImage: img };
+  })() : {};
+  const trackClass = (() => {
+    if (variant === "segmented") {
+      return horizontal ? "inline-flex items-center gap-1 rounded-lg border border-border bg-surface-raised p-1 w-fit" : "inline-flex flex-col items-stretch gap-1 rounded-lg border border-border bg-surface-raised p-1 w-fit";
+    }
+    const hairline = horizontal ? "border-b border-border" : "border-r border-border";
+    const align = variant === "enclosed" && horizontal ? "items-end" : "items-stretch";
+    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__ */ jsxRuntime.jsxs("div", { className: ["relative flex min-w-0", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
+    scrollable && edges.start && /* @__PURE__ */ jsxRuntime.jsx(Chevron, { side: "start", orientation, onClick: () => nudge(-1) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TabsPrimitive__namespace.List,
+      {
+        ref: scrollRef,
+        "aria-label": ariaLabel,
+        className: [scrollClass, trackClass, "min-w-0 flex-1"].filter(Boolean).join(" "),
+        style: maskStyle,
+        children
+      }
+    ),
+    scrollable && edges.end && /* @__PURE__ */ jsxRuntime.jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) })
+  ] });
+}
+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__ */ jsxRuntime.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`,
+      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 ${rotate}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+    }
+  );
+}
+function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className = "", children }) {
+  const { value: active, variant, size, orientation, indicatorId, reduced } = 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";
+  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__ */ jsxRuntime.jsxs(
+    TabsPrimitive__namespace.Trigger,
     {
       value,
-      onValueChange: handleValueChange,
-      className: "h-full max-w-full flex flex-col gap-2",
+      disabled,
+      className: [base, sz.trigger, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface border border-border rounded-lg flex items-center justify-between flex-shrink-0 w-full p-1 overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: toPreviousTab,
-              "aria-label": "Previous tab",
-              className: "cursor-pointer rounded-lg transition-colors duration-150 hover:bg-surface-raised text-foreground-secondary hover:text-foreground rotate-180 flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TabsPrimitive__namespace.List,
-            {
-              "aria-label": "Tabs",
-              className: "flex-1 flex items-center gap-1 overflow-x-auto overflow-y-hidden rounded-lg scroll-smooth snap-x snap-mandatory hidden-scrollbar",
-              children: tabs.map((tab) => (
-                // Trigger + close button are SIBLINGS, not nested.
-                // Nesting a clickable element inside <button> is invalid
-                // HTML and breaks keyboard activation of the inner one.
-                // The wrapper carries `group` so the close button can
-                // react to the trigger's `data-state=active` for styling.
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: "snap-start snap-always relative flex items-center flex-1 min-w-[120px] max-w-[220px] flex-shrink-0 group",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TabsPrimitive__namespace.Trigger,
-                        {
-                          value: tab.key,
-                          className: `w-full ${tabsClosable ? "pr-8" : "pr-3"} pl-3 py-2 rounded-3xl cursor-pointer transition-all duration-200 select-none h-10 text-left
-                                           text-foreground-secondary bg-surface-raised
-                                           hover:bg-surface hover:text-foreground
-                                           data-[state=active]:bg-accent data-[state=active]:text-accent-foreground
-                                           focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
-                          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm block", children: tab.title })
-                        }
-                      ),
-                      tabsClosable && /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": `Close ${tab.title}`,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            onTabClose?.(tab.key);
-                          },
-                          className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-foreground-secondary group-data-[state=active]:text-accent-foreground hover:bg-black/10 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                        }
-                      )
-                    ]
-                  },
-                  tab.key
-                )
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: toNextTab,
-              "aria-label": "Next tab",
-              className: "cursor-pointer rounded-lg transition-colors duration-150 hover:bg-surface-raised text-foreground-secondary hover:text-foreground flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-6 w-6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
-            }
-          )
+        variant === "segmented" && isActive && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.span,
+          {
+            layoutId: `${indicatorId}-seg`,
+            className: "absolute inset-0 rounded-md bg-surface shadow-sm",
+            transition: reduced ? { duration: 0 } : MARKER_TRANSITION,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-[1] inline-flex items-center gap-2 min-w-0", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-shrink-0 inline-flex items-center justify-center ${sz.icon}`, children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }),
+          badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-border px-1 text-[11px] font-semibold leading-none text-foreground-secondary group-data-[state=active]/trigger:bg-accent group-data-[state=active]/trigger:text-accent-foreground transition-colors", children: badge })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-lg w-full flex-1 min-h-0 bg-surface border border-border overflow-hidden", children: isLazy ? (
-          // Mount only the active content
-          tabs.filter((t) => t.key === value).map((t) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { value: t.key, className: "w-full h-full focus:outline-none", children: t.content }, t.key))
-        ) : (
-          // Pre-mount all, hide non-active via Radix
-          tabs.map((t) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { value: t.key, className: "w-full h-full focus:outline-none", forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full ${t.key === value ? "block" : "hidden"}`, children: t.content }) }, t.key))
-        ) })
+        variant === "underline" && isActive && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.span,
+          {
+            layoutId: `${indicatorId}-line`,
+            className: horizontal ? "absolute left-2 right-2 bottom-0 h-0.5 rounded-full bg-accent" : "absolute top-1.5 bottom-1.5 right-0 w-0.5 rounded-full bg-accent",
+            transition: reduced ? { duration: 0 } : MARKER_TRANSITION,
+            "aria-hidden": "true"
+          }
+        )
       ]
     }
   );
+  if (!closeable) return trigger;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center flex-shrink-0", children: [
+    trigger,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close tab",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose?.();
+        },
+        className: "absolute right-1.5 top-1/2 z-[2] -translate-y-1/2 inline-flex h-5 w-5 items-center justify-center rounded text-foreground-muted hover:text-status-error hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      }
+    )
+  ] });
 }
+function TabsAdd({ onClick, "aria-label": ariaLabel = "Add tab", className = "" }) {
+  const { size } = useTabsContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: `flex-shrink-0 inline-flex items-center justify-center rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${SIZE[size].add} ${className}`.trim(),
+      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
+    }
+  );
+}
+function TabsPanel({ value, keepMounted, className = "", style, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      value,
+      forceMount: keepMounted || void 0,
+      className: ["min-w-0 flex-1 focus:outline-none data-[state=inactive]:hidden", className].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
+}
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Panel = TabsPanel;
+Tabs.Add = TabsAdd;
+var Tabs_default = Tabs;
 var isParent = (item) => Boolean(item.children && item.children.length > 0);
 function TreeNodeItem({
   item,
@@ -5013,7 +5107,7 @@ function TextArea({
     }
   );
 }
-var SIZE = {
+var SIZE2 = {
   sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
   md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
   lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
@@ -5035,7 +5129,7 @@ function SegmentedControl({
   errorMessage,
   "aria-label": ariaLabel
 }) {
-  const sz = SIZE[size];
+  const sz = SIZE2[size];
   const groupId = React8.useId();
   const errorId = React8.useId();
   const hasError = errorMessage != null;
@@ -6704,7 +6798,7 @@ exports.SkeletonText = SkeletonText;
 exports.Slider = Slider;
 exports.Switch = Switch;
 exports.Table = Table;
-exports.Tabs = Tabs;
+exports.Tabs = Tabs_default;
 exports.TagsInput = TagsInput;
 exports.Temporal = DatePicker;
 exports.TextArea = TextArea;