@spear-ai/spectral 1.9.1 → 1.10.0

package/dist/Tabs/TabsBase.js

@@ -1,253 +1,245 @@
 "use client";
 import "../styles/main.css";
-import { jsx as p, jsxs as E } from "react/jsx-runtime";
-import { generateId as K, prefersReducedMotion as $, calculateIndicatorStyle as S, debounce as j } from "./tabsUtils.js";
-import { cn as x } from "../utils/twUtils.js";
-import { createContext as k, useState as M, useId as U, useCallback as T, useRef as F, useMemo as q, useEffect as R, useContext as B } from "react";
-import { j as H } from "../index-DEYs15GP.js";
-import { m as D } from "../proxy-CO_-Vget.js";
-import { A as G } from "../index-Cl8VeY0o.js";
-const N = k(null), A = (y = "Tabs") => {
-  const d = B(N);
-  if (d === null)
-    throw new Error(`${y} components must be used within a Tabs.Root`);
-  return d;
-}, V = function({
-  ref: d,
-  activationMode: g = "automatic",
-  children: o,
-  defaultValue: s,
-  dir: f = "ltr",
-  disabled: u = !1,
-  onValueChange: n,
-  orientation: m = "horizontal",
-  rightSlot: b,
-  value: t,
-  ...C
-}) {
-  const [w, I] = M(s ?? ""), v = U() ?? K("tabs"), h = t !== void 0, c = h ? t : w, r = T(
-    (e) => {
-      u || (h || I(e), n?.(e));
-    },
-    [h, n, u]
-  ), a = {
-    activationMode: g,
-    baseId: v,
-    dir: f,
-    disabled: u,
-    onValueChange: r,
-    orientation: m,
-    rightSlot: b,
-    value: c
-  };
-  return /* @__PURE__ */ p(N.Provider, { value: a, children: /* @__PURE__ */ p("div", { ref: d, "data-testid": "spectral-tabs", "data-orientation": m, "data-disabled": u ? "" : void 0, dir: f, ...C, children: o }) });
-}, tt = function({
-  ref: d,
-  children: g,
-  className: o,
-  loop: s = !0,
-  rightSlot: f,
-  ...u
-}) {
-  const { orientation: n, disabled: m, value: b } = A("TabsList"), [t, C] = M(null), w = F(null), I = $(), v = T(() => {
-    const r = S(w);
-    (r.width > 0 || r.height > 0) && C(r);
-  }, []), h = q(() => j(v, 16), [v]);
-  R(() => {
-    if (v(), typeof ResizeObserver > "u" || typeof MutationObserver > "u")
-      return;
-    const r = new ResizeObserver(h), a = new MutationObserver(h), e = w.current;
-    return e && (r.observe(e), a.observe(e, {
-      attributes: !0,
-      childList: !0,
-      subtree: !0
-    })), () => {
-      r.disconnect(), a.disconnect(), h.cancel();
-    };
-  }, [v, h]), R(() => {
-    v();
-  }, [b, v]);
-  const c = T(
-    (r) => {
-      if (m) return;
-      const a = Array.from(w.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
-      if (a.length === 0) return;
-      const e = a.findIndex((P) => P === document.activeElement);
-      if (e === -1) return;
-      let i = null;
-      const { key: l, ctrlKey: L, metaKey: O } = r, z = L || O;
-      n === "horizontal" ? l === "ArrowLeft" || l === "ArrowUp" && z ? i = e > 0 ? e - 1 : s ? a.length - 1 : e : (l === "ArrowRight" || l === "ArrowDown" && z) && (i = e < a.length - 1 ? e + 1 : s ? 0 : e) : l === "ArrowUp" || l === "ArrowLeft" && z ? i = e > 0 ? e - 1 : s ? a.length - 1 : e : (l === "ArrowDown" || l === "ArrowRight" && z) && (i = e < a.length - 1 ? e + 1 : s ? 0 : e), l === "Home" ? i = 0 : l === "End" && (i = a.length - 1), i !== null && i !== e && (r.preventDefault(), r.stopPropagation(), a[i]?.focus());
-    },
-    [m, n, s]
-  );
-  return /* @__PURE__ */ E("div", { className: "relative", ref: w, children: [
-    /* @__PURE__ */ E(
-      "div",
-      {
-        ref: d,
-        role: "tablist",
-        "data-testid": "spectral-tabs-list",
-        "aria-orientation": n,
-        "aria-disabled": m,
-        className: x("tabs-list flex", n === "horizontal" && "items-center justify-between", n === "vertical" && "flex-col", o),
-        onKeyDown: c,
-        ...u,
-        children: [
-          /* @__PURE__ */ p("div", { className: x("flex", n === "horizontal" && "items-center", n === "vertical" && "flex-col"), children: g }),
-          f && /* @__PURE__ */ p("div", { className: "z-10 flex items-center", children: f })
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ p(
-      D.div,
-      {
-        className: x(
-          "pointer-events-none absolute top-0 left-0 will-change-transform select-none",
-          t.orientation === "horizontal" && !t.isEnclosed && "after:border-tabs-indicator bottom-px z-10 after:absolute after:bottom-0 after:left-0 after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:content-['']",
-          t.orientation === "vertical" && !t.isEnclosed && "after:border-tabs-indicator right-px z-10 after:absolute after:top-0 after:right-0 after:h-full after:w-1 after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:content-['']",
-          t.orientation === "horizontal" && t.isEnclosed && "bg-tabs-enclosed-indicator z-0 rounded-lg shadow-lg",
-          t.orientation === "vertical" && t.isEnclosed && "bg-tabs-enclosed-indicator z-0 rounded-lg shadow-lg"
-        ),
-        initial: !1,
-        animate: {
-          // Use x/y (translateX/translateY) for position - compositor-friendly, no reflows
-          x: t.left,
-          y: t.isEnclosed ? t.top + t.height * 0.1 : t.top,
-          // Width/height required for correct rendering: scaleX/Y would distort
-          // border-radius on enclosed variant and border widths on default variant
-          width: t.width,
-          height: t.isEnclosed ? t.orientation === "vertical" ? 40 : t.height * 0.8 : t.height
-        },
-        transition: I ? { duration: 0 } : {
-          // Separate transition configs: spring for transforms, tween for layout
-          x: { type: "spring", stiffness: 500, damping: 40, mass: 1 },
-          y: { type: "spring", stiffness: 500, damping: 40, mass: 1 },
-          width: { type: "spring", stiffness: 500, damping: 40, mass: 1 },
-          height: { type: "spring", stiffness: 500, damping: 40, mass: 1 }
-        },
-        "aria-hidden": "true"
-      }
-    )
-  ] });
-}, et = function({
-  ref: d,
-  className: g,
-  value: o,
-  onClick: s,
-  onKeyDown: f,
-  disabled: u = !1,
-  ...n
-}) {
-  const { value: m, onValueChange: b, activationMode: t, disabled: C, baseId: w } = A("TabsTrigger"), I = `${w}-trigger-${o}`, v = `${w}-content-${o}`, h = m === o, c = C || u, r = T(
-    (i) => {
-      if (c) {
-        i.preventDefault();
-        return;
-      }
-      b(o), s?.(i);
-    },
-    [o, b, s, c]
-  ), a = T(
-    (i) => {
-      if (c) {
-        i.preventDefault();
-        return;
-      }
-      const { key: l } = i;
-      (l === "Enter" || l === " ") && (i.preventDefault(), i.stopPropagation(), b(o)), f?.(i);
-    },
-    [o, b, f, c]
-  ), e = T(() => {
-    c || t === "automatic" && b(o);
-  }, [t, b, o, c]);
-  return /* @__PURE__ */ p(
-    "button",
-    {
-      "aria-controls": v,
-      "aria-disabled": c,
-      "aria-selected": h,
-      className: x("tabs-trigger focus-visible:outline-accent z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2", g),
-      "data-disabled": c ? "" : void 0,
-      "data-state": h ? "active" : "inactive",
-      "data-testid": "spectral-tabs-trigger",
-      disabled: c,
-      id: I,
-      onClick: r,
-      onFocus: e,
-      onKeyDown: a,
-      ref: d,
-      role: "tab",
-      tabIndex: h ? 0 : -1,
-      type: "button",
-      ...n
-    }
-  );
-}, nt = function({
-  ref: d,
-  children: g,
-  className: o
-}) {
-  const { value: s } = A("TabsContentContainer"), [f, u] = H(), n = $();
-  return /* @__PURE__ */ p(
-    D.div,
-    {
-      ref: d,
-      className: x("overflow-hidden", o),
-      "data-testid": "spectral-tabs-content-container",
-      animate: {
-        height: u.height || "auto"
-      },
-      transition: n ? { duration: 0 } : {
-        duration: 0.3,
-        ease: [0.25, 1, 0.5, 1]
-      },
-      children: /* @__PURE__ */ p(G, { mode: "wait", initial: !1, children: /* @__PURE__ */ p(
-        D.div,
-        {
-          ref: f,
-          initial: n ? !1 : { opacity: 0, y: 8 },
-          animate: { opacity: 1, y: 0 },
-          exit: n ? void 0 : { opacity: 0, y: -8 },
-          transition: n ? { duration: 0 } : {
-            duration: 0.2,
-            ease: [0.25, 1, 0.5, 1]
-          },
-          children: g
-        },
-        s
-      ) })
-    }
-  );
-}, ot = function({
-  ref: d,
-  className: g,
-  value: o,
-  forceMount: s = !1,
-  ...f
-}) {
-  const { value: u, baseId: n } = A("TabsContent"), m = `${n}-content-${o}`, b = `${n}-trigger-${o}`, t = u === o;
-  return !s && !t ? null : /* @__PURE__ */ p(
-    "div",
-    {
-      "aria-labelledby": b,
-      className: x("tabs-content focus:outline-none focus-visible:outline-none", g),
-      "data-state": t ? "active" : "inactive",
-      "data-testid": "spectral-tabs-content",
-      hidden: !t,
-      id: m,
-      ref: d,
-      role: "tabpanel",
-      tabIndex: 0,
-      ...f
-    }
-  );
-};
-export {
-  V as TabsBase,
-  ot as TabsContent,
-  nt as TabsContentContainer,
-  N as TabsContext,
-  tt as TabsList,
-  et as TabsTrigger,
-  A as useTabsContext
+import { t as e } from "../twUtils-VNWgstKL.js";
+import { t } from "../proxy-Dn10Pl_g.js";
+import { t as n } from "../AnimatePresence-D-9jXfgI.js";
+import { t as r } from "../dist-B4FgboI8.js";
+import { calculateIndicatorStyle as i, debounce as a, generateId as o, prefersReducedMotion as s } from "./tabsUtils.js";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/Tabs/TabsBase.tsx
+var v = c(null), y = (e = "Tabs") => {
+	let t = u(v);
+	if (t === null) throw Error(`${e} components must be used within a Tabs.Root`);
+	return t;
+}, b = function({ ref: e, activationMode: t = "automatic", children: n, defaultValue: r, dir: i = "ltr", disabled: a = !1, onValueChange: s, orientation: c = "horizontal", rightSlot: u, value: d, ...p }) {
+	let [m, _] = h(r ?? ""), y = f() ?? o("tabs"), b = d !== void 0, x = b ? d : m, S = {
+		activationMode: t,
+		baseId: y,
+		dir: i,
+		disabled: a,
+		onValueChange: l((e) => {
+			a || (b || _(e), s?.(e));
+		}, [
+			b,
+			s,
+			a
+		]),
+		orientation: c,
+		rightSlot: u,
+		value: x
+	};
+	return /* @__PURE__ */ g(v.Provider, {
+		value: S,
+		children: /* @__PURE__ */ g("div", {
+			ref: e,
+			"data-testid": "spectral-tabs",
+			"data-orientation": c,
+			"data-disabled": a ? "" : void 0,
+			dir: i,
+			...p,
+			children: n
+		})
+	});
+}, x = function({ ref: n, children: r, className: o, loop: c = !0, rightSlot: u, ...f }) {
+	let { orientation: v, disabled: b, value: x } = y("TabsList"), [S, C] = h(null), w = m(null), T = s(), E = l(() => {
+		let e = i(w);
+		(e.width > 0 || e.height > 0) && C(e);
+	}, []), D = p(() => a(E, 16), [E]);
+	d(() => {
+		if (E(), typeof ResizeObserver > "u" || typeof MutationObserver > "u") return;
+		let e = new ResizeObserver(D), t = new MutationObserver(D), n = w.current;
+		return n && (e.observe(n), t.observe(n, {
+			attributes: !0,
+			childList: !0,
+			subtree: !0
+		})), () => {
+			e.disconnect(), t.disconnect(), D.cancel();
+		};
+	}, [E, D]), d(() => {
+		E();
+	}, [x, E]);
+	let O = l((e) => {
+		if (b) return;
+		let t = Array.from(w.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
+		if (t.length === 0) return;
+		let n = t.findIndex((e) => e === document.activeElement);
+		if (n === -1) return;
+		let r = null, { key: i, ctrlKey: a, metaKey: o } = e, s = a || o;
+		v === "horizontal" ? i === "ArrowLeft" || i === "ArrowUp" && s ? r = n > 0 ? n - 1 : c ? t.length - 1 : n : (i === "ArrowRight" || i === "ArrowDown" && s) && (r = n < t.length - 1 ? n + 1 : c ? 0 : n) : i === "ArrowUp" || i === "ArrowLeft" && s ? r = n > 0 ? n - 1 : c ? t.length - 1 : n : (i === "ArrowDown" || i === "ArrowRight" && s) && (r = n < t.length - 1 ? n + 1 : c ? 0 : n), i === "Home" ? r = 0 : i === "End" && (r = t.length - 1), r !== null && r !== n && (e.preventDefault(), e.stopPropagation(), t[r]?.focus());
+	}, [
+		b,
+		v,
+		c
+	]);
+	return /* @__PURE__ */ _("div", {
+		className: "relative",
+		ref: w,
+		children: [/* @__PURE__ */ _("div", {
+			ref: n,
+			role: "tablist",
+			"data-testid": "spectral-tabs-list",
+			"aria-orientation": v,
+			"aria-disabled": b,
+			className: e("tabs-list flex", v === "horizontal" && "items-center justify-between", v === "vertical" && "flex-col", o),
+			onKeyDown: O,
+			...f,
+			children: [/* @__PURE__ */ g("div", {
+				className: e("flex", v === "horizontal" && "items-center", v === "vertical" && "flex-col"),
+				children: r
+			}), u && /* @__PURE__ */ g("div", {
+				className: "z-10 flex items-center",
+				children: u
+			})]
+		}), S && /* @__PURE__ */ g(t.div, {
+			className: e("top-0 left-0 pointer-events-none absolute will-change-transform select-none", S.orientation === "horizontal" && !S.isEnclosed && "after:bottom-0 after:left-0 bottom-px z-10 after:absolute after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:border-tabs-indicator after:content-['']", S.orientation === "vertical" && !S.isEnclosed && "after:right-0 after:top-0 after:w-1 right-px z-10 after:absolute after:h-full after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:border-tabs-indicator after:content-['']", S.orientation === "horizontal" && S.isEnclosed && "rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator", S.orientation === "vertical" && S.isEnclosed && "rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator"),
+			initial: !1,
+			animate: {
+				x: S.left,
+				y: S.isEnclosed ? S.top + S.height * .1 : S.top,
+				width: S.width,
+				height: S.isEnclosed ? S.orientation === "vertical" ? 40 : S.height * .8 : S.height
+			},
+			transition: T ? { duration: 0 } : {
+				x: {
+					type: "spring",
+					stiffness: 500,
+					damping: 40,
+					mass: 1
+				},
+				y: {
+					type: "spring",
+					stiffness: 500,
+					damping: 40,
+					mass: 1
+				},
+				width: {
+					type: "spring",
+					stiffness: 500,
+					damping: 40,
+					mass: 1
+				},
+				height: {
+					type: "spring",
+					stiffness: 500,
+					damping: 40,
+					mass: 1
+				}
+			},
+			"aria-hidden": "true"
+		})]
+	});
+}, S = function({ ref: t, className: n, value: r, onClick: i, onKeyDown: a, disabled: o = !1, ...s }) {
+	let { value: c, onValueChange: u, activationMode: d, disabled: f, baseId: p } = y("TabsTrigger"), m = `${p}-trigger-${r}`, h = `${p}-content-${r}`, _ = c === r, v = f || o, b = l((e) => {
+		if (v) {
+			e.preventDefault();
+			return;
+		}
+		u(r), i?.(e);
+	}, [
+		r,
+		u,
+		i,
+		v
+	]), x = l((e) => {
+		if (v) {
+			e.preventDefault();
+			return;
+		}
+		let { key: t } = e;
+		(t === "Enter" || t === " ") && (e.preventDefault(), e.stopPropagation(), u(r)), a?.(e);
+	}, [
+		r,
+		u,
+		a,
+		v
+	]), S = l(() => {
+		v || d === "automatic" && u(r);
+	}, [
+		d,
+		u,
+		r,
+		v
+	]);
+	return /* @__PURE__ */ g("button", {
+		"aria-controls": h,
+		"aria-disabled": v,
+		"aria-selected": _,
+		className: e("tabs-trigger z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", n),
+		"data-disabled": v ? "" : void 0,
+		"data-state": _ ? "active" : "inactive",
+		"data-testid": "spectral-tabs-trigger",
+		disabled: v,
+		id: m,
+		onClick: b,
+		onFocus: S,
+		onKeyDown: x,
+		ref: t,
+		role: "tab",
+		tabIndex: _ ? 0 : -1,
+		type: "button",
+		...s
+	});
+}, C = function({ ref: i, children: a, className: o }) {
+	let { value: c } = y("TabsContentContainer"), [l, u] = r(), d = s();
+	return /* @__PURE__ */ g(t.div, {
+		ref: i,
+		className: e("overflow-hidden", o),
+		"data-testid": "spectral-tabs-content-container",
+		animate: { height: u.height || "auto" },
+		transition: d ? { duration: 0 } : {
+			duration: .3,
+			ease: [
+				.25,
+				1,
+				.5,
+				1
+			]
+		},
+		children: /* @__PURE__ */ g(n, {
+			mode: "wait",
+			initial: !1,
+			children: /* @__PURE__ */ g(t.div, {
+				ref: l,
+				initial: d ? !1 : {
+					opacity: 0,
+					y: 8
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				exit: d ? void 0 : {
+					opacity: 0,
+					y: -8
+				},
+				transition: d ? { duration: 0 } : {
+					duration: .2,
+					ease: [
+						.25,
+						1,
+						.5,
+						1
+					]
+				},
+				children: a
+			}, c)
+		})
+	});
+}, w = function({ ref: t, className: n, value: r, forceMount: i = !1, ...a }) {
+	let { value: o, baseId: s } = y("TabsContent"), c = `${s}-content-${r}`, l = `${s}-trigger-${r}`, u = o === r;
+	return !i && !u ? null : /* @__PURE__ */ g("div", {
+		"aria-labelledby": l,
+		className: e("tabs-content focus:outline-none focus-visible:outline-none", n),
+		"data-state": u ? "active" : "inactive",
+		"data-testid": "spectral-tabs-content",
+		hidden: !u,
+		id: c,
+		ref: t,
+		role: "tabpanel",
+		tabIndex: 0,
+		...a
+	});
 };
+//#endregion
+export { b as TabsBase, w as TabsContent, C as TabsContentContainer, v as TabsContext, x as TabsList, S as TabsTrigger, y as useTabsContext };