@jobber/components-native 0.104.3-TAYLORtai-d66f381.18 → 0.105.0

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -1,8 +1,57 @@
 # Activity Indicator
 
-`ActivityIndicator` is used to communicate an **indeterminate** activity the
-user cannot directly control or measure — loading, fetching, or waiting on an
-external system.
+`ActivityIndicator` communicates an **indeterminate** activity the user cannot
+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.
+
+## 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.
+
+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.
+
+## 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).
 
 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
@@ -61,96 +110,7 @@ component from React Native.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
-| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
-| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
-| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
-| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
-| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
-| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
-| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
-| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
-| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
-| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
-| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
-| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
-| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
-| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
-| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
-| `animating` | `boolean` | No | — | Whether to show the indicator (true, the default) or hide it (false). |
-| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
-| `aria-checked` | `"mixed" | boolean` | No | — |  |
-| `aria-disabled` | `boolean` | No | — |  |
-| `aria-expanded` | `boolean` | No | — |  |
-| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
-| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
-| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
-| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
-| `aria-modal` | `boolean` | No | — |  |
-| `aria-selected` | `boolean` | No | — |  |
-| `aria-valuemax` | `number` | No | — |  |
-| `aria-valuemin` | `number` | No | — |  |
-| `aria-valuenow` | `number` | No | — |  |
-| `aria-valuetext` | `string` | No | — |  |
-| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
-| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
-| `color` | `ColorValue` | No | — | The foreground color of the spinner (default is gray). |
-| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
-| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
-| `hidesWhenStopped` | `boolean` | No | — | Whether the indicator should hide when not animating (true by default). |
-| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
-| `id` | `string` | No | — | Used to reference react managed views from native code. |
-| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
-| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
-| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
-| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
-| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
-| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
-| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
-| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
-| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
-| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
-| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
-| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
-| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
-| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
-| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
-| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
-| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
-| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
-| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
-| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
-| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
-| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
-| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
-| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
-| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
-| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
-| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
-| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
-| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
-| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
-| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
-| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
-| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
-| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
-| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
-| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
-| `size` | `"large" | "small" | number` | No | — | Size of the indicator. Small has a height of 20, large has a height of 36.  enum('small', 'large') |
-| `style` | `StyleProp<ViewStyle>` | No | — |  |
-| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
-| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
-| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
-| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
-| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
-| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `accessibilityLabel` | `string` | No | — | Accessible label exposed to assistive technology and announced on mount. Defaults to a localized "Loading" string via... |
+| `size` | `"base" | "large" | "small"` | No | `base` | Visual size. `"base"` renders at 44px, `"small"` renders at 28px. `"large"` is a deprecated alias for `"base"` and wi... |
+| `style` | `StyleProp<ViewStyle>` | No | — | Inline styles applied to the root view. |
+| `testID` | `string` | No | `ActivityIndicator` | Test identifier applied to the root view. Defaults to `"ActivityIndicator"`. |

package/dist/docs/InputCurrency/InputCurrency.md

@@ -24,7 +24,7 @@ displayed to them.
 | `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
 | `assistiveText` | `string` | No | — | Text that helps the user understand the input |
 | `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
-| `autoComplete` | `"email" | "off" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 44 more ... | "username-new"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
 | `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
 | `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
 | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |

package/dist/docs/InputEmail/InputEmail.md

@@ -36,7 +36,7 @@ If you are not worried about email address validation, consider using
 | `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
 | `assistiveText` | `string` | No | — | Text that helps the user understand the input |
 | `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
-| `autoComplete` | `"email" | "off" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 44 more ... | "username-new"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
 | `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
 | `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
 | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |

package/dist/docs/InputNumber/InputNumber.md

@@ -27,7 +27,7 @@ InputNumber does not show a clear button. The component enforces
 | `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
 | `assistiveText` | `string` | No | — | Text that helps the user understand the input |
 | `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
-| `autoComplete` | `"email" | "off" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 44 more ... | "username-new"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
 | `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
 | `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
 | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |

package/dist/docs/InputPassword/InputPassword.md

@@ -30,7 +30,7 @@ refer to [InputText](../InputText/InputText.md).
 | `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
 | `assistiveText` | `string` | No | — | Text that helps the user understand the input |
 | `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
-| `autoComplete` | `"email" | "off" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 44 more ... | "username-new"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
 | `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
 | `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
 | `defaultValue` | `string` | No | — | Default value for when component is uncontrolled |

package/dist/docs/InputText/InputText.md

