@jobber/components-native 0.104.3-rename-sel-d7cc7c5.6 → 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/Chip/Chip.md

@@ -238,7 +238,7 @@ export function ChipInvalidExample(
   single-select, multi-select, and add/dismiss functionality "out of the box"
 * [Combobox](/components/Combobox) is most commonly triggered by a Chip, but is
   a separate component
-* [Select](/components/Select) is a simpler single-select "dropdown" that
+* [Select](../Select/Select.md) 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

package/dist/docs/Form/Form.md

@@ -18,7 +18,7 @@ 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](/components/Select),
+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

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/docs/Select/Select.md

@@ -0,0 +1,219 @@
+# Select
+
+A Select is used to present a defined list of options to choose from.
+
+## Design & usage guidelines
+
+Nested within the Select component, Option defines the options that can be
+selected. For grouping options with section headers, use Select.OptionGroup.
+
+#### Custom grouped menu and browser support
+
+To enable the enhanced grouped menu styling (bold section headers, edge‑to‑edge
+dividers and hover backgrounds), set the `UNSAFE_experimentalStyles` prop on
+`Select`.
+
+* When `UNSAFE_experimentalStyles` is true and the browser supports
+  `appearance: base-select` (Chromium 123+), the select renders with the
+  customizable grouped menu.
+* In unsupported browsers, or when `UNSAFE_experimentalStyles` is not provided,
+  the select remains native while still rendering the same `OptionGroup`
+  structure.
+
+## States
+
+### Invalid
+
+```tsx
+import React, { useState } from "react";
+import { Option, Select } from "@jobber/components/Select";
+
+export function SelectInvalidExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
+  return (
+    <Select invalid={true} value={value} onChange={setValue}>
+      <Option value="sad">Tony</Option>
+      <Option value="old">Steve</Option>
+    </Select>
+  );
+}
+```
+
+### Disabled
+
+```tsx
+import React, { useState } from "react";
+import { Option, Select } from "@jobber/components/Select";
+
+export function SelectDisabledExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
+  return (
+    <Select disabled={true} value={value} onChange={setValue}>
+      <Option value="sad">Tony</Option>
+      <Option value="old">Steve</Option>
+    </Select>
+  );
+}
+```
+
+## Option Grouping
+
+Use `Select.OptionGroup` to organize options with section headers for better
+user experience and visual hierarchy. The `label` prop is required as it
+provides the section header text.
+
+### Basic Option Groups
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectCustomOptionGroupsExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
+  return (
+    <Select
+      placeholder="Select an option"
+      UNSAFE_experimentalStyles={true}
+      value={value}
+      onChange={setValue}
+    >
+      <Select.OptionGroup label="Team A">
+        <Select.Option value="alice">Alice</Select.Option>
+        <Select.Option value="bob">Bob</Select.Option>
+        <Select.Option value="charlie">Charlie</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup label="Team B">
+        <Select.Option value="diana">Diana</Select.Option>
+        <Select.Option value="evan">Evan</Select.Option>
+        <Select.Option value="frank">Frank</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup label="Team C">
+        <Select.Option value="grace">Grace</Select.Option>
+        <Select.Option value="hector">Hector</Select.Option>
+        <Select.Option value="isabel">Isabel</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  );
+}
+```
+
+### Disabled Option Groups
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectCustomOptionGroupDisabledExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
+  return (
+    <Select
+      UNSAFE_experimentalStyles
+      placeholder="Select an option"
+      value={value}
+      onChange={setValue}
+    >
+      <Select.OptionGroup label="Available Items">
+        <Select.Option value="option1">Option 1</Select.Option>
+        <Select.Option value="option2">Option 2</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup label="Unavailable Items" disabled>
+        <Select.Option value="option3">Option 3</Select.Option>
+        <Select.Option value="option4">Option 4</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup label="More Items">
+        <Select.Option value="option5">Option 5</Select.Option>
+        <Select.Option value="option6">Option 6</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  );
+}
+```
+
+
+## Configuration
+
+### Custom (Chromium) vs native
+
+Select is native by default. Opt into the customizable Chrome UI with
+`UNSAFE_experimentalStyles`. This enhances grouped menus in Chromium 123+ when
+the browser supports `appearance: base-select`.
+
+#### Alignment limitation (custom UI)
+
+When using `UNSAFE_experimentalStyles`, the closed control (what you see as the
+displayed value) is still rendered by the browser's picker. As a result,
+right/center alignment of the displayed value is not configurable in Chromium's
+customizable select.
+
+* Need right/center alignment? Use the native Select (omit
+  `UNSAFE_experimentalStyles`).
+* You can still style the grouped dropdown (optgroup/option) in the custom UI,
+  but the closed value alignment will remain default.
+
+## Component customization
+
+### Composable usage
+
+Select supports composition via subcomponents:
+
+* `Select.Option`: item in the list. Provide `value` and children as the label.
+* `Select.OptionGroup`: group options under a `label`. Use with
+  `UNSAFE_experimentalStyles` to opt into the customizable grouped menu in
+  Chromium.
+
+#### Customization links
+
+* See
+  ["A customizable select"](https://developer.chrome.com/blog/a-customizable-select)
+  article for what the Chrome UI exposes: `::picker(select)`, option/optgroup
+  styling, and transitions.
+
+## UNSAFE\_ props (advanced usage)
+
+General guidance on `UNSAFE_` props can be found in
+[Customizing components](../customizing-components/customizing-components.md).
+
+Select subcomponents allow `UNSAFE_className` and `UNSAFE_style` to target the
+native elements:
+
+* `Select.OptionGroup` maps to `<optgroup>`
+* `Select.Option` maps to `<option>`
+
+Note that native `<select>` UX differs per browser. Use `UNSAFE_` props with
+caution and test across environments. In the custom UI (Chromium), only the
+dropdown content is stylable; the closed value alignment is not.
+
+
+## Props
+
+### Mobile
+
+#### Option
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `string` | Yes | — | Text that shows up as the option |
+| `value` | `string` | Yes | — | The value that gets returned when an option is selected |
+
+#### Select
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactElement<SelectOption, string | JSXElementConstructor<any>>[]` | Yes | — | The options to select from |
+| `accessibilityHint` | `string` | No | — | Helps users understand what will happen when they perform an action |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the element |
+| `assistiveText` | `string` | No | — | Help text shown below the control. |
+| `defaultValue` | `string` | No | — | Default value for when the component is uncontrolled |
+| `disabled` | `boolean` | No | — | Disables input selection |
+| `invalid` | `boolean` | No | — | Indicates the current selection is invalid |
+| `label` | `string` | No | — | Label text shown above the selection. |
+| `name` | `string` | No | — | Name of the input. |
+| `onChange` | `(newValue?: string) => void` | No | — | Callback that provides the new value when the selection changes |
+| `placeholder` | `string` | No | — | Adds a first option to let users select a "no value". Placeholder item selected by default until a selection is made. |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `validations` | `RegisterOptions` | No | — | The validations that will mark this component as invalid |
+| `value` | `string` | No | — | Current value of the component |

package/dist/docs/index.md

@@ -44,13 +44,13 @@
 [InputText](./InputText/InputText.md)
 [InputTime](./InputTime/InputTime.md)
 [interaction](./interaction/interaction.md)
-[LegacySelect](./LegacySelect/LegacySelect.md)
 [Opacity](./Opacity/Opacity.md)
 [page-layouts](./page-layouts/page-layouts.md)
 [ProgressBar](./ProgressBar/ProgressBar.md)
 [Radii](./Radii/Radii.md)
 [ResponsiveBreakpoint](./ResponsiveBreakpoint/ResponsiveBreakpoint.md)
 [scaffolding](./scaffolding/scaffolding.md)
+[Select](./Select/Select.md)
 [settings](./settings/settings.md)
 [Spacing](./Spacing/Spacing.md)
 [StatusLabel](./StatusLabel/StatusLabel.md)

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.104.3-rename-sel-d7cc7c5.6+d7cc7c5c",
+    "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.1",
+        "@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": "d7cc7c5c5e83b282c4d34b9cb721bcb431140881"
+    "gitHead": "2dd2b2d127e9e7e00f8db56c9a5c8ab05344e128"
 }