@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.1

package/dist/components/tabs/tabs.js

@@ -1,52 +1,58 @@
-import { jsx as C } from "react/jsx-runtime";
-import * as r from "react";
-import { Root as w, Content as z, List as G, Trigger as O } from "../../vendor/.bun/@radix-ui_react-tabs@1.1.13_2b23df507bdda662/vendor/@radix-ui/react-tabs/dist/index.js";
-import { mergeClasses as x, SLOT_ATTR as T, shorthands as e } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as W } from "../../styles/make-styles.js";
-import { errorA3 as B, errorA8 as F, errorA4 as H, errorA11 as K, accentA3 as U, accentA8 as Z, accentA4 as _, accentA12 as q, grayA3 as D, grayA8 as J, grayA4 as Q, grayA12 as E, leadingSm as X, textSm as Y, spacingElement3 as I, spacingGroup2 as $, spacingElement2 as g, radiusLg as N, spacingElement1 as M } from "../../tokens/index.js";
-const P = r.createContext({
+import { jsx as y } from "react/jsx-runtime";
+import * as a from "react";
+import { Root as O, Content as B, List as D, Trigger as H } from "../../vendor/.bun/@radix-ui_react-tabs@1.1.13_2b23df507bdda662/vendor/@radix-ui/react-tabs/dist/index.js";
+import { mergeClasses as T, SLOT_ATTR as S, shorthands as e } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as K } from "../../styles/make-styles.js";
+import { boxModel as A, nativeControl as U } from "../../styles/host-reset.js";
+import { errorA11 as L, errorA3 as Z, errorA8 as _, errorA4 as q, accentA11 as E, accentA3 as J, accentA8 as M, accentA4 as Q, accentA12 as X, grayA3 as W, grayA8 as Y, grayA2 as $, grayA12 as N, spacingElement2 as u, fontWeightSemibold as P, leadingSm as tt, textSm as et, spacingElement3 as z, spacingGroup2 as at, radiusFull as rt, radiusLg as G, spacingElement1 as ot } from "../../tokens/index.js";
+const F = a.createContext({
   size: "base",
   variant: "default"
-}), k = W({
+}), R = K({
   root: {
     display: "flex",
     flexDirection: "column",
-    ...e.gap(g),
+    ...e.gap(u),
     "&[data-orientation='vertical']": {
       flexDirection: "row",
       alignItems: "flex-start",
-      ...e.gap(g)
+      ...e.gap(u)
     }
   },
   list: {
+    ...A,
     backgroundColor: "transparent",
-    color: E,
+    color: N,
     height: "auto",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...e.gap(g),
-    ...e.borderRadius(N),
-    ...e.paddingBlock(g),
+    ...e.gap(u),
+    ...e.borderRadius(G),
+    ...e.paddingBlock(u),
     "&[data-orientation='vertical']": {
       flexDirection: "column",
       alignItems: "stretch",
       justifyContent: "flex-start",
-      ...e.gap(M),
+      ...e.gap(ot),
       ...e.paddingBlock(0)
     }
   },
   trigger: {
+    ...U,
+    position: "relative",
     display: "inline-flex",
     alignItems: "center",
-    ...e.gap(g),
+    ...e.gap(u),
     backgroundColor: "transparent",
     ...e.borderStyle("none"),
     ...e.borderWidth(0),
-    ...e.borderRadius(N),
+    ...e.borderRadius(G),
     cursor: "pointer",
-    fontSize: Y,
-    lineHeight: X,
+    fontSize: et,
+    lineHeight: tt,
+    // A label never wraps, so selection (and its semibold) can never change a tab's height.
+    whiteSpace: "nowrap",
     transitionProperty: "all",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -59,53 +65,116 @@ const P = r.createContext({
       justifyContent: "flex-start",
       textAlign: "left",
       width: "100%"
+    },
+    // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy
+    // stacks under it, so every tab is as wide as its bold label in every state and selecting one
+    // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.
+    "&[data-label]": {
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      rowGap: 0,
+      "&::after": {
+        content: "attr(data-label)",
+        height: 0,
+        ...e.overflow("hidden"),
+        visibility: "hidden",
+        pointerEvents: "none",
+        userSelect: "none",
+        fontWeight: P
+      }
+    },
+    // A vertical rail keeps its labels left-aligned inside the reserved width.
+    "&[data-orientation='vertical'][data-label]": {
+      alignItems: "flex-start"
+    },
+    // #18: the selected tab is marked by a semibold label, not by colour alone.
+    "&[data-state='active']": {
+      fontWeight: P
+    },
+    // In a vertical rail the selected tab also carries a leading bar, whose colour comes from the
+    // variant; horizontal tabs are marked by weight and fill alone.
+    "&[data-orientation='vertical'][data-state='active']": {
+      "&::before": {
+        content: "''",
+        position: "absolute",
+        left: 0,
+        top: u,
+        bottom: u,
+        // No stroke token owns a 3px indicator bar.
+        width: "3px",
+        ...e.borderRadius(rt)
+      }
     }
   },
   // Sizes
   sm: {
-    ...e.padding("0.375rem", g)
+    ...A,
+    ...e.padding("0.375rem", u)
   },
   base: {
-    ...e.padding(g, I)
+    ...A,
+    ...e.padding(u, z)
   },
   lg: {
-    ...e.padding(I, $)
+    ...A,
+    ...e.padding(z, at)
   },
   // Variants
   defaultVariant: {
-    color: E,
+    color: N,
+    // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;
+    // the selected tab keeps its fill under the pointer.
     ":hover": {
-      backgroundColor: Q
+      backgroundColor: $
     },
     ":focus-visible": {
-      outlineColor: J
+      outlineColor: Y
     },
     "&[data-state='active']": {
-      backgroundColor: D
+      backgroundColor: W,
+      "&:hover": {
+        backgroundColor: W
+      }
+    },
+    "&[data-orientation='vertical'][data-state='active']": {
+      "&::before": {
+        backgroundColor: E
+      }
     }
   },
   highlightVariant: {
-    color: q,
+    color: X,
     ":hover": {
-      backgroundColor: _
+      backgroundColor: Q
     },
     ":focus-visible": {
-      outlineColor: Z
+      outlineColor: M
     },
     "&[data-state='active']": {
-      backgroundColor: U
+      backgroundColor: J
+    },
+    "&[data-orientation='vertical'][data-state='active']": {
+      "&::before": {
+        backgroundColor: E
+      }
     }
   },
   destructiveVariant: {
-    color: K,
+    color: L,
     ":hover": {
-      backgroundColor: H
+      backgroundColor: q
     },
     ":focus-visible": {
-      outlineColor: F
+      outlineColor: _
     },
     "&[data-state='active']": {
-      backgroundColor: B
+      backgroundColor: Z
+    },
+    "&[data-orientation='vertical'][data-state='active']": {
+      "&::before": {
+        backgroundColor: L
+      }
     }
   },
   content: {
@@ -114,121 +183,130 @@ const P = r.createContext({
     flexBasis: "0%",
     outlineStyle: "none"
   }
-}), nt = r.forwardRef(function({
-  className: l,
-  size: n = "base",
-  variant: a = "default",
-  value: o,
-  defaultValue: h,
-  onValueChange: b,
-  ...c
-}, R) {
-  const d = k(), [S, V] = r.useState(h), u = o !== void 0, f = (u ? o : S) ?? "", y = r.useRef({ value: f, isControlled: u, onValueChange: b });
-  y.current = { value: f, isControlled: u, onValueChange: b };
-  const s = r.useRef(null), v = r.useCallback((i) => {
-    const t = { value: i, reported: !1 };
-    s.current = t, setTimeout(() => {
-      s.current === t && (s.current = null);
+}), ft = a.forwardRef(function({
+  className: n,
+  size: c = "base",
+  variant: r = "default",
+  value: i,
+  defaultValue: p,
+  onValueChange: v,
+  ...f
+}, V) {
+  const g = R(), [w, j] = a.useState(p), b = i !== void 0, m = (b ? i : w) ?? "", C = a.useRef({ value: m, isControlled: b, onValueChange: v });
+  C.current = { value: m, isControlled: b, onValueChange: v };
+  const d = a.useRef(null), x = a.useCallback((s) => {
+    const l = { value: s, reported: !1 };
+    d.current = l, setTimeout(() => {
+      d.current === l && (d.current = null);
     }, 0);
-  }, []), p = r.useCallback((i) => {
-    var j;
-    const t = y.current, m = s.current;
-    if (m !== null && m.value === i) {
-      if (m.reported) return;
-      m.reported = !0;
+  }, []), h = a.useCallback((s) => {
+    var k;
+    const l = C.current, t = d.current;
+    if (t !== null && t.value === s) {
+      if (t.reported) return;
+      t.reported = !0;
     }
-    i !== t.value && (t.isControlled || V(i), (j = t.onValueChange) == null || j.call(t, i));
-  }, []), L = r.useMemo(
-    () => ({ size: n, variant: a, select: p, beginPress: v }),
-    [n, a, p, v]
+    s !== l.value && (l.isControlled || j(s), (k = l.onValueChange) == null || k.call(l, s));
+  }, []), I = a.useMemo(
+    () => ({ size: c, variant: r, select: h, beginPress: x }),
+    [c, r, h, x]
   );
-  return /* @__PURE__ */ C(P.Provider, { value: L, children: /* @__PURE__ */ C(
-    w,
+  return /* @__PURE__ */ y(F.Provider, { value: I, children: /* @__PURE__ */ y(
+    O,
     {
-      ref: R,
+      ref: V,
       "data-slot": "tabs",
-      [T]: "tabs",
-      "data-size": n,
-      "data-variant": a,
-      className: x(d.root, l),
-      ...c,
-      value: f,
-      onValueChange: p
+      [S]: "tabs",
+      "data-size": c,
+      "data-variant": r,
+      className: T(g.root, n),
+      ...f,
+      value: m,
+      onValueChange: h
     }
   ) });
-}), st = r.forwardRef(function({ className: l, ...n }, a) {
-  const o = k();
-  return /* @__PURE__ */ C(
-    G,
+}), gt = a.forwardRef(function({ className: n, ...c }, r) {
+  const i = R();
+  return /* @__PURE__ */ y(
+    D,
     {
-      ref: a,
+      ref: r,
       "data-slot": "tabs-list",
-      [T]: "tabs-list",
-      className: x(o.list, l),
-      ...n
+      [S]: "tabs-list",
+      className: T(i.list, n),
+      ...c
     }
   );
-}), it = r.forwardRef(function({
-  className: l,
-  variant: n = "default",
-  onClick: a,
-  onKeyDown: o,
-  onBlur: h,
-  onMouseDown: b,
-  ...c
-}, R) {
-  const d = k(), {
-    size: S,
-    variant: V,
-    select: u,
-    beginPress: f
-  } = r.useContext(P), y = (t) => {
-    b == null || b(t), !t.defaultPrevented && t.button === 0 && !t.ctrlKey && !c.disabled && (f == null || f(c.value));
-  }, s = r.useRef(!1), v = (t) => {
-    o == null || o(t), s.current = !t.defaultPrevented && (t.key === "Enter" || t.key === " ");
-  }, p = (t) => {
-    h == null || h(t), s.current = !1;
-  }, L = (t) => {
-    a == null || a(t);
-    const m = s.current;
-    s.current = !1, !(m || t.detail !== 0 || t.defaultPrevented || t.ctrlKey || c.disabled) && (u == null || u(c.value));
-  }, i = n === "destructive" ? d.destructiveVariant : V === "highlight" ? d.highlightVariant : d.defaultVariant;
-  return /* @__PURE__ */ C(
-    O,
+});
+function nt(o) {
+  if (typeof o == "string" || typeof o == "number")
+    return String(o);
+  if (Array.isArray(o) && o.every((n) => typeof n == "string" || typeof n == "number"))
+    return o.join("");
+}
+const bt = a.forwardRef(function({
+  className: n,
+  variant: c = "default",
+  onClick: r,
+  onKeyDown: i,
+  onBlur: p,
+  onMouseDown: v,
+  ...f
+}, V) {
+  const g = R(), {
+    size: w,
+    variant: j,
+    select: b,
+    beginPress: m
+  } = a.useContext(F), C = (t) => {
+    v == null || v(t), !t.defaultPrevented && t.button === 0 && !t.ctrlKey && !f.disabled && (m == null || m(f.value));
+  }, d = a.useRef(!1), x = (t) => {
+    i == null || i(t), d.current = !t.defaultPrevented && (t.key === "Enter" || t.key === " ");
+  }, h = (t) => {
+    p == null || p(t), d.current = !1;
+  }, I = (t) => {
+    r == null || r(t);
+    const k = d.current;
+    d.current = !1, !(k || t.detail !== 0 || t.defaultPrevented || t.ctrlKey || f.disabled) && (b == null || b(f.value));
+  }, s = nt(f.children), l = c === "destructive" ? g.destructiveVariant : j === "highlight" ? g.highlightVariant : g.defaultVariant;
+  return /* @__PURE__ */ y(
+    H,
     {
-      ref: R,
+      ref: V,
       "data-slot": "tabs-trigger",
-      [T]: "tabs-trigger",
-      className: x(
-        d.trigger,
-        d[S],
-        i,
-        l
+      [S]: "tabs-trigger",
+      "data-label": s,
+      className: T(
+        g.trigger,
+        g[w],
+        l,
+        n
       ),
-      ...c,
-      onClick: L,
-      onKeyDown: v,
-      onBlur: p,
-      onMouseDown: y
+      ...f,
+      ...s !== void 0 ? { children: s } : {},
+      onClick: I,
+      onKeyDown: x,
+      onBlur: h,
+      onMouseDown: C
     }
   );
-}), lt = r.forwardRef(function({ className: l, ...n }, a) {
-  const o = k();
-  return /* @__PURE__ */ C(
-    z,
+}), mt = a.forwardRef(function({ className: n, ...c }, r) {
+  const i = R();
+  return /* @__PURE__ */ y(
+    B,
     {
-      ref: a,
+      ref: r,
       "data-slot": "tabs-content",
-      [T]: "tabs-content",
-      className: x(o.content, l),
-      ...n
+      [S]: "tabs-content",
+      className: T(i.content, n),
+      ...c
     }
   );
 });
 export {
-  nt as Tabs,
-  lt as TabsContent,
-  st as TabsList,
-  it as TabsTrigger
+  ft as Tabs,
+  mt as TabsContent,
+  gt as TabsList,
+  bt as TabsTrigger
 };
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n  /** Selects a tab. Absent when a trigger renders outside `Tabs`. */\n  select?: (value: string) => void\n  /** Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. */\n  beginPress?: (value: string) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"row\",\n      alignItems: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  list: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    height: \"auto\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingBlock(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      justifyContent: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement1),\n      ...shorthands.paddingBlock(0),\n    },\n  },\n  trigger: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \"&[data-orientation='vertical']\": {\n      justifyContent: \"flex-start\",\n      textAlign: \"left\",\n      width: \"100%\",\n    },\n  },\n  // Sizes\n  sm: {\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\n    },\n  },\n  highlightVariant: {\n    color: tokens.accentA12,\n    \":hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  destructiveVariant: {\n    color: tokens.errorA11,\n    \":hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // Zenith owns the value so a trigger can select on click, which Radix does not do (it selects on\n  // mousedown, Enter/Space and focus). Radix always receives it controlled; \"\" selects nothing,\n  // which is what an uncontrolled Root without a defaultValue shows.\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = (isControlled ? valueProp : uncontrolled) ?? \"\"\n  const latest = React.useRef({ value, isControlled, onValueChange })\n  latest.current = { value, isControlled, onValueChange }\n\n  // One pointer press on a trigger can reach `select` twice for the same tab: Radix selects on\n  // mousedown, then again on the focus that press causes if the tab is still unselected, which it\n  // is when a controlled owner declined (#17; unchanged through Radix Tabs 1.2.1). A press opens a\n  // window in which only the first report for its tab goes through. Mousedown and the focus it\n  // causes run in one task, so the window closes on the next one and a later focus is reported.\n  const press = React.useRef<{ value: string; reported: boolean } | null>(null)\n  const beginPress = React.useCallback((pressed: string) => {\n    const token = { value: pressed, reported: false }\n    press.current = token\n    setTimeout(() => {\n      if (press.current === token) press.current = null\n    }, 0)\n  }, [])\n\n  const select = React.useCallback((next: string) => {\n    const current = latest.current\n    const pressed = press.current\n    if (pressed !== null && pressed.value === next) {\n      if (pressed.reported) return\n      pressed.reported = true\n    }\n    if (next === current.value) return\n    if (!current.isControlled) setUncontrolled(next)\n    current.onValueChange?.(next)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ size, variant, select, beginPress }),\n    [size, variant, select, beginPress]\n  )\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        {...{ [SLOT_ATTR]: \"tabs\" }}\n        data-size={size}\n        data-variant={variant}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n        value={value}\n        onValueChange={select}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger(\n  {\n    className,\n    variant = \"default\",\n    onClick,\n    onKeyDown,\n    onBlur,\n    onMouseDown,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    size,\n    variant: rootVariant,\n    select,\n    beginPress,\n  } = React.useContext(TabsContext)\n\n  // Runs before Radix's own mousedown handler, under the same conditions Radix selects on.\n  const handleMouseDown: TabsTriggerProps[\"onMouseDown\"] = (event) => {\n    onMouseDown?.(event)\n    if (\n      !event.defaultPrevented &&\n      event.button === 0 &&\n      !event.ctrlKey &&\n      !props.disabled\n    ) {\n      beginPress?.(props.value)\n    }\n  }\n\n  // Radix has already selected on the key that synthesises this click; selecting again would\n  // report the change twice to an owner that declined it.\n  const keyActivated = React.useRef(false)\n\n  const handleKeyDown: TabsTriggerProps[\"onKeyDown\"] = (event) => {\n    onKeyDown?.(event)\n    // Only a key Radix acted on synthesises a click. A prevented one skips Radix and produces no\n    // click, so flagging it would leave nothing to clear the flag and swallow the next bare click.\n    keyActivated.current =\n      !event.defaultPrevented && (event.key === \"Enter\" || event.key === \" \")\n  }\n\n  const handleBlur: TabsTriggerProps[\"onBlur\"] = (event) => {\n    onBlur?.(event)\n    keyActivated.current = false\n  }\n\n  // A click with no mousedown before it — `element.click()`, assistive technology, automation —\n  // reaches none of Radix's handlers. `detail` is 0 for exactly those clicks; a pointer click\n  // carries its count and was already handled, or deliberately refused, on mousedown.\n  const handleClick: TabsTriggerProps[\"onClick\"] = (event) => {\n    onClick?.(event)\n    const fromKey = keyActivated.current\n    keyActivated.current = false\n    if (\n      fromKey ||\n      event.detail !== 0 ||\n      event.defaultPrevented ||\n      event.ctrlKey ||\n      props.disabled\n    ) {\n      return\n    }\n    select?.(props.value)\n  }\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA4","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","token","select","next","current","_a","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","onClick","onKeyDown","onBlur","onMouseDown","rootVariant","handleMouseDown","event","keyActivated","handleKeyDown","handleBlur","handleClick","fromKey","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n  /** Selects a tab. Absent when a trigger renders outside `Tabs`. */\n  select?: (value: string) => void\n  /** Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. */\n  beginPress?: (value: string) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"row\",\n      alignItems: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  list: {\n    ...boxModel,\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    height: \"auto\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingBlock(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      justifyContent: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement1),\n      ...shorthands.paddingBlock(0),\n    },\n  },\n  trigger: {\n    ...nativeControl,\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    // A label never wraps, so selection (and its semibold) can never change a tab's height.\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \"&[data-orientation='vertical']\": {\n      justifyContent: \"flex-start\",\n      textAlign: \"left\",\n      width: \"100%\",\n    },\n    // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy\n    // stacks under it, so every tab is as wide as its bold label in every state and selecting one\n    // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.\n    \"&[data-label]\": {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      rowGap: 0,\n      \"&::after\": {\n        content: \"attr(data-label)\",\n        height: 0,\n        ...shorthands.overflow(\"hidden\"),\n        visibility: \"hidden\",\n        pointerEvents: \"none\",\n        userSelect: \"none\",\n        fontWeight: tokens.fontWeightSemibold,\n      },\n    },\n    // A vertical rail keeps its labels left-aligned inside the reserved width.\n    \"&[data-orientation='vertical'][data-label]\": {\n      alignItems: \"flex-start\",\n    },\n    // #18: the selected tab is marked by a semibold label, not by colour alone.\n    \"&[data-state='active']\": {\n      fontWeight: tokens.fontWeightSemibold,\n    },\n    // In a vertical rail the selected tab also carries a leading bar, whose colour comes from the\n    // variant; horizontal tabs are marked by weight and fill alone.\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        content: \"''\",\n        position: \"absolute\",\n        left: 0,\n        top: tokens.spacingElement2,\n        bottom: tokens.spacingElement2,\n        // No stroke token owns a 3px indicator bar.\n        width: \"3px\",\n        ...shorthands.borderRadius(tokens.radiusFull),\n      },\n    },\n  },\n  // Sizes\n  sm: {\n    ...boxModel,\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;\n    // the selected tab keeps its fill under the pointer.\n    \":hover\": {\n      backgroundColor: tokens.grayA2,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\n      \"&:hover\": {\n        backgroundColor: tokens.grayA3,\n      },\n    },\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        backgroundColor: tokens.accentA11,\n      },\n    },\n  },\n  highlightVariant: {\n    color: tokens.accentA12,\n    \":hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        backgroundColor: tokens.accentA11,\n      },\n    },\n  },\n  destructiveVariant: {\n    color: tokens.errorA11,\n    \":hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n    \"&[data-orientation='vertical'][data-state='active']\": {\n      \"&::before\": {\n        backgroundColor: tokens.errorA11,\n      },\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // Zenith owns the value so a trigger can select on click, which Radix does not do (it selects on\n  // mousedown, Enter/Space and focus). Radix always receives it controlled; \"\" selects nothing,\n  // which is what an uncontrolled Root without a defaultValue shows.\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = (isControlled ? valueProp : uncontrolled) ?? \"\"\n  const latest = React.useRef({ value, isControlled, onValueChange })\n  latest.current = { value, isControlled, onValueChange }\n\n  // One pointer press on a trigger can reach `select` twice for the same tab: Radix selects on\n  // mousedown, then again on the focus that press causes if the tab is still unselected, which it\n  // is when a controlled owner declined (#17; unchanged through Radix Tabs 1.2.1). A press opens a\n  // window in which only the first report for its tab goes through. Mousedown and the focus it\n  // causes run in one task, so the window closes on the next one and a later focus is reported.\n  const press = React.useRef<{ value: string; reported: boolean } | null>(null)\n  const beginPress = React.useCallback((pressed: string) => {\n    const token = { value: pressed, reported: false }\n    press.current = token\n    setTimeout(() => {\n      if (press.current === token) press.current = null\n    }, 0)\n  }, [])\n\n  const select = React.useCallback((next: string) => {\n    const current = latest.current\n    const pressed = press.current\n    if (pressed !== null && pressed.value === next) {\n      if (pressed.reported) return\n      pressed.reported = true\n    }\n    if (next === current.value) return\n    if (!current.isControlled) setUncontrolled(next)\n    current.onValueChange?.(next)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ size, variant, select, beginPress }),\n    [size, variant, select, beginPress]\n  )\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        {...{ [SLOT_ATTR]: \"tabs\" }}\n        data-size={size}\n        data-variant={variant}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n        value={value}\n        onValueChange={select}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n  /** The tab's label. Plain text (a string, number, or array of them) reserves its semibold width so selection never shifts layout; rich children such as icons or elements are not reserved. */\n  children?: React.ReactNode\n}\n\n/** A string, number, or array of only strings and numbers, as one string; otherwise undefined. */\nfunction plainLabel(children: React.ReactNode): string | undefined {\n  if (typeof children === \"string\" || typeof children === \"number\")\n    return String(children)\n  if (\n    Array.isArray(children) &&\n    children.every((c) => typeof c === \"string\" || typeof c === \"number\")\n  )\n    return children.join(\"\")\n  return undefined\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger(\n  {\n    className,\n    variant = \"default\",\n    onClick,\n    onKeyDown,\n    onBlur,\n    onMouseDown,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    size,\n    variant: rootVariant,\n    select,\n    beginPress,\n  } = React.useContext(TabsContext)\n\n  // Runs before Radix's own mousedown handler, under the same conditions Radix selects on.\n  const handleMouseDown: TabsTriggerProps[\"onMouseDown\"] = (event) => {\n    onMouseDown?.(event)\n    if (\n      !event.defaultPrevented &&\n      event.button === 0 &&\n      !event.ctrlKey &&\n      !props.disabled\n    ) {\n      beginPress?.(props.value)\n    }\n  }\n\n  // Radix has already selected on the key that synthesises this click; selecting again would\n  // report the change twice to an owner that declined it.\n  const keyActivated = React.useRef(false)\n\n  const handleKeyDown: TabsTriggerProps[\"onKeyDown\"] = (event) => {\n    onKeyDown?.(event)\n    // Only a key Radix acted on synthesises a click. A prevented one skips Radix and produces no\n    // click, so flagging it would leave nothing to clear the flag and swallow the next bare click.\n    keyActivated.current =\n      !event.defaultPrevented && (event.key === \"Enter\" || event.key === \" \")\n  }\n\n  const handleBlur: TabsTriggerProps[\"onBlur\"] = (event) => {\n    onBlur?.(event)\n    keyActivated.current = false\n  }\n\n  // A click with no mousedown before it — `element.click()`, assistive technology, automation —\n  // reaches none of Radix's handlers. `detail` is 0 for exactly those clicks; a pointer click\n  // carries its count and was already handled, or deliberately refused, on mousedown.\n  const handleClick: TabsTriggerProps[\"onClick\"] = (event) => {\n    onClick?.(event)\n    const fromKey = keyActivated.current\n    keyActivated.current = false\n    if (\n      fromKey ||\n      event.detail !== 0 ||\n      event.defaultPrevented ||\n      event.ctrlKey ||\n      props.disabled\n    ) {\n      return\n    }\n    select?.(props.value)\n  }\n\n  // Feeds the reserved-width copy; only plain text can be copied by CSS.\n  const label = plainLabel(props.children)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      data-label={label}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n      // The joined label is rendered as one text node, shaped exactly like its reserved copy.\n      {...(label !== undefined ? { children: label } : {})}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","boxModel","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","nativeControl","tokens.textSm","tokens.leadingSm","tokens.fontWeightSemibold","tokens.radiusFull","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA2","tokens.grayA8","tokens.grayA3","tokens.accentA11","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","token","select","next","current","_a","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","plainLabel","children","c","TabsTrigger","onClick","onKeyDown","onBlur","onMouseDown","rootVariant","handleMouseDown","event","keyActivated","handleKeyDown","handleBlur","handleClick","fromKey","label","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}