@spear-ai/spectral 1.10.0 → 1.10.2

package/dist/.js

@@ -92,21 +92,22 @@ import { SpectralProvider as Ke } from "./SpectralProvider.js";
 import { Drawer as qe } from "./Drawer.js";
 import { n as Je, r as Ye, t as Xe } from "./HoverCard-CYDsIiVK.js";
 import { Input as Ze } from "./Input.js";
-import { t as Qe } from "./InputOTP-XUWW9xcI.js";
-import { Kbd as $e, KbdGroup as et } from "./Kbd.js";
-import { MultiSelect as tt } from "./MultiSelect.js";
-import { RadioButtonGroup as nt, RadioButtonGroupItem as rt } from "./RadioButtonGroup.js";
-import { RadioButton as it } from "./RadioButton.js";
-import { n as at, t as ot } from "./RadioGroup-w_q6RGEK.js";
-import { Select as st } from "./Select.js";
-import { Skeleton as ct } from "./Skeleton.js";
-import { t as lt } from "./Slider-BzzZT3Zm.js";
-import { t as ut } from "./Switch-CVzRJ-0n.js";
-import { Tabs as dt } from "./Tabs.js";
-import { Textarea as ft } from "./Textarea.js";
-import { n as pt, t as mt } from "./Toast-9zqXxKKO.js";
-import { Toggle as ht } from "./Toggle.js";
-import { ToggleGroup as gt, ToggleGroupItem as _t } from "./ToggleGroup.js";
-import { i as vt, n as yt, t as bt } from "./Tooltip-D1K8kY1y.js";
-import { Tray as xt } from "./Tray.js";
-export { ve as Accordion, be as Alert, n as AnalyzeIcon, r as AnnotationsIcon, i as ApprovedIcon, a as ArrowDownIcon, o as ArrowUpIcon, xe as Avatar, Se as Badge, s as BoxToolIcon, Ce as Button, Te as ButtonGroup, Ee as ButtonGroupItem, De as ButtonGroupSeparator, Oe as ButtonIcon, c as CalendarIcon, l as CheckCircleIcon, u as CheckSquareIcon, Ae as Checkbox, d as CheckmarkIcon, f as ChevronDownIcon, p as ChevronUpIcon, m as ClockIcon, h as CloseCircleIcon, g as CloseIcon, Re as Combobox, ze as ControlGroupSelect, _ as DashboardIcon, Be as DataCard, v as DatabaseIcon, We as DateTimePicker, y as DeleteIcon, Ge as Dialog, qe as Drawer, b as DurationIcon, x as EditIcon, S as EmailIcon, C as EraserIcon, w as ErrorIcon, T as EyeClosedIcon, E as EyeClosedIcon2, D as EyeOpenIcon, O as FileDownloadIcon, k as GoToFirstIcon, A as GoToLastIcon, j as HarmonicCursorsIcon, Xe as HoverCard, Je as HoverCardContent, Ye as HoverCardTrigger, e as IconBase, M as InfoIcon, Ze as Input, Me as InputGroup, Ne as InputGroupAddon, Pe as InputGroupButton, Fe as InputGroupInput, Ie as InputGroupText, Le as InputGroupTextarea, Qe as InputOTP, $e as Kbd, et as KbdGroup, N as KeyboardIcon, je as Label, P as LabelIcon, F as LassoIcon, I as LineToolIcon, L as LiveViewIcon, R as LoaderIcon, z as LocationIcon, B as LogoutIcon, V as MeasureIcon, H as MessagesIcon, U as MetadataIcon, W as MinusIcon, tt as MultiSelect, G as OntologyIcon, K as PanelIconClose, q as PanelIconOpen, J as PlayIcon, Y as PlusIcon, X as PolygonIcon, Ve as Popover, He as PopoverContent, Ue as PopoverTrigger, Z as ProgressCheckIcon, it as RadioButton, nt as RadioButtonGroup, rt as RadioButtonGroupItem, ot as RadioGroup, at as RadioGroupItem, Q as ResetIcon, $ as ReviewedIcon, ee as ScissorsIcon, te as SearchIcon, st as Select, we as Separator, ne as SettingsIcon, ct as Skeleton, lt as Slider, re as SortAscendingIcon, ie as SortAtoZIcon, ae as SortDescendingIcon, oe as SortZtoAIcon, Ke as SpectralProvider, se as StackIcon, ce as StarIcon, t as SvgIdContext, ut as Switch, dt as Tabs, ft as Textarea, mt as Toast, ht as Toggle, gt as ToggleGroup, _t as ToggleGroupItem, bt as Tooltip, yt as TooltipContent, vt as TooltipTrigger, le as TrashIcon, xt as Tray, ue as UndoIcon, de as User2Icon, fe as UserIcon, pe as WarningIcon, me as ZoomAllIcon, he as ZoomXIcon, ge as ZoomYIcon, ye as cn, pt as toast, _e as useAccordionAutoScroll, ke as useControllableState };
+import { InputNumeric as Qe } from "./InputNumeric.js";
+import { t as $e } from "./InputOTP-cVn5Bzyp.js";
+import { Kbd as et, KbdGroup as tt } from "./Kbd.js";
+import { MultiSelect as nt } from "./MultiSelect.js";
+import { RadioButtonGroup as rt, RadioButtonGroupItem as it } from "./RadioButtonGroup.js";
+import { RadioButton as at } from "./RadioButton.js";
+import { n as ot, t as st } from "./RadioGroup-w_q6RGEK.js";
+import { Select as ct } from "./Select.js";
+import { Skeleton as lt } from "./Skeleton.js";
+import { t as ut } from "./Slider-BzzZT3Zm.js";
+import { t as dt } from "./Switch-CVzRJ-0n.js";
+import { Tabs as ft } from "./Tabs.js";
+import { Textarea as pt } from "./Textarea.js";
+import { n as mt, t as ht } from "./Toast-9zqXxKKO.js";
+import { Toggle as gt } from "./Toggle.js";
+import { ToggleGroup as _t, ToggleGroupItem as vt } from "./ToggleGroup.js";
+import { i as yt, n as bt, t as xt } from "./Tooltip-D1K8kY1y.js";
+import { Tray as St } from "./Tray.js";
+export { ve as Accordion, be as Alert, n as AnalyzeIcon, r as AnnotationsIcon, i as ApprovedIcon, a as ArrowDownIcon, o as ArrowUpIcon, xe as Avatar, Se as Badge, s as BoxToolIcon, Ce as Button, Te as ButtonGroup, Ee as ButtonGroupItem, De as ButtonGroupSeparator, Oe as ButtonIcon, c as CalendarIcon, l as CheckCircleIcon, u as CheckSquareIcon, Ae as Checkbox, d as CheckmarkIcon, f as ChevronDownIcon, p as ChevronUpIcon, m as ClockIcon, h as CloseCircleIcon, g as CloseIcon, Re as Combobox, ze as ControlGroupSelect, _ as DashboardIcon, Be as DataCard, v as DatabaseIcon, We as DateTimePicker, y as DeleteIcon, Ge as Dialog, qe as Drawer, b as DurationIcon, x as EditIcon, S as EmailIcon, C as EraserIcon, w as ErrorIcon, T as EyeClosedIcon, E as EyeClosedIcon2, D as EyeOpenIcon, O as FileDownloadIcon, k as GoToFirstIcon, A as GoToLastIcon, j as HarmonicCursorsIcon, Xe as HoverCard, Je as HoverCardContent, Ye as HoverCardTrigger, e as IconBase, M as InfoIcon, Ze as Input, Me as InputGroup, Ne as InputGroupAddon, Pe as InputGroupButton, Fe as InputGroupInput, Ie as InputGroupText, Le as InputGroupTextarea, Qe as InputNumeric, $e as InputOTP, et as Kbd, tt as KbdGroup, N as KeyboardIcon, je as Label, P as LabelIcon, F as LassoIcon, I as LineToolIcon, L as LiveViewIcon, R as LoaderIcon, z as LocationIcon, B as LogoutIcon, V as MeasureIcon, H as MessagesIcon, U as MetadataIcon, W as MinusIcon, nt as MultiSelect, G as OntologyIcon, K as PanelIconClose, q as PanelIconOpen, J as PlayIcon, Y as PlusIcon, X as PolygonIcon, Ve as Popover, He as PopoverContent, Ue as PopoverTrigger, Z as ProgressCheckIcon, at as RadioButton, rt as RadioButtonGroup, it as RadioButtonGroupItem, st as RadioGroup, ot as RadioGroupItem, Q as ResetIcon, $ as ReviewedIcon, ee as ScissorsIcon, te as SearchIcon, ct as Select, we as Separator, ne as SettingsIcon, lt as Skeleton, ut as Slider, re as SortAscendingIcon, ie as SortAtoZIcon, ae as SortDescendingIcon, oe as SortZtoAIcon, Ke as SpectralProvider, se as StackIcon, ce as StarIcon, t as SvgIdContext, dt as Switch, ft as Tabs, pt as Textarea, ht as Toast, gt as Toggle, _t as ToggleGroup, vt as ToggleGroupItem, xt as Tooltip, bt as TooltipContent, yt as TooltipTrigger, le as TrashIcon, St as Tray, ue as UndoIcon, de as User2Icon, fe as UserIcon, pe as WarningIcon, me as ZoomAllIcon, he as ZoomXIcon, ge as ZoomYIcon, ye as cn, mt as toast, _e as useAccordionAutoScroll, ke as useControllableState };

