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

package/dist/types/src/primitives/Portal/index.d.ts

@@ -0,0 +1 @@
+export { PortalHost as AtlantisPortalHost } from "@rn-primitives/portal";

package/dist/types/src/primitives/Select/SelectPrimitive.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import type { SelectPrimitiveContentProps, SelectPrimitiveGroupProps, SelectPrimitiveItemIndicatorProps, SelectPrimitiveItemProps, SelectPrimitiveItemTextProps, SelectPrimitiveLabelProps, SelectPrimitiveOverlayProps, SelectPrimitivePortalProps, SelectPrimitiveRootProps, SelectPrimitiveSeparatorProps, SelectPrimitiveTriggerProps, SelectPrimitiveValueProps, SelectPrimitiveViewportProps } from "./types";
+declare function SelectPrimitiveRoot({ ...props }: SelectPrimitiveRootProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function SelectPrimitiveTrigger({ children, style, testID, invalid, onPressIn, onPressOut, ref, ...props }: SelectPrimitiveTriggerProps): React.JSX.Element;
+declare function SelectPrimitiveValue({ style, ...props }: SelectPrimitiveValueProps): React.JSX.Element;
+/** Portals the dropdown into the mounted `AtlantisPortalHost`. */
+declare function SelectPrimitivePortal({ ...props }: SelectPrimitivePortalProps): React.JSX.Element;
+/** Tap-outside dismiss surface behind the dropdown (no scrim). */
+declare function SelectPrimitiveOverlay({ style, testID, ...props }: SelectPrimitiveOverlayProps): React.JSX.Element;
+/**
+ * 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`.
+ */
+declare function SelectPrimitiveContent({ children, style, sideOffset, insets, ref, ...props }: SelectPrimitiveContentProps): React.JSX.Element;
+/** Scroll container for the items (a no-op passthrough on native). */
+declare function SelectPrimitiveViewport({ ...props }: SelectPrimitiveViewportProps): React.JSX.Element;
+/**
+ * Styled, pressable option row. Compose its content from `SelectPrimitive.ItemText`
+ * and `SelectPrimitive.ItemIndicator` (and anything else) as `children`.
+ */
+declare function SelectPrimitiveItem({ style, disabled, ref, ...props }: SelectPrimitiveItemProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function SelectPrimitiveItemText({ style, disabled, ref, ...props }: SelectPrimitiveItemTextProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function SelectPrimitiveItemIndicator({ style, ref, ...props }: SelectPrimitiveItemIndicatorProps): React.JSX.Element;
+/**
+ * Groups related options, typically with a `SelectPrimitive.Label` heading.
+ */
+declare function SelectPrimitiveGroup({ ...props }: SelectPrimitiveGroupProps): React.JSX.Element;
+/**
+ * A styled group heading rendered inside `SelectPrimitive.Group`.
+ */
+declare function SelectPrimitiveLabel({ style, ref, ...props }: SelectPrimitiveLabelProps): React.JSX.Element;
+/**
+ * A styled divider between groups or options.
+ */
+declare function SelectPrimitiveSeparator({ style, ref, ...props }: SelectPrimitiveSeparatorProps): React.JSX.Element;
+export declare const SelectPrimitive: {
+    Root: typeof SelectPrimitiveRoot;
+    Trigger: typeof SelectPrimitiveTrigger;
+    Value: typeof SelectPrimitiveValue;
+    Portal: typeof SelectPrimitivePortal;
+    Overlay: typeof SelectPrimitiveOverlay;
+    Content: typeof SelectPrimitiveContent;
+    Viewport: typeof SelectPrimitiveViewport;
+    Item: typeof SelectPrimitiveItem;
+    ItemText: typeof SelectPrimitiveItemText;
+    ItemIndicator: typeof SelectPrimitiveItemIndicator;
+    Group: typeof SelectPrimitiveGroup;
+    Label: typeof SelectPrimitiveLabel;
+    Separator: typeof SelectPrimitiveSeparator;
+};
+export {};

package/dist/types/src/primitives/Select/SelectPrimitive.style.d.ts

@@ -0,0 +1,105 @@
+export declare const useStyles: () => {
+    trigger: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        minHeight: number;
+        paddingHorizontal: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+    };
+    triggerOpen: {
+        borderWidth: number;
+        borderColor: string;
+        paddingHorizontal: number;
+    };
+    triggerPressed: {
+        borderWidth: number;
+        borderColor: string;
+        paddingHorizontal: number;
+    };
+    triggerInvalid: {
+        borderColor: string;
+    };
+    triggerDisabled: {
+        backgroundColor: string;
+    };
+    value: {
+        flex: number;
+        color: string;
+        fontFamily: string | undefined;
+        fontSize: number | undefined;
+        lineHeight: number;
+        letterSpacing: number | undefined;
+    };
+    valuePlaceholder: {
+        color: string;
+    };
+    valueDisabled: {
+        color: string;
+    };
+    overlay: {
+        position: "absolute";
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    content: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        padding: number;
+    };
+    item: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        minHeight: number;
+        padding: number;
+        borderRadius: number;
+    };
+    itemPressed: {
+        backgroundColor: string;
+    };
+    itemText: {
+        flex: number;
+        color: string;
+        fontFamily: string | undefined;
+        fontSize: number | undefined;
+        lineHeight: number;
+        letterSpacing: number | undefined;
+    };
+    itemTextDisabled: {
+        color: string;
+    };
+    itemIndicator: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    groupLabel: {
+        color: string;
+        fontFamily: string | undefined;
+        fontSize: number;
+        lineHeight: number;
+        paddingTop: number;
+        paddingBottom: number;
+        paddingHorizontal: number;
+    };
+    separator: {
+        height: number;
+        backgroundColor: string;
+        marginVertical: number;
+    };
+};

package/dist/types/src/primitives/Select/SelectPrimitive.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/primitives/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectPrimitive } from "./SelectPrimitive";
+export type { SelectPrimitiveContentProps, SelectPrimitiveGroupProps, SelectPrimitiveItemIndicatorProps, SelectPrimitiveItemProps, SelectPrimitiveItemTextProps, SelectPrimitiveLabelProps, SelectPrimitiveOption, SelectPrimitiveOverlayProps, SelectPrimitivePortalProps, SelectPrimitiveRootProps, SelectPrimitiveSeparatorProps, SelectPrimitiveTriggerProps, SelectPrimitiveValueProps, SelectPrimitiveViewportProps, } from "./types";

