@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/meter.jsx

@@ -0,0 +1,33 @@
+import { t as createProgressBar } from "./createProgressBar.jsx";
+//#region src/meter/createMeter.ts
+/**
+* Meter hook for Solidaria
+*
+* Provides the accessibility implementation for a meter component.
+* Meters represent a quantity within a known range, or a fractional value.
+* Unlike progress bars, meters represent a current value rather than progress toward a goal.
+*
+* This is a port of @react-aria/meter's useMeter hook.
+*/
+/**
+* Provides the accessibility implementation for a meter component.
+* Meters represent a quantity within a known range, or a fractional value.
+*/
+function createMeter(props = {}) {
+	const { progressBarProps, labelProps } = createProgressBar(props);
+	return {
+		get meterProps() {
+			return {
+				...progressBarProps,
+				role: "meter"
+			};
+		},
+		get labelProps() {
+			return labelProps;
+		}
+	};
+}
+//#endregion
+export { createMeter as t };
+
+//# sourceMappingURL=meter.jsx.map

package/dist/_chunk/meter.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.jsx","names":[],"sources":["../../src/meter/createMeter.ts"],"sourcesContent":["/**\n * Meter hook for Solidaria\n *\n * Provides the accessibility implementation for a meter component.\n * Meters represent a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n *\n * This is a port of @react-aria/meter's useMeter hook.\n */\n\nimport { createProgressBar, type AriaProgressBarProps } from \"../progress/createProgressBar\";\n\nexport interface AriaMeterProps extends Omit<AriaProgressBarProps, \"isIndeterminate\"> {\n  /** The current value (controlled). */\n  value?: number;\n  /** The smallest value allowed for the input. @default 0 */\n  minValue?: number;\n  /** The largest value allowed for the input. @default 100 */\n  maxValue?: number;\n  /** The content to display as the value's label (e.g. 1 of 4). */\n  valueLabel?: string;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The content to display as the label. */\n  label?: string;\n  /** An accessibility label for this item. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n}\n\nexport interface MeterAria {\n  /** Props for the meter container element. */\n  meterProps: Record<string, unknown>;\n  /** Props for the meter's visual label element (if any). */\n  labelProps: Record<string, unknown>;\n}\n\n/**\n * Provides the accessibility implementation for a meter component.\n * Meters represent a quantity within a known range, or a fractional value.\n */\nexport function createMeter(props: AriaMeterProps = {}): MeterAria {\n  // Reuse progress bar implementation\n  const { progressBarProps, labelProps } = createProgressBar(props);\n\n  return {\n    get meterProps() {\n      return {\n        ...progressBarProps,\n        role: \"meter\",\n      };\n    },\n    get labelProps() {\n      return labelProps;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;AA8CA,SAAgB,YAAY,QAAwB,CAAC,GAAc;CAEjE,MAAM,EAAE,kBAAkB,eAAe,kBAAkB,KAAK;CAEhE,OAAO;EACL,IAAI,aAAa;GACf,OAAO;IACL,GAAG;IACH,MAAM;GACR;EACF;EACA,IAAI,aAAa;GACf,OAAO;EACT;CACF;AACF"}

package/dist/_chunk/numberfield.js

