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

package/dist/{NumberField.cjs → NumberInput.cjs}

@@ -1,18 +1,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_Icon = require("./Icon-D-EWsBVg.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_useControlled = require("./useControlled-C666KpQ0.cjs");
 const require_precision = require("./precision-B58cTPB2.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.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/NumberField/hooks/useHoldRepeat.ts
+//#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
@@ -47,7 +47,7 @@ function useHoldRepeat(action, { delay = 400, interval = 60 } = {}) {
 	};
 }
 //#endregion
-//#region src/NumberField/utils/number.ts
+//#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,
@@ -101,14 +101,14 @@ function parseNumber(text, syntax) {
 	return syntax.isPercent ? Number((signed / 100).toFixed(require_precision.getDecimalPrecision(parsed) + 2)) : signed;
 }
 //#endregion
-//#region src/NumberField/hooks/useNumberField.ts
+//#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 useNumberField({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
+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
@@ -178,7 +178,7 @@ function useNumberField({ value: valueProp, defaultValue, onChange, onChangeComm
 	};
 }
 //#endregion
-//#region src/NumberField/hooks/useWheelStep.ts
+//#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.
@@ -201,7 +201,7 @@ function useWheelStep(ref, isEnabled, onStep) {
 	}, [ref, isEnabled]);
 }
 //#endregion
-//#region src/NumberField/NumberField.tsx
+//#region src/NumberInput/NumberInput.tsx
 const widthStyles = (0, require_src.src_exports.system)({
 	width: true,
 	minWidth: true,
@@ -215,6 +215,7 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		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")}`),
@@ -223,10 +224,7 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
 		borderColor: border,
 		"&:focus-within": { borderColor: focusBorder },
-		"&:has(input:focus-visible)": {
-			outline: `2px solid ${main}`,
-			outlineOffset: "2px"
-		},
+		"&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, isError),
 		...isDisabled && {
 			opacity: .5,
 			cursor: "not-allowed",
@@ -234,9 +232,9 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		}
 	};
 };
-const NumberFieldRoot = require_src.styled("div", {
-	name: "NumberField",
-	label: "NumberField",
+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",
@@ -249,17 +247,17 @@ const NumberFieldRoot = require_src.styled("div", {
 	]),
 	systemProps: [require_src.src_exports.space, widthStyles]
 })(require_inputVariantStyles.inputVariantStyles, frameStyle);
