@funstack/ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/number-field/number-field-increment.mjs

@@ -0,0 +1,68 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { isAtBound } from "./number-field-arithmetic.mjs";
+import { useNumberFieldContext } from "./number-field-context.mjs";
+import { useStepButton } from "./use-step-button.mjs";
+//#region src/number-field/number-field-increment.tsx
+const LABELS = {
+	increment: "Increase",
+	decrement: "Decrease"
+};
+/** Shared by `NumberField.Increment` and `NumberField.Decrement` (design 3.3, 4.3). */
+function useStepButtonElement(direction, part, props) {
+	const { disabled: disabledProp = false, className, style, children, render, ...rest } = props;
+	const ctx = useNumberFieldContext(part);
+	const { state } = ctx;
+	const atBound = isAtBound(ctx.stepBase, direction === "increment" ? 1 : -1, ctx.bounds);
+	const disabled = disabledProp || state.disabled || state.readOnly || atBound;
+	const pending = ctx.pendingSource === direction;
+	const buttonState = {
+		pending,
+		disabled
+	};
+	const handlers = useStepButton(ctx, direction, disabled);
+	useDevWarning(rest["aria-label"] === "", `${part}: \`aria-label=""\` leaves the button without a name. Pass the label text instead (the default is "${LABELS[direction]}").`);
+	const props$ = {
+		...rest["aria-labelledby"] === void 0 ? { "aria-label": LABELS[direction] } : {},
+		...rest
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state: buttonState,
+		className,
+		style,
+		children,
+		props: props$,
+		libraryProps: {
+			...rendersButton(render) ? { type: "button" } : {},
+			tabIndex: -1,
+			"aria-controls": ctx.inputId,
+			disabled,
+			onPointerDown: handlers.onPointerDown,
+			onClick: handlers.onClick,
+			onContextMenu: handlers.onContextMenu,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled)
+		}
+	});
+}
+/**
+* Steps the value up: `button[type=button][tabindex=-1]` with `aria-controls` → the input and the
+* default `aria-label` `"Increase"`; one step at the press, then repeated while held, one commit
+* at the release. Natively `disabled` when the next step would change nothing.
+*
+* Owned keys: `type`, `tabIndex`, `aria-controls`, `disabled`, `onPointerDown`, `onClick`,
+* `onContextMenu`, `data-pending`, `data-disabled`.
+*/
+function NumberFieldIncrement(props) {
+	return useStepButtonElement("increment", "NumberField.Increment", props);
+}
+NumberFieldIncrement.displayName = "NumberFieldIncrement";
+//#endregion
+export { NumberFieldIncrement, useStepButtonElement };
+
+//# sourceMappingURL=number-field-increment.mjs.map

