@jobber/components-native 0.105.4-addeditor-cab44cf.11 → 0.106.0

package/dist/docs/ActionItem/ActionItem.md

@@ -59,7 +59,7 @@ entire contents of the ActionItem should be read as one element.
 | `actionIconColour` | `ActionIconColour` | No | `interactive` | Colour of the action icon |
 | `children` | `ReactNode` | No | — | Content to display. |
 | `icon` | `IconNames` | No | — | Name of the icon to display before content |
-| `iconColor` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Colour of the icon displayed before content |
+| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Colour of the icon displayed before content |
 | `onPress` | `() => void` | No | — | Press handler |
 | `testID` | `string` | No | `actionItem` |  |
 | `title` | `string` | No | — | Title of the Action Item |

package/dist/docs/ButtonGroup/ButtonGroup.md

@@ -74,7 +74,7 @@ to match the height of the largest button.
 | `buttonVariation` | `ButtonVariation` | No | — | Themes the action button to the type of action it performs (default: "work") |
 | `customButton` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | Optional custom button that can be rendered in place of the primary action button |
 | `icon` | `IconNames` | No | — | Icon to be displayed on the action button |
-| `iconColor` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour which will be used Others... |
+| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour which will be used Others... |
 | `loading` | `boolean` | No | — |  |
 
 #### ButtonGroup.SecondaryAction
@@ -85,5 +85,5 @@ to match the height of the largest button.
 | `onPress` | `() => void` | Yes | — | Press handler for the action button |
 | `destructive` | `boolean` | No | — | Indicates whether the secondary action is destructive in nature. |
 | `icon` | `IconNames` | No | — | Icon to be displayed on the action button |
-| `iconColor` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour which will be used Others... |
+| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour which will be used Others... |
 | `loading` | `boolean` | No | — |  |

package/dist/docs/Chip/Chip.md

@@ -4,7 +4,7 @@ Chip is a flexible component that can be used for
 
 * inline single- or multi-selection of items
 * triggering filtering and selection components like
-  [Combobox](/components/Combobox)
+  [FilterPicker](/components/FilterPicker)
 * presenting grouped items that can be added or removed
 
 ```tsx
@@ -236,8 +236,8 @@ export function ChipInvalidExample(
 
 * [Chips](/components/Chips) is a convenience wrapper that offers the
   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
+* [FilterPicker](/components/FilterPicker) is most commonly triggered by a Chip,
+  but is a separate component
 * [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
@@ -256,7 +256,7 @@ ideally 1–2 words. If any of the options in the group may have longer labels,
 consider Checkbox or Radio as necessary for your selection type.
 
 In cases where a Chip displays name of its selections, such as when used to
-trigger a Combobox or a date range selector, use the heading to identify the
+trigger a FilterPicker or a date range selector, use the heading to identify the
 "category" and the label to identify the selected items.
 
 ## Accessibility

package/dist/docs/EmptyState/EmptyState.md

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

package/dist/docs/Icon/Icon.md

@@ -415,6 +415,7 @@ export function IconSizesExample() {
 |      | `export`         |
 |      | `filter`         |
 |      | `future`         |
+|      | `history`        |
 |      | `import`         |
 |      | `redo`           |
 |      | `remove`         |
@@ -582,7 +583,7 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
+| `color` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/IconButton/IconButton.md

@@ -19,7 +19,7 @@ regarding which icons to use.
 | `accessibilityLabel` | `string` | Yes | — | Accessibilty label for the component. It's also used for testing |
 | `name` | `IconNames` | Yes | — | The icon to show. |
 | `badge` | `ReactNode` | No | — | a component that would render over the icon e.g. the number of notifications over the activity feed icon |
-| `color` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
+| `color` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Determines the color of the icon. If not specified, some icons have a default system colour like quotes, jobs, and in... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `onPress` | `() => void` | No | — | Press handler |
 | `testID` | `string` | No | — | Used to locate this button in tests |

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -17,10 +17,10 @@ deprecated.
 
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                        | Notes                                    |
-| --------------------- | -------------------------------------------------- | ---------------------------------------- |
-| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.   |
-| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                | Dismissible Chips variant is deprecated. |
+| Deprecated            | Replacement                                            | Notes                                    |
+| --------------------- | ------------------------------------------------------ | ---------------------------------------- |
+| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.   |
+| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated. |
 
 ### Deprecated props on still-supported components
 
@@ -77,7 +77,7 @@ parent reads its compound children to wire up state, accessibility, and styling.
 | `Modal` v2              | `Modal.Provider`, `Modal.Activator`, `Modal.Content`, `Modal.Header`, `Modal.Actions`                                                                                                                                                                                                        | Wrap with `Modal.Provider`. `Modal.Header` and `Modal.Actions` must be **direct children** of `Modal.Content` for sticky behavior to work. Use `Modal.Activator` to control focus return when the trigger element unmounts.                                                                                                  |
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
-| `Combobox`              | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action`                                                                                                                                                                                                                                   | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator.                                                                                                                                                          |
+| `FilterPicker`          | `FilterPicker.Activator`, `FilterPicker.Option`, `FilterPicker.Action`                                                                                                                                                                                                                       | `FilterPicker` > optional `FilterPicker.Activator`, one or more `FilterPicker.Option`, optional `FilterPicker.Action`. Omitting `FilterPicker.Activator` renders the default activator.                                                                                                                                      |
 | `DataTable`             | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`.                                                                                                |
 | `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator`                                                                                                                                          | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers.                                                                                                                                       |
 | `Page`                  | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body`                                   | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.105.4-addeditor-cab44cf.11+cab44cfa",
