@spear-ai/spectral 1.6.10 → 1.6.12

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -1,6 +1,6 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as K, jsx as x } from "react/jsx-runtime";
+import { jsxs as K, jsx as k } from "react/jsx-runtime";
 import { getResolvedLocale as ee, getLocalizedPeriodLabels as te, formatSelectPeriodLabel as re } from "./DateTimeUtils.js";
 import { Label as ne } from "../Label.js";
 import { useControllableState as ae } from "../hooks/useControllableState.js";
@@ -16,10 +16,10 @@ const h = {
   minute: { type: "minute", min: 0, max: 59, length: 2 },
   period: { type: "period", min: 0, max: 1, length: 2 }
 };
-function ue(v, e) {
-  return v === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(v) ? 30 : 31;
+function ue(x, e) {
+  return x === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(x) ? 30 : 31;
 }
-function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus: w, onValueChange: c, periodLabels: D, value: s }) {
+function ce({ ariaLabel: x, config: e, disabled: f, onLeftFocus: I, onRightFocus: v, onValueChange: c, periodLabels: w, value: s }) {
   const o = B(null), a = B(""), u = B(!1), b = g(() => {
     switch (e.type) {
       case "month":
@@ -33,11 +33,11 @@ function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus
       case "minute":
         return "mm";
       case "period":
-        return (D?.am ?? "am").toLowerCase();
+        return (w?.am ?? "am").toLowerCase();
       default:
         return "––";
     }
-  }, [e.type, e.max, D]), m = g(() => s === void 0 ? b : e.type === "period" ? (s === 0 ? D?.am ?? "am" : D?.pm ?? "pm").toLowerCase() : s.toString().padStart(e.length, "0"), [s, e, D, b]);
+  }, [e.type, e.max, w]), m = g(() => s === void 0 ? b : e.type === "period" ? (s === 0 ? w?.am ?? "am" : w?.pm ?? "pm").toLowerCase() : s.toString().padStart(e.length, "0"), [s, e, w, b]);
   oe(() => {
     o.current && !u.current && (o.current.value = m);
   }, [m]);
@@ -56,7 +56,7 @@ function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus
           return;
         }
         if (t.key === "ArrowRight") {
-          t.preventDefault(), d(), w?.();
+          t.preventDefault(), d(), v?.();
           return;
         }
         if (t.key === "ArrowLeft") {
@@ -92,17 +92,17 @@ function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus
           const r = a.current + t.key, l = parseInt(r, 10);
           if (e.length === 2)
             if (r.length >= 2) {
-              const k = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", u.current = !1, c(k), w?.();
+              const D = Math.max(e.min, Math.min(e.max, l));
+              a.current = "", u.current = !1, c(D), v?.();
             } else if (l * 10 > e.max) {
-              const k = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", u.current = !1, c(k), w?.();
+              const D = Math.max(e.min, Math.min(e.max, l));
+              a.current = "", u.current = !1, c(D), v?.();
             } else
               a.current = r, u.current = !0, o.current && (o.current.value = r);
           else if (e.length === 4)
             if (r.length >= 4) {
-              const k = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", u.current = !1, c(k), w?.();
+              const D = Math.max(e.min, Math.min(e.max, l));
+              a.current = "", u.current = !1, c(D), v?.();
             } else
               a.current = r, u.current = !0, o.current && (o.current.value = r);
           return;
@@ -116,7 +116,7 @@ function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus
         }
       }
     },
