@jobber/components-native 0.108.2 → 0.109.1-upgrade-ax-69e6080.2

package/dist/docs/index.md

@@ -52,6 +52,7 @@
 [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.108.2",
+    "version": "0.109.1-upgrade-ax-69e6080.2+69e60801",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -73,8 +73,8 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.108.0",
-        "@jobber/hooks": "2.21.0",
+        "@jobber/design": "0.108.1-upgrade-ax-69e6080.7+69e60801",
+        "@jobber/hooks": "2.21.1-upgrade-ax-69e6080.109+69e60801",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
         "@storybook/addon-a11y": "10.3.5",
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "37b9c3bc407715b1dc2190912665cfc41e8cc335"
+    "gitHead": "69e60801cfaedb56dbfac2df05b44ace5676c19f"
 }

package/dist/src/Select/Select.composable.test.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { Option, Select } from ".";
+import { PortalHostWrapper } from "../utils/test";
+describe("Select composable statics + coexistence", () => {
+    it("exposes the composable parts as statics on Select", () => {
+        expect(Object.keys(Select)).toEqual(expect.arrayContaining([
+            "Root",
+            "Trigger",
+            "Value",
+            "Label",
+            "Content",
+            "Item",
+            "Group",
+            "GroupLabel",
+            "Separator",
+        ]));
+    });
+    it("renders through the public statics with no react-hook-form context", () => {
+        render(React.createElement(Select.Root, null,
+            React.createElement(Select.Label, null, "City"),
+            React.createElement(Select.Trigger, null,
+                React.createElement(Select.Value, { placeholder: "Select a city" })),
+            React.createElement(Select.Content, null,
+                React.createElement(Select.Item, { value: "tor", label: "Toronto" }))), { wrapper: PortalHostWrapper });
+        expect(screen.getByText("City", { includeHiddenElements: true })).toBeDefined();
+        expect(screen.getByTestId("ATL-Select-Trigger")).toBeDefined();
+    });
+    it("keeps the legacy props-driven Select callable and renders Option", () => {
+        render(React.createElement(Select, { onChange: jest.fn() },
+            React.createElement(Option, { value: "tor" }, "Toronto"),
+            React.createElement(Option, { value: "van" }, "Vancouver")));
+        // Legacy trigger testID is preserved and does not collide with the
+        // composable trigger's ATL-Select-Trigger.
+        expect(screen.getByTestId("ATL-Select")).toBeDefined();
+        expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
+    });
+});

package/dist/src/Select/Select.js

@@ -2,6 +2,12 @@ import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./Select.style";
 import { SelectInternalPicker } from "./components/SelectInternalPicker";
+import { SelectRoot } from "./SelectRoot";
+import { SelectTrigger } from "./components/SelectTrigger";
+import { SelectLabel } from "./components/SelectLabel";
+import { SelectContent } from "./components/SelectContent";
+import { SelectItem, SelectItemPrefix, SelectItemSuffix, } from "./components/SelectItem";
+import { SelectPrimitive } from "../primitives/Select";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
@@ -66,6 +72,26 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
         return (activeValue === null || activeValue === void 0 ? void 0 : activeValue.label) || placeholder || t("Select.emptyValue");
     }
 }
