@jobber/components-native 0.113.4 → 0.113.5-JOB-174434-1d4c303.10

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -5,16 +5,22 @@ tokens.
 
 ## Design & usage guidelines
 
-Both the web and mobile components have the exact same API, except for one minor
-difference in how you update the theme.
+Web and mobile both expose Atlantis theme context, but the runtime ownership is
+slightly different across platforms.
 
 Each platform provides a `useAtlantisTheme` hook that you may use to access the
-`theme` and `tokens` in your components.
+current theme information and design tokens in your components.
 
-On mobile, this hook also returns a `setTheme` function which you'll use to
-update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
-Typically there will only be a single provider at the root, controlling the
-theme for the entire app.
+On mobile, the hook returns:
+
+* `theme`: the selected theme preference (`"system" | "light" | "dark"`)
+* `effectiveTheme`: the resolved theme Atlantis uses for tokens
+  (`"light" | "dark"`)
+* `tokens`
+* `setTheme`
+
+Typically there will only be a single provider at the root, and the consuming
+app will control `theme` and persist that preference outside Atlantis.
 
 On web, you'll need to import the `updateTheme` function and call it with the
 new theme. This is a separate function because it synchronizes the theme update
@@ -86,7 +92,7 @@ function App() {
 }
 
 function ThemedComponent() {
-  const { theme, tokens, setTheme } = useAtlantisTheme();
+  const { theme, effectiveTheme, tokens, setTheme } = useAtlantisTheme();
   return (
     <Content>
       <View
@@ -96,11 +102,16 @@ function ThemedComponent() {
         }}
       >
         <Content>
-          <Text>The current theme is: {theme}.</Text>
+          <Text>The selected theme is: {theme}.</Text>
+          <Text>The effective theme is: {effectiveTheme}.</Text>
           <Text>
             The javascript tokens can be accessed via the tokens object.
           </Text>
           <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("system")}
+            label="The theme can be changed to system"
+          />
           <Button
             onPress={() => setTheme("light")}
             label="The theme can be changed to light"
@@ -163,6 +174,10 @@ regardless of the main application theme. This can be done by setting the
 `dangerouslyOverrideTheme` prop to `<themeToSet>` on the
 `AtlantisThemeContextProvider`.
 
+On mobile, forcing a theme changes the rendered tokens for that subtree, but it
+does not replace the selected theme preference semantics from the nearest
+non-forced provider.
+
 Note: If you're using `buildThemedStyles`, any `useStyles` calls must be done
 within a *child component* of the `AtlantisThemeContextProvider`, not in the
 same component that renders the provider. Same goes for `useAtlantisTheme`.
@@ -293,4 +308,6 @@ Key features:
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `children` | `ReactNode` | Yes | — | The children to render. |
-| `dangerouslyOverrideTheme` | `Theme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |
+| `dangerouslyOverrideTheme` | `EffectiveTheme` | No | — | Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain... |
+| `onThemeChange` | `(theme: Theme) => void` | No | — | Called when children request a selected theme change through setTheme. |
+| `theme` | `Theme` | No | — | Control the selected theme for this provider. |

package/dist/docs/Button/Button.md

@@ -388,7 +388,7 @@ A key distinction between subtle buttons and the other variations is that the
 primary/secondary/tertiary scale is styled differently, but the conceptual
 hierarchy is the same. Notably, the tertiary subtle button has a transparent
 background, allowing it to be *extra* subtle when placed overtop
-`surface--background` elements such as a Modal header.
+`surface--background` elements such as a Dialog header.
 
 ```tsx
 import React from "react";

package/dist/docs/Chip/Chip.md

