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

package/dist/NavTree/NavTree.d.mts

@@ -0,0 +1,14 @@
+import { dn as FlexProps, nt as Theme } from "../index-CR8qkP8U.mjs";
+interface NavTreeProps extends FlexProps {
+  /** Palette color of the current page's pill, a hovered link and the focus ring - resolves to `theme.palette`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+}
+/**
+ * @description A tree of links to the pages of a site: its `NavGroup`s, each with its `NavLink`s,
+ * and any link of its own. It is a column of plain markup - links and lists, nothing that needs
+ * JavaScript - so it is in the server-rendered page and works with scripts off; a group that
+ * folds is a native `details`. Put it in a landmark of your own - a `nav`, or the panel of a
+ * `Sidebar`. Any `Flex` prop applies.
+ */
+declare function NavTree({ color, ...rest }: Readonly<NavTreeProps>): import("react").JSX.Element;
+export { NavTree, NavTreeProps };

package/dist/NavTree/NavTree.mjs

@@ -0,0 +1,28 @@
+import { o as styled } from "../src-B-rNjHIL.mjs";
+import { Flex } from "../Flex.mjs";
+import { t as NavTreeContext } from "../NavTreeContext-Cs0zC5hK.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/NavTree/NavTree/NavTree.tsx
+const NavTreeRoot = styled(Flex, {
+	name: "NavTree",
+	label: "NavTree"
+})(({ theme }) => ({
+	flexDirection: "column",
+	gap: theme.space[1]
+}));
+/**
+* @description A tree of links to the pages of a site: its `NavGroup`s, each with its `NavLink`s,
+* and any link of its own. It is a column of plain markup - links and lists, nothing that needs
+* JavaScript - so it is in the server-rendered page and works with scripts off; a group that
+* folds is a native `details`. Put it in a landmark of your own - a `nav`, or the panel of a
+* `Sidebar`. Any `Flex` prop applies.
+*/
+function NavTree({ color = "primary", ...rest }) {
+	const context = useMemo(() => ({ color }), [color]);
+	return /* @__PURE__ */ jsx(NavTreeContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(NavTreeRoot, { ...rest })
+	});
+}
+export { NavTree };

package/dist/NavTree.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_NavTree_NavTree = require("./NavTree/NavTree.cjs");
+const require_NavTree_NavGroup = require("./NavTree/NavGroup.cjs");
+const require_NavTree_NavLink = require("./NavTree/NavLink.cjs");
+exports.NavGroup = require_NavTree_NavGroup.NavGroup;
+exports.NavLink = require_NavTree_NavLink.NavLink;
+exports.NavTree = require_NavTree_NavTree.NavTree;

package/dist/NavTree.d.cts

@@ -0,0 +1,4 @@
+import { NavGroup, NavGroupProps } from "./NavTree/NavGroup.cjs";
+import { NavLink, NavLinkProps } from "./NavTree/NavLink.cjs";
+import { NavTree, NavTreeProps } from "./NavTree/NavTree.cjs";
+export { NavGroup, NavGroupProps, NavLink, NavLinkProps, NavTree, NavTreeProps };

package/dist/NavTree.d.mts

@@ -0,0 +1,4 @@
+import { NavGroup, NavGroupProps } from "./NavTree/NavGroup.mjs";
+import { NavLink, NavLinkProps } from "./NavTree/NavLink.mjs";
+import { NavTree, NavTreeProps } from "./NavTree/NavTree.mjs";
+export { NavGroup, NavGroupProps, NavLink, NavLinkProps, NavTree, NavTreeProps };

package/dist/NavTree.mjs

@@ -0,0 +1,4 @@
+import { NavTree } from "./NavTree/NavTree.mjs";
+import { NavGroup } from "./NavTree/NavGroup.mjs";
+import { NavLink } from "./NavTree/NavLink.mjs";
+export { NavGroup, NavLink, NavTree };

package/dist/NavTreeContext-Cs0zC5hK.mjs

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+// src/NavTree/NavTreeContext.ts
+const NavTreeContext = createContext({ color: "primary" });
+export { NavTreeContext as t };

package/dist/NavTreeContext-DrxNyII8.cjs

@@ -0,0 +1,8 @@
+// src/NavTree/NavTreeContext.ts
+const NavTreeContext = (0, require("react").createContext)({ color: "primary" });
+Object.defineProperty(exports, "NavTreeContext", {
+	enumerable: true,
+	get: function() {
+		return NavTreeContext;
+	}
+});

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_src = require("./src-yC1f5WR2.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_Icon = require("./Icon-D-EWsBVg.cjs");
-const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.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");
+const require_precision = require("./precision-DbF9gToz.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
+// 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
@@ -46,8 +46,7 @@ function useHoldRepeat(action, { delay = 400, interval = 60 } = {}) {
 		stop
 	};
 }
-//#endregion
-//#region src/NumberField/utils/number.ts
+// 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,
@@ -100,15 +99,14 @@ function parseNumber(text, syntax) {
 	const signed = isNegative ? -parsed : parsed;
 	return syntax.isPercent ? Number((signed / 100).toFixed(require_precision.getDecimalPrecision(parsed) + 2)) : signed;
 }
-//#endregion
-//#region src/NumberField/hooks/useNumberField.ts
+// 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
@@ -177,8 +175,7 @@ function useNumberField({ value: valueProp, defaultValue, onChange, onChangeComm
 		stepBy
 	};
 }
-//#endregion
-//#region src/NumberField/hooks/useWheelStep.ts
+// 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.
@@ -200,8 +197,7 @@ function useWheelStep(ref, isEnabled, onStep) {
 		return () => element.removeEventListener("wheel", handleWheel);
 	}, [ref, isEnabled]);
 }
-//#endregion
-//#region src/NumberField/NumberField.tsx
+// src/NumberInput/NumberInput.tsx
 const widthStyles = (0, require_src.src_exports.system)({
 	width: true,
 	minWidth: true,
@@ -215,6 +211,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 +220,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 +228,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 +243,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 +273,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 +305,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 +327,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 +364,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 +377,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 +397,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 +418,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 +434,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 +447,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 +484,14 @@ 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,9 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.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'> {
+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 +31,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 +73,5 @@ 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;
-//#endregion
-export { NumberField, NumberFieldProps, NumberFieldSpinButtons, NumberFieldVariant };
+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;
+export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };

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

@@ -1,9 +1,9 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.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";
+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 +31,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 +73,5 @@ 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;
-//#endregion
-export { NumberField, NumberFieldProps, NumberFieldSpinButtons, NumberFieldVariant };
+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;
+export { NumberInput, NumberInputProps, NumberInputSpinButtons, NumberInputVariant };