import { jsx as i, jsxs as F } from "react/jsx-runtime";
import * as g from "react";
import { createContext as $, useContext as D, useState as B, useRef as T, useEffect as w, forwardRef as G, useMemo as se } from "react";
import { c as x, a as ce } from "../index-BmAFn37q.mjs";
import { u as le, c as R } from "../index-DlIFg0Eu.mjs";
import { c as de } from "../index-DFZozV_h.mjs";
import { c as K, I as ue, R as fe } from "../index-DWlg8lkk.mjs";
import { P as ve } from "../index-BZAtNKwE.mjs";
import { P as C } from "../index-MSR-vgWR.mjs";
import { u as be } from "../index-BlkdpEIe.mjs";
import { u as me } from "../index-BRi38DTc.mjs";
import { ArrowVerticalLeft as pe } from "@spark-ui/icons/ArrowVerticalLeft";
import { ArrowVerticalRight as he } from "@spark-ui/icons/ArrowVerticalRight";
import { B as W } from "../Button-D32Avk2j.mjs";
import { I } from "../Icon-D1RueiPY.mjs";
import { useMergeRefs as O } from "@spark-ui/hooks/use-merge-refs";
import { MoreMenuHorizontal as ge } from "@spark-ui/icons/MoreMenuHorizontal";
import { I as Te } from "../IconButton-BY3gYXtU.mjs";
import { Popover as y } from "../popover/index.mjs";
import { makeVariants as xe } from "@spark-ui/internal-utils";
var z = "Tabs", [we] = de(z, [
  K
]), j = K(), [ye, L] = we(z), q = g.forwardRef(
  (e, r) => {
    const {
      __scopeTabs: c,
      value: a,
      onValueChange: o,
      defaultValue: s,
      orientation: n = "horizontal",
      dir: d,
      activationMode: t = "automatic",
      ...v
    } = e, u = be(d), [l, f] = le({
      prop: a,
      onChange: o,
      defaultProp: s ?? "",
      caller: z
    });
    return /* @__PURE__ */ i(
      ye,
      {
        scope: c,
        baseId: me(),
        value: l,
        onValueChange: f,
        orientation: n,
        dir: u,
        activationMode: t,
        children: /* @__PURE__ */ i(
          C.div,
          {
            dir: u,
            "data-orientation": n,
            ...v,
            ref: r
          }
        )
      }
    );
  }
);
q.displayName = z;
var H = "TabsList", J = g.forwardRef(
  (e, r) => {
    const { __scopeTabs: c, loop: a = !0, ...o } = e, s = L(H, c), n = j(c);
    return /* @__PURE__ */ i(
      fe,
      {
        asChild: !0,
        ...n,
        orientation: s.orientation,
        dir: s.dir,
        loop: a,
        children: /* @__PURE__ */ i(
          C.div,
          {
            role: "tablist",
            "aria-orientation": s.orientation,
            ...o,
            ref: r
          }
        )
      }
    );
  }
);
J.displayName = H;
var Q = "TabsTrigger", U = g.forwardRef(
  (e, r) => {
    const { __scopeTabs: c, value: a, disabled: o = !1, ...s } = e, n = L(Q, c), d = j(c), t = Z(n.baseId, a), v = ee(n.baseId, a), u = a === n.value;
    return /* @__PURE__ */ i(
      ue,
      {
        asChild: !0,
        ...d,
        focusable: !o,
        active: u,
        children: /* @__PURE__ */ i(
          C.button,
          {
            type: "button",
            role: "tab",
            "aria-selected": u,
            "aria-controls": v,
            "data-state": u ? "active" : "inactive",
            "data-disabled": o ? "" : void 0,
            disabled: o,
            id: t,
            ...s,
            ref: r,
            onMouseDown: R(e.onMouseDown, (l) => {
              !o && l.button === 0 && l.ctrlKey === !1 ? n.onValueChange(a) : l.preventDefault();
            }),
            onKeyDown: R(e.onKeyDown, (l) => {
              [" ", "Enter"].includes(l.key) && n.onValueChange(a);
            }),
            onFocus: R(e.onFocus, () => {
              const l = n.activationMode !== "manual";
              !u && !o && l && n.onValueChange(a);
            })
          }
        )
      }
    );
  }
);
U.displayName = Q;
var X = "TabsContent", Y = g.forwardRef(
  (e, r) => {
    const { __scopeTabs: c, value: a, forceMount: o, children: s, ...n } = e, d = L(X, c), t = Z(d.baseId, a), v = ee(d.baseId, a), u = a === d.value, l = g.useRef(u);
    return g.useEffect(() => {
      const f = requestAnimationFrame(() => l.current = !1);
      return () => cancelAnimationFrame(f);
    }, []), /* @__PURE__ */ i(ve, { present: o || u, children: ({ present: f }) => /* @__PURE__ */ i(
      C.div,
      {
        "data-state": u ? "active" : "inactive",
        "data-orientation": d.orientation,
        role: "tabpanel",
        "aria-labelledby": t,
        hidden: !f,
        id: v,
        tabIndex: 0,
        ...n,
        ref: r,
        style: {
          ...e.style,
          animationDuration: l.current ? "0s" : void 0
        },
        children: f && s
      }
    ) });
  }
);
Y.displayName = X;
function Z(e, r) {
  return `${e}-trigger-${r}`;
}
function ee(e, r) {
  return `${e}-content-${r}`;
}
var Ce = q, ze = J, Ne = U, Pe = Y;
const te = $({}), M = () => {
  const e = D(te);
  if (!e)
    throw Error("useTabsContext must be used within a TabsContext Provider");
  return e;
}, Re = x([
  "flex",
  "data-[orientation=horizontal]:flex-col",
  "data-[orientation=vertical]:flex-row",
  "max-w-full"
]), re = ({
  intent: e = "basic",
  size: r = "md",
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#root
   */
  asChild: c = !1,
  forceMount: a = !1,
  orientation: o = "horizontal",
  children: s,
  className: n,
  ref: d,
  ...t
}) => /* @__PURE__ */ i(
  te.Provider,
  {
    value: {
      intent: e,
      size: r,
      orientation: o,
      forceMount: a
    },
    children: /* @__PURE__ */ i(
      Ce,
      {
        ref: d,
        asChild: c,
        orientation: o,
        className: Re({ className: n }),
        "data-spark-component": "tabs",
        activationMode: "automatic",
        ...t,
        children: s
      }
    )
  }
);
re.displayName = "Tabs";
const Ie = x(["w-full p-lg", "focus-visible:u-outline-inset"], {
  variants: {
    forceMount: {
      true: "data-[state=inactive]:hidden",
      false: ""
    }
  }
}), k = ({
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#content
   */
  children: e,
  asChild: r = !1,
  className: c,
  ref: a,
  ...o
}) => {
  const { forceMount: s } = M();
  return /* @__PURE__ */ i(
    Pe,
    {
      "data-spark-component": "tabs-content",
      ref: a,
      forceMount: s || o.forceMount,
      className: Ie({ className: c, forceMount: s }),
      asChild: r,
      ...o,
      children: e
    }
  );
};
k.displayName = "Tabs.Content";
const Se = x(["relative flex"]), Le = x([
  "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"
]), _ = x([
  "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!"
]), Me = (e, r) => {
  const [c, a] = B({ width: void 0, height: void 0 }), o = T(null), s = T(r);
  return w(() => {
    s.current = r;
  }, [r]), w(() => {
    const n = e && "current" in e ? e.current : e;
    if (!(!n || o.current))
      return o.current = new ResizeObserver(([d]) => {
        const { inlineSize: t, blockSize: v } = d?.borderBoxSize?.[0] ?? {};
        s.current?.(d), a({ width: t, height: v });
      }), o.current.observe(n), () => {
        o.current && o.current.unobserve(n);
      };
  }, [e, o, s]), c;
}, A = ({
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#list
   */
  asChild: e = !1,
  loop: r = !1,
  children: c,
  className: a,
  ref: o,
  ...s
}) => {
  const n = T(null), d = T(null), t = o || d, { orientation: v } = M(), { width: u } = Me(n), [l, f] = B({
    prev: "hidden",
    next: "hidden"
  });
  w(() => {
    typeof t == "function" || !t.current || f(v !== "horizontal" ? { prev: "hidden", next: "hidden" } : {
      prev: t.current.scrollWidth > t.current.clientWidth ? "visible" : "hidden",
      next: t.current.scrollWidth > t.current.clientWidth ? "visible" : "hidden"
    });
  }, [v, t, u]), w(() => {
    if (typeof t == "function" || !t.current || l.prev === "hidden" || r)
      return;
    const m = (b) => {
      f({
        prev: b.scrollLeft > 0 ? "visible" : "disabled",
        next: b.scrollLeft + b.clientWidth < b.scrollWidth ? "visible" : "disabled"
      });
    }, h = t.current;
    return m(h), h.addEventListener(
      "scroll",
      ({ target: b }) => m(b)
    ), () => h.removeEventListener(
      "scroll",
      ({ target: b }) => m(b)
    );
  }, [t, l.prev, r]);
  const N = () => {
    if (typeof t == "function" || !t.current)
      return;
    const m = r && t.current.scrollLeft <= 0;
    t.current.scrollTo({
      left: m ? t.current.scrollLeft + t.current.scrollWidth - t.current.clientWidth : t.current.scrollLeft - t.current.clientWidth,
      behavior: "smooth"
    });
  }, P = () => {
    if (typeof t == "function" || !t.current)
      return;
    const m = r && t.current.scrollLeft + t.current.clientWidth >= t.current.scrollWidth;
    t.current.scrollTo({
      left: m ? 0 : t.current.scrollLeft + t.current.clientWidth,
      behavior: "smooth"
    });
  };
  return /* @__PURE__ */ F("div", { className: Se({ className: a }), ref: n, children: [
    l.prev !== "hidden" && /* @__PURE__ */ i(
      W,
      {
        shape: "square",
        intent: "surface",
        size: "sm",
        className: _(),
        onClick: N,
        disabled: l.prev === "disabled",
        "aria-label": "Scroll left",
        children: /* @__PURE__ */ i(I, { children: /* @__PURE__ */ i(pe, {}) })
      }
    ),
    /* @__PURE__ */ i(
      ze,
      {
        "data-spark-component": "tabs-list",
        ref: t,
        className: Le(),
        asChild: e,
        loop: r,
        ...s,
        children: c
      }
    ),
    l.next !== "hidden" && /* @__PURE__ */ i(
      W,
      {
        shape: "square",
        intent: "surface",
        size: "sm",
        className: _(),
        onClick: P,
        disabled: l.next === "disabled",
        "aria-label": "Scroll right",
        children: /* @__PURE__ */ i(I, { children: /* @__PURE__ */ i(he, {}) })
      }
    )
  ] });
};
A.displayName = "Tabs.List";
const S = $(void 0), oe = () => {
  const e = D(S);
  if (!e)
    throw new Error("TabsPopover components must be used within TabsPopover");
  return e;
}, ae = G(
  ({ "aria-label": e, children: r, ...c }, a) => {
    const { popoverTriggerRef: o } = oe(), s = O(a, o);
    return /* @__PURE__ */ i(y.Trigger, { asChild: !0, ...c, children: /* @__PURE__ */ i(
      Te,
      {
        ref: s,
        size: "sm",
        intent: "surfaceInverse",
        design: "ghost",
        "aria-label": e,
        tabIndex: -1,
        children: /* @__PURE__ */ i(I, { children: r || /* @__PURE__ */ i(ge, {}) })
      }
    ) });
  }
);
ae.displayName = "Popover.Trigger";
const ne = G(
  ({ side: e, align: r = "start", className: c, ...a }, o) => {
    const { popoverSide: s } = oe(), n = ce("gap-sm flex flex-col", c);
    return /* @__PURE__ */ i(
      y.Content,
      {
        ref: o,
        ...a,
        side: e ?? s,
        align: r,
        className: n
      }
    );
  }
);
ne.displayName = "Popover.Content";
const ie = ({ popoverSide: e, popoverTriggerRef: r, children: c }) => {
  const a = se(
    () => ({ popoverSide: e, popoverTriggerRef: r }),
    [e, r]
  ), s = Object.assign(((n) => /* @__PURE__ */ i(S.Provider, { value: a, children: /* @__PURE__ */ i(y, { ...n, children: n.children }) })), y, {
    Content: ne,
    Trigger: ae
  });
  return /* @__PURE__ */ i(S.Provider, { value: a, children: c(s) });
};
ie.displayName = "Popover";
const ke = x(
  [
    "px-md",
    "relative flex flex-none items-center",
    "border-outline",
    "hover:not-disabled:bg-surface-hovered",
    "after:absolute",
    "data-[state=active]:font-bold",
    "data-[state=inactive]: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 basic
       */
      intent: xe({
        main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
        support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"],
        basic: ["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]
      }),
      /**
       * 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: "basic",
      size: "md",
      hasMenu: !1,
      orientation: "horizontal"
    }
  }
), V = ({
  /**
   * Default Radix Primitive values
   * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
   */
  asChild: e = !1,
  value: r,
  disabled: c = !1,
  children: a,
  className: o,
  ref: s,
  onKeyDown: n,
  renderMenu: d,
  ...t
}) => {
  const { intent: v, size: u, orientation: l } = M(), f = T(null), N = T(null), P = O(s, N), m = (p) => {
    p.key === "F10" && p.shiftKey && d && f.current && (p.preventDefault(), f.current.click()), n?.(p);
  }, h = !!d, b = l === "vertical" ? "right" : "bottom", E = /* @__PURE__ */ i(
    Ne,
    {
      "data-spark-component": "tabs-trigger",
      ref: P,
      className: ke({
        intent: v,
        size: u,
        hasMenu: h,
        orientation: l ?? "horizontal",
        className: o
      }),
      asChild: e,
      disabled: c,
      value: r,
      onFocus: ({ target: p }) => p.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
        inline: "nearest"
      }),
      onKeyDown: m,
      "aria-haspopup": h ? "true" : void 0,
      ...t,
      children: a
    }
  );
  return h ? /* @__PURE__ */ F("div", { className: l === "vertical" ? "relative w-full" : "relative", children: [
    E,
    /* @__PURE__ */ i("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ i(ie, { popoverSide: b, popoverTriggerRef: f, children: (p) => d?.({ Popover: p }) }) })
  ] }) : E;
};
V.displayName = "Tabs.Trigger";
const Ae = Object.assign(re, {
  List: A,
  Trigger: V,
  Content: k
});
Ae.displayName = "Tabs";
A.displayName = "Tabs.List";
V.displayName = "Tabs.Trigger";
k.displayName = "Tabs.Content";
export {
  Ae as Tabs
};
//# sourceMappingURL=index.mjs.map