@@ -22,7 +22,7 @@ export function ChipWithAvatarExample(
       <Chip.Prefix>
         <Avatar
           size="small"
-          imageUrl="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          src="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         />
       </Chip.Prefix>
       <Chip.Suffix>

package/dist/docs/Colors/Colors.md

@@ -156,7 +156,7 @@ application.
 #### Overlay
 
 Use to mask an area of the interface to promote focus to a foreground action,
-such as a [Modal](/components/Modal)'s appearance. Overlay includes built-in
+such as a [Dialog](/components/Dialog)'s appearance. Overlay includes built-in
 opacity values.
 
 #### Overlay--Dimmed
@@ -228,3 +228,9 @@ Use to highlight an element in a way that aligns with our website. Use with
 caution, it's *bright!*
 
 ## Base colors
+
+Base blues in light mode do not share the muted saturation of the dark-mode
+overlay. Light `blue--100` through `blue--800` stay in a modest 12–35%
+saturation range; `blue--900`, `blue--950`, and `blue--1000` jump to 90%+ so the
+darkest steps stay distinctly blue. Dark mode remaps `700`–`1000` (including
+`750` and `950`) onto roughly 9–18% saturation instead.

package/dist/docs/EmptyState/EmptyState.md

@@ -66,7 +66,7 @@ reflow to a second line if enough content is provided.
 |------|------|----------|---------|-------------|
 | `description` | `string` | No | — | Description of the empty state. |
 | `icon` | `IconNames` | No | — | Icon to display. |
-| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | `blue` | Color of Icon to display. |
+| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | `icon` | Color of Icon to display. |
 | `primaryAction` | `Action` | No | — | Handler for the primary action. |
 | `secondaryAction` | `Action` | No | — | Handler for the secondary action. |
 | `title` | `string` | No | — | Title of the empty state. |

package/dist/docs/Icon/Icon.md

@@ -192,6 +192,7 @@ export function IconSizesExample() {
 
 | Icon | `Name`             |
 | :--- | :----------------- |
+|      | `arrow`            |
 |      | `arrowDown`        |
 |      | `arrowLeft`        |
 |      | `arrowRight`       |
@@ -212,6 +213,7 @@ export function IconSizesExample() {
 |      | `calendar`              |
 |      | `calendarCheck`         |
 |      | `clearFilters`          |
+|      | `dueDate`               |
 |      | `event`                 |
 |      | `onlineBooking`         |
 |      | `orientationHorizontal` |
@@ -244,22 +246,23 @@ export function IconSizesExample() {
 
 ### Forms
 
-| Icon | `Name`         |
-| :--- | :------------- |
-|      | `checkbox`     |
-|      | `checklist`    |
-|      | `edit`         |
-|      | `editDisabled` |
-|      | `radioButton`  |
-|      | `star`         |
-|      | `starHalf`     |
-|      | `starFill`     |
-|      | `text`         |
-|      | `textBox`      |
-|      | `textField`    |
-|      | `toggle`       |
-|      | `dropdown`     |
-|      | `trash`        |
+| Icon | `Name`            |
+| :--- | :---------------- |
+|      | `checkbox`        |
+|      | `checklist`       |
+|      | `digestChecklist` |
+|      | `edit`            |
+|      | `editDisabled`    |
+|      | `radioButton`     |
+|      | `star`            |
+|      | `starHalf`        |
+|      | `starFill`        |
+|      | `text`            |
+|      | `textBox`         |
+|      | `textField`       |
+|      | `toggle`          |
+|      | `dropdown`        |
+|      | `trash`           |
 
 ### Status and support
 
@@ -283,25 +286,26 @@ export function IconSizesExample() {
 
 ### Messaging
 
-| Icon | `Name`            |
-| :--- | :---------------- |
-|      | `chat`            |
-|      | `compose`         |
-|      | `conversation`    |
-|      | `email`           |
-|      | `emailInbound`    |
-|      | `emailOutbound`   |
-|      | `markSent`        |
-|      | `marketing`       |
-|      | `reminder`        |
-|      | `sendMessage`     |
-|      | `sms`             |
-|      | `sms2`            |
-|      | `smsInbound`      |
-|      | `smsOutbound`     |
-|      | `smsProgress`     |
-|      | `webchat`         |
-|      | `webchatProgress` |
+| Icon | `Name`                  |
+| :--- | :---------------------- |
+|      | `chat`                  |
+|      | `compose`               |
+|      | `conversation`          |
+|      | `email`                 |
+|      | `emailInbound`          |
+|      | `emailOutbound`         |
+|      | `markSent`              |
+|      | `marketing`             |
+|      | `reminder`              |
+|      | `sendMessage`           |
+|      | `sms`                   |
+|      | `sms2`                  |
+|      | `smsInbound`            |
+|      | `smsOutbound`           |
+|      | `smsProgress`           |
+|      | `snoozeRecommendations` |
+|      | `webchat`               |
+|      | `webchatProgress`       |
 
 ### User
 
@@ -346,6 +350,8 @@ export function IconSizesExample() {
 |      | `contactlessPayment` |
 |      | `cheque`             |
 |      | `cash`               |
+|      | `coin`               |
+|      | `handDollarSign`     |
 
 ### Work
 
@@ -425,7 +431,9 @@ export function IconSizesExample() {
 |      | `future`         |
 |      | `history`        |
 |      | `import`         |
+|      | `maximize`       |
 |      | `merge`          |
+|      | `minimize`       |
 |      | `redo`           |
 |      | `search`         |
 |      | `sort`           |
@@ -441,12 +449,14 @@ export function IconSizesExample() {
 |      | `apps`              |
 |      | `at`                |
 |      | `camera`            |
+|      | `cap`               |
 |      | `checkmark`         |
 |      | `checkmarkCircle`   |
 |      | `circle`            |
 |      | `cog`               |
 |      | `dashboard`         |
 |      | `desktop`           |
+|      | `cube`              |
 |      | `website`           |
 |      | `eye`               |
 |      | `eyeCrossed`        |
@@ -456,12 +466,14 @@ export function IconSizesExample() {
 |      | `gift`              |
 |      | `grid`              |
 |      | `happyFace`         |
+|      | `hardHat`           |
 |      | `headset`           |
 |      | `home`              |
 |      | `link`              |
 |      | `loadingCheck`      |
 |      | `lock`              |
 |      | `logout`            |
+|      | `mcp`               |
 |      | `measurement`       |
 |      | `menu`              |
 |      | `microphone`        |
@@ -471,12 +483,14 @@ export function IconSizesExample() {
 |      | `number`            |
 |      | `numpad`            |
 |      | `offline`           |
+|      | `outdoor`           |
 |      | `phone`             |
 |      | `phoneCall`         |
 |      | `phoneDisconnected` |
 |      | `phoneEnd`          |
 |      | `phoneIncoming`     |
 |      | `phoneOutgoing`     |
+|      | `pieChart`          |
 |      | `pinned`            |
 |      | `presentation`      |
 |      | `priceTag`          |
@@ -489,6 +503,7 @@ export function IconSizesExample() {
 |      | `soundwave`         |
 |      | `sparkles`          |
 |      | `speaker`           |
+|      | `sprayBottle`       |
 |      | `sprout`            |
 |      | `starburst`         |
 |      | `sun`               |
@@ -496,8 +511,27 @@ export function IconSizesExample() {
 |      | `thumbsDown`        |
 |      | `thumbsUp`          |
 |      | `unPinned`          |
+|      | `wrenchScrewdriver` |
 |      | `xero`              |
 
+### Weather
+
+| Icon | `Name`              |
+| :--- | :------------------ |
+|      | `clearSunny`        |
+|      | `foggy`             |
+|      | `hailStorm`         |
+|      | `heatWarning`       |
+|      | `heavyRain`         |
+|      | `lightRain`         |
+|      | `mixedSnowShowers`  |
+|      | `nightClear`        |
+|      | `overcastCloudy`    |
+|      | `partlySunny`       |
+|      | `snow`              |
+|      | `thunderLightening` |
+|      | `windy`             |
+
 ### Legacy
 
 | Icon | `Name`   |

package/dist/docs/InputNumber/InputNumber.md

@@ -339,17 +339,17 @@ the **Design** tab.
 | `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).
 
+## Customize one part
+
+Pass the content parts you want — `Label`, `Affix`, `Stepper`, `Loading`,
+`Description`, `Error` — straight to `Wrapper`. It builds `Group`, `Input`, and
+`Footer` around them and places each part at the right depth, so you never
+reproduce the skeleton to change one piece. `Wrapper` renders only the parts you
+gave it: leave one out and it is not there.
+
 The example below replaces the default stepper icons with `+` / `−` and leaves
 everything else as the default:
 
@@ -361,25 +361,139 @@ export function InputNumberCompositionExample() {
   const [value, setValue] = useState<number | null>(3);
 
   return (
-    <InputNumber.Wrapper value={value} onValueCommitted={setValue}>
+    <InputNumber.Wrapper onValueCommitted={setValue} value={value}>
+      <InputNumber.Label>Quantity</InputNumber.Label>
+      <InputNumber.Stepper>
+        <InputNumber.Increment ariaLabel="Increase Quantity">
+          +
+        </InputNumber.Increment>
+        <InputNumber.Decrement ariaLabel="Decrease Quantity">
+          −
+        </InputNumber.Decrement>
+      </InputNumber.Stepper>
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+### Omit a part
+
+A field with no stepper is the same composition minus the `Stepper`:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionStepperlessExample() {
+  const [value, setValue] = useState<number | null>(15);
+
+  return (
+    <InputNumber.Wrapper
+      format={{ style: "unit", unit: "percent" }}
+      onValueCommitted={setValue}
+      value={value}
+    >
+      <InputNumber.Label>Tax rate</InputNumber.Label>
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+### Show a part conditionally
+
+Presence is ordinary conditional JSX; there is no `show*` prop to reach for:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionConditionalStepperExample() {
+  const [unitCost, setUnitCost] = useState<number | null>(0);
+  const [markup, setMarkup] = useState<number | null>(20);
+
+  return (
+    <>
+      <InputNumber
+        label="Unit cost"
+        onValueCommitted={setUnitCost}
+        prefix={{ label: "$" }}
+        value={unitCost}
+      />
+      <InputNumber.Wrapper onValueCommitted={setMarkup} value={markup}>
+        <InputNumber.Label>Markup</InputNumber.Label>
+        <InputNumber.Affix label="%" variation="suffix" />
+        {Boolean(unitCost) && <InputNumber.Stepper />}
+      </InputNumber.Wrapper>
+    </>
+  );
+}
+```
+
+### Below-field content
+
+`Description` and `Error` route into the footer row, which exists only while one
+of them is rendered. The two are never shown together: when both are present the
+error replaces the description, since a description hints at what the field
+wants and the error already restates it.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionFooterExample() {
+  const [value, setValue] = useState<number | null>(50);
+  const error = (value ?? 0) > 99 ? "Enter a value between 1 and 99" : "";
+
+  return (
+    <InputNumber.Wrapper
+      invalid={Boolean(error)}
+      max={99}
+      min={1}
+      onValueChange={setValue}
+      value={value}
+    >
+      <InputNumber.Label>Quantity</InputNumber.Label>
+      <InputNumber.Description>Per visit</InputNumber.Description>
+      {error && <InputNumber.Error>{error}</InputNumber.Error>}
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+## Custom layouts
+
+For an arrangement the standard skeleton does not produce, compose the
+structural parts (`Group`, `Input`, `Footer`) yourself. `Wrapper` then renders
+your tree exactly as written and adds nothing:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionCustomLayoutExample() {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumber.Wrapper inline onValueCommitted={setValue} value={value}>
       <InputNumber.Group>
+        <InputNumber.Decrement ariaLabel="Decrease quantity" />
         <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.Increment ariaLabel="Increase quantity" />
       </InputNumber.Group>
     </InputNumber.Wrapper>
   );
 }
 ```
 
+Pick one path per `Wrapper`. Mixing structural parts with loose content parts
+throws, rather than guessing where the loose parts belong.
+
+The sugar does not merge consumer-provided parts into its render, so there is no
+per-slot precedence to reason about — children passed to `<InputNumber>` are
+ignored. Compose on `Wrapper` instead.
+
 ## Controlled usage
 
 The field is controlled: pass `value` (a `number`, or `null` for empty) and read

package/dist/docs/InputText/InputText.md

@@ -86,6 +86,10 @@ and align the input with
 With clearer guidance around the purpose of inputs, the user is able to better
 focus on the task at hand.
 
+Either affix can be given an `onClick` to make it an action, which renders the
+affix icon as a button. An actioned affix requires both an `icon` and an
+`ariaLabel` to name the button — affix labels are not actionable.
+
 ```tsx
 import React, { useState } from "react";
 import type { InputTextProps } from "@jobber/components/InputText";
@@ -128,7 +132,11 @@ export function InputTextPrefixSuffixExample(
       />
       <InputText
         placeholder="Search"
-        prefix={{ icon: "search" }}
+        prefix={{
+          icon: "search",
+          ariaLabel: "submit search",
+          onClick: () => alert("This could submit a search"),
+        }}
         value={search}
         onChange={handleSearchChange}
         suffix={{

package/dist/docs/Spacing/Spacing.md

@@ -48,7 +48,7 @@ form elements.
 ### Large
 
 Use `large` spacing for higher-level "parent" containers.
-[Modal](/components/Modal) uses `large` spacing in its header and around the
+[Dialog](/components/Dialog) uses `large` spacing in its header and around the
 edges to give itself a bit more prominence as a standalone view, in a similar
 manner to [Page](/components/Page).
 

package/dist/docs/page-layouts/page-layouts.md

@@ -43,6 +43,35 @@ More complex full-page scaffolding can be found on the [Scaffolding](../scaffold
   </Stack>
 ```
 
+```tsx
+<Stack>
+    <Heading level={2}>Stack Dialog Layouts</Heading>
+    <Text>Stacks are a great way to layout content in a dialog format. They are responsive and easy to read.</Text>
+    <Dialog>
+      <Dialog.Trigger>
+        <Button label="Open Dialog" />
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Dialog Layout</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Stack>
+            <Text>A dialog with a header, body text, and footer</Text>
+            <Text>And they're all stacked vertically with equal spacing</Text>
+          </Stack>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Actions
+            primary={<Dialog.Close render={<Button label="Close the Dialog" />} />}
+          />
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  </Stack>
+```
+
 ```tsx
 <Stack>
     <Heading level={1}>Cluster</Heading>

package/dist/docs/settings/settings.md

@@ -26,7 +26,7 @@ Most settings can be managed with the
 [FeatureSwitch](../components/FeatureSwitch) component, which allows:
 
 * turning functionality on and off
-* editing aspects of the feature via a [Modal](../components/Modal)
+* editing aspects of the feature via a [Dialog](../components/Dialog)
 * if the page supports it, live updates to the setting
 
 ### Grouping settings
@@ -37,7 +37,7 @@ Use a [Card](../Card/Card.md) to group related settings together.
 
 The [FeatureSwitch](../components/FeatureSwitch) component is a good starting
 point for most settings. If the setting is more complex, you can trigger a
-[Modal](../components/Modal) to edit the setting.
+[Dialog](../components/Dialog) to edit the setting.
 
 For cases where you don't need the full functionality of the `FeatureSwitch`,
 you can either opt out of props like `onSwitch` or `onEdit`, or compose a layout
@@ -49,7 +49,7 @@ of the pieces you do need.
 
 * [FeatureSwitch](../components/FeatureSwitch)
 * [Card](../Card/Card.md)
-* [Modal](../components/Modal)
+* [Dialog](../components/Dialog)
 * [Switch](../Switch/Switch.md)
 
 ## Principles