package/dist/number-field/number-field-increment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-increment.mjs","names":[],"sources":["../../src/number-field/number-field-increment.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { isAtBound } from \"./number-field-arithmetic.js\";\nimport { useNumberFieldContext } from \"./number-field-context.js\";\nimport type { StepDirection } from \"./number-field-context.js\";\nimport { useStepButton } from \"./use-step-button.js\";\n\nexport interface NumberFieldButtonState {\n  /** The Root is pending and the latest step or commit came from this button. */\n  readonly pending: boolean;\n  /** The prop, the Root's `disabled` or `readOnly`, or the next step would change nothing. */\n  readonly disabled: boolean;\n}\n\nexport interface NumberFieldIncrementProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  | \"type\"\n  | \"tabIndex\"\n  | \"disabled\"\n  | \"onPointerDown\"\n  | \"onClick\"\n  | \"onContextMenu\"\n  | \"aria-controls\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  disabled?: boolean;\n  className?: StateValue<string | undefined, NumberFieldButtonState>;\n  style?: StateValue<CSSProperties | undefined, NumberFieldButtonState>;\n  children?: StateValue<ReactNode, NumberFieldButtonState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, NumberFieldButtonState>;\n}\n\nexport type NumberFieldDecrementProps = NumberFieldIncrementProps;\n\nconst LABELS: Record<StepDirection, string> = { increment: \"Increase\", decrement: \"Decrease\" };\n\n/** Shared by `NumberField.Increment` and `NumberField.Decrement` (design 3.3, 4.3). */\nexport function useStepButtonElement(\n  direction: StepDirection,\n  part: string,\n  props: NumberFieldIncrementProps,\n): ReactNode {\n  const { disabled: disabledProp = false, className, style, children, render, ...rest } = props;\n  const ctx = useNumberFieldContext(part);\n  const { state } = ctx;\n  const atBound = isAtBound(ctx.stepBase, direction === \"increment\" ? 1 : -1, ctx.bounds);\n  const disabled = disabledProp || state.disabled || state.readOnly || atBound;\n  const pending = ctx.pendingSource === direction;\n  const buttonState: NumberFieldButtonState = { pending, disabled };\n  const handlers = useStepButton(ctx, direction, disabled);\n\n  useDevWarning(\n    rest[\"aria-label\"] === \"\",\n    `${part}: \\`aria-label=\"\"\\` leaves the button without a name. Pass the label text instead ` +\n      `(the default is \"${LABELS[direction]}\").`,\n  );\n\n  // The built-in name is a default the consumer's `aria-label` or `aria-labelledby` replaces.\n  const props$ = {\n    ...(rest[\"aria-labelledby\"] === undefined ? { \"aria-label\": LABELS[direction] } : {}),\n    ...rest,\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, NumberFieldButtonState>({\n    defaultElement: \"button\",\n    render,\n    state: buttonState,\n    className,\n    style,\n    children,\n    props: props$,\n    libraryProps: {\n      ...(rendersButton(render) ? { type: \"button\" as const } : {}),\n      tabIndex: -1,\n      \"aria-controls\": ctx.inputId,\n      disabled,\n      onPointerDown: handlers.onPointerDown,\n      onClick: handlers.onClick,\n      onContextMenu: handlers.onContextMenu,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    } as Partial<ComponentPropsWithRef<\"button\">> & DataAttributes,\n  });\n}\n\n/**\n * Steps the value up: `button[type=button][tabindex=-1]` with `aria-controls` → the input and the\n * default `aria-label` `\"Increase\"`; one step at the press, then repeated while held, one commit\n * at the release. Natively `disabled` when the next step would change nothing.\n *\n * Owned keys: `type`, `tabIndex`, `aria-controls`, `disabled`, `onPointerDown`, `onClick`,\n * `onContextMenu`, `data-pending`, `data-disabled`.\n */\nexport function NumberFieldIncrement(props: NumberFieldIncrementProps) {\n  return useStepButtonElement(\"increment\", \"NumberField.Increment\", props);\n}\n\nNumberFieldIncrement.displayName = \"NumberFieldIncrement\";\n"],"mappings":";;;;;;;;;AAyCA,MAAM,SAAwC;CAAE,WAAW;CAAY,WAAW;AAAW;;AAG7F,SAAgB,qBACd,WACA,MACA,OACW;CACX,MAAM,EAAE,UAAU,eAAe,OAAO,WAAW,OAAO,UAAU,QAAQ,GAAG,SAAS;CACxF,MAAM,MAAM,sBAAsB,IAAI;CACtC,MAAM,EAAE,UAAU;CAClB,MAAM,UAAU,UAAU,IAAI,UAAU,cAAc,cAAc,IAAI,IAAI,IAAI,MAAM;CACtF,MAAM,WAAW,gBAAgB,MAAM,YAAY,MAAM,YAAY;CACrE,MAAM,UAAU,IAAI,kBAAkB;CACtC,MAAM,cAAsC;EAAE;EAAS;CAAS;CAChE,MAAM,WAAW,cAAc,KAAK,WAAW,QAAQ;CAEvD,cACE,KAAK,kBAAkB,IACvB,GAAG,KAAK,qGACc,OAAO,WAAW,IAC1C;CAGA,MAAM,SAAS;EACb,GAAI,KAAK,uBAAuB,KAAA,IAAY,EAAE,cAAc,OAAO,WAAW,IAAI,CAAC;EACnF,GAAG;CACL;CAEA,OAAO,UAAmE;EACxE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAI,cAAc,MAAM,IAAI,EAAE,MAAM,SAAkB,IAAI,CAAC;GAC3D,UAAU;GACV,iBAAiB,IAAI;GACrB;GACA,eAAe,SAAS;GACxB,SAAS,SAAS;GAClB,eAAe,SAAS;GACxB,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;CACF,CAAC;AACH;;;;;;;;;AAUA,SAAgB,qBAAqB,OAAkC;CACrE,OAAO,qBAAqB,aAAa,yBAAyB,KAAK;AACzE;AAEA,qBAAqB,cAAc"}

package/dist/number-field/number-field-input.d.mts