package/dist/ControlGroup/ControlGroupSelect.js

@@ -1,88 +1,111 @@
 "use client";
 import "../styles/main.css";
 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";
+import { getStateClasses as t } from "../utils/formFieldUtils.js";
+import { Label as n } from "../Label.js";
+import { Input as r } from "../primitives/input.js";
+import { Select as i, SelectContent as a, SelectItem as o, SelectTrigger as s, SelectValue as c } from "../primitives/select.js";
+import { ControlGroup as l, ControlGroupItem as u, useControlGroup as d } from "../ControlGroup.js";
+import { useId as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } 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,
+var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", _ = "Amount", v = "Select an option", y = "flex w-full min-w-0 flex-col gap-1.5", b = "!h-12 min-h-12 !border-2 border-input-border bg-input-bg text-base text-input-text transition duration-200 placeholder:text-input-text-placeholder hover:border-input-border--hover focus:border-input-border--focus focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border--focus disabled:pointer-events-none disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:text-input-text--disabled", x = (e, t = 0) => {
+	let n = e?.trim();
+	if (n) return `${Math.max(n.length + t, 8)}ch`;
+}, S = (e, t) => {
+	let n = e?.trim();
+	return n && n.length > 0 ? n : t;
+}, C = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, inputAriaLabel: s, inputPlaceholder: c, maxAmount: u = 1e6, minAmount: d = 0, orientation: p = "horizontal", selectAriaLabel: h, selectOptions: g, selectPlaceholder: y, state: b = "default", type: C = "number", ...T }) => {
+	let E = f(), D = `${E}-amount`, O = `${E}-select`, k = `${D}-label`, A = `${O}-label`, j = n === "above", M = j ? void 0 : c, N = j ? void 0 : y, P = S(c, _), F = S(y, v), I = s ?? (j ? void 0 : P), L = h ?? (j ? void 0 : F), R = x(c, 3), z = x(y, 5), B = t ?? `${P} and ${F}`, V = !!a || b === "disabled";
+	return /* @__PURE__ */ m(l, {
+		"aria-label": B,
 		className: r,
 		"data-testid": i,
 		disabled: a,
 		errorMessage: o,
-		orientation: m,
-		state: y,
-		children: /* @__PURE__ */ p(v, {
+		orientation: p,
+		state: b,
+		children: /* @__PURE__ */ m(w, {
 			amountStep: e,
 			dataTestId: i,
-			inputAccessibleName: O,
-			inputCaption: E,
-			inputId: C,
-			isDisabled: A,
+			inputAccessibleName: I,
+			inputCaption: M,
+			inputId: D,
+			inputLabelId: k,
+			inputLabelText: P,
+			inputMinWidth: R,
+			isDisabled: V,
 			maxAmount: u,
-			minAmount: f,
-			selectCaption: D,
+			minAmount: d,
+			selectCaption: N,
 			selectOptions: g,
-			selectProps: x,
-			selectTriggerAriaLabel: k,
-			selectTriggerId: w,
-			type: b,
-			useAboveLabels: T,
-			inputPlaceholder: l,
-			selectPlaceholder: _
+			selectLabelId: A,
+			selectLabelText: F,
+			selectProps: T,
+			selectTriggerAriaLabel: L,
+			selectTriggerId: O,
+			selectTriggerMinWidth: z,
+			type: C,
+			useAboveLabels: j
 		})
 	});
-}, 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,
+}, w = ({ amountStep: l, dataTestId: f, inputAccessibleName: _, inputCaption: v, inputId: x, inputLabelId: S, inputLabelText: C, inputMinWidth: w, isDisabled: T, maxAmount: E, minAmount: D, selectCaption: O, selectLabelId: k, selectLabelText: A, selectOptions: j, selectProps: M, selectTriggerAriaLabel: N, selectTriggerId: P, selectTriggerMinWidth: F, type: I, useAboveLabels: L }) => {
+	let { errorMessageId: R, orientation: z, state: B } = d(), V = z === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", H = z === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", U = z === "horizontal" ? "me-0" : "mbe-0", W = z === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", G = /* @__PURE__ */ m(r, {
+		"aria-describedby": R,
 		"aria-label": _,
-		className: e(A === "number" && h, j && "rounded-s-md rounded-none"),
-		"data-testid": `${d}-input`,
-		disabled: x,
-		id: j ? y : void 0,
-		type: A === "number" ? "number" : "text",
+		"aria-labelledby": L ? S : void 0,
+		className: e(b, V, t(B), I === "number" && g, I === "number" && "tabular-nums"),
+		"data-testid": `${f}-input`,
+		disabled: T,
+		id: L ? x : void 0,
+		type: I === "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 })
+		style: w ? { minWidth: w } : void 0,
+		min: D ?? 0,
+		max: E ?? 1e6,
+		step: l ?? 1
+	}), K = /* @__PURE__ */ m(s, {
+		"aria-describedby": R,
+		"aria-label": N,
+		"aria-labelledby": L ? k : void 0,
+		className: e(b, H, "px-4 w-full justify-between focus-visible:ring-0", t(B)),
+		"data-testid": `${f}-select-trigger`,
+		disabled: T,
+		id: L ? P : void 0,
+		style: F ? { minWidth: F } : void 0,
+		children: /* @__PURE__ */ m(c, { placeholder: O })
 	});