@@ -0,0 +1,258 @@
+import { i as access, o as mergeProps } from "./env.js";
+import { t as filterDOMProps } from "./filterDOMProps.js";
+import { createId } from "../ssr/index.js";
+import { t as createLabel } from "./createLabel.js";
+import { createMemo } from "solid-js";
+//#region src/numberfield/createNumberField.ts
+/**
+* Provides the behavior and accessibility implementation for a number field.
+* Based on @react-aria/numberfield useNumberField.
+*/
+/**
+* Provides the behavior and accessibility implementation for a number field.
+*/
+function createNumberField(props, state, inputRef) {
+	const getProps = () => access(props);
+	const id = createId(getProps().id);
+	const inputId = `${id}-input`;
+	const incrementId = `${id}-increment`;
+	const decrementId = `${id}-decrement`;
+	const descriptionId = `${id}-description`;
+	const errorMessageId = `${id}-error`;
+	const { labelProps, fieldProps } = createLabel({
+		get id() {
+			return inputId;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		labelElementType: "label"
+	});
+	const fieldLabel = () => getProps()["aria-label"] ?? "";
+	const buttonLabelledBy = () => {
+		if (fieldLabel()) return void 0;
+		return getProps().label != null ? labelProps.id : getProps()["aria-labelledby"];
+	};
+	const domProps = createMemo(() => filterDOMProps(getProps(), { labelable: true }));
+	const onInputChange = (e) => {
+		const value = e.currentTarget.value;
+		if (state.validate(value)) state.setInputValue(value);
+	};
+	const onInputBlur = (e) => {
+		state.commit();
+		const p = getProps();
+		p.onBlur?.(e);
+		p.onFocusChange?.(false);
+	};
+	const onInputFocus = (e) => {
+		const p = getProps();
+		p.onFocus?.(e);
+		p.onFocusChange?.(true);
+	};
+	const onKeyDown = (e) => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) {
+			p.onKeyDown?.(e);
+			return;
+		}
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				state.increment();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				state.decrement();
+				break;
+			case "PageUp":
+				e.preventDefault();
+				state.incrementToMax();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				state.decrementToMin();
+				break;
+			case "Home":
+				e.preventDefault();
+				state.decrementToMin();
+				break;
+			case "End":
+				e.preventDefault();
+				state.incrementToMax();
+				break;
+			case "Enter":
+				state.commit();
+				break;
+		}
+		p.onKeyDown?.(e);
+	};
+	const onKeyUp = (e) => {
+		getProps().onKeyUp?.(e);
+	};
+	const onButtonPressStart = (e) => {
+		const input = inputRef?.();
+		if (input && input.ownerDocument.activeElement === input) return;
+		if (e.pointerType === "mouse") input?.focus();
+		else if (e.target instanceof HTMLElement) e.target.focus();
+	};
+	let incrementTouchPressUp = false;
+	let decrementTouchPressUp = false;
+	const onIncrementPressStart = (e) => {
+		if (e.pointerType !== "touch") state.increment();
+		else incrementTouchPressUp = false;
+		onButtonPressStart(e);
+	};
+	const onIncrementPressUp = (e) => {
+		if (e.pointerType === "touch") incrementTouchPressUp = true;
+	};
+	const onIncrementPressEnd = (e) => {
+		if (e.pointerType === "touch" && incrementTouchPressUp) state.increment();
+		incrementTouchPressUp = false;
+	};
+	const onIncrementClick = (e) => {
+		if (!state.canIncrement()) {
+			e.preventDefault();
+			return;
+		}
+		state.increment();
+		inputRef?.()?.focus();
+	};
+	const onDecrementPressStart = (e) => {
+		if (e.pointerType !== "touch") state.decrement();
+		else decrementTouchPressUp = false;
+		onButtonPressStart(e);
+	};
+	const onDecrementPressUp = (e) => {
+		if (e.pointerType === "touch") decrementTouchPressUp = true;
+	};
+	const onDecrementPressEnd = (e) => {
+		if (e.pointerType === "touch" && decrementTouchPressUp) state.decrement();
+		decrementTouchPressUp = false;
+	};
+	const onDecrementClick = (e) => {
+		if (!state.canDecrement()) {
+			e.preventDefault();
+			return;
+		}
+		state.decrement();
+		inputRef?.()?.focus();
+	};
+	const getAriaDescribedBy = () => {
+		const p = getProps();
+		const parts = [];
+		if (p["aria-describedby"]) parts.push(p["aria-describedby"]);
+		if (p.description) parts.push(descriptionId);
+		if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);
+		return parts.length > 0 ? parts.join(" ") : void 0;
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get groupProps() {
+			return {
+				role: "group",
+				"aria-disabled": getProps().isDisabled || void 0,
+				"aria-invalid": getProps().isInvalid || void 0
+			};
+		},
+		get inputProps() {
+			const p = getProps();
+			const isDisabled = p.isDisabled ?? state.isDisabled();
+			const isReadOnly = p.isReadOnly ?? state.isReadOnly();
+			return mergeProps(domProps(), fieldProps, {
+				id: inputId,
+				type: "text",
+				inputMode: "decimal",
+				autoComplete: "off",
+				autoCorrect: "off",
+				spellcheck: false,
+				tabIndex: isDisabled ? void 0 : 0,
+				"aria-roledescription": "Number field",
+				"aria-invalid": p.isInvalid || void 0,
+				"aria-required": p.isRequired || void 0,
+				"aria-describedby": getAriaDescribedBy(),
+				disabled: isDisabled || void 0,
+				readOnly: isReadOnly || void 0,
+				required: p.isRequired || void 0,
+				value: state.inputValue(),
+				onInput: onInputChange,
+				onChange: onInputChange,
+				onFocus: onInputFocus,
+				onBlur: onInputBlur,
+				onKeyDown,
+				onKeyUp,
+				onPaste: p.onPaste,
+				onCopy: p.onCopy,
+				onCut: p.onCut,
+				name: p.name,
+				form: p.form,
+				autoFocus: p.autoFocus
+			});
+		},
+		get incrementButtonProps() {
+			const labelledBy = buttonLabelledBy();
+			return {
+				id: incrementId,
+				type: "button",
+				"aria-label": `Increase ${fieldLabel()}`.trim(),
+				"aria-labelledby": labelledBy ? `${incrementId} ${labelledBy}` : void 0,
+				"aria-controls": inputId,
+				excludeFromTabOrder: true,
+				preventFocusOnPress: true,
+				allowFocusWhenDisabled: true,
+				get disabled() {
+					return !state.canIncrement();
+				},
+				tabIndex: -1,
+				get isDisabled() {
+					return !state.canIncrement();
+				},
+				onClick: onIncrementClick,
+				onPressStart: onIncrementPressStart,
+				onPressUp: onIncrementPressUp,
+				onPressEnd: onIncrementPressEnd
+			};
+		},
+		get decrementButtonProps() {
+			const labelledBy = buttonLabelledBy();
+			return {
+				id: decrementId,
+				type: "button",
+				"aria-label": `Decrease ${fieldLabel()}`.trim(),
+				"aria-labelledby": labelledBy ? `${decrementId} ${labelledBy}` : void 0,
+				"aria-controls": inputId,
+				excludeFromTabOrder: true,
+				preventFocusOnPress: true,
+				allowFocusWhenDisabled: true,
+				get disabled() {
+					return !state.canDecrement();
+				},
+				tabIndex: -1,
+				get isDisabled() {
+					return !state.canDecrement();
+				},
+				onClick: onDecrementClick,
+				onPressStart: onDecrementPressStart,
+				onPressUp: onDecrementPressUp,
+				onPressEnd: onDecrementPressEnd
+			};
+		},
+		get descriptionProps() {
+			return { id: descriptionId };
+		},
+		get errorMessageProps() {
+			return { id: errorMessageId };
+		}
+	};
+}
+//#endregion
+export { createNumberField as t };
+
+//# sourceMappingURL=numberfield.js.map