+    "version": "0.106.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -58,6 +58,8 @@
     "dependencies": {
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-picker/picker": "^2.4.10",
+        "@rn-primitives/portal": "^1.4.0",
+        "@rn-primitives/select": "^1.4.0",
         "autolinker": "^4.0.0",
         "deepmerge": "^4.2.2",
         "lodash": "^4.17.21",
@@ -71,7 +73,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.103.1-addeditor-cab44cf.11+cab44cfa",
+        "@jobber/design": "0.105.0",
         "@jobber/hooks": "2.21.0",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -122,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "cab44cfa1430ab6784636b2d3db8ad771db0999a"
+    "gitHead": "b13d0074cac7624ef3b8efa7e79e26697d9e15a6"
 }

package/dist/src/primitives/Portal/index.js

@@ -0,0 +1,5 @@
+// The portal host that backs every portal-based primitive (e.g. the Select
+// dropdown). Apps mount one <AtlantisPortalHost/> at their root; it shares this
+// package's bundled @rn-primitives/portal instance with the primitives' Portal,
+// so registered overlays render in the host.
+export { PortalHost as AtlantisPortalHost } from "@rn-primitives/portal";

package/dist/src/primitives/Select/SelectPrimitive.js

@@ -0,0 +1,173 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { StyleSheet } from "react-native";
+import * as Primitive from "@rn-primitives/select";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { useStyles } from "./SelectPrimitive.style";
+import { tokens as staticTokens } from "../../utils/design";
+function SelectPrimitiveRoot(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(Primitive.Root, Object.assign({}, props));
+}
+/**
+ * Styled trigger field. Renders only its `children` — compose
+ * `SelectPrimitive.Value` and any trailing icon (e.g. a chevron) here; the
+ * primitive provides no chevron of its own.
+ */
+function SelectPrimitiveTrigger(_a) {
+    var { children, style, testID, invalid, onPressIn, onPressOut, ref } = _a, props = __rest(_a, ["children", "style", "testID", "invalid", "onPressIn", "onPressOut", "ref"]);
+    const styles = useStyles();
+    const { open, value, disabled: rootDisabled } = Primitive.useRootContext();
+    const [pressed, setPressed] = React.useState(false);
+    // `disabled` is Root-level; the primitive's Trigger won't read it from
+    // context, so resolve it here and pass it down to block interaction.
+    const isDisabled = rootDisabled !== null && rootDisabled !== void 0 ? rootDisabled : false;
+    const isInvalid = !isDisabled && (invalid !== null && invalid !== void 0 ? invalid : false);
+    // Announce the selected option as the trigger's value.
+    const accessibilityValue = (value === null || value === void 0 ? void 0 : value.label) ? { text: value.label } : undefined;
+    return (React.createElement(Primitive.Trigger, Object.assign({ ref: ref, testID: computeTriggerTestID(testID), disabled: isDisabled, accessibilityValue: accessibilityValue, onPressIn: event => {
+            setPressed(true);
+            onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+        }, onPressOut: event => {
+            setPressed(false);
+            onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+        }, style: [
+            styles.trigger,
+            pressed && !open && styles.triggerPressed,
+            open && styles.triggerOpen,
+            isInvalid && styles.triggerInvalid,
+            isDisabled && styles.triggerDisabled,
+            style,
+        ] }, props), children));
+}
+function computeTriggerTestID(testID) {
+    return testID ? `ATL-${testID}-Select-Trigger` : "ATL-Select-Trigger";
+}
+function SelectPrimitiveValue(_a) {
+    var { style } = _a, props = __rest(_a, ["style"]);
+    const styles = useStyles();
+    const { value, disabled } = Primitive.useRootContext();
+    const isEmpty = (value === null || value === void 0 ? void 0 : value.value) === undefined;
+    return (React.createElement(Primitive.Value, Object.assign({ style: [
+            styles.value,
+            isEmpty && styles.valuePlaceholder,
+            disabled && styles.valueDisabled,
+            style,
+        ] }, props)));
+}
+/** Portals the dropdown into the mounted `AtlantisPortalHost`. */
+function SelectPrimitivePortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(Primitive.Portal, Object.assign({}, props));
+}
+/** Tap-outside dismiss surface behind the dropdown (no scrim). */
+function SelectPrimitiveOverlay(_a) {
+    var { style, testID = "ATL-Select-Overlay" } = _a, props = __rest(_a, ["style", "testID"]);
+    const styles = useStyles();
+    return (React.createElement(Primitive.Overlay, Object.assign({ testID: testID, style: StyleSheet.flatten([styles.overlay, style]) }, props)));
+}
+/**
+ * Anchored dropdown surface: matches the trigger width, applies safe-area
+ * insets, and flips above the trigger when space is tight. Compose it inside
+ * `Portal`, alongside `Overlay`, wrapping the items in a `Viewport`.
+ */
+function SelectPrimitiveContent(_a) {
+    var _b;
+    var { children, style, sideOffset = staticTokens["space-smaller"], insets, ref } = _a, props = __rest(_a, ["children", "style", "sideOffset", "insets", "ref"]);
+    const styles = useStyles();
+    // Read the context directly, not `useSafeAreaInsets` (which throws without a
+    // provider): `Content` renders at the portal host, which may sit outside one.
+    const safeAreaInsets = (_b = React.useContext(SafeAreaInsetsContext)) !== null && _b !== void 0 ? _b : undefined;
+    const { triggerPosition } = Primitive.useRootContext();
+    return (React.createElement(Primitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, insets: insets !== null && insets !== void 0 ? insets : safeAreaInsets, style: StyleSheet.flatten([
+            styles.content,
+            triggerPosition ? { width: triggerPosition.width } : undefined,
+            style,
+        ]) }, props), children));
+}
+/** Scroll container for the items (a no-op passthrough on native). */
+function SelectPrimitiveViewport(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(Primitive.Viewport, Object.assign({}, props));
+}
+/**
+ * Styled, pressable option row. Compose its content from `SelectPrimitive.ItemText`
+ * and `SelectPrimitive.ItemIndicator` (and anything else) as `children`.
+ */
+function SelectPrimitiveItem(_a) {
+    var { style, disabled, ref } = _a, props = __rest(_a, ["style", "disabled", "ref"]);
+    const styles = useStyles();
+    return (React.createElement(Primitive.Item, Object.assign({ ref: ref, disabled: disabled, style: ({ pressed }) => [
+            styles.item,
+            pressed && styles.itemPressed,
+            style,
+        ] }, props)));
+}
+/**
+ * The option label as styled text (reads the label from the item context). The
+ * `disabled` flag is explicit — the composing layer (e.g. the sugared
+ * `Select.Item`) forwards the row's disabled state to grey the text.
+ */
+function SelectPrimitiveItemText(_a) {
+    var { style, disabled, ref } = _a, props = __rest(_a, ["style", "disabled", "ref"]);
+    const styles = useStyles();
+    return (React.createElement(Primitive.ItemText, Object.assign({ ref: ref, style: [styles.itemText, disabled && styles.itemTextDisabled, style] }, props)));
+}
+/**
+ * The selected-state marker slot. Renders its `children` (the marker, e.g. a
+ * checkmark) on the selected row only — it self-hides on unselected rows. The
+ * marker glyph is supplied by the composing layer, not defaulted here.
+ */
+function SelectPrimitiveItemIndicator(_a) {
+    var { style, ref } = _a, props = __rest(_a, ["style", "ref"]);
+    const styles = useStyles();
+    return (React.createElement(Primitive.ItemIndicator, Object.assign({ ref: ref, style: [styles.itemIndicator, style] }, props)));
+}
+/**
+ * Groups related options, typically with a `SelectPrimitive.Label` heading.
+ */
+function SelectPrimitiveGroup(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(Primitive.Group, Object.assign({}, props));
+}
+/**
+ * A styled group heading rendered inside `SelectPrimitive.Group`.
+ */
+function SelectPrimitiveLabel(_a) {
+    var { style, ref } = _a, props = __rest(_a, ["style", "ref"]);
+    const styles = useStyles();
+    return (React.createElement(Primitive.Label, Object.assign({ ref: ref, style: [styles.groupLabel, style] }, props)));
+}
+/**
+ * A styled divider between groups or options.
+ */
+function SelectPrimitiveSeparator(_a) {
+    var { style, ref } = _a, props = __rest(_a, ["style", "ref"]);
+    const styles = useStyles();
+    return (React.createElement(Primitive.Separator, Object.assign({ ref: ref, style: [styles.separator, style] }, props)));
+}
+export const SelectPrimitive = {
+    Root: SelectPrimitiveRoot,
+    Trigger: SelectPrimitiveTrigger,
+    Value: SelectPrimitiveValue,
+    Portal: SelectPrimitivePortal,
+    Overlay: SelectPrimitiveOverlay,
+    Content: SelectPrimitiveContent,
+    Viewport: SelectPrimitiveViewport,
+    Item: SelectPrimitiveItem,
+    ItemText: SelectPrimitiveItemText,
+    ItemIndicator: SelectPrimitiveItemIndicator,
+    Group: SelectPrimitiveGroup,
+    Label: SelectPrimitiveLabel,
+    Separator: SelectPrimitiveSeparator,
+};

