@spear-ai/spectral 1.4.22 → 1.4.24

package/dist/Tabs/TabsBase.d.ts

@@ -1,11 +1,12 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface TabsContextValue {
-    onValueChange: (value: string) => void;
     activationMode: 'automatic' | 'manual';
     baseId: string;
     dir: 'ltr' | 'rtl';
     disabled: boolean;
+    onValueChange: (value: string) => void;
     orientation: 'horizontal' | 'vertical';
+    rightSlot?: ReactNode | undefined;
     value: string;
 }
 export declare const TabsContext: import('react').Context<TabsContextValue | null>;
@@ -18,11 +19,14 @@ export interface TabsBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'di
     dir?: 'ltr' | 'rtl';
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    rightSlot?: ReactNode | undefined;
     value?: string;
 }
 export declare const TabsBase: import('react').ForwardRefExoticComponent<TabsBaseProps & import('react').RefAttributes<HTMLElement>>;
-export interface TabsListProps extends ComponentPropsWithoutRef<'div'> {
+export interface TabsListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children?: ReactNode;
     loop?: boolean;
+    rightSlot?: ReactNode | undefined;
 }
 export declare const TabsList: import('react').ForwardRefExoticComponent<TabsListProps & import('react').RefAttributes<HTMLElement>>;
 export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
@@ -30,6 +34,11 @@ export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
     disabled?: boolean;
 }
 export declare const TabsTrigger: import('react').ForwardRefExoticComponent<TabsTriggerProps & import('react').RefAttributes<HTMLElement>>;
