@spear-ai/spectral 1.9.1 → 1.10.1

package/dist/ControlGroup/ControlGroupSelect.js

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

package/dist/ControlGroup.js

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

package/dist/DataCard/Card.js

@@ -1,14 +1,39 @@
 import "../styles/main.css";
-import { jsx as e } from "react/jsx-runtime";
-import { Slot as c } from "../primitives/slot.js";
-import { cn as d } from "../utils/twUtils.js";
+import { t as e } from "../twUtils-VNWgstKL.js";
+import { Slot as t } from "../primitives/slot.js";
 import "react";
-const o = "text-text-primary flex flex-col w-full card-effects p-3 gap-6 rounded-xl", f = ({ ...t }) => /* @__PURE__ */ e("div", { "data-slot": "card", "data-testid": "spectral-card", ...t }), C = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { className: d("@container/card-header flex items-center justify-between pb-4", t), "data-slot": "card-header", "data-testid": "spectral-card-header", ...a }), u = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { className: d("text-xl font-semibold", t), "data-slot": "card-title", "data-testid": "spectral-card-title", ...r }), x = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { className: d("justify-self-end", t), "data-slot": "card-action", "data-testid": "spectral-card-action", ...r }), v = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { className: t, "data-slot": "card-content", "data-testid": "spectral-card-content", ...a }), N = ({ asChild: t = !1, children: a, className: r, ...s }) => /* @__PURE__ */ e(t ? c : "div", { className: d(o, r), "data-slot": "card", "data-testid": "spectral-card", ...s, children: a });
-export {
-  N as Card,
-  f as CardBase,
-  v as CardContent,
-  C as CardHeader,
-  x as CardHeaderEndSlot,
-  u as CardTitle
-};
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DataCard/Card.tsx
+var r = "text-text-primary flex flex-col w-full card-effects p-3 gap-6 rounded-xl", i = ({ ...e }) => /* @__PURE__ */ n("div", {
+	"data-slot": "card",
+	"data-testid": "spectral-card",
+	...e
+}), a = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	className: e("pb-4 @container/card-header flex items-center justify-between", t),
+	"data-slot": "card-header",
+	"data-testid": "spectral-card-header",
+	...r
+}), o = ({ className: r, asChild: i = !1, ...a }) => /* @__PURE__ */ n(i ? t : "div", {
+	className: e("font-semibold text-xl", r),
+	"data-slot": "card-title",
+	"data-testid": "spectral-card-title",
+	...a
+}), s = ({ className: r, asChild: i = !1, ...a }) => /* @__PURE__ */ n(i ? t : "div", {
+	className: e("justify-self-end", r),
+	"data-slot": "card-action",
+	"data-testid": "spectral-card-action",
+	...a
+}), c = ({ className: e, ...t }) => /* @__PURE__ */ n("div", {
+	className: e,
+	"data-slot": "card-content",
+	"data-testid": "spectral-card-content",
+	...t
+}), l = ({ asChild: i = !1, children: a, className: o, ...s }) => /* @__PURE__ */ n(i ? t : "div", {
+	className: e(r, o),
+	"data-slot": "card",
+	"data-testid": "spectral-card",
+	...s,
+	children: a
+});
+//#endregion
+export { l as Card, i as CardBase, c as CardContent, a as CardHeader, s as CardHeaderEndSlot, o as CardTitle };

package/dist/DataCard.d.ts

@@ -1,5 +1,5 @@
-import { CardProps } from './Card';
 import { ReactNode } from 'react';
+import { CardProps } from './Card';
 export type DataCardProps = CardProps & {
     accentColor: string;
     cardHeaderEndSlot: ReactNode;

package/dist/DataCard.js

@@ -1,18 +1,38 @@
 import "./styles/main.css";
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { Card as o, CardHeader as p, CardTitle as n, CardContent as m } from "./DataCard/Card.js";
-import { cn as x } from "./utils/twUtils.js";
+import { t as e } from "./twUtils-VNWgstKL.js";
+import { Card as t, CardContent as n, CardHeader as r, CardTitle as i } from "./DataCard/Card.js";
 import "react";
-const C = ({ accentColor: d, cardHeaderEndSlot: e, className: r, dataDescription: s, dataValue: c, title: l, ...i }) => /* @__PURE__ */ t(o, { className: x("card-effects gap-4", r), ...i, "data-testid": "spectral-datacard", children: [
-  /* @__PURE__ */ t(p, { className: "pb-0", "data-testid": "spectral-datacard-header", children: [
-    /* @__PURE__ */ a(n, { className: "text-sm font-bold uppercase", "data-testid": "spectral-datacard-title", children: l }),
-    /* @__PURE__ */ a("div", { style: { color: d }, "data-testid": "spectral-datacard-end-slot", children: e })
-  ] }),
-  /* @__PURE__ */ a(m, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ a("div", { className: "text-4xl font-bold", "data-testid": "spectral-datacard-data-value", style: { color: d }, children: c }),
-    /* @__PURE__ */ a("div", { className: "text-data-card-description text-xs", "data-testid": "spectral-datacard-data-description", children: s })
-  ] }) })
-] });
-export {
-  C as DataCard
-};
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/DataCard/DataCard.tsx
+var s = ({ accentColor: s, cardHeaderEndSlot: c, className: l, dataDescription: u, dataValue: d, title: f, ...p }) => /* @__PURE__ */ o(t, {
+	className: e("gap-4 card-effects", l),
+	...p,
+	"data-testid": "spectral-datacard",
+	children: [/* @__PURE__ */ o(r, {
+		className: "pb-0",
+		"data-testid": "spectral-datacard-header",
+		children: [/* @__PURE__ */ a(i, {
+			className: "text-sm font-bold uppercase",
+			"data-testid": "spectral-datacard-title",
+			children: f
+		}), /* @__PURE__ */ a("div", {
+			style: { color: s },
+			"data-testid": "spectral-datacard-end-slot",
+			children: c
+		})]
+	}), /* @__PURE__ */ a(n, { children: /* @__PURE__ */ o("div", {
+		className: "gap-4 flex flex-col",
+		children: [/* @__PURE__ */ a("div", {
+			className: "text-4xl font-bold tabular-nums",
+			"data-testid": "spectral-datacard-data-value",
+			style: { color: s },
+			children: d
+		}), /* @__PURE__ */ a("div", {
+			className: "text-xs text-data-card-description",
+			"data-testid": "spectral-datacard-data-description",
+			children: u
+		})]
+	}) })]
+});
+//#endregion
+export { s as DataCard };