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

package/dist/{InputRange.cjs → RangeInput.cjs}

@@ -1,15 +1,15 @@
 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-BxXuXRgQ.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_useControlled = require("./useControlled-C666KpQ0.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
-const require_useControlled = require("./useControlled-C666KpQ0.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/InputRange/utils/range.ts
+//#region src/RangeInput/utils/range.ts
 /** How far along the range a value is, as a percent. */
 function valueToPercent(value, min, max) {
 	return max === min ? 0 : (value - min) * 100 / (max - min);
@@ -114,7 +114,7 @@ function getValueAtPoint({ x, y, rect, orientation, isRtl, min, max, step, marks
 	return require_utils.clamp(markValues[findClosest(markValues, raw)], min, max);
 }
 //#endregion
-//#region src/InputRange/hooks/useInputRange.ts
+//#region src/RangeInput/hooks/useRangeInput.ts
 const NONE = -1;
 function withTarget(event, target) {
 	const native = event.nativeEvent;
@@ -130,7 +130,7 @@ function withTarget(event, target) {
 * pressed, hovered or focused, and the handlers - the pointer's on the root, which keeps the
 * pointer while it drags, and the keys' and the native input's on each thumb's own input.
 */
-function useInputRange({ value: valueProp, defaultValue, min, max, step, shiftStep, marks, orientation, shouldSwapThumbs, isDisabled, name, rootRef, onChange, onChangeCommitted }) {
+function useRangeInput({ value: valueProp, defaultValue, min, max, step, shiftStep, marks, orientation, shouldSwapThumbs, isDisabled, name, rootRef, onChange, onChangeCommitted }) {
 	const [value, setValue] = require_useControlled.useControlled({
 		controlled: valueProp,
 		default: defaultValue ?? min
@@ -265,7 +265,7 @@ function useInputRange({ value: valueProp, defaultValue, min, max, step, shiftSt
 	};
 }
 //#endregion
-//#region src/InputRange/InputRange.tsx
+//#region src/RangeInput/RangeInput.tsx
 const RAIL = {
 	sm: .25,
 	md: .5,
@@ -280,9 +280,9 @@ const layoutStyles = (0, require_src.src_exports.system)({
 	minHeight: true,
 	maxHeight: true
 });
-const InputRangeRoot = require_src.styled("span", {
-	name: "InputRange",
-	label: "InputRange",
+const RangeInputRoot = require_src.styled("span", {
+	name: "RangeInput",
+	label: "RangeInput",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		..._soroush_tech_styled_system_should_forward_prop.props,
 		"size",
@@ -292,11 +292,13 @@ const InputRangeRoot = require_src.styled("span", {
 	systemProps: [require_src.src_exports.space, layoutStyles]
 })(({ theme, size, orientation, isDisabled }) => {
 	const thumb = theme.icon[size];
+	const isVertical = orientation === "vertical";
 	return {
 		position: "relative",
 		display: "block",
 		boxSizing: "border-box",
-		...orientation === "vertical" ? {
+		...!isVertical && { alignSelf: "stretch" },
+		...isVertical ? {
 			width: thumb,
 			height: "12rem",
 			marginBlock: `calc(${thumb} / 2)`
@@ -314,10 +316,10 @@ const InputRangeRoot = require_src.styled("span", {
 		}
 	};
 });
-const InputRangeRail = require_src.styled("span", {
-	name: "InputRange",
+const RangeInputRail = require_src.styled("span", {
+	name: "RangeInput",
 	slot: "rail",
-	label: "InputRangeRail",
+	label: "RangeInputRail",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		"size",
 		"orientation",
@@ -346,10 +348,10 @@ const InputRangeRail = require_src.styled("span", {
 		}
 	};
 });
-const InputRangeTrack = require_src.styled("span", {
-	name: "InputRange",
+const RangeInputTrack = require_src.styled("span", {
+	name: "RangeInput",
 	slot: "track",
-	label: "InputRangeTrack",
+	label: "RangeInputTrack",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		"size",
 		"orientation",
@@ -377,10 +379,10 @@ const InputRangeTrack = require_src.styled("span", {
 		}
 	};
 });
-const InputRangeMark = require_src.styled("span", {
-	name: "InputRange",
+const RangeInputMark = require_src.styled("span", {
+	name: "RangeInput",
 	slot: "mark",
-	label: "InputRangeMark",
+	label: "RangeInputMark",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		"size",
 		"orientation",
@@ -409,10 +411,10 @@ const InputRangeMark = require_src.styled("span", {
 		}
 	};
 });
-const InputRangeMarkLabel = require_src.styled("span", {
-	name: "InputRange",
+const RangeInputMarkLabel = require_src.styled("span", {
+	name: "RangeInput",
 	slot: "markLabel",
-	label: "InputRangeMarkLabel",
+	label: "RangeInputMarkLabel",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["size", "orientation"])
 })(({ theme, size, orientation }) => {
 	const thumb = theme.icon[size];
@@ -432,10 +434,10 @@ const InputRangeMarkLabel = require_src.styled("span", {
 		}
 	};
 });
-const InputRangeThumb = require_src.styled("span", {
-	name: "InputRange",
+const RangeInputThumb = require_src.styled("span", {
+	name: "RangeInput",
 	slot: "thumb",
-	label: "InputRangeThumb",
+	label: "RangeInputThumb",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		"size",
 		"orientation",
@@ -473,10 +475,10 @@ const InputRangeThumb = require_src.styled("span", {
 		}
 	};
 });
-const InputRangeInput = require_src.styled("input", {
-	name: "InputRange",
+const RangeInputInput = require_src.styled("input", {
+	name: "RangeInput",
 	slot: "input",
-	label: "InputRangeInput",
+	label: "RangeInputInput",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["orientation"])
 })(({ orientation }) => ({
 	position: "absolute",
@@ -489,10 +491,10 @@ const InputRangeInput = require_src.styled("input", {
 	pointerEvents: "none",
 	...orientation === "vertical" && { writingMode: "vertical-lr" }
 }));
-const InputRangeValueLabel = require_src.styled("span", {
-	name: "InputRange",
+const RangeInputValueLabel = require_src.styled("span", {
+	name: "RangeInput",
 	slot: "valueLabel",
-	label: "InputRangeValueLabel",
+	label: "RangeInputValueLabel",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		"color",
 		"orientation",
@@ -531,8 +533,8 @@ const place = (orientation, percent) => orientation === "vertical" ? { bottom: `
 * In a `FormControl` it takes the field's size, color, error, and disabled state, and its
 * `FormLabel` targets the first thumb.
 */
-function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale = (entry) => entry, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
-	const dp = require_theme.useDefaultProps("InputRange");
+function RangeInput({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale = (entry) => entry, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+	const dp = require_theme.useDefaultProps("RangeInput");
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		error: errorProp,
@@ -548,7 +550,7 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 	const marks = getMarks(marksProp ?? false, step, min, max);
 	const rootRef = (0, react.useRef)(null);
 	const baseId = (0, react.useId)();
-	const range = useInputRange({
+	const range = useRangeInput({
 		value,
 		defaultValue,
 		min,
@@ -586,7 +588,7 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 		insetInlineStart: `${trackStart}%`,
 		width: `${trackEnd - trackStart}%`
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputRangeRoot, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RangeInputRoot, {
 		ref: rootRef,
 		isDisabled: fc.disabled,
 		className,
@@ -595,25 +597,25 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 		...range.rootProps,
 		...rest,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeRail, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeInputRail, {
 				color,
 				isInverted,
 				...axis
 			}),
-			track !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeTrack, {
+			track !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeInputTrack, {
 				color,
 				isInverted,
 				isDragging,
 				style: trackStyle,
 				...axis
 			}),
-			marks.filter((mark) => mark.value >= min && mark.value <= max).map((mark) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeMark, {
+			marks.filter((mark) => mark.value >= min && mark.value <= max).map((mark) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeInputMark, {
 				"data-mark": mark.value,
 				color,
 				isActive: isMarkActive(mark.value),
 				style: place(orientation, valueToPercent(mark.value, min, max)),
 				...axis
-			}), mark.label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeMarkLabel, {
+			}), mark.label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeInputMarkLabel, {
 				"aria-hidden": true,
 				style: place(orientation, valueToPercent(mark.value, min, max)),
 				...axis,
@@ -627,7 +629,7 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 				].includes(index);
 				const zIndex = range.lastUsed === index ? 1 : void 0;
 				const input = range.getInputProps(index);
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputRangeThumb, {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RangeInputThumb, {
 					"data-index": index,
 					color,
 					isActive: range.active === index,
@@ -638,13 +640,13 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 					},
 					...axis,
 					...range.getThumbProps(index),
-					children: [valueLabel !== "off" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeValueLabel, {
+					children: [valueLabel !== "off" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeInputValueLabel, {
 						"aria-hidden": true,
 						color,
 						orientation,
 						isOpen: isShown,
 						children: formatValueLabel ? formatValueLabel(scale(thumbValue), index) : scale(thumbValue)
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeInput, {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeInputInput, {
 						type: "range",
 						orientation,
 						"data-index": index,
@@ -672,4 +674,4 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 	});
 }
 //#endregion
-exports.InputRange = InputRange;
+exports.RangeInput = RangeInput;

package/dist/{InputRange.d.mts → RangeInput.d.cts}

@@ -1,7 +1,7 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
-//#region src/InputRange/utils/range.d.ts
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+//#region src/RangeInput/utils/range.d.ts
 /** A tick on the rail, with a label under it when it has one. */
 interface Mark {
   value: number;
@@ -9,21 +9,21 @@ interface Mark {
 }
 type Orientation = 'horizontal' | 'vertical';
 //#endregion
-//#region src/InputRange/hooks/useInputRange.d.ts
-type InputRangeValue = number | number[];
+//#region src/RangeInput/hooks/useRangeInput.d.ts
+type RangeInputValue = number | number[];
 //#endregion
-//#region src/InputRange/InputRange.d.ts
-type InputRangeTrack = 'normal' | false | 'inverted';
-type InputRangeValueLabel = 'auto' | 'on' | 'off';
-interface InputRangeProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'> {
+//#region src/RangeInput/RangeInput.d.ts
+type RangeInputTrack = 'normal' | false | 'inverted';
+type RangeInputValueLabel = 'auto' | 'on' | 'off';
+interface RangeInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'> {
   /** The value - a number for one thumb, an array for one per entry. Controlled with `onChange`. */
   value?: number | readonly number[];
   /** The value at first, when uncontrolled. Default: `min`. */
   defaultValue?: number | readonly number[];
   /** Fired as the value changes. `event.target` is `{ value, name }`, as a form library reads it. */
-  onChange?: (event: Event, value: InputRangeValue, activeThumb: number) => void;
+  onChange?: (event: Event, value: RangeInputValue, activeThumb: number) => void;
   /** Fired when a change is done: on release, and after every key. */
-  onChangeCommitted?: (event: Event | React.SyntheticEvent, value: InputRangeValue) => void;
+  onChangeCommitted?: (event: Event | React.SyntheticEvent, value: RangeInputValue) => void;
   /** Default: `0`. */
   min?: number;
   /** Default: `100`. */
@@ -36,11 +36,11 @@ interface InputRangeProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'w
   marks?: boolean | readonly Mark[];
   orientation?: Orientation;
   /** The line between the thumbs - `'inverted'` fills the rest, `false` draws none. Default: `'normal'`. */
-  track?: InputRangeTrack;
+  track?: RangeInputTrack;
   /** The value as it is shown and announced - not what is stored. Default: itself. */
   scale?: (value: number) => number;
   /** When a thumb shows its value: always, while hovered or focused, or never. Default: `'off'`. */
-  valueLabel?: InputRangeValueLabel;
+  valueLabel?: RangeInputValueLabel;
   /** What the label says. Default: the scaled value. */
   formatValueLabel?: (value: number, index: number) => ReactNode;
   /** Names each thumb - no built-in text. A range needs one; a single thumb may take `aria-label`. */
@@ -74,6 +74,6 @@ interface InputRangeProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'w
  * In a `FormControl` it takes the field's size, color, error, and disabled state, and its
  * `FormLabel` targets the first thumb.
  */
-declare function InputRange({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<InputRangeProps>): import("react").JSX.Element;
+declare function RangeInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<RangeInputProps>): import("react").JSX.Element;
 //#endregion
-export { InputRange, type Mark as InputRangeMark, InputRangeProps, InputRangeTrack, InputRangeValueLabel };
+export { RangeInput, type Mark as RangeInputMark, RangeInputProps, RangeInputTrack, RangeInputValueLabel };

package/dist/{InputRange.d.cts → RangeInput.d.mts}

@@ -1,7 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/InputRange/utils/range.d.ts
+import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
+//#region src/RangeInput/utils/range.d.ts
 /** A tick on the rail, with a label under it when it has one. */
 interface Mark {
   value: number;
@@ -9,21 +9,21 @@ interface Mark {
 }
 type Orientation = 'horizontal' | 'vertical';
 //#endregion
-//#region src/InputRange/hooks/useInputRange.d.ts
-type InputRangeValue = number | number[];
+//#region src/RangeInput/hooks/useRangeInput.d.ts
+type RangeInputValue = number | number[];
 //#endregion
-//#region src/InputRange/InputRange.d.ts
-type InputRangeTrack = 'normal' | false | 'inverted';
-type InputRangeValueLabel = 'auto' | 'on' | 'off';
-interface InputRangeProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'> {
+//#region src/RangeInput/RangeInput.d.ts
+type RangeInputTrack = 'normal' | false | 'inverted';
+type RangeInputValueLabel = 'auto' | 'on' | 'off';
+interface RangeInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight'> {
   /** The value - a number for one thumb, an array for one per entry. Controlled with `onChange`. */
   value?: number | readonly number[];
   /** The value at first, when uncontrolled. Default: `min`. */
   defaultValue?: number | readonly number[];
   /** Fired as the value changes. `event.target` is `{ value, name }`, as a form library reads it. */
-  onChange?: (event: Event, value: InputRangeValue, activeThumb: number) => void;
+  onChange?: (event: Event, value: RangeInputValue, activeThumb: number) => void;
   /** Fired when a change is done: on release, and after every key. */
-  onChangeCommitted?: (event: Event | React.SyntheticEvent, value: InputRangeValue) => void;
+  onChangeCommitted?: (event: Event | React.SyntheticEvent, value: RangeInputValue) => void;
   /** Default: `0`. */
   min?: number;
   /** Default: `100`. */
@@ -36,11 +36,11 @@ interface InputRangeProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'w
   marks?: boolean | readonly Mark[];
   orientation?: Orientation;
   /** The line between the thumbs - `'inverted'` fills the rest, `false` draws none. Default: `'normal'`. */
-  track?: InputRangeTrack;
+  track?: RangeInputTrack;
   /** The value as it is shown and announced - not what is stored. Default: itself. */
   scale?: (value: number) => number;
   /** When a thumb shows its value: always, while hovered or focused, or never. Default: `'off'`. */
-  valueLabel?: InputRangeValueLabel;
+  valueLabel?: RangeInputValueLabel;
   /** What the label says. Default: the scaled value. */
   formatValueLabel?: (value: number, index: number) => ReactNode;
   /** Names each thumb - no built-in text. A range needs one; a single thumb may take `aria-label`. */
@@ -74,6 +74,6 @@ interface InputRangeProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'w
  * In a `FormControl` it takes the field's size, color, error, and disabled state, and its
  * `FormLabel` targets the first thumb.
  */
-declare function InputRange({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<InputRangeProps>): import("react").JSX.Element;
+declare function RangeInput({ value, defaultValue, onChange, onChangeCommitted, min, max, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...rest }: Readonly<RangeInputProps>): import("react").JSX.Element;
 //#endregion
-export { InputRange, type Mark as InputRangeMark, InputRangeProps, InputRangeTrack, InputRangeValueLabel };
+export { RangeInput, type Mark as RangeInputMark, RangeInputProps, RangeInputTrack, RangeInputValueLabel };

package/dist/{InputRange.mjs → RangeInput.mjs}

@@ -1,13 +1,13 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { clamp } from "./utils.mjs";
-import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
-import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
 import { i as snapToStep, t as addExact } from "./precision-B1lhxnnO.mjs";
 import { Fragment, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/InputRange/utils/range.ts
+//#region src/RangeInput/utils/range.ts
 /** How far along the range a value is, as a percent. */
 function valueToPercent(value, min, max) {
 	return max === min ? 0 : (value - min) * 100 / (max - min);
@@ -112,7 +112,7 @@ function getValueAtPoint({ x, y, rect, orientation, isRtl, min, max, step, marks
 	return clamp(markValues[findClosest(markValues, raw)], min, max);
 }
 //#endregion
-//#region src/InputRange/hooks/useInputRange.ts
+//#region src/RangeInput/hooks/useRangeInput.ts
 const NONE = -1;
 function withTarget(event, target) {
 	const native = event.nativeEvent;
@@ -128,7 +128,7 @@ function withTarget(event, target) {
 * pressed, hovered or focused, and the handlers - the pointer's on the root, which keeps the
 * pointer while it drags, and the keys' and the native input's on each thumb's own input.
 */
-function useInputRange({ value: valueProp, defaultValue, min, max, step, shiftStep, marks, orientation, shouldSwapThumbs, isDisabled, name, rootRef, onChange, onChangeCommitted }) {
+function useRangeInput({ value: valueProp, defaultValue, min, max, step, shiftStep, marks, orientation, shouldSwapThumbs, isDisabled, name, rootRef, onChange, onChangeCommitted }) {
 	const [value, setValue] = useControlled({
 		controlled: valueProp,
 		default: defaultValue ?? min
@@ -263,7 +263,7 @@ function useInputRange({ value: valueProp, defaultValue, min, max, step, shiftSt
 	};
 }
 //#endregion
-//#region src/InputRange/InputRange.tsx
+//#region src/RangeInput/RangeInput.tsx
 const RAIL = {
 	sm: .25,
 	md: .5,
@@ -278,9 +278,9 @@ const layoutStyles = (0, src_exports.system)({
 	minHeight: true,
 	maxHeight: true
 });
-const InputRangeRoot = styled("span", {
-	name: "InputRange",
-	label: "InputRange",
+const RangeInputRoot = styled("span", {
+	name: "RangeInput",
+	label: "RangeInput",
 	shouldForwardProp: createShouldForwardProp([
 		...props,
 		"size",
@@ -290,11 +290,13 @@ const InputRangeRoot = styled("span", {
 	systemProps: [src_exports.space, layoutStyles]
 })(({ theme, size, orientation, isDisabled }) => {
 	const thumb = theme.icon[size];
+	const isVertical = orientation === "vertical";
 	return {
 		position: "relative",
 		display: "block",
 		boxSizing: "border-box",
-		...orientation === "vertical" ? {
+		...!isVertical && { alignSelf: "stretch" },
+		...isVertical ? {
 			width: thumb,
 			height: "12rem",
 			marginBlock: `calc(${thumb} / 2)`
@@ -312,10 +314,10 @@ const InputRangeRoot = styled("span", {
 		}
 	};
 });
-const InputRangeRail = styled("span", {
-	name: "InputRange",
+const RangeInputRail = styled("span", {
+	name: "RangeInput",
 	slot: "rail",
-	label: "InputRangeRail",
+	label: "RangeInputRail",
 	shouldForwardProp: createShouldForwardProp([
 		"size",
 		"orientation",
@@ -344,10 +346,10 @@ const InputRangeRail = styled("span", {
 		}
 	};
 });
-const InputRangeTrack = styled("span", {
-	name: "InputRange",
+const RangeInputTrack = styled("span", {
+	name: "RangeInput",
 	slot: "track",
-	label: "InputRangeTrack",
+	label: "RangeInputTrack",
 	shouldForwardProp: createShouldForwardProp([
 		"size",
 		"orientation",
@@ -375,10 +377,10 @@ const InputRangeTrack = styled("span", {
 		}
 	};
 });
-const InputRangeMark = styled("span", {
-	name: "InputRange",
+const RangeInputMark = styled("span", {
+	name: "RangeInput",
 	slot: "mark",
-	label: "InputRangeMark",
+	label: "RangeInputMark",
 	shouldForwardProp: createShouldForwardProp([
 		"size",
 		"orientation",
@@ -407,10 +409,10 @@ const InputRangeMark = styled("span", {
 		}
 	};
 });
-const InputRangeMarkLabel = styled("span", {
-	name: "InputRange",
+const RangeInputMarkLabel = styled("span", {
+	name: "RangeInput",
 	slot: "markLabel",
-	label: "InputRangeMarkLabel",
+	label: "RangeInputMarkLabel",
 	shouldForwardProp: createShouldForwardProp(["size", "orientation"])
 })(({ theme, size, orientation }) => {
 	const thumb = theme.icon[size];
@@ -430,10 +432,10 @@ const InputRangeMarkLabel = styled("span", {
 		}
 	};
 });
-const InputRangeThumb = styled("span", {
-	name: "InputRange",
+const RangeInputThumb = styled("span", {
+	name: "RangeInput",
 	slot: "thumb",
-	label: "InputRangeThumb",
+	label: "RangeInputThumb",
 	shouldForwardProp: createShouldForwardProp([
 		"size",
 		"orientation",
@@ -471,10 +473,10 @@ const InputRangeThumb = styled("span", {
 		}
 	};
 });
-const InputRangeInput = styled("input", {
-	name: "InputRange",
+const RangeInputInput = styled("input", {
+	name: "RangeInput",
 	slot: "input",
-	label: "InputRangeInput",
+	label: "RangeInputInput",
 	shouldForwardProp: createShouldForwardProp(["orientation"])
 })(({ orientation }) => ({
 	position: "absolute",
@@ -487,10 +489,10 @@ const InputRangeInput = styled("input", {
 	pointerEvents: "none",
 	...orientation === "vertical" && { writingMode: "vertical-lr" }
 }));
-const InputRangeValueLabel = styled("span", {
-	name: "InputRange",
+const RangeInputValueLabel = styled("span", {
+	name: "RangeInput",
 	slot: "valueLabel",
-	label: "InputRangeValueLabel",
+	label: "RangeInputValueLabel",
 	shouldForwardProp: createShouldForwardProp([
 		"color",
 		"orientation",
@@ -529,8 +531,8 @@ const place = (orientation, percent) => orientation === "vertical" ? { bottom: `
 * In a `FormControl` it takes the field's size, color, error, and disabled state, and its
 * `FormLabel` targets the first thumb.
 */
-function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale = (entry) => entry, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
-	const dp = useDefaultProps("InputRange");
+function RangeInput({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale = (entry) => entry, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+	const dp = useDefaultProps("RangeInput");
 	const fc = useFormControl({
 		id: idProp,
 		error: errorProp,
@@ -546,7 +548,7 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 	const marks = getMarks(marksProp ?? false, step, min, max);
 	const rootRef = useRef(null);
 	const baseId = useId();
-	const range = useInputRange({
+	const range = useRangeInput({
 		value,
 		defaultValue,
 		min,
@@ -584,7 +586,7 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 		insetInlineStart: `${trackStart}%`,
 		width: `${trackEnd - trackStart}%`
 	};
-	return /* @__PURE__ */ jsxs(InputRangeRoot, {
+	return /* @__PURE__ */ jsxs(RangeInputRoot, {
 		ref: rootRef,
 		isDisabled: fc.disabled,
 		className,
@@ -593,25 +595,25 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 		...range.rootProps,
 		...rest,
 		children: [
-			/* @__PURE__ */ jsx(InputRangeRail, {
+			/* @__PURE__ */ jsx(RangeInputRail, {
 				color,
 				isInverted,
 				...axis
 			}),
-			track !== false && /* @__PURE__ */ jsx(InputRangeTrack, {
+			track !== false && /* @__PURE__ */ jsx(RangeInputTrack, {
 				color,
 				isInverted,
 				isDragging,
 				style: trackStyle,
 				...axis
 			}),
-			marks.filter((mark) => mark.value >= min && mark.value <= max).map((mark) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputRangeMark, {
+			marks.filter((mark) => mark.value >= min && mark.value <= max).map((mark) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RangeInputMark, {
 				"data-mark": mark.value,
 				color,
 				isActive: isMarkActive(mark.value),
 				style: place(orientation, valueToPercent(mark.value, min, max)),
 				...axis
-			}), mark.label != null && /* @__PURE__ */ jsx(InputRangeMarkLabel, {
+			}), mark.label != null && /* @__PURE__ */ jsx(RangeInputMarkLabel, {
 				"aria-hidden": true,
 				style: place(orientation, valueToPercent(mark.value, min, max)),
 				...axis,
@@ -625,7 +627,7 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 				].includes(index);
 				const zIndex = range.lastUsed === index ? 1 : void 0;
 				const input = range.getInputProps(index);
-				return /* @__PURE__ */ jsxs(InputRangeThumb, {
+				return /* @__PURE__ */ jsxs(RangeInputThumb, {
 					"data-index": index,
 					color,
 					isActive: range.active === index,
@@ -636,13 +638,13 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 					},
 					...axis,
 					...range.getThumbProps(index),
-					children: [valueLabel !== "off" && /* @__PURE__ */ jsx(InputRangeValueLabel, {
+					children: [valueLabel !== "off" && /* @__PURE__ */ jsx(RangeInputValueLabel, {
 						"aria-hidden": true,
 						color,
 						orientation,
 						isOpen: isShown,
 						children: formatValueLabel ? formatValueLabel(scale(thumbValue), index) : scale(thumbValue)
-					}), /* @__PURE__ */ jsx(InputRangeInput, {
+					}), /* @__PURE__ */ jsx(RangeInputInput, {
 						type: "range",
 						orientation,
 						"data-index": index,
@@ -670,4 +672,4 @@ function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0,
 	});
 }
 //#endregion
-export { InputRange };
+export { RangeInput };