+export interface TabsContentContainerProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const TabsContentContainer: import('react').ForwardRefExoticComponent<TabsContentContainerProps & import('react').RefAttributes<HTMLDivElement>>;
 export interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {
     value: string;
     forceMount?: boolean;

package/dist/Tabs/TabsBase.js

@@ -1,164 +1,215 @@
 "use client";
 import "../styles/main.css";
-import { jsx as x, jsxs as R } from "react/jsx-runtime";
-import { generateId as $, prefersReducedMotion as _, debounce as L, getIndicatorPosition as S, calculateIndicatorStyle as K } from "./tabsUtils.js";
+import { jsx as m, jsxs as E } from "react/jsx-runtime";
+import { generateId as M, prefersReducedMotion as $, debounce as K, getIndicatorPosition as P, calculateIndicatorStyle as S } from "./tabsUtils.js";
 import { cn as y } from "../utils/twUtils.js";
-import { createContext as M, forwardRef as z, useState as D, useId as N, useCallback as w, useRef as k, useEffect as O, useContext as P } from "react";
-const E = M(null), C = (I = "Tabs") => {
-  const u = P(E);
-  if (u === null)
-    throw new Error(`${I} components must be used within a Tabs.Root`);
-  return u;
-}, B = z(function({ activationMode: u = "automatic", children: e, defaultValue: h, dir: b = "ltr", disabled: l = !1, onValueChange: f, orientation: o = "horizontal", value: v, ...s }, c) {
-  const [m, g] = D(h ?? ""), d = N() ?? $("tabs"), a = v !== void 0, t = a ? v : m, n = w(
-    (p) => {
-      l || (a || g(p), f?.(p));
+import { createContext as j, forwardRef as I, useState as N, useId as k, useCallback as T, useRef as O, useEffect as U, useContext as F } from "react";
+import { j as q, m as R, A as B } from "../index-BvRlXSJj.js";
+const _ = j(null), D = (x = "Tabs") => {
+  const l = F(_);
+  if (l === null)
+    throw new Error(`${x} components must be used within a Tabs.Root`);
+  return l;
+}, X = I(function({ activationMode: l = "automatic", children: a, defaultValue: r, dir: d = "ltr", disabled: u = !1, onValueChange: f, orientation: o = "horizontal", rightSlot: v, value: t, ...b }, p) {
+  const [g, w] = N(r ?? ""), C = k() ?? M("tabs"), i = t !== void 0, e = i ? t : g, n = T(
+    (s) => {
+      u || (i || w(s), f?.(s));
     },
-    [a, f, l]
-  ), r = {
-    value: t,
+    [i, f, u]
+  ), c = {
+    activationMode: l,
+    baseId: C,
+    dir: d,
+    disabled: u,
     onValueChange: n,
     orientation: o,
-    activationMode: u,
-    dir: b,
-    disabled: l,
-    baseId: d
+    rightSlot: v,
+    value: e
   };
-  return /* @__PURE__ */ x(E.Provider, { value: r, children: /* @__PURE__ */ x("div", { ref: c, "data-testid": "spectral-tabs", "data-orientation": o, "data-disabled": l ? "" : void 0, dir: b, ...s, children: e }) });
-}), H = z(function({ className: u, loop: e = !0, ...h }, b) {
-  const { orientation: l, disabled: f } = C("TabsList"), [o, v] = D(() => ({
-    left: 0,
-    top: 0,
-    width: 0,
+  return /* @__PURE__ */ m(_.Provider, { value: c, children: /* @__PURE__ */ m("div", { ref: p, "data-testid": "spectral-tabs", "data-orientation": o, "data-disabled": u ? "" : void 0, dir: d, ...b, children: a }) });
+}), Y = I(function({ children: l, className: a, loop: r = !0, rightSlot: d, ...u }, f) {
+  const { orientation: o, disabled: v } = D("TabsList"), [t, b] = N(() => ({
     height: 0,
+    isEnclosed: !1,
+    left: 0,
     orientation: "horizontal",
-    isEnclosed: !1
-  })), s = k(null), c = _(), m = w(
-    L(() => {
-      const d = K(s);
-      v(d);
+    top: 0,
+    width: 0
+  })), p = O(null), g = $(), w = T(
+    K(() => {
+      const i = S(p);
+      b(i);
     }, 16),
     // ~60fps
     []
   );
-  O(() => {
-    m();
-    const d = new ResizeObserver(m), a = new MutationObserver(m), t = s.current;
-    return t && (d.observe(t), a.observe(t, {
+  U(() => {
+    w();
+    const i = new ResizeObserver(w), e = new MutationObserver(w), n = p.current;
+    return n && (i.observe(n), e.observe(n, {
       attributes: !0,
       childList: !0,
       subtree: !0
     })), () => {
-      d.disconnect(), a.disconnect();
+      i.disconnect(), e.disconnect();
     };
-  }, [m]);
-  const g = w(
-    (d) => {
-      if (f) return;
-      const a = Array.from(s.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
-      if (a.length === 0) return;
-      const t = a.findIndex((T) => T === document.activeElement);
-      if (t === -1) return;
-      let n = null;
-      const { key: r, ctrlKey: p, metaKey: A } = d, i = p || A;
-      l === "horizontal" ? r === "ArrowLeft" || r === "ArrowUp" && i ? n = t > 0 ? t - 1 : e ? a.length - 1 : t : (r === "ArrowRight" || r === "ArrowDown" && i) && (n = t < a.length - 1 ? t + 1 : e ? 0 : t) : r === "ArrowUp" || r === "ArrowLeft" && i ? n = t > 0 ? t - 1 : e ? a.length - 1 : t : (r === "ArrowDown" || r === "ArrowRight" && i) && (n = t < a.length - 1 ? t + 1 : e ? 0 : t), r === "Home" ? n = 0 : r === "End" && (n = a.length - 1), n !== null && n !== t && (d.preventDefault(), d.stopPropagation(), a[n]?.focus());
+  }, [w]);
+  const C = T(
+    (i) => {
+      if (v) return;
+      const e = Array.from(p.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
+      if (e.length === 0) return;
+      const n = e.findIndex((L) => L === document.activeElement);
+      if (n === -1) return;
+      let c = null;
+      const { key: s, ctrlKey: h, metaKey: z } = i, A = h || z;
+      o === "horizontal" ? s === "ArrowLeft" || s === "ArrowUp" && A ? c = n > 0 ? n - 1 : r ? e.length - 1 : n : (s === "ArrowRight" || s === "ArrowDown" && A) && (c = n < e.length - 1 ? n + 1 : r ? 0 : n) : s === "ArrowUp" || s === "ArrowLeft" && A ? c = n > 0 ? n - 1 : r ? e.length - 1 : n : (s === "ArrowDown" || s === "ArrowRight" && A) && (c = n < e.length - 1 ? n + 1 : r ? 0 : n), s === "Home" ? c = 0 : s === "End" && (c = e.length - 1), c !== null && c !== n && (i.preventDefault(), i.stopPropagation(), e[c]?.focus());
     },
-    [f, l, e]
+    [v, o, r]
   );
-  return /* @__PURE__ */ R("div", { className: "relative", ref: s, children: [
-    /* @__PURE__ */ x("div", { ref: b, role: "tablist", "data-testid": "spectral-tabs-list", "aria-orientation": l, "aria-disabled": f, className: y("tabs-list", u), onKeyDown: g, ...h }),
-    /* @__PURE__ */ x(
+  return /* @__PURE__ */ E("div", { className: "relative", ref: p, children: [
+    /* @__PURE__ */ E(
+      "div",
+      {
+        ref: f,
+        role: "tablist",
+        "data-testid": "spectral-tabs-list",
+        "aria-orientation": o,
+        "aria-disabled": v,
+        className: y("tabs-list flex", o === "horizontal" && "items-center justify-between", o === "vertical" && "flex-col", a),
+        onKeyDown: C,
+        ...u,
+        children: [
+          /* @__PURE__ */ m("div", { className: y("flex", o === "horizontal" && "items-center", o === "vertical" && "flex-col"), children: l }),
+          d && /* @__PURE__ */ m("div", { className: "flex items-center z-10", children: d })
+        ]
+      }
+    ),
+    /* @__PURE__ */ m(
       "div",
       {
         className: y(
           "absolute pointer-events-none select-none",
-          !c && "transition-all duration-300 ease-out",
-          o.orientation === "horizontal" && !o.isEnclosed && ["bottom-[1px] after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full", "after:border-b-[0.3rem] after:border-tabs-indicator after:rounded-t-[0.3rem] z-10"],
-          o.orientation === "vertical" && !o.isEnclosed && [
+          !g && "transition-all duration-300 ease-out",
+          t.orientation === "horizontal" && !t.isEnclosed && ["bottom-[1px] after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full", "after:border-b-[0.3rem] after:border-tabs-indicator after:rounded-t-[0.3rem] z-10"],
+          t.orientation === "vertical" && !t.isEnclosed && [
             "right-[1px]",
-            !c && "transition-[top_300ms_ease,height_300ms_ease]",
+            !g && "transition-[top_300ms_ease,height_300ms_ease]",
             "after:content-[''] after:absolute after:right-0 after:top-0 after:h-full after:w-1",
             "after:border-r-[0.3rem] after:border-tabs-indicator after:rounded-l-[0.3rem] z-10"
           ],
-          o.orientation === "horizontal" && o.isEnclosed && ["bg-tabs-enclosed-indicator rounded-lg shadow-lg top-[10%] bottom-[10%] z-0", !c && "transition-[left_300ms_ease,width_300ms_ease]"],
-          o.orientation === "vertical" && o.isEnclosed && ["bg-tabs-enclosed-indicator rounded-lg shadow-lg left-1 right-1 z-0 max-h-10 w-auto"]
+          t.orientation === "horizontal" && t.isEnclosed && ["bg-tabs-enclosed-indicator rounded-lg shadow-lg top-[10%] bottom-[10%] z-0", !g && "transition-[left_300ms_ease,width_300ms_ease]"],
+          t.orientation === "vertical" && t.isEnclosed && ["bg-tabs-enclosed-indicator rounded-lg shadow-lg left-1 right-1 z-0 max-h-10 w-auto"]
         ),
         style: {
-          ...S(o),
-          ...o.isEnclosed && o.orientation === "vertical" ? { height: "40px" } : {}
+          ...P(t),
+          ...t.isEnclosed && t.orientation === "vertical" ? { height: "40px" } : {}
         },
         "aria-hidden": "true"
       }
     )
   ] });
-}), G = z(function({ className: u, value: e, onClick: h, onKeyDown: b, disabled: l = !1, ...f }, o) {
-  const { value: v, onValueChange: s, activationMode: c, disabled: m, baseId: g } = C("TabsTrigger"), d = `${g}-trigger-${e}`, a = `${g}-content-${e}`, t = v === e, n = m || l, r = w(
-    (i) => {
-      if (n) {
-        i.preventDefault();
+}), Z = I(function({ className: l, value: a, onClick: r, onKeyDown: d, disabled: u = !1, ...f }, o) {
+  const { value: v, onValueChange: t, activationMode: b, disabled: p, baseId: g } = D("TabsTrigger"), w = `${g}-trigger-${a}`, C = `${g}-content-${a}`, i = v === a, e = p || u, n = T(
+    (h) => {
+      if (e) {
+        h.preventDefault();
         return;
       }
-      s(e), h?.(i);
+      t(a), r?.(h);
     },
-    [e, s, h, n]
-  ), p = w(
-    (i) => {
-      if (n) {
-        i.preventDefault();
+    [a, t, r, e]
+  ), c = T(
+    (h) => {
+      if (e) {
+        h.preventDefault();
         return;
       }
-      const { key: T } = i;
-      (T === "Enter" || T === " ") && (i.preventDefault(), i.stopPropagation(), s(e)), b?.(i);
+      const { key: z } = h;
+      (z === "Enter" || z === " ") && (h.preventDefault(), h.stopPropagation(), t(a)), d?.(h);
     },
-    [e, s, b, n]
-  ), A = w(() => {
-    n || c === "automatic" && s(e);
-  }, [c, s, e, n]);
-  return /* @__PURE__ */ x(
+    [a, t, d, e]
+  ), s = T(() => {
+    e || b === "automatic" && t(a);
+  }, [b, t, a, e]);
+  return /* @__PURE__ */ m(
     "button",
     {
-      "aria-controls": a,
-      "aria-disabled": n,
-      "aria-selected": t,
-      className: y("tabs-trigger z-10 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600", u),
-      "data-disabled": n ? "" : void 0,
-      "data-state": t ? "active" : "inactive",
+      "aria-controls": C,
+      "aria-disabled": e,
+      "aria-selected": i,
+      className: y("tabs-trigger z-10 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600", l),
+      "data-disabled": e ? "" : void 0,
+      "data-state": i ? "active" : "inactive",
       "data-testid": "spectral-tabs-trigger",
-      disabled: n,
-      id: d,
-      onClick: r,
-      onFocus: A,
-      onKeyDown: p,
+      disabled: e,
+      id: w,
+      onClick: n,
+      onFocus: s,
+      onKeyDown: c,
       ref: o,
       role: "tab",
-      tabIndex: t ? 0 : -1,
+      tabIndex: i ? 0 : -1,
       type: "button",
       ...f
     }
   );
-}), J = z(function({ className: u, value: e, forceMount: h = !1, ...b }, l) {
-  const { value: f, baseId: o } = C("TabsContent"), v = `${o}-content-${e}`, s = `${o}-trigger-${e}`, c = f === e;
-  return !h && !c ? null : /* @__PURE__ */ x(
+}), V = I(function({ children: l, className: a }, r) {
+  const { value: d } = D("TabsContentContainer"), [u, f] = q(), o = $();
+  return /* @__PURE__ */ m(
+    R.div,
+    {
+      ref: r,
+      className: y("overflow-hidden", a),
+      "data-testid": "spectral-tabs-content-container",
+      animate: {
+        height: f.height || "auto"
+      },
+      transition: o ? { duration: 0 } : {
+        duration: 0.3,
+        ease: [0.25, 1, 0.5, 1]
+      },
+      children: /* @__PURE__ */ m(B, { mode: "wait", initial: !1, children: /* @__PURE__ */ m(
+        R.div,
+        {
+          ref: u,
+          initial: o ? !1 : { opacity: 0, y: 8 },
+          animate: { opacity: 1, y: 0 },
+          exit: o ? void 0 : { opacity: 0, y: -8 },
+          transition: o ? { duration: 0 } : {
+            duration: 0.2,
+            ease: [0.25, 1, 0.5, 1]
+          },
+          children: l
+        },
+        d
+      ) })
+    }
+  );
+}), tt = I(function({ className: l, value: a, forceMount: r = !1, ...d }, u) {
+  const { value: f, baseId: o } = D("TabsContent"), v = `${o}-content-${a}`, t = `${o}-trigger-${a}`, b = f === a;
+  return !r && !b ? null : /* @__PURE__ */ m(
     "div",
     {
-      "aria-labelledby": s,
-      className: y("tabs-content focus:outline-none focus-visible:outline-none", u),
-      "data-state": c ? "active" : "inactive",
+      "aria-labelledby": t,
+      className: y("tabs-content focus:outline-none focus-visible:outline-none", l),
+      "data-state": b ? "active" : "inactive",
       "data-testid": "spectral-tabs-content",
-      hidden: !c,
+      hidden: !b,
       id: v,
-      ref: l,
+      ref: u,
       role: "tabpanel",
       tabIndex: 0,
-      ...b
+      ...d
     }
   );
 });
 export {
-  B as TabsBase,
-  J as TabsContent,
-  E as TabsContext,
-  H as TabsList,
-  G as TabsTrigger,
-  C as useTabsContext
+  X as TabsBase,
+  tt as TabsContent,
+  V as TabsContentContainer,
+  _ as TabsContext,
+  Y as TabsList,
+  Z as TabsTrigger,
+  D as useTabsContext
 };

package/dist/Tabs.d.ts

@@ -1,26 +1,28 @@
-import { TabsBase, TabsContent, TabsList, TabsTrigger, TabsBaseProps } from './TabsBase';
-import { ReactEventHandler, ReactNode } from 'react';
+import { TabsBase, TabsContent, TabsContentContainer, TabsList, TabsTrigger, TabsBaseProps } from './TabsBase';
+import { ReactNode } from 'react';
 export interface TabValue {
-    key: string | undefined;
-    label: ReactNode;
     children: ReactNode;
     disabled?: boolean | undefined;
+    key: string | undefined;
+    label: ReactNode;
     'aria-label'?: string | undefined;
     'aria-describedby'?: string | undefined;
 }
 export interface TabsProps extends Omit<TabsBaseProps, 'children' | 'defaultValue' | 'onError' | 'disabled'> {
-    onBeforeChange?: (newValue: string, oldValue: string) => boolean | Promise<boolean> | undefined;
-    onError?: (error: Error) => void | ReactEventHandler<HTMLDivElement> | undefined;
+    activationMode?: 'automatic' | 'manual' | undefined;
     ariaLabel?: string | undefined;
     className?: string | undefined;
+    onBeforeChange?: (newValue: string, oldValue: string) => boolean | Promise<boolean> | undefined;
+    onError?: ((error: Error) => void) | undefined;
+    loading?: boolean | undefined;
     openOnLoad?: string | undefined;
+    rightSlot?: ReactNode | undefined;
     tabValues: TabValue[] | undefined;
     variant?: 'enclosed' | 'default';
-    loading?: boolean | undefined;
 }
-export declare const Tabs: ({ ariaLabel, className, openOnLoad, orientation, tabValues, variant, activationMode, loading, onError, onBeforeChange, onValueChange, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
-export { TabsContent, TabsList, TabsBase as TabsRoot, TabsTrigger };
-export type { TabsBaseProps, TabsContentProps, TabsListProps, TabsTriggerProps } from './TabsBase';
+export declare const Tabs: ({ activationMode, ariaLabel, className, loading, onBeforeChange, onError, onValueChange, openOnLoad, orientation, rightSlot, tabValues, variant, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export { TabsContent, TabsContentContainer, TabsList, TabsBase as TabsRoot, TabsTrigger };
+export type { TabsBaseProps, TabsContentContainerProps, TabsContentProps, TabsListProps, TabsTriggerProps } from './TabsBase';
 export type TabKeys<T extends TabValue[]> = T[number]['key'];
 export type TabValueWithKey<TKey extends string> = TabValue & {
     key: TKey;

package/dist/Tabs.js

@@ -1,52 +1,53 @@
 import "./styles/main.css";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { TabsBase as N, TabsList as T, TabsTrigger as z, TabsContent as k } from "./Tabs/TabsBase.js";
-import { validateTabValues as j, getTabKeys as C } from "./Tabs/tabsUtils.js";
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import { TabsBase as T, TabsList as z, TabsTrigger as k, TabsContentContainer as C, TabsContent as j } from "./Tabs/TabsBase.js";
+import { validateTabValues as V, getTabKeys as E } from "./Tabs/tabsUtils.js";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { className: "flex flex-col relative w-full", role: "status", children: [
-  /* @__PURE__ */ a("div", { className: r("inline-flex items-center justify-start w-full", s === "horizontal" && "border-b border-neutral-600", s === "vertical" && "flex-col items-stretch border-r border-neutral-600"), children: Array.from({ length: Math.min(d, 5) }, (i, t) => /* @__PURE__ */ a("div", { className: r("animate-pulse bg-neutral-600 rounded", s === "horizontal" ? "h-6 w-16 mx-2 my-2" : "h-6 w-full mx-2 my-1"), "aria-hidden": "true" }, t)) }),
-  /* @__PURE__ */ a("div", { className: "animate-pulse bg-neutral-600 h-32 w-full mt-4 rounded", "aria-hidden": "true" }),
-  /* @__PURE__ */ a("span", { className: "sr-only", children: "Loading tabs…" })
-] }), L = ({ ariaLabel: d, className: s, openOnLoad: i, orientation: t = "horizontal", tabValues: f = [], variant: l = "default", activationMode: x = "automatic", loading: p = !1, onError: n, onBeforeChange: h, onValueChange: v, ...y }) => {
-  const o = f.filter((e) => e.key !== void 0);
-  if (!j(o)) {
+const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { className: "flex flex-col relative w-full", role: "status", children: [
+  /* @__PURE__ */ l("div", { className: r("inline-flex items-center justify-start w-full", s === "horizontal" && "border-b border-neutral-600", s === "vertical" && "flex-col items-stretch border-r border-neutral-600"), children: Array.from({ length: Math.min(d, 5) }, (h, n) => /* @__PURE__ */ l("div", { className: r("animate-pulse bg-neutral-600 rounded", s === "horizontal" ? "h-6 w-16 mx-2 my-2" : "h-6 w-full mx-2 my-1"), "aria-hidden": "true" }, n)) }),
+  /* @__PURE__ */ l("div", { className: "animate-pulse bg-neutral-600 h-32 w-full mt-4 rounded", "aria-hidden": "true" }),
+  /* @__PURE__ */ l("span", { className: "sr-only", children: "Loading tabs…" })
+] }), R = ({ activationMode: d = "automatic", ariaLabel: s, className: h, loading: n = !1, onBeforeChange: v, onError: b, onValueChange: x, openOnLoad: i, orientation: t = "horizontal", rightSlot: y, tabValues: m = [], variant: a = "default", ...g }) => {
+  const c = m.filter((e) => e.key !== void 0);
+  if (!V(c)) {
     const e = new Error("Invalid tabValues provided to Tabs component");
-    return n?.(e), /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "No valid tabs provided" }) });
+    return b?.(e), /* @__PURE__ */ l("div", { className: "flex flex-col relative w-full p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ l("p", { children: "No valid tabs provided" }) });
   }
-  if (p)
-    return /* @__PURE__ */ a(V, { tabCount: f.length || 3, orientation: t });
-  const b = C(o);
-  let c = i ?? b[0];
-  if (i && !b.includes(i) && (console.warn(`Tabs: openOnLoad value '${i}' is not a valid tab key`), c = b[0]), !c) {
+  if (n)
+    return /* @__PURE__ */ l(K, { tabCount: m.length || 3, orientation: t });
+  const u = E(c);
+  let o = i ?? u[0];
+  if (i && !u.includes(i) && (console.warn(`Tabs: openOnLoad value '${i}' is not a valid tab key`), o = u[0]), !o) {
     const e = new Error("No valid default tab available");
-    return n?.(e), /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full p-4 text-center text-text-secondary", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "Unable to render tabs" }) });
+    return b?.(e), /* @__PURE__ */ l("div", { className: "flex flex-col relative w-full p-4 text-center text-text-secondary", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ l("p", { children: "Unable to render tabs" }) });
   }
-  const g = async (e) => {
-    if (h && v) {
-      const w = c;
+  const w = async (e) => {
+    if (v && x) {
+      const N = o;
       try {
-        if (await h(e, w) === !1) return;
-      } catch (u) {
-        n?.(u instanceof Error ? u : new Error("Before change callback failed"));
+        if (await v(e, N) === !1) return;
+      } catch (f) {
+        b?.(f instanceof Error ? f : new Error("Before change callback failed"));
         return;
       }
     }
-    v?.(e);
+    x?.(e);
   };
-  return /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ m(N, { "aria-label": d, className: r("relative w-full data-[orientation=vertical]:flex", l, s), defaultValue: c, orientation: t, activationMode: x, onValueChange: g, ...y, children: [
-    /* @__PURE__ */ a(
-      T,
+  return /* @__PURE__ */ l("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ p(T, { "aria-label": s, className: r("relative w-full data-[orientation=vertical]:flex", a, h), defaultValue: o, orientation: t, activationMode: d, onValueChange: w, ...g, children: [
+    /* @__PURE__ */ l(
+      z,
       {
         className: r(
-          "inline-flex items-center justify-start w-full",
-          t === "horizontal" && l === "default" && ["border-b border-tabs-border"],
-          t === "vertical" && l === "default" && ["flex-col items-stretch border-r border-tabs-border h-auto m-0 py-1 w-auto relative"],
-          t === "horizontal" && l === "enclosed" && ["bg-tabs-group-bg border-0 rounded-lg p-1 relative"],
-          t === "vertical" && l === "enclosed" && ["bg-tabs-group-bg rounded-lg border-0 p-1 w-auto flex-col"]
+          "inline-flex items-center justify-between w-full",
+          t === "horizontal" && a === "default" && ["border-b border-tabs-border"],
+          t === "vertical" && a === "default" && ["flex-col items-stretch border-r border-tabs-border h-auto m-0 py-1 w-auto relative"],
+          t === "horizontal" && a === "enclosed" && ["bg-tabs-group-bg border-0 rounded-lg p-1 relative"],
+          t === "vertical" && a === "enclosed" && ["bg-tabs-group-bg rounded-lg border-0 p-1 w-auto flex-col"]
         ),
-        children: o.map((e) => /* @__PURE__ */ a(
-          z,
+        rightSlot: y,
+        children: c.map((e) => /* @__PURE__ */ l(
+          k,
           {
             value: e.key,
             disabled: e.disabled,
@@ -54,10 +55,10 @@ const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { classN
             "aria-describedby": e["aria-describedby"],
             className: r(
               "relative whitespace-nowrap font-semibold transition-all duration-500 ease-in-out focus:outline-none focus-visible:outline-none",
-              t === "horizontal" && l === "default" && ["text-text-primary hover:text-accent py-2 px-4 hover:bg-tabs-bg--hover"],
-              t === "vertical" && l === "default" && ["text-text-primary flex items-center h-10 px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
-              t === "horizontal" && l === "enclosed" && ["text-text-primary inline-flex items-center justify-center px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1]"],
-              t === "vertical" && l === "enclosed" && ["text-text-primary px-4 py-2 z-[1] data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
+              t === "horizontal" && a === "default" && ["text-text-primary hover:text-accent py-2 px-4 hover:bg-tabs-bg--hover"],
+              t === "vertical" && a === "default" && ["text-text-primary flex items-center h-10 px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
+              t === "horizontal" && a === "enclosed" && ["text-text-primary inline-flex items-center justify-center px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1]"],
+              t === "vertical" && a === "enclosed" && ["text-text-primary px-4 py-2 z-[1] data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
               "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-text-primary disabled:hover:bg-transparent"
             ),
             children: e.label
@@ -66,21 +67,14 @@ const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { classN
         ))
       }
     ),
-    o.map((e) => /* @__PURE__ */ a(
-      k,
-      {
-        value: e.key,
-        className: r("focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent text-text-primary", t === "horizontal" && "py-6", t === "vertical" && "ps-8", "data-[state=active]:animate-fade-in-tabs"),
-        children: e.children
-      },
-      e.key
-    ))
+    /* @__PURE__ */ l(C, { className: r(t === "vertical" && "flex-1"), children: c.map((e) => /* @__PURE__ */ l(j, { value: e.key, className: r("focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent text-text-primary", t === "horizontal" && "pb-4", t === "vertical" && "py-2 px-4"), children: e.children }, e.key)) })
   ] }) });
 };
 export {
-  L as Tabs,
-  k as TabsContent,
-  T as TabsList,
-  N as TabsRoot,
-  z as TabsTrigger
+  R as Tabs,
+  j as TabsContent,
+  C as TabsContentContainer,
+  z as TabsList,
+  T as TabsRoot,
+  k as TabsTrigger
 };