@spear-ai/spectral 1.8.9 → 1.9.1

package/dist/ControlGroup/ControlGroupSelect.js

@@ -0,0 +1,104 @@
+"use client";
+import "../styles/main.css";
+import { jsx as e, jsxs as x, Fragment as k } from "react/jsx-runtime";
+import { ControlGroup as F, useControlGroup as j, ControlGroupItem as I } from "../ControlGroup.js";
+import { Label as $ } from "../Label.js";
+import { Input as E } from "../primitives/input.js";
+import { SelectTrigger as z, SelectValue as M, Select as T, SelectContent as V, SelectItem as q } from "../primitives/select.js";
+import { cn as w } from "../utils/twUtils.js";
+import { useId as B } from "react";
+const D = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", y = "flex w-full min-w-0 flex-col gap-1.5", L = ({
+  amountStep: v,
+  ariaLabel: o,
+  captionLayout: C = "inline",
+  className: h,
+  dataTestId: i = "spectral-control-group-select",
+  disabled: l,
+  errorMessage: a,
+  inputAriaLabel: p,
+  inputPlaceholder: r,
+  maxAmount: N = 1e6,
+  minAmount: S = 0,
+  orientation: u = "horizontal",
+  selectAriaLabel: b,
+  selectOptions: G,
+  selectPlaceholder: n,
+  state: c = "default",
+  type: t = "number",
+  ...g
+}) => {
+  const d = B(), f = `${d}-amount`, s = `${d}-select`, m = C === "above";
+  return /* @__PURE__ */ e(F, { "aria-label": o, className: h, "data-testid": i, disabled: l, errorMessage: a, orientation: u, state: c, children: /* @__PURE__ */ e(
+    H,
+    {
+      amountStep: v,
+      dataTestId: i,
+      inputAccessibleName: m ? r ? void 0 : p ?? void 0 : p ?? r ?? void 0,
+      inputCaption: m ? void 0 : r,
+      inputId: f,
+      isDisabled: !!l || c === "disabled",
+      maxAmount: N,
+      minAmount: S,
+      selectCaption: m ? void 0 : n,
+      selectOptions: G,
+      selectProps: g,
+      selectTriggerAriaLabel: m ? n ? void 0 : b ?? void 0 : b ?? n ?? void 0,
+      selectTriggerId: s,
+      type: t,
+      useAboveLabels: m,
+      inputPlaceholder: r,
+      selectPlaceholder: n
+    }
+  ) });
+}, H = ({
+  amountStep: v,
+  dataTestId: o,
+  inputAccessibleName: C,
+  inputCaption: h,
+  inputId: i,
+  inputPlaceholder: l,
+  isDisabled: a,
+  maxAmount: p,
+  minAmount: r,
+  selectCaption: N,
+  selectOptions: S,
+  selectPlaceholder: u,
+  selectProps: b,
+  selectTriggerAriaLabel: G,
+  selectTriggerId: n,
+  type: c,
+  useAboveLabels: t
+}) => {
+  const { errorMessageId: g } = j(), d = /* @__PURE__ */ e(
+    E,
+    {
+      "aria-describedby": g,
+      "aria-label": C,
+      className: w(c === "number" && D, t && "rounded-none rounded-s-md"),
+      "data-testid": `${o}-input`,
+      disabled: a,
+      id: t ? i : void 0,
+      type: c === "number" ? "number" : "text",
+      placeholder: h,
+      min: r ?? 0,
+      max: p ?? 1e6,
+      step: v ?? 1
+    }
+  ), f = /* @__PURE__ */ e(z, { "aria-describedby": g, "aria-label": G, className: w(t && "rounded-none rounded-e-md"), "data-testid": `${o}-select-trigger`, disabled: a, id: t ? n : void 0, children: /* @__PURE__ */ e(M, { placeholder: N }) });
+  return /* @__PURE__ */ x(k, { children: [
+    /* @__PURE__ */ e(I, { children: t ? /* @__PURE__ */ x("div", { className: y, children: [
+      l ? /* @__PURE__ */ e($, { className: "text-text-primary", htmlFor: i, children: l }) : null,
+      d
+    ] }) : d }),
+    /* @__PURE__ */ x(T, { "data-testid": `${o}-select-root`, disabled: a, ...b, children: [
+      /* @__PURE__ */ e(I, { children: t ? /* @__PURE__ */ x("div", { className: y, children: [
+        u ? /* @__PURE__ */ e($, { className: "text-text-primary", htmlFor: n, children: u }) : null,
+        f
+      ] }) : f }),
+      /* @__PURE__ */ e(V, { children: S.map((s) => /* @__PURE__ */ e(q, { value: s.value, children: s.label }, s.value)) })
+    ] })
+  ] });
+};
+export {
+  L as ControlGroupSelect
+};