package/dist/src/primitives/Select/SelectPrimitive.style.js

@@ -0,0 +1,112 @@
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+import { getTypographyStyles } from "../../Typography";
+import { tokens as staticTokens } from "../../utils/design";
+const baseLineHeight = staticTokens["typography--lineHeight-base"];
+export const useStyles = buildThemedStyles(tokens => {
+    const typographyStyles = getTypographyStyles(tokens);
+    // The dark theme merges a web CSS-string `shadow-base` over the native object
+    // shadow, leaving stray indexed keys on the value. Pick only the React Native
+    // shadow properties so those keys never reach the style (spreading them
+    // breaks style application through the dropdown's portal on react-native-web).
+    const shadowBase = tokens["shadow-base"];
+    const contentShadow = {
+        shadowColor: shadowBase.shadowColor,
+        shadowOffset: shadowBase.shadowOffset,
+        shadowOpacity: shadowBase.shadowOpacity,
+        shadowRadius: shadowBase.shadowRadius,
+        elevation: shadowBase.elevation,
+    };
+    return {
+        trigger: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: tokens["space-small"],
+            minHeight: tokens["space-largest"] + tokens["space-small"],
+            paddingHorizontal: tokens["space-slim"],
+            backgroundColor: tokens["color-surface"],
+            borderWidth: tokens["border-base"],
+            borderColor: tokens["color-border--interactive"],
+            borderRadius: tokens["radius-base"],
+        },
+        triggerOpen: {
+            borderWidth: tokens["border-thick"],
+            borderColor: tokens["color-interactive--subtle"],
+            // Keep the content from shifting when the border thickens.
+            paddingHorizontal: tokens["space-slim"] - (tokens["border-thick"] - tokens["border-base"]),
+        },
+        triggerPressed: {
+            borderWidth: tokens["border-thick"],
+            borderColor: tokens["color-border--interactive"],
+            paddingHorizontal: tokens["space-slim"] - (tokens["border-thick"] - tokens["border-base"]),
+        },
+        // Critical sets only the colour; width follows the open/pressed state.
+        triggerInvalid: {
+            borderColor: tokens["color-critical"],
+        },
+        triggerDisabled: {
+            backgroundColor: tokens["color-disabled--secondary"],
+        },
+        value: {
+            flex: 1,
+            color: tokens["color-text"],
+            fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+            fontSize: typographyStyles.defaultSize.fontSize,
+            lineHeight: baseLineHeight,
+            letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+        },
+        valuePlaceholder: {
+            color: tokens["color-text--secondary"],
+        },
+        valueDisabled: {
+            color: tokens["color-disabled"],
+        },
+        overlay: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        content: Object.assign({ backgroundColor: tokens["color-surface"], borderWidth: tokens["border-base"], borderColor: tokens["color-border"], borderRadius: tokens["radius-base"], padding: tokens["space-small"] }, contentShadow),
+        item: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: tokens["space-small"],
+            minHeight: tokens["space-largest"] + tokens["space-small"],
+            padding: tokens["space-small"],
+            borderRadius: tokens["radius-small"],
+        },
+        itemPressed: {
+            backgroundColor: tokens["color-surface--hover"],
+        },
+        itemText: {
+            flex: 1,
+            color: tokens["color-text"],
+            fontFamily: typographyStyles.baseRegularSemiBold.fontFamily,
+            fontSize: typographyStyles.defaultSize.fontSize,
+            lineHeight: baseLineHeight,
+            letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+        },
+        itemTextDisabled: {
+            color: tokens["color-disabled"],
+        },
+        itemIndicator: {
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        groupLabel: {
+            color: tokens["color-text--secondary"],
+            fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+            fontSize: tokens["typography--fontSize-small"],
+            lineHeight: tokens["typography--lineHeight-tight"],
+            paddingTop: tokens["space-small"],
+            paddingBottom: tokens["space-smaller"],
+            paddingHorizontal: tokens["space-small"],
+        },
+        separator: {
+            height: tokens["border-base"],
+            backgroundColor: tokens["color-border"],
+            marginVertical: tokens["space-small"],
+        },
+    };
+});