@@ -0,0 +1,29 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { NumberFieldState } from "./number-field-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, Ref } from "react";
+//#region src/number-field/number-field-input.d.ts
+export interface NumberFieldInputProps extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "type" | "onChange" | "onKeyDown" | "onBlur" | "disabled" | "readOnly" | "required" | "name" | "form" | "min" | "max" | "step" | "pattern" | "aria-invalid" | "className" | "style" | "children"> {
+  /** The hidden native `<input type="number">` rendered after the visible input. */
+  hiddenInputRef?: Ref<HTMLInputElement>;
+  className?: StateValue<string | undefined, NumberFieldState>;
+  style?: StateValue<CSSProperties | undefined, NumberFieldState>;
+  /** Must render an `<input>` of type `text`, `search` or `tel`; the hidden input is rendered after it regardless. */
+  render?: RenderProp<ComponentPropsWithRef<"input">, NumberFieldState>;
+}
+/**
+ * The visible text field (`input[type=text]`, the user's surface) **followed by** the visually
+ * hidden native `input[type=number]` that carries `name`, `form`, `min`, `max`, `step`,
+ * `required` and the canonical value (design/components/number-field.md 6). `ref` goes to the
+ * visible input, `hiddenInputRef` to the hidden one.
+ *
+ * Owned keys on the visible input: `id`, `type`, `value`, `disabled`, `readOnly`, `onChange`,
+ * `onKeyDown`, `onBlur`, `aria-invalid` and `aria-describedby` (Field, token-merged),
+ * `data-pending`, `data-disabled`, `data-invalid`. Defaults the consumer's own prop replaces:
+ * `inputMode`, `autoComplete="off"`, `autoCorrect="off"`, `spellCheck={false}`.
+ */
+export declare function NumberFieldInput({ hiddenInputRef, className, style, render, ...rest }: NumberFieldInputProps): import("react").JSX.Element;
+export declare namespace NumberFieldInput {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=number-field-input.d.mts.map

package/dist/number-field/number-field-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-input.d.mts","names":[],"sources":["../../src/number-field/number-field-input.tsx"],"mappings":";;;;iBA4BiB,8BAA8B,KAC7C;;EAsBA,iBAAiB,IAAI;EACrB,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;wBAgCtC,mBACd,gBACA,WACA,OACA,WACG,QACF,wCAAqB,IAAA;yBANR"}

package/dist/number-field/number-field-input.mjs

@@ -0,0 +1,163 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { mergeRefs } from "../internal/merge-props.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useFieldControl, useMergedRef } from "../internal/use-field-control.mjs";
+import { useNumberFieldContext } from "./number-field-context.mjs";
+import { hiddenText } from "./number-field-root.mjs";
+import { isValidElement, useCallback, useEffectEvent, useLayoutEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/number-field/number-field-input.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/** Visually hidden, unfocusable, out of the accessibility tree: the form's control (6.1). */
+const HIDDEN_STYLE = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	padding: 0,
+	border: 0,
+	opacity: 0,
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	pointerEvents: "none"
+};
+const TEXT_TYPES = [
+	"text",
+	"search",
+	"tel"
+];
+/**
+* The visible text field (`input[type=text]`, the user's surface) **followed by** the visually
+* hidden native `input[type=number]` that carries `name`, `form`, `min`, `max`, `step`,
+* `required` and the canonical value (design/components/number-field.md 6). `ref` goes to the
+* visible input, `hiddenInputRef` to the hidden one.
+*
+* Owned keys on the visible input: `id`, `type`, `value`, `disabled`, `readOnly`, `onChange`,
+* `onKeyDown`, `onBlur`, `aria-invalid` and `aria-describedby` (Field, token-merged),
+* `data-pending`, `data-disabled`, `data-invalid`. Defaults the consumer's own prop replaces:
+* `inputMode`, `autoComplete="off"`, `autoCorrect="off"`, `spellCheck={false}`.
+*/
+function NumberFieldInput({ hiddenInputRef, className, style, render, ...rest }) {
+	const ctx = useNumberFieldContext("NumberField.Input");
+	const { state, visibleRef, hiddenRef, mirror, onInputMounted } = ctx;
+	const validityElement = useCallback(() => hiddenRef.current, [hiddenRef]);
+	const field = useFieldControl({
+		labelable: true,
+		name: ctx.name,
+		disabled: state.disabled,
+		required: state.required,
+		component: "NumberField.Input",
+		validityElement
+	});
+	const restName = rest.name;
+	useDevWarning(restName !== void 0, "NumberField.Input: `name` belongs on NumberField.Root (it goes to the hidden number input); on the visible input it would post the formatted text.");
+	const libraryRef = useCallback((element) => {
+		if (isDev) {
+			const type = element.tagName === "INPUT" ? element.type : "";
+			if (!TEXT_TYPES.includes(type)) console.error(`NumberField.Input: rendered <${element.tagName.toLowerCase()}${type === "" ? "" : ` type="${type}"`}>. Render an <input> of type "text", "search" or "tel": a number input would re-introduce the native parser.`);
+		}
+		visibleRef.current = element;
+		return () => {
+			if (visibleRef.current === element) visibleRef.current = null;
+		};
+	}, [visibleRef]);
+	const mergedRef = useMergedRef(libraryRef, field.ref);
+	const hiddenMergedRef = useMemo(() => mergeRefs(hiddenRef, hiddenInputRef), [hiddenRef, hiddenInputRef]);
+	useLayoutEffect(() => {
+		const hidden = hiddenRef.current;
+		if (hidden !== null) {
+			const text = hiddenText(state.value);
+			if (hidden.value !== text) hidden.value = text;
+		}
+		mirror();
+	});
+	useLayoutEffect(() => {
+		const hidden = hiddenRef.current;
+		if (hidden === null) return;
+		const onInvalid = (event) => event.preventDefault();
+		hidden.addEventListener("invalid", onInvalid);
+		return () => hidden.removeEventListener("invalid", onInvalid);
+	}, [hiddenRef]);
+	const onWheel = useEffectEvent((event) => {
+		ctx.wheel(event);
+	});
+	const { stepOnWheel } = ctx;
+	useLayoutEffect(() => {
+		const visible = visibleRef.current;
+		if (!stepOnWheel || visible === null) return;
+		visible.addEventListener("wheel", onWheel, { passive: false });
+		return () => visible.removeEventListener("wheel", onWheel);
+	}, [stepOnWheel, visibleRef]);
+	const mounted = useRef(false);
+	useLayoutEffect(() => {
+		if (mounted.current) return;
+		mounted.current = true;
+		onInputMounted();
+	}, [onInputMounted]);
+	const renderType = isValidElement(render) && typeof render.props.type === "string" ? render.props.type : void 0;
+	const type = renderType !== void 0 && TEXT_TYPES.includes(renderType) ? renderType : "text";
+	useDevWarning(renderType !== void 0 && !TEXT_TYPES.includes(renderType), `NumberField.Input: \`render\` has type="${renderType ?? ""}"; the visible input is rendered as type "text". A number input would re-introduce the native parser the NumberField exists to avoid.`);
+	const dataInvalid = ctx.fieldInvalid === void 0 ? {} : { "data-invalid": dataAttr(ctx.fieldInvalid) };
+	const libraryProps = {
+		...field.attributes,
+		id: ctx.inputId,
+		type,
+		value: state.text,
+		disabled: state.disabled,
+		readOnly: state.readOnly,
+		onChange: (event) => {
+			ctx.typed(event.currentTarget.value);
+		},
+		onKeyDown: (event) => {
+			ctx.keyDown(event.nativeEvent);
+		},
+		onBlur: (event) => {
+			ctx.commitDraft(event.nativeEvent);
+		},
+		"data-pending": dataAttr(state.pending),
+		"data-disabled": dataAttr(state.disabled),
+		...dataInvalid
+	};
+	const visible = useRender({
+		defaultElement: "input",
+		render,
+		state,
+		className,
+		style,
+		children: void 0,
+		props: {
+			inputMode: ctx.allowsFractions ? "decimal" : "numeric",
+			autoComplete: "off",
+			autoCorrect: "off",
+			spellCheck: false,
+			...rest
+		},
+		libraryProps,
+		ref: mergedRef
+	});
+	const { min, max, step } = ctx.bounds;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [visible, /* @__PURE__ */ jsx("input", {
+		ref: hiddenMergedRef,
+		type: "number",
+		name: field.name,
+		form: ctx.form,
+		min,
+		max,
+		step,
+		required: field.required,
+		disabled: field.disabled,
+		readOnly: state.readOnly,
+		defaultValue: ctx.resetTargetText,
+		autoComplete: "off",
+		"aria-hidden": "true",
+		tabIndex: -1,
+		style: HIDDEN_STYLE
+	})] });
+}
+NumberFieldInput.displayName = "NumberFieldInput";
+//#endregion
+export { NumberFieldInput };
+
+//# sourceMappingURL=number-field-input.mjs.map

