@spear-ai/spectral 1.6.8 → 1.6.10

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -1,12 +1,12 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as O, jsx as x } from "react/jsx-runtime";
-import { getResolvedLocale as V, getLocalizedPeriodLabels as ee, formatSelectPeriodLabel as te } from "./DateTimeUtils.js";
-import { Label as re } from "../Label.js";
-import { useControllableState as ne } from "../hooks/useControllableState.js";
-import { getInputClasses as ae } from "../utils/formFieldUtils.js";
-import { cn as U } from "../utils/twUtils.js";
-import { forwardRef as ie, useRef as E, useMemo as g, useCallback as k, useEffect as se } from "react";
+import { jsxs as K, jsx as x } 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";
+import { getInputClasses as ie } from "../utils/formFieldUtils.js";
+import { cn as O } from "../utils/twUtils.js";
+import { forwardRef as se, useRef as B, useMemo as g, useCallback as L, useEffect as oe } from "react";
 const h = {
   month: { type: "month", min: 1, max: 12, length: 2 },
   day: { type: "day", min: 1, max: 31, length: 2 },
@@ -16,11 +16,11 @@ const h = {
   minute: { type: "minute", min: 0, max: 59, length: 2 },
   period: { type: "period", min: 0, max: 1, length: 2 }
 };
-function oe(v, e) {
+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({ ariaLabel: v, config: e, disabled: d, onLeftFocus: I, onRightFocus: w, onValueChange: c, periodLabels: y, value: o }) {
-  const a = E(null), i = E(""), u = E(!1), b = g(() => {
+function ce({ ariaLabel: v, config: e, disabled: f, onLeftFocus: I, onRightFocus: w, onValueChange: c, periodLabels: D, value: s }) {
+  const o = B(null), a = B(""), u = B(!1), b = g(() => {
     switch (e.type) {
       case "month":
         return "MM";
@@ -33,102 +33,102 @@ function ue({ ariaLabel: v, config: e, disabled: d, onLeftFocus: I, onRightFocus
       case "minute":
         return "mm";
       case "period":
-        return (y?.am ?? "am").toLowerCase();
+        return (D?.am ?? "am").toLowerCase();
       default:
         return "––";
     }
-  }, [e.type, e.max, y]), l = g(() => o === void 0 ? b : e.type === "period" ? (o === 0 ? y?.am ?? "am" : y?.pm ?? "pm").toLowerCase() : o.toString().padStart(e.length, "0"), [o, e, y, b]);
-  se(() => {
-    a.current && !u.current && (a.current.value = l);
-  }, [l]);
-  const p = k(() => {
-    const t = i.current;
+  }, [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]);
+  oe(() => {
+    o.current && !u.current && (o.current.value = m);
+  }, [m]);
+  const d = L(() => {
+    const t = a.current;
     if (t) {
       let r = parseInt(t, 10);
       isNaN(r) || (r = Math.max(e.min, Math.min(e.max, r)), c(r));
     }
-    i.current = "", u.current = !1, a.current && (a.current.value = l);
-  }, [e.min, e.max, l, c]), R = k(
+    a.current = "", u.current = !1, o.current && (o.current.value = m);
+  }, [e.min, e.max, m, c]), E = L(
     (t) => {
-      if (!d) {
+      if (!f) {
         if (t.key === "Tab") {
-          p();
+          d();
           return;
         }
         if (t.key === "ArrowRight") {
-          t.preventDefault(), p(), w?.();
+          t.preventDefault(), d(), w?.();
           return;
         }
         if (t.key === "ArrowLeft") {
-          t.preventDefault(), p(), I?.();
+          t.preventDefault(), d(), I?.();
           return;
         }
         if (e.type === "period") {
-          t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ? c(o === 0 ? 1 : 0) : t.key.toLowerCase() === "a" ? c(0) : t.key.toLowerCase() === "p" && c(1);
+          t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ? c(s === 0 ? 1 : 0) : t.key.toLowerCase() === "a" ? c(0) : t.key.toLowerCase() === "p" && c(1);
           return;
         }
         if (t.key === "ArrowUp") {
-          t.preventDefault(), i.current = "", u.current = !1;
-          const r = o === void 0 || o >= e.max ? e.min : o + 1;
+          t.preventDefault(), a.current = "", u.current = !1;
+          const r = s === void 0 || s >= e.max ? e.min : s + 1;
           c(r);
           return;
         }
         if (t.key === "ArrowDown") {
-          t.preventDefault(), i.current = "", u.current = !1;
-          const r = o === void 0 || o <= e.min ? e.max : o - 1;
+          t.preventDefault(), a.current = "", u.current = !1;
+          const r = s === void 0 || s <= e.min ? e.max : s - 1;
           c(r);
           return;
         }
         if (t.key === "Home") {
-          t.preventDefault(), i.current = "", u.current = !1, c(e.min);
+          t.preventDefault(), a.current = "", u.current = !1, c(e.min);
           return;
         }
         if (t.key === "End") {
-          t.preventDefault(), i.current = "", u.current = !1, c(e.max);
+          t.preventDefault(), a.current = "", u.current = !1, c(e.max);
           return;
         }
         if (t.key >= "0" && t.key <= "9") {
           t.preventDefault();
-          const r = i.current + t.key, L = parseInt(r, 10);
+          const r = a.current + t.key, l = parseInt(r, 10);
           if (e.length === 2)
             if (r.length >= 2) {
-              const D = Math.max(e.min, Math.min(e.max, L));
-              i.current = "", u.current = !1, c(D), w?.();
-            } else if (L * 10 > e.max) {
-              const D = Math.max(e.min, Math.min(e.max, L));
-              i.current = "", u.current = !1, c(D), w?.();
+              const k = Math.max(e.min, Math.min(e.max, l));
+              a.current = "", u.current = !1, c(k), w?.();
+            } 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?.();
             } else
-              i.current = r, u.current = !0, a.current && (a.current.value = r);
+              a.current = r, u.current = !0, o.current && (o.current.value = r);
           else if (e.length === 4)
             if (r.length >= 4) {
-              const D = Math.max(e.min, Math.min(e.max, L));
-              i.current = "", u.current = !1, c(D), w?.();
+              const k = Math.max(e.min, Math.min(e.max, l));
+              a.current = "", u.current = !1, c(k), w?.();
             } else
-              i.current = r, u.current = !0, a.current && (a.current.value = r);
+              a.current = r, u.current = !0, o.current && (o.current.value = r);
           return;
         }
         if (t.key === "Backspace") {
-          if (t.preventDefault(), i.current) {
-            const r = i.current.slice(0, -1);
-            i.current = r, u.current = r.length > 0, a.current && (a.current.value = r || l);
+          if (t.preventDefault(), a.current) {
+            const r = a.current.slice(0, -1);
+            a.current = r, u.current = r.length > 0, o.current && (o.current.value = r || m);
           }
           return;
         }
       }
     },
-    [d, e, o, l, c, I, w, p]
-  ), S = k(() => {
-    i.current && p();
-  }, [p]), T = k(() => {
-    u.current || (i.current = "");
-    const t = a.current;
+    [f, e, s, m, c, I, w, d]
+  ), R = L(() => {
+    a.current && d();
+  }, [d]), S = L(() => {
+    u.current || (a.current = "");
+    const t = o.current;
     if (t) {
       const r = t.value.length;
       t.setSelectionRange(r, r);
     }
-  }, []), Y = k(() => {
-    a.current && (a.current.value = i.current || l);
-  }, [l]), M = (() => {
+  }, []), T = L(() => {
+    o.current && (o.current.value = a.current || m);
+  }, [m]), y = (() => {
     switch (e.type) {
       case "year":
         return { width: 46, paddingLeft: 0 };
@@ -145,155 +145,142 @@ function ue({ ariaLabel: v, config: e, disabled: d, onLeftFocus: I, onRightFocus
       default:
         return { width: 24, paddingLeft: 0 };
     }
-  })(), H = o === void 0;
+  })(), M = s === void 0;
   return /* @__PURE__ */ x(
     "input",
     {
       "aria-label": v,
       "aria-valuemax": e.max,
       "aria-valuemin": e.min,
-      "aria-valuenow": o,
-      className: U(
+      "aria-valuenow": s,
+      className: O(
         "inline-flex items-center justify-center rounded text-center tabular-nums",
         "border-none bg-transparent outline-none",
         "focus:bg-bg-tertiary focus:text-text-primary focus:ring-accent focus:ring-1",
         "hover:bg-bg-secondary",
-        d && "cursor-not-allowed opacity-50",
-        H && "text-text-placeholder text-sm"
+        f && "cursor-not-allowed opacity-50",
+        M && "text-text-placeholder text-sm"
       ),
       "data-segment": e.type,
-      defaultValue: l,
-      disabled: d,
+      defaultValue: m,
+      disabled: f,
       inputMode: "numeric",
-      onBlur: S,
-      onChange: Y,
-      onFocus: T,
-      onKeyDown: R,
-      ref: a,
+      onBlur: R,
+      onChange: T,
+      onFocus: S,
+      onKeyDown: E,
+      ref: o,
       role: "spinbutton",
-      style: M,
-      tabIndex: d ? -1 : 0
+      style: y,
+      tabIndex: f ? -1 : 0
     }
   );
 }
-const ce = ie(
+const le = se(
   ({
     className: v,
+    id: e,
     // New props
-    defaultValue: e,
-    onChange: d,
-    value: I,
+    defaultValue: f,
+    onChange: I,
+    value: w,
     // Legacy props (deprecated)
-    date: w,
-    onDateChange: c,
+    date: c,
+    onDateChange: D,
     // Other props
-    disabled: y,
+    disabled: s,
     endIcon: o,
     hourFormat: a = "12",
-    label: i,
-    locale: u,
-    showTime: b = !0,
-    state: l = "default",
-    ...p
+    label: u,
+    locale: b,
+    showTime: m = !0,
+    state: d = "default",
+    ...E
   }, R) => {
-    const S = E(null), T = I ?? w, Y = d ?? c, [f, M] = ne({
+    const S = B(null), T = w ?? c, U = I ?? D, [y, M] = ae({
       value: T,
-      defaultValue: e,
-      onChange: Y
-    }), H = g(() => V(u), [u]), t = g(() => ee(H), [H]), r = g(() => {
-      if (!f) return { month: void 0, day: void 0, year: void 0, hour: void 0, minute: void 0, period: void 0 };
-      const s = f.getHours();
-      let n, m;
-      return a === "24" ? (n = s, m = 0) : (m = s >= 12 ? 1 : 0, n = s % 12, n === 0 && (n = 12)), {
-        month: f.getMonth() + 1,
-        day: f.getDate(),
-        year: f.getFullYear(),
+      defaultValue: f,
+      onChange: U
+    }), t = g(() => ee(b), [b]), r = g(() => te(t), [t]), l = g(() => {
+      if (!y) return { month: void 0, day: void 0, year: void 0, hour: void 0, minute: void 0, period: void 0 };
+      const i = y.getHours();
+      let n, p;
+      return a === "24" ? (n = i, p = 0) : (p = i >= 12 ? 1 : 0, n = i % 12, n === 0 && (n = 12)), {
+        month: y.getMonth() + 1,
+        day: y.getDate(),
+        year: y.getFullYear(),
         hour: n,
-        minute: f.getMinutes(),
-        period: m
+        minute: y.getMinutes(),
+        period: p
       };
-    }, [f, a]), L = r.month !== void 0 && r.day !== void 0 && r.year !== void 0, D = k(
-      (s) => {
-        const n = { ...r, ...s };
+    }, [y, a]), k = 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) {
           M(void 0);
           return;
         }
-        const m = /* @__PURE__ */ new Date(), A = (n.month ?? m.getMonth() + 1) - 1, P = n.day ?? m.getDate(), N = n.year ?? m.getFullYear(), j = oe(A + 1, N), G = Math.min(P, j), Q = r.month !== void 0 && r.day !== void 0 && r.year !== void 0, W = n.month !== void 0 && n.day !== void 0 && n.year !== void 0, C = !Q && W;
-        let B;
+        const p = /* @__PURE__ */ new Date(), H = (n.month ?? p.getMonth() + 1) - 1, Y = n.day ?? p.getDate(), N = n.year ?? p.getFullYear(), P = ue(H + 1, N), j = Math.min(Y, P), W = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, X = n.month !== void 0 && n.day !== void 0 && n.year !== void 0, A = !W && X;
+        let C;
         if (a === "24")
-          B = C ? 0 : n.hour ?? 0;
+          C = A ? 0 : n.hour ?? 0;
         else {
-          const $ = C ? 12 : n.hour ?? 12, F = C ? 1 : n.period ?? 0, K = $, J = F;
-          K === 12 ? B = J === 0 ? 0 : 12 : B = J === 0 ? K : K + 12;
+          const F = A ? 12 : n.hour ?? 12, V = A ? 1 : n.period ?? 0, G = F, J = V;
+          G === 12 ? C = J === 0 ? 0 : 12 : C = J === 0 ? G : G + 12;
         }
-        const X = C ? 0 : n.minute ?? 0, Z = new Date(N, A, G, B, X, 0, 0);
-        M(Z);
+        const Z = A ? 0 : n.minute ?? 0, $ = new Date(N, H, j, C, Z, 0, 0);
+        M($);
       },
-      [r, a, M]
+      [l, a, M]
     ), q = g(() => {
-      const s = [
+      const i = [
         { key: "month", config: h.month, ariaLabel: "Month" },
         { key: "day", config: h.day, ariaLabel: "Day" },
         { key: "year", config: h.year, ariaLabel: "Year" }
       ];
-      if (!b) return s;
+      if (!m) return i;
       const n = a === "24" ? [
         { key: "hour", config: h.hour24, ariaLabel: "Hours" },
         { key: "minute", config: h.minute, ariaLabel: "Minutes" }
       ] : [
         { key: "hour", config: h.hour12, ariaLabel: "Hours" },
         { key: "minute", config: h.minute, ariaLabel: "Minutes" },
-        { key: "period", config: h.period, ariaLabel: te("Select {am} or {pm}", t) }
+        { key: "period", config: h.period, ariaLabel: re("Select {am} or {pm}", r) }
       ];
-      return [...s, ...n];
-    }, [b, a, t]), z = k((s) => {
-      S.current?.querySelectorAll('[role="spinbutton"]')[s]?.focus();
-    }, []), _ = U(ae(l, v));
-    return /* @__PURE__ */ O("div", { className: "relative flex flex-col gap-1.5", children: [
-      i && /* @__PURE__ */ x(re, { className: "text-text-primary text-sm font-medium", children: i }),
-      /* @__PURE__ */ O(
-        "div",
-        {
-          className: U(
-            _,
-            // state === 'error' && 'border-input-border--danger focus-within:border-input-border--danger focus-within:ring-input-ring--danger',
-            (y || l === "disabled") && "cursor-not-allowed",
-            v
-          ),
-          "data-slot": "datetime-display-input",
-          ref: R ?? S,
-          ...p,
-          children: [
-            /* @__PURE__ */ x("div", { className: "flex items-center", ref: S, children: q.map((s, n) => {
-              const m = ["month", "day", "year"].includes(s.key), A = ["hour", "minute", "period"].includes(s.key), P = s.key === "year", N = s.key === "hour", j = y || A && !L;
-              return /* @__PURE__ */ O("span", { className: "flex items-center", children: [
-                N && /* @__PURE__ */ x("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
-                /* @__PURE__ */ x(
-                  ue,
-                  {
-                    ariaLabel: s.ariaLabel,
-                    config: s.config,
-                    disabled: j,
-                    onLeftFocus: () => n > 0 && z(n - 1),
-                    onRightFocus: () => n < q.length - 1 && z(n + 1),
-                    onValueChange: (G) => D({ [s.key]: G }),
-                    periodLabels: t,
-                    value: r[s.key]
-                  }
-                ),
-                m && !P && /* @__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: ":" })
-              ] }, s.key);
-            }) }),
-            /* @__PURE__ */ x("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", children: o })
-          ]
-        }
-      )
+      return [...i, ...n];
+    }, [m, a, r]), z = L((i) => {
+      S.current?.querySelectorAll('[role="spinbutton"]')[i]?.focus();
+    }, []), Q = O(ie(d, v));
+    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;
+          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(
+              ce,
+              {
+                ariaLabel: i.ariaLabel,
+                config: i.config,
+                disabled: P,
+                onLeftFocus: () => n > 0 && z(n - 1),
+                onRightFocus: () => n < q.length - 1 && z(n + 1),
+                onValueChange: (j) => _({ [i.key]: j }),
+                periodLabels: r,
+                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: ":" })
+          ] }, i.key);
+        }) }),
+        /* @__PURE__ */ x("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", children: o })
+      ] })
     ] });
   }
 );
-ce.displayName = "DateTimeDisplayInput";
+le.displayName = "DateTimeDisplayInput";
 export {
-  ce as DateTimeDisplayInput
+  le as DateTimeDisplayInput
 };

package/dist/Tabs/TabsBase.js

@@ -101,24 +101,28 @@ const N = k(null), A = (y = "Tabs") => {
       D.div,
       {
         className: x(
-          "pointer-events-none absolute select-none",
+          "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 right-1 left-1 z-0 rounded-lg shadow-lg"]
+          t.orientation === "vertical" && t.isEnclosed && ["bg-tabs-enclosed-indicator z-0 rounded-lg shadow-lg"]
         ),
         initial: !1,
         animate: {
-          left: t.left,
-          top: t.isEnclosed ? t.top + t.height * 0.1 : t.top,
+          // Use x/y (translateX/translateY) for position - compositor-friendly, no reflows
+          x: t.left,
+          y: t.isEnclosed ? t.top + t.height * 0.1 : t.top,
+          // Width/height required for correct rendering: scaleX/Y would distort
+          // border-radius on enclosed variant and border widths on default variant
           width: t.width,
           height: t.isEnclosed ? t.orientation === "vertical" ? 40 : t.height * 0.8 : t.height
         },
         transition: I ? { duration: 0 } : {
-          type: "spring",
-          stiffness: 500,
-          damping: 40,
-          mass: 1
+          // Separate transition configs: spring for transforms, tween for layout
+          x: { type: "spring", stiffness: 500, damping: 40, mass: 1 },
+          y: { type: "spring", stiffness: 500, damping: 40, mass: 1 },
+          width: { type: "spring", stiffness: 500, damping: 40, mass: 1 },
+          height: { type: "spring", stiffness: 500, damping: 40, mass: 1 }
         },
         "aria-hidden": "true"
       }

package/package.json

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