package/dist/types/src/primitives/Select/types.d.ts

@@ -0,0 +1,41 @@
+import type React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ContentProps, ContentRef, GroupProps, GroupRef, ItemIndicatorProps, ItemIndicatorRef, ItemProps, ItemRef, ItemTextProps, ItemTextRef, LabelProps, LabelRef, Option, OverlayProps, OverlayRef, PortalProps, RootProps, SeparatorProps, SeparatorRef, TriggerProps, TriggerRef, ValueProps, ViewportProps } from "@rn-primitives/select";
+export type { Option as SelectPrimitiveOption };
+export type SelectPrimitiveRootProps = RootProps;
+export interface SelectPrimitiveTriggerProps extends Omit<TriggerProps, "style" | "children" | "disabled" | "asChild">, React.RefAttributes<TriggerRef> {
+    /** Renders as `ATL-<testID>-Select-Trigger`, or `ATL-Select-Trigger` when omitted. */
+    readonly testID?: string;
+    /** Critical (error) border styling. Style-only — no field/validation logic. */
+    readonly invalid?: boolean;
+    /** Callback styles are not supported; state styling is composed internally. */
+    readonly style?: StyleProp<ViewStyle>;
+    readonly children?: React.ReactNode;
+}
+export type SelectPrimitiveValueProps = ValueProps;
+export type SelectPrimitivePortalProps = PortalProps;
+export interface SelectPrimitiveOverlayProps extends Omit<OverlayProps, "style" | "asChild">, React.RefAttributes<OverlayRef> {
+    readonly style?: StyleProp<ViewStyle>;
+}
+export interface SelectPrimitiveContentProps extends ContentProps, React.RefAttributes<ContentRef> {
+}
+export type SelectPrimitiveViewportProps = ViewportProps;
+export interface SelectPrimitiveItemProps extends Omit<ItemProps, "style" | "asChild">, React.RefAttributes<ItemRef> {
+    /** Callback styles are not supported; pressed styling is composed internally. */
+    readonly style?: StyleProp<ViewStyle>;
+    /** Compose `ItemText` / `ItemIndicator` (and any other content) as children. */
+    readonly children?: React.ReactNode;
+}
+export interface SelectPrimitiveItemTextProps extends Omit<ItemTextProps, "asChild">, React.RefAttributes<ItemTextRef> {
+    /** Greys the label; the composing layer forwards the row's disabled state. */
+    readonly disabled?: boolean;
+}
+/** The default selected-item checkmark; overridable via `children`. */
+export interface SelectPrimitiveItemIndicatorProps extends ItemIndicatorProps, React.RefAttributes<ItemIndicatorRef> {
+}
+export interface SelectPrimitiveGroupProps extends GroupProps, React.RefAttributes<GroupRef> {
+}
+export interface SelectPrimitiveLabelProps extends LabelProps, React.RefAttributes<LabelRef> {
+}
+export interface SelectPrimitiveSeparatorProps extends SeparatorProps, React.RefAttributes<SeparatorRef> {
+}

