@jobber/components-native 0.111.1 → 0.112.1

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -65,19 +65,19 @@ cases. The `small` size (16px) should be used on individual elements of an
 interface (e.g. inside a `Button` or `Card`) or when sitting next to short
 inline text.
 
-Layout is the consumer's responsibility — `ActivityIndicator` does not expose
-an `inline` prop. Place it inside your own flex / inline-block container, or
-pass a `className` / `style`, to control surrounding layout.
+Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
+`inline` prop. Place it inside your own flex / inline-block container, or pass a
+`className` / `style`, to control surrounding layout.
 
 ## Accessibility
 
 `ActivityIndicator` announces itself politely to assistive technology:
 
-* `role="status"` marks the element as a polite live region, appropriate for
-  a non-urgent loading state.
-* `aria-label` defaults to the literal English string `"Loading"`. Pass a
-  custom `ariaLabel` to localize or to describe the specific activity
-  (e.g. `ariaLabel="Uploading file"`).
+* `role="status"` marks the element as a polite live region, appropriate for a
+  non-urgent loading state.
+* `aria-label` defaults to the literal English string `"Loading"`. Pass a custom
+  `ariaLabel` to localize or to describe the specific activity (e.g.
+  `ariaLabel="Uploading file"`).
 
 The indicator does not participate in the keyboard tab order.
 
@@ -85,9 +85,9 @@ The indicator does not participate in the keyboard tab order.
 
 When the user's operating system reports
 [`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
-the indicator hides its rocking and rotating layers, repaints a single
-static ring in the icon foreground colour, and gently pulses its opacity so
-the indicator still reads as "busy" without rotational motion.
+the indicator hides its rocking and rotating layers, repaints a single static
+ring in the icon foreground colour, and gently pulses its opacity so the
+indicator still reads as "busy" without rotational motion.
 
 ## Relationship to Spinner
 

package/dist/docs/Icon/Icon.md

@@ -427,7 +427,6 @@ export function IconSizesExample() {
 |      | `import`         |
 |      | `merge`          |
 |      | `redo`           |
-|      | `remove`         |
 |      | `search`         |
 |      | `sort`           |
 |      | `sync`           |
@@ -512,6 +511,25 @@ export function IconSizesExample() {
 |      | `plus2`  |
 
 
+## Validating icon names at runtime
+
+When icon names arrive as runtime data (API responses, configuration, user
+input), validate them before rendering with the exports from
+`@jobber/components` (also available from `@jobber/design`):
+
+* `iconNames`: a readonly array of every valid icon name
+* `isIconName(value)`: a type guard that narrows a value to `IconNames`
+
+```tsx
+import { Icon, isIconName } from "@jobber/components";
+
+function StatusIcon({ iconName }: { readonly iconName: string }) {
+  if (!isIconName(iconName)) return null;
+
+  return <Icon name={iconName} />;
+}
+```
+
 ## Component customization
 
 ### UNSAFE\_ props (advanced usage)

package/dist/docs/InputNumber/InputNumber.md

@@ -1,20 +1,410 @@
 # InputNumber
 
-InputNumber is used in forms that accept numbers as an answer.
+## Summary
 
-## Design & usage guidelines
+`InputNumber` collects a single numeric value in a form. Reach for it when the
+value benefits from being nudged up or down, such as quantities, prices,
+durations, or counts.
 
-This is best suited for input data that benefits from being modified in
-increments, such as quantity, price, or days (ie 2 days -> 3 days).
+Most fields only need the props shown below. For rare layouts the props can't
+handle, you can build the same field from smaller pieces. See the **Implement**
+tab.
 
-While some types of data may technically be numbers, they can be ill-suited for
-using a number input. For example, phone numbers and credit card numbers provide
-no value to the user by offering an incrementer.
+### When to use
 
-## Clearable
+* The value is a number the user increments or decrements, like a quantity,
+  price, day count, or number of repetitions
+* A stepper, min/max bounds, or number formatting would help the user
 
-InputNumber does not show a clear button. The component enforces
-`clearable="never"` to align with numeric, increment/decrement-focused usage.
+### When not to use
+
+* The value is a sequence of digits that is never calculated with, such as phone
+  numbers, credit-card numbers, or postal codes. A stepper adds no value there;
+  use [InputText](../InputText/InputText.md) instead.
+
+## Anatomy
+
+`InputNumber` typically includes:
+
+* Label (required): names the value the field collects
+* Value field (required): the number the user types or steps through
+* Stepper (optional): increment and decrement controls that change the value by
+  `step`
+* Prefix or suffix (optional): a unit or symbol shown alongside the value, like
+  $ or kg
+* Loading indicator (optional): replaces the stepper while background work runs
+
+## Behavior
+
+* The field is controlled through `value`, where a number sets the value and
+  `null` leaves it empty.
+* `onValueCommitted` fires when the user commits a value: on blur, on Enter, or
+  when they use the stepper or arrow keys. Use `onValueChange` for per-keystroke
+  updates.
+* The stepper buttons and the Up and Down arrow keys change the value by `step`
+  (default 1).
+* `min` and `max` bound the value, and the stepper stops at each limit.
+* `loading` hides the stepper and shows an indicator in its place. The field
+  stays editable, so use `readOnly` or `disabled` to lock it.
+
+## Options
+
+### Basic
+
+Pass `label`, a controlled `value`, and `onValueCommitted`. Bounds (`min` /
+`max`) and `step` are optional.
+
+```tsx
+import React, { useState } from "react";
+import type { InputNumberProps } from "@jobber/components";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberBasicExample(props: Partial<InputNumberProps>) {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumber
+      label="Quantity"
+      min={0}
+      max={100}
+      {...props}
+      value={value}
+      onValueCommitted={setValue}
+    />
+  );
+}
+```
+
+### Prefixes and suffixes
+
+Use `prefix` or `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 { InputNumber } from "@jobber/components";
+import { Content } from "@jobber/components/Content";
+
+export function InputNumberAffixesExample() {
+  const [price, setPrice] = useState<number | null>(42);
+  const [days, setDays] = useState<number | null>(7);
+  const [reps, setReps] = useState<number | null>(3);
+
+  return (
+    <Content>
+      <InputNumber
+        label="Price"
+        prefix={{ label: "$" }}
+        suffix={{ label: "USD" }}
+        value={price}
+        onValueCommitted={setPrice}
+      />
+
+      <InputNumber
+        label="Follow-up in"
+        suffix={{ icon: "calendar", label: "days" }}
+        value={days}
+        onValueCommitted={setDays}
+      />
+
+      <InputNumber
+        label="Repetitions"
+        suffix={{
+          icon: "cross",
+          ariaLabel: "Clear value",
+          onClick: () => setReps(null),
+        }}
+        value={reps}
+        onValueCommitted={setReps}
+      />
+    </Content>
+  );
+}
+```
+
+### Sizes
+
+3 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 { InputNumber } from "@jobber/components";
+import { Content } from "@jobber/components/Content";
+
+export function InputNumberSizesExample() {
+  const [small, setSmall] = useState<number | null>(42);
+  const [base, setBase] = useState<number | null>(42);
+  const [large, setLarge] = useState<number | null>(42);
+
+  return (
+    <Content>
+      <InputNumber
+        label="Small"
+        size="small"
+        suffix={{ label: "items" }}
+        value={small}
+        onValueCommitted={setSmall}
+      />
+      <InputNumber
+        label="Default"
+        size="default"
+        suffix={{ label: "items" }}
+        value={base}
+        onValueCommitted={setBase}
+      />
+      <InputNumber
+        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 { InputNumber } from "@jobber/components";
+import { Content } from "@jobber/components/Content";
+
+export function InputNumberFormattingExample() {
+  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>
+      <InputNumber
+        label="Currency"
+        description='{ style: "currency", currency: "USD" }'
+        format={{ style: "currency", currency: "USD" }}
+        value={currency}
+        onValueCommitted={setCurrency}
+      />
+      <InputNumber
+        label="Percent"
+        description='{ style: "percent" } — value is a ratio: 0.5 → 50%'
+        format={{ style: "percent", maximumFractionDigits: 2 }}
+        value={percent}
+        onValueCommitted={setPercent}
+      />
+      <InputNumber
+        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, like saving. The field stays editable and the stepper is hidden while
+loading.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberLoadingExample() {
+  const [value, setValue] = useState<number | null>(42);
+
+  return (
+    <InputNumber
+      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 case
+
+| ✅ Do     | ❌ Don't                 |
+| -------- | ----------------------- |
+| Quantity | Enter the quantity here |
+| Discount | DISCOUNT %              |
+
+### Put the symbol where it's read
+
+Use a prefix for a leading symbol and a suffix for a trailing unit, matching how
+the value is spoken.
+
+| ✅ Do                 | ❌ Don't              |
+| -------------------- | -------------------- |
+| Prefix "$", value 40 | Suffix "$", value 40 |
+| Suffix "%", value 15 | Prefix "%", value 15 |
+
+### Keep validation errors helpful
+
+When a value breaks `min` or `max`, provide helpful guidance on what values will
+be accepted as opposed to just providing a generic error.
+
+| ✅ Do                           | ❌ Don't       |
+| ------------------------------ | ------------- |
+| Enter a value between 1 and 99 | Invalid input |
+| Quantity can't be more than 50 | Error         |
+
+### Use numbers as opposed to spelling them
+
+Use numerals in labels, helper text, affixes, and bounds.
+
+| ✅ Do        | ❌ Don't         |
+| ----------- | --------------- |
+| Max 3 items | Max three items |
+
+## Do's and Don'ts
+
+#### Do:
+
+* ✅ Use for values the user increments or decrements
+* ✅ Set `min` and `max` when the value has real bounds
+* ✅ Use `format` for currency, percent, and decimals rather than formatting the
+  value yourself
+* ✅ Use `loading` for background work so the field stays usable
+
+#### Don't:
+
+* ❌ Use it for digit sequences that are never calculated with, like phone or
+  credit card numbers
+* ❌ Disable the field to communicate an error; show an `error` message instead
+* ❌ Repeat the unit in both the label and an affix
+
+## Accessibility notes
+
+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, like "Clear
+value".
+
+## Related components
+
+* For digit sequences that are not calculated with, like phone or credit card
+  numbers, use [InputText](../InputText/InputText.md).
+* For dates, use [InputDate](../InputDate/InputDate.md).
+
+
+## Anatomy
+
+The prop-driven `<InputNumber>` 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 `<InputNumber.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 { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionExample() {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumber.Wrapper value={value} onValueCommitted={setValue}>
+      <InputNumber.Group>
+        <InputNumber.Input>
+          <InputNumber.Label>Quantity</InputNumber.Label>
+          <InputNumber.Stepper>
+            <InputNumber.Increment ariaLabel="Increase Quantity">
+              +
+            </InputNumber.Increment>
+            <InputNumber.Decrement ariaLabel="Decrease Quantity">
+              −
+            </InputNumber.Decrement>
+          </InputNumber.Stepper>
+        </InputNumber.Input>
+      </InputNumber.Group>
+    </InputNumber.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 (up to 12 fractional digits)
+  and thousands grouping follows the locale default, so `1234.5` renders as
+  `1,234.5`. Pass `{ useGrouping: false }` to render without separators.
 
 
 ## Props

package/dist/docs/empty-states/empty-states.md

@@ -21,7 +21,8 @@ for the “emptiness” may include, but are not limited to…
 * Search results with no match
 * An error has resulted in the user not being able to access content they
   otherwise could
-* A specific field doesn't have a value (for example, a custom field that the user hasn't populated)
+* A specific field doesn't have a value (for example, a custom field that the
+  user hasn't populated)
 
 ## Solution
 
@@ -70,22 +71,29 @@ When a field doesn't have a value, use a dash to indicate the lack of a value.
 This provides:
 
 * confirmation that nothing was entered
-* confirmation that something *can* be entered there should the information require an update
+* confirmation that something *can* be entered there should the information
+  require an update
 
 ```tsx
 <Card>
     <Content>
       <Heading level={4}>Additional details</Heading>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Preferred service date</Text>
+        <Text size="small" variation="subdued">
+          Preferred service date
+        </Text>
         <Text>June 25, 2026</Text>
       </Stack>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Gate code</Text>
+        <Text size="small" variation="subdued">
+          Gate code
+        </Text>
         <Text>—</Text>
       </Stack>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Additional requests</Text>
+        <Text size="small" variation="subdued">
+          Additional requests
+        </Text>
         <Text>—</Text>
       </Stack>
     </Content>

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.111.1",
+    "version": "0.112.1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -73,8 +73,8 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.110.0",
-        "@jobber/hooks": "2.21.0",
+        "@jobber/design": "0.111.0",
+        "@jobber/hooks": "2.21.1",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
         "@storybook/addon-a11y": "10.3.5",
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "a9b32a282f2f70d07b99600c8ce8dfdd2d6e3db9"
+    "gitHead": "2557e3892ae9903c706aebba90ff44bbb349618c"
 }

package/dist/src/BottomSheet/BottomSheet.js

@@ -64,7 +64,7 @@ function Footer({ styles, close, cancelLabel, }) {
     return (React.createElement(View, null,
         React.createElement(View, { style: styles.footerDivider },
             React.createElement(Divider, null)),
-        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "remove", onPress: close })));
+        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "cross", onPress: close })));
 }
 function dismissKeyboard() {
     //Dismisses the keyboard before opening the bottom sheet.

package/dist/src/Chip/Chip.js

@@ -42,7 +42,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         label && (React.createElement(View, { style: styles.chipText },
             React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive }, label))),
         isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
-            React.createElement(Icon, { name: "remove", size: "small" })))));
+            React.createElement(Icon, { name: "cross", size: "small" })))));
 }
 function getBorderStyle(inactiveBackgroundColor, tokens) {
     let borderColor = "transparent";

package/dist/src/Chip/Chip.test.js

@@ -38,7 +38,7 @@ it("renders an inactive Chip with icon", () => {
 });
 it("renders a Chip with the dismiss icon", () => {
     const { getByTestId } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), isActive: true, isDismissible: true }));
-    expect(getByTestId("remove")).toBeDefined();
+    expect(getByTestId("cross")).toBeDefined();
 });
 it("should call the handler with the new value", () => {
     const pressHandler = jest.fn();

package/dist/src/Icon/Icon.js

@@ -7,14 +7,18 @@ export function Icon({ name, color, size = "base", customColor, testID, }) {
     const { svgStyle, paths, viewBox } = getIcon({
         name,
         color,
+        customColor,
         size,
         platform: "mobile",
         format: "js",
         tokens,
     });
+    // Paths with their own fill are static artwork; only unfilled paths take
+    // the themed color and customColor.
     // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
-    const icon = (paths !== null && paths !== void 0 ? paths : []).map((path) => {
-        return React.createElement(Path, { key: path, d: path, fill: customColor || svgStyle.fill });
+    const icon = (paths !== null && paths !== void 0 ? paths : []).map(path => {
+        var _a;
+        return (React.createElement(Path, { key: path.d, d: path.d, fill: (_a = path.fill) !== null && _a !== void 0 ? _a : (customColor || svgStyle.fill), fillOpacity: path.fillOpacity, opacity: path.opacity }));
     });
     return (React.createElement(Svg, { style: Object.assign(Object.assign({}, svgStyle), { display: "flex" }), testID: testID || name, viewBox: viewBox }, icon));
 }

package/dist/src/Icon/Icon.test.js

@@ -45,6 +45,20 @@ it("renders an empty svg without throwing for an unknown icon name", () => {
     const svg = render(React.createElement(Icon, { name: "someNonexistentIcon" }));
     expect(svg.UNSAFE_root.findAllByType(Path)).toHaveLength(0);
 });
+it("renders the multi-color truck icon with its static fills", () => {
+    const svg = render(React.createElement(Icon, { name: "truck" }));
+    const fills = svg.UNSAFE_root.findAllByType(Path).map(path => path.props.fill);
+    expect(fills).toHaveLength(5);
+    expect(fills).toContain("#2B2B2B");
+    expect(fills.filter(fill => fill.startsWith("#"))).toHaveLength(4);
+});
+it("applies customColor to the truck body path but not its static artwork", () => {
+    const svg = render(React.createElement(Icon, { name: "truck", customColor: "#abc123" }));
+    const fills = svg.UNSAFE_root.findAllByType(Path).map(path => path.props.fill);
+    expect(fills).toHaveLength(5);
+    expect(fills.filter(fill => fill === "#abc123")).toHaveLength(1);
+    expect(fills).toEqual(expect.arrayContaining(["#2B2B2B", "#000000", "#FFFFFF", "#2A2A2A"]));
+});
 describe("theme-aware fill", () => {
     function getPathFills(svg) {
         return svg.UNSAFE_root.findAllByType(Path).map(p => p.props.fill);

package/dist/src/Toast/Toast.js

@@ -21,7 +21,7 @@ function DefaultToast({ text1 }) {
             React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert" },
                 React.createElement(Text, { reverseTheme: true }, text1)),
             React.createElement(View, { style: styles.toastIcon },
-                React.createElement(IconButton, { onPress: Toast.hide, name: "remove", customColor: tokens["color-greyBlue--light"], accessibilityLabel: t("dismiss") })))));
+                React.createElement(IconButton, { onPress: Toast.hide, name: "cross", customColor: tokens["color-greyBlue--light"], accessibilityLabel: t("dismiss") })))));
 }
 const toastConfig = {
     default: DefaultToast,