@@ -320,7 +320,7 @@ export function InputTextKeyboardExample(
 | `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
 | `assistiveText` | `string` | No | — | Text that helps the user understand the input |
 | `autoCapitalize` | `"characters" | "none" | "sentences" | "words"` | No | — | Determines where to autocapitalize |
-| `autoComplete` | `"email" | "off" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 44 more ... | "username-new"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
+| `autoComplete` | `"email" | "name" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | ... 45 more ... | "off"` | No | — | Determines which content to suggest on auto complete, e.g.`username`. Default is `off` which disables auto complete  ... |
 | `autoCorrect` | `boolean` | No | — | Turn off autocorrect |
 | `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
 | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.104.3-TAYLORtai-d66f381.18+d66f381a",
+    "version": "0.105.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -71,7 +71,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.101.2-TAYLORtai-d66f381.36+d66f381a",
+        "@jobber/design": "0.102.0",
         "@jobber/hooks": "2.21.0",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -122,5 +122,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "d66f381a234db282667b16457410aad2fee95214"
+    "gitHead": "2dd2b2d127e9e7e00f8db56c9a5c8ab05344e128"
 }

package/dist/src/ActivityIndicator/ActivityIndicator.js

@@ -1,7 +1,170 @@
-import React from "react";
-import { ActivityIndicator } from "react-native";
+import React, { useEffect } from "react";
+import { AccessibilityInfo } from "react-native";
+import Animated, { Easing, ReduceMotion, useAnimatedProps, useAnimatedStyle, useReducedMotion, useSharedValue, withRepeat, withSequence, withTiming, } from "react-native-reanimated";
+import Svg, { Circle } from "react-native-svg";
+import { tokens } from "../utils/design";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
-export function JobberActivityIndicator(props) {
-    const { tokens } = useAtlantisTheme();
-    return (React.createElement(ActivityIndicator, Object.assign({}, props, { color: props.color || tokens["color-greyBlue"], testID: props.testID || "ActivityIndicator" })));
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const SIZE_PX = { small: 28, base: 44 };
+// Stroke widths are expressed in viewBox units (the SVG is 48 across).
+// The small variant uses a thicker stroke in viewBox units to compensate
+// for its smaller rendered diameter, keeping the visual stroke thickness
+// roughly constant across sizes. Matches the web component's CSS.
+const STROKE_WIDTH = { small: 6, base: 4 };
+const VIEWBOX = 48;
+const CENTER = 24;
+const RADIUS = 20;
+// Circle circumference (2π·20 ≈ 125.66) drives the dasharray math below.
+// "200" used as the gap value exceeds the circumference, ensuring only
+// one stroke segment is visible at a time.
+const GAP = 200;
+function resolveLegacySize(size) {
+    if (size === "large") {
+        if (__DEV__) {
+            console.warn('[ActivityIndicator] size="large" is deprecated. Use size="base" instead.');
+        }
+        return "base";
+    }
+    return size;
+}
+function useAnnounceOnMount(label) {
+    useEffect(() => {
+        AccessibilityInfo.announceForAccessibility(label);
+    }, [label]);
+}
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the
+ * user cannot directly control or measure — loading, fetching, or
+ * waiting on an external system.
+ *
+ * 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).
+ */
+export function ActivityIndicator({ size = "base", accessibilityLabel, style, testID = "ActivityIndicator", }) {
+    const resolvedSize = resolveLegacySize(size);
+    const { tokens: themeTokens } = useAtlantisTheme();
+    const { t } = useAtlantisI18n();
+    const resolvedLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : t("loading");
+    useAnnounceOnMount(resolvedLabel);
+    const reducedMotion = useReducedMotion();
+    const pixelSize = SIZE_PX[resolvedSize];
+    const strokeWidth = STROKE_WIDTH[resolvedSize];
+    const a11yProps = {
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityState: { busy: true },
+        accessibilityLabel: resolvedLabel,
+    };
+    if (reducedMotion) {
+        return (React.createElement(ReducedMotionRing, { pixelSize: pixelSize, strokeWidth: strokeWidth, ringColor: themeTokens["color-icon"], style: style, testID: testID, a11yProps: a11yProps }));
+    }
+    return (React.createElement(FullMotionRing, { pixelSize: pixelSize, strokeWidth: strokeWidth, arcColor: themeTokens["color-icon"], trackColor: themeTokens["color-disabled--secondary"], style: style, testID: testID, a11yProps: a11yProps }));
+}
+function FullMotionRing({ pixelSize, strokeWidth, arcColor, trackColor, style, testID, a11yProps, }) {
+    // Layer 1 — outer linear rotation. Continuous, constant speed.
+    const outerRotate = useSharedValue(0);
+    // Layer 2 — inner 8-phase rotation. Eight 135° eased segments per cycle
+    // (totalling 1080° over `timing-indicator--cycle`) reproduce the
+    // canonical Material Web "8-phase" rhythm.
+    const innerRotate = useSharedValue(0);
+    // Layer 3 — arc length and dash offset. Drives the visible arc growing
+    // from ~1 viewBox-unit to ~90 viewBox-units and sliding around the ring.
+    const arcProgress = useSharedValue(0);
+    useEffect(() => {
+        outerRotate.value = withRepeat(withTiming(360, {
+            duration: tokens["timing-indicator--linear-rotate"],
+            easing: Easing.linear,
+        }), -1);
+        const phaseDuration = tokens["timing-indicator--cycle"] / 8;
+        const phaseEasing = Easing.bezier(0.4, 0, 0.2, 1);
+        innerRotate.value = withRepeat(withSequence(withTiming(135, { duration: phaseDuration, easing: phaseEasing }), withTiming(270, { duration: phaseDuration, easing: phaseEasing }), withTiming(405, { duration: phaseDuration, easing: phaseEasing }), withTiming(540, { duration: phaseDuration, easing: phaseEasing }), withTiming(675, { duration: phaseDuration, easing: phaseEasing }), withTiming(810, { duration: phaseDuration, easing: phaseEasing }), withTiming(945, { duration: phaseDuration, easing: phaseEasing }), withTiming(1080, { duration: phaseDuration, easing: phaseEasing })), -1);
+        arcProgress.value = withRepeat(withTiming(1, {
+            duration: tokens["timing-indicator--arc"],
+            easing: Easing.bezier(0.4, 0, 0.2, 1),
+        }), -1);
+        // We intentionally do not include the shared values in the dependency
+        // array — they are stable references created by useSharedValue.
+    }, []);
+    const outerStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${outerRotate.value}deg` }],
+    }));
+    const innerStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${innerRotate.value}deg` }],
+    }));
+    const arcAnimatedProps = useAnimatedProps(() => {
+        "worklet";
+        // Match web's indicatorExpandArc keyframe:
+        //   0%   → dasharray (1, 200),  offset 0
+        //   50%  → dasharray (90, 200), offset -35
+        //   100% → dasharray (90, 200), offset -125
+        //
+        // Phase A (0 → 0.5): expand the visible arc from 1 → 90 while
+        //   sliding it from 0 → -35.
+        // Phase B (0.5 → 1): hold the visible arc at 90 while sliding from
+        //   -35 → -125.
+        const p = arcProgress.value;
+        let visible;
+        let offset;
+        if (p < 0.5) {
+            const phase = p * 2;
+            visible = 1 + (90 - 1) * phase;
+            offset = -35 * phase;
+        }
+        else {
+            const phase = (p - 0.5) * 2;
+            visible = 90;
+            offset = -35 + -90 * phase;
+        }
+        return {
+            strokeDasharray: `${visible}, ${GAP}`,
+            strokeDashoffset: offset,
+        };
+    });
+    return (React.createElement(Animated.View, Object.assign({ style: [{ width: pixelSize, height: pixelSize }, style], testID: testID }, a11yProps),
+        React.createElement(Animated.View, { style: [{ width: pixelSize, height: pixelSize }, outerStyle] },
+            React.createElement(Animated.View, { style: [{ width: pixelSize, height: pixelSize }, innerStyle] },
+                React.createElement(Svg, { width: pixelSize, height: pixelSize, viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}` },
+                    React.createElement(Circle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }),
+                    React.createElement(AnimatedCircle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: arcColor, strokeWidth: strokeWidth, strokeLinecap: "round", animatedProps: arcAnimatedProps }))))));
+}
+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.
+    //
+    // CRITICAL: Reanimated 3 automatically suppresses `withTiming` /
+    // `withRepeat` when the OS reduce-motion setting is enabled, snapping
+    // to the target value instantly. That is the right default for most
+    // animations — but the pulse IS our reduce-motion fallback. We
+    // explicitly opt OUT of the suppression via `reduceMotion:
+    // ReduceMotion.Never` on each `withTiming`, so the pulse runs whenever
+    // this branch renders (which only happens when reduce-motion is on).
+    //
+    // We also use `withSequence(down, up)` rather than
+    // `withRepeat(down, -1, true)` because the `reverse` flag on
+    // `withRepeat` is observed to be honored inconsistently on
+    // react-native-reanimated's web target. `withSequence` is equivalent
+    // in observable behaviour and works on both web and native.
+    const pulse = useSharedValue(1);
+    useEffect(() => {
+        pulse.value = withRepeat(withSequence(withTiming(0.35, {
+            duration: 2000,
+            easing: Easing.inOut(Easing.ease),
+            reduceMotion: ReduceMotion.Never,
+        }), withTiming(1, {
+            duration: 2000,
+            easing: Easing.inOut(Easing.ease),
+            reduceMotion: ReduceMotion.Never,
+        })), -1, false, undefined, ReduceMotion.Never);
+    }, []);
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: pulse.value,
+    }));
+    return (React.createElement(Animated.View, Object.assign({ style: [{ width: pixelSize, height: pixelSize }, animatedStyle, style], testID: testID }, a11yProps),
+        React.createElement(Svg, { width: pixelSize, height: pixelSize, viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}` },
+            React.createElement(Circle, { cx: CENTER, cy: CENTER, r: RADIUS, fill: "none", stroke: ringColor, strokeWidth: strokeWidth }))));
 }

package/dist/src/ActivityIndicator/ActivityIndicator.test.js

@@ -1,23 +1,171 @@
 import React from "react";
+import { AccessibilityInfo } from "react-native";
 import { render } from "@testing-library/react-native";
+import { useReducedMotion } from "react-native-reanimated";
 import { ActivityIndicator } from "./index";
-import { tokens } from "../utils/design";
+// `useReducedMotion` is mocked globally in src/__mocks__/__mocks.ts and
+// defaults to returning `false`. Tests that exercise the reduced-motion
+// branch override the return value below.
 const testId = "ActivityIndicator";
 describe("ActivityIndicator", () => {
-    it("renders with the default color when no props are provided", () => {
-        const { getByTestId } = render(React.createElement(ActivityIndicator, null));
-        expect(getByTestId(testId).props.color).toBe(tokens["color-greyBlue"]);
-    });
-    it("renders with a custom color", () => {
-        const color = "red";
-        const { getByTestId } = render(React.createElement(ActivityIndicator, { color: color }));
-        expect(getByTestId(testId).props.color).toBe(color);
-    });
-    it("renders with large size", () => {
-        const size = "large";
-        const color = "red";
-        const { getByTestId } = render(React.createElement(ActivityIndicator, { color: color, size: size }));
-        expect(getByTestId(testId).props.size).toBe(size);
-        expect(getByTestId(testId).props.color).toBe(color);
+    beforeEach(() => {
+        useReducedMotion.mockReturnValue(false);
+        jest.mocked(AccessibilityInfo.announceForAccessibility).mockClear();
+    });
+    describe("default rendering", () => {
+        it("renders with the default testID", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            expect(getByTestId(testId)).toBeTruthy();
+        });
+        it("renders with the localized 'Loading' label by default", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            expect(getByTestId(testId).props.accessibilityLabel).toBe("Loading");
+        });
+        it("renders with the progressbar accessibility role and busy state", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            const root = getByTestId(testId);
+            expect(root.props.accessibilityRole).toBe("progressbar");
+            expect(root.props.accessibilityState).toEqual({ busy: true });
+        });
+        it("does not set accessibilityLiveRegion", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            expect(getByTestId(testId).props.accessibilityLiveRegion).toBeUndefined();
+        });
+        it("renders at the base (44px) size by default", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            const root = getByTestId(testId);
+            const flattenedStyle = Array.isArray(root.props.style)
+                ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
+                : root.props.style;
+            expect(flattenedStyle.width).toBe(44);
+            expect(flattenedStyle.height).toBe(44);
+        });
+    });
+    describe("size variants", () => {
+        it("renders the small ring at 28px", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { size: "small" }));
+            const root = getByTestId(testId);
+            const flattenedStyle = Array.isArray(root.props.style)
+                ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
+                : root.props.style;
+            expect(flattenedStyle.width).toBe(28);
+            expect(flattenedStyle.height).toBe(28);
+        });
+        it("renders the base ring at 44px when size is explicit", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { size: "base" }));
+            const root = getByTestId(testId);
+            const flattenedStyle = Array.isArray(root.props.style)
+                ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
+                : root.props.style;
+            expect(flattenedStyle.width).toBe(44);
+            expect(flattenedStyle.height).toBe(44);
+        });
+    });
+    describe('deprecated size="large" alias', () => {
+        let warnSpy;
+        beforeEach(() => {
+            warnSpy = jest.spyOn(console, "warn").mockImplementation(() => undefined);
+        });
+        afterEach(() => {
+            warnSpy.mockRestore();
+        });
+        it('maps size="large" to size="base" visually', () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { size: "large" }));
+            const root = getByTestId(testId);
+            const flattenedStyle = Array.isArray(root.props.style)
+                ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
+                : root.props.style;
+            expect(flattenedStyle.width).toBe(44);
+            expect(flattenedStyle.height).toBe(44);
+        });
+        it('warns once when size="large" is passed (in development)', () => {
+            render(React.createElement(ActivityIndicator, { size: "large" }));
+            expect(warnSpy).toHaveBeenCalledTimes(1);
+            expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('size="large" is deprecated'));
+        });
+        it('does not warn for size="small" or size="base"', () => {
+            render(React.createElement(ActivityIndicator, { size: "small" }));
+            render(React.createElement(ActivityIndicator, { size: "base" }));
+            render(React.createElement(ActivityIndicator, null));
+            expect(warnSpy).not.toHaveBeenCalled();
+        });
+    });
+    describe("accessibility", () => {
+        it("uses a custom accessibilityLabel when supplied", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { accessibilityLabel: "Uploading file" }));
+            expect(getByTestId(testId).props.accessibilityLabel).toBe("Uploading file");
+        });
+        it("announces the resolved label on mount", () => {
+            render(React.createElement(ActivityIndicator, null));
+            expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledTimes(1);
+            expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith("Loading");
+        });
+        it("announces a custom label on mount", () => {
+            render(React.createElement(ActivityIndicator, { accessibilityLabel: "Uploading file" }));
+            expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith("Uploading file");
+        });
+        it("re-announces when the label prop changes", () => {
+            const { rerender } = render(React.createElement(ActivityIndicator, { accessibilityLabel: "Loading clients" }));
+            jest.mocked(AccessibilityInfo.announceForAccessibility).mockClear();
+            rerender(React.createElement(ActivityIndicator, { accessibilityLabel: "Loading jobs" }));
+            expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith("Loading jobs");
+        });
+    });
+    describe("style passthrough", () => {
+        it("merges a supplied style onto the root view", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { style: { marginTop: 8 } }));
+            const root = getByTestId(testId);
+            const flattenedStyle = Array.isArray(root.props.style)
+                ? Object.assign({}, ...root.props.style.flat(Infinity).filter(Boolean))
+                : root.props.style;
+            expect(flattenedStyle.marginTop).toBe(8);
+        });
+    });
+    describe("custom testID", () => {
+        it("uses the supplied testID on the root", () => {
+            const { getByTestId } = render(React.createElement(ActivityIndicator, { testID: "my-loader" }));
+            expect(getByTestId("my-loader")).toBeTruthy();
+        });
+    });
+    describe("reduced motion", () => {
+        it("renders the reduced-motion ring when the OS setting is on", () => {
+            useReducedMotion.mockReturnValue(true);
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            const root = getByTestId(testId);
+            // The reduced-motion presentation renders a single static <Circle>
+            // wrapped in one Animated.View — the full-motion presentation renders
+            // three nested Animated.Views. We can distinguish by the children
+            // count on the root.
+            // The root in both cases is an Animated.View, so we assert by
+            // examining the SVG depth: reduced-motion has SVG as a direct child.
+            // Easiest: rely on absence of the nested rotation wrappers.
+            const directChildren = React.Children.toArray(root.props.children);
+            // ReducedMotionRing → root contains the <Svg> directly.
+            // FullMotionRing → root contains an Animated.View (outer rotation)
+            // that itself contains another Animated.View, then the <Svg>.
+            // Walk the tree to confirm.
+            function hasDirectSvgChild(node) {
+                var _a, _b;
+                if (!node || typeof node !== "object")
+                    return false;
+                const element = node;
+                const typeName = ((_a = element.type) === null || _a === void 0 ? void 0 : _a.displayName) || ((_b = element.type) === null || _b === void 0 ? void 0 : _b.name) || "";
+                return typeName === "Svg" || typeName === "SvgRoot";
+            }
+            expect(directChildren.some(hasDirectSvgChild)).toBe(true);
+        });
+        it("still announces the label in reduced-motion mode", () => {
+            useReducedMotion.mockReturnValue(true);
+            render(React.createElement(ActivityIndicator, { accessibilityLabel: "Saving" }));
+            expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith("Saving");
+        });
+        it("preserves the accessibility contract in reduced-motion mode", () => {
+            useReducedMotion.mockReturnValue(true);
+            const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+            const root = getByTestId(testId);
+            expect(root.props.accessibilityRole).toBe("progressbar");
+            expect(root.props.accessibilityState).toEqual({ busy: true });
+            expect(root.props.accessibilityLabel).toBe("Loading");
+        });
     });
 });

package/dist/src/ActivityIndicator/index.js

@@ -1 +1 @@
-export { JobberActivityIndicator as ActivityIndicator } from "./ActivityIndicator";
+export { ActivityIndicator } from "./ActivityIndicator";