package/dist/ControlGroup.d.ts

@@ -0,0 +1,24 @@
+import { Slot } from './primitives/slot';
+import { FormFieldState } from './utils/formFieldUtils';
+import { ComponentProps } from 'react';
+interface ControlGroupContextValue {
+    errorMessageId?: string;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isLoading: boolean;
+    orientation: 'horizontal' | 'vertical';
+    state: FormFieldState;
+}
+export declare const useControlGroup: () => ControlGroupContextValue;
+export interface ControlGroupProps extends ComponentProps<'div'> {
+    disabled?: boolean;
+    errorMessage?: string | string[] | Record<string, unknown> | null;
+    id?: string;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    state?: FormFieldState;
+}
+export declare const ControlGroup: ({ className, disabled, errorMessage, id, name, orientation, state, ...props }: ControlGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlGroupItem: ({ className, ...props }: ComponentProps<typeof Slot>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ControlGroup.d.ts.map

package/dist/ControlGroup.js

@@ -0,0 +1,51 @@
+"use client";
+import "./styles/main.css";
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { Slot as C } from "./primitives/slot.js";
+import { useFormFieldId as v, useFormFieldState as b, getStateClasses as I, ErrorMessage as h, getErrorMessageId as G } from "./utils/formFieldUtils.js";
+import { cn as u } from "./utils/twUtils.js";
+import { createContext as w, useContext as F } from "react";
+const m = w(null), z = () => {
+  const r = F(m);
+  if (r === null)
+    throw new Error("useControlGroup must be used within a ControlGroup");
+  return r;
+}, D = ({ className: r, disabled: s, errorMessage: o, id: c, name: p, orientation: n = "horizontal", state: t = "default", ...f }) => {
+  const l = v(c, p), d = G(l), { isDisabled: i, isLoading: g, isInvalid: e } = b(s, t);
+  return /* @__PURE__ */ x(m.Provider, { value: { errorMessageId: e && o ? d : void 0, isDisabled: i, isInvalid: e, isLoading: g, orientation: n, state: t }, children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "data-slot": "control-group",
+        "data-orientation": n,
+        "data-state": t,
+        id: l,
+        role: "group",
+        "aria-describedby": e && o ? d : void 0,
+        className: u("group flex rounded-lg border-2 border-transparent", n === "vertical" && "flex-col", I(t), i && "pointer-events-none opacity-50", r),
+        ...f
+      }
+    ),
+    e && o && /* @__PURE__ */ a(h, { dataTestId: "spectral-control-group-error-message", id: d, message: o })
+  ] });
+}, L = ({ className: r, ...s }) => {
+  const { orientation: o } = z();
+  return /* @__PURE__ */ a(
+    C,
+    {
+      "data-slot": "control-group-item",
+      className: u(
+        "rounded-none focus-within:z-10",
+        o === "horizontal" && "-me-px h-auto first:rounded-s-md last:me-0 last:rounded-e-md",
+        o === "vertical" && "-mbe-px w-auto first:rounded-ss-md first:rounded-se-md last:mbe-0 last:rounded-ee-md last:rounded-es-md",
+        r
+      ),
+      ...s
+    }
+  );
+};
+export {
+  D as ControlGroup,
+  L as ControlGroupItem,
+  z as useControlGroup
+};

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -15,8 +15,8 @@ const v = {
   hour24: { type: "hour", min: 0, max: 23, length: 2 },
   minute: { type: "minute", min: 0, max: 59, length: 2 },
   period: { type: "period", min: 0, max: 1, length: 2 }
-}, ue = (k, e) => k === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(k) ? 30 : 31, ce = ({ ariaLabel: k, config: e, disabled: y, onLeftFocus: N, onRightFocus: m, onValueChange: o, periodLabels: h, value: s }) => {
-  const u = E(null), a = E(""), c = E(!1), I = D(() => {
+}, ue = (k, e) => k === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(k) ? 30 : 31, ce = ({ ariaLabel: k, config: e, disabled: y, onLeftFocus: I, onRightFocus: m, onValueChange: u, periodLabels: h, value: s }) => {
+  const o = E(null), a = E(""), c = E(!1), M = D(() => {
     switch (e.type) {
       case "month":
         return "MM";
@@ -33,18 +33,18 @@ const v = {
       default:
         return "––";
     }
-  }, [e.type, e.max, h]), d = D(() => s === void 0 ? I : e.type === "period" ? (s === 0 ? h?.am ?? "am" : h?.pm ?? "pm").toLowerCase() : s.toString().padStart(e.length, "0"), [s, e, h, I]);
+  }, [e.type, e.max, h]), d = D(() => s === void 0 ? M : e.type === "period" ? (s === 0 ? h?.am ?? "am" : h?.pm ?? "pm").toLowerCase() : s.toString().padStart(e.length, "0"), [s, e, h, M]);
   oe(() => {
-    u.current && !c.current && (u.current.value = d);
+    o.current && !c.current && (o.current.value = d);
   }, [d]);
   const x = w(() => {
     const t = a.current;
     if (t) {
       let r = parseInt(t, 10);
-      isNaN(r) || (r = Math.max(e.min, Math.min(e.max, r)), o(r));
+      isNaN(r) || (r = Math.max(e.min, Math.min(e.max, r)), u(r));
     }
-    a.current = "", c.current = !1, u.current && (u.current.value = d);
-  }, [e.min, e.max, d, o]), R = w(
+    a.current = "", c.current = !1, o.current && (o.current.value = d);
+  }, [e.min, e.max, d, u]), R = w(
     (t) => {
       if (!y) {
         if (t.key === "Tab") {
@@ -56,31 +56,31 @@ const v = {
           return;
         }
         if (t.key === "ArrowLeft") {
-          t.preventDefault(), x(), N?.();
+          t.preventDefault(), x(), I?.();
           return;
         }
         if (e.type === "period") {
-          t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ? o(s === 0 ? 1 : 0) : t.key.toLowerCase() === "a" ? o(0) : t.key.toLowerCase() === "p" && o(1);
+          t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ? u(s === 0 ? 1 : 0) : t.key.toLowerCase() === "a" ? u(0) : t.key.toLowerCase() === "p" && u(1);
           return;
         }
         if (t.key === "ArrowUp") {
           t.preventDefault(), a.current = "", c.current = !1;
           const r = s === void 0 || s >= e.max ? e.min : s + 1;
-          o(r);
+          u(r);
           return;
         }
         if (t.key === "ArrowDown") {
           t.preventDefault(), a.current = "", c.current = !1;
           const r = s === void 0 || s <= e.min ? e.max : s - 1;
-          o(r);
+          u(r);
           return;
         }
         if (t.key === "Home") {
-          t.preventDefault(), a.current = "", c.current = !1, o(e.min);
+          t.preventDefault(), a.current = "", c.current = !1, u(e.min);
           return;
         }
         if (t.key === "End") {
-          t.preventDefault(), a.current = "", c.current = !1, o(e.max);
+          t.preventDefault(), a.current = "", c.current = !1, u(e.max);
           return;
         }
         if (t.key >= "0" && t.key <= "9") {
@@ -89,38 +89,39 @@ const v = {
           if (e.length === 2)
             if (r.length >= 2) {
               const L = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", c.current = !1, o(L), m?.();
+              a.current = "", c.current = !1, u(L), m?.();
             } else if (l * 10 > e.max) {
               const L = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", c.current = !1, o(L), m?.();
+              a.current = "", c.current = !1, u(L), m?.();
             } else
-              a.current = r, c.current = !0, u.current && (u.current.value = r);
+              a.current = r, c.current = !0, o.current && (o.current.value = r);
           else if (e.length === 4)
             if (r.length >= 4) {
               const L = Math.max(e.min, Math.min(e.max, l));
-              a.current = "", c.current = !1, o(L), m?.();
+              a.current = "", c.current = !1, u(L), m?.();
             } else
-              a.current = r, c.current = !0, u.current && (u.current.value = r);
+              a.current = r, c.current = !0, o.current && (o.current.value = r);
           return;
         }
-        if (t.key === "Backspace" && (t.preventDefault(), a.current)) {
-          const r = a.current.slice(0, -1);
-          a.current = r, c.current = r.length > 0, u.current && (u.current.value = r || d);
-        }
+        if (t.key === "Backspace")
+          if (t.preventDefault(), a.current) {
+            const r = a.current.slice(0, -1);
+            a.current = r, c.current = r.length > 0, o.current && (o.current.value = r || d);
+          } else s !== void 0 && (a.current = "", c.current = !0, u(e.min), o.current && (o.current.value = M));
       }
     },
-    [y, e, s, d, o, N, m, x]
+    [y, e, s, d, M, u, I, m, x]
   ), T = w(() => {
     a.current && x();
-  }, [x]), g = w(() => {
+  }, [x]), S = w(() => {
     c.current || (a.current = "");
-    const t = u.current;
+    const t = o.current;
     if (t) {
       const r = t.value.length;
       t.setSelectionRange(r, r);
     }
   }, []), Y = w(() => {
-    u.current && (u.current.value = a.current || d);
+    o.current && (o.current.value = a.current || d);
   }, [d]), H = w(() => {
     switch (e.type) {
       case "year":
@@ -138,7 +139,7 @@ const v = {
       default:
         return { width: 24, paddingLeft: 0 };
     }
-  }, [e.type]), p = D(() => H(), [H]), M = D(() => s === void 0, [s]);
+  }, [e.type]), p = D(() => H(), [H]), g = D(() => s === void 0, [s]);
   return /* @__PURE__ */ b(
     "input",
     {
@@ -152,7 +153,7 @@ const v = {
         "focus:bg-bg-tertiary focus:text-text-primary focus:ring-accent focus:ring-1",
         "hover:bg-bg-secondary",
         y && "cursor-not-allowed opacity-50",
-        M && "text-text-placeholder text-sm"
+        g && "text-text-placeholder text-sm"
       ),
       "data-segment": e.type,
       defaultValue: d,
@@ -160,9 +161,9 @@ const v = {
       inputMode: "numeric",
       onBlur: T,
       onChange: Y,
-      onFocus: g,
+      onFocus: S,
       onKeyDown: R,
-      ref: u,
+      ref: o,
       role: "spinbutton",
       style: p,
       tabIndex: y ? -1 : 0
@@ -173,21 +174,21 @@ const v = {
     className: k,
     defaultValue: e,
     disabled: y,
-    endIcon: N,
+    endIcon: I,
     hourFormat: m = "12",
-    id: o,
+    id: u,
     label: h,
     locale: s,
-    onChange: u,
+    onChange: o,
     showTime: a = !0,
     state: c = "default",
-    value: I,
+    value: M,
     // Legacy props (deprecated)
     date: d,
     onDateChange: x,
     ...R
   }, T) => {
-    const g = E(null), Y = I ?? d, H = u ?? x, [p, M] = ae({
+    const S = E(null), Y = M ?? d, H = o ?? x, [p, g] = ae({
       defaultValue: e,
       onChange: H,
       value: Y
@@ -207,21 +208,21 @@ const v = {
       (i) => {
         const n = { ...l, ...i };
         if (n.month === void 0 && n.day === void 0 && n.year === void 0) {
-          M(void 0);
+          g(void 0);
           return;
         }
-        const f = /* @__PURE__ */ new Date(), A = (n.month ?? f.getMonth() + 1) - 1, P = n.day ?? f.getDate(), S = n.year ?? f.getFullYear(), j = ue(A + 1, S), G = Math.min(P, j), 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, C = !W && X;
-        let B;
+        const f = /* @__PURE__ */ new Date(), A = (n.month ?? f.getMonth() + 1) - 1, P = n.day ?? f.getDate(), N = n.year ?? f.getFullYear(), j = ue(A + 1, N), G = Math.min(P, j), 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, B = !W && X;
+        let C;
         if (m === "24")
-          B = C ? 0 : n.hour ?? 0;
+          C = B ? 0 : n.hour ?? 0;
         else {
-          const F = C ? 12 : n.hour ?? 12, V = C ? 1 : n.period ?? 0, K = F, J = V;
-          K === 12 ? B = J === 0 ? 0 : 12 : B = J === 0 ? K : K + 12;
+          const F = B ? 12 : n.hour ?? 12, V = B ? 1 : n.period ?? 0, K = F, J = V;
+          K === 12 ? C = J === 0 ? 0 : 12 : C = J === 0 ? K : K + 12;
         }
-        const Z = C ? 0 : n.minute ?? 0, $ = new Date(S, A, G, B, Z, 0, 0);
-        M($);
+        const Z = B ? 0 : n.minute ?? 0, $ = new Date(N, A, G, C, Z, 0, 0);
+        g($);
       },
-      [l, m, M]
+      [l, m, g]
     ), q = D(() => {
       const i = [
         { key: "month", config: v.month, ariaLabel: "Month" },
@@ -239,15 +240,15 @@ const v = {
       ];
       return [...i, ...n];
     }, [a, m, r]), z = w((i) => {
-      g.current?.querySelectorAll("[role='spinbutton']")[i]?.focus();
+      S.current?.querySelectorAll("[role='spinbutton']")[i]?.focus();
     }, []), Q = U(ie(c, k));
     return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5", children: [
-      h && /* @__PURE__ */ b(ne, { className: "text-text-primary text-sm font-medium", htmlFor: o, children: h }),
-      /* @__PURE__ */ O("div", { className: U(Q, "relative", (y ?? c === "disabled") && "cursor-not-allowed", k), "data-slot": "datetime-display-input", id: o ?? "datetime-display-input", ref: T ?? g, ...R, children: [
-        /* @__PURE__ */ b("div", { className: "flex items-center", ref: g, children: q.map((i, n) => {
-          const f = ["month", "day", "year"].includes(i.key), A = ["hour", "minute", "period"].includes(i.key), P = i.key === "year", S = i.key === "hour", j = y ?? (A && !L);
+      h && /* @__PURE__ */ b(ne, { className: "text-text-primary text-sm font-medium", htmlFor: u, children: h }),
+      /* @__PURE__ */ O("div", { className: U(Q, "relative", (y ?? c === "disabled") && "cursor-not-allowed", k), "data-slot": "datetime-display-input", id: u ?? "datetime-display-input", ref: T ?? S, ...R, children: [
+        /* @__PURE__ */ b("div", { className: "flex items-center", ref: S, children: q.map((i, n) => {
+          const f = ["month", "day", "year"].includes(i.key), A = ["hour", "minute", "period"].includes(i.key), P = i.key === "year", N = i.key === "hour", j = y ?? (A && !L);
           return /* @__PURE__ */ O("span", { className: "flex items-center", children: [
-            S && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
+            N && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
             /* @__PURE__ */ b(
               ce,
               {
@@ -262,10 +263,10 @@ const v = {
               }
             ),
             f && !P && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: "/" }),
-            S && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-inherit select-none", children: ":" })
+            N && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-inherit select-none", children: ":" })
           ] }, i.key);
         }) }),
-        N
+        I
       ] })
     ] });
   }

package/dist/DateTimePicker/DateTimeInput.d.ts

@@ -1,6 +1,6 @@
 import { Period, TimePickerTranslations, TimePickerType } from './DateTimeUtils';
-import { ComponentProps } from 'react';
-export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange'> {
+import { ComponentProps, Ref } from 'react';
+export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onChange' | 'type'> {
     date: Date | undefined;
     /** Locale for number formatting */
     locale?: string;
@@ -13,7 +13,9 @@ export interface DateTimeInputProps extends Omit<ComponentProps<'input'>, 'onCha
     translations?: TimePickerTranslations;
 }
 export declare const DateTimeInput: {
-    ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, setDate, translations, ...props }: DateTimeInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, date, disabled, id, locale, name, onKeyDown, onLeftFocus, onRightFocus, period, picker, ref, setDate, translations, ...props }: DateTimeInputProps & {
+        ref?: Ref<HTMLInputElement>;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=DateTimeInput.d.ts.map