-    [f, e, s, m, c, I, w, d]
+    [f, e, s, m, c, I, v, d]
   ), R = L(() => {
     a.current && d();
   }, [d]), S = L(() => {
@@ -146,10 +146,10 @@ function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus
         return { width: 24, paddingLeft: 0 };
     }
   })(), M = s === void 0;
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ k(
     "input",
     {
-      "aria-label": v,
+      "aria-label": x,
       "aria-valuemax": e.max,
       "aria-valuemin": e.min,
       "aria-valuenow": s,
@@ -178,15 +178,15 @@ function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus
 }
 const le = se(
   ({
-    className: v,
+    className: x,
     id: e,
     // New props
     defaultValue: f,
     onChange: I,
-    value: w,
+    value: v,
     // Legacy props (deprecated)
     date: c,
-    onDateChange: D,
+    onDateChange: w,
     // Other props
     disabled: s,
     endIcon: o,
@@ -197,7 +197,7 @@ const le = se(
     state: d = "default",
     ...E
   }, R) => {
-    const S = B(null), T = w ?? c, U = I ?? D, [y, M] = ae({
+    const S = B(null), T = v ?? c, U = I ?? w, [y, M] = ae({
       value: T,
       defaultValue: f,
       onChange: U
@@ -213,7 +213,7 @@ const le = se(
         minute: y.getMinutes(),
         period: p
       };
-    }, [y, a]), k = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, _ = L(
+    }, [y, a]), D = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, _ = L(
       (i) => {
         const n = { ...l, ...i };
         if (n.month === void 0 && n.day === void 0 && n.year === void 0) {
@@ -250,15 +250,15 @@ const le = se(
       return [...i, ...n];
     }, [m, a, r]), z = L((i) => {
       S.current?.querySelectorAll('[role="spinbutton"]')[i]?.focus();
-    }, []), Q = O(ie(d, v));
+    }, []), Q = O(ie(d, x));
     return /* @__PURE__ */ K("div", { className: "flex flex-col gap-1.5", children: [
-      u && /* @__PURE__ */ x(ne, { className: "text-text-primary text-sm font-medium", htmlFor: e, children: u }),
-      /* @__PURE__ */ K("div", { className: O(Q, "relative", (s || d === "disabled") && "cursor-not-allowed", v), "data-slot": "datetime-display-input", id: e ?? "datetime-display-input", ref: R ?? S, ...E, children: [
-        /* @__PURE__ */ x("div", { className: "flex items-center", ref: S, children: q.map((i, n) => {
-          const p = ["month", "day", "year"].includes(i.key), H = ["hour", "minute", "period"].includes(i.key), Y = i.key === "year", N = i.key === "hour", P = s || H && !k;
+      u && /* @__PURE__ */ k(ne, { className: "text-text-primary text-sm font-medium", htmlFor: e, children: u }),
+      /* @__PURE__ */ K("div", { className: O(Q, "relative", (s || d === "disabled") && "cursor-not-allowed", x), "data-slot": "datetime-display-input", id: e ?? "datetime-display-input", ref: R ?? S, ...E, children: [
+        /* @__PURE__ */ k("div", { className: "flex items-center", ref: S, children: q.map((i, n) => {
+          const p = ["month", "day", "year"].includes(i.key), H = ["hour", "minute", "period"].includes(i.key), Y = i.key === "year", N = i.key === "hour", P = s || H && !D;
           return /* @__PURE__ */ K("span", { className: "flex items-center", children: [
-            N && /* @__PURE__ */ x("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
-            /* @__PURE__ */ x(
+            N && /* @__PURE__ */ k("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
+            /* @__PURE__ */ k(
               ce,
               {
                 ariaLabel: i.ariaLabel,
@@ -271,11 +271,11 @@ const le = se(
                 value: l[i.key]
               }
             ),
-            p && !Y && /* @__PURE__ */ x("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: "/" }),
-            N && /* @__PURE__ */ x("span", { "aria-hidden": "true", className: "text-inherit select-none", children: ":" })
+            p && !Y && /* @__PURE__ */ k("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: "/" }),
+            N && /* @__PURE__ */ k("span", { "aria-hidden": "true", className: "text-inherit select-none", children: ":" })
           ] }, i.key);
         }) }),
-        /* @__PURE__ */ x("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", children: o })
+        o
       ] })
     ] });
   }

package/dist/DateTimePicker.js

@@ -1,10 +1,10 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { Calendar as b } from "./DateTimePicker/Calendar.js";
 import { DateTimeDisplayInput as w } from "./DateTimePicker/DateTimeDisplayInput.js";
 import { getResolvedLocale as I, detectHourFormat as L } from "./DateTimePicker/DateTimeUtils.js";
-import { DEFAULT_TRANSLATIONS as lr, DateTimeConfigSchema as nr, HourFormatSchema as sr, PICKER_TYPES as dr, PeriodSchema as cr, TIME_BOUNDS as ur, TimePickerTypeSchema as gr, TimeValueSchema as fr, convert12HourTo24Hour as hr, display12HourValue as Tr, formatSelectPeriodLabel as xr, formatTimeNumber as Hr, getAriaLabel as vr, getAriaValueMinMax as yr, getAriaValueNow as Vr, getArrowByType as Sr, getDateByType as Cr, getLocalizedPeriodLabel as Nr, getLocalizedPeriodLabels as Pr, getPeriodFromHours as Ar, getValid12Hour as Dr, getValidArrow12Hour as br, getValidArrowHour as wr, getValidArrowMinute as Ir, getValidArrowNumber as Lr, getValidHour as Mr, getValidMinute as kr, getValidNumber as Fr, isValid12Hour as Er, isValidHour as Br, isValidMinute as Or, set12Hours as jr, setDateByType as zr, setHours as Rr, setMinutes as _r } from "./DateTimePicker/DateTimeUtils.js";
+import { DEFAULT_TRANSLATIONS as nr, DateTimeConfigSchema as lr, HourFormatSchema as sr, PICKER_TYPES as dr, PeriodSchema as cr, TIME_BOUNDS as ur, TimePickerTypeSchema as gr, TimeValueSchema as fr, convert12HourTo24Hour as hr, display12HourValue as Tr, formatSelectPeriodLabel as vr, formatTimeNumber as xr, getAriaLabel as Hr, getAriaValueMinMax as yr, getAriaValueNow as Vr, getArrowByType as Sr, getDateByType as Cr, getLocalizedPeriodLabel as Nr, getLocalizedPeriodLabels as Pr, getPeriodFromHours as Ar, getValid12Hour as Dr, getValidArrow12Hour as br, getValidArrowHour as wr, getValidArrowMinute as Ir, getValidArrowNumber as Lr, getValidHour as Mr, getValidMinute as kr, getValidNumber as Fr, isValid12Hour as Er, isValidHour as Br, isValidMinute as Or, set12Hours as jr, setDateByType as Rr, setHours as _r, setMinutes as zr } from "./DateTimePicker/DateTimeUtils.js";
 import { TimePicker as M } from "./DateTimePicker/TimePicker.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
@@ -76,12 +76,12 @@ import { cn as a } from "./utils/twUtils.js";
 import { useMemo as g } from "react";
 import { DateTimeInput as Kr } from "./DateTimePicker/DateTimeInput.js";
 import { TimePeriodSelect as qr } from "./DateTimePicker/TimePeriodSelect.js";
-function z({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1, disablePastDates: x = !0, errorMessage: s, hourFormat: d, label: H, locale: v, onChange: y, showTimePicker: o = !0, state: c = "default", timeLocale: u, timeTranslations: V, value: S, ...C }) {
+function R({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1, disablePastDates: v = !0, errorMessage: s, hourFormat: d, label: x, locale: H, onChange: y, showTimePicker: o = !0, state: c = "default", timeLocale: u, timeTranslations: V, value: S, ...C }) {
   const [r, m] = O({
     value: S,
     defaultValue: T,
     onChange: y
-  }), l = g(() => I(u), [u]), p = g(() => d ?? L(l), [d, l]), N = (t) => {
+  }), n = g(() => I(u), [u]), p = g(() => d ?? L(n), [d, n]), N = (t) => {
     if (!t) {
       m(void 0);
       return;
@@ -93,8 +93,8 @@ function z({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1,
   }, D = (t) => {
     m(t);
   };
-  return /* @__PURE__ */ n(F, { children: [
-    /* @__PURE__ */ n("div", { className: a("w-full", h), "data-slot": "datetime-picker", "data-testid": "spectral-datetime-picker", ...C, children: [
+  return /* @__PURE__ */ l(F, { children: [
+    /* @__PURE__ */ l("div", { className: a("w-full", h), "data-slot": "datetime-picker", "data-testid": "spectral-datetime-picker", ...C, children: [
       /* @__PURE__ */ e(
         w,
         {
@@ -105,13 +105,13 @@ function z({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1,
             k,
             {
               "aria-label": "Open date picker",
-              className: a("text-input-icon absolute top-1/2 right-4 size-5 -translate-y-1/2 focus:outline-none", i ? "pointer-events-none cursor-not-allowed opacity-50" : "hover:text-input-icon--hover cursor-pointer"),
+              className: a("text-input-icon hover:text-input-icon--hover absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer focus:outline-none", i ? "pointer-events-none cursor-not-allowed opacity-50" : "hover:text-input-icon--hover cursor-pointer"),
               "data-testid": "spectral-datetime-picker-trigger",
               disabled: i
             }
           ) }),
           hourFormat: p,
-          label: H,
+          label: x,
           onChange: D,
           showTime: o,
           state: c,
@@ -120,7 +120,7 @@ function z({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1,
       ),
       c === "error" && s && /* @__PURE__ */ e(j, { message: s, dataTestId: "spectral-datetime-picker-error-message", id: "datetime-picker-error" })
     ] }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ l(
       B,
       {
         align: "start",
@@ -128,21 +128,21 @@ function z({ calendarProps: f, className: h, defaultValue: T, disabled: i = !1,
         "data-testid": "spectral-datetime-picker-popover",
         onOpenAutoFocus: (t) => t.preventDefault(),
         children: [
-          /* @__PURE__ */ e(b, { ...f, disablePastDates: x, locale: v, mode: "single", onSelect: N, selected: r }),
-          o && /* @__PURE__ */ e("div", { className: "border-border-secondary border-l pl-6", children: /* @__PURE__ */ e(M, { date: r, hourFormat: p, locale: l, onChange: P, onPeriodChange: A, translations: V }) })
+          /* @__PURE__ */ e(b, { ...f, disablePastDates: v, locale: H, mode: "single", onSelect: N, selected: r }),
+          o && /* @__PURE__ */ e("div", { className: "border-border-secondary border-l pl-6", children: /* @__PURE__ */ e(M, { date: r, hourFormat: p, locale: n, onChange: P, onPeriodChange: A, translations: V }) })
         ]
       }
     )
   ] });
 }
-z.displayName = "DateTimePicker";
+R.displayName = "DateTimePicker";
 export {
   b as Calendar,
-  lr as DEFAULT_TRANSLATIONS,
-  nr as DateTimeConfigSchema,
+  nr as DEFAULT_TRANSLATIONS,
+  lr as DateTimeConfigSchema,
   w as DateTimeDisplayInput,
   Kr as DateTimeInput,
-  z as DateTimePicker,
+  R as DateTimePicker,
   sr as HourFormatSchema,
   dr as PICKER_TYPES,
   cr as PeriodSchema,
@@ -154,9 +154,9 @@ export {
   hr as convert12HourTo24Hour,
   L as detectHourFormat,
   Tr as display12HourValue,
-  xr as formatSelectPeriodLabel,
-  Hr as formatTimeNumber,
-  vr as getAriaLabel,
+  vr as formatSelectPeriodLabel,
+  xr as formatTimeNumber,
+  Hr as getAriaLabel,
   yr as getAriaValueMinMax,
   Vr as getAriaValueNow,
   Sr as getArrowByType,
@@ -177,7 +177,7 @@ export {
   Br as isValidHour,
   Or as isValidMinute,
   jr as set12Hours,
-  zr as setDateByType,
-  Rr as setHours,
-  _r as setMinutes
+  Rr as setDateByType,
+  _r as setHours,
+  zr as setMinutes
 };

package/dist/Tabs.d.ts

@@ -8,7 +8,7 @@ export interface TabValue {
     'aria-label'?: string | undefined;
     'aria-describedby'?: string | undefined;
 }
-export interface TabsProps extends Omit<TabsBaseProps, 'children' | 'defaultValue' | 'onError' | 'disabled'> {
+export interface TabsProps extends Omit<TabsBaseProps, 'children' | 'defaultValue' | 'onError' | 'disabled' | 'value'> {
     activationMode?: 'automatic' | 'manual' | undefined;
     ariaLabel?: string | undefined;
     className?: string | undefined;
@@ -17,12 +17,23 @@ 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;
+    /**
+     * Controlled value - the currently active tab key.
+     * When provided, the component operates in controlled mode and the parent
+     * must manage the active tab state via `onValueChange`.
+     * Mutually exclusive with `openOnLoad` - use one or the other.
+     */
+    value?: string | undefined;
     variant?: 'enclosed' | 'default';
 }
-export declare const Tabs: ({ activationMode, ariaLabel, className, hideContent, loading, onBeforeChange, onError, onValueChange, openOnLoad, orientation, rightSlot, tabValues, variant, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ activationMode, ariaLabel, className, hideContent, loading, onBeforeChange, onError, onValueChange, openOnLoad, orientation, rightSlot, tabValues, value: controlledValue, 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'];

package/dist/Tabs.js

@@ -1,80 +1,110 @@
 import "./styles/main.css";
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
-import { TabsBase as z, TabsList as k, TabsTrigger as j, TabsContentContainer as C, TabsContent as V } from "./Tabs/TabsBase.js";
-import { validateTabValues as E, getTabKeys as K } from "./Tabs/tabsUtils.js";
+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 { validateTabValues as B, getTabKeys as I } from "./Tabs/tabsUtils.js";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-const A = ({ tabCount: d, orientation: s, hideContent: n }) => /* @__PURE__ */ y("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) }, (b, u) => /* @__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" }, u)) }),
-  !n && /* @__PURE__ */ l("div", { className: "mt-4 h-32 w-full animate-pulse rounded bg-neutral-600", "aria-hidden": "true" }),
+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…" })
-] }), S = ({ activationMode: d = "automatic", ariaLabel: s, className: n, hideContent: b = !1, loading: u = !1, onBeforeChange: x, onError: f, onValueChange: m, openOnLoad: i, orientation: a = "horizontal", rightSlot: g, tabValues: p = [], variant: t = "default", ...w }) => {
-  const c = p.filter((e) => e.key !== void 0);
-  if (!E(c)) {
+] }), _ = ({
+  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 n = w.filter((e) => e.key !== void 0), b = d !== void 0;
+  if (!B(n)) {
     const e = new Error("Invalid tabValues provided to Tabs component");
-    return f?.(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 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" }) });
   }
-  if (u)
-    return /* @__PURE__ */ l(A, { tabCount: p.length || 3, orientation: a, hideContent: b });
-  const h = K(c);
-  let o = i ?? h[0];
-  if (i && !h.includes(i) && (console.warn(`Tabs: openOnLoad value '${i}' is not a valid tab key`), o = h[0]), !o) {
+  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 e = new Error("No valid default tab available");
-    return f?.(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 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" }) });
   }
-  const N = async (e) => {
-    if (x && m) {
-      const T = o;
+  const z = async (e) => {
+    if (y && g) {
+      const C = b ? u : c;
       try {
-        if (await x(e, T) === !1) return;
-      } catch (v) {
-        f?.(v instanceof Error ? v : new Error("Before change callback failed"));
+        if (await y(e, C) === !1) return;
+      } catch (p) {
+        m?.(p instanceof Error ? p : new Error("Before change callback failed"));
         return;
       }
     }
-    m?.(e);
+    g?.(e);
   };
-  return /* @__PURE__ */ l("div", { className: "relative flex w-full flex-col", children: /* @__PURE__ */ y(z, { "aria-label": s, className: r("relative w-full data-[orientation=vertical]:flex", t, n), defaultValue: o, orientation: a, activationMode: d, onValueChange: N, ...w, children: [
-    /* @__PURE__ */ l(
-      k,
-      {
-        className: r(
-          "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"]
-        ),
-        rightSlot: g,
-        children: c.map((e) => /* @__PURE__ */ l(
-          j,
+  return /* @__PURE__ */ l("div", { className: "relative flex w-full flex-col", children: /* @__PURE__ */ N(
+    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,
+      children: [
+        /* @__PURE__ */ l(
+          E,
           {
-            value: e.key,
-            disabled: e.disabled,
-            "aria-label": e["aria-label"],
-            "aria-describedby": e["aria-describedby"],
             className: r(
-              "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"],
-              "disabled:hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+              "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"]
             ),
-            children: e.label
-          },
-          e.key
-        ))
-      }
-    ),
-    !b && /* @__PURE__ */ l(C, { className: r(a === "vertical" && "flex-1"), children: c.map((e) => /* @__PURE__ */ l(V, { 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)) })
-  ] }) });
+            rightSlot: T,
+            children: n.map((e) => /* @__PURE__ */ l(
+              K,
+              {
+                value: e.key,
+                disabled: e.disabled,
+                "aria-label": e["aria-label"],
+                "aria-describedby": e["aria-describedby"],
+                className: r(
+                  "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"],
+                  "disabled:hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+                ),
+                children: e.label
+              },
+              e.key
+            ))
+          }
+        ),
+        !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)) })
+      ]
+    }
+  ) });
 };
 export {
-  S as Tabs,
-  V as TabsContent,
-  C as TabsContentContainer,
-  k as TabsList,
-  z as TabsRoot,
-  j as TabsTrigger
+  _ as Tabs,
+  A as TabsContent,
+  $ as TabsContentContainer,
+  E as TabsList,
+  j as TabsRoot,
+  K as TabsTrigger
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spear-ai/spectral",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "type": "module",
   "private": false,
   "repository": {