@jobber/components-native 0.105.4 → 0.107.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",
+  "version": "0.107.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.104.0",
+    "@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": "7fb12fadcd1c5e1440bccccae13dd29cf74dae28"
+  "gitHead": "5e02a8ecc5f282d152c92e18dde04a27d401ecf5"
 }

package/src/ActivityIndicator/ActivityIndicator.stories.tsx

@@ -1,6 +1,11 @@
 import React from "react";
+import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { ActivityIndicator } from "@jobber/components-native";
+import {
+  ActivityIndicator,
+  Text,
+  useAtlantisTheme,
+} from "@jobber/components-native";
 import { ActivityIndicatorBasicExample } from "./docs";
 
 const meta = {
@@ -28,6 +33,46 @@ export const CustomAccessibilityLabel: Story = {
   render: () => <ActivityIndicator accessibilityLabel="Uploading file" />,
 };
 
+/**
+ * The track ring uses `color-surface--active`, which is designed to read as
+ * a muted tint of the surface beneath it. This story renders the indicator
+ * on each of the standard application surfaces so the contrast between the
+ * track and its background can be reviewed at a glance.
+ */
+export const OnSurfaces: Story = {
+  render: () => <OnSurfacesExample />,
+};
+
+function OnSurfacesExample() {
+  const { tokens } = useAtlantisTheme();
+  const surfaces = [
+    { token: "color-surface", label: "surface" },
+    { token: "color-surface--background", label: "surface--background" },
+    {
+      token: "color-surface--background--subtle",
+      label: "surface--background--subtle",
+    },
+  ] as const;
+
+  return (
+    <View style={{ gap: tokens["space-base"] }}>
+      {surfaces.map(({ token, label }) => (
+        <View
+          key={token}
+          style={{
+            backgroundColor: tokens[token],
+            padding: tokens["space-large"],
+            gap: tokens["space-small"],
+          }}
+        >
+          <Text>{label}</Text>
+          <ActivityIndicator size="base" />
+        </View>
+      ))}
+    </View>
+  );
+}
+
 /**
  * The reduced-motion presentation is driven by the OS-level
  * "Reduce Motion" setting, not a Storybook control. To preview it:

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -146,7 +146,7 @@ export function ActivityIndicator({
       pixelSize={pixelSize}
       strokeWidth={strokeWidth}
       arcColor={themeTokens["color-icon"]}
-      trackColor={themeTokens["color-disabled--secondary"]}
+      trackColor={themeTokens["color-surface--active"]}
       style={style}
       testID={testID}
       a11yProps={a11yProps}

package/src/ActivityIndicator/guide.md

@@ -50,7 +50,7 @@ The previous wrapper accepted React Native's full `ActivityIndicatorProps` via
 spread. The new public API drops the following intentionally:
 
 - `color` — replaced by semantic theme tokens (`color-icon` for the arcs,
-  `color-disabled-secondary` for the track). The single known consumer of
+  `color-surface--active` for the track). The single known consumer of
   `color="white"` (`jobber-mobile/GalleryHeader`) is migrated as part of the
   `migrate-activityindicator` change in the jobber-mobile repository.
 - numeric `size` — sizing is constrained to the two design-system sizes (28px /
@@ -124,7 +124,9 @@ The three concurrent animations:
    second arc renders 180° out of phase.
 
 A static `<Circle>` of the same dimensions renders the track ring beneath the
-active arcs, filled with `tokens["color-disabled-secondary"]`.
+active arcs, filled with `themeTokens["color-surface--active"]` so the track
+adapts to whichever surface (`surface`, `surface--background`,
+`surface--background--subtle`) the indicator is placed on.
 
 The literal durations match Material Web's published progress motion spec; the
 same values ship from `@jobber/design`'s `timing.tokens.json` to both web and
@@ -177,8 +179,8 @@ Both components share:
 - Sizes (28 px small, 44 px base)
 - Motion durations (`timing-indicator-arc`, `timing-indicator-cycle`,
   `timing-indicator-linear-rotate`) from the same `@jobber/design` source
-- Color tokens (`color-icon` for arcs, `color-disabled-secondary` for track)
-  from the same `@jobber/design` source
+- Color tokens (`color-icon` for arcs, `color-surface--active` for track) from
+  the same `@jobber/design` source
 - Reduced-motion fallback (opacity 1.0 ↔ 0.35, 2 s ease-in-out alternate)
 
 Documented divergences:

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>
+  ),
+};