@jobber/components-native 0.107.1 → 0.107.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.107.1",
+  "version": "0.107.3",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@babel/runtime": "^7.29.2",
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@jobber/design": "0.106.0",
+    "@jobber/design": "0.107.0",
     "@jobber/hooks": "2.21.0",
     "@react-native-community/datetimepicker": "^8.4.5",
     "@react-native/babel-preset": "^0.82.1",
@@ -124,5 +124,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "c5da7c5d3db964c4803ccf359bc4e59ed63f668d"
+  "gitHead": "f56f1035f43410c3b2597e5198adf7fdce8b3453"
 }

package/dist/docs/Select/Select.md

@@ -1,219 +0,0 @@
-# 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 |