@jobber/components 8.25.1 → 8.25.2

package/dist/InputNumberExperimental-cjs.js

@@ -901,8 +901,9 @@ function useInputNumberExperimentalContext(consumer) {
     }
     return context;
 }
-function InputNumberExperimentalWrapperInternal(props, ref) {
-    const { align, autoComplete, children, className, disabled, format, id: idProp, inline, inputMode, invalid, loading, max, maxLength, min, name, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, onValueCommitted, readOnly, showMiniLabel = true, size = "default", step = 1, style, value, } = props;
+function InputNumberExperimentalWrapper(_a) {
+    var { ref } = _a, props = tslib_es6.__rest(_a, ["ref"]);
+    const { align, autoComplete, children, className, disabled, format, id: idProp, inline, inputMode, invalid, loading, max, min, name, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, onValueCommitted, readOnly, showMiniLabel = true, size = "default", step = 1, style, value, } = props;
     const generatedId = React.useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = React.useRef(null);
@@ -938,7 +939,6 @@ function InputNumberExperimentalWrapperInternal(props, ref) {
         inputMode,
         loading,
         max,
-        maxLength,
         min,
         onBlur,
         onFocus,
@@ -961,7 +961,6 @@ function InputNumberExperimentalWrapperInternal(props, ref) {
         inputMode,
         loading,
         max,
-        maxLength,
         min,
         onBlur,
         onFocus,
@@ -999,7 +998,7 @@ function InputNumberExperimentalInput({ children, className, style, }) {
         className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled),
     }, { className, style });
     return (React.createElement("div", Object.assign({}, rootProps),
-        React.createElement(NumberFieldInput.NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutoComplete(ctx.autoComplete), className: styles.input, inputMode: ctx.inputMode, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        React.createElement(NumberFieldInput.NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutoComplete(ctx.autoComplete), className: styles.input, inputMode: ctx.inputMode, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         children));
 }
 function InputNumberExperimentalLabel({ children, className, style, }) {
@@ -1099,10 +1098,11 @@ function resolveAutoComplete(autoComplete) {
  * consumer would write by hand with `<InputNumberExperimental.Wrapper>` and the
  * parts — to customize a single piece, copy this tree and swap that part.
  */
-function InputNumberExperimentalInternal(props, ref) {
-    var _a;
+function InputNumberExperimental(_a) {
+    var _b;
+    var { ref } = _a, props = tslib_es6.__rest(_a, ["ref"]);
     const { label, description, error, prefix, suffix } = props, config = tslib_es6.__rest(props, ["label", "description", "error", "prefix", "suffix"]);
-    const size = (_a = config.size) !== null && _a !== void 0 ? _a : "default";
+    const size = (_b = config.size) !== null && _b !== void 0 ? _b : "default";
     return (React.createElement(InputNumberExperimentalWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
         React.createElement(InputNumberExperimentalGroup, null,
             prefix && renderDefaultAffix("prefix", prefix, size),
@@ -1114,10 +1114,8 @@ function InputNumberExperimentalInternal(props, ref) {
             React.createElement(InputNumberExperimentalDescription, null, description),
             React.createElement(InputNumberExperimentalError, null, error)))));
 }
-const InputNumberExperimentalWrapper = React.forwardRef(InputNumberExperimentalWrapperInternal);
 InputNumberExperimentalWrapper.displayName = "InputNumberExperimental.Wrapper";
-const InputNumberExperimentalBase = React.forwardRef(InputNumberExperimentalInternal);
-InputNumberExperimentalBase.displayName = "InputNumberExperimental";
+InputNumberExperimental.displayName = "InputNumberExperimental";
 InputNumberExperimentalGroup.displayName = "InputNumberExperimental.Group";
 InputNumberExperimentalFooter.displayName = "InputNumberExperimental.Footer";
 InputNumberExperimentalInput.displayName = "InputNumberExperimental.Input";
@@ -1133,19 +1131,17 @@ InputNumberExperimentalDecrement.displayName =
     "InputNumberExperimental.Decrement";
 InputNumberExperimentalAffixCompound.displayName =
     "InputNumberExperimental.Affix";
-const InputNumberExperimental = Object.assign(InputNumberExperimentalBase, {
-    Wrapper: InputNumberExperimentalWrapper,
-    Group: InputNumberExperimentalGroup,
-    Footer: InputNumberExperimentalFooter,
-    Input: InputNumberExperimentalInput,
-    Label: InputNumberExperimentalLabel,
-    Description: InputNumberExperimentalDescription,
-    Error: InputNumberExperimentalError,
-    Loading: InputNumberExperimentalLoading,
-    Stepper: InputNumberExperimentalStepper,
-    Increment: InputNumberExperimentalIncrement,
-    Decrement: InputNumberExperimentalDecrement,
-    Affix: InputNumberExperimentalAffixCompound,
-});
+InputNumberExperimental.Wrapper = InputNumberExperimentalWrapper;
+InputNumberExperimental.Group = InputNumberExperimentalGroup;
+InputNumberExperimental.Footer = InputNumberExperimentalFooter;
+InputNumberExperimental.Input = InputNumberExperimentalInput;
+InputNumberExperimental.Label = InputNumberExperimentalLabel;
+InputNumberExperimental.Description = InputNumberExperimentalDescription;
+InputNumberExperimental.Error = InputNumberExperimentalError;
+InputNumberExperimental.Loading = InputNumberExperimentalLoading;
+InputNumberExperimental.Stepper = InputNumberExperimentalStepper;
+InputNumberExperimental.Increment = InputNumberExperimentalIncrement;
+InputNumberExperimental.Decrement = InputNumberExperimentalDecrement;
+InputNumberExperimental.Affix = InputNumberExperimentalAffixCompound;
 
 exports.InputNumberExperimental = InputNumberExperimental;

package/dist/InputNumberExperimental-es.js

@@ -1,6 +1,6 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import * as React from 'react';
-import React__default, { createContext, forwardRef, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
+import React__default, { createContext, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
 import classnames from 'classnames';
 import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
@@ -881,8 +881,9 @@ function useInputNumberExperimentalContext(consumer) {
     }
     return context;
 }
-function InputNumberExperimentalWrapperInternal(props, ref) {
-    const { align, autoComplete, children, className, disabled, format, id: idProp, inline, inputMode, invalid, loading, max, maxLength, min, name, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, onValueCommitted, readOnly, showMiniLabel = true, size = "default", step = 1, style, value, } = props;
+function InputNumberExperimentalWrapper(_a) {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    const { align, autoComplete, children, className, disabled, format, id: idProp, inline, inputMode, invalid, loading, max, min, name, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, onValueCommitted, readOnly, showMiniLabel = true, size = "default", step = 1, style, value, } = props;
     const generatedId = useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = useRef(null);
@@ -918,7 +919,6 @@ function InputNumberExperimentalWrapperInternal(props, ref) {
         inputMode,
         loading,
         max,
-        maxLength,
         min,
         onBlur,
         onFocus,
@@ -941,7 +941,6 @@ function InputNumberExperimentalWrapperInternal(props, ref) {
         inputMode,
         loading,
         max,
-        maxLength,
         min,
         onBlur,
         onFocus,
@@ -979,7 +978,7 @@ function InputNumberExperimentalInput({ children, className, style, }) {
         className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled),
     }, { className, style });
     return (React__default.createElement("div", Object.assign({}, rootProps),
-        React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutoComplete(ctx.autoComplete), className: styles.input, inputMode: ctx.inputMode, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutoComplete(ctx.autoComplete), className: styles.input, inputMode: ctx.inputMode, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
         children));
 }
 function InputNumberExperimentalLabel({ children, className, style, }) {
@@ -1079,10 +1078,11 @@ function resolveAutoComplete(autoComplete) {
  * consumer would write by hand with `<InputNumberExperimental.Wrapper>` and the
  * parts — to customize a single piece, copy this tree and swap that part.
  */
-function InputNumberExperimentalInternal(props, ref) {
-    var _a;
+function InputNumberExperimental(_a) {
+    var _b;
+    var { ref } = _a, props = __rest(_a, ["ref"]);
     const { label, description, error, prefix, suffix } = props, config = __rest(props, ["label", "description", "error", "prefix", "suffix"]);
-    const size = (_a = config.size) !== null && _a !== void 0 ? _a : "default";
+    const size = (_b = config.size) !== null && _b !== void 0 ? _b : "default";
     return (React__default.createElement(InputNumberExperimentalWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
         React__default.createElement(InputNumberExperimentalGroup, null,
             prefix && renderDefaultAffix("prefix", prefix, size),
@@ -1094,10 +1094,8 @@ function InputNumberExperimentalInternal(props, ref) {
             React__default.createElement(InputNumberExperimentalDescription, null, description),
             React__default.createElement(InputNumberExperimentalError, null, error)))));
 }
-const InputNumberExperimentalWrapper = forwardRef(InputNumberExperimentalWrapperInternal);
 InputNumberExperimentalWrapper.displayName = "InputNumberExperimental.Wrapper";
-const InputNumberExperimentalBase = forwardRef(InputNumberExperimentalInternal);
-InputNumberExperimentalBase.displayName = "InputNumberExperimental";
+InputNumberExperimental.displayName = "InputNumberExperimental";
 InputNumberExperimentalGroup.displayName = "InputNumberExperimental.Group";
 InputNumberExperimentalFooter.displayName = "InputNumberExperimental.Footer";
 InputNumberExperimentalInput.displayName = "InputNumberExperimental.Input";
@@ -1113,19 +1111,17 @@ InputNumberExperimentalDecrement.displayName =
     "InputNumberExperimental.Decrement";
 InputNumberExperimentalAffixCompound.displayName =
     "InputNumberExperimental.Affix";
-const InputNumberExperimental = Object.assign(InputNumberExperimentalBase, {
-    Wrapper: InputNumberExperimentalWrapper,
-    Group: InputNumberExperimentalGroup,
-    Footer: InputNumberExperimentalFooter,
-    Input: InputNumberExperimentalInput,
-    Label: InputNumberExperimentalLabel,
-    Description: InputNumberExperimentalDescription,
-    Error: InputNumberExperimentalError,
-    Loading: InputNumberExperimentalLoading,
-    Stepper: InputNumberExperimentalStepper,
-    Increment: InputNumberExperimentalIncrement,
-    Decrement: InputNumberExperimentalDecrement,
-    Affix: InputNumberExperimentalAffixCompound,
-});
+InputNumberExperimental.Wrapper = InputNumberExperimentalWrapper;
+InputNumberExperimental.Group = InputNumberExperimentalGroup;
+InputNumberExperimental.Footer = InputNumberExperimentalFooter;
+InputNumberExperimental.Input = InputNumberExperimentalInput;
+InputNumberExperimental.Label = InputNumberExperimentalLabel;
+InputNumberExperimental.Description = InputNumberExperimentalDescription;
+InputNumberExperimental.Error = InputNumberExperimentalError;
+InputNumberExperimental.Loading = InputNumberExperimentalLoading;
+InputNumberExperimental.Stepper = InputNumberExperimentalStepper;
+InputNumberExperimental.Increment = InputNumberExperimentalIncrement;
+InputNumberExperimental.Decrement = InputNumberExperimentalDecrement;
+InputNumberExperimental.Affix = InputNumberExperimentalAffixCompound;
 
 export { InputNumberExperimental as I };

package/dist/docs/InputNumberExperimental/InputNumberExperimental.md

@@ -0,0 +1,519 @@
+# InputNumberExperimental
+
+## Summary
+
+`InputNumberExperimental` collects a single numeric value in a form. Reach for
+it when the value benefits from being nudged up or down — quantities, prices,
+durations, or counts.
+
+Most fields need only the prop-driven usage below. For the rare layout the props
+can't express, the same field can be composed from parts — see the **Implement**
+tab.
+
+### When to use
+
+* The value is a number the user increments or decrements (quantity, price,
+  days, repetitions).
+* A stepper, min/max bounds, or number formatting would help the user.
+
+### When not to use
+
+* The value is a sequence of digits that is never calculated with — phone
+  numbers, credit-card numbers, or postal codes. A stepper adds no value there;
+  use [InputText](../InputText/InputText.md) instead.
+
+## Basic usage
+
+Pass `label`, a controlled `value`, and `onValueCommitted`. Bounds (`min` /
+`max`) and `step` are optional.
+
+```tsx
+import React, { useState } from "react";
+import type { InputNumberExperimentalProps } from "@jobber/components/primitives";
+import { InputNumberExperimental } from "@jobber/components/primitives";
+
+export function InputNumberExperimentalBasicExample(
+  props: Partial<InputNumberExperimentalProps>,
+) {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumberExperimental
+      label="Quantity"
+      min={0}
+      max={100}
+      {...props}
+      value={value}
+      onValueCommitted={setValue}
+    />
+  );
+}
+```
+
+## Options
+
+### Prefixes and suffixes
+
+Use `prefix` / `suffix` to add a unit or symbol. A suffix can be a label, an
+icon, or a clickable icon that runs an action (give it an `ariaLabel`).
+
+```tsx
+import React, { useState } from "react";
+import { InputNumberExperimental } from "@jobber/components/primitives";
+import { Content } from "@jobber/components/Content";
+
+export function InputNumberExperimentalAffixesExample() {
+  const [price, setPrice] = useState<number | null>(42);
+  const [days, setDays] = useState<number | null>(7);
+  const [reps, setReps] = useState<number | null>(3);
+
+  return (
+    <Content>
+      <InputNumberExperimental
+        label="Price"
+        prefix={{ label: "$" }}
+        suffix={{ label: "USD" }}
+        value={price}
+        onValueCommitted={setPrice}
+      />
+
+      <InputNumberExperimental
+        label="Follow-up in"
+        suffix={{ icon: "calendar", label: "days" }}
+        value={days}
+        onValueCommitted={setDays}
+      />
+
+      <InputNumberExperimental
+        label="Repetitions"
+        suffix={{
+          icon: "remove",
+          ariaLabel: "Clear value",
+          onClick: () => setReps(null),
+        }}
+        value={reps}
+        onValueCommitted={setReps}
+      />
+    </Content>
+  );
+}
+```
+
+### Sizes
+
+Three sizes are available. `default` fits almost every form; use `small` only in
+tight spaces and `large` only in especially spacious layouts.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumberExperimental } from "@jobber/components/primitives";
+import { Content } from "@jobber/components/Content";
+
+export function InputNumberExperimentalSizesExample() {
+  const [small, setSmall] = useState<number | null>(42);
+  const [base, setBase] = useState<number | null>(42);
+  const [large, setLarge] = useState<number | null>(42);
+
+  return (
+    <Content>
+      <InputNumberExperimental
+        label="Small"
+        size="small"
+        suffix={{ label: "items" }}
+        value={small}
+        onValueCommitted={setSmall}
+      />
+      <InputNumberExperimental
+        label="Default"
+        size="default"
+        suffix={{ label: "items" }}
+        value={base}
+        onValueCommitted={setBase}
+      />
+      <InputNumberExperimental
+        label="Large"
+        size="large"
+        suffix={{ label: "items" }}
+        value={large}
+        onValueCommitted={setLarge}
+      />
+    </Content>
+  );
+}
+```
+
+### Formatting
+
+`format` takes any `Intl.NumberFormatOptions` and controls only how the value is
+displayed; the committed value stays a plain number. See the **Implement** tab
+for how percent and currency values map to the underlying number.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumberExperimental } from "@jobber/components/primitives";
+import { Content } from "@jobber/components/Content";
+
+export function InputNumberExperimentalFormattingExample() {
+  const [currency, setCurrency] = useState<number | null>(1234.5);
+  const [percent, setPercent] = useState<number | null>(0.5);
+  const [decimal, setDecimal] = useState<number | null>(11.13);
+
+  return (
+    <Content>
+      <InputNumberExperimental
+        label="Currency"
+        description='{ style: "currency", currency: "USD" }'
+        format={{ style: "currency", currency: "USD" }}
+        value={currency}
+        onValueCommitted={setCurrency}
+      />
+      <InputNumberExperimental
+        label="Percent"
+        description='{ style: "percent" } — value is a ratio: 0.5 → 50%'
+        format={{ style: "percent", maximumFractionDigits: 2 }}
+        value={percent}
+        onValueCommitted={setPercent}
+      />
+      <InputNumberExperimental
+        label="Decimal"
+        description="{ maximumFractionDigits: 2 }"
+        format={{ maximumFractionDigits: 2 }}
+        value={decimal}
+        onValueCommitted={setDecimal}
+      />
+    </Content>
+  );
+}
+```
+
+### Loading
+
+`loading` shows a non-blocking indicator in the stepper's slot for background
+work (for example, saving). The field stays editable and the stepper is hidden
+while loading.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumberExperimental } from "@jobber/components/primitives";
+
+export function InputNumberExperimentalLoadingExample() {
+  const [value, setValue] = useState<number | null>(42);
+
+  return (
+    <InputNumberExperimental
+      loading
+      label="Quantity"
+      suffix={{ label: "items" }}
+      value={value}
+      onValueCommitted={setValue}
+    />
+  );
+}
+```
+
+## Content guidelines
+
+### Label the unit, don't repeat it
+
+Put the unit in the label or an affix, not both.
+
+| ✅ Do                            | ❌ Don't                                 |
+| ------------------------------- | --------------------------------------- |
+| Label "Weight", suffix "kg"     | Label "Weight (kg)", suffix "kg"        |
+| Label "Duration", suffix "days" | Label "Duration in days", suffix "days" |
+
+### Keep labels short and sentence-cased
+
+| ✅ Do     | ❌ Don't                 |
+| -------- | ----------------------- |
+| Quantity | Enter the quantity here |
+| Discount | DISCOUNT %              |
+
+## Do's and Don'ts
+
+* ✅ Use for values the user increments or decrements
+* ✅ Set `min` / `max` when the value has real bounds
+* ✅ Use `format` for currency, percent, and decimals rather than formatting the
+  value yourself
+* ❌ Don't use it for digit sequences that are never calculated with (phone,
+  credit card)
+* ❌ Don't disable the field to communicate an error — show an `error` message
+  instead
+
+## Accessibility
+
+The field is a native number input, so it is reachable and operable by keyboard
+and assistive technology.
+
+| Key              | Behavior                        |
+| ---------------- | ------------------------------- |
+| Tab              | Moves focus to the field        |
+| Up / Down arrows | Increment / decrement by `step` |
+| Enter            | Commits the current value       |
+| Type             | Replaces the value              |
+
+Give a clickable affix a clear `ariaLabel` describing its action (for example,
+"Clear value").
+
+## Related components
+
+* For digit sequences that are not calculated with (phone, credit card), use
+  [InputText](../InputText/InputText.md).
+* For dates, use [InputDate](../InputDate/InputDate.md).
+
+
+## Anatomy
+
+The prop-driven `<InputNumberExperimental>` composes a set of parts. You only
+need these when the props can't express a layout; otherwise reach for the props
+shown on the **Design** tab.
+
+| Part                    | Description                                                          |
+| ----------------------- | -------------------------------------------------------------------- |
+| `Wrapper`               | Owns the field configuration and state; provides it to the parts     |
+| `Group`                 | The bordered field row                                               |
+| `Input`                 | The input area; holds the `Label` and the `Stepper` / `Loading` slot |
+| `Label`                 | Floating field label                                                 |
+| `Stepper`               | The increment / decrement button pair                                |
+| `Increment` `Decrement` | The individual stepper buttons                                       |
+| `Affix`                 | Prefix / suffix content (label, icon, or clickable icon)             |
+| `Loading`               | Non-blocking loading indicator slot                                  |
+| `Footer`                | Below-field row that holds `Description` and `Error`                 |
+| `Description`           | Helper text below the field                                          |
+| `Error`                 | Styled error message below the field                                 |
+
+## Composition
+
+The prop-driven component is sugar: it renders exactly the tree you would write
+by hand with `<InputNumberExperimental.Wrapper>` and the parts. To customize a
+single piece, compose the tree yourself and swap that one part — the other parts
+keep their defaults. The sugar does not merge consumer-provided parts into its
+render, so there is no per-slot precedence to reason about.
+
+`Wrapper` owns the field state and shares it with the parts through context, so
+every part must be rendered inside a `Wrapper` (a part used outside one throws).
+
+The example below replaces the default stepper icons with `+` / `−` and leaves
+everything else as the default:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumberExperimental } from "@jobber/components/primitives";
+
+export function InputNumberExperimentalCompositionExample() {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumberExperimental.Wrapper value={value} onValueCommitted={setValue}>
+      <InputNumberExperimental.Group>
+        <InputNumberExperimental.Input>
+          <InputNumberExperimental.Label>
+            Quantity
+          </InputNumberExperimental.Label>
+          <InputNumberExperimental.Stepper>
+            <InputNumberExperimental.Increment ariaLabel="Increase Quantity">
+              +
+            </InputNumberExperimental.Increment>
+            <InputNumberExperimental.Decrement ariaLabel="Decrease Quantity">
+              −
+            </InputNumberExperimental.Decrement>
+          </InputNumberExperimental.Stepper>
+        </InputNumberExperimental.Input>
+      </InputNumberExperimental.Group>
+    </InputNumberExperimental.Wrapper>
+  );
+}
+```
+
+## Controlled usage
+
+The field is controlled: pass `value` (a `number`, or `null` for empty) and read
+changes back through one of two callbacks.
+
+| Callback           | Fires                                                       | Use for                            |
+| ------------------ | ----------------------------------------------------------- | ---------------------------------- |
+| `onValueChange`    | On every parsed change (typing, paste, stepper, arrow step) | Live-updating UI as the user types |
+| `onValueCommitted` | When the user commits (blur, Enter, stepper, arrow step)    | Saving / validating a final value  |
+
+Both emit `null` when the field is empty. Prefer `onValueCommitted` for
+persistence so you are not writing on every keystroke.
+
+## Formatting semantics
+
+`format` is forwarded to Base UI's `NumberField` `format` and accepts any
+`Intl.NumberFormatOptions`. It changes the display only; the committed value is
+always a plain number. Two things to know:
+
+* **Percent** (`{ style: "percent" }`) treats the value as a ratio: `0.5`
+  renders `50%`, and the stepper moves in ratio units. If you want the value to
+  be the number itself (`50` → `50%`), use `{ style: "unit", unit: "percent" }`.
+* With no `format`, typed decimals are preserved and grouping is off
+  (`useGrouping: false`), so large numbers render without thousands separators
+  unless you opt in.
+
+
+## Props
+
+### Web
+
+#### InputNumberExperimental
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `align` | `"center" | "right"` | No | — |  |
+| `autoComplete` | `InputNumberExperimentalAutoComplete` | No | — |  |
+| `className` | `string` | No | — |  |
+| `description` | `ReactNode` | No | — |  |
+| `disabled` | `boolean` | No | — |  |
+| `error` | `string` | No | — | Renders a styled error message below the field. |
+| `format` | `NumberFormatOptions` | No | — | Number formatting for the displayed value, forwarded to Base UI `NumberField`'s native `format`. When omitted, typed ... |
+| `id` | `string` | No | — |  |
+| `inline` | `boolean` | No | — | Shrink-wrap the field to its content (auto width). |
+| `inputMode` | `"decimal" | "numeric"` | No | — |  |
+| `invalid` | `boolean` | No | — | Style the error border without showing an error message. |
+| `label` | `string` | No | — | Floating field label. |
+| `loading` | `boolean` | No | — | Shows a non-blocking loading indicator in the stepper's slot. The field stays editable (use `readOnly`/`disabled` to ... |
+| `max` | `number` | No | — |  |
+| `min` | `number` | No | — |  |
+| `name` | `string` | No | — |  |
+| `onBlur` | `(event?: FocusEvent<HTMLInputElement, Element>) => void` | No | — |  |
+| `onEnter` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Fires when Enter is pressed without modifier keys (Shift/Ctrl/Meta). |
+| `onFocus` | `(event?: FocusEvent<HTMLInputElement, Element>) => void` | No | — |  |
+| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — |  |
+| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — |  |
+| `onValueChange` | `(newValue: number) => void` | No | — | Fires on every parsed value change (typing, paste, stepper, arrow step). Emits `null` when the field is empty. |
+| `onValueCommitted` | `(newValue: number) => void` | No | — | Fires when the user commits a value (blur, Enter, stepper, arrow step). Emits `null` when committed empty. For per-ke... |
+| `prefix` | `InputNumberExperimentalAffix` | No | — |  |
+| `readOnly` | `boolean` | No | — |  |
+| `ref` | `Ref<InputNumberExperimentalRef>` | No | — |  |
+| `showMiniLabel` | `boolean` | No | — | Default `true`. When `false`, the floating label is hidden. |
+| `size` | `InputNumberExperimentalSize` | No | — |  |
+| `step` | `number` | No | — | Amount the stepper buttons and ArrowUp/ArrowDown keys change the value by. Default `1`. |
+| `style` | `CSSProperties` | No | — |  |
+| `suffix` | `InputNumberExperimentalSuffixProp` | No | — |  |
+| `value` | `number` | No | — | Controlled value. `number` sets the value; `null` (or `undefined`) is an empty field. |
+
+#### InputNumberExperimental.Affix
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `variation` | `"prefix" | "suffix"` | Yes | — |  |
+| `ariaLabel` | `string` | No | — |  |
+| `children` | `ReactNode` | No | — | Arbitrary affix content, beyond the built-in `label`/`icon`. |
+| `className` | `string` | No | — |  |
+| `icon` | `IconNames` | No | — |  |
+| `label` | `string` | No | — |  |
+| `onClick` | `() => void` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Decrement
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | — | Accessible label for the button. |
+| `children` | `ReactNode` | No | — | Icon content. Falls back to the default Atlantis stepper icon. |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Description
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Error
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Footer
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Group
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Increment
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | — | Accessible label for the button. |
+| `children` | `ReactNode` | No | — | Icon content. Falls back to the default Atlantis stepper icon. |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Input
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | Content rendered inside the input area (e.g. `.Label`, `.Stepper`). |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Label
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Loading
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | Indicator content. Falls back to the default `ActivityIndicator`. |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Stepper
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | Stepper buttons. Falls back to the default increment/decrement pair. |
+| `className` | `string` | No | — |  |
+| `decrementLabel` | `string` | No | — | Accessible label for the decrement button. Defaults to `Decrease value`. |
+| `incrementLabel` | `string` | No | — | Accessible label for the increment button. Defaults to `Increase value`. |
+| `style` | `CSSProperties` | No | — |  |
+
+#### InputNumberExperimental.Wrapper
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `align` | `"center" | "right"` | No | — |  |
+| `autoComplete` | `InputNumberExperimentalAutoComplete` | No | — |  |
+| `children` | `ReactNode` | No | — | Composed parts (`.Group`, `.Footer`, and the parts within them). |
+| `className` | `string` | No | — |  |
+| `disabled` | `boolean` | No | — |  |
+| `format` | `NumberFormatOptions` | No | — | Number formatting for the displayed value, forwarded to Base UI `NumberField`'s native `format`. When omitted, typed ... |
+| `id` | `string` | No | — |  |
+| `inline` | `boolean` | No | — | Shrink-wrap the field to its content (auto width). |
+| `inputMode` | `"decimal" | "numeric"` | No | — |  |
+| `invalid` | `boolean` | No | — | Style the error border without showing an error message. |
+| `loading` | `boolean` | No | — | Shows a non-blocking loading indicator in the stepper's slot. The field stays editable (use `readOnly`/`disabled` to ... |
+| `max` | `number` | No | — |  |
+| `min` | `number` | No | — |  |
+| `name` | `string` | No | — |  |
+| `onBlur` | `(event?: FocusEvent<HTMLInputElement, Element>) => void` | No | — |  |
+| `onEnter` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Fires when Enter is pressed without modifier keys (Shift/Ctrl/Meta). |
+| `onFocus` | `(event?: FocusEvent<HTMLInputElement, Element>) => void` | No | — |  |
+| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — |  |
+| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — |  |
+| `onValueChange` | `(newValue: number) => void` | No | — | Fires on every parsed value change (typing, paste, stepper, arrow step). Emits `null` when the field is empty. |
+| `onValueCommitted` | `(newValue: number) => void` | No | — | Fires when the user commits a value (blur, Enter, stepper, arrow step). Emits `null` when committed empty. For per-ke... |
+| `readOnly` | `boolean` | No | — |  |
+| `ref` | `Ref<InputNumberExperimentalRef>` | No | — |  |
+| `showMiniLabel` | `boolean` | No | — | Default `true`. When `false`, the floating label is hidden. |
+| `size` | `InputNumberExperimentalSize` | No | — |  |
+| `step` | `number` | No | — | Amount the stepper buttons and ArrowUp/ArrowDown keys change the value by. Default `1`. |
+| `style` | `CSSProperties` | No | — |  |
+| `value` | `number` | No | — | Controlled value. `number` sets the value; `null` (or `undefined`) is an empty field. |

package/dist/docs/index.md

@@ -55,6 +55,7 @@
 [InputFile](./InputFile/InputFile.md)
 [InputGroup](./InputGroup/InputGroup.md)
 [InputNumber](./InputNumber/InputNumber.md)
+[InputNumberExperimental](./InputNumberExperimental/InputNumberExperimental.md)
 [InputPhoneNumber](./InputPhoneNumber/InputPhoneNumber.md)
 [InputText](./InputText/InputText.md)
 [InputTime](./InputTime/InputTime.md)

package/dist/primitives/InputNumberExperimental/InputNumberExperimental.d.ts

@@ -1,5 +1,12 @@
+import type { Ref } from "react";
 import React from "react";
 import type { InputNumberExperimentalAffixCompoundProps, InputNumberExperimentalDescriptionProps, InputNumberExperimentalErrorProps, InputNumberExperimentalFooterProps, InputNumberExperimentalGroupProps, InputNumberExperimentalInputProps, InputNumberExperimentalLabelProps, InputNumberExperimentalLoadingProps, InputNumberExperimentalProps, InputNumberExperimentalRef, InputNumberExperimentalStepButtonProps, InputNumberExperimentalStepperProps, InputNumberExperimentalWrapperProps } from "./types";
+declare function InputNumberExperimentalWrapper({ ref, ...props }: InputNumberExperimentalWrapperProps & {
+    readonly ref?: Ref<InputNumberExperimentalRef>;
+}): React.JSX.Element;
+declare namespace InputNumberExperimentalWrapper {
+    var displayName: string;
+}
 declare function InputNumberExperimentalGroup({ children, className, style, }: InputNumberExperimentalGroupProps): React.JSX.Element;
 declare namespace InputNumberExperimentalGroup {
     var displayName: string;
@@ -44,18 +51,27 @@ declare function InputNumberExperimentalAffixCompound({ variation, label, icon,
 declare namespace InputNumberExperimentalAffixCompound {
     var displayName: string;
 }
-export declare const InputNumberExperimental: React.ForwardRefExoticComponent<InputNumberExperimentalProps & React.RefAttributes<InputNumberExperimentalRef>> & {
-    Wrapper: React.ForwardRefExoticComponent<InputNumberExperimentalWrapperProps & React.RefAttributes<InputNumberExperimentalRef>>;
-    Group: typeof InputNumberExperimentalGroup;
-    Footer: typeof InputNumberExperimentalFooter;
-    Input: typeof InputNumberExperimentalInput;
-    Label: typeof InputNumberExperimentalLabel;
-    Description: typeof InputNumberExperimentalDescription;
-    Error: typeof InputNumberExperimentalError;
-    Loading: typeof InputNumberExperimentalLoading;
-    Stepper: typeof InputNumberExperimentalStepper;
-    Increment: typeof InputNumberExperimentalIncrement;
-    Decrement: typeof InputNumberExperimentalDecrement;
-    Affix: typeof InputNumberExperimentalAffixCompound;
-};
-export type { InputNumberExperimentalAffix, InputNumberExperimentalProps, InputNumberExperimentalRef, InputNumberExperimentalSuffix, InputNumberExperimentalSuffixProp, InputNumberExperimentalWrapperProps, } from "./types";
+/**
+ * Sugar layer: composes the parts from props. This is the same composition a
+ * consumer would write by hand with `<InputNumberExperimental.Wrapper>` and the
+ * parts — to customize a single piece, copy this tree and swap that part.
+ */
+declare function InputNumberExperimental({ ref, ...props }: InputNumberExperimentalProps & {
+    readonly ref?: Ref<InputNumberExperimentalRef>;
+}): React.JSX.Element;
+declare namespace InputNumberExperimental {
+    var displayName: string;
+    var Wrapper: typeof InputNumberExperimentalWrapper;
+    var Group: typeof InputNumberExperimentalGroup;
+    var Footer: typeof InputNumberExperimentalFooter;
+    var Input: typeof InputNumberExperimentalInput;
+    var Label: typeof InputNumberExperimentalLabel;
+    var Description: typeof InputNumberExperimentalDescription;
+    var Error: typeof InputNumberExperimentalError;
+    var Loading: typeof InputNumberExperimentalLoading;
+    var Stepper: typeof InputNumberExperimentalStepper;
+    var Increment: typeof InputNumberExperimentalIncrement;
+    var Decrement: typeof InputNumberExperimentalDecrement;
+    var Affix: typeof InputNumberExperimentalAffixCompound;
+}
+export { InputNumberExperimental };

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -63,7 +63,6 @@ export interface InputNumberExperimentalWrapperProps extends InputNumberExperime
      */
     readonly loading?: boolean;
     readonly max?: number;
-    readonly maxLength?: number;
     readonly min?: number;
     readonly name?: string;
     readonly onBlur?: (event?: FocusEvent<HTMLInputElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.25.1",
+  "version": "8.25.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -545,5 +545,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1ad8858948625e5d646ba969560948576dc5e721"
+  "gitHead": "6ad9bdaf20469f010e018c70c5c2a1e4f061dbfe"
 }