@spear-ai/spectral 1.8.8 → 1.9.0

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/Dialog.js

@@ -1,10 +1,10 @@
 import "./styles/main.css";
 import { jsx as o, jsxs as l } from "react/jsx-runtime";
 import { CloseIcon as m } from "./Icons/CloseIcon.js";
-import { R as p, C as i, a as f, D as u, O as x, P as b, T as h, b as v } from "./index-CmWCa9Ae.js";
+import { R as p, C as i, a as f, D as u, O as x, P as b, T as h, b as v } from "./index-pBCLb6Gr.js";
 import { cn as e } from "./utils/twUtils.js";
 import "react";
-import { R as y } from "./Combination-CQ5bXZqE.js";
+import { R as y } from "./index-6oYKCvIn.js";
 const j = ({
   isOpen: t,
   modal: a = !1,

package/dist/Drawer.js

@@ -1,7 +1,7 @@
 import "./styles/main.css";
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { SpectralProvider as f } from "./SpectralProvider.js";
-import { D as e } from "./index-D2Qxe4uK.js";
+import { D as e } from "./index-Bm1RbF6w.js";
 const u = ({ children: l, defaultOpen: d = !1, description: i, direction: o = "right", dismissible: c = !0, modal: n = !0, onOpenChange: p, open: x, size: r = "380px", title: h, trigger: m }) => {
   const a = "font-sans! fixed", w = {
     left: {

package/dist/HoverCard.js

@@ -3,10 +3,10 @@ import "./styles/main.css";
 import { jsx as i } from "react/jsx-runtime";
 import * as s from "react";
 import { createContext as I, useContext as B } from "react";
-import { e as U, c as m, P as $, u as W, a as z } from "./index-9OmOYyjJ.js";
-import { R as G, A as K, c as O, C as j, a as V } from "./index-CJKg3MVV.js";
-import { P as q, D as J } from "./index-BJ6qs9i5.js";
-import { P as T } from "./index-CtqlhLRO.js";
+import { e as U, c as m, P as $, u as W, a as z } from "./index-Dc0No4pV.js";
+import { R as G, A as K, c as O, C as j, a as V } from "./index-C_YVr64u.js";
+import { P as q, D as J } from "./index-BlHU_t18.js";
+import { P as T } from "./index-BFOf48AQ.js";
 import { cn as E } from "./utils/twUtils.js";
 var H, x = "HoverCard", [N] = z(x, [
   O