@jobber/components-native 0.107.0 → 0.107.1-select-nat-3a2699a.22

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

@@ -0,0 +1,150 @@
+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("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/SelectComposableTypes.js

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

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

@@ -0,0 +1,24 @@
+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 { SelectPrimitive } from "../../primitives/Select";
+/**
+ * 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"]);
+    return (React.createElement(SelectPrimitive.Portal, null,
+        React.createElement(SelectPrimitive.Overlay, null),
+        React.createElement(SelectPrimitive.Content, Object.assign({}, props),
+            React.createElement(SelectPrimitive.Viewport, null, children))));
+}

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

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { View } from "react-native";
+import { useRootContext } from "@rn-primitives/select";
+import { useStyles } from "./SelectTrigger.style";
+import { useSelectFieldState } from "./SelectFieldContext";
+import { FieldLabel } from "./SelectLabel";
+import { SelectPrimitive } from "../../primitives/Select";
+import { Icon } from "../../Icon";
+/**
+ * The styled field trigger: composes the chevron, the resolved `invalid` styling,
+ * the accessible name, the inside label placement, and the static `readOnly`
+ * presentation over `SelectPrimitive.Trigger`. State comes from `Select.Root`
+ * (field context) and the primitive root context.
+ */
+export function SelectTrigger({ children, testID, ref, }) {
+    const styles = useStyles();
+    const { invalid, readOnly, accessibilityLabel, labelPlacement } = useSelectFieldState();
+    const { open, value, disabled } = useRootContext();
+    const isDisabled = disabled !== null && disabled !== void 0 ? disabled : false;
+    // `disabled` wins over `readOnly`.
+    const isReadOnly = !isDisabled && (readOnly !== null && readOnly !== void 0 ? readOnly : false);
+    const content = (React.createElement(View, { style: styles.content },
+        labelPlacement === "inside" && React.createElement(FieldLabel, null),
+        children));
+    if (isReadOnly) {
+        return (React.createElement(View, { testID: computeTriggerTestID(testID), accessible: true, accessibilityLabel: accessibilityLabel, accessibilityValue: (value === null || value === void 0 ? void 0 : value.label) ? { text: value.label } : undefined, style: styles.readOnly }, content));
+    }
+    return (React.createElement(SelectPrimitive.Trigger, { ref: ref, testID: testID, invalid: invalid, accessibilityLabel: accessibilityLabel },
+        content,
+        React.createElement(Chevron, { open: open, disabled: isDisabled })));
+}
+/** Trailing chevron: tinted `iconSecondary`, greyed when disabled, rotated when open. */
+function Chevron({ open, disabled, }) {
+    return (React.createElement(View, { style: { transform: [{ rotate: open ? "180deg" : "0deg" }] } },
+        React.createElement(Icon, { name: "arrowDown", color: disabled ? "disabled" : "iconSecondary" })));
+}
+function computeTriggerTestID(testID) {
+    return testID ? `ATL-${testID}-Select-Trigger` : "ATL-Select-Trigger";
+}

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

@@ -0,0 +1,19 @@
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+export const useStyles = buildThemedStyles(tokens => ({
+    content: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    // Static read-only surface — mirrors the trigger shape with a subtle fill, no chevron.
+    readOnly: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens["space-small"],
+        minHeight: tokens["space-largest"] + tokens["space-small"],
+        paddingHorizontal: tokens["space-slim"],
+        backgroundColor: tokens["color-surface--background--subtle"],
+        borderWidth: tokens["border-base"],
+        borderColor: tokens["color-border"],
+        borderRadius: tokens["radius-base"],
+    },
+}));

package/dist/src/Select/index.js

@@ -1,2 +1,28 @@
-export { Select, Option } from "./Select";
+import { Option, Select as SelectBase } from "./Select";
+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";
+/**
+ * Attaches the composable `Select.*` parts as statics on the existing callable
+ * `Select`. 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.
+ */
+const Select = Object.assign(SelectBase, {
+    Root: SelectRoot,
+    Trigger: SelectTrigger,
+    Value: SelectPrimitive.Value,
+    Label: SelectLabel,
+    Content: SelectContent,
+    Item: SelectItem,
+    ItemPrefix: SelectItemPrefix,
+    ItemSuffix: SelectItemSuffix,
+    Group: SelectPrimitive.Group,
+    GroupLabel: SelectPrimitive.Label,
+    Separator: SelectPrimitive.Separator,
+});
+export { Select, Option };
 export { SelectPressable } from "./components/SelectPressable";

package/dist/src/utils/meta/meta.json

@@ -60,6 +60,17 @@
         "Option",
         "ProgressBar",
         "Select",
+        "Select.Content",
+        "Select.Group",
+        "Select.GroupLabel",
+        "Select.Item",
+        "Select.ItemPrefix",
+        "Select.ItemSuffix",
+        "Select.Label",
+        "Select.Root",
+        "Select.Separator",
+        "Select.Trigger",
+        "Select.Value",
         "SelectPressable",
         "StatusLabel",
         "Switch",