package/dist/number-field/number-field-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-input.mjs","names":[],"sources":["../../src/number-field/number-field-input.tsx"],"sourcesContent":["\"use client\";\nimport {\n  isValidElement,\n  useCallback,\n  useEffectEvent,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type {\n  ChangeEvent,\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  Ref,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { mergeRefs } from \"../internal/merge-props.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useFieldControl, useMergedRef } from \"../internal/use-field-control.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { hiddenText } from \"./number-field-root.js\";\nimport type { NumberFieldState } from \"./number-field-root.js\";\nimport { useNumberFieldContext } from \"./number-field-context.js\";\n\nexport interface NumberFieldInputProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"type\"\n  | \"onChange\"\n  | \"onKeyDown\"\n  | \"onBlur\"\n  | \"disabled\"\n  | \"readOnly\"\n  | \"required\"\n  | \"name\"\n  | \"form\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"pattern\"\n  | \"aria-invalid\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** The hidden native `<input type=\"number\">` rendered after the visible input. */\n  hiddenInputRef?: Ref<HTMLInputElement>;\n  className?: StateValue<string | undefined, NumberFieldState>;\n  style?: StateValue<CSSProperties | undefined, NumberFieldState>;\n  /** Must render an `<input>` of type `text`, `search` or `tel`; the hidden input is rendered after it regardless. */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, NumberFieldState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Visually hidden, unfocusable, out of the accessibility tree: the form's control (6.1). */\nconst HIDDEN_STYLE: CSSProperties = {\n  position: \"absolute\",\n  width: \"1px\",\n  height: \"1px\",\n  margin: \"-1px\",\n  padding: 0,\n  border: 0,\n  opacity: 0,\n  overflow: \"hidden\",\n  clipPath: \"inset(50%)\",\n  pointerEvents: \"none\",\n};\n\nconst TEXT_TYPES = [\"text\", \"search\", \"tel\"];\n\n/**\n * The visible text field (`input[type=text]`, the user's surface) **followed by** the visually\n * hidden native `input[type=number]` that carries `name`, `form`, `min`, `max`, `step`,\n * `required` and the canonical value (design/components/number-field.md 6). `ref` goes to the\n * visible input, `hiddenInputRef` to the hidden one.\n *\n * Owned keys on the visible input: `id`, `type`, `value`, `disabled`, `readOnly`, `onChange`,\n * `onKeyDown`, `onBlur`, `aria-invalid` and `aria-describedby` (Field, token-merged),\n * `data-pending`, `data-disabled`, `data-invalid`. Defaults the consumer's own prop replaces:\n * `inputMode`, `autoComplete=\"off\"`, `autoCorrect=\"off\"`, `spellCheck={false}`.\n */\nexport function NumberFieldInput({\n  hiddenInputRef,\n  className,\n  style,\n  render,\n  ...rest\n}: NumberFieldInputProps) {\n  const ctx = useNumberFieldContext(\"NumberField.Input\");\n  const { state, visibleRef, hiddenRef, mirror, onInputMounted } = ctx;\n\n  // --- The Field contract (design 7.1): the visible input registers, the hidden one validates.\n  const validityElement = useCallback(() => hiddenRef.current, [hiddenRef]);\n  const field = useFieldControl({\n    labelable: true,\n    name: ctx.name,\n    disabled: state.disabled,\n    required: state.required,\n    component: \"NumberField.Input\",\n    validityElement,\n  });\n\n  const restName = (rest as { name?: unknown }).name;\n  useDevWarning(\n    restName !== undefined,\n    \"NumberField.Input: `name` belongs on NumberField.Root (it goes to the hidden number input); \" +\n      \"on the visible input it would post the formatted text.\",\n  );\n\n  const libraryRef = useCallback(\n    (element: HTMLElement) => {\n      if (isDev) {\n        const type = element.tagName === \"INPUT\" ? (element as HTMLInputElement).type : \"\";\n        if (!TEXT_TYPES.includes(type)) {\n          console.error(\n            `NumberField.Input: rendered <${element.tagName.toLowerCase()}` +\n              `${type === \"\" ? \"\" : ` type=\"${type}\"`}>. Render an <input> of type \"text\", ` +\n              '\"search\" or \"tel\": a number input would re-introduce the native parser.',\n          );\n        }\n      }\n      visibleRef.current = element as HTMLInputElement;\n      return () => {\n        if (visibleRef.current === element) visibleRef.current = null;\n      };\n    },\n    [visibleRef],\n  );\n  const mergedRef = useMergedRef<HTMLElement>(libraryRef, field.ref);\n\n  const hiddenMergedRef = useMemo(\n    () => mergeRefs<HTMLInputElement | null>(hiddenRef, hiddenInputRef),\n    [hiddenRef, hiddenInputRef],\n  );\n\n  // After every commit: the hidden input holds the shown value (a rollback, a controlled change,\n  // a reset) and the visible input mirrors its validity (a changed `min` / `max` / `required`).\n  useLayoutEffect(() => {\n    const hidden = hiddenRef.current;\n    if (hidden !== null) {\n      const text = hiddenText(state.value);\n      if (hidden.value !== text) hidden.value = text;\n    }\n    mirror();\n  });\n\n  // The hidden input is never the one the browser reports on (6.3); the visible input is\n  // invalid in the same cases and gets the report (or the Field handles it).\n  useLayoutEffect(() => {\n    const hidden = hiddenRef.current;\n    if (hidden === null) return;\n    const onInvalid = (event: Event) => event.preventDefault();\n    hidden.addEventListener(\"invalid\", onInvalid);\n    return () => hidden.removeEventListener(\"invalid\", onInvalid);\n  }, [hiddenRef]);\n\n  // React's `onWheel` is passive: a native, non-passive listener can stop the page scroll (4.4).\n  const onWheel = useEffectEvent((event: WheelEvent) => {\n    ctx.wheel(event);\n  });\n  const { stepOnWheel } = ctx;\n  useLayoutEffect(() => {\n    const visible = visibleRef.current;\n    if (!stepOnWheel || visible === null) return;\n    visible.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => visible.removeEventListener(\"wheel\", onWheel);\n  }, [stepOnWheel, visibleRef]);\n\n  // A late mount (inside a Suspense boundary that hydrates after the Root) reconciles again.\n  const mounted = useRef(false);\n  useLayoutEffect(() => {\n    if (mounted.current) return;\n    mounted.current = true;\n    onInputMounted();\n  }, [onInputMounted]);\n\n  const renderType =\n    isValidElement<{ type?: unknown }>(render) && typeof render.props.type === \"string\"\n      ? render.props.type\n      : undefined;\n  const type = renderType !== undefined && TEXT_TYPES.includes(renderType) ? renderType : \"text\";\n  useDevWarning(\n    renderType !== undefined && !TEXT_TYPES.includes(renderType),\n    `NumberField.Input: \\`render\\` has type=\"${renderType ?? \"\"}\"; the visible input is ` +\n      'rendered as type \"text\". A number input would re-introduce the native parser the ' +\n      \"NumberField exists to avoid.\",\n  );\n\n  const dataInvalid =\n    ctx.fieldInvalid === undefined ? {} : { \"data-invalid\": dataAttr(ctx.fieldInvalid) };\n  const libraryProps: ComponentPropsWithRef<\"input\"> & DataAttributes = {\n    ...field.attributes,\n    id: ctx.inputId,\n    type,\n    value: state.text,\n    disabled: state.disabled,\n    readOnly: state.readOnly,\n    onChange: (event: ChangeEvent<HTMLInputElement>) => {\n      ctx.typed(event.currentTarget.value);\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n      ctx.keyDown(event.nativeEvent);\n    },\n    onBlur: (event: FocusEvent<HTMLInputElement>) => {\n      ctx.commitDraft(event.nativeEvent);\n    },\n    \"data-pending\": dataAttr(state.pending),\n    \"data-disabled\": dataAttr(state.disabled),\n    ...dataInvalid,\n  };\n\n  const visible = useRender<ComponentPropsWithRef<\"input\">, NumberFieldState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    props: {\n      inputMode: ctx.allowsFractions ? \"decimal\" : \"numeric\",\n      autoComplete: \"off\",\n      autoCorrect: \"off\",\n      spellCheck: false,\n      ...rest,\n    },\n    libraryProps,\n    ref: mergedRef,\n  });\n\n  const { min, max, step } = ctx.bounds;\n  return (\n    <>\n      {visible}\n      <input\n        ref={hiddenMergedRef}\n        type=\"number\"\n        name={field.name}\n        form={ctx.form}\n        min={min}\n        max={max}\n        step={step}\n        required={field.required}\n        disabled={field.disabled}\n        readOnly={state.readOnly}\n        defaultValue={ctx.resetTargetText}\n        autoComplete=\"off\"\n        aria-hidden=\"true\"\n        tabIndex={-1}\n        style={HIDDEN_STYLE}\n      />\n    </>\n  );\n}\n\nNumberFieldInput.displayName = \"NumberFieldInput\";\n"],"mappings":"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"}

