@spear-ai/spectral 1.4.23 → 1.4.25

package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts

@@ -17,5 +17,11 @@ export type RadioButtonGroupItemProps = AsChildProp & {
     onSelect?: (value: string) => void;
 };
 export declare const RadioButtonGroupBase: ({ value, onValueChange, children, className, isKeptActive, expanded }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButtonGroupItem: ({ value, children, className, disabled, asChild, onSelect }: RadioButtonGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButtonGroupItem: import('react').ForwardRefExoticComponent<AsChildProp & {
+    value: string;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=RadioButtonGroupBase.d.ts.map

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,37 +1,38 @@
 "use client";
 import "../styles/main.css";
 import { jsx as a } from "react/jsx-runtime";
-import { Slot as x } from "../primitives/slot.js";
-import { cn as c } from "../utils/twUtils.js";
-import { createContext as h, useContext as w } from "react";
-const u = h(null), R = ({ value: t, onValueChange: n, children: i, className: o, isKeptActive: r = !1, expanded: e = !1 }) => /* @__PURE__ */ a(u.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ a("div", { role: "radiogroup", "data-testid": "spectral-radio-button-group", "data-expanded": e, className: c("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", o), children: i }) }), _ = ({ value: t, children: n, className: i, disabled: o = !1, asChild: r = !1, onSelect: e }) => {
-  const s = w(u);
+import { Slot as h } from "../primitives/slot.js";
+import { cn as u } from "../utils/twUtils.js";
+import { createContext as w, forwardRef as B, useContext as R } from "react";
+const c = w(null), z = ({ value: t, onValueChange: n, children: i, className: o, isKeptActive: r = !1, expanded: e = !1 }) => /* @__PURE__ */ a(c.Provider, { value: { value: t, onValueChange: n, isKeptActive: r, expanded: e }, children: /* @__PURE__ */ a("div", { role: "radiogroup", "data-testid": "spectral-radio-button-group", "data-expanded": e, className: u("flex h-fit w-fit items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md", "data-[expanded=true]:w-full", o), children: i }) }), y = B(({ value: t, children: n, className: i, disabled: o = !1, asChild: r = !1, onSelect: e }, g) => {
+  const s = R(c);
   if (!s)
     throw new Error("RadioButtonGroupItem must be used within a RadioButtonGroup");
-  const { value: g, onValueChange: d, isKeptActive: b, expanded: f } = s, l = g === t, p = () => {
+  const { value: f, onValueChange: d, isKeptActive: b, expanded: p } = s, l = f === t, v = () => {
     o || (d && d(t), e && e(t));
-  }, v = r ? x : "button", m = {
+  }, m = r ? h : "button", x = {
     role: "radio",
     "aria-checked": l,
     "data-state": l ? "on" : "off",
     "data-testid": "spectral-radio-button-group-item",
     disabled: o,
-    onClick: p,
-    className: c(
+    onClick: v,
+    className: u(
       `bg-toggle-bg inline-flex items-center justify-center gap-2 border text-sm font-medium disabled:pointer-events-none disabled:opacity-50
       disabled:cursor-not-allowed hover:cursor-pointer text-toggle-text hover:bg-toggle-bg--hover hover:text-toggle-text--hover transition-[colors]
       [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:outline-none
       outline-none border-toggle-border hover:border-toggle-border--hover h-9 px-3 min-w-9 [&_svg:not([class*='size-']):not([width]):not([height])]:size-4
       rounded-none shadow-none focus:z-10 focus-visible:z-10 [&:not(:first-child)]:border-l-0 active:bg-toggle-bg--active active:text-toggle-text--active
       active:border-toggle-border--active`,
-      f && "w-full",
+      p && "w-full",
       b && "data-[state=on]:bg-toggle-bg--active data-[state=on]:text-toggle-text--active data-[state=on]:border-toggle-border--active",
       i
     )
   };
-  return /* @__PURE__ */ a(v, { ...!r && { type: "button" }, ...m, children: n });
-};
+  return /* @__PURE__ */ a(m, { ref: g, ...!r && { type: "button" }, ...x, children: n });
+});
+y.displayName = "RadioButtonGroupItem";
 export {
-  R as RadioButtonGroupBase,
-  _ as RadioButtonGroupItem
+  z as RadioButtonGroupBase,
+  y as RadioButtonGroupItem
 };

package/dist/RadioButtonGroup.d.ts

@@ -3,5 +3,11 @@ import { ComponentProps } from 'react';
 export type RadioButtonGroupProps = ComponentProps<typeof RadioButtonGroupBase>;
 export type RadioButtonGroupItemProps = RadioButtonGroupItemPropsBase;
 export declare const RadioButtonGroup: ({ className, children, ...props }: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RadioButtonGroupItem: ({ value, children, className, disabled, asChild, onSelect }: RadioButtonGroupItemPropsBase) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButtonGroupItem: import('react').ForwardRefExoticComponent<import('../../primitives/slot').AsChildProp & {
+    value: string;
+    children: import('react').ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=RadioButtonGroup.d.ts.map

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;