@spark-ui/components 17.0.1-beta.0 → 17.0.1

package/dist/tabs/index.mjs

@@ -1,99 +1,107 @@
-import { jsx as n, jsxs as I } from "react/jsx-runtime";
-import { Tabs as T } from "radix-ui";
-import { createContext as E, useContext as A, useState as B, useRef as b, useEffect as g, forwardRef as O, useMemo as G } from "react";
-import { cva as x, cx as J } from "class-variance-authority";
-import { ArrowVerticalLeft as Q } from "@spark-ui/icons/ArrowVerticalLeft";
-import { ArrowVerticalRight as U } from "@spark-ui/icons/ArrowVerticalRight";
-import { B as M } from "../Button-CcIRizse.mjs";
-import { I as N } from "../Icon-BO327oHU.mjs";
-import { useMergeRefs as j } from "@spark-ui/hooks/use-merge-refs";
-import { MoreMenuHorizontal as X } from "@spark-ui/icons/MoreMenuHorizontal";
-import { I as Y } from "../IconButton-CP4JbWsI.mjs";
-import { Popover as w } from "../popover/index.mjs";
-import { makeVariants as Z } from "@spark-ui/internal-utils";
-const D = E({}), L = () => {
-  const t = A(D);
+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;
-}, _ = x([
+}, re = b([
   "flex",
   "data-[orientation=horizontal]:flex-col",
   "data-[orientation=vertical]:flex-row",
   "max-w-full"
-]), F = ({
+]);
+function y(t) {
+  return t ? ({ ...r }) => /* @__PURE__ */ o(X, { ...r }) : void 0;
+}
+const $ = ({
   intent: t = "support",
   size: r = "md",
   /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#root
+   * Default Base UI Primitive values
+   * see https://base-ui.com/react/components/tabs
    */
-  asChild: s = !1,
+  asChild: l = !1,
   forceMount: a = !1,
-  orientation: o = "horizontal",
+  orientation: n = "horizontal",
   children: i,
-  className: l,
+  className: s,
   ref: c,
   ...e
-}) => /* @__PURE__ */ n(
-  D.Provider,
-  {
-    value: {
-      intent: t,
-      size: r,
-      orientation: o,
-      forceMount: a
-    },
-    children: /* @__PURE__ */ n(
-      T.Root,
-      {
-        ref: c,
-        asChild: s,
-        orientation: o,
-        className: _({ className: l }),
-        "data-spark-component": "tabs",
-        activationMode: "automatic",
-        ...e,
-        children: i
-      }
-    )
-  }
-);
-F.displayName = "Tabs";
-const ee = x(["w-full p-lg", "focus-visible:u-outline-inset"], {
+}) => {
+  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
+        }
+      )
+    }
+  );
+};
+$.displayName = "Tabs";
+const oe = b(["w-full p-lg", "focus-visible:u-outline-inset"], {
   variants: {
     forceMount: {
-      true: "data-[state=inactive]:hidden",
+      true: "data-[hidden]:hidden",
       false: ""
     }
   }
-}), k = ({
+}), R = ({
   /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#content
+   * Default Base UI Primitive values
+   * see https://base-ui.com/react/components/tabs
    */
   children: t,
   asChild: r = !1,
-  className: s,
+  className: l,
   ref: a,
-  ...o
+  forceMount: n,
+  ...i
 }) => {
-  const { forceMount: i } = L();
-  return /* @__PURE__ */ n(
-    T.Content,
+  const { forceMount: s } = k(), c = y(r), e = s || n;
+  return /* @__PURE__ */ o(
+    z.Panel,
     {
       "data-spark-component": "tabs-content",
       ref: a,
-      forceMount: i || o.forceMount,
-      className: ee({ className: s, forceMount: i }),
-      asChild: r,
-      ...o,
+      keepMounted: e,
+      className: oe({ className: l, forceMount: e }),
+      render: c,
+      ...i,
       children: t
     }
   );
 };
-k.displayName = "Tabs.Content";
-const te = x(["relative flex"]), re = x([
+R.displayName = "Tabs.Content";
+const ne = b(["relative flex"]), ie = b([
   "flex w-full",
   "data-[orientation=horizontal]:flex-row",
   "data-[orientation=vertical]:flex-col",
@@ -101,64 +109,64 @@ const te = x(["relative flex"]), re = x([
   "after:flex after:shrink after:grow after:border-outline",
   "data-[orientation=horizontal]:after:border-b-sm",
   "data-[orientation=vertical]:after:border-r-sm"
-]), V = x([
+]), 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!"
-]), oe = (t, r) => {
-  const [s, a] = B({ width: void 0, height: void 0 }), o = b(null), i = b(r);
-  return g(() => {
+]), 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]), g(() => {
-    const l = t && "current" in t ? t.current : t;
-    if (!(!l || o.current))
-      return o.current = new ResizeObserver(([c]) => {
-        const { inlineSize: e, blockSize: p } = c?.borderBoxSize?.[0] ?? {};
-        i.current?.(c), a({ width: e, height: p });
-      }), o.current.observe(l), () => {
-        o.current && o.current.unobserve(l);
+  }, [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, o, i]), s;
-}, R = ({
+  }, [t, n, i]), l;
+}, W = ({
   /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#list
+   * Default Base UI Primitive values
+   * see https://base-ui.com/react/components/tabs
    */
   asChild: t = !1,
   loop: r = !1,
-  children: s,
+  children: l,
   className: a,
-  ref: o,
+  ref: n,
   ...i
 }) => {
-  const l = b(null), c = b(null), e = o || c, { orientation: p } = L(), { width: z } = oe(l), [d, m] = B({
+  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"
   });
-  g(() => {
-    typeof e == "function" || !e.current || m(p !== "horizontal" ? { 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"
     });
-  }, [p, e, z]), g(() => {
+  }, [h, e, x]), w(() => {
     if (typeof e == "function" || !e.current || d.prev === "hidden" || r)
       return;
     const f = (u) => {
-      m({
+      g({
         prev: u.scrollLeft > 0 ? "visible" : "disabled",
         next: u.scrollLeft + u.clientWidth < u.scrollWidth ? "visible" : "disabled"
       });
-    }, v = e.current;
-    return f(v), v.addEventListener(
+    }, p = e.current;
+    return f(p), p.addEventListener(
       "scroll",
       ({ target: u }) => f(u)
-    ), () => v.removeEventListener(
+    ), () => p.removeEventListener(
       "scroll",
       ({ target: u }) => f(u)
     );
   }, [e, d.prev, r]);
-  const y = () => {
+  const N = () => {
     if (typeof e == "function" || !e.current)
       return;
     const f = r && e.current.scrollLeft <= 0;
@@ -166,7 +174,7 @@ const te = x(["relative flex"]), re = x([
       left: f ? e.current.scrollLeft + e.current.scrollWidth - e.current.clientWidth : e.current.scrollLeft - e.current.clientWidth,
       behavior: "smooth"
     });
-  }, C = () => {
+  }, P = () => {
     if (typeof e == "function" || !e.current)
       return;
     const f = r && e.current.scrollLeft + e.current.clientWidth >= e.current.scrollWidth;
@@ -175,58 +183,59 @@ const te = x(["relative flex"]), re = x([
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ I("div", { className: te({ className: a }), ref: l, children: [
-    d.prev !== "hidden" && /* @__PURE__ */ n(
-      M,
+  return /* @__PURE__ */ F("div", { className: ne({ className: a }), ref: s, children: [
+    d.prev !== "hidden" && /* @__PURE__ */ o(
+      I,
       {
         shape: "square",
         intent: "surface",
         size: "sm",
-        className: V(),
-        onClick: y,
+        className: E(),
+        onClick: N,
         disabled: d.prev === "disabled",
         "aria-label": "Scroll left",
-        children: /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(Q, {}) })
+        children: /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(Y, {}) })
       }
     ),
-    /* @__PURE__ */ n(
-      T.List,
+    /* @__PURE__ */ o(
+      z.List,
       {
         "data-spark-component": "tabs-list",
         ref: e,
-        className: re(),
-        asChild: t,
-        loop: r,
+        className: ie(),
+        render: C,
+        loopFocus: r,
+        activateOnFocus: !0,
         ...i,
-        children: s
+        children: l
       }
     ),
-    d.next !== "hidden" && /* @__PURE__ */ n(
-      M,
+    d.next !== "hidden" && /* @__PURE__ */ o(
+      I,
       {
         shape: "square",
         intent: "surface",
         size: "sm",
-        className: V(),
-        onClick: C,
+        className: E(),
+        onClick: P,
         disabled: d.next === "disabled",
         "aria-label": "Scroll right",
-        children: /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(U, {}) })
+        children: /* @__PURE__ */ o(S, { children: /* @__PURE__ */ o(Z, {}) })
       }
     )
   ] });
 };
-R.displayName = "Tabs.List";
-const P = E(void 0), K = () => {
-  const t = A(P);
+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;
-}, $ = O(
-  ({ "aria-label": t, children: r, ...s }, a) => {
-    const { popoverTriggerRef: o } = K(), i = j(a, o);
-    return /* @__PURE__ */ n(w.Trigger, { asChild: !0, ...s, children: /* @__PURE__ */ n(
-      Y,
+}, 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",
@@ -234,48 +243,48 @@ const P = E(void 0), K = () => {
         design: "ghost",
         "aria-label": t,
         tabIndex: -1,
-        children: /* @__PURE__ */ n(N, { children: r || /* @__PURE__ */ n(X, {}) })
+        children: /* @__PURE__ */ o(S, { children: r || /* @__PURE__ */ o(_, {}) })
       }
     ) });
   }
 );
-$.displayName = "Popover.Trigger";
-const q = O(
-  ({ side: t, align: r = "start", className: s, ...a }, o) => {
-    const { popoverSide: i } = K(), l = J("gap-sm flex flex-col", s);
-    return /* @__PURE__ */ n(
-      w.Content,
+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: o,
+        ref: n,
         ...a,
         side: t ?? i,
         align: r,
-        className: l
+        className: s
       }
     );
   }
 );
-q.displayName = "Popover.Content";
-const H = ({ popoverSide: t, popoverTriggerRef: r, children: s }) => {
-  const a = G(
+G.displayName = "Popover.Content";
+const J = ({ popoverSide: t, popoverTriggerRef: r, children: l }) => {
+  const a = Q(
     () => ({ popoverSide: t, popoverTriggerRef: r }),
     [t, r]
-  ), i = Object.assign(((l) => /* @__PURE__ */ n(P.Provider, { value: a, children: /* @__PURE__ */ n(w, { ...l, children: l.children }) })), w, {
-    Content: q,
-    Trigger: $
+  ), 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__ */ n(P.Provider, { value: a, children: s(i) });
+  return /* @__PURE__ */ o(L.Provider, { value: a, children: l(i) });
 };
-H.displayName = "Popover";
-const ne = x(
+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-[state=active]:font-bold",
-    "data-[state=inactive]:not-disabled:cursor-pointer",
+    "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",
@@ -289,9 +298,9 @@ const ne = x(
        * Change the color scheme of the tabs
        * @default support
        */
-      intent: Z({
-        main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
-        support: ["data-[state=active]:text-support data-[state=active]:after:bg-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
@@ -324,65 +333,65 @@ const ne = x(
       orientation: "horizontal"
     }
   }
-), W = ({
+), M = ({
   /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
+   * Default Base UI Primitive values
+   * see https://base-ui.com/react/components/tabs
    */
   asChild: t = !1,
   value: r,
-  disabled: s = !1,
+  disabled: l = !1,
   children: a,
-  className: o,
+  className: n,
   ref: i,
-  onKeyDown: l,
+  onKeyDown: s,
   renderMenu: c,
   ...e
 }) => {
-  const { intent: p, size: z, orientation: d } = L(), m = b(null), y = b(null), C = j(i, y), f = (h) => {
-    h.key === "F10" && h.shiftKey && c && m.current && (h.preventDefault(), m.current.click()), l?.(h);
-  }, v = !!c, u = d === "vertical" ? "right" : "bottom", S = /* @__PURE__ */ n(
-    T.Trigger,
+  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: C,
-      className: ne({
-        intent: p,
-        size: z,
-        hasMenu: v,
-        orientation: d ?? "horizontal",
-        className: o
+      ref: P,
+      className: ae({
+        intent: h,
+        size: C,
+        hasMenu: p,
+        orientation: x ?? "horizontal",
+        className: n
       }),
-      asChild: t,
-      disabled: s,
+      render: N,
+      disabled: l,
       value: r,
-      onFocus: ({ target: h }) => h.scrollIntoView({
+      onFocus: ({ target: m }) => m.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "nearest"
       }),
       onKeyDown: f,
-      "aria-haspopup": v ? "true" : void 0,
+      "aria-haspopup": p ? "true" : void 0,
       ...e,
       children: a
     }
   );
-  return v ? /* @__PURE__ */ I("div", { className: d === "vertical" ? "relative w-full" : "relative", children: [
-    S,
-    /* @__PURE__ */ n("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ n(H, { popoverSide: u, popoverTriggerRef: m, children: (h) => c?.({ Popover: h }) }) })
-  ] }) : S;
+  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;
 };
-W.displayName = "Tabs.Trigger";
-const ie = Object.assign(F, {
-  List: R,
-  Trigger: W,
-  Content: k
+M.displayName = "Tabs.Trigger";
+const le = Object.assign($, {
+  List: W,
+  Trigger: M,
+  Content: R
 });
-ie.displayName = "Tabs";
-R.displayName = "Tabs.List";
-W.displayName = "Tabs.Trigger";
-k.displayName = "Tabs.Content";
+le.displayName = "Tabs";
+W.displayName = "Tabs.List";
+M.displayName = "Tabs.Trigger";
+R.displayName = "Tabs.Content";
 export {
-  ie as Tabs
+  le as Tabs
 };
 //# sourceMappingURL=index.mjs.map