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

package/dist/docs/AtlantisThemeContext/AtlantisThemeContext.md

@@ -116,6 +116,46 @@ function ThemedComponent() {
 }
 ```
 
+### Cross-tab theme sync (Web Only)
+
+The provider can keep the theme in sync across a user's open browser tabs. This
+is opt-in: pass the `localStorage` key your app writes to as the `storageKey`
+prop. The provider then listens for
+[`storage` events](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event)
+on that key and applies theme changes from other tabs. The `storage` event fires
+only in tabs *other* than the one that wrote the value, so there's no feedback
+loop.
+
+**Your app is responsible for writing to `localStorage`** when the theme changes
+— Atlantis only handles the listen-and-react side.
+
+```tsx
+<AtlantisThemeContextProvider storageKey="my_app_theme">
+  <ThemedComponent />
+</AtlantisThemeContextProvider>
+```
+
+```tsx
+// Theme toggle — write to the same key after calling updateTheme
+import { updateTheme } from "@jobber/components/AtlantisThemeContext";
+
+function toggleTheme(newTheme: "light" | "dark") {
+  updateTheme(newTheme); // updates all providers in this tab immediately
+
+  try {
+    localStorage.setItem("my_app_theme", newTheme); // signals other tabs
+  } catch {
+    // localStorage unavailable (e.g. private mode) — degrades gracefully
+  }
+}
+```
+
+Omit `storageKey` and no `storage` listener is added, keeping the previous
+within-tab-only behavior. Multiple dynamic providers on the same page all share
+the same internal store, so a single provider with a `storageKey` is enough — a
+cross-tab signal updates every dynamic provider at once. Providers mounted with
+`dangerouslyOverrideTheme` are unaffected.
+
 ### Forcing a theme for an AtlantisThemeContextProvider
 
 In some scenarios you may want to force a theme for specific components

package/dist/docs/Chip/Chip.md

@@ -238,8 +238,8 @@ export function ChipInvalidExample(
   single-select, multi-select, and add/dismiss functionality "out of the box"
 * [FilterPicker](/components/FilterPicker) is most commonly triggered by a Chip,
   but is a separate component
-* [Select](../Select/Select.md) is a simpler single-select "dropdown" that
-  presents as a form element and should be preferred in forms
+* [LegacySelect](/components/LegacySelect) is a simpler single-select "dropdown"
+  that presents as a form element and should be preferred in forms
 * [RadioGroup](/components/RadioGroup) should be used to allow the user to
   select "one-of-many" items (single-select) and the labels for the items are
   longer than 1 or 2 words.

package/dist/docs/Colors/Colors.md

@@ -84,6 +84,19 @@ different.
 Used by the `--shadow-focus` property to indicate that an element has received
 focus. Avoid using `--color-focus` directly on UI elements.
 
+### Data Visualization
+
+Use these colors to distinguish values in charts and other data visualizations.
+They respond to theming and should be preferred over base color tokens.
+
+#### Categorical
+
+Use categorical colors to distinguish unrelated groups or series. Use `subtle`
+or `bold` when multiple treatments of the first categorical color need to sit
+together in the same visualization.
+
+Use additional categorical colors for supporting data series.
+
 ### Status
 
 Use these colors in labels, icons, filters, alerts, and other elements where

package/dist/docs/ContentOverlay/ContentOverlay.md

@@ -50,6 +50,9 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `children` | `ReactNode` | Yes | — | Content to be passed into the overlay |
 | `accessibilityLabel` | `string` | No | `"Close {title} modal"` | Optional accessibilityLabel describing the overlay. This will read out when the overlay is opened. |
 | `adjustToContentHeight` | `boolean` | No | `false` | If true, automatically adjusts the overlay height to the content height. This will disable the ability to drag the ov... |
+| `allowDragWithBeforeExit` | `boolean` | No | `false` | When `true`, `onBeforeExit` intercepts the dismiss button and back press but does not disable drag. Drag-to-dismiss b... |
+| `enableContentPanningGesture` | `boolean` | No | — | Whether pan on the content area drags the sheet. Set `false` to let nested scrollables own the gesture. Defaults to t... |
+| `enablePanDownToClose` | `boolean` | No | — | Whether panning down on the content area closes the sheet. Set false to prevent the sheet from being closed by pannin... |
 | `fullScreen` | `boolean` | No | `false` | Force overlay height to fill the screen. Width not impacted. |
 | `isDraggable` | `boolean` | No | `true` | If false, hides the handle and turns off dragging. |
 | `keyboardShouldPersistTaps` | `boolean` | No | `false` | Allows taps to be registered behind keyboard if enabled |
@@ -61,4 +64,5 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `ref` | `Ref<{ open?: () => void; close?: () => void; }>` | No | — | Ref to the content overlay component. |
 | `scrollEnabled` | `boolean` | No | `false` | Enables scrolling in the content body of overlay |
 | `showDismiss` | `boolean` | No | `false` | Display the dismiss button in the header of the overlay. |
+| `snapPoints` | `(string | number)[]` | No | — | Explicit snap points for the overlay (percentages or pixel values). When provided, `adjustToContentHeight` is ignored... |
 | `title` | `string` | No | — | Title of overlay, appears in the header next to the close button. |

package/dist/docs/Form/Form.md

@@ -18,11 +18,11 @@ have a `value` and `onChange` prop.
 ### Inputs
 
 Form can accept various inputs and selection elements such as (but not limited
-to) [InputText](../InputText/InputText.md), [Select](../Select/Select.md),
-[Switch](../Switch/Switch.md), [Checkbox](../Checkbox/Checkbox.md), and
-[Chips](/components/Chips). They should be placed [Cards](../Card/Card.md) to
-indicate grouping when relevant, and groups of Cards can be spaced appropriately
-using ContentSection.
+to) [InputText](../InputText/InputText.md),
+[LegacySelect](/components/LegacySelect), [Switch](../Switch/Switch.md),
+[Checkbox](../Checkbox/Checkbox.md), and [Chips](/components/Chips). They should be
+placed [Cards](../Card/Card.md) to indicate grouping when relevant, and groups
+of Cards can be spaced appropriately using ContentSection.
 
 ### Save Button label
 

package/dist/docs/Icon/Icon.md

@@ -417,6 +417,7 @@ export function IconSizesExample() {
 |      | `future`         |
 |      | `history`        |
 |      | `import`         |
+|      | `merge`          |
 |      | `redo`           |
 |      | `remove`         |
 |      | `search`         |

package/dist/docs/InputTime/InputTime.md

@@ -29,6 +29,14 @@ number automatically fills in the rest of the time. For example, typing `2` will
 fill in `2:00 PM` and typing `1` waits for a few milliseconds in case the user
 wants to type `10`, `11`, or `12`.
 
+## Sizes and the placeholder
+
+Consistent with other inputs, `size="small"` does not show the floating mini
+label. The placeholder appears while the field is empty and unfocused, and is
+hidden while the field is being edited or has a value, keeping the field at its
+small height throughout. The default and `large` sizes float the placeholder up
+as a mini label while editing or once a value is set.
+
 
 ## Props
 

package/dist/docs/ProgressBar/ProgressBar.md

@@ -1,5 +1,14 @@
 # Progress Bar
 
+> **Deprecated.** Use [ProgressIndicator](/components/ProgressIndicator) for new
+> work. `ProgressIndicator` is the supported determinate progress indicator
+> going forward — it offers the same semantic with a cleaner prop surface
+> (`value` / `max` instead of `currentStep` / `totalSteps`,
+> `variation="continuous"` instead of `"progress"`, plain `className` / `style`
+> instead of `UNSAFE_*`), theme-adaptive tokens, and a unified
+> `<div role="progressbar">` structure across continuous and stepped variations.
+> `ProgressBar` continues to work unchanged for existing call sites.
+
 A ProgressBar is a visual indicator of how close something is to completion.
 
 ## Design & usage guidelines

package/dist/docs/empty-states/empty-states.md

@@ -21,6 +21,7 @@ for the “emptiness” may include, but are not limited to…
 * Search results with no match
 * An error has resulted in the user not being able to access content they
   otherwise could
+* A specific field doesn't have a value (for example, a custom field that the user hasn't populated)
 
 ## Solution
 
@@ -63,6 +64,34 @@ a single Banner can look out of place.
   </Box>
 ```
 