+/**
+ * The composable `Select.*` parts, attached as statics on the function
+ * declaration in this file — the docs site's prop generation
+ * (react-docgen-typescript) only discovers parts assigned here at compile
+ * time, not runtime attachments like `Object.assign`. Additive — the legacy
+ * props-driven `Select` + `Option` are unchanged (props, native picker,
+ * `ATL-Select` testID). See `Select.guide.md` for the parts and the
+ * composition model.
+ */
+Select.Root = SelectRoot;
+Select.Trigger = SelectTrigger;
+Select.Value = SelectPrimitive.Value;
+Select.Label = SelectLabel;
+Select.Content = SelectContent;
+Select.Item = SelectItem;
+Select.ItemPrefix = SelectItemPrefix;
+Select.ItemSuffix = SelectItemSuffix;
+Select.Group = SelectPrimitive.Group;
+Select.GroupLabel = SelectPrimitive.Label;
+Select.Separator = SelectPrimitive.Separator;
 function getTextVariation({ invalid, disabled, }) {
     if (invalid)
         return "error";

package/dist/src/Select/SelectComposableTypes.js

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

package/dist/src/Select/SelectRoot.js

@@ -0,0 +1,85 @@
+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, { useCallback, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
+import { useStyles } from "./SelectRoot.style";
+import { SelectFieldContext } from "./components/SelectFieldContext";
+import { FieldLabel } from "./components/SelectLabel";
+import { HelperText } from "../primitives/HelperText";
+import { SelectPrimitive } from "../primitives/Select";
+/**
+ * Composable `Select.Root` chrome: renders the optional `description` / `error`
+ * below the field (via `HelperText`), owns the field-state context, and places the
+ * field label. The label content is authored via `Select.Label` (registered into
+ * this context); `labelPlacement` decides whether it renders in the above slot
+ * (here) or the inside slot (`Select.Trigger`). `error` takes priority over
+ * `description`. See `Select.guide.md` for the label / accessibility / layering
+ * model.
+ */
+export function SelectRoot(_a) {
+    var { labelPlacement = "inside", accessibilityLabel: accessibilityLabelProp, description, error, invalid, status, readOnly, children } = _a, rootProps = __rest(_a, ["labelPlacement", "accessibilityLabel", "description", "error", "invalid", "status", "readOnly", "children"]);
+    const styles = useStyles();
+    // An empty / whitespace-only string error counts as "no error".
+    const hasError = typeof error === "string" ? error.trim().length > 0 : error != null;
+    const isInvalid = invalid === true || status === "critical" || hasError;
+    // A composed `Select.Label` registers its content + (for a string) its
+    // accessible name here.
+    const [registered, setRegistered] = useState();
+    // Track how many `Select.Label`s are mounted to warn on unsupported
+    // multi-label usage (the registry holds a single label — the last one wins).
+    const labelCount = useRef(0);
+    const registerLabel = useCallback((content, name) => {
+        labelCount.current += 1;
+        if (labelCount.current > 1) {
+            console.warn("Select: multiple <Select.Label> are composed — only one is supported; the last one wins.");
+        }
+        setRegistered({ content, name });
+    }, []);
+    const unregisterLabel = useCallback(() => {
+        labelCount.current = Math.max(0, labelCount.current - 1);
+        setRegistered(undefined);
+    }, []);
+    const labelContent = registered === null || registered === void 0 ? void 0 : registered.content;
+    const accessibilityLabel = accessibilityLabelProp !== null && accessibilityLabelProp !== void 0 ? accessibilityLabelProp : registered === null || registered === void 0 ? void 0 : registered.name;
+    const fieldState = useMemo(() => ({
+        labelPlacement,
+        labelContent,
+        accessibilityLabel,
+        invalid: isInvalid,
+        readOnly,
+        registerLabel,
+        unregisterLabel,
+    }), [
+        labelPlacement,
+        labelContent,
+        accessibilityLabel,
+        isInvalid,
+        readOnly,
+        registerLabel,
+        unregisterLabel,
+    ]);
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(SelectFieldContext.Provider, { value: fieldState },
+            React.createElement(SelectPrimitive.Root, Object.assign({ style: styles.field }, rootProps),
+                labelPlacement === "above" && React.createElement(FieldLabel, null),
+                children)),
+        renderBelowField(hasError ? error : undefined, description)));
+}
+function renderBelowField(error, description) {
+    if (error != null) {
+        return typeof error === "string" ? (React.createElement(HelperText, { message: error, status: "critical" })) : (error);
+    }
+    if (description != null) {
+        return typeof description === "string" ? (React.createElement(HelperText, { message: description, status: "neutral" })) : (description);
+    }
+    return null;
+}