package/dist/_chunk/numberfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberfield.js","names":[],"sources":["../../src/numberfield/createNumberField.ts"],"sourcesContent":["/**\n * Provides the behavior and accessibility implementation for a number field.\n * Based on @react-aria/numberfield useNumberField.\n */\n\nimport { type JSX, createMemo } from \"solid-js\";\nimport { createLabel } from \"../label/createLabel\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport type { NumberFieldState } from \"@proyecto-viviana/solid-stately\";\nimport type { AriaButtonProps } from \"../button/types\";\nimport type { PressEvent } from \"../interactions\";\n\nexport interface AriaNumberFieldProps {\n  /** A label for the number field. */\n  label?: JSX.Element;\n  /** An accessible label for the number field. */\n  \"aria-label\"?: string;\n  /** The element ID that labels the number field. */\n  \"aria-labelledby\"?: string;\n  /** The element ID that describes the number field. */\n  \"aria-describedby\"?: string;\n  /** Whether the number field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the number field is read-only. */\n  isReadOnly?: boolean;\n  /** Whether the number field is required. */\n  isRequired?: boolean;\n  /** Whether the number field is invalid. */\n  isInvalid?: boolean;\n  /** A description for the number field. */\n  description?: JSX.Element;\n  /** An error message for the number field. */\n  errorMessage?: JSX.Element;\n  /** The ID of the number field. */\n  id?: string;\n  /** Whether to auto-focus the input. */\n  autoFocus?: boolean;\n  /** The name for the form input. */\n  name?: string;\n  /** The form element this input belongs to. */\n  form?: string;\n  /** Handler for focus events. */\n  onFocus?: JSX.EventHandler<HTMLInputElement, FocusEvent>;\n  /** Handler for blur events. */\n  onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>;\n  /** Handler called when focus state changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler for key down events. */\n  onKeyDown?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;\n  /** Handler for key up events. */\n  onKeyUp?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;\n  /** Handler for paste events. */\n  onPaste?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n  /** Handler for copy events. */\n  onCopy?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n  /** Handler for cut events. */\n  onCut?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n}\n\nexport interface NumberFieldAria {\n  /** Props for the label element. */\n  labelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the input element group. */\n  groupProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the increment button. */\n  incrementButtonProps: AriaButtonProps;\n  /** Props for the decrement button. */\n  decrementButtonProps: AriaButtonProps;\n  /** Props for the description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field.\n */\nexport function createNumberField(\n  props: MaybeAccessor<AriaNumberFieldProps>,\n  state: NumberFieldState,\n  inputRef?: () => HTMLInputElement | null,\n): NumberFieldAria {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n\n  // Generate IDs for associated elements\n  const inputId = `${id}-input`;\n  const incrementId = `${id}-increment`;\n  const decrementId = `${id}-decrement`;\n  const descriptionId = `${id}-description`;\n  const errorMessageId = `${id}-error`;\n\n  // Label handling\n  const { labelProps, fieldProps } = createLabel({\n    get id() {\n      return inputId;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    // Upstream react-aria `useNumberField` → `useField` → `useLabel` with the DEFAULT\n    // `labelElementType: 'label'`: the S2 NumberField label is a native `<label htmlFor>`\n    // (verified against the shipped React DOM: `<label id for=inputId>`). This hardcoded\n    // `\"span\"` was a self-inflicted divergence — it dropped the `for` association and made\n    // `NumberFieldLabel` render a `<span>`. Reverted to `\"label\"` so `createLabel` emits\n    // `for: inputId` (the input still also carries `aria-labelledby`, exactly as upstream).\n    labelElementType: \"label\",\n  });\n\n  // Increment/decrement button labels — a 1:1 port of upstream `useNumberField`'s\n  // four-case logic. Upstream RAC's `NumberField` component feeds `useNumberField` a\n  // BOOLEAN slot for `label` (from `useSlot`), never the label string, so a visible\n  // label is NEVER concatenated into the button `aria-label`. Instead: with a visible\n  // label the button reads `aria-label: \"Increase\"` PLUS `aria-labelledby: \"<selfId>\n  // <labelId>\"`; only an explicit `aria-label` (and no visible label) changes the text\n  // (`\"Increase <aria-label>\"`). The prior `Increase ${getLabelText()}` was a\n  // self-inflicted divergence that produced \"Increase Quantity\" where S2 ships\n  // \"Increase\". `fieldLabel` mirrors upstream: `props['aria-label'] || ''` — the visible\n  // label string is intentionally excluded (it arrives as a boolean slot in RAC).\n  const fieldLabel = (): string => getProps()[\"aria-label\"] ?? \"\";\n  const buttonLabelledBy = (): string | undefined => {\n    if (fieldLabel()) return undefined;\n    return getProps().label != null\n      ? (labelProps.id as string | undefined)\n      : getProps()[\"aria-labelledby\"];\n  };\n\n  // Filter DOM props\n  const domProps = createMemo(() =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true }),\n  );\n\n  // Handle input change\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const value = e.currentTarget.value;\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  // Handle input blur - commit value\n  const onInputBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (e) => {\n    state.commit();\n    const p = getProps();\n    p.onBlur?.(e);\n    p.onFocusChange?.(false);\n  };\n\n  const onInputFocus: JSX.EventHandler<HTMLInputElement, FocusEvent> = (e) => {\n    const p = getProps();\n    p.onFocus?.(e);\n    p.onFocusChange?.(true);\n  };\n\n  // Handle keyboard events\n  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    const p = getProps();\n    if (p.isDisabled || p.isReadOnly) {\n      p.onKeyDown?.(e);\n      return;\n    }\n\n    switch (e.key) {\n      case \"ArrowUp\":\n        e.preventDefault();\n        state.increment();\n        break;\n      case \"ArrowDown\":\n        e.preventDefault();\n        state.decrement();\n        break;\n      case \"PageUp\":\n        e.preventDefault();\n        state.incrementToMax();\n        break;\n      case \"PageDown\":\n        e.preventDefault();\n        state.decrementToMin();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        state.decrementToMin();\n        break;\n      case \"End\":\n        e.preventDefault();\n        state.incrementToMax();\n        break;\n      case \"Enter\":\n        state.commit();\n        break;\n    }\n\n    p.onKeyDown?.(e);\n  };\n\n  const onKeyUp: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    getProps().onKeyUp?.(e);\n  };\n\n  const onButtonPressStart = (e: PressEvent) => {\n    const input = inputRef?.();\n\n    // Keep existing input focus in place. This avoids hiding software keyboards\n    // and prevents a blur/refocus flicker when mouse pressing the steppers.\n    if (input && input.ownerDocument.activeElement === input) {\n      return;\n    }\n\n    if (e.pointerType === \"mouse\") {\n      input?.focus();\n    } else if (e.target instanceof HTMLElement) {\n      e.target.focus();\n    }\n  };\n\n  let incrementTouchPressUp = false;\n  let decrementTouchPressUp = false;\n\n  const onIncrementPressStart = (e: PressEvent) => {\n    if (e.pointerType !== \"touch\") {\n      state.increment();\n    } else {\n      incrementTouchPressUp = false;\n    }\n\n    onButtonPressStart(e);\n  };\n\n  const onIncrementPressUp = (e: PressEvent) => {\n    if (e.pointerType === \"touch\") {\n      incrementTouchPressUp = true;\n    }\n  };\n\n  const onIncrementPressEnd = (e: PressEvent) => {\n    if (e.pointerType === \"touch\" && incrementTouchPressUp) {\n      state.increment();\n    }\n\n    incrementTouchPressUp = false;\n  };\n  const onIncrementClick = (e: MouseEvent) => {\n    if (!state.canIncrement()) {\n      e.preventDefault();\n      return;\n    }\n\n    state.increment();\n    inputRef?.()?.focus();\n  };\n\n  const onDecrementPressStart = (e: PressEvent) => {\n    if (e.pointerType !== \"touch\") {\n      state.decrement();\n    } else {\n      decrementTouchPressUp = false;\n    }\n\n    onButtonPressStart(e);\n  };\n\n  const onDecrementPressUp = (e: PressEvent) => {\n    if (e.pointerType === \"touch\") {\n      decrementTouchPressUp = true;\n    }\n  };\n\n  const onDecrementPressEnd = (e: PressEvent) => {\n    if (e.pointerType === \"touch\" && decrementTouchPressUp) {\n      state.decrement();\n    }\n\n    decrementTouchPressUp = false;\n  };\n  const onDecrementClick = (e: MouseEvent) => {\n    if (!state.canDecrement()) {\n      e.preventDefault();\n      return;\n    }\n\n    state.decrement();\n    inputRef?.()?.focus();\n  };\n\n  // Build aria-describedby\n  const getAriaDescribedBy = () => {\n    const p = getProps();\n    const parts: string[] = [];\n    if (p[\"aria-describedby\"]) parts.push(p[\"aria-describedby\"]);\n    if (p.description) parts.push(descriptionId);\n    if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);\n    return parts.length > 0 ? parts.join(\" \") : undefined;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get groupProps() {\n      return {\n        role: \"group\",\n        \"aria-disabled\": getProps().isDisabled || undefined,\n        \"aria-invalid\": getProps().isInvalid || undefined,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get inputProps() {\n      const p = getProps();\n      const isDisabled = p.isDisabled ?? state.isDisabled();\n      const isReadOnly = p.isReadOnly ?? state.isReadOnly();\n\n      return mergeProps(\n        domProps(),\n        fieldProps as Record<string, unknown>,\n        {\n          id: inputId,\n          type: \"text\",\n          inputMode: \"decimal\" as const,\n          autoComplete: \"off\",\n          autoCorrect: \"off\",\n          spellcheck: false,\n          // Upstream routes the input through useFormattedTextField → useTextField →\n          // useFocusable, which \"always set[s] a tabIndex so that Safari allows\n          // focusing native buttons and inputs\": `excludeFromTabOrder ? -1 : 0`, then\n          // `undefined` when disabled. The input is never excluded, so the rendered\n          // DOM carries `tabindex=\"0\"` (absent only when disabled). We hand-roll\n          // inputProps (see the spinbutton-override note below) so we must replay that\n          // one focusable prop here to stay byte-identical to React's tab order.\n          tabIndex: isDisabled ? undefined : 0,\n          // Upstream useNumberField wraps useSpinButton but deliberately\n          // overrides its output: role=spinbutton can't be focused with\n          // VoiceOver, so the input is a plain textbox (inside the role=group\n          // wrapper above) and every aria-value* is dropped in favour of\n          // aria-roledescription. The formatted value is still announced via the\n          // input's own value. Mirror that contract instead of leaking the raw\n          // spinbutton semantics.\n          //\n          // The string MUST match upstream's `stringFormatter.format('numberField')`,\n          // whose en-US value is `Number field` (capitalised) — not a lowercase\n          // hand-roll. Full locale routing via `createStringFormatter` (as\n          // `createDateField` does) is tracked as `intl-roledescription-hardcodes`\n          // (also covers the ColorArea/ColorSwatch English hardcodes); this keeps the\n          // en-US roledescription byte-identical to React Spectrum in the meantime.\n          \"aria-roledescription\": \"Number field\",\n          \"aria-invalid\": p.isInvalid || undefined,\n          \"aria-required\": p.isRequired || undefined,\n          \"aria-describedby\": getAriaDescribedBy(),\n          disabled: isDisabled || undefined,\n          readOnly: isReadOnly || undefined,\n          required: p.isRequired || undefined,\n          value: state.inputValue(),\n          onInput: onInputChange,\n          onChange: onInputChange,\n          onFocus: onInputFocus,\n          onBlur: onInputBlur,\n          onKeyDown,\n          onKeyUp,\n          onPaste: p.onPaste,\n          onCopy: p.onCopy,\n          onCut: p.onCut,\n          name: p.name,\n          form: p.form,\n          autoFocus: p.autoFocus,\n        } as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get incrementButtonProps() {\n      const labelledBy = buttonLabelledBy();\n      return {\n        id: incrementId,\n        type: \"button\",\n        \"aria-label\": `Increase ${fieldLabel()}`.trim(),\n        \"aria-labelledby\": labelledBy ? `${incrementId} ${labelledBy}` : undefined,\n        \"aria-controls\": inputId,\n        excludeFromTabOrder: true,\n        preventFocusOnPress: true,\n        allowFocusWhenDisabled: true,\n        get disabled() {\n          return !state.canIncrement();\n        },\n        tabIndex: -1,\n        get isDisabled() {\n          return !state.canIncrement();\n        },\n        onClick: onIncrementClick,\n        onPressStart: onIncrementPressStart,\n        onPressUp: onIncrementPressUp,\n        onPressEnd: onIncrementPressEnd,\n      } as AriaButtonProps;\n    },\n    get decrementButtonProps() {\n      const labelledBy = buttonLabelledBy();\n      return {\n        id: decrementId,\n        type: \"button\",\n        \"aria-label\": `Decrease ${fieldLabel()}`.trim(),\n        \"aria-labelledby\": labelledBy ? `${decrementId} ${labelledBy}` : undefined,\n        \"aria-controls\": inputId,\n        excludeFromTabOrder: true,\n        preventFocusOnPress: true,\n        allowFocusWhenDisabled: true,\n        get disabled() {\n          return !state.canDecrement();\n        },\n        tabIndex: -1,\n        get isDisabled() {\n          return !state.canDecrement();\n        },\n        onClick: onDecrementClick,\n        onPressStart: onDecrementPressStart,\n        onPressUp: onDecrementPressUp,\n        onPressEnd: onDecrementPressEnd,\n      } as AriaButtonProps;\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/numberfield.jsx