package/dist/number-field/number-field-label.d.mts

@@ -0,0 +1,23 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { NumberFieldState } from "./number-field-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/number-field/number-field-label.d.ts
+export interface NumberFieldLabelProps extends Omit<ComponentPropsWithRef<"label">, "htmlFor" | "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, NumberFieldState>;
+  style?: StateValue<CSSProperties | undefined, NumberFieldState>;
+  children?: StateValue<ReactNode, NumberFieldState>;
+  /** Must render a `<label>`. */
+  render?: RenderProp<ComponentPropsWithRef<"label">, NumberFieldState>;
+}
+/**
+ * The visible name of the field: `<label for>` naming the visible input; its id also names the
+ * Root group (`aria-labelledby`, emitted only while a Label is mounted).
+ *
+ * Owned keys: `id`, `htmlFor`, `data-pending`, `data-disabled`.
+ */
+export declare function NumberFieldLabel({ className, style, children, render, ...rest }: NumberFieldLabelProps): ReactNode;
+export declare namespace NumberFieldLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=number-field-label.d.mts.map

package/dist/number-field/number-field-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-label.d.mts","names":[],"sources":["../../src/number-field/number-field-label.tsx"],"mappings":";;;;iBAWiB,8BAA8B,KAC7C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,gCAAgC;;;;;;;;wBAStC,mBACd,WACA,OACA,UACA,WACG,QACF,wBAAqB;yBANR"}