-	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, {
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(u, {
+		className: L ? U : void 0,
+		children: L ? /* @__PURE__ */ h("div", {
+			className: y,
+			children: [/* @__PURE__ */ m(n, {
 				className: "text-text-primary",
-				htmlFor: k,
-				children: E
-			}) : null, P]
-		}) : P }), /* @__PURE__ */ p(i, { children: T.map((e) => /* @__PURE__ */ p(a, {
+				htmlFor: x,
+				id: S,
+				children: C
+			}), G]
+		}) : G
+	}), /* @__PURE__ */ h(i, {
+		"data-testid": `${f}-select-root`,
+		disabled: T,
+		...M,
+		children: [/* @__PURE__ */ m(u, {
+			className: L ? W : void 0,
+			children: L ? /* @__PURE__ */ h("div", {
+				className: y,
+				children: [/* @__PURE__ */ m(n, {
+					className: "text-text-primary",
+					htmlFor: P,
+					id: k,
+					children: A
+				}), K]
+			}) : K
+		}), /* @__PURE__ */ m(a, { children: j.map((e) => /* @__PURE__ */ m(o, {
 			value: e.value,
 			children: e.label
 		}, e.value)) })]
 	})] });
 };
 //#endregion
-export { _ as ControlGroupSelect };
+export { C as ControlGroupSelect };

