@spear-ai/spectral 1.6.16 → 1.7.0

package/dist/Switch.d.ts

@@ -1,10 +1,10 @@
 import { SwitchProps as SwitchBaseProps } from './SwitchBase';
 import { Ref } from 'react';
 export type SwitchProps = Omit<SwitchBaseProps, 'onCheckedChange'> & {
+    hideLabel?: boolean;
+    id: string;
     labelPosition?: 'left' | 'right';
     labelText: string;
-    id: string;
-    hideLabel?: boolean;
     onChange?: (checked: boolean) => void;
     ref?: Ref<HTMLButtonElement>;
     required?: boolean;
@@ -12,7 +12,7 @@ export type SwitchProps = Omit<SwitchBaseProps, 'onCheckedChange'> & {
     variant?: 'default' | 'squared';
 };
 export declare const Switch: {
-    ({ ref, className, disabled, id, labelPosition, labelText, name, onChange, required, value, hideLabel, variant, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, disabled, hideLabel, id, labelPosition, labelText, name, onChange, ref, required, value, variant, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=Switch.d.ts.map

package/dist/Switch.js

@@ -4,24 +4,24 @@ import { Switch as w, SwitchThumb as k } from "./Switch/SwitchBase.js";
 import { Label as r } from "./Label.js";
 import { cn as l } from "./utils/twUtils.js";
 import "react";
-const x = ({ ref: o, className: d, disabled: h, id: e, labelPosition: i = "right", labelText: s, name: b, onChange: u, required: c, value: m, hideLabel: a = !1, variant: f, ...g }) => {
+const x = ({ className: o, disabled: d, hideLabel: s = !1, id: e, labelPosition: i = "right", labelText: a, name: h, onChange: b, ref: u, required: c, value: m, variant: f, ...g }) => {
   const n = f === "squared";
   return /* @__PURE__ */ p("div", { className: "flex items-center", "data-testid": "spectral-switch-container", children: [
-    i === "left" && !a && /* @__PURE__ */ t(r, { htmlFor: e, className: "mr-2", "data-testid": "spectral-switch-label-left", children: s }),
+    i === "left" && !s && /* @__PURE__ */ t(r, { className: "mr-2", "data-testid": "spectral-switch-label-left", htmlFor: e, children: a }),
     /* @__PURE__ */ t(
       w,
       {
         "aria-required": c,
         className: l(
           n ? "peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 items-center rounded-sm border-2 border-transparent transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-black disabled:cursor-not-allowed disabled:opacity-50 [&_span]:rounded-[4px]" : "focus-visible:ring-ring focus-visible:ring-offset-background peer data-[state=checked]:bg-switch-bg--checked data-[state=unchecked]:bg-switch-bg inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-2xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          d
+          o
         ),
         "data-testid": "spectral-switch",
-        disabled: h,
+        disabled: d,
         id: e,
-        name: b,
-        onCheckedChange: u,
-        ref: o,
+        name: h,
+        onCheckedChange: b,
+        ref: u,
         required: c,
         value: m,
         ...g,
@@ -35,8 +35,8 @@ const x = ({ ref: o, className: d, disabled: h, id: e, labelPosition: i = "right
         )
       }
     ),
-    i === "right" && !a && /* @__PURE__ */ t(r, { htmlFor: e, id: `${e}-label`, className: "ml-2", "data-testid": "spectral-switch-label-right", children: s }),
-    a && /* @__PURE__ */ t(r, { htmlFor: e, className: "sr-only", "data-testid": "spectral-switch-label-hidden", children: s })
+    i === "right" && !s && /* @__PURE__ */ t(r, { className: "ml-2", "data-testid": "spectral-switch-label-right", htmlFor: e, id: `${e}-label`, children: a }),
+    s && /* @__PURE__ */ t(r, { className: "sr-only", "data-testid": "spectral-switch-label-hidden", htmlFor: e, children: a })
   ] });
 };
 x.displayName = "Switch";

package/dist/Tabs/TabsBase.js

@@ -4,20 +4,21 @@ import { jsx as p, jsxs as E } from "react/jsx-runtime";
 import { generateId as K, prefersReducedMotion as $, calculateIndicatorStyle as S, debounce as j } from "./tabsUtils.js";
 import { cn as x } from "../utils/twUtils.js";
 import { createContext as k, useContext as U, useState as M, useId as F, useCallback as T, useRef as q, useMemo as B, useEffect as R } from "react";
-import { j as H, A as G } from "../index-CeP1E2kK.js";
-import { m as D } from "../proxy-Cukf-VVj.js";
+import { j as H } from "../index-DEYs15GP.js";
+import { m as D } from "../proxy-CgaCj1WQ.js";
+import { A as G } from "../index-DdFoGvON.js";
 const N = k(null), A = (y = "Tabs") => {
   const d = U(N);
   if (d === null)
     throw new Error(`${y} components must be used within a Tabs.Root`);
   return d;
-}, _ = function({
+}, V = function({
   ref: d,
   activationMode: g = "automatic",
   children: o,
   defaultValue: s,
-  dir: u = "ltr",
-  disabled: f = !1,
+  dir: f = "ltr",
+  disabled: u = !1,
   onValueChange: n,
   orientation: m = "horizontal",
   rightSlot: b,
@@ -26,27 +27,27 @@ const N = k(null), A = (y = "Tabs") => {
 }) {
   const [w, I] = M(s ?? ""), v = F() ?? K("tabs"), h = t !== void 0, c = h ? t : w, r = T(
     (e) => {
-      f || (h || I(e), n?.(e));
+      u || (h || I(e), n?.(e));
     },
-    [h, n, f]
+    [h, n, u]
   ), a = {
     activationMode: g,
     baseId: v,
-    dir: u,
-    disabled: f,
+    dir: f,
+    disabled: u,
     onValueChange: r,
     orientation: m,
     rightSlot: b,
     value: c
   };
-  return /* @__PURE__ */ p(N.Provider, { value: a, children: /* @__PURE__ */ p("div", { ref: d, "data-testid": "spectral-tabs", "data-orientation": m, "data-disabled": f ? "" : void 0, dir: u, ...C, children: o }) });
-}, V = function({
+  return /* @__PURE__ */ p(N.Provider, { value: a, children: /* @__PURE__ */ p("div", { ref: d, "data-testid": "spectral-tabs", "data-orientation": m, "data-disabled": u ? "" : void 0, dir: f, ...C, children: o }) });
+}, tt = function({
   ref: d,
   children: g,
   className: o,
   loop: s = !0,
-  rightSlot: u,
-  ...f
+  rightSlot: f,
+  ...u
 }) {
   const { orientation: n, disabled: m, value: b } = A("TabsList"), [t, C] = M(null), w = q(null), I = $(), v = T(() => {
     const r = S(w);
@@ -90,10 +91,10 @@ const N = k(null), A = (y = "Tabs") => {
         "aria-disabled": m,
         className: x("tabs-list flex", n === "horizontal" && "items-center justify-between", n === "vertical" && "flex-col", o),
         onKeyDown: c,
-        ...f,
+        ...u,
         children: [
           /* @__PURE__ */ p("div", { className: x("flex", n === "horizontal" && "items-center", n === "vertical" && "flex-col"), children: g }),
-          u && /* @__PURE__ */ p("div", { className: "z-10 flex items-center", children: u })
+          f && /* @__PURE__ */ p("div", { className: "z-10 flex items-center", children: f })
         ]
       }
     ),
@@ -102,10 +103,10 @@ const N = k(null), A = (y = "Tabs") => {
       {
         className: x(
           "pointer-events-none absolute top-0 left-0 will-change-transform select-none",
-          t.orientation === "horizontal" && !t.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]"],
-          t.orientation === "vertical" && !t.isEnclosed && ["right-[1px]", "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 z-0 rounded-lg shadow-lg"],
-          t.orientation === "vertical" && t.isEnclosed && ["bg-tabs-enclosed-indicator z-0 rounded-lg shadow-lg"]
+          t.orientation === "horizontal" && !t.isEnclosed && "after:border-tabs-indicator bottom-px z-10 after:absolute after:bottom-0 after:left-0 after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:content-['']",
+          t.orientation === "vertical" && !t.isEnclosed && "after:border-tabs-indicator right-px z-10 after:absolute after:top-0 after:right-0 after:h-full after:w-1 after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:content-['']",
+          t.orientation === "horizontal" && t.isEnclosed && "bg-tabs-enclosed-indicator z-0 rounded-lg shadow-lg",
+          t.orientation === "vertical" && t.isEnclosed && "bg-tabs-enclosed-indicator z-0 rounded-lg shadow-lg"
         ),
         initial: !1,
         animate: {
@@ -128,16 +129,16 @@ const N = k(null), A = (y = "Tabs") => {
       }
     )
   ] });
-}, tt = function({
+}, et = function({
   ref: d,
   className: g,
   value: o,
   onClick: s,
-  onKeyDown: u,
-  disabled: f = !1,
+  onKeyDown: f,
+  disabled: u = !1,
   ...n
 }) {
-  const { value: m, onValueChange: b, activationMode: t, disabled: C, baseId: w } = A("TabsTrigger"), I = `${w}-trigger-${o}`, v = `${w}-content-${o}`, h = m === o, c = C || f, r = T(
+  const { value: m, onValueChange: b, activationMode: t, disabled: C, baseId: w } = A("TabsTrigger"), I = `${w}-trigger-${o}`, v = `${w}-content-${o}`, h = m === o, c = C || u, r = T(
     (i) => {
       if (c) {
         i.preventDefault();
@@ -153,9 +154,9 @@ const N = k(null), A = (y = "Tabs") => {
         return;
       }
       const { key: l } = i;
-      (l === "Enter" || l === " ") && (i.preventDefault(), i.stopPropagation(), b(o)), u?.(i);
+      (l === "Enter" || l === " ") && (i.preventDefault(), i.stopPropagation(), b(o)), f?.(i);
     },
-    [o, b, u, c]
+    [o, b, f, c]
   ), e = T(() => {
     c || t === "automatic" && b(o);
   }, [t, b, o, c]);
@@ -181,12 +182,12 @@ const N = k(null), A = (y = "Tabs") => {
       ...n
     }
   );
-}, et = function({
+}, nt = function({
   ref: d,
   children: g,
   className: o
 }) {
-  const { value: s } = A("TabsContentContainer"), [u, f] = H(), n = $();
+  const { value: s } = A("TabsContentContainer"), [f, u] = H(), n = $();
   return /* @__PURE__ */ p(
     D.div,
     {
@@ -194,7 +195,7 @@ const N = k(null), A = (y = "Tabs") => {
       className: x("overflow-hidden", o),
       "data-testid": "spectral-tabs-content-container",
       animate: {
-        height: f.height || "auto"
+        height: u.height || "auto"
       },
       transition: n ? { duration: 0 } : {
         duration: 0.3,
@@ -203,7 +204,7 @@ const N = k(null), A = (y = "Tabs") => {
       children: /* @__PURE__ */ p(G, { mode: "wait", initial: !1, children: /* @__PURE__ */ p(
         D.div,
         {
-          ref: u,
+          ref: f,
           initial: n ? !1 : { opacity: 0, y: 8 },
           animate: { opacity: 1, y: 0 },
           exit: n ? void 0 : { opacity: 0, y: -8 },
@@ -217,14 +218,14 @@ const N = k(null), A = (y = "Tabs") => {
       ) })
     }
   );
-}, nt = function({
+}, ot = function({
   ref: d,
   className: g,
   value: o,
   forceMount: s = !1,
-  ...u
+  ...f
 }) {
-  const { value: f, baseId: n } = A("TabsContent"), m = `${n}-content-${o}`, b = `${n}-trigger-${o}`, t = f === o;
+  const { value: u, baseId: n } = A("TabsContent"), m = `${n}-content-${o}`, b = `${n}-trigger-${o}`, t = u === o;
   return !s && !t ? null : /* @__PURE__ */ p(
     "div",
     {
@@ -237,16 +238,16 @@ const N = k(null), A = (y = "Tabs") => {
       ref: d,
       role: "tabpanel",
       tabIndex: 0,
-      ...u
+      ...f
     }
   );
 };
 export {
-  _ as TabsBase,
-  nt as TabsContent,
-  et as TabsContentContainer,
+  V as TabsBase,
+  ot as TabsContent,
+  nt as TabsContentContainer,
   N as TabsContext,
-  V as TabsList,
-  tt as TabsTrigger,
+  tt as TabsList,
+  et as TabsTrigger,
   A as useTabsContext
 };

package/dist/Tabs/tabsUtils.js

@@ -13,19 +13,19 @@ const s = (e) => {
   if (!t) return { ...n, orientation: r, isEnclosed: o };
   const a = t.getBoundingClientRect(), i = e.current.getBoundingClientRect();
   return {
-    left: a.left - i.left,
-    top: a.top - i.top,
-    width: a.width,
     height: a.height,
+    isEnclosed: o,
+    left: a.left - i.left,
     orientation: r,
-    isEnclosed: o
+    top: a.top - i.top,
+    width: a.width
   };
 }, u = (e) => e.orientation === "horizontal" ? {
   left: `${e.left}px`,
   width: `${e.width}px`
 } : {
-  top: `${e.top}px`,
-  height: `${e.height}px`
+  height: `${e.height}px`,
+  top: `${e.top}px`
 }, d = (e, n) => {
   let t = null;
   const r = (...o) => {
@@ -52,7 +52,7 @@ const s = (e) => {
   if (!Array.isArray(e) || e.length === 0)
     return console.warn("Tabs: tabValues must be a non-empty array"), !1;
   const n = /* @__PURE__ */ new Set();
-  for (let t = 0; t < e.length; t++) {
+  for (let t = 0; t < e.length; t += 1) {
     const r = e[t];
     if (!c(r, t))
       return !1;

package/dist/Tabs.d.ts

@@ -17,10 +17,6 @@ export interface TabsProps extends Omit<TabsBaseProps, 'children' | 'defaultValu
     onBeforeChange?: (newValue: string, oldValue: string) => boolean | Promise<boolean> | undefined;
     onError?: ((error: Error) => void) | undefined;
     loading?: boolean | undefined;
-    /**
-     * Initial tab to open (uncontrolled mode).
-     * Mutually exclusive with `value` - use one or the other.
-     */
     openOnLoad?: string | undefined;
     rightSlot?: ReactNode | undefined;
     tabValues: TabValue[] | undefined;

package/dist/Tabs.js

@@ -1,92 +1,88 @@
 import "./styles/main.css";
-import { jsx as l, jsxs as N } from "react/jsx-runtime";
-import { TabsBase as j, TabsList as E, TabsTrigger as K, TabsContentContainer as $, TabsContent as A } from "./Tabs/TabsBase.js";
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { TabsBase as j, TabsList as E, TabsTrigger as K, TabsContentContainer as V, TabsContent as $ } from "./Tabs/TabsBase.js";
 import { validateTabValues as B, getTabKeys as I } from "./Tabs/tabsUtils.js";
-import { cn as r } from "./utils/twUtils.js";
+import { cn as s } from "./utils/twUtils.js";
 import "react";
-const L = ({ tabCount: f, orientation: s, hideContent: v }) => /* @__PURE__ */ N("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(f, 5) }, (h, x) => /* @__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" }, x)) }),
-  !v && /* @__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…" })
-] }), _ = ({
-  activationMode: f = "automatic",
-  ariaLabel: s,
-  className: v,
-  hideContent: h = !1,
-  loading: x = !1,
-  onBeforeChange: y,
-  onError: m,
-  onValueChange: g,
-  openOnLoad: o,
-  orientation: a = "horizontal",
-  rightSlot: T,
-  tabValues: w = [],
-  value: d,
-  variant: t = "default",
-  ...k
+const F = ({
+  activationMode: p = "automatic",
+  ariaLabel: h,
+  className: m,
+  hideContent: y = !1,
+  loading: g = !1,
+  onBeforeChange: v,
+  onError: f,
+  onValueChange: x,
+  openOnLoad: c,
+  orientation: t = "horizontal",
+  rightSlot: w,
+  tabValues: T = [],
+  value: o,
+  variant: l = "default",
+  ...N
 }) => {
-  const n = w.filter((e) => e.key !== void 0), b = d !== void 0;
-  if (!B(n)) {
+  if (g)
+    return /* @__PURE__ */ a("div", { className: "text-text-secondary relative flex w-full flex-col p-4 text-center", role: "status", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "Loading tabs…" }) });
+  const d = T.filter((e) => e.key !== void 0), n = o !== void 0;
+  if (!B(d)) {
     const e = new Error("Invalid tabValues provided to Tabs component");
-    return m?.(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" }) });
+    return f?.(e), /* @__PURE__ */ a("div", { className: "relative flex w-full flex-col p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "No valid tabs provided" }) });
   }
-  if (x)
-    return /* @__PURE__ */ l(L, { tabCount: w.length || 3, orientation: a, hideContent: h });
-  const i = I(n);
-  let u;
-  b && (i.includes(d) ? u = d : (console.warn(`Tabs: value '${d}' is not a valid tab key, falling back to first tab`), u = i[0]));
-  let c;
-  if (!b && (c = o ?? i[0], o && !i.includes(o) && (console.warn(`Tabs: openOnLoad value '${o}' is not a valid tab key`), c = i[0]), !c)) {
+  const r = I(d);
+  let b;
+  n && (r.includes(o) ? b = o : (console.warn(`Tabs: value '${o}' is not a valid tab key, falling back to first tab`), b = r[0]));
+  let i;
+  if (!n && (i = c ?? r[0], c && !r.includes(c) && (console.warn(`Tabs: openOnLoad value '${c}' is not a valid tab key`), i = r[0]), !i)) {
     const e = new Error("No valid default tab available");
-    return m?.(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" }) });
+    return f?.(e), /* @__PURE__ */ a("div", { className: "text-text-secondary relative flex w-full flex-col p-4 text-center", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "Unable to render tabs" }) });
   }
-  const z = async (e) => {
-    if (y && g) {
-      const C = b ? u : c;
+  const k = async (e) => {
+    if (v && x) {
+      const z = n ? b ?? "" : i ?? "";
       try {
-        if (await y(e, C) === !1) return;
-      } catch (p) {
-        m?.(p instanceof Error ? p : new Error("Before change callback failed"));
+        if (await v(e, z) === !1) return;
+      } catch (u) {
+        f?.(u instanceof Error ? u : new Error("Before change callback failed"));
         return;
       }
     }
-    g?.(e);
+    x?.(e);
   };
-  return /* @__PURE__ */ l("div", { className: "relative flex w-full flex-col", children: /* @__PURE__ */ N(
+  return /* @__PURE__ */ a("div", { className: "relative flex w-full flex-col", children: /* @__PURE__ */ C(
     j,
     {
-      "aria-label": s,
-      className: r("relative w-full data-[orientation=vertical]:flex", t, v),
-      ...b ? { value: u } : { defaultValue: c },
-      orientation: a,
-      activationMode: f,
-      onValueChange: z,
-      ...k,
+      "aria-label": h,
+      className: s("relative w-full data-[orientation=vertical]:flex", l, m),
+      ...n ? { value: b } : { defaultValue: i },
+      orientation: t,
+      activationMode: p,
+      onValueChange: k,
+      ...N,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ a(
           E,
           {
-            className: r(
+            className: s(
               "inline-flex w-full items-center justify-between",
-              a === "horizontal" && t === "default" && ["border-tabs-border border-b"],
-              a === "vertical" && t === "default" && ["border-tabs-border relative m-0 h-auto w-auto flex-col items-stretch border-r py-1"],
-              a === "horizontal" && t === "enclosed" && ["bg-tabs-group-bg relative rounded-lg border-0 p-1"],
-              a === "vertical" && t === "enclosed" && ["bg-tabs-group-bg w-auto flex-col rounded-lg border-0 p-1"]
+              t === "horizontal" && l === "default" && "border-tabs-border border-b",
+              t === "vertical" && l === "default" && "border-tabs-border relative m-0 h-auto w-auto flex-col items-stretch border-r py-1",
+              t === "horizontal" && l === "enclosed" && "bg-tabs-group-bg relative rounded-lg border-0 p-1",
+              t === "vertical" && l === "enclosed" && "bg-tabs-group-bg w-auto flex-col rounded-lg border-0 p-1"
             ),
-            rightSlot: T,
-            children: n.map((e) => /* @__PURE__ */ l(
+            rightSlot: w,
+            children: d.map((e) => /* @__PURE__ */ a(
               K,
               {
                 value: e.key,
                 disabled: e.disabled,
                 "aria-label": e["aria-label"],
                 "aria-describedby": e["aria-describedby"],
-                className: r(
+                className: s(
                   "relative font-semibold whitespace-nowrap transition-all duration-500 ease-in-out focus:outline-none focus-visible:outline-none",
-                  a === "horizontal" && t === "default" && ["text-text-primary hover:text-accent hover:bg-tabs-bg--hover px-4 py-2"],
-                  a === "vertical" && t === "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"],
-                  a === "horizontal" && t === "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"],
-                  a === "vertical" && t === "enclosed" && ["text-text-primary data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1] px-4 py-2"],
+                  t === "horizontal" && l === "default" && "text-text-primary hover:text-accent hover:bg-tabs-bg--hover px-4 py-2",
+                  t === "vertical" && l === "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" && l === "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" && l === "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
@@ -95,15 +91,15 @@ const L = ({ tabCount: f, orientation: s, hideContent: v }) => /* @__PURE__ */ N
             ))
           }
         ),
-        !h && /* @__PURE__ */ l($, { className: r(a === "vertical" && "flex-1"), children: n.map((e) => /* @__PURE__ */ l(A, { value: e.key, className: r("focus-visible:outline-accent text-text-primary focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2", a === "horizontal" && "pb-4", a === "vertical" && "px-4 py-2"), children: e.children }, e.key)) })
+        !y && /* @__PURE__ */ a(V, { className: s(t === "vertical" && "flex-1"), children: d.map((e) => /* @__PURE__ */ a($, { value: e.key, className: s("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 {
-  _ as Tabs,
-  A as TabsContent,
-  $ as TabsContentContainer,
+  F as Tabs,
+  $ as TabsContent,
+  V as TabsContentContainer,
   E as TabsList,
   j as TabsRoot,
   K as TabsTrigger

package/dist/Textarea/TextareaUtils.d.ts

@@ -1,17 +1,17 @@
 import { ChangeEvent, ClipboardEvent, FocusEvent } from 'react';
-export type UseTextareaOptions = {
+export interface UseTextareaOptions {
     maxLength: number;
-    value: string;
+    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
     onChange: (value: string) => void;
     onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
-    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
-};
-export type UseTextareaReturn = {
-    handleFocus: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    value: string;
+}
+export interface UseTextareaReturn {
     handleBlur: (e: FocusEvent<HTMLTextAreaElement>) => void;
     handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    handleFocus: (e: FocusEvent<HTMLTextAreaElement>) => void;
     handlePaste: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
-};
+}
 /**
  * Custom hook for textarea functionality with character limits and event handling
  */

package/dist/Textarea/TextareaUtils.js

@@ -1,24 +1,24 @@
 "use client";
 import { useCallback as i } from "react";
-const T = (t, n, s) => {
-  const a = t.target.value;
-  a.length <= n && s?.(a);
-}, V = (t, n, s, a) => {
-  const r = t.clipboardData.getData("text"), c = n || "", o = t.currentTarget, l = o.selectionStart || 0, u = o.selectionEnd || 0, e = c.substring(0, l), d = c.substring(u);
-  if ((e + r + d).length > s) {
+const T = (t, a, s) => {
+  const n = t.target.value;
+  n.length <= a && s?.(n);
+}, V = (t, a, s, n) => {
+  const r = t.clipboardData.getData("text"), c = s || "", o = t.currentTarget, l = o.selectionStart || 0, u = o.selectionEnd || 0, e = c.substring(0, l), d = c.substring(u);
+  if ((e + r + d).length > a) {
     t.preventDefault();
-    const g = u - l, h = s - c.length + g, p = r.substring(0, Math.max(0, h)), f = e + p + d;
-    a?.(f), setTimeout(() => {
+    const g = u - l, h = a - c.length + g, p = r.substring(0, Math.max(0, h)), f = e + p + d;
+    n?.(f), setTimeout(() => {
       const b = l + p.length;
       o.setSelectionRange(b, b);
     }, 0);
   }
-}, P = ({ maxLength: t, value: n, onChange: s, onFocus: a, onBlur: r }) => {
+}, P = ({ maxLength: t, value: a, onChange: s, onFocus: n, onBlur: r }) => {
   const c = i(
     (e) => {
-      a?.(e);
+      n?.(e);
     },
-    [a]
+    [n]
   ), o = i(
     (e) => {
       r?.(e);
@@ -31,9 +31,9 @@ const T = (t, n, s) => {
     [t, s]
   ), u = i(
     (e) => {
-      V(e, n, t, s);
+      V(e, t, a, s);
     },
-    [n, t, s]
+    [a, t, s]
   );
   return {
     handleFocus: c,