package/dist/src/Select/SelectRoot.style.js

@@ -0,0 +1,9 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => ({
+    container: {
+        gap: tokens["space-smaller"],
+    },
+    field: {
+        gap: tokens["space-small"],
+    },
+}));

package/dist/src/Select/SelectRoot.test.js

@@ -0,0 +1,157 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react-native";
+import { SelectRoot } from "./SelectRoot";
+import { SelectTrigger } from "./components/SelectTrigger";
+import { SelectLabel } from "./components/SelectLabel";
+import { SelectPrimitive } from "../primitives/Select";
+import { Text } from "../Text";
+import { tokens } from "../utils/design";
+function renderRoot(props = {}) {
+    return render(React.createElement(SelectRoot, Object.assign({}, props),
+        React.createElement(SelectTrigger, null,
+            React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+}
+describe("SelectRoot chrome", () => {
+    it("renders a composed label (visible, hidden from assistive tech)", () => {
+        render(React.createElement(SelectRoot, null,
+            React.createElement(SelectLabel, null, "City"),
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        // The label renders but is hidden from a11y (the trigger carries the name).
+        expect(screen.queryByText("City")).toBeNull();
+        expect(screen.getByText("City", { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a string description as neutral helper text", () => {
+        renderRoot({ description: "Pick your city" });
+        expect(screen.getByText("Pick your city")).toBeDefined();
+        // Neutral helper text has no alert icon.
+        expect(screen.queryByTestId("alert")).toBeNull();
+    });
+    it("renders an error as critical helper text", () => {
+        renderRoot({ error: "This field is required" });
+        expect(screen.getByText("This field is required")).toBeDefined();
+        expect(screen.getByTestId("alert")).toBeDefined();
+    });
+    it("gives error priority over description", () => {
+        renderRoot({ description: "Pick your city", error: "Required" });
+        expect(screen.getByText("Required")).toBeDefined();
+        expect(screen.queryByText("Pick your city")).toBeNull();
+    });
+    it("treats an empty-string error as no error", () => {
+        renderRoot({ error: "", description: "Pick your city" });
+        // No critical styling, no error helper — the description shows instead.
+        expect(screen.getByTestId("ATL-Select-Trigger")).not.toHaveStyle({
+            borderColor: tokens["color-critical"],
+        });
+        expect(screen.queryByTestId("alert")).toBeNull();
+        expect(screen.getByText("Pick your city")).toBeDefined();
+    });
+    it.each([
+        ["error", { error: "Required" }],
+        ["status critical", { status: "critical" }],
+        ["invalid", { invalid: true }],
+    ])("applies critical trigger styling from %s", (_label, props) => {
+        renderRoot(props);
+        expect(screen.getByTestId("ATL-Select-Trigger")).toHaveStyle({
+            borderColor: tokens["color-critical"],
+        });
+    });
+    it("makes the trigger read-only (no chevron) via the Root prop", () => {
+        renderRoot({ readOnly: true });
+        expect(screen.getByTestId("ATL-Select-Trigger")).toHaveStyle({
+            backgroundColor: tokens["color-surface--background--subtle"],
+        });
+        expect(screen.queryByTestId("arrowDown")).toBeNull();
+    });
+    it.each([false, true])("uses a provided trigger testID verbatim (readOnly=%s)", readOnly => {
+        render(React.createElement(SelectRoot, { readOnly: readOnly },
+            React.createElement(SelectTrigger, { testID: "city" },
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        expect(screen.getByTestId("city")).toBeDefined();
+        expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
+    });
+    it("greys the value when disabled via the Root prop", () => {
+        renderRoot({
+            disabled: true,
+            defaultValue: { value: "tor", label: "Toronto" },
+        });
+        expect(screen.getByText("Toronto")).toHaveStyle({
+            color: tokens["color-disabled"],
+        });
+    });
+});
+describe("SelectRoot label placement", () => {
+    const hidden = { includeHiddenElements: true };
+    function renderComposed(props = {}) {
+        return render(React.createElement(SelectRoot, Object.assign({}, props),
+            React.createElement(SelectLabel, null, "City"),
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+    }
+    it("places the label inside the trigger by default (labelPlacement inside)", () => {
+        renderComposed();
+        const trigger = screen.getByTestId("ATL-Select-Trigger");
+        expect(within(trigger).getByText("City", hidden)).toBeDefined();
+    });
+    it("places the label above the trigger with labelPlacement='above'", () => {
+        renderComposed({ labelPlacement: "above" });
+        // Rendered exactly once, and outside the trigger.
+        expect(screen.getAllByText("City", hidden)).toHaveLength(1);
+        const trigger = screen.getByTestId("ATL-Select-Trigger");
+        expect(within(trigger).queryByText("City", hidden)).toBeNull();
+    });
+    it("ignores where Select.Label is written — placement follows the prop", () => {
+        render(React.createElement(SelectRoot, { labelPlacement: "inside" },
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+            React.createElement(SelectLabel, null, "City")));
+        const trigger = screen.getByTestId("ATL-Select-Trigger");
+        expect(within(trigger).getByText("City", hidden)).toBeDefined();
+    });
+    it("auto-publishes a string Select.Label as the trigger's accessible name", () => {
+        renderComposed();
+        expect(screen.getByTestId("ATL-Select-Trigger").props.accessibilityLabel).toBe("City");
+    });
+    it("uses an explicit accessibilityLabel for non-string label content", () => {
+        render(React.createElement(SelectRoot, { accessibilityLabel: "City" },
+            React.createElement(SelectLabel, null,
+                React.createElement(Text, null, "City")),
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        expect(screen.getByTestId("ATL-Select-Trigger").props.accessibilityLabel).toBe("City");
+    });
+    it("warns when more than one Select.Label is composed", () => {
+        const warn = jest
+            .spyOn(console, "warn")
+            .mockImplementation(() => undefined);
+        render(React.createElement(SelectRoot, null,
+            React.createElement(SelectLabel, null, "City"),
+            React.createElement(SelectLabel, null, "Town"),
+            React.createElement(SelectTrigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        expect(warn).toHaveBeenCalledWith(expect.stringContaining("multiple <Select.Label>"));
+        warn.mockRestore();
+    });
+});
+describe("SelectTrigger ref", () => {
+    it("forwards a ref exposing open/close", () => {
+        var _a, _b;
+        const triggerRef = React.createRef();
+        render(React.createElement(SelectRoot, null,
+            React.createElement(SelectTrigger, { ref: triggerRef },
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        expect(triggerRef.current).not.toBeNull();
+        expect(typeof ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.open)).toBe("function");
+        expect(typeof ((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.close)).toBe("function");
+    });
+    it("does not attach a ref when readOnly (no interactive trigger)", () => {
+        const triggerRef = React.createRef();
+        render(React.createElement(SelectRoot, { readOnly: true, defaultValue: { value: "tor", label: "Toronto" } },
+            React.createElement(SelectTrigger, { ref: triggerRef },
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+        // readOnly mounts a static surface, so the ref stays null and an
+        // optional-chained open()/close() is a safe no-op.
+        expect(triggerRef.current).toBeNull();
+        expect(() => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.open(); }).not.toThrow();
+    });
+});

package/dist/src/Select/components/SelectContent.js

@@ -0,0 +1,51 @@
+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 { Platform, StyleSheet, useWindowDimensions } from "react-native";
+import { GestureHandlerRootView, ScrollView, } from "react-native-gesture-handler";
+import { FullWindowOverlay } from "react-native-screens";
+import { SelectPrimitive } from "../../primitives/Select";
+/**
+ * iOS: draw the dropdown in a top-level window so it sits above native-stack
+ * modals the app-root host can't reach. GestureHandlerRootView restores gestures
+ * there so the inner ScrollView scrolls. Passthrough elsewhere.
+ */
+function ModalSafeOverlay({ children }) {
+    if (Platform.OS !== "ios") {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(FullWindowOverlay, null,
+        React.createElement(GestureHandlerRootView, { style: styles.overlayRoot }, children)));
+}
+// Cap the dropdown height (rn-primitives positions it but never caps it) so long
+// lists scroll; a window fraction adapts across devices.
+const MAX_HEIGHT_RATIO = 0.55;
+/**
+ * Folds the primitive Portal / Overlay / Content / Viewport into one dropdown
+ * part. Positioning lives in the primitive `Content`; props pass through.
+ */
+export function SelectContent(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { height } = useWindowDimensions();
+    const maxHeight = Math.round(height * MAX_HEIGHT_RATIO);
+    return (React.createElement(SelectPrimitive.Portal, null,
+        React.createElement(ModalSafeOverlay, null,
+            React.createElement(SelectPrimitive.Overlay, null,
+                React.createElement(SelectPrimitive.Content, Object.assign({}, props),
+                    React.createElement(SelectPrimitive.Viewport, null,
+                        React.createElement(ScrollView, { style: { maxHeight }, bounces: false, keyboardShouldPersistTaps: "handled" }, children)))))));
+}
+const styles = StyleSheet.create({
+    overlayRoot: {
+        flex: 1,
+    },
+});

package/dist/src/Select/components/SelectContent.test.js

@@ -0,0 +1,51 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { render, screen, userEvent } from "@testing-library/react-native";
+import { SelectContent } from "./SelectContent";
+import { SelectItem } from "./SelectItem";
+import { SelectTrigger } from "./SelectTrigger";
+import { SelectRoot } from "../SelectRoot";
+import { SelectPrimitive } from "../../primitives/Select";
+import { PortalHostWrapper } from "../../utils/test";
+const user = userEvent.setup();
+beforeAll(() => {
+    var _a;
+    const MockNativeMethods = require("react-native/jest/MockNativeMethods");
+    const mockedMethods = (_a = MockNativeMethods.default) !== null && _a !== void 0 ? _a : MockNativeMethods;
+    mockedMethods.measure.mockImplementation((callback) => {
+        callback(0, 0, 320, 48, 20, 100);
+    });
+});
+function renderContent() {
+    return render(React.createElement(SelectRoot, null,
+        React.createElement(SelectTrigger, null,
+            React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+        React.createElement(SelectContent, null,
+            React.createElement(SelectItem, { value: "tor", label: "Toronto" }),
+            React.createElement(SelectItem, { value: "van", label: "Vancouver" }))), { wrapper: PortalHostWrapper });
+}
+describe("Select.Content", () => {
+    it("renders nothing until the trigger opens it", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderContent();
+        expect(screen.queryByText("Toronto")).toBeNull();
+        yield user.press(screen.getByTestId("ATL-Select-Trigger"));
+        expect(screen.getByText("Toronto")).toBeDefined();
+    }));
+    it("folds the portal, overlay, and viewport into one part", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderContent();
+        yield user.press(screen.getByTestId("ATL-Select-Trigger"));
+        // The single Select.Content renders the tap-outside overlay plus the items
+        // (portaled + scrolled via the folded Viewport).
+        expect(screen.getByTestId("ATL-Select-Overlay")).toBeDefined();
+        expect(screen.getByText("Toronto")).toBeDefined();
+        expect(screen.getByText("Vancouver")).toBeDefined();
+    }));
+});

package/dist/src/Select/components/SelectFieldContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const noop = () => undefined;
+export const SelectFieldContext = createContext({
+    labelPlacement: "inside",
+    registerLabel: noop,
+    unregisterLabel: noop,
+});
+export function useSelectFieldState() {
+    return useContext(SelectFieldContext);
+}

package/dist/src/Select/components/SelectItem.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { View } from "react-native";
+import { useStyles } from "./SelectItem.style";
+import { SelectPrimitive } from "../../primitives/Select";
+import { Icon } from "../../Icon";
+/**
+ * An option row. Auto-composes the label + a default checkmark from its
+ * `value` / `label` / `disabled` props, and places the `prefix` / `suffix` slot
+ * content around the label (prefix → label → suffix → marker). `indicator`
+ * overrides the default checkmark; `disabled` greys the label and blocks
+ * selection.
+ */
+export function SelectItem({ value, label, disabled, closeOnPress, prefix, suffix, indicator, }) {
+    return (React.createElement(SelectPrimitive.Item, { value: value, label: label, disabled: disabled, closeOnPress: closeOnPress },
+        prefix,
+        React.createElement(SelectPrimitive.ItemText, { disabled: disabled }),
+        suffix,
+        React.createElement(SelectPrimitive.ItemIndicator, null, indicator !== null && indicator !== void 0 ? indicator : React.createElement(Icon, { name: "checkmark" }))));
+}
+/** Styled leading slot — pass to `Select.Item`'s `prefix` prop. */
+export function SelectItemPrefix({ children, }) {
+    const styles = useStyles();
+    return React.createElement(View, { style: styles.slot }, children);
+}
+/** Styled trailing slot — pass to `Select.Item`'s `suffix` prop. */
+export function SelectItemSuffix({ children, }) {
+    const styles = useStyles();
+    return React.createElement(View, { style: styles.slot }, children);
+}

package/dist/src/Select/components/SelectItem.style.js

@@ -0,0 +1,6 @@
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(() => ({
+    slot: {
+        justifyContent: "center",
+    },
+}));

package/dist/src/Select/components/SelectItem.test.js

@@ -0,0 +1,98 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { render, screen, userEvent } from "@testing-library/react-native";
+import { SelectItem, SelectItemPrefix, SelectItemSuffix } from "./SelectItem";
+import { SelectTrigger } from "./SelectTrigger";
+import { SelectRoot } from "../SelectRoot";
+import { SelectPrimitive } from "../../primitives/Select";
+import { Icon } from "../../Icon";
+import { Text } from "../../Text";
+import { PortalHostWrapper } from "../../utils/test";
+import { tokens } from "../../utils/design";
+const user = userEvent.setup();
+beforeAll(() => {
+    var _a;
+    const MockNativeMethods = require("react-native/jest/MockNativeMethods");
+    const mockedMethods = (_a = MockNativeMethods.default) !== null && _a !== void 0 ? _a : MockNativeMethods;
+    mockedMethods.measure.mockImplementation((callback) => {
+        callback(0, 0, 320, 48, 20, 100);
+    });
+});
+function renderItems(items, defaultValue, onValueChange) {
+    return render(React.createElement(SelectRoot, { defaultValue: defaultValue, onValueChange: onValueChange },
+        React.createElement(SelectTrigger, null,
+            React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+        React.createElement(SelectPrimitive.Portal, null,
+            React.createElement(SelectPrimitive.Overlay, null),
+            React.createElement(SelectPrimitive.Content, null,
+                React.createElement(SelectPrimitive.Viewport, null, items)))), { wrapper: PortalHostWrapper });
+}
+function openSelect() {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield user.press(screen.getByTestId("ATL-Select-Trigger"));
+    });
+}
+describe("Select.Item", () => {
+    it("renders the option label from the label prop", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderItems(React.createElement(SelectItem, { value: "tor", label: "Toronto" }));
+        yield openSelect();
+        expect(screen.getByText("Toronto")).toBeDefined();
+    }));
+    it("shows the default checkmark on the selected row only", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderItems(React.createElement(React.Fragment, null,
+            React.createElement(SelectItem, { value: "tor", label: "Toronto" }),
+            React.createElement(SelectItem, { value: "van", label: "Vancouver" })), { value: "tor", label: "Toronto" });
+        yield openSelect();
+        // The indicator self-hides on unselected rows, so only the selected row's
+        // checkmark is in the tree.
+        expect(screen.getAllByTestId("checkmark")).toHaveLength(1);
+    }));
+    it("renders prefix and suffix slots around the label", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderItems(React.createElement(SelectItem, { value: "tor", label: "Toronto", prefix: React.createElement(SelectItemPrefix, null,
+                React.createElement(Icon, { name: "home" })), suffix: React.createElement(SelectItemSuffix, null,
+                React.createElement(Text, null, "ON")) }));
+        yield openSelect();
+        expect(screen.getByTestId("home")).toBeDefined();
+        expect(screen.getByText("ON")).toBeDefined();
+        expect(screen.getByText("Toronto")).toBeDefined();
+    }));
+    it("shows the suffix alongside the checkmark on the selected row", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderItems(React.createElement(SelectItem, { value: "tor", label: "Toronto", suffix: React.createElement(SelectItemSuffix, null,
+                React.createElement(Text, null, "ON")) }), { value: "tor", label: "Toronto" });
+        yield openSelect();
+        // The suffix coexists with the selected-state marker (it doesn't replace it).
+        expect(screen.getByText("ON")).toBeDefined();
+        expect(screen.getByTestId("checkmark")).toBeDefined();
+    }));
+    it("overrides the default checkmark via the indicator prop", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderItems(React.createElement(SelectItem, { value: "tor", label: "Toronto", indicator: React.createElement(Icon, { name: "starFill" }) }), { value: "tor", label: "Toronto" });
+        yield openSelect();
+        expect(screen.getByTestId("starFill")).toBeDefined();
+        expect(screen.queryByTestId("checkmark")).toBeNull();
+    }));
+    it("selects an option on press (selection flows through the sugar)", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onValueChange = jest.fn();
+        renderItems(React.createElement(SelectItem, { value: "tor", label: "Toronto" }), undefined, onValueChange);
+        yield openSelect();
+        yield user.press(screen.getByText("Toronto"));
+        expect(onValueChange).toHaveBeenCalledWith({
+            value: "tor",
+            label: "Toronto",
+        });
+    }));
+    it("greys a disabled option's label", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderItems(React.createElement(SelectItem, { value: "van", label: "Vancouver", disabled: true }));
+        yield openSelect();
+        expect(screen.getByText("Vancouver")).toHaveStyle({
+            color: tokens["color-disabled"],
+        });
+    }));
+});

package/dist/src/Select/components/SelectLabel.js

@@ -0,0 +1,29 @@
+import React, { useLayoutEffect } from "react";
+import { useSelectFieldState } from "./SelectFieldContext";
+import { Text } from "../../Text";
+/**
+ * The field label. Rather than render in place, it **registers** its `children`
+ * (and, when a string, the trigger's accessible name) into `Select.Root`, which
+ * renders the content in the slot `labelPlacement` selects. Renders nothing where
+ * it is composed. See `Select.guide.md`.
+ */
+export function SelectLabel({ children }) {
+    const { registerLabel, unregisterLabel } = useSelectFieldState();
+    useLayoutEffect(() => {
+        registerLabel(children, typeof children === "string" ? children : undefined);
+        return unregisterLabel;
+    }, [children, registerLabel, unregisterLabel]);
+    return null;
+}
+/**
+ * Internal renderer for the registered label content, shared by the above slot
+ * (`Select.Root`) and the inside slot (`Select.Trigger`). Sizes itself from
+ * `labelPlacement` (smaller when `inside`). Hidden from assistive tech — the
+ * trigger carries the accessible name.
+ */
+export function FieldLabel() {
+    const { labelContent, labelPlacement } = useSelectFieldState();
+    if (labelContent == null)
+        return null;
+    return typeof labelContent === "string" ? (React.createElement(Text, { variation: "subdued", level: labelPlacement === "inside" ? "textSupporting" : undefined, maxLines: "single", hideFromScreenReader: true }, labelContent)) : (React.createElement(React.Fragment, null, labelContent));
+}