@@ -0,0 +1,258 @@
+import { i as access, o as mergeProps } from "./env.jsx";
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { createId } from "../ssr/index.jsx";
+import { t as createLabel } from "./createLabel.jsx";
+import { createMemo } from "solid-js";
+//#region src/numberfield/createNumberField.ts
+/**
+* Provides the behavior and accessibility implementation for a number field.
+* Based on @react-aria/numberfield useNumberField.
+*/
+/**
+* Provides the behavior and accessibility implementation for a number field.
+*/
+function createNumberField(props, state, inputRef) {
+	const getProps = () => access(props);
+	const id = createId(getProps().id);
+	const inputId = `${id}-input`;
+	const incrementId = `${id}-increment`;
+	const decrementId = `${id}-decrement`;
+	const descriptionId = `${id}-description`;
+	const errorMessageId = `${id}-error`;
+	const { labelProps, fieldProps } = createLabel({
+		get id() {
+			return inputId;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		labelElementType: "label"
+	});
+	const fieldLabel = () => getProps()["aria-label"] ?? "";
+	const buttonLabelledBy = () => {
+		if (fieldLabel()) return void 0;
+		return getProps().label != null ? labelProps.id : getProps()["aria-labelledby"];
+	};
+	const domProps = createMemo(() => filterDOMProps(getProps(), { labelable: true }));
+	const onInputChange = (e) => {
+		const value = e.currentTarget.value;
+		if (state.validate(value)) state.setInputValue(value);
+	};
+	const onInputBlur = (e) => {
+		state.commit();
+		const p = getProps();
+		p.onBlur?.(e);
+		p.onFocusChange?.(false);
+	};
+	const onInputFocus = (e) => {
+		const p = getProps();
+		p.onFocus?.(e);
+		p.onFocusChange?.(true);
+	};
+	const onKeyDown = (e) => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) {
+			p.onKeyDown?.(e);
+			return;
+		}
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				state.increment();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				state.decrement();
+				break;
+			case "PageUp":
+				e.preventDefault();
+				state.incrementToMax();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				state.decrementToMin();
+				break;
+			case "Home":
+				e.preventDefault();
+				state.decrementToMin();
+				break;
+			case "End":
+				e.preventDefault();
+				state.incrementToMax();
+				break;
+			case "Enter":
+				state.commit();
+				break;
+		}
+		p.onKeyDown?.(e);
+	};
+	const onKeyUp = (e) => {
+		getProps().onKeyUp?.(e);
+	};
+	const onButtonPressStart = (e) => {
+		const input = inputRef?.();
+		if (input && input.ownerDocument.activeElement === input) return;
+		if (e.pointerType === "mouse") input?.focus();
+		else if (e.target instanceof HTMLElement) e.target.focus();
+	};
+	let incrementTouchPressUp = false;
+	let decrementTouchPressUp = false;
+	const onIncrementPressStart = (e) => {
+		if (e.pointerType !== "touch") state.increment();
+		else incrementTouchPressUp = false;
+		onButtonPressStart(e);
+	};
+	const onIncrementPressUp = (e) => {
+		if (e.pointerType === "touch") incrementTouchPressUp = true;
+	};
+	const onIncrementPressEnd = (e) => {
+		if (e.pointerType === "touch" && incrementTouchPressUp) state.increment();
+		incrementTouchPressUp = false;
+	};
+	const onIncrementClick = (e) => {
+		if (!state.canIncrement()) {
+			e.preventDefault();
+			return;
+		}
+		state.increment();
+		inputRef?.()?.focus();
+	};
+	const onDecrementPressStart = (e) => {
+		if (e.pointerType !== "touch") state.decrement();
+		else decrementTouchPressUp = false;
+		onButtonPressStart(e);
+	};
+	const onDecrementPressUp = (e) => {
+		if (e.pointerType === "touch") decrementTouchPressUp = true;
+	};
+	const onDecrementPressEnd = (e) => {
+		if (e.pointerType === "touch" && decrementTouchPressUp) state.decrement();
+		decrementTouchPressUp = false;
+	};
+	const onDecrementClick = (e) => {
+		if (!state.canDecrement()) {
+			e.preventDefault();
+			return;
+		}
+		state.decrement();
+		inputRef?.()?.focus();
+	};
+	const getAriaDescribedBy = () => {
+		const p = getProps();
+		const parts = [];
+		if (p["aria-describedby"]) parts.push(p["aria-describedby"]);
+		if (p.description) parts.push(descriptionId);
+		if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);
+		return parts.length > 0 ? parts.join(" ") : void 0;
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get groupProps() {
+			return {
+				role: "group",
+				"aria-disabled": getProps().isDisabled || void 0,
+				"aria-invalid": getProps().isInvalid || void 0
+			};
+		},
+		get inputProps() {
+			const p = getProps();
+			const isDisabled = p.isDisabled ?? state.isDisabled();
+			const isReadOnly = p.isReadOnly ?? state.isReadOnly();
+			return mergeProps(domProps(), fieldProps, {
+				id: inputId,
+				type: "text",
+				inputMode: "decimal",
+				autoComplete: "off",
+				autoCorrect: "off",
+				spellcheck: false,
+				tabIndex: isDisabled ? void 0 : 0,
+				"aria-roledescription": "Number field",
+				"aria-invalid": p.isInvalid || void 0,
+				"aria-required": p.isRequired || void 0,
+				"aria-describedby": getAriaDescribedBy(),
+				disabled: isDisabled || void 0,
+				readOnly: isReadOnly || void 0,
+				required: p.isRequired || void 0,
+				value: state.inputValue(),
+				onInput: onInputChange,
+				onChange: onInputChange,
+				onFocus: onInputFocus,
+				onBlur: onInputBlur,
+				onKeyDown,
+				onKeyUp,
+				onPaste: p.onPaste,
+				onCopy: p.onCopy,
+				onCut: p.onCut,
+				name: p.name,
+				form: p.form,
+				autoFocus: p.autoFocus
+			});
+		},
+		get incrementButtonProps() {
+			const labelledBy = buttonLabelledBy();
+			return {
+				id: incrementId,
+				type: "button",
+				"aria-label": `Increase ${fieldLabel()}`.trim(),
+				"aria-labelledby": labelledBy ? `${incrementId} ${labelledBy}` : void 0,
+				"aria-controls": inputId,
+				excludeFromTabOrder: true,
+				preventFocusOnPress: true,
+				allowFocusWhenDisabled: true,
+				get disabled() {
+					return !state.canIncrement();
+				},
+				tabIndex: -1,
+				get isDisabled() {
+					return !state.canIncrement();
+				},
+				onClick: onIncrementClick,
+				onPressStart: onIncrementPressStart,
+				onPressUp: onIncrementPressUp,
+				onPressEnd: onIncrementPressEnd
+			};
+		},
+		get decrementButtonProps() {
+			const labelledBy = buttonLabelledBy();
+			return {
+				id: decrementId,
+				type: "button",
+				"aria-label": `Decrease ${fieldLabel()}`.trim(),
+				"aria-labelledby": labelledBy ? `${decrementId} ${labelledBy}` : void 0,
+				"aria-controls": inputId,
+				excludeFromTabOrder: true,
+				preventFocusOnPress: true,
+				allowFocusWhenDisabled: true,
+				get disabled() {
+					return !state.canDecrement();
+				},
+				tabIndex: -1,
+				get isDisabled() {
+					return !state.canDecrement();
+				},
+				onClick: onDecrementClick,
+				onPressStart: onDecrementPressStart,
+				onPressUp: onDecrementPressUp,
+				onPressEnd: onDecrementPressEnd
+			};
+		},
+		get descriptionProps() {
+			return { id: descriptionId };
+		},
+		get errorMessageProps() {
+			return { id: errorMessageId };
+		}
+	};
+}
+//#endregion
+export { createNumberField as t };
+
+//# sourceMappingURL=numberfield.jsx.map