-const NumberFieldInput = require_src.styled("input", {
-	name: "NumberField",
+const NumberInputInput = require_src.styled("input", {
+	name: "NumberInput",
 	slot: "input",
-	label: "NumberFieldInput",
+	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,
+		flex: "1 1 0",
 		minWidth: 0,
-		width: "100%",
+		width: 0,
 		border: "none",
 		outline: "none",
 		background: "transparent",
@@ -279,10 +277,26 @@ const NumberFieldInput = require_src.styled("input", {
 		"&:disabled": { cursor: "not-allowed" }
 	};
 });
-const NumberFieldSpinButtons = require_src.styled("span", {
-	name: "NumberField",
+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: "NumberFieldSpinButtons"
+	label: "NumberInputSpinButtons"
 })(({ theme }) => ({
 	display: "flex",
 	flexDirection: "column",
@@ -295,7 +309,8 @@ const spinStyle = ({ theme, color, isSide }) => {
 		appearance: "none",
 		display: "grid",
 		placeItems: "center",
-		flex: isSide ? "0 0 auto" : 1,
+		flex: isSide ? "0 0 auto" : "1 1 0px",
+		...!isSide && { minHeight: 0 },
 		minWidth: isSide ? theme.space[5] : theme.icon.lg,
 		padding: 0,
 		border: "none",
@@ -316,29 +331,29 @@ const sideDivider = (edge) => {
 		borderColor: "inherit"
 	} : {};
 };
-const NumberFieldIncrement = require_src.styled("button", {
-	name: "NumberField",
+const NumberInputIncrement = require_src.styled("button", {
+	name: "NumberInput",
 	slot: "increment",
-	label: "NumberFieldIncrement",
+	label: "NumberInputIncrement",
 	shouldForwardProp: spinProps
 })(spinStyle, sideDivider("borderInlineStart"));
-const NumberFieldDecrement = require_src.styled("button", {
-	name: "NumberField",
+const NumberInputDecrement = require_src.styled("button", {
+	name: "NumberInput",
 	slot: "decrement",
-	label: "NumberFieldDecrement",
+	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, onStep }) {
+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 ? NumberFieldIncrement : NumberFieldDecrement, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(direction === 1 ? NumberInputIncrement : NumberInputDecrement, {
 		type: "button",
 		tabIndex: -1,
 		"aria-label": label,
@@ -353,7 +368,7 @@ function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
 		onClick: (event) => event.detail === 0 && onStep(direction),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
 			name: getSpinIcon(direction, isSide),
-			size: "sm",
+			size,
 			color: "inherit"
 		})
 	});
@@ -366,9 +381,9 @@ function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
 * 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 NumberField({ 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, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+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("NumberField");
+	const dp = require_theme.useDefaultProps("NumberInput");
 	const isInField = (0, react.useContext)(require_FormControlContext.FormControlContext) !== null;
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
@@ -386,7 +401,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 	const spinButtons = spinButtonsProp ?? dp.spinButtons ?? "stacked";
 	const step = stepProp ?? dp.step ?? 1;
 	const isFrozen = fc.disabled || readOnly;
-	const field = useNumberField({
+	const field = useNumberInput({
 		value,
 		defaultValue,
 		onChange,
@@ -407,6 +422,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 	const buttonProps = {
 		isSide,
 		color,
+		size: fc.size,
 		onStep: field.stepBy
 	};
 	const decrement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpinButton, {
@@ -422,7 +438,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 		...buttonProps
 	});
 	const inputMode = (min ?? -1) >= 0 && Number.isInteger(step) ? "numeric" : "decimal";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberFieldRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberInputRoot, {
 		color,
 		textColor,
 		variant,
@@ -435,7 +451,12 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 		...rest,
 		children: [
 			isSide && decrement,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberFieldInput, {
+			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",
@@ -467,10 +488,15 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 				value: field.value ?? "",
 				disabled: fc.disabled
 			}),
-			spinButtons === "stacked" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberFieldSpinButtons, { children: [increment, decrement] }),
+			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.NumberField = NumberField;
+exports.NumberInput = NumberInput;

package/dist/{NumberField.d.cts → NumberInput.d.cts}

@@ -1,9 +1,10 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/NumberField/NumberField.d.ts
-type NumberFieldVariant = 'default' | 'outlined' | 'text' | 'underline';
-type NumberFieldSpinButtons = 'stacked' | 'sides' | 'none';
-interface NumberFieldProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+//#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. */
@@ -31,13 +32,17 @@ interface NumberFieldProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, '
   /** 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?: NumberFieldSpinButtons;
+  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?: NumberFieldVariant;
+  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'`. */
@@ -69,6 +74,6 @@ interface NumberFieldProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, '
  * 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 NumberField({ 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, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberFieldProps>): import("react").JSX.Element;
+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 { NumberField, NumberFieldProps, NumberFieldSpinButtons, NumberFieldVariant };
+export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };

package/dist/{NumberField.d.mts → NumberInput.d.mts}

@@ -1,9 +1,10 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/NumberField/NumberField.d.ts
-type NumberFieldVariant = 'default' | 'outlined' | 'text' | 'underline';
-type NumberFieldSpinButtons = 'stacked' | 'sides' | 'none';
-interface NumberFieldProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+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. */
@@ -31,13 +32,17 @@ interface NumberFieldProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, '
   /** 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?: NumberFieldSpinButtons;
+  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?: NumberFieldVariant;
+  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'`. */
@@ -69,6 +74,6 @@ interface NumberFieldProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, '
  * 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 NumberField({ 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, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<NumberFieldProps>): import("react").JSX.Element;
+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 { NumberField, NumberFieldProps, NumberFieldSpinButtons, NumberFieldVariant };
+export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };

package/dist/{NumberField.mjs → NumberInput.mjs}

@@ -1,16 +1,16 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { clamp } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-q_cZsCJg.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { useFormControl } from "./FormControl.mjs";
-import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
 import { i as snapToStep, n as getDecimalPrecision, t as addExact } from "./precision-B1lhxnnO.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/NumberField/hooks/useHoldRepeat.ts
+//#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
@@ -45,7 +45,7 @@ function useHoldRepeat(action, { delay = 400, interval = 60 } = {}) {
 	};
 }
 //#endregion
-//#region src/NumberField/utils/number.ts
+//#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,
@@ -99,14 +99,14 @@ function parseNumber(text, syntax) {
 	return syntax.isPercent ? Number((signed / 100).toFixed(getDecimalPrecision(parsed) + 2)) : signed;
 }
 //#endregion
-//#region src/NumberField/hooks/useNumberField.ts
+//#region src/NumberInput/hooks/useNumberInput.ts
 const clampTo = (value, min, max) => 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 useNumberField({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
+function useNumberInput({ value: valueProp, defaultValue, onChange, onChangeCommitted, min, max, step, smallStep, largeStep, format, locale, shouldSnapOnStep, isFrozen }) {
 	const [value, setValue] = useControlled({
 		controlled: valueProp,
 		default: defaultValue ?? null
@@ -176,7 +176,7 @@ function useNumberField({ value: valueProp, defaultValue, onChange, onChangeComm
 	};
 }
 //#endregion
-//#region src/NumberField/hooks/useWheelStep.ts
+//#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.
@@ -199,7 +199,7 @@ function useWheelStep(ref, isEnabled, onStep) {
 	}, [ref, isEnabled]);
 }
 //#endregion
-//#region src/NumberField/NumberField.tsx
+//#region src/NumberInput/NumberInput.tsx
 const widthStyles = (0, src_exports.system)({
 	width: true,
 	minWidth: true,
@@ -213,6 +213,7 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		display: isFullWidth || isInField ? "flex" : "inline-flex",
 		...isFullWidth && { width: "100%" },
 		...isInField && !isFullWidth && { width: "fit-content" },
+		minWidth: getInputMinWidth(theme),
 		alignItems: "stretch",
 		transition: "border-color 0.15s ease",
 		backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "inputBg", "terminal")}`),
@@ -221,10 +222,7 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
 		borderColor: border,
 		"&:focus-within": { borderColor: focusBorder },
-		"&:has(input:focus-visible)": {
-			outline: `2px solid ${main}`,
-			outlineOffset: "2px"
-		},
+		"&:has(:focus-visible)": getFocusRing(theme, color, isError),
 		...isDisabled && {
 			opacity: .5,
 			cursor: "not-allowed",
@@ -232,9 +230,9 @@ const frameStyle = ({ theme, color, textColor, isError, isDisabled, isFullWidth,
 		}
 	};
 };
-const NumberFieldRoot = styled("div", {
-	name: "NumberField",
-	label: "NumberField",
+const NumberInputRoot = styled("div", {
+	name: "NumberInput",
+	label: "NumberInput",
 	shouldForwardProp: createShouldForwardProp([
 		...props,
 		"color",
@@ -247,17 +245,17 @@ const NumberFieldRoot = styled("div", {
 	]),
 	systemProps: [src_exports.space, widthStyles]
 })(inputVariantStyles, frameStyle);
-const NumberFieldInput = styled("input", {
-	name: "NumberField",
+const NumberInputInput = styled("input", {
+	name: "NumberInput",
 	slot: "input",
-	label: "NumberFieldInput",
+	label: "NumberInputInput",
 	shouldForwardProp: createShouldForwardProp(["sizeToken", "isCentered"])
 })(({ theme, sizeToken, isCentered }) => {
 	const s = theme.sizes[sizeToken];
 	return {
-		flex: 1,
+		flex: "1 1 0",
 		minWidth: 0,
-		width: "100%",
+		width: 0,
 		border: "none",
 		outline: "none",
 		background: "transparent",
@@ -277,10 +275,26 @@ const NumberFieldInput = styled("input", {
 		"&:disabled": { cursor: "not-allowed" }
 	};
 });
-const NumberFieldSpinButtons = styled("span", {
-	name: "NumberField",
+const NumberInputContent = styled("span", {
+	name: "NumberInput",
+	slot: "content",
+	label: "NumberInputContent",
+	shouldForwardProp: 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 = styled("span", {
+	name: "NumberInput",
 	slot: "spinButtons",
-	label: "NumberFieldSpinButtons"
+	label: "NumberInputSpinButtons"
 })(({ theme }) => ({
 	display: "flex",
 	flexDirection: "column",
@@ -293,7 +307,8 @@ const spinStyle = ({ theme, color, isSide }) => {
 		appearance: "none",
 		display: "grid",
 		placeItems: "center",
-		flex: isSide ? "0 0 auto" : 1,
+		flex: isSide ? "0 0 auto" : "1 1 0px",
+		...!isSide && { minHeight: 0 },
 		minWidth: isSide ? theme.space[5] : theme.icon.lg,
 		padding: 0,
 		border: "none",
@@ -314,29 +329,29 @@ const sideDivider = (edge) => {
 		borderColor: "inherit"
 	} : {};
 };
-const NumberFieldIncrement = styled("button", {
-	name: "NumberField",
+const NumberInputIncrement = styled("button", {
+	name: "NumberInput",
 	slot: "increment",
-	label: "NumberFieldIncrement",
+	label: "NumberInputIncrement",
 	shouldForwardProp: spinProps
 })(spinStyle, sideDivider("borderInlineStart"));
-const NumberFieldDecrement = styled("button", {
-	name: "NumberField",
+const NumberInputDecrement = styled("button", {
+	name: "NumberInput",
 	slot: "decrement",
-	label: "NumberFieldDecrement",
+	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, onStep }) {
+function SpinButton({ direction, label, isSide, isDisabled, color, size, onStep }) {
 	const hold = useHoldRepeat(() => onStep(direction));
 	const { stop } = hold;
 	useEffect(() => {
 		if (isDisabled) stop();
 	}, [isDisabled, stop]);
-	return /* @__PURE__ */ jsx(direction === 1 ? NumberFieldIncrement : NumberFieldDecrement, {
+	return /* @__PURE__ */ jsx(direction === 1 ? NumberInputIncrement : NumberInputDecrement, {
 		type: "button",
 		tabIndex: -1,
 		"aria-label": label,
@@ -351,7 +366,7 @@ function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
 		onClick: (event) => event.detail === 0 && onStep(direction),
 		children: /* @__PURE__ */ jsx(Icon, {
 			name: getSpinIcon(direction, isSide),
-			size: "sm",
+			size,
 			color: "inherit"
 		})
 	});
@@ -364,9 +379,9 @@ function SpinButton({ direction, label, isSide, isDisabled, color, onStep }) {
 * 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 NumberField({ 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, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+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 = useTheme();
-	const dp = useDefaultProps("NumberField");
+	const dp = useDefaultProps("NumberInput");
 	const isInField = useContext(FormControlContext) !== null;
 	const fc = useFormControl({
 		id: idProp,
@@ -384,7 +399,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 	const spinButtons = spinButtonsProp ?? dp.spinButtons ?? "stacked";
 	const step = stepProp ?? dp.step ?? 1;
 	const isFrozen = fc.disabled || readOnly;
-	const field = useNumberField({
+	const field = useNumberInput({
 		value,
 		defaultValue,
 		onChange,
@@ -405,6 +420,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 	const buttonProps = {
 		isSide,
 		color,
+		size: fc.size,
 		onStep: field.stepBy
 	};
 	const decrement = /* @__PURE__ */ jsx(SpinButton, {
@@ -420,7 +436,7 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 		...buttonProps
 	});
 	const inputMode = (min ?? -1) >= 0 && Number.isInteger(step) ? "numeric" : "decimal";
-	return /* @__PURE__ */ jsxs(NumberFieldRoot, {
+	return /* @__PURE__ */ jsxs(NumberInputRoot, {
 		color,
 		textColor,
 		variant,
@@ -433,7 +449,12 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 		...rest,
 		children: [
 			isSide && decrement,
-			/* @__PURE__ */ jsx(NumberFieldInput, {
+			startContent != null && /* @__PURE__ */ jsx(NumberInputContent, {
+				edge: "start",
+				sizeToken: fc.size,
+				children: startContent
+			}),
+			/* @__PURE__ */ jsx(NumberInputInput, {
 				ref: inputRef,
 				type: "text",
 				role: "spinbutton",
@@ -465,10 +486,15 @@ function NumberField({ value, defaultValue, onChange, onChangeCommitted, min, ma
 				value: field.value ?? "",
 				disabled: fc.disabled
 			}),
-			spinButtons === "stacked" && /* @__PURE__ */ jsxs(NumberFieldSpinButtons, { children: [increment, decrement] }),
+			endContent != null && /* @__PURE__ */ jsx(NumberInputContent, {
+				edge: "end",
+				sizeToken: fc.size,
+				children: endContent
+			}),
+			spinButtons === "stacked" && /* @__PURE__ */ jsxs(NumberInputSpinButtons, { children: [increment, decrement] }),
 			isSide && increment
 		]
 	});
 }
 //#endregion
-export { NumberField };
+export { NumberInput };