@soroush.tech/design-system 2.0.0-rc.2 → 2.0.0-rc.4

package/dist/NumberInput.cjs

@@ -0,0 +1,502 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_utils = require("./utils.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_useControlled = require("./useControlled-C666KpQ0.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-BUK_62Ra.cjs");
+const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_precision = require("./precision-B58cTPB2.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/NumberInput/hooks/useHoldRepeat.ts
+/**
+* Runs `action` at once on a press, then again and again while it is held - after a pause, so a
+* tap is one step. `start` begins it, `stop` ends it, and it ends by itself when the component
+* goes.
+*/
+function useHoldRepeat(action, { delay = 400, interval = 60 } = {}) {
+	const actionRef = (0, react.useRef)(action);
+	(0, react.useEffect)(() => {
+		actionRef.current = action;
+	});
+	const timers = (0, react.useRef)({});
+	const stop = (0, react.useCallback)(() => {
+		window.clearTimeout(timers.current.pause);
+		window.clearInterval(timers.current.repeat);
+		timers.current = {};
+	}, []);
+	const start = (0, react.useCallback)(() => {
+		stop();
+		actionRef.current();
+		timers.current.pause = window.setTimeout(() => {
+			timers.current.repeat = window.setInterval(() => actionRef.current(), interval);
+		}, delay);
+	}, [
+		stop,
+		delay,
+		interval
+	]);
+	(0, react.useEffect)(() => stop, [stop]);
+	return {
+		start,
+		stop
+	};
+}
+//#endregion
+//#region src/NumberInput/utils/number.ts
+/** What a number is shown as unless told otherwise: all its digits, ungrouped, so typing round-trips. */
+const DEFAULT_FORMAT = {
+	useGrouping: false,
+	maximumFractionDigits: 20
+};
+/** The syntax a locale and format write a number in. */
+function getNumberSyntax(locale, format) {
+	const probe = new Intl.NumberFormat(locale, {
+		useGrouping: false,
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1
+	});
+	const digitFormat = new Intl.NumberFormat(locale, { useGrouping: false });
+	return {
+		decimal: probe.formatToParts(1.1).find((part) => part.type === "decimal").value,
+		digits: Array.from({ length: 10 }, (_, digit) => digitFormat.format(digit)),
+		isPercent: format?.style === "percent"
+	};
+}
+/** The number as its locale and format write it. */
+function formatNumber(value, locale, format) {
+	return new Intl.NumberFormat(locale, {
+		...DEFAULT_FORMAT,
+		...format
+	}).format(value);
+}
+const MINUS = new RegExp(`[${[
+	8722,
+	8210,
+	8211,
+	8212
+].map((code) => String.fromCodePoint(code)).join("")}]`, "g");
+/**
+* The number a text stands for - `null` when it stands for none: its locale's digits and decimal
+* mark, a leading minus, a percent's `%` (so `50%` is `0.5`). Group marks, spaces and symbols
+* round it are ignored.
+*/
+function parseNumber(text, syntax) {
+	let normalized = text.replace(MINUS, "-");
+	syntax.digits.forEach((digit, index) => {
+		normalized = normalized.split(digit).join(String(index));
+	});
+	const isNegative = normalized.includes("-");
+	const [whole = "", ...fraction] = normalized.split(syntax.decimal);
+	const digits = (text) => text.replaceAll(/\D/g, "");
+	const wholeDigits = digits(whole);
+	const fractionDigits = fraction.map(digits).join("");
+	if (wholeDigits === "" && fractionDigits === "") return null;
+	const parsed = Number(`${wholeDigits || "0"}.${fractionDigits || "0"}`);
+	const signed = isNegative ? -parsed : parsed;
+	return syntax.isPercent ? Number((signed / 100).toFixed(require_precision.getDecimalPrecision(parsed) + 2)) : signed;
+}
+//#endregion
+//#region src/NumberInput/hooks/useNumberInput.ts
+const clampTo = (value, min, max) => require_utils.clamp(value, min ?? Number.NEGATIVE_INFINITY, max ?? Number.POSITIVE_INFINITY);
+/**
+* A number field's state: the number (controlled or not), the text the user is typing - which
+* is theirs until it is committed on blur or Enter - and the steps by key and by button. A
+* number typed is told at once; one outside the range is clamped when it is committed.
+*/
+function useNumberInput({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
+	const [value, setValue] = require_useControlled.useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? null
+	});
+	const [draft, setDraft] = (0, react.useState)(null);
+	const syntax = (0, react.useMemo)(() => getNumberSyntax(locale, format), [locale, format]);
+	const text = draft ?? (value === null ? "" : formatNumber(value, locale, format));
+	const update = (next) => {
+		if (next === value) return;
+		setValue(next);
+		onChange?.(next);
+	};
+	const handleChange = (event) => {
+		const typed = event.currentTarget.value;
+		setDraft(typed);
+		if (typed.trim() === "") return update(null);
+		const parsed = parseNumber(typed, syntax);
+		if (parsed !== null) update(parsed);
+	};
+	const settle = () => {
+		if (draft === null) return value;
+		if (draft.trim() === "") return null;
+		const parsed = parseNumber(draft, syntax);
+		return parsed === null ? value : clampTo(parsed, min, max);
+	};
+	const commit = (next) => {
+		setDraft(null);
+		update(next);
+		onChangeCommitted?.(next);
+	};
+	const handleBlur = () => {
+		if (draft !== null) commit(settle());
+	};
+	const stepBy = (direction, size = step) => {
+		if (isFrozen) return;
+		const base = settle() ?? 0;
+		let next = require_precision.addExact(base, direction * size);
+		if (shouldSnapOnStep) next = require_precision.snapToStep(next, step, min ?? 0);
+		commit(clampTo(next, min, max));
+	};
+	const handleKeyDown = (event) => {
+		if (isFrozen) return;
+		const { key, altKey, shiftKey } = event;
+		if (key === "Enter") return commit(settle());
+		if (key === "ArrowUp" || key === "ArrowDown") {
+			event.preventDefault();
+			let size = step;
+			if (altKey) size = smallStep;
+			if (shiftKey) size = largeStep;
+			return stepBy(key === "ArrowUp" ? 1 : -1, size);
+		}
+		const edge = key === "Home" ? min : max;
+		if ((key === "Home" || key === "End") && edge !== void 0) {
+			event.preventDefault();
+			commit(edge);
+		}
+	};
+	return {
+		text,
+		value,
+		canIncrement: !isFrozen && (max === void 0 || (value ?? Number.NEGATIVE_INFINITY) < max),
+		canDecrement: !isFrozen && (min === void 0 || (value ?? Number.POSITIVE_INFINITY) > min),
+		handleChange,
+		handleBlur,
+		handleKeyDown,
+		stepBy
+	};
+}
+//#endregion
+//#region src/NumberInput/hooks/useWheelStep.ts
+/**
+* Steps a focused field by the mouse wheel - up for a wheel up. A native listener, since the
+* page must not scroll as it turns, and a React one can't prevent that.
+*/
+function useWheelStep(ref, isEnabled, onStep) {
+	const stepRef = (0, react.useRef)(onStep);
+	(0, react.useEffect)(() => {
+		stepRef.current = onStep;
+	});
+	(0, react.useEffect)(() => {
+		const element = ref.current;
+		if (!isEnabled || !element) return void 0;
+		const handleWheel = (event) => {
+			if (element.ownerDocument.activeElement !== element) return;
+			event.preventDefault();
+			stepRef.current(event.deltaY < 0 ? 1 : -1);
+		};
+		element.addEventListener("wheel", handleWheel, { passive: false });
+		return () => element.removeEventListener("wheel", handleWheel);
+	}, [ref, isEnabled]);
+}
+//#endregion
+//#region src/NumberInput/NumberInput.tsx
+const widthStyles = (0, require_src.src_exports.system)({
+	width: true,
+	minWidth: true,
+	maxWidth: true
+});
+const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth, isInField }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	const border = isError ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.light`);
+	const focusBorder = isError ? (0, require_src.src_exports.get)(theme, "palette.error.main") : main;
+	return {
+		display: isFullWidth || isInField ? "flex" : "inline-flex",
+		...isFullWidth && { width: "100%" },
+		...isInField && !isFullWidth && { width: "fit-content" },
+		minWidth: require_inputVariantStyles.getInputMinWidth(theme),
+		alignItems: "stretch",
+		transition: "border-color 0.15s ease",
+		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "inputBg", "terminal")}`),
+		color: textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
+		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
+		borderColor: border,
+		"&:focus-within": { borderColor: focusBorder },
+		"&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, isError),
+		...isDisabled && {
+			opacity: .5,
+			cursor: "not-allowed",
+			pointerEvents: "none"
+		}
+	};
+};
+const NumberInputRoot = require_src.styled("div", {
+	name: "NumberInput",
+	label: "NumberInput",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"color",
+		"textColor",
+		"variant",
+		"isError",
+		"isDisabled",
+		"isFullWidth",
+		"isInField"
+	]),
+	systemProps: [require_src.src_exports.space, widthStyles]
+})(require_inputVariantStyles.inputVariantStyles, frameStyle);
+const NumberInputInput = require_src.styled("input", {
+	name: "NumberInput",
+	slot: "input",
+	label: "NumberInputInput",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["sizeToken", "isCentered"])
+})(({ theme, sizeToken, isCentered }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		flex: "1 1 0",
+		minWidth: 0,
+		width: 0,
+		border: "none",
+		outline: "none",
+		background: "transparent",
+		color: "inherit",
+		fontFamily: "inherit",
+		lineHeight: "inherit",
+		textAlign: isCentered ? "center" : "start",
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize],
+		"&::placeholder": {
+			color: "inherit",
+			opacity: .5
+		},
+		"&:disabled": { cursor: "not-allowed" }
+	};
+});
+const NumberInputContent = require_src.styled("span", {
+	name: "NumberInput",
+	slot: "content",
+	label: "NumberInputContent",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["edge", "sizeToken"])
+})(({ theme, edge, sizeToken }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		flexShrink: 0,
+		gap: theme.space[.5],
+		color: "inherit",
+		...edge === "start" ? { paddingInlineStart: theme.space[s.paddingLeft] } : { paddingInlineEnd: theme.space[s.paddingRight] }
+	};
+});
+const NumberInputSpinButtons = require_src.styled("span", {
+	name: "NumberInput",
+	slot: "spinButtons",
+	label: "NumberInputSpinButtons"
+})(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	borderInlineStart: `${theme.borderWidths.thin} solid`,
+	borderColor: "inherit"
+}));
+const spinStyle = ({ theme, color, isSide }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		appearance: "none",
+		display: "grid",
+		placeItems: "center",
+		flex: isSide ? "0 0 auto" : "1 1 0px",
+		...!isSide && { minHeight: 0 },
+		minWidth: isSide ? theme.space[5] : theme.icon.lg,
+		padding: 0,
+		border: "none",
+		background: "transparent",
+		color: "inherit",
+		cursor: "pointer",
+		"&:hover:not(:disabled)": { backgroundColor: `${main}1F` },
+		"&:disabled": {
+			opacity: .4,
+			cursor: "default"
+		}
+	};
+};
+const spinProps = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["color", "isSide"]);
+const sideDivider = (edge) => {
+	return ({ theme, isSide }) => isSide ? {
+		[edge]: `${theme.borderWidths.thin} solid`,
+		borderColor: "inherit"
+	} : {};
+};
+const NumberInputIncrement = require_src.styled("button", {
+	name: "NumberInput",
+	slot: "increment",
+	label: "NumberInputIncrement",
+	shouldForwardProp: spinProps
+})(spinStyle, sideDivider("borderInlineStart"));
+const NumberInputDecrement = require_src.styled("button", {
+	name: "NumberInput",
+	slot: "decrement",
+	label: "NumberInputDecrement",
+	shouldForwardProp: spinProps
+})(spinStyle, sideDivider("borderInlineEnd"));
+const getSpinIcon = (direction, isSide) => {
+	if (isSide) return direction === 1 ? "add" : "remove";
+	return direction === 1 ? "expand_less" : "expand_more";
+};
+function SpinButton({ direction, label, isSide, isDisabled, color, size, onStep }) {
+	const hold = useHoldRepeat(() => onStep(direction));
+	const { stop } = hold;
+	(0, react.useEffect)(() => {
+		if (isDisabled) stop();
+	}, [isDisabled, stop]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(direction === 1 ? NumberInputIncrement : NumberInputDecrement, {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": label,
+		disabled: isDisabled,
+		color,
+		isSide,
+		onMouseDown: (event) => event.preventDefault(),
+		onPointerDown: (event) => event.button === 0 && hold.start(),
+		onPointerUp: hold.stop,
+		onPointerLeave: hold.stop,
+		onPointerCancel: hold.stop,
+		onClick: (event) => event.detail === 0 && onStep(direction),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			name: getSpinIcon(direction, isSide),
+			size,
+			color: "inherit"
+		})
+	});
+}
+/**
+* @description A field for a number: a text input - so what is typed is the user's until it is
+* settled - that reads and writes the number in its locale, clamps it to `min`/`max`, and steps
+* by the arrow keys, Home/End, the wheel and buttons that repeat while held. A
+* `role="spinbutton"`, so the number and its range are announced; a hidden input carries the raw
+* number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
+* required state, and its `FormLabel` targets the field.
+*/
+function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly = false, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("NumberInput");
+	const isInField = (0, react.useContext)(require_FormControlContext.FormControlContext) !== null;
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp ?? dp.size,
+		fullWidth: fullWidthProp,
+		color: colorProp ?? dp.color,
+		textColor: textColorProp
+	});
+	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const textColor = fc.textColor;
+	const variant = variantProp ?? dp.variant ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
+	const spinButtons = spinButtonsProp ?? dp.spinButtons ?? "stacked";
+	const step = stepProp ?? dp.step ?? 1;
+	const isFrozen = fc.disabled || readOnly;
+	const field = useNumberInput({
+		value,
+		defaultValue,
+		onChange,
+		onChangeCommitted,
+		min,
+		max,
+		step,
+		smallStep: smallStepProp ?? dp.smallStep ?? .1,
+		largeStep: largeStepProp ?? dp.largeStep ?? 10,
+		format,
+		locale,
+		shouldSnapOnStep: shouldSnapProp ?? dp.shouldSnapOnStep ?? false,
+		isFrozen
+	});
+	const inputRef = (0, react.useRef)(null);
+	useWheelStep(inputRef, shouldScrubProp ?? dp.shouldScrubOnWheel ?? false, field.stepBy);
+	const isSide = spinButtons === "sides";
+	const buttonProps = {
+		isSide,
+		color,
+		size: fc.size,
+		onStep: field.stepBy
+	};
+	const decrement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpinButton, {
+		direction: -1,
+		label: decrementLabelProp ?? dp.decrementLabel,
+		isDisabled: !field.canDecrement,
+		...buttonProps
+	});
+	const increment = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpinButton, {
+		direction: 1,
+		label: incrementLabelProp ?? dp.incrementLabel,
+		isDisabled: !field.canIncrement,
+		...buttonProps
+	});
+	const inputMode = (min ?? -1) >= 0 && Number.isInteger(step) ? "numeric" : "decimal";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberInputRoot, {
+		color,
+		textColor,
+		variant,
+		isError: fc.error,
+		isDisabled: fc.disabled,
+		isFullWidth: fc.fullWidth,
+		isInField,
+		className,
+		"data-testid": dataTestid,
+		...rest,
+		children: [
+			isSide && decrement,
+			startContent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputContent, {
+				edge: "start",
+				sizeToken: fc.size,
+				children: startContent
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputInput, {
+				ref: inputRef,
+				type: "text",
+				role: "spinbutton",
+				inputMode,
+				autoComplete: "off",
+				id: fc.id,
+				value: field.text,
+				placeholder,
+				autoFocus,
+				disabled: fc.disabled,
+				readOnly,
+				required: fc.required,
+				sizeToken: fc.size,
+				isCentered: isSide,
+				"aria-valuenow": field.value ?? void 0,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+				"aria-invalid": fc.error || void 0,
+				onChange: field.handleChange,
+				onBlur: field.handleBlur,
+				onKeyDown: field.handleKeyDown
+			}),
+			name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: field.value ?? "",
+				disabled: fc.disabled
+			}),
+			endContent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputContent, {
+				edge: "end",
+				sizeToken: fc.size,
+				children: endContent
+			}),
+			spinButtons === "stacked" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberInputSpinButtons, { children: [increment, decrement] }),
+			isSide && increment
+		]
+	});
+}
+//#endregion
+exports.NumberInput = NumberInput;

