@jobber/components-native 0.115.2 → 0.115.3

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -5,101 +5,79 @@ directly control or measure — loading, fetching, or waiting on an external
 system.
 
 Use `ActivityIndicator` when the loading time or fraction of progress is
-unknown. If you know the fraction of progress (for example, "3 of 4 files
-uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
-will subsume `ProgressBar` under the new Indicators naming is forthcoming.
+unknown. When the amount completed is known, use `ProgressIndicator` instead.
 
 ## Design & usage guidelines
 
-The default `ActivityIndicator` size is `base` (44px) and can be used in most
-cases. The `small` size (28px) should be used on individual elements of an
-interface (e.g. inside a `Button` or `Card`) or when sitting next to short
-inline text.
+Web and mobile share the same visual language: a non-interactive ring with a
+muted track and an animated foreground arc. The platform implementations use
+different sizes and motion timing so each reads appropriately in its context.
 
-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
-`style`, to control surrounding layout.
+### Web
 
-## Accessibility
-
-`ActivityIndicator` announces itself to assistive technology on every platform:
-
-* `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
-  mark the component as an ongoing indeterminate activity.
-* `accessibilityLabel` defaults to a localized `"Loading"` string via
-  `useAtlantisI18n("loading")`. Pass a custom `accessibilityLabel` to describe
-  the specific activity (e.g. `accessibilityLabel="Uploading file"`).
-* On mount and whenever the label changes, the component calls
-  `AccessibilityInfo.announceForAccessibility` so VoiceOver and TalkBack
-  announce the label once.
-
-The indicator is not focusable and is not in the accessibility navigation order
-beyond the mount-time announcement.
-
-### Reduced motion
-
-When the operating system reports the Reduce Motion accessibility setting, the
-indicator hides the 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. Detection is reactive — the
-component responds to OS toggles without requiring a remount.
-
-## Cross-platform parity
-
-`ActivityIndicator` renders the same Material Design 3 three-layer indeterminate
-ring on iOS, Android, and web (`@jobber/components`). The visual identity,
-sizes, motion durations, and reduced-motion fallback are unified across
-platforms. Public prop names diverge to follow each platform's native
-conventions (`accessibilityLabel` here vs `ariaLabel` on web; `style` here vs
-`className` + `style` on web).
+The default `base` size is 32px. Use the 16px `small` size beside short text or
+inside compact interface elements such as buttons.
 
-Use `ActivityIndicator` when the loading time or fraction of progress is
-unknown. If you know the fraction of progress (for example, "3 of 4 files
-uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
-will subsume `ProgressBar` under the new naming is forthcoming.
+Layout is the consumer's responsibility. Place the indicator in a suitable
+container, or use `className` and `style`, to control alignment and spacing.
 
-## Design & usage guidelines
+### Mobile
 
-The default `ActivityIndicator` size is `base` (32px) and can be used in most
-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.
+The default `base` size is 44px. Use the 28px `small` size for compact mobile
+interfaces. Layout is controlled by the surrounding `View` or by passing
+`style`.
 
-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.
+Both implementations use `color-text--secondary` for the active arc and
+`color-surface--active` for the track, allowing the indicator to adapt across
+supported themes and surfaces.
 
 ## Accessibility
 
-`ActivityIndicator` announces itself politely to assistive technology:
+### Web
 
-* `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"` creates a polite live region for non-urgent loading states.
+* `ariaLabel` defaults to the localized `"Loading"` message. Override it when a
+  more specific description is helpful, such as `"Uploading file"`.
+* Visually hidden label text ensures the status is announced when it mounts.
 
 The indicator does not participate in the keyboard tab order.
 
-### Reduced motion
+### Mobile
 
-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.
+* `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
+  identify an ongoing indeterminate activity.
+* `accessibilityLabel` defaults to the localized `"Loading"` message. Override
+  it to describe a specific activity.
+* The resolved label is announced when the indicator mounts and whenever the
+  label changes.
 
-## Relationship to Spinner
+The indicator is non-interactive. It exposes one accessible progress element and
+does not require an action from the user.
+
+## Reduced motion
+
+The indicator automatically follows the operating system's reduced-motion
+preference. Web reads `prefers-reduced-motion`; mobile reacts to the iOS Reduce
+Motion or Android Remove Animations setting.
 
-The legacy [Spinner](/components/Spinner) component remains available and
-unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
-expected to deprecate `Spinner` in favour of `ActivityIndicator`.
+With reduced motion enabled, the rotating and rocking layers are replaced by a
+single static ring that gently pulses its opacity. This preserves the busy state
+without rotational motion.
 
-## Mobile
+## Cross-platform behavior
+
+| Aspect           | Web                     | Mobile                                  |
+| ---------------- | ----------------------- | --------------------------------------- |
+| Sizes            | 16px small, 32px base   | 28px small, 44px base                   |
+| Accessible label | `ariaLabel`             | `accessibilityLabel`                    |
+| Default label    | Localized `"Loading"`   | Localized `"Loading"`                   |
+| Styling          | `className` and `style` | `style`                                 |
+| Reduced motion   | CSS media query         | Operating-system setting via Reanimated |
+
+## Relationship to Spinner
 
-On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
-[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
-component from React Native.
+The legacy [Spinner](/components/Spinner) remains available during migration but
+is deprecated. New code should use `ActivityIndicator`.
 
 ## Mockup
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.115.2",
+    "version": "0.115.3",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "b608e2db83fa37ba3ceaa2d8cd521a806853701c"
+    "gitHead": "b499bb6c3219b55c6de2614a8d83b44a4800980b"
 }

package/dist/src/ActivityIndicator/ActivityIndicator.js

@@ -61,7 +61,7 @@ function useAnnounceOnMount(label) {
  * Renders the Material Design 3 three-layer indeterminate ring,
  * matching the visual identity of the web `ActivityIndicator` from
  * `@jobber/components`. For determinate progress, use
- * `ProgressIndicator` (forthcoming).
+ * `ProgressIndicator`.
  */
 export function ActivityIndicator({ size = "base", accessibilityLabel, style, testID = "ActivityIndicator", }) {
     const resolvedSize = resolveLegacySize(size);
@@ -121,7 +121,7 @@ function FullMotionRing({ size, pixelSize, strokeWidth, arcColor, trackColor, st
     }));
     const arcAnimatedProps = useAnimatedProps(() => {
         "worklet";
-        // Match web's indicatorExpandArc keyframe:
+        // Follow the original Material indicator arc progression:
         //   0%   → dasharray (1, 200),  offset 0
         //   50%  → dasharray (90, 200), offset -35
         //   100% → dasharray (90, 200), offset -125
@@ -163,8 +163,8 @@ function FullMotionRing({ size, pixelSize, strokeWidth, arcColor, trackColor, st
 function ReducedMotionRing({ pixelSize, strokeWidth, ringColor, style, testID, a11yProps, }) {
     // Reduced motion: hide rotation entirely, render one static ring in the
     // active foreground colour, and pulse opacity 1.0 ↔ 0.35 over a 4s
-    // ease-in-out alternate cycle (2s down, 2s up). Matches web's
-    // reduced-motion fallback exactly.
+    // ease-in-out alternate cycle (2s down, 2s up). This matches the web
+    // reduced-motion fallback's presentation and rhythm.
     //
     // CRITICAL: Reanimated 3 automatically suppresses `withTiming` /
     // `withRepeat` when the OS reduce-motion setting is enabled, snapping