+### Field-level empty states
+
+When a field doesn't have a value, use a dash to indicate the lack of a value.
+This provides:
+
+* confirmation that nothing was entered
+* confirmation that something *can* be entered there should the information require an update
+
+```tsx
+<Card>
+    <Content>
+      <Heading level={4}>Additional details</Heading>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Preferred service date</Text>
+        <Text>June 25, 2026</Text>
+      </Stack>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Gate code</Text>
+        <Text>—</Text>
+      </Stack>
+      <Stack gap="smallest">
+        <Text size="small" variation="subdued">Additional requests</Text>
+        <Text>—</Text>
+      </Stack>
+    </Content>
+  </Card>
+```
+
 ### When the user can't add content
 
 When a card is empty, and there is no way for the user to add content, you

package/dist/docs/index.md

@@ -52,7 +52,6 @@
 [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.107.0",
+    "version": "0.107.1-select-nat-3a2699a.22+3a2699a2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -73,7 +73,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.105.0",
+        "@jobber/design": "0.105.1-select-nat-3a2699a.24+3a2699a2",
         "@jobber/hooks": "2.21.0",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "5e02a8ecc5f282d152c92e18dde04a27d401ecf5"
+    "gitHead": "3a2699a221713d3cf972170175713d309245b653"
 }

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -23,7 +23,7 @@ import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
+import { AtlantisThemeContextProvider, useAtlantisTheme, } from "../AtlantisThemeContext";
 /**
  * Signals whether keyboard handling inside a ContentOverlay is delegated to
  * a keyboard-aware scroll view (e.g. BottomSheetKeyboardAwareScrollView).
@@ -46,7 +46,7 @@ function getModalBackgroundColor(variation, tokens) {
     }
 }
 // eslint-disable-next-line max-statements
-export function ContentOverlay({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, loading = false, ref, }) {
+export function ContentOverlay({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, allowDragWithBeforeExit = false, enablePanDownToClose, enableContentPanningGesture, snapPoints: customSnapPoints, loading = false, ref, }) {
     const insets = useSafeAreaInsets();
     const { width: windowWidth } = useWindowDimensions();
     const bottomSheetModalRef = useRef(null);
@@ -54,13 +54,14 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const [currentPosition, setCurrentPosition] = useState(-1);
     const styles = useStyles();
     const { t } = useAtlantisI18n();
-    const { tokens } = useAtlantisTheme();
+    const { theme, tokens } = useAtlantisTheme();
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
     const behavior = computeContentOverlayBehavior({
         fullScreen,
         adjustToContentHeight,
         isDraggable,
         hasOnBeforeExit: onBeforeExit !== undefined,
+        allowDragWithBeforeExit,
         showDismiss,
     }, {
         isScreenReaderEnabled,
@@ -76,12 +77,15 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const scrollViewRef = useRef(null);
     // enableDynamicSizing will add another snap point of the content height
     const snapPoints = useMemo(() => {
+        if (customSnapPoints && customSnapPoints.length > 0) {
+            return customSnapPoints;
+        }
         // There is a bug with "restore" behavior after keyboard is dismissed.
         // https://github.com/gorhom/react-native-bottom-sheet/issues/2465
         // providing a 100% snap point "fixes" it for now, but there is an approved PR to fix it
         // that just needs to be merged and released: https://github.com/gorhom/react-native-bottom-sheet/pull/2511
         return ["100%"];
-    }, []);
+    }, [customSnapPoints]);
     const onCloseController = () => {
         var _a;
         if (!onBeforeExit) {
@@ -174,12 +178,13 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const backdropComponent = useMemo(() => function ContentOverlayBackdrop(props) {
         return (React.createElement(Backdrop, Object.assign({}, props, { pressBehavior: isCloseableOnOverlayTap ? "close" : "none" })));
     }, [isCloseableOnOverlayTap]);
-    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: effectiveIsDraggable, enableContentPanningGesture: effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
-        React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
-            renderHeader(),
-            React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,
-            renderHeader(),
-            React.createElement(View, { style: { paddingBottom: insets.bottom }, testID: "ATL-Overlay-Children" }, children))))));
+    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: enablePanDownToClose !== null && enablePanDownToClose !== void 0 ? enablePanDownToClose : effectiveIsDraggable, enableContentPanningGesture: enableContentPanningGesture !== null && enableContentPanningGesture !== void 0 ? enableContentPanningGesture : effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: !customSnapPoints && behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: theme },
+            React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
+                renderHeader(),
+                React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,
+                renderHeader(),
+                React.createElement(View, { style: { paddingBottom: insets.bottom }, testID: "ATL-Overlay-Children" }, children)))))));
 }
 function Backdrop(bottomSheetBackdropProps) {
     const styles = useStyles();

package/dist/src/ContentOverlay/computeContentOverlayBehavior.js

@@ -42,14 +42,17 @@ function computeInitialHeight(config, isDraggable) {
 }
 /**
  * Draggability determination:
- * - hasOnBeforeExit: true → false (silent override, regardless of isDraggable prop)
+ * - hasOnBeforeExit: true && !allowDragWithBeforeExit → false (legacy override)
+ * - hasOnBeforeExit: true && allowDragWithBeforeExit → use isDraggable prop value
  * - Otherwise → use isDraggable prop value
  *
- * This silent override exists because onBeforeExit needs to intercept close attempts,
- * and dragging would bypass that interception.
+ * The legacy override exists because onBeforeExit needs to intercept close
+ * attempts, and dragging would bypass that interception. Consumers that
+ * explicitly accept the asymmetry (e.g. button-press confirmation,
+ * drag-dismiss silent) can opt out via `allowDragWithBeforeExit`.
  */
 function computeIsDraggable(config) {
-    if (config.hasOnBeforeExit) {
+    if (config.hasOnBeforeExit && !config.allowDragWithBeforeExit) {
         return false;
     }
     return config.isDraggable;

package/dist/src/ContentOverlay/computeContentOverlayBehavior.test.js

@@ -5,6 +5,7 @@ const defaultConfig = {
     adjustToContentHeight: false,
     isDraggable: true,
     hasOnBeforeExit: false,
+    allowDragWithBeforeExit: false,
     showDismiss: false,
 };
 const defaultState = {
@@ -69,6 +70,36 @@ describe("computeContentOverlayBehavior", () => {
             const result = computeContentOverlayBehavior(config, state);
             expect(result.isDraggable).toBe(false);
         });
+        it("respects isDraggable=true when onBeforeExit is present and allowDragWithBeforeExit=true", () => {
+            const config = aConfig({
+                isDraggable: true,
+                hasOnBeforeExit: true,
+                allowDragWithBeforeExit: true,
+            });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(true);
+        });
+        it("respects isDraggable=false when onBeforeExit is present and allowDragWithBeforeExit=true", () => {
+            const config = aConfig({
+                isDraggable: false,
+                hasOnBeforeExit: true,
+                allowDragWithBeforeExit: true,
+            });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(false);
+        });
+        it("still overrides to false when onBeforeExit is present and allowDragWithBeforeExit=false (default)", () => {
+            const config = aConfig({
+                isDraggable: true,
+                hasOnBeforeExit: true,
+                allowDragWithBeforeExit: false,
+            });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(false);
+        });
     });
     describe("showDismiss", () => {
         it("returns true when showDismiss prop is true", () => {

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