package/dist/NumberInput.d.cts

@@ -0,0 +1,79 @@
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { ReactNode } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+//#region src/NumberInput/NumberInput.d.ts
+type NumberInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+type NumberInputSpinButtons = 'stacked' | 'sides' | 'none';
+interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** The number - `null` for none. Controlled with `onChange`. */
+  value?: number | null;
+  /** The number at first, when uncontrolled. */
+  defaultValue?: number | null;
+  /** Fired as the number changes - as it is typed, stepped or cleared. */
+  onChange?: (value: number | null) => void;
+  /** Fired when the number is settled: on blur, Enter, a step or Home/End. */
+  onChangeCommitted?: (value: number | null) => void;
+  /** The least number - what is typed or stepped is clamped to it. */
+  min?: number;
+  /** The greatest number. */
+  max?: number;
+  /** What the arrow keys and the buttons step by. Default: `1`. */
+  step?: number;
+  /** The step with Alt held. Default: `0.1`. */
+  smallStep?: number;
+  /** The step with Shift held. Default: `10`. */
+  largeStep?: number;
+  /** How the number is shown - `Intl.NumberFormat` options. Default: every digit, ungrouped. */
+  format?: Intl.NumberFormatOptions;
+  /** How the number is written and read. Default: the document's. */
+  locale?: string;
+  /** A step lands on the grid of `step`, counted from `min` (or 0). Default: `false`. */
+  shouldSnapOnStep?: boolean;
+  /** The mouse wheel steps the number while the field is focused. Default: `false`. */
+  shouldScrubOnWheel?: boolean;
+  /** Where the step buttons are: stacked at the end, either side of the field, or none. Default: `'stacked'`. */
+  spinButtons?: NumberInputSpinButtons;
+  /** Names the increase button - no built-in text; a theme gives it through `defaultProps`. */
+  incrementLabel?: string;
+  /** Names the decrease button. */
+  decrementLabel?: string;
+  /** Content inside the frame before the number - an icon, a label. */
+  startContent?: ReactNode;
+  /** Content inside the frame after the number, before the step buttons - a unit such as `px` or `%`, a button. */
+  endContent?: ReactNode;
+  /** The frame: a box, an outline, an underline or none. Default: `theme.defaults.inputVariant`. */
+  variant?: NumberInputVariant;
+  /** Resolves against `theme.sizes`. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The focus border color - resolves to `theme.palette`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+  /** The number's color - resolves against `theme.text`. Default: `'primary'`. */
+  textColor?: keyof Theme['text'];
+  error?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
+  /** What a form submits the number as. */
+  name?: string;
+  /** On the field, which a `FormLabel` targets. Default: its `FormControl`'s. */
+  id?: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A field for a number: a text input - so what is typed is the user's until it is
+ * settled - that reads and writes the number in its locale, clamps it to `min`/`max`, and steps
+ * by the arrow keys, Home/End, the wheel and buttons that repeat while held. A
+ * `role="spinbutton"`, so the number and its range are announced; a hidden input carries the raw
+ * number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
+ * required state, and its `FormLabel` targets the field.
+ */
+declare function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberInputProps>): import("react").JSX.Element;
+//#endregion
+export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };

package/dist/NumberInput.d.mts

@@ -0,0 +1,79 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode } from "react";
+//#region src/NumberInput/NumberInput.d.ts
+type NumberInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+type NumberInputSpinButtons = 'stacked' | 'sides' | 'none';
+interface NumberInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** The number - `null` for none. Controlled with `onChange`. */
+  value?: number | null;
+  /** The number at first, when uncontrolled. */
+  defaultValue?: number | null;
+  /** Fired as the number changes - as it is typed, stepped or cleared. */
+  onChange?: (value: number | null) => void;
+  /** Fired when the number is settled: on blur, Enter, a step or Home/End. */
+  onChangeCommitted?: (value: number | null) => void;
+  /** The least number - what is typed or stepped is clamped to it. */
+  min?: number;
+  /** The greatest number. */
+  max?: number;
+  /** What the arrow keys and the buttons step by. Default: `1`. */
+  step?: number;
+  /** The step with Alt held. Default: `0.1`. */
+  smallStep?: number;
+  /** The step with Shift held. Default: `10`. */
+  largeStep?: number;
+  /** How the number is shown - `Intl.NumberFormat` options. Default: every digit, ungrouped. */
+  format?: Intl.NumberFormatOptions;
+  /** How the number is written and read. Default: the document's. */
+  locale?: string;
+  /** A step lands on the grid of `step`, counted from `min` (or 0). Default: `false`. */
+  shouldSnapOnStep?: boolean;
+  /** The mouse wheel steps the number while the field is focused. Default: `false`. */
+  shouldScrubOnWheel?: boolean;
+  /** Where the step buttons are: stacked at the end, either side of the field, or none. Default: `'stacked'`. */
+  spinButtons?: NumberInputSpinButtons;
+  /** Names the increase button - no built-in text; a theme gives it through `defaultProps`. */
+  incrementLabel?: string;
+  /** Names the decrease button. */
+  decrementLabel?: string;
+  /** Content inside the frame before the number - an icon, a label. */
+  startContent?: ReactNode;
+  /** Content inside the frame after the number, before the step buttons - a unit such as `px` or `%`, a button. */
+  endContent?: ReactNode;
+  /** The frame: a box, an outline, an underline or none. Default: `theme.defaults.inputVariant`. */
+  variant?: NumberInputVariant;
+  /** Resolves against `theme.sizes`. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The focus border color - resolves to `theme.palette`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+  /** The number's color - resolves against `theme.text`. Default: `'primary'`. */
+  textColor?: keyof Theme['text'];
+  error?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  fullWidth?: boolean;
+  /** What a form submits the number as. */
+  name?: string;
+  /** On the field, which a `FormLabel` targets. Default: its `FormControl`'s. */
+  id?: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A field for a number: a text input - so what is typed is the user's until it is
+ * settled - that reads and writes the number in its locale, clamps it to `min`/`max`, and steps
+ * by the arrow keys, Home/End, the wheel and buttons that repeat while held. A
+ * `role="spinbutton"`, so the number and its range are announced; a hidden input carries the raw
+ * number to a form. In a `FormControl` it takes the field's size, color, error, disabled and
+ * required state, and its `FormLabel` targets the field.
+ */
+declare function NumberInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, smallStep: smallStepProp, largeStep: largeStepProp, format, locale, shouldSnapOnStep: shouldSnapProp, shouldScrubOnWheel: shouldScrubProp, spinButtons: spinButtonsProp, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, error: errorProp, disabled: disabledProp, readOnly, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, placeholder, autoFocus, startContent, endContent, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberInputProps>): import("react").JSX.Element;
+//#endregion
+export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };