@jobber/components-native 0.107.1 → 0.107.2-JOB-171968-266117e.31

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -116,6 +116,46 @@ function ThemedComponent() {
 }
 ```
 
+### Cross-tab theme sync (Web Only)
+
+The provider can keep the theme in sync across a user's open browser tabs. This
+is opt-in: pass the `localStorage` key your app writes to as the `storageKey`
+prop. The provider then listens for
+[`storage` events](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event)
+on that key and applies theme changes from other tabs. The `storage` event fires
+only in tabs *other* than the one that wrote the value, so there's no feedback
+loop.
+
+**Your app is responsible for writing to `localStorage`** when the theme changes
+— Atlantis only handles the listen-and-react side.
+
+```tsx
+<AtlantisThemeContextProvider storageKey="my_app_theme">
+  <ThemedComponent />
+</AtlantisThemeContextProvider>
+```
+
+```tsx
+// Theme toggle — write to the same key after calling updateTheme
+import { updateTheme } from "@jobber/components/AtlantisThemeContext";
+
+function toggleTheme(newTheme: "light" | "dark") {
+  updateTheme(newTheme); // updates all providers in this tab immediately
+
+  try {
+    localStorage.setItem("my_app_theme", newTheme); // signals other tabs
+  } catch {
+    // localStorage unavailable (e.g. private mode) — degrades gracefully
+  }
+}
+```
+
+Omit `storageKey` and no `storage` listener is added, keeping the previous
+within-tab-only behavior. Multiple dynamic providers on the same page all share
+the same internal store, so a single provider with a `storageKey` is enough — a
+cross-tab signal updates every dynamic provider at once. Providers mounted with
+`dangerouslyOverrideTheme` are unaffected.
+
 ### Forcing a theme for an AtlantisThemeContextProvider
 
 In some scenarios you may want to force a theme for specific components

package/dist/docs/Chip/Chip.md

@@ -238,8 +238,8 @@ export function ChipInvalidExample(
   single-select, multi-select, and add/dismiss functionality "out of the box"
 * [FilterPicker](/components/FilterPicker) is most commonly triggered by a Chip,
   but is a separate component
-* [Select](../Select/Select.md) is a simpler single-select "dropdown" that
-  presents as a form element and should be preferred in forms
+* [LegacySelect](/components/LegacySelect) is a simpler single-select "dropdown"
+  that presents as a form element and should be preferred in forms
 * [RadioGroup](/components/RadioGroup) should be used to allow the user to
   select "one-of-many" items (single-select) and the labels for the items are
   longer than 1 or 2 words.

package/dist/docs/ContentOverlay/ContentOverlay.md

@@ -50,6 +50,9 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `children` | `ReactNode` | Yes | — | Content to be passed into the overlay |
 | `accessibilityLabel` | `string` | No | `"Close {title} modal"` | Optional accessibilityLabel describing the overlay. This will read out when the overlay is opened. |
 | `adjustToContentHeight` | `boolean` | No | `false` | If true, automatically adjusts the overlay height to the content height. This will disable the ability to drag the ov... |
+| `allowDragWithBeforeExit` | `boolean` | No | `false` | When `true`, `onBeforeExit` intercepts the dismiss button and back press but does not disable drag. Drag-to-dismiss b... |
+| `enableContentPanningGesture` | `boolean` | No | — | Whether pan on the content area drags the sheet. Set `false` to let nested scrollables own the gesture. Defaults to t... |
+| `enablePanDownToClose` | `boolean` | No | — | Whether panning down on the content area closes the sheet. Set false to prevent the sheet from being closed by pannin... |
 | `fullScreen` | `boolean` | No | `false` | Force overlay height to fill the screen. Width not impacted. |
 | `isDraggable` | `boolean` | No | `true` | If false, hides the handle and turns off dragging. |
 | `keyboardShouldPersistTaps` | `boolean` | No | `false` | Allows taps to be registered behind keyboard if enabled |
@@ -61,4 +64,5 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `ref` | `Ref<{ open?: () => void; close?: () => void; }>` | No | — | Ref to the content overlay component. |
 | `scrollEnabled` | `boolean` | No | `false` | Enables scrolling in the content body of overlay |
 | `showDismiss` | `boolean` | No | `false` | Display the dismiss button in the header of the overlay. |
+| `snapPoints` | `(string | number)[]` | No | — | Explicit snap points for the overlay (percentages or pixel values). When provided, `adjustToContentHeight` is ignored... |
 | `title` | `string` | No | — | Title of overlay, appears in the header next to the close button. |

package/dist/docs/Form/Form.md

@@ -18,11 +18,11 @@ have a `value` and `onChange` prop.
 ### Inputs
 
 Form can accept various inputs and selection elements such as (but not limited
-to) [InputText](../InputText/InputText.md), [Select](../Select/Select.md),
-[Switch](../Switch/Switch.md), [Checkbox](../Checkbox/Checkbox.md), and
-[Chips](/components/Chips). They should be placed [Cards](../Card/Card.md) to
-indicate grouping when relevant, and groups of Cards can be spaced appropriately
-using ContentSection.
+to) [InputText](../InputText/InputText.md),
+[LegacySelect](/components/LegacySelect), [Switch](../Switch/Switch.md),
+[Checkbox](../Checkbox/Checkbox.md), and [Chips](/components/Chips). They should be
+placed [Cards](../Card/Card.md) to indicate grouping when relevant, and groups
+of Cards can be spaced appropriately using ContentSection.
 
 ### Save Button label
 

package/dist/docs/Icon/Icon.md

@@ -417,6 +417,7 @@ export function IconSizesExample() {
 |      | `future`         |
 |      | `history`        |
 |      | `import`         |
+|      | `merge`          |
 |      | `redo`           |
 |      | `remove`         |
 |      | `search`         |
@@ -428,59 +429,66 @@ export function IconSizesExample() {
 
 ### Other
 
-| Icon | `Name`            |
-| :--- | :---------------- |
-|      | `apps`            |
-|      | `at`              |
-|      | `camera`          |
-|      | `checkmark`       |
-|      | `checkmarkCircle` |
-|      | `circle`          |
-|      | `cog`             |
-|      | `dashboard`       |
-|      | `desktop`         |
-|      | `website`         |
-|      | `eye`             |
-|      | `eyeCrossed`      |
-|      | `flash`           |
-|      | `flashAuto`       |
-|      | `flashOff`        |
-|      | `gift`            |
-|      | `grid`            |
-|      | `happyFace`       |
-|      | `headset`         |
-|      | `home`            |
-|      | `link`            |
-|      | `loadingCheck`    |
-|      | `lock`            |
-|      | `logout`          |
-|      | `measurement`     |
-|      | `menu`            |
-|      | `microphone`      |
-|      | `microphoneMuted` |
-|      | `mobile`          |
-|      | `more`            |
-|      | `number`          |
-|      | `offline`         |
-|      | `phone`           |
-|      | `pinned`          |
-|      | `presentation`    |
-|      | `priceTag`        |
-|      | `quickbooks`      |
-|      | `reports`         |
-|      | `shape`           |
-|      | `sidebar`         |
-|      | `signature`       |
-|      | `sneaker`         |
-|      | `sparkles`        |
-|      | `sprout`          |
-|      | `starburst`       |
-|      | `sun`             |
-|      | `tableColumns`    |
-|      | `thumbsDown`      |
-|      | `thumbsUp`        |
-|      | `unPinned`        |
-|      | `xero`            |
+| Icon | `Name`              |
+| :--- | :------------------ |
+|      | `apps`              |
+|      | `at`                |
+|      | `camera`            |
+|      | `checkmark`         |
+|      | `checkmarkCircle`   |
+|      | `circle`            |
+|      | `cog`               |
+|      | `dashboard`         |
+|      | `desktop`           |
+|      | `website`           |
+|      | `eye`               |
+|      | `eyeCrossed`        |
+|      | `flash`             |
+|      | `flashAuto`         |
+|      | `flashOff`          |
+|      | `gift`              |
+|      | `grid`              |
+|      | `happyFace`         |
+|      | `headset`           |
+|      | `home`              |
+|      | `link`              |
+|      | `loadingCheck`      |
+|      | `lock`              |
+|      | `logout`            |
+|      | `measurement`       |
+|      | `menu`              |
+|      | `microphone`        |
+|      | `microphoneMuted`   |
+|      | `mobile`            |
+|      | `more`              |
+|      | `number`            |
+|      | `numpad`            |
+|      | `offline`           |
+|      | `phone`             |
+|      | `phoneCall`         |
+|      | `phoneDisconnected` |
+|      | `phoneEnd`          |
+|      | `phoneIncoming`     |
+|      | `phoneOutgoing`     |
+|      | `pinned`            |
+|      | `presentation`      |
+|      | `priceTag`          |
+|      | `quickbooks`        |
+|      | `reports`           |
+|      | `shape`             |
+|      | `sidebar`           |
+|      | `signature`         |
+|      | `sneaker`           |
+|      | `sparkles`          |
+|      | `speaker`           |
+|      | `sprout`            |
+|      | `starburst`         |
+|      | `sun`               |
+|      | `tableColumns`      |
+|      | `thumbsDown`        |
+|      | `thumbsUp`          |
+|      | `unPinned`          |
+|      | `xero`              |
 
 ### Legacy
 

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: "remove",
+          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 and grouping is off
+  (`useGrouping: false`), so large numbers render without thousands separators
+  unless you opt in.
 
 
 ## Props

package/dist/docs/InputTime/InputTime.md

@@ -29,6 +29,14 @@ number automatically fills in the rest of the time. For example, typing `2` will
 fill in `2:00 PM` and typing `1` waits for a few milliseconds in case the user
 wants to type `10`, `11`, or `12`.
 
+## Sizes and the placeholder
+
+Consistent with other inputs, `size="small"` does not show the floating mini
+label. The placeholder appears while the field is empty and unfocused, and is
+hidden while the field is being edited or has a value, keeping the field at its
+small height throughout. The default and `large` sizes float the placeholder up
+as a mini label while editing or once a value is set.
+
 
 ## Props
 

package/dist/docs/ProgressBar/ProgressBar.md

@@ -1,5 +1,14 @@
 # Progress Bar
 
+> **Deprecated.** Use [ProgressIndicator](/components/ProgressIndicator) for new
+> work. `ProgressIndicator` is the supported determinate progress indicator
+> going forward — it offers the same semantic with a cleaner prop surface
+> (`value` / `max` instead of `currentStep` / `totalSteps`,
+> `variation="continuous"` instead of `"progress"`, plain `className` / `style`
+> instead of `UNSAFE_*`), theme-adaptive tokens, and a unified
+> `<div role="progressbar">` structure across continuous and stepped variations.
+> `ProgressBar` continues to work unchanged for existing call sites.
+
 A ProgressBar is a visual indicator of how close something is to completion.
 
 ## Design & usage guidelines