package/dist/ControlGroup.js

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

package/dist/DataCard.js

@@ -23,7 +23,7 @@ var s = ({ accentColor: s, cardHeaderEndSlot: c, className: l, dataDescription:
 	}), /* @__PURE__ */ a(n, { children: /* @__PURE__ */ o("div", {
 		className: "gap-4 flex flex-col",
 		children: [/* @__PURE__ */ a("div", {
-			className: "text-4xl font-bold",
+			className: "text-4xl font-bold tabular-nums",
 			"data-testid": "spectral-datacard-data-value",
 			style: { color: s },
 			children: d

package/dist/Input.js

@@ -5,19 +5,19 @@ import { CloseCircleIcon as t } from "./Icons/CloseCircleIcon.js";
 import { ErrorIcon as n } from "./Icons/ErrorIcon.js";
 import { EyeClosedIcon as r } from "./Icons/EyeClosedIcon.js";
 import { EyeOpenIcon as i } from "./Icons/EyeOpenIcon.js";
-import { LoaderIcon as ee } from "./Icons/LoaderIcon.js";
-import { t as a } from "./twUtils-VNWgstKL.js";
-import { ErrorMessage as o, getAriaProps as s, getFormFieldCSSProperties as c, getInputClasses as l, useFormFieldId as u, useFormFieldState as d } from "./utils/formFieldUtils.js";
-import { Label as f } from "./Label.js";
-import { useClearOnFocus as te, usePasswordVisibility as ne, usePrefixWidth as p } from "./Input/InputUtils.js";
-import { useCallback as m, useRef as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { LoaderIcon as a } from "./Icons/LoaderIcon.js";
+import { t as o } from "./twUtils-VNWgstKL.js";
+import { ErrorMessage as s, getAriaProps as c, getFormFieldCSSProperties as l, getInputClasses as u, useFormFieldId as d, useFormFieldState as f } from "./utils/formFieldUtils.js";
+import { Label as ee } from "./Label.js";
+import { useClearOnFocus as te, usePasswordVisibility as p, usePrefixWidth as m } from "./Input/InputUtils.js";
+import { useCallback as h, useRef as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Input/Input.tsx
-var v = (...e) => (t) => {
+var y = (...e) => (t) => {
 	e.forEach((e) => {
 		e && (typeof e == "function" ? e(t) : e.current = t);
 	});
-}, y = (e) => ({
+}, ne = (e) => ({
 	date: "off",
 	email: "email",
 	number: "off",
@@ -27,81 +27,81 @@ var v = (...e) => (t) => {
 	url: "url",
 	"datetime-local": "off"
 })[e] || "off", b = ({ className: b, clearOnFocus: x = !1, disabled: S, endIcon: C, errorMessage: w, id: re, label: T, labelClassName: E, name: D, onBlur: O, onChange: k, onFocus: A, placeholder: j, prefix: M, ref: N, required: P, showClearButton: F = !1, startIcon: I, state: L = "default", suppressHydrationWarning: R = !0, type: z = "text", value: B = "", "aria-label": V, "aria-describedby": H, ...U }) => {
-	let W = u(re, D), G = `${W}-error`, { isDisabled: K, isLoading: q, isInvalid: J } = d(S, L), Y = s(L, H, P, G), X = h(null), ie = v(N, X), { isVisible: Z, toggleVisibility: ae, inputType: oe } = ne(), { prefixWidth: se, prefixRef: ce } = p(M), { handleFocus: Q } = te(x, k ? (e) => k(e.target.value) : void 0), le = m((e) => {
+	let W = d(re, D), G = `${W}-error`, { isDisabled: K, isLoading: q, isInvalid: J } = f(S, L), Y = c(L, H, P, G), X = g(null), ie = y(N, X), { isVisible: Z, toggleVisibility: ae, inputType: oe } = p(), { prefixWidth: se, prefixRef: ce } = m(M), { handleFocus: Q } = te(x, k ? (e) => k(e.target.value) : void 0), le = h((e) => {
 		O?.(e);
-	}, [O]), ue = m((e) => {
+	}, [O]), ue = h((e) => {
 		Q(e, A);
-	}, [Q, A]), de = m((e) => {
+	}, [Q, A]), de = h((e) => {
 		let t = e.target.value;
 		k?.(t);
-	}, [k]), fe = m(() => {
+	}, [k]), fe = h(() => {
 		let e = X.current;
 		e && (e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
 	}, []), $ = F && B.length > 0, pe = () => {
-		let a = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", o = {
-			password: () => /* @__PURE__ */ g("button", {
+		let o = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", s = {
+			password: () => /* @__PURE__ */ _("button", {
 				"aria-controls": W,
 				"aria-label": Z ? `Hide ${T ?? "password"}` : `Show ${T ?? "password"}`,
 				"aria-pressed": Z,
-				className: a,
+				className: o,
 				"data-testid": "spectral-input-password-toggle",
 				onClick: ae,
 				type: "button",
-				children: g(Z ? r : i, { size: 22 })
+				children: _(Z ? r : i, { size: 22 })
 			}),
-			clear: () => /* @__PURE__ */ g("button", {
+			clear: () => /* @__PURE__ */ _("button", {
 				"aria-label": String(`Clear ${T ?? "input"}`),
-				className: a,
+				className: o,
 				"data-testid": "spectral-input-clear-button",
 				onClick: fe,
 				type: "button",
-				children: /* @__PURE__ */ g(t, { size: 24 })
+				children: /* @__PURE__ */ _(t, { size: 24 })
 			}),
-			loading: () => /* @__PURE__ */ g("div", {
+			loading: () => /* @__PURE__ */ _("div", {
 				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
 				"data-testid": "spectral-input-loading-icon",
-				children: /* @__PURE__ */ g(ee, { size: 24 })
+				children: /* @__PURE__ */ _(a, { size: 24 })
 			}),
-			error: () => /* @__PURE__ */ g("div", {
+			error: () => /* @__PURE__ */ _("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
 				"data-testid": "spectral-input-error-icon",
-				children: /* @__PURE__ */ g(n, { size: 24 })
+				children: /* @__PURE__ */ _(n, { size: 24 })
 			}),
-			success: () => /* @__PURE__ */ g("div", {
+			success: () => /* @__PURE__ */ _("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-success-400",
 				"data-testid": "spectral-input-success-icon",
-				children: /* @__PURE__ */ g(e, { size: 24 })
+				children: /* @__PURE__ */ _(e, { size: 24 })
 			})
 		};
-		return C ? /* @__PURE__ */ g("div", {
+		return C ? /* @__PURE__ */ _("div", {
 			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
 			children: C
-		}) : z === "password" ? o.password() : $ ? o.clear() : q ? o.loading() : L === "success" ? o.success() : L === "error" ? o.error() : null;
-	}, me = () => I || null, he = a(l(L, b), "[text-indent:var(--prefix-width)]", $ && "pr-10"), ge = a("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
-	return /* @__PURE__ */ _("div", {
+		}) : z === "password" ? s.password() : $ ? s.clear() : q ? s.loading() : L === "success" ? s.success() : L === "error" ? s.error() : null;
+	}, me = () => I || null, he = z === "number" || z === "date" || z === "datetime-local", ge = o(u(L, b), "[text-indent:var(--prefix-width)]", $ && "pr-10", he && "tabular-nums"), _e = o("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
+	return /* @__PURE__ */ v("div", {
 		className: "space-y-1.5 w-full",
 		"data-testid": "spectral-input-container",
-		children: [T && /* @__PURE__ */ g(f, {
-			className: a("mb-2 block", E, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
+		children: [T && /* @__PURE__ */ _(ee, {
+			className: o("mb-2 block", E, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
 			"data-testid": "spectral-input-label",
 			htmlFor: W,
 			children: T
-		}), /* @__PURE__ */ _("div", {
+		}), /* @__PURE__ */ v("div", {
 			className: "relative",
 			"data-testid": "spectral-input-wrapper",
-			children: [/* @__PURE__ */ _("div", {
+			children: [/* @__PURE__ */ v("div", {
 				className: "relative",
 				children: [
 					me(),
-					M && /* @__PURE__ */ g("span", {
+					M && /* @__PURE__ */ _("span", {
 						ref: ce,
-						className: ge,
+						className: _e,
 						children: M
 					}),
-					/* @__PURE__ */ g("input", {
+					/* @__PURE__ */ _("input", {
 						"aria-label": V ?? T,
-						autoComplete: y(z),
-						className: he,
+						autoComplete: ne(z),
+						className: ge,
 						"data-state": L,
 						"data-testid": "spectral-input",
 						disabled: K,
@@ -113,7 +113,7 @@ var v = (...e) => (t) => {
 						placeholder: j ?? T,
 						ref: ie,
 						required: P,
-						style: c({ "--prefix-width": M ? `${se}px` : "0" }),
+						style: l({ "--prefix-width": M ? `${se}px` : "0" }),
 						suppressHydrationWarning: R,
 						type: z === "password" ? oe : z,
 						value: B,
@@ -122,7 +122,7 @@ var v = (...e) => (t) => {
 					}),
 					pe()
 				]
-			}), J && w && /* @__PURE__ */ g(o, {
+			}), J && w && /* @__PURE__ */ _(s, {
 				dataTestId: "spectral-input-error-message",
 				id: G,
 				message: w

package/dist/InputNumeric.d.ts

@@ -0,0 +1,14 @@
+import { InputProps } from '../Input/Input';
+import { ReactElement } from 'react';
+export type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {
+    allowDecimal?: boolean;
+    allowNegative?: boolean;
+    locale?: string;
+    onChange?: (value: string) => void;
+    value?: string;
+};
+export declare const InputNumeric: {
+    ({ allowDecimal, allowNegative, className, locale, max, min, onChange, onKeyDown, onPaste, step, value, ...props }: InputNumericProps): ReactElement;
+    displayName: string;
+};
+//# sourceMappingURL=InputNumeric.d.ts.map

package/dist/InputNumeric.js

@@ -0,0 +1,137 @@
+"use client";
+import "./styles/main.css";
+import { t as e } from "./twUtils-VNWgstKL.js";
+import { Input as t } from "./Input.js";
+import { useCallback as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/InputNumeric/InputNumeric.tsx
+var i = /^\d$/, a = new Set([
+	"e",
+	"E",
+	"+"
+]), o = new Set([
+	"Backspace",
+	"Delete",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"Tab",
+	"Enter",
+	"Escape"
+]), s = (e) => {
+	try {
+		return new Intl.NumberFormat(e).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? ".";
+	} catch {
+		return ".";
+	}
+}, c = (e, t) => t === "." ? e : e.replaceAll(t, "."), l = (e, t, n, r) => {
+	if (!e) return "";
+	let i = c(e, r).replace(/[^\d.-]/g, "");
+	if (n ? (i = i.replace(/(?!^)-/g, ""), i.startsWith("--") && (i = `-${i.replace(/-/g, "")}`)) : i = i.replace(/-/g, ""), !t) i = i.replace(/\./g, "");
+	else {
+		let e = i.indexOf(".");
+		e >= 0 && (i = `${i.slice(0, e + 1)}${i.slice(e + 1).replace(/\./g, "")}`);
+	}
+	return i;
+}, u = (e) => {
+	if (e.selectionStart === null || e.selectionEnd === null) return !e.value.includes(".");
+	let t = e.value.slice(e.selectionStart, e.selectionEnd);
+	return !e.value.includes(".") || t.includes(".");
+}, d = (e) => {
+	if (e.selectionStart === null || e.selectionEnd === null) return e.value.length === 0;
+	let t = e.selectionStart === 0, n = e.value.slice(e.selectionStart, e.selectionEnd);
+	return t && (!e.value.includes("-") || n.includes("-"));
+}, f = (e) => {
+	if (e == null || e === "") return;
+	let t = typeof e == "number" ? e : Number.parseFloat(e);
+	return Number.isFinite(t) ? t : void 0;
+}, p = (e) => {
+	let t = e.toString();
+	return t.includes(".") ? t.split(".")[1]?.length ?? 0 : 0;
+}, m = (e, t) => {
+	if (t <= 0) return e;
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+}, h = ({ allowDecimal: h = !0, allowNegative: g = !1, className: _, locale: v, max: y, min: b, onChange: x, onKeyDown: S, onPaste: C, step: w, value: T = "", ...E }) => {
+	let D = s(v), O = f(b), k = f(y), A = f(w), j = A && A > 0 ? A : 1, M = O ?? (g ? void 0 : 0), N = n((e) => {
+		if (S?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && !(e.metaKey || e.ctrlKey || e.altKey)) {
+			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = e.key === "ArrowUp" ? 1 : -1, n = c(T, D), r = Number.parseFloat(n), i = (Number.isFinite(r) ? r : M ?? 0) + t * j;
+				M !== void 0 && (i = Math.max(M, i)), k !== void 0 && (i = Math.min(k, i)), h || (i = Math.trunc(i));
+				let a = h ? p(j) : 0, o = m(i, a), s = Object.is(o, -0) ? 0 : o, u = a > 0 ? s.toFixed(a).replace(/\.?0+$/, "") : s.toString();
+				x?.(l(u, h, g, D));
+				return;
+			}
+			if (!o.has(e.key) && !i.test(e.key)) {
+				if (a.has(e.key)) {
+					e.preventDefault();
+					return;
+				}
+				if (e.key === "." || e.key === D) {
+					(!h || !u(e.currentTarget)) && e.preventDefault();
+					return;
+				}
+				if (e.key === "-") {
+					(!g || !d(e.currentTarget)) && e.preventDefault();
+					return;
+				}
+				e.preventDefault();
+			}
+		}
+	}, [
+		h,
+		g,
+		D,
+		M,
+		x,
+		S,
+		k,
+		j,
+		T
+	]), P = n((e) => {
+		if (C?.(e), e.defaultPrevented) return;
+		let t = e.clipboardData.getData("text"), n = l(t, h, g, D);
+		if (c(t, D) === n) return;
+		e.preventDefault();
+		let r = e.currentTarget, i = r.selectionStart ?? r.value.length, a = r.selectionEnd ?? r.value.length, o = l(`${r.value.slice(0, i)}${n}${r.value.slice(a)}`, h, g, D);
+		x?.(o);
+	}, [
+		h,
+		g,
+		D,
+		x,
+		C
+	]), F = n((e) => {
+		x?.(l(e, h, g, D));
+	}, [
+		h,
+		g,
+		D,
+		x
+	]), I = h ? "decimal" : "numeric", L = h ? "[0-9]*[.]?[0-9]*" : "[0-9]*", R = c(T, D), z = R === "" || R === "-" || R === "." ? void 0 : Number.parseFloat(R);
+	return /* @__PURE__ */ r(t, {
+		...E,
+		"aria-valuemax": k,
+		"aria-valuemin": M,
+		"aria-valuenow": Number.isFinite(z) ? z : void 0,
+		className: e("tabular-nums", _),
+		inputMode: I,
+		max: y,
+		min: b,
+		onChange: F,
+		onKeyDown: N,
+		onPaste: P,
+		pattern: L,
+		role: "spinbutton",
+		step: w,
+		type: "text",
+		value: T
+	});
+};
+h.displayName = "InputNumeric";
+//#endregion
+export { h as InputNumeric };