@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/tabs/index.mjs

@@ -1,397 +1,345 @@
-import { jsx as o, jsxs as F } from "react/jsx-runtime";
-import { Tabs as z } from "@base-ui/react/tabs";
-import { createContext as O, useContext as A, useState as B, useRef as v, useEffect as w, forwardRef as j, useMemo as Q } from "react";
-import { cva as b, cx as U } from "class-variance-authority";
-import { S as X } from "../Slot-DLY1rJrG.mjs";
-import { ArrowVerticalLeft as Y } from "@spark-ui/icons/ArrowVerticalLeft";
-import { ArrowVerticalRight as Z } from "@spark-ui/icons/ArrowVerticalRight";
-import { B as I } from "../Button-1M9DcZl0.mjs";
-import { I as S } from "../Icon-BO327oHU.mjs";
-import { useMergeRefs as D } from "@spark-ui/hooks/use-merge-refs";
-import { MoreMenuHorizontal as _ } from "@spark-ui/icons/MoreMenuHorizontal";
-import { I as ee } from "../IconButton-DdB3Pq13.mjs";
-import { Popover as T } from "../popover/index.mjs";
-import { makeVariants as te } from "@spark-ui/internal-utils";
-const K = O({}), k = () => {
-  const t = A(K);
-  if (!t)
-    throw Error("useTabsContext must be used within a TabsContext Provider");
-  return t;
-}, re = b([
-  "flex",
-  "data-[orientation=horizontal]:flex-col",
-  "data-[orientation=vertical]:flex-row",
-  "max-w-full"
+import { Slot as e } from "../slot/index.mjs";
+import { t } from "../icon-D05Uqh8_.mjs";
+import { t as n } from "../button-_YZ_4J42.mjs";
+import { t as r } from "../icon-button-6p3O7NIm.mjs";
+import { t as i } from "../popover-CxZAQmw6.mjs";
+import { cva as a, cx as o } from "class-variance-authority";
+import { createContext as s, forwardRef as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { makeVariants as g } from "@spark-ui/internal-utils";
+import { useMergeRefs as _ } from "@spark-ui/hooks/use-merge-refs";
+import { ArrowVerticalRight as v } from "@spark-ui/icons/ArrowVerticalRight";
+import { ArrowVerticalLeft as y } from "@spark-ui/icons/ArrowVerticalLeft";
+import { Tabs as b } from "@base-ui/react/tabs";
+import { MoreMenuHorizontal as x } from "@spark-ui/icons/MoreMenuHorizontal";
+//#region src/tabs/TabsContext.tsx
+var S = s({}), C = () => {
+	let e = l(S);
+	if (!e) throw Error("useTabsContext must be used within a TabsContext Provider");
+	return e;
+}, w = a([
+	"flex",
+	"data-[orientation=horizontal]:flex-col",
+	"data-[orientation=vertical]:flex-row",
+	"max-w-full"
 ]);
-function y(t) {
-  return t ? ({ ...r }) => /* @__PURE__ */ o(X, { ...r }) : void 0;
+//#endregion
+//#region src/tabs/useRenderSlot.tsx
+function T(t) {
+	return t ? ({ ...t }) => /* @__PURE__ */ m(e, { ...t }) : void 0;
 }
-const $ = ({
-  intent: t = "support",
-  size: r = "md",
-  /**
-   * Default Base UI Primitive values
-   * see https://base-ui.com/react/components/tabs
-   */
-  asChild: l = !1,
-  forceMount: a = !1,
-  orientation: n = "horizontal",
-  children: i,
-  className: s,
-  ref: c,
-  ...e
-}) => {
-  const h = y(l);
-  return /* @__PURE__ */ o(
-    K.Provider,
-    {
-      value: {
-        intent: t,
-        size: r,
-        orientation: n,
-        forceMount: a
-      },
-      children: /* @__PURE__ */ o(
-        z.Root,
-        {
-          ref: c,
-          orientation: n,
-          className: re({ className: s }),
-          "data-spark-component": "tabs",
-          render: h,
-          ...e,
-          children: i
-        }
-      )
-    }
-  );
+//#endregion
+//#region src/tabs/Tabs.tsx
+var E = ({ intent: e = "support", size: t = "md", asChild: n = !1, forceMount: r = !1, orientation: i = "horizontal", children: a, className: o, ref: s, ...c }) => {
+	let l = T(n);
+	return /* @__PURE__ */ m(S.Provider, {
+		value: {
+			intent: e,
+			size: t,
+			orientation: i,
+			forceMount: r
+		},
+		children: /* @__PURE__ */ m(b.Root, {
+			ref: s,
+			orientation: i,
+			className: w({ className: o }),
+			"data-spark-component": "tabs",
+			render: l,
+			...c,
+			children: a
+		})
+	});
 };
-$.displayName = "Tabs";
-const oe = b(["w-full p-lg", "focus-visible:u-outline-inset"], {
-  variants: {
-    forceMount: {
-      true: "data-[hidden]:hidden",
-      false: ""
-    }
-  }
-}), R = ({
-  /**
-   * Default Base UI Primitive values
-   * see https://base-ui.com/react/components/tabs
-   */
-  children: t,
-  asChild: r = !1,
-  className: l,
-  ref: a,
-  forceMount: n,
-  ...i
-}) => {
-  const { forceMount: s } = k(), c = y(r), e = s || n;
-  return /* @__PURE__ */ o(
-    z.Panel,
-    {
-      "data-spark-component": "tabs-content",
-      ref: a,
-      keepMounted: e,
-      className: oe({ className: l, forceMount: e }),
-      render: c,
-      ...i,
-      children: t
-    }
-  );
+E.displayName = "Tabs";
+//#endregion
+//#region src/tabs/TabsContent.styles.ts
+var D = a(["w-full p-lg", "focus-visible:u-outline-inset"], { variants: { forceMount: {
+	true: "data-[hidden]:hidden",
+	false: ""
+} } }), O = ({ children: e, asChild: t = !1, className: n, ref: r, forceMount: i, ...a }) => {
+	let { forceMount: o } = C(), s = T(t), c = o || i;
+	return /* @__PURE__ */ m(b.Panel, {
+		"data-spark-component": "tabs-content",
+		ref: r,
+		keepMounted: c,
+		className: D({
+			className: n,
+			forceMount: c
+		}),
+		render: s,
+		...a,
+		children: e
+	});
 };
-R.displayName = "Tabs.Content";
-const ne = b(["relative flex"]), ie = b([
-  "flex w-full",
-  "data-[orientation=horizontal]:flex-row",
-  "data-[orientation=vertical]:flex-col",
-  "overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden",
-  "after:flex after:shrink after:grow after:border-outline",
-  "data-[orientation=horizontal]:after:border-b-sm",
-  "data-[orientation=vertical]:after:border-r-sm"
-]), E = b([
-  "h-auto! flex-none",
-  "border-b-sm border-outline",
-  "outline-hidden",
-  "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
-]), se = (t, r) => {
-  const [l, a] = B({ width: void 0, height: void 0 }), n = v(null), i = v(r);
-  return w(() => {
-    i.current = r;
-  }, [r]), w(() => {
-    const s = t && "current" in t ? t.current : t;
-    if (!(!s || n.current))
-      return n.current = new ResizeObserver(([c]) => {
-        const { inlineSize: e, blockSize: h } = c?.borderBoxSize?.[0] ?? {};
-        i.current?.(c), a({ width: e, height: h });
-      }), n.current.observe(s), () => {
-        n.current && n.current.unobserve(s);
-      };
-  }, [t, n, i]), l;
-}, W = ({
-  /**
-   * Default Base UI Primitive values
-   * see https://base-ui.com/react/components/tabs
-   */
-  asChild: t = !1,
-  loop: r = !1,
-  children: l,
-  className: a,
-  ref: n,
-  ...i
-}) => {
-  const s = v(null), c = v(null), e = n || c, { orientation: h } = k(), C = y(t), { width: x } = se(s), [d, g] = B({
-    prev: "hidden",
-    next: "hidden"
-  });
-  w(() => {
-    typeof e == "function" || !e.current || g(h !== "horizontal" ? { prev: "hidden", next: "hidden" } : {
-      prev: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden",
-      next: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden"
-    });
-  }, [h, e, x]), w(() => {
-    if (typeof e == "function" || !e.current || d.prev === "hidden" || r)
-      return;
-    const f = (u) => {
-      g({
-        prev: u.scrollLeft > 0 ? "visible" : "disabled",
-        next: u.scrollLeft + u.clientWidth < u.scrollWidth ? "visible" : "disabled"
-      });
-    }, p = e.current;
-    return f(p), p.addEventListener(
-      "scroll",
-      ({ target: u }) => f(u)
-    ), () => p.removeEventListener(
-      "scroll",
-      ({ target: u }) => f(u)
-    );
-  }, [e, d.prev, r]);
-  const N = () => {
-    if (typeof e == "function" || !e.current)
-      return;
-    const f = r && e.current.scrollLeft <= 0;
-    e.current.scrollTo({
-      left: f ? e.current.scrollLeft + e.current.scrollWidth - e.current.clientWidth : e.current.scrollLeft - e.current.clientWidth,
-      behavior: "smooth"
-    });
-  }, P = () => {
-    if (typeof e == "function" || !e.current)
-      return;
-    const f = r && e.current.scrollLeft + e.current.clientWidth >= e.current.scrollWidth;
-    e.current.scrollTo({
-      left: f ? 0 : e.current.scrollLeft + e.current.clientWidth,
-      behavior: "smooth"
-    });
-  };
-  return /* @__PURE__ */ F("div", { className: ne({ className: a }), ref: s, children: [
-    d.prev !== "hidden" && /* @__PURE__ */ o(
-      I,
-      {
-        shape: "square",
-        intent: "surface",
-        size: "sm",
-        className: E(),
-        onClick: N,
-        disabled: d.prev === "disabled",
-        "aria-label": "Scroll left",
-        children: /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(Y, {}) })
-      }
-    ),
-    /* @__PURE__ */ o(
-      z.List,
-      {
-        "data-spark-component": "tabs-list",
-        ref: e,
-        className: ie(),
-        render: C,
-        loopFocus: r,
-        activateOnFocus: !0,
-        ...i,
-        children: l
-      }
-    ),
-    d.next !== "hidden" && /* @__PURE__ */ o(
-      I,
-      {
-        shape: "square",
-        intent: "surface",
-        size: "sm",
-        className: E(),
-        onClick: P,
-        disabled: d.next === "disabled",
-        "aria-label": "Scroll right",
-        children: /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(Z, {}) })
-      }
-    )
-  ] });
+O.displayName = "Tabs.Content";
+//#endregion
+//#region src/tabs/TabsList.styles.ts
+var k = a(["relative flex"]), A = a([
+	"flex w-full",
+	"data-[orientation=horizontal]:flex-row",
+	"data-[orientation=vertical]:flex-col",
+	"overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden",
+	"after:flex after:shrink after:grow after:border-outline",
+	"data-[orientation=horizontal]:after:border-b-sm",
+	"data-[orientation=vertical]:after:border-r-sm"
+]), j = a([
+	"h-auto! flex-none",
+	"border-b-sm border-outline",
+	"outline-hidden",
+	"focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
+]), M = (e, t) => {
+	let [n, r] = p({
+		width: void 0,
+		height: void 0
+	}), i = f(null), a = f(t);
+	return u(() => {
+		a.current = t;
+	}, [t]), u(() => {
+		let t = e && "current" in e ? e.current : e;
+		if (!(!t || i.current)) return i.current = new ResizeObserver(([e]) => {
+			let { inlineSize: t, blockSize: n } = e?.borderBoxSize?.[0] ?? {};
+			a.current?.(e), r({
+				width: t,
+				height: n
+			});
+		}), i.current.observe(t), () => {
+			i.current && i.current.unobserve(t);
+		};
+	}, [
+		e,
+		i,
+		a
+	]), n;
+}, N = ({ asChild: e = !1, loop: r = !1, children: i, className: a, ref: o, ...s }) => {
+	let c = f(null), l = f(null), d = o || l, { orientation: g } = C(), _ = T(e), { width: x } = M(c), [S, w] = p({
+		prev: "hidden",
+		next: "hidden"
+	});
+	u(() => {
+		typeof d == "function" || !d.current || w(g === "horizontal" ? {
+			prev: d.current.scrollWidth > d.current.clientWidth ? "visible" : "hidden",
+			next: d.current.scrollWidth > d.current.clientWidth ? "visible" : "hidden"
+		} : {
+			prev: "hidden",
+			next: "hidden"
+		});
+	}, [
+		g,
+		d,
+		x
+	]), u(() => {
+		if (typeof d == "function" || !d.current || S.prev === "hidden" || r) return;
+		let e = (e) => {
+			w({
+				prev: e.scrollLeft > 0 ? "visible" : "disabled",
+				next: e.scrollLeft + e.clientWidth < e.scrollWidth ? "visible" : "disabled"
+			});
+		}, t = d.current;
+		return e(t), t.addEventListener("scroll", ({ target: t }) => e(t)), () => t.removeEventListener("scroll", ({ target: t }) => e(t));
+	}, [
+		d,
+		S.prev,
+		r
+	]);
+	let E = () => {
+		if (typeof d == "function" || !d.current) return;
+		let e = r && d.current.scrollLeft <= 0;
+		d.current.scrollTo({
+			left: e ? d.current.scrollLeft + d.current.scrollWidth - d.current.clientWidth : d.current.scrollLeft - d.current.clientWidth,
+			behavior: "smooth"
+		});
+	}, D = () => {
+		if (typeof d == "function" || !d.current) return;
+		let e = r && d.current.scrollLeft + d.current.clientWidth >= d.current.scrollWidth;
+		d.current.scrollTo({
+			left: e ? 0 : d.current.scrollLeft + d.current.clientWidth,
+			behavior: "smooth"
+		});
+	};
+	return /* @__PURE__ */ h("div", {
+		className: k({ className: a }),
+		ref: c,
+		children: [
+			S.prev !== "hidden" && /* @__PURE__ */ m(n, {
+				shape: "square",
+				intent: "surface",
+				size: "sm",
+				className: j(),
+				onClick: E,
+				disabled: S.prev === "disabled",
+				"aria-label": "Scroll left",
+				children: /* @__PURE__ */ m(t, { children: /* @__PURE__ */ m(y, {}) })
+			}),
+			/* @__PURE__ */ m(b.List, {
+				"data-spark-component": "tabs-list",
+				ref: d,
+				className: A(),
+				render: _,
+				loopFocus: r,
+				activateOnFocus: !0,
+				...s,
+				children: i
+			}),
+			S.next !== "hidden" && /* @__PURE__ */ m(n, {
+				shape: "square",
+				intent: "surface",
+				size: "sm",
+				className: j(),
+				onClick: D,
+				disabled: S.next === "disabled",
+				"aria-label": "Scroll right",
+				children: /* @__PURE__ */ m(t, { children: /* @__PURE__ */ m(v, {}) })
+			})
+		]
+	});
 };
-W.displayName = "Tabs.List";
-const L = O(void 0), q = () => {
-  const t = A(L);
-  if (!t)
-    throw new Error("TabsPopover components must be used within TabsPopover");
-  return t;
-}, H = j(
-  ({ "aria-label": t, children: r, ...l }, a) => {
-    const { popoverTriggerRef: n } = q(), i = D(a, n);
-    return /* @__PURE__ */ o(T.Trigger, { asChild: !0, ...l, children: /* @__PURE__ */ o(
-      ee,
-      {
-        ref: i,
-        size: "sm",
-        intent: "surfaceInverse",
-        design: "ghost",
-        "aria-label": t,
-        tabIndex: -1,
-        children: /* @__PURE__ */ o(S, { children: r || /* @__PURE__ */ o(_, {}) })
-      }
-    ) });
-  }
-);
-H.displayName = "Popover.Trigger";
-const G = j(
-  ({ side: t, align: r = "start", className: l, ...a }, n) => {
-    const { popoverSide: i } = q(), s = U("gap-sm flex flex-col", l);
-    return /* @__PURE__ */ o(
-      T.Content,
-      {
-        ref: n,
-        ...a,
-        side: t ?? i,
-        align: r,
-        className: s
-      }
-    );
-  }
-);
-G.displayName = "Popover.Content";
-const J = ({ popoverSide: t, popoverTriggerRef: r, children: l }) => {
-  const a = Q(
-    () => ({ popoverSide: t, popoverTriggerRef: r }),
-    [t, r]
-  ), i = Object.assign(((s) => /* @__PURE__ */ o(L.Provider, { value: a, children: /* @__PURE__ */ o(T, { ...s, children: s.children }) })), T, {
-    Content: G,
-    Trigger: H
-  });
-  return /* @__PURE__ */ o(L.Provider, { value: a, children: l(i) });
+N.displayName = "Tabs.List";
+//#endregion
+//#region src/tabs/TabsPopoverAbstraction.tsx
+var P = s(void 0), F = () => {
+	let e = l(P);
+	if (!e) throw Error("TabsPopover components must be used within TabsPopover");
+	return e;
+}, I = c(({ "aria-label": e, children: n, ...a }, o) => {
+	let { popoverTriggerRef: s } = F(), c = _(o, s);
+	return /* @__PURE__ */ m(i.Trigger, {
+		asChild: !0,
+		...a,
+		children: /* @__PURE__ */ m(r, {
+			ref: c,
+			size: "sm",
+			intent: "surfaceInverse",
+			design: "ghost",
+			"aria-label": e,
+			tabIndex: -1,
+			children: /* @__PURE__ */ m(t, { children: n || /* @__PURE__ */ m(x, {}) })
+		})
+	});
+});
+I.displayName = "Popover.Trigger";
+var L = c(({ side: e, align: t = "start", className: n, ...r }, a) => {
+	let { popoverSide: s } = F(), c = o("gap-sm flex flex-col", n);
+	return /* @__PURE__ */ m(i.Content, {
+		ref: a,
+		...r,
+		side: e ?? s,
+		align: t,
+		className: c
+	});
+});
+L.displayName = "Popover.Content";
+var R = ({ popoverSide: e, popoverTriggerRef: t, children: n }) => {
+	let r = d(() => ({
+		popoverSide: e,
+		popoverTriggerRef: t
+	}), [e, t]), a = Object.assign(((e) => /* @__PURE__ */ m(P.Provider, {
+		value: r,
+		children: /* @__PURE__ */ m(i, {
+			...e,
+			children: e.children
+		})
+	})), i, {
+		Content: L,
+		Trigger: I
+	});
+	return /* @__PURE__ */ m(P.Provider, {
+		value: r,
+		children: n(a)
+	});
 };
-J.displayName = "Popover";
-const ae = b(
-  [
-    "px-md",
-    "relative flex flex-none items-center",
-    "border-outline",
-    "hover:not-disabled:bg-surface-hovered",
-    "after:absolute",
-    "data-[active]:font-bold",
-    "not-data-[active]:not-disabled:cursor-pointer",
-    "data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2",
-    "data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2",
-    "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset",
-    "disabled:cursor-not-allowed disabled:opacity-dim-3",
-    "gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md",
-    "[&>svg:last-child:first-child]:mx-auto"
-  ],
-  {
-    variants: {
-      /**
-       * Change the color scheme of the tabs
-       * @default support
-       */
-      intent: te({
-        main: ["data-[active]:text-main data-[active]:after:bg-main"],
-        support: ["data-[active]:text-support data-[active]:after:bg-support"]
-      }),
-      /**
-       * Change the size of the tabs
-       * @default md
-       */
-      size: {
-        xs: ["h-sz-32 min-w-sz-32 text-caption"],
-        sm: ["h-sz-36 min-w-sz-36 text-body-2"],
-        md: ["h-sz-40 min-w-sz-40 text-body-1"]
-      },
-      hasMenu: {
-        true: "pr-3xl"
-      },
-      orientation: {
-        horizontal: "",
-        vertical: ""
-      }
-    },
-    compoundVariants: [
-      {
-        hasMenu: !0,
-        orientation: "vertical",
-        class: "w-full"
-      }
-    ],
-    defaultVariants: {
-      intent: "support",
-      size: "md",
-      hasMenu: !1,
-      orientation: "horizontal"
-    }
-  }
-), M = ({
-  /**
-   * Default Base UI Primitive values
-   * see https://base-ui.com/react/components/tabs
-   */
-  asChild: t = !1,
-  value: r,
-  disabled: l = !1,
-  children: a,
-  className: n,
-  ref: i,
-  onKeyDown: s,
-  renderMenu: c,
-  ...e
-}) => {
-  const { intent: h, size: C, orientation: x } = k(), d = v(null), g = v(null), N = y(t), P = D(i, g), f = (m) => {
-    m.key === "F10" && m.shiftKey && c && d.current && (m.preventDefault(), d.current.click()), s?.(m);
-  }, p = !!c, u = x === "vertical" ? "right" : "bottom", V = /* @__PURE__ */ o(
-    z.Tab,
-    {
-      "data-spark-component": "tabs-trigger",
-      ref: P,
-      className: ae({
-        intent: h,
-        size: C,
-        hasMenu: p,
-        orientation: x ?? "horizontal",
-        className: n
-      }),
-      render: N,
-      disabled: l,
-      value: r,
-      onFocus: ({ target: m }) => m.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest"
-      }),
-      onKeyDown: f,
-      "aria-haspopup": p ? "true" : void 0,
-      ...e,
-      children: a
-    }
-  );
-  return p ? /* @__PURE__ */ F("div", { className: x === "vertical" ? "relative w-full" : "relative", children: [
-    V,
-    /* @__PURE__ */ o("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ o(J, { popoverSide: u, popoverTriggerRef: d, children: (m) => c?.({ Popover: m }) }) })
-  ] }) : V;
+R.displayName = "Popover";
+//#endregion
+//#region src/tabs/TabsTrigger.styles.ts
+var z = a([
+	"px-md",
+	"relative flex flex-none items-center",
+	"border-outline",
+	"hover:not-disabled:bg-surface-hovered",
+	"after:absolute",
+	"data-[active]:font-bold",
+	"not-data-[active]:not-disabled:cursor-pointer",
+	"data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2",
+	"data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2",
+	"focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset",
+	"disabled:cursor-not-allowed disabled:opacity-dim-3",
+	"gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md",
+	"[&>svg:last-child:first-child]:mx-auto"
+], {
+	variants: {
+		intent: g({
+			main: ["data-[active]:text-main data-[active]:after:bg-main"],
+			support: ["data-[active]:text-support data-[active]:after:bg-support"]
+		}),
+		size: {
+			xs: ["h-sz-32 min-w-sz-32 text-caption"],
+			sm: ["h-sz-36 min-w-sz-36 text-body-2"],
+			md: ["h-sz-40 min-w-sz-40 text-body-1"]
+		},
+		hasMenu: { true: "pr-3xl" },
+		orientation: {
+			horizontal: "",
+			vertical: ""
+		}
+	},
+	compoundVariants: [{
+		hasMenu: !0,
+		orientation: "vertical",
+		class: "w-full"
+	}],
+	defaultVariants: {
+		intent: "support",
+		size: "md",
+		hasMenu: !1,
+		orientation: "horizontal"
+	}
+}), B = ({ asChild: e = !1, value: t, disabled: n = !1, children: r, className: i, ref: a, onKeyDown: o, renderMenu: s, ...c }) => {
+	let { intent: l, size: u, orientation: d } = C(), p = f(null), g = f(null), v = T(e), y = _(a, g), x = (e) => {
+		e.key === "F10" && e.shiftKey && s && p.current && (e.preventDefault(), p.current.click()), o?.(e);
+	}, S = !!s, w = d === "vertical" ? "right" : "bottom", E = /* @__PURE__ */ m(b.Tab, {
+		"data-spark-component": "tabs-trigger",
+		ref: y,
+		className: z({
+			intent: l,
+			size: u,
+			hasMenu: S,
+			orientation: d ?? "horizontal",
+			className: i
+		}),
+		render: v,
+		disabled: n,
+		value: t,
+		onFocus: ({ target: e }) => e.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "nearest"
+		}),
+		onKeyDown: x,
+		"aria-haspopup": S ? "true" : void 0,
+		...c,
+		children: r
+	});
+	return S ? /* @__PURE__ */ h("div", {
+		className: d === "vertical" ? "relative w-full" : "relative",
+		children: [E, /* @__PURE__ */ m("div", {
+			className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2",
+			children: /* @__PURE__ */ m(R, {
+				popoverSide: w,
+				popoverTriggerRef: p,
+				children: (e) => s?.({ Popover: e })
+			})
+		})]
+	}) : E;
 };
-M.displayName = "Tabs.Trigger";
-const le = Object.assign($, {
-  List: W,
-  Trigger: M,
-  Content: R
+B.displayName = "Tabs.Trigger";
+//#endregion
+//#region src/tabs/index.ts
+var V = Object.assign(E, {
+	List: N,
+	Trigger: B,
+	Content: O
 });
-le.displayName = "Tabs";
-W.displayName = "Tabs.List";
-M.displayName = "Tabs.Trigger";
-R.displayName = "Tabs.Content";
-export {
-  le as Tabs
-};
-//# sourceMappingURL=index.mjs.map
+V.displayName = "Tabs", N.displayName = "Tabs.List", B.displayName = "Tabs.Trigger", O.displayName = "Tabs.Content";
+//#endregion
+export { V as Tabs };
+
+//# sourceMappingURL=index.mjs.map