package/dist/_chunk/numberfield.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberfield.jsx","names":[],"sources":["../../src/numberfield/createNumberField.ts"],"sourcesContent":["/**\n * Provides the behavior and accessibility implementation for a number field.\n * Based on @react-aria/numberfield useNumberField.\n */\n\nimport { type JSX, createMemo } from \"solid-js\";\nimport { createLabel } from \"../label/createLabel\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport type { NumberFieldState } from \"@proyecto-viviana/solid-stately\";\nimport type { AriaButtonProps } from \"../button/types\";\nimport type { PressEvent } from \"../interactions\";\n\nexport interface AriaNumberFieldProps {\n  /** A label for the number field. */\n  label?: JSX.Element;\n  /** An accessible label for the number field. */\n  \"aria-label\"?: string;\n  /** The element ID that labels the number field. */\n  \"aria-labelledby\"?: string;\n  /** The element ID that describes the number field. */\n  \"aria-describedby\"?: string;\n  /** Whether the number field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the number field is read-only. */\n  isReadOnly?: boolean;\n  /** Whether the number field is required. */\n  isRequired?: boolean;\n  /** Whether the number field is invalid. */\n  isInvalid?: boolean;\n  /** A description for the number field. */\n  description?: JSX.Element;\n  /** An error message for the number field. */\n  errorMessage?: JSX.Element;\n  /** The ID of the number field. */\n  id?: string;\n  /** Whether to auto-focus the input. */\n  autoFocus?: boolean;\n  /** The name for the form input. */\n  name?: string;\n  /** The form element this input belongs to. */\n  form?: string;\n  /** Handler for focus events. */\n  onFocus?: JSX.EventHandler<HTMLInputElement, FocusEvent>;\n  /** Handler for blur events. */\n  onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>;\n  /** Handler called when focus state changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler for key down events. */\n  onKeyDown?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;\n  /** Handler for key up events. */\n  onKeyUp?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;\n  /** Handler for paste events. */\n  onPaste?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n  /** Handler for copy events. */\n  onCopy?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n  /** Handler for cut events. */\n  onCut?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n}\n\nexport interface NumberFieldAria {\n  /** Props for the label element. */\n  labelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the input element group. */\n  groupProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the increment button. */\n  incrementButtonProps: AriaButtonProps;\n  /** Props for the decrement button. */\n  decrementButtonProps: AriaButtonProps;\n  /** Props for the description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field.\n */\nexport function createNumberField(\n  props: MaybeAccessor<AriaNumberFieldProps>,\n  state: NumberFieldState,\n  inputRef?: () => HTMLInputElement | null,\n): NumberFieldAria {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n\n  // Generate IDs for associated elements\n  const inputId = `${id}-input`;\n  const incrementId = `${id}-increment`;\n  const decrementId = `${id}-decrement`;\n  const descriptionId = `${id}-description`;\n  const errorMessageId = `${id}-error`;\n\n  // Label handling\n  const { labelProps, fieldProps } = createLabel({\n    get id() {\n      return inputId;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    // Upstream react-aria `useNumberField` → `useField` → `useLabel` with the DEFAULT\n    // `labelElementType: 'label'`: the S2 NumberField label is a native `<label htmlFor>`\n    // (verified against the shipped React DOM: `<label id for=inputId>`). This hardcoded\n    // `\"span\"` was a self-inflicted divergence — it dropped the `for` association and made\n    // `NumberFieldLabel` render a `<span>`. Reverted to `\"label\"` so `createLabel` emits\n    // `for: inputId` (the input still also carries `aria-labelledby`, exactly as upstream).\n    labelElementType: \"label\",\n  });\n\n  // Increment/decrement button labels — a 1:1 port of upstream `useNumberField`'s\n  // four-case logic. Upstream RAC's `NumberField` component feeds `useNumberField` a\n  // BOOLEAN slot for `label` (from `useSlot`), never the label string, so a visible\n  // label is NEVER concatenated into the button `aria-label`. Instead: with a visible\n  // label the button reads `aria-label: \"Increase\"` PLUS `aria-labelledby: \"<selfId>\n  // <labelId>\"`; only an explicit `aria-label` (and no visible label) changes the text\n  // (`\"Increase <aria-label>\"`). The prior `Increase ${getLabelText()}` was a\n  // self-inflicted divergence that produced \"Increase Quantity\" where S2 ships\n  // \"Increase\". `fieldLabel` mirrors upstream: `props['aria-label'] || ''` — the visible\n  // label string is intentionally excluded (it arrives as a boolean slot in RAC).\n  const fieldLabel = (): string => getProps()[\"aria-label\"] ?? \"\";\n  const buttonLabelledBy = (): string | undefined => {\n    if (fieldLabel()) return undefined;\n    return getProps().label != null\n      ? (labelProps.id as string | undefined)\n      : getProps()[\"aria-labelledby\"];\n  };\n\n  // Filter DOM props\n  const domProps = createMemo(() =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true }),\n  );\n\n  // Handle input change\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const value = e.currentTarget.value;\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  // Handle input blur - commit value\n  const onInputBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (e) => {\n    state.commit();\n    const p = getProps();\n    p.onBlur?.(e);\n    p.onFocusChange?.(false);\n  };\n\n  const onInputFocus: JSX.EventHandler<HTMLInputElement, FocusEvent> = (e) => {\n    const p = getProps();\n    p.onFocus?.(e);\n    p.onFocusChange?.(true);\n  };\n\n  // Handle keyboard events\n  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    const p = getProps();\n    if (p.isDisabled || p.isReadOnly) {\n      p.onKeyDown?.(e);\n      return;\n    }\n\n    switch (e.key) {\n      case \"ArrowUp\":\n        e.preventDefault();\n        state.increment();\n        break;\n      case \"ArrowDown\":\n        e.preventDefault();\n        state.decrement();\n        break;\n      case \"PageUp\":\n        e.preventDefault();\n        state.incrementToMax();\n        break;\n      case \"PageDown\":\n        e.preventDefault();\n        state.decrementToMin();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        state.decrementToMin();\n        break;\n      case \"End\":\n        e.preventDefault();\n        state.incrementToMax();\n        break;\n      case \"Enter\":\n        state.commit();\n        break;\n    }\n\n    p.onKeyDown?.(e);\n  };\n\n  const onKeyUp: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    getProps().onKeyUp?.(e);\n  };\n\n  const onButtonPressStart = (e: PressEvent) => {\n    const input = inputRef?.();\n\n    // Keep existing input focus in place. This avoids hiding software keyboards\n    // and prevents a blur/refocus flicker when mouse pressing the steppers.\n    if (input && input.ownerDocument.activeElement === input) {\n      return;\n    }\n\n    if (e.pointerType === \"mouse\") {\n      input?.focus();\n    } else if (e.target instanceof HTMLElement) {\n      e.target.focus();\n    }\n  };\n\n  let incrementTouchPressUp = false;\n  let decrementTouchPressUp = false;\n\n  const onIncrementPressStart = (e: PressEvent) => {\n    if (e.pointerType !== \"touch\") {\n      state.increment();\n    } else {\n      incrementTouchPressUp = false;\n    }\n\n    onButtonPressStart(e);\n  };\n\n  const onIncrementPressUp = (e: PressEvent) => {\n    if (e.pointerType === \"touch\") {\n      incrementTouchPressUp = true;\n    }\n  };\n\n  const onIncrementPressEnd = (e: PressEvent) => {\n    if (e.pointerType === \"touch\" && incrementTouchPressUp) {\n      state.increment();\n    }\n\n    incrementTouchPressUp = false;\n  };\n  const onIncrementClick = (e: MouseEvent) => {\n    if (!state.canIncrement()) {\n      e.preventDefault();\n      return;\n    }\n\n    state.increment();\n    inputRef?.()?.focus();\n  };\n\n  const onDecrementPressStart = (e: PressEvent) => {\n    if (e.pointerType !== \"touch\") {\n      state.decrement();\n    } else {\n      decrementTouchPressUp = false;\n    }\n\n    onButtonPressStart(e);\n  };\n\n  const onDecrementPressUp = (e: PressEvent) => {\n    if (e.pointerType === \"touch\") {\n      decrementTouchPressUp = true;\n    }\n  };\n\n  const onDecrementPressEnd = (e: PressEvent) => {\n    if (e.pointerType === \"touch\" && decrementTouchPressUp) {\n      state.decrement();\n    }\n\n    decrementTouchPressUp = false;\n  };\n  const onDecrementClick = (e: MouseEvent) => {\n    if (!state.canDecrement()) {\n      e.preventDefault();\n      return;\n    }\n\n    state.decrement();\n    inputRef?.()?.focus();\n  };\n\n  // Build aria-describedby\n  const getAriaDescribedBy = () => {\n    const p = getProps();\n    const parts: string[] = [];\n    if (p[\"aria-describedby\"]) parts.push(p[\"aria-describedby\"]);\n    if (p.description) parts.push(descriptionId);\n    if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);\n    return parts.length > 0 ? parts.join(\" \") : undefined;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get groupProps() {\n      return {\n        role: \"group\",\n        \"aria-disabled\": getProps().isDisabled || undefined,\n        \"aria-invalid\": getProps().isInvalid || undefined,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get inputProps() {\n      const p = getProps();\n      const isDisabled = p.isDisabled ?? state.isDisabled();\n      const isReadOnly = p.isReadOnly ?? state.isReadOnly();\n\n      return mergeProps(\n        domProps(),\n        fieldProps as Record<string, unknown>,\n        {\n          id: inputId,\n          type: \"text\",\n          inputMode: \"decimal\" as const,\n          autoComplete: \"off\",\n          autoCorrect: \"off\",\n          spellcheck: false,\n          // Upstream routes the input through useFormattedTextField → useTextField →\n          // useFocusable, which \"always set[s] a tabIndex so that Safari allows\n          // focusing native buttons and inputs\": `excludeFromTabOrder ? -1 : 0`, then\n          // `undefined` when disabled. The input is never excluded, so the rendered\n          // DOM carries `tabindex=\"0\"` (absent only when disabled). We hand-roll\n          // inputProps (see the spinbutton-override note below) so we must replay that\n          // one focusable prop here to stay byte-identical to React's tab order.\n          tabIndex: isDisabled ? undefined : 0,\n          // Upstream useNumberField wraps useSpinButton but deliberately\n          // overrides its output: role=spinbutton can't be focused with\n          // VoiceOver, so the input is a plain textbox (inside the role=group\n          // wrapper above) and every aria-value* is dropped in favour of\n          // aria-roledescription. The formatted value is still announced via the\n          // input's own value. Mirror that contract instead of leaking the raw\n          // spinbutton semantics.\n          //\n          // The string MUST match upstream's `stringFormatter.format('numberField')`,\n          // whose en-US value is `Number field` (capitalised) — not a lowercase\n          // hand-roll. Full locale routing via `createStringFormatter` (as\n          // `createDateField` does) is tracked as `intl-roledescription-hardcodes`\n          // (also covers the ColorArea/ColorSwatch English hardcodes); this keeps the\n          // en-US roledescription byte-identical to React Spectrum in the meantime.\n          \"aria-roledescription\": \"Number field\",\n          \"aria-invalid\": p.isInvalid || undefined,\n          \"aria-required\": p.isRequired || undefined,\n          \"aria-describedby\": getAriaDescribedBy(),\n          disabled: isDisabled || undefined,\n          readOnly: isReadOnly || undefined,\n          required: p.isRequired || undefined,\n          value: state.inputValue(),\n          onInput: onInputChange,\n          onChange: onInputChange,\n          onFocus: onInputFocus,\n          onBlur: onInputBlur,\n          onKeyDown,\n          onKeyUp,\n          onPaste: p.onPaste,\n          onCopy: p.onCopy,\n          onCut: p.onCut,\n          name: p.name,\n          form: p.form,\n          autoFocus: p.autoFocus,\n        } as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get incrementButtonProps() {\n      const labelledBy = buttonLabelledBy();\n      return {\n        id: incrementId,\n        type: \"button\",\n        \"aria-label\": `Increase ${fieldLabel()}`.trim(),\n        \"aria-labelledby\": labelledBy ? `${incrementId} ${labelledBy}` : undefined,\n        \"aria-controls\": inputId,\n        excludeFromTabOrder: true,\n        preventFocusOnPress: true,\n        allowFocusWhenDisabled: true,\n        get disabled() {\n          return !state.canIncrement();\n        },\n        tabIndex: -1,\n        get isDisabled() {\n          return !state.canIncrement();\n        },\n        onClick: onIncrementClick,\n        onPressStart: onIncrementPressStart,\n        onPressUp: onIncrementPressUp,\n        onPressEnd: onIncrementPressEnd,\n      } as AriaButtonProps;\n    },\n    get decrementButtonProps() {\n      const labelledBy = buttonLabelledBy();\n      return {\n        id: decrementId,\n        type: \"button\",\n        \"aria-label\": `Decrease ${fieldLabel()}`.trim(),\n        \"aria-labelledby\": labelledBy ? `${decrementId} ${labelledBy}` : undefined,\n        \"aria-controls\": inputId,\n        excludeFromTabOrder: true,\n        preventFocusOnPress: true,\n        allowFocusWhenDisabled: true,\n        get disabled() {\n          return !state.canDecrement();\n        },\n        tabIndex: -1,\n        get isDisabled() {\n          return !state.canDecrement();\n        },\n        onClick: onDecrementClick,\n        onPressStart: onDecrementPressStart,\n        onPressUp: onDecrementPressUp,\n        onPressEnd: onDecrementPressEnd,\n      } as AriaButtonProps;\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n  };\n}\n"],"mappings":"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"}