package/dist/number-field/number-field-label.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useNumberFieldContext } from "./number-field-context.mjs";
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/number-field/number-field-label.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/**
+* The visible name of the field: `<label for>` naming the visible input; its id also names the
+* Root group (`aria-labelledby`, emitted only while a Label is mounted).
+*
+* Owned keys: `id`, `htmlFor`, `data-pending`, `data-disabled`.
+*/
+function NumberFieldLabel({ className, style, children, render, ...rest }) {
+	const ctx = useNumberFieldContext("NumberField.Label");
+	const { registerLabel } = ctx;
+	useLayoutEffect(registerLabel, [registerLabel]);
+	const warned = useRef(false);
+	const libraryRef = useCallback((element) => {
+		if (isDev && !warned.current && element.tagName !== "LABEL") {
+			warned.current = true;
+			console.error(`NumberField.Label: expected a <label> element but got <${element.tagName.toLowerCase()}>. The Label names the input through \`for\`, which only a <label> has.`);
+		}
+		return () => {};
+	}, []);
+	return useRender({
+		defaultElement: "label",
+		render,
+		state: ctx.state,
+		className,
+		style,
+		children,
+		props: rest,
+		ref: libraryRef,
+		libraryProps: {
+			id: ctx.labelId,
+			htmlFor: ctx.inputId,
+			"data-pending": dataAttr(ctx.state.pending),
+			"data-disabled": dataAttr(ctx.state.disabled)
+		}
+	});
+}
+NumberFieldLabel.displayName = "NumberFieldLabel";
+//#endregion
+export { NumberFieldLabel };
+
+//# sourceMappingURL=number-field-label.mjs.map