package/dist/types/src/primitives/index.d.ts

@@ -2,3 +2,5 @@
  * This file exports styled components-native primitives.
  */
 export * from "./HelperText";
+export * from "./Portal";
+export * from "./Select";

package/dist/types/src/utils/test/PortalHostWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface PortalHostWrapperProps {
+    readonly children: React.ReactNode;
+}
+/**
+ * Test wrapper that mounts a `PortalHost` so portal-based overlays (e.g. the
+ * Select dropdown) render: `render(ui, { wrapper: PortalHostWrapper })`.
+ */
+export declare function PortalHostWrapper({ children }: PortalHostWrapperProps): React.JSX.Element;
+export {};

package/dist/types/src/utils/test/index.d.ts

@@ -1 +1,2 @@
 export { MockSafeAreaProvider } from "./MockSafeAreaProvider";
+export { PortalHostWrapper } from "./PortalHostWrapper";

package/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/src/primitives/Portal/index.ts

@@ -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/src/primitives/Select/SelectPrimitive.stories.tsx

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import React from "react";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { PortalHost } from "@rn-primitives/portal";
+import { useRootContext } from "@rn-primitives/select";
+import { SelectPrimitive } from "./SelectPrimitive";
+import { Text } from "../../Text";
+import { Icon } from "../../Icon";
+
+const meta = {
+  title: "Components/Primitives/SelectPrimitive",
+  component: SelectPrimitive.Root,
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <>
+        <SafeAreaProvider>
+          <View style={{ width: 320, padding: 16, minHeight: 480 }}>
+            <Story />
+          </View>
+        </SafeAreaProvider>
+        <PortalHost />
+      </>
+    ),
+  ],
+} satisfies Meta<typeof SelectPrimitive.Root>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CITIES = [
+  { value: "tor", label: "Toronto" },
+  { value: "van", label: "Vancouver" },
+  { value: "edm", label: "Edmonton" },
+  { value: "wpg", label: "Winnipeg" },
+  { value: "hal", label: "Halifax" },
+];
+
+/** Composes an option row from the styled `ItemText` + `ItemIndicator` parts. */
+function Option({
+  value,
+  label,
+  disabled,
+}: {
+  readonly value: string;
+  readonly label: string;
+  readonly disabled?: boolean;
+}) {
+  return (
+    <SelectPrimitive.Item value={value} label={label} disabled={disabled}>
+      <SelectPrimitive.ItemText disabled={disabled} />
+      <SelectPrimitive.ItemIndicator>
+        <Icon name="checkmark" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+function CityItems() {
+  return (
+    <>
+      {CITIES.map(city => (
+        <Option key={city.value} value={city.value} label={city.label} />
+      ))}
+    </>
+  );
+}
+
+/** Composes the raw overlay parts (`Portal > Overlay + Content > Viewport`). */
+function Dropdown({ children }: { readonly children: React.ReactNode }) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Overlay />
+      <SelectPrimitive.Content>
+        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+/**
+ * A trailing chevron composed onto the trigger. The primitive owns no chevron —
+ * the icon and its open-state rotation are composed here (this is what the
+ * sugared `Select` will do), reading `open` from the primitive root context.
+ */
+function Chevron() {
+  const { open } = useRootContext();
+
+  return (
+    <View style={{ transform: [{ rotate: open ? "180deg" : "0deg" }] }}>
+      <Icon name="arrowDown" color="iconSecondary" />
+    </View>
+  );
+}
+
+/** Composes the trigger: the value plus a composed, rotating chevron. */
+function TriggerField({
+  placeholder,
+  invalid,
+}: {
+  readonly placeholder: string;
+  readonly invalid?: boolean;
+}) {
+  return (
+    <SelectPrimitive.Trigger invalid={invalid}>
+      <SelectPrimitive.Value placeholder={placeholder} />
+      <Chevron />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function StateRow({
+  caption,
+  children,
+}: {
+  readonly caption: string;
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <View style={{ gap: 4 }}>
+      <Text level="textSupporting" variation="subdued">
+        {caption}
+      </Text>
+      {children}
+    </View>
+  );
+}
+
+export const Basic: Story = {
+  render: () => (
+    <SelectPrimitive.Root>
+      <TriggerField placeholder="Select an option" />
+      <Dropdown>
+        <CityItems />
+      </Dropdown>
+    </SelectPrimitive.Root>
+  ),
+};
+
+export const WithSelection: Story = {
+  render: () => (
+    <SelectPrimitive.Root defaultValue={{ value: "van", label: "Vancouver" }}>
+      <TriggerField placeholder="Select an option" />
+      <Dropdown>
+        <CityItems />
+      </Dropdown>
+    </SelectPrimitive.Root>
+  ),
+};
+
+export const GroupsAndSeparator: Story = {
+  render: () => (
+    <SelectPrimitive.Root>
+      <TriggerField placeholder="Select a city" />
+      <Dropdown>
+        <SelectPrimitive.Group>
+          <SelectPrimitive.Label>West</SelectPrimitive.Label>
+          <Option value="van" label="Vancouver" />
+          <Option value="edm" label="Edmonton" />
+        </SelectPrimitive.Group>
+        <SelectPrimitive.Separator />
+        <SelectPrimitive.Group>
+          <SelectPrimitive.Label>East</SelectPrimitive.Label>
+          <Option value="tor" label="Toronto" />
+          <Option value="hal" label="Halifax" />
+        </SelectPrimitive.Group>
+      </Dropdown>
+    </SelectPrimitive.Root>
+  ),
+};
+
+export const DisabledOption: Story = {
+  render: () => (
+    <SelectPrimitive.Root>
+      <TriggerField placeholder="Select an option" />
+      <Dropdown>
+        <Option value="tor" label="Toronto" />
+        <Option value="van" label="Vancouver" disabled />
+        <Option value="edm" label="Edmonton" />
+      </Dropdown>
+    </SelectPrimitive.Root>
+  ),
+};
+
+export const TriggerStates: Story = {
+  render: () => (
+    <View style={{ gap: 24 }}>
+      <StateRow caption="Default — tap to open">
+        <SelectPrimitive.Root>
+          <TriggerField placeholder="Select an option" />
+          <Dropdown>
+            <CityItems />
+          </Dropdown>
+        </SelectPrimitive.Root>
+      </StateRow>
+
+      <StateRow caption="Critical (invalid) — tap to open">
+        <SelectPrimitive.Root>
+          <TriggerField placeholder="Select an option" invalid />
+          <Dropdown>
+            <CityItems />
+          </Dropdown>
+        </SelectPrimitive.Root>
+      </StateRow>
+
+      <StateRow caption="Disabled — non-interactive, greyed chevron">
+        <SelectPrimitive.Root
+          disabled
+          defaultValue={{ value: "tor", label: "Toronto" }}
+        >
+          <TriggerField placeholder="Select an option" />
+          <Dropdown>
+            <CityItems />
+          </Dropdown>
+        </SelectPrimitive.Root>
+      </StateRow>
+    </View>
+  ),
+};

package/src/primitives/Select/SelectPrimitive.style.ts

@@ -0,0 +1,141 @@
+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: {
+      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"],
+    },
+  };
+});