@spear-ai/spectral 1.4.26 → 1.4.27

package/dist/Tabs/TabsBase.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 export interface TabsContextValue {
     activationMode: 'automatic' | 'manual';
     baseId: string;
@@ -22,26 +22,36 @@ export interface TabsBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'di
     rightSlot?: ReactNode | undefined;
     value?: string;
 }
-export declare const TabsBase: import('react').ForwardRefExoticComponent<TabsBaseProps & import('react').RefAttributes<HTMLElement>>;
+export declare const TabsBase: ({ ref, activationMode, children, defaultValue, dir, disabled, onValueChange, orientation, rightSlot, value: controlledValue, ...props }: TabsBaseProps & {
+    ref?: Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 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 declare const TabsList: ({ ref, children, className, loop, rightSlot, ...props }: TabsListProps & {
+    ref?: Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
     value: string;
     disabled?: boolean;
 }
-export declare const TabsTrigger: import('react').ForwardRefExoticComponent<TabsTriggerProps & import('react').RefAttributes<HTMLElement>>;
+export declare const TabsTrigger: ({ ref, className, value: triggerValue, onClick, onKeyDown, disabled: triggerDisabled, ...props }: TabsTriggerProps & {
+    ref?: Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 export interface TabsContentContainerProps {
     children: ReactNode;
     className?: string;
 }
-export declare const TabsContentContainer: import('react').ForwardRefExoticComponent<TabsContentContainerProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TabsContentContainer: ({ ref, children, className, }: TabsContentContainerProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
 export interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {
     value: string;
     forceMount?: boolean;
 }
-export declare const TabsContent: import('react').ForwardRefExoticComponent<TabsContentProps & import('react').RefAttributes<HTMLElement>>;
+export declare const TabsContent: ({ ref, className, value: contentValue, forceMount, ...props }: TabsContentProps & {
+    ref?: Ref<HTMLElement>;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=TabsBase.d.ts.map

package/dist/Tabs/TabsBase.js

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

package/dist/Tabs/tabsUtils.d.ts

@@ -16,7 +16,7 @@ export interface IndicatorPosition {
 /**
  * Calculates the position and dimensions of the active tab indicator
  */
-export declare const calculateIndicatorStyle: (tabsListRef: RefObject<HTMLDivElement>) => IndicatorStyle;
+export declare const calculateIndicatorStyle: (tabsListRef: RefObject<HTMLDivElement | null>) => IndicatorStyle;
 /**
  * Gets CSS positioning styles for the indicator based on orientation
  */
@@ -24,7 +24,11 @@ export declare const getIndicatorPosition: (style: IndicatorStyle) => IndicatorP
 /**
  * Debounce utility for performance optimization with proper cleanup
  */
-export declare const debounce: <TArgs extends unknown[]>(func: (...args: TArgs) => void, wait: number) => ((...args: TArgs) => void);
+export interface DebouncedFunction<TArgs extends unknown[]> {
+    (...args: TArgs): void;
+    cancel: () => void;
+}
+export declare const debounce: <TArgs extends unknown[]>(func: (...args: TArgs) => void, wait: number) => DebouncedFunction<TArgs>;
 /**
  * Checks if user prefers reduced motion (SSR safe)
  */

package/dist/Tabs/tabsUtils.js

@@ -28,11 +28,14 @@ const s = (e) => {
   height: `${e.height}px`
 }, d = (e, n) => {
   let t = null;
-  return (...r) => {
+  const r = (...o) => {
     t !== null && clearTimeout(t), t = setTimeout(() => {
-      e(...r);
+      e(...o);
     }, n);
   };
+  return r.cancel = () => {
+    t !== null && (clearTimeout(t), t = null);
+  }, r;
 }, f = () => {
   if (typeof window > "u") return !1;
   try {

package/dist/Tabs.js

@@ -4,15 +4,15 @@ import { TabsBase as T, TabsList as z, TabsTrigger as k, TabsContentContainer as
 import { validateTabValues as V, getTabKeys as E } from "./Tabs/tabsUtils.js";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-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" }),
+const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { className: "relative flex w-full flex-col", role: "status", children: [
+  /* @__PURE__ */ l("div", { className: r("inline-flex w-full items-center justify-start", 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 rounded bg-neutral-600", s === "horizontal" ? "mx-2 my-2 h-6 w-16" : "mx-2 my-1 h-6 w-full"), "aria-hidden": "true" }, n)) }),
+  /* @__PURE__ */ l("div", { className: "mt-4 h-32 w-full animate-pulse rounded bg-neutral-600", "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 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" }) });
+    return b?.(e), /* @__PURE__ */ l("div", { className: "relative flex w-full flex-col p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ l("p", { children: "No valid tabs provided" }) });
   }
   if (n)
     return /* @__PURE__ */ l(K, { tabCount: m.length || 3, orientation: t });
@@ -20,7 +20,7 @@ const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { classN
   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 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" }) });
+    return b?.(e), /* @__PURE__ */ l("div", { className: "text-text-secondary relative flex w-full flex-col p-4 text-center", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ l("p", { children: "Unable to render tabs" }) });
   }
   const w = async (e) => {
     if (v && x) {
@@ -34,16 +34,16 @@ const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { classN
     }
     x?.(e);
   };
-  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: [
+  return /* @__PURE__ */ l("div", { className: "relative flex w-full flex-col", 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-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"]
+          "inline-flex w-full items-center justify-between",
+          t === "horizontal" && a === "default" && ["border-tabs-border border-b"],
+          t === "vertical" && a === "default" && ["border-tabs-border relative m-0 h-auto w-auto flex-col items-stretch border-r py-1"],
+          t === "horizontal" && a === "enclosed" && ["bg-tabs-group-bg relative rounded-lg border-0 p-1"],
+          t === "vertical" && a === "enclosed" && ["bg-tabs-group-bg w-auto flex-col rounded-lg border-0 p-1"]
         ),
         rightSlot: y,
         children: c.map((e) => /* @__PURE__ */ l(
@@ -54,12 +54,12 @@ const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { classN
             "aria-label": e["aria-label"],
             "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" && 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"
+              "relative font-semibold whitespace-nowrap transition-all duration-500 ease-in-out focus:outline-none focus-visible:outline-none",
+              t === "horizontal" && a === "default" && ["text-text-primary hover:text-accent hover:bg-tabs-bg--hover px-4 py-2"],
+              t === "vertical" && a === "default" && ["text-text-primary data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover flex h-10 items-center px-4 py-2"],
+              t === "horizontal" && a === "enclosed" && ["text-text-primary data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1] inline-flex items-center justify-center px-4 py-2"],
+              t === "vertical" && a === "enclosed" && ["text-text-primary data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1] px-4 py-2"],
+              "disabled:hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
             ),
             children: e.label
           },
@@ -67,7 +67,7 @@ const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { classN
         ))
       }
     ),
-    /* @__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)) })
+    /* @__PURE__ */ l(C, { className: r(t === "vertical" && "flex-1"), children: c.map((e) => /* @__PURE__ */ l(j, { value: e.key, className: r("focus-visible:outline-accent text-text-primary focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2", t === "horizontal" && "pb-4", t === "vertical" && "px-4 py-2"), children: e.children }, e.key)) })
   ] }) });
 };
 export {

package/dist/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { FormFieldState } from './utils/formFieldUtils';
-import { ComponentProps, FocusEvent } from 'react';
+import { ComponentProps, FocusEvent, Ref } from 'react';
 export type TextareaState = FormFieldState;
 export type TextareaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {
     className?: string | undefined;
@@ -17,5 +17,10 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {
     state?: TextareaState;
     value?: string | undefined;
 };
-export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: {
+    ({ ref, autoComplete, className, disabled, errorMessage, id, label, labelClassName, maxLength, name, onBlur, onChange, onFocus, placeholder, required, state, value, ...props }: TextareaProps & {
+        ref?: Ref<HTMLTextAreaElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=Textarea.d.ts.map