package/dist/number-field/number-field-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-label.mjs","names":[],"sources":["../../src/number-field/number-field-label.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useNumberFieldContext } from \"./number-field-context.js\";\nimport type { NumberFieldState } from \"./number-field-root.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nexport interface NumberFieldLabelProps extends Omit<\n  ComponentPropsWithRef<\"label\">,\n  \"htmlFor\" | \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, NumberFieldState>;\n  style?: StateValue<CSSProperties | undefined, NumberFieldState>;\n  children?: StateValue<ReactNode, NumberFieldState>;\n  /** Must render a `<label>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"label\">, NumberFieldState>;\n}\n\n/**\n * The visible name of the field: `<label for>` naming the visible input; its id also names the\n * Root group (`aria-labelledby`, emitted only while a Label is mounted).\n *\n * Owned keys: `id`, `htmlFor`, `data-pending`, `data-disabled`.\n */\nexport function NumberFieldLabel({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: NumberFieldLabelProps) {\n  const ctx = useNumberFieldContext(\"NumberField.Label\");\n  const { registerLabel } = ctx;\n  useLayoutEffect(registerLabel, [registerLabel]);\n\n  const warned = useRef(false);\n  const libraryRef = useCallback((element: HTMLElement) => {\n    if (isDev && !warned.current && element.tagName !== \"LABEL\") {\n      warned.current = true;\n      console.error(\n        `NumberField.Label: expected a <label> element but got <${element.tagName.toLowerCase()}>. ` +\n          \"The Label names the input through `for`, which only a <label> has.\",\n      );\n    }\n    return () => {};\n  }, []);\n\n  return useRender<ComponentPropsWithRef<\"label\">, NumberFieldState>({\n    defaultElement: \"label\",\n    render,\n    state: ctx.state,\n    className,\n    style,\n    children,\n    props: rest,\n    ref: libraryRef,\n    libraryProps: {\n      id: ctx.labelId,\n      htmlFor: ctx.inputId,\n      \"data-pending\": dataAttr(ctx.state.pending),\n      \"data-disabled\": dataAttr(ctx.state.disabled),\n    },\n  });\n}\n\nNumberFieldLabel.displayName = \"NumberFieldLabel\";\n"],"mappings":";;;;;;AASA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;;AAmBvC,SAAgB,iBAAiB,EAC/B,WACA,OACA,UACA,QACA,GAAG,QACqB;CACxB,MAAM,MAAM,sBAAsB,mBAAmB;CACrD,MAAM,EAAE,kBAAkB;CAC1B,gBAAgB,eAAe,CAAC,aAAa,CAAC;CAE9C,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,aAAa,aAAa,YAAyB;EACvD,IAAI,SAAS,CAAC,OAAO,WAAW,QAAQ,YAAY,SAAS;GAC3D,OAAO,UAAU;GACjB,QAAQ,MACN,0DAA0D,QAAQ,QAAQ,YAAY,EAAE,wEAE1F;EACF;EACA,aAAa,CAAC;CAChB,GAAG,CAAC,CAAC;CAEL,OAAO,UAA4D;EACjE,gBAAgB;EAChB;EACA,OAAO,IAAI;EACX;EACA;EACA;EACA,OAAO;EACP,KAAK;EACL,cAAc;GACZ,IAAI,IAAI;GACR,SAAS,IAAI;GACb,gBAAgB,SAAS,IAAI,MAAM,OAAO;GAC1C,iBAAiB,SAAS,IAAI,MAAM,QAAQ;EAC9C;CACF,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/number-field/number-field-root.d.mts

@@ -0,0 +1,108 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/number-field/number-field-root.d.ts
+/** Details passed as the second argument of both NumberField actions. */
+export interface NumberFieldValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user typed, pressed a key, a button or turned the wheel (`details.event` is
+   * the `focusout` / Enter `keydown` of a typed value, the `keydown` of a key, the `pointerdown` /
+   * `pointerup` of a button (`undefined` for the repeats of a held button and for a hold that
+   * ended at its bound), the `wheel` event). `"platform"`: a form reset (the `reset`
+   * event) or text typed before hydration (`undefined`). `"dismiss"`: the commit action rejected
+   * and the field reverted to the committed value (uncontrolled; `valueChangeAction` only).
+   */
+  readonly reason: ChangeReason;
+  /** What produced the value: typed text, a button, a key, the wheel; `null` for "platform" and "dismiss". */
+  readonly source: "input" | "increment" | "decrement" | "keyboard" | "wheel" | null;
+}
+/** The state every NumberField part's function props receive (one object, Field's precedent). */
+export interface NumberFieldState {
+  /** The shown value: the gesture's value while one is open or in flight, else the optimistic value; `null` when empty. */
+  readonly value: number | null;
+  /** The shown text: the draft while the user is editing, else `value` formatted. */
+  readonly text: string;
+  /** A step or commit dispatched through this NumberField is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+  readonly readOnly: boolean;
+  readonly required: boolean;
+}
+export interface NumberFieldRootProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "role" | "className" | "style" | "children"> {
+  /** Controlled value; `null` is empty, `undefined` uncontrolled. */
+  value?: number | null;
+  /** Initial value in uncontrolled mode, and its form-reset target (latest). Default `null` (empty). */
+  defaultValue?: number | null;
+  /**
+   * Runs inside the Root's step transition on every step: the parse of typed text at commit,
+   * each key press, each tick of a hold, each wheel event, each platform change, and the revert
+   * after a rejected commit (`reason: "dismiss"`, uncontrolled). Keep it cheap: adopt the value
+   * (`setValue(next)` in the sync prefix is a transition update), start a deferred render.
+   */
+  valueChangeAction?: ChangeAction<number | null, NumberFieldValueChangeDetails>;
+  /**
+   * Runs inside the Root's commit transition once per gesture: a typed text's blur or Enter, a
+   * hold's release, each key press, each wheel event, a form reset, text typed before hydration.
+   * Where the save goes; uncontrolled state is committed when it resolves and reverts when it
+   * rejects. May be a Server Function.
+   */
+  valueCommitAction?: ChangeAction<number | null, NumberFieldValueChangeDetails>;
+  /** Native `min` on the hidden input (a constraint) and the lower bound of stepping. */
+  min?: number;
+  /** Native `max` on the hidden input (a constraint) and the upper bound of stepping. */
+  max?: number;
+  /** Native `step` and the stepping grid from `min` (else `0`). Default `1`, or `0.01` when `format.style` is `"percent"`. */
+  step?: number;
+  /** PageUp / PageDown and Shift+Arrow. Default `10 × step`. */
+  largeStep?: number;
+  /**
+   * `Intl.NumberFormatOptions` for the text: `style` `"decimal"` (default), `"percent"`,
+   * `"currency"` (with `currency`), `"unit"` (with `unit`); fraction digits, grouping, sign
+   * display. `notation: "compact"` is a dev warning (unparsable).
+   */
+  format?: Intl.NumberFormatOptions;
+  /**
+   * BCP 47 tag(s). Default: the runtime's locale (`Intl.NumberFormat().resolvedOptions().locale`).
+   * Pass the page's `lang`; a dev warning fires when `document.documentElement.lang` disagrees
+   * and this prop is absent.
+   */
+  locale?: string | readonly string[];
+  /** Step with the mouse wheel while the input is focused. Default `false`. */
+  stepOnWheel?: boolean;
+  /** Native `name` on the hidden input; defaults to the Field's `name` inside a `Field.Root`. */
+  name?: string;
+  /** Native `form` on the hidden input. */
+  form?: string;
+  /** Disables both inputs and the buttons; inherited by every part. */
+  disabled?: boolean;
+  /** Native `readonly` on both inputs; no stepping (buttons disabled, keys and wheel inert). */
+  readOnly?: boolean;
+  /** Native `required` on the hidden input (empty is `valueMissing`); or the Field's. */
+  required?: boolean;
+  /**
+   * What is announced (`ariaNotify()`, else a live region) after a key press, a wheel event, a
+   * click activation and a hold's release. Default: `(_, state) => state.text`. Return `null` to
+   * announce nothing.
+   */
+  announce?: (value: number | null, state: NumberFieldState) => string | null;
+  className?: StateValue<string | undefined, NumberFieldState>;
+  style?: StateValue<CSSProperties | undefined, NumberFieldState>;
+  children?: StateValue<ReactNode, NumberFieldState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, NumberFieldState>;
+}
+/**
+ * Owns the number field's state (design/components/number-field.md 2): the committed value
+ * through `useControllableAction` with `valueCommitAction` (once per gesture), each step through
+ * its own transition (`valueChangeAction`), the urgent draft text, the urgent value of the open
+ * gesture (`live`), the press-and-hold, the formatter and parser, the announcements, mount
+ * reconciliation and form reset (through the hidden input the Input renders).
+ *
+ * Owned keys (conventions 1.2): `role="group"`, `aria-labelledby` (token-merged: the consumer's,
+ * then `NumberField.Label`'s id while one is mounted, then a Field's label id), `data-pending`,
+ * `data-disabled`, `data-invalid` (inside a Field).
+ */
+export declare function NumberFieldRoot(props: NumberFieldRootProps): import("react").JSX.Element;
+export declare namespace NumberFieldRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=number-field-root.d.mts.map

package/dist/number-field/number-field-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-root.d.mts","names":[],"sources":["../../src/number-field/number-field-root.tsx"],"mappings":";;;;iBA8CiB,sCAAsC;;;;;;;;;WAS5C,QAAQ;;WAER;;;iBAIM;;WAEN;;WAEA;;WAEA;WACA;WACA;WACA;;iBAGM,6BAA6B,KAC5C;;EAIA;;EAEA;;;;;;;EAOA,oBAAoB,4BAA4B;;;;;;;EAOhD,oBAAoB,4BAA4B;;EAEhD;;EAEA;;EAEA;;EAEA;;;;;;EAMA,SAAS,KAAK;;;;;;EAMd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;EAMA,YAAY,sBAAsB,OAAO;EACzC,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;;;wBAkCpC,gBAAgB,OAAO,uCAAoB,IAAA;yBAA3C"}