@jobber/components 8.22.0 → 8.23.0

package/dist/SelectPrimitive-cjs.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var React = require('react');
+var classnames = require('classnames');
+var Icon = require('./Icon-cjs.js');
+var OverlaySeparator = require('./OverlaySeparator-cjs.js');
+var SelectGroupLabel = require('./SelectGroupLabel-cjs.js');
+
+var styles = {"trigger":"WQiJQH4jadQ-","value":"P2HhjOjxY34-","iconWrapper":"cxgFUCKcXcw-","iconRotate":"_3BEK4Z1gGis-","positioner":"g221yZJtRrU-","popup":"vifRnCQ18ss-","list":"WsOmdkQ0SWU-","item":"wQ2wXu1YH-k-","itemText":"_--Vi-17OUiU-","itemIndicator":"CfjooR3I8Jc-","separator":"lI5-MyBERFY-","group":"_21z9KBWR06w-","groupLabel":"ZhtKkgZiSQI-","spinning":"sIXiKKpdSj8-"};
+
+function mergeClassName(baseClassName, className) {
+    if (typeof className === "function") {
+        return (state) => classnames(baseClassName, className(state));
+    }
+    return classnames(baseClassName, className);
+}
+
+/**
+ * The offset (px) between the trigger bottom edge and the popup top edge,
+ * matching the Menu dropdown spacing.
+ */
+const SELECT_OFFSET = 6;
+// ─── Trigger ─────────────────────────────────────────────────────────────────
+function SelectPrimitiveTrigger(_a) {
+    var { className, children } = _a, props = tslib_es6.__rest(_a, ["className", "children"]);
+    return (React.createElement(SelectGroupLabel.SelectTrigger, Object.assign({ className: mergeClassName(styles.trigger, className) }, props),
+        children,
+        React.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
+            React.createElement("span", { className: styles.iconRotate },
+                React.createElement(Icon.Icon, { color: "greyBlue", name: "arrowDown", size: "base" })))));
+}
+// ─── Value ───────────────────────────────────────────────────────────────────
+function SelectPrimitiveValue(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectValue, Object.assign({ className: mergeClassName(styles.value, className) }, props)));
+}
+// ─── Positioner ───────────────────────────────────────────────────────────────
+function SelectPrimitivePositioner(_a) {
+    var { className, sideOffset = SELECT_OFFSET, alignItemWithTrigger = false } = _a, props = tslib_es6.__rest(_a, ["className", "sideOffset", "alignItemWithTrigger"]);
+    return (React.createElement(SelectGroupLabel.SelectPositioner, Object.assign({ className: mergeClassName(styles.positioner, className), sideOffset: sideOffset, alignItemWithTrigger: alignItemWithTrigger }, props)));
+}
+// ─── Popup ────────────────────────────────────────────────────────────────────
+function SelectPrimitivePopup(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectPopup, Object.assign({ className: mergeClassName(styles.popup, className) }, props)));
+}
+// ─── List ─────────────────────────────────────────────────────────────────────
+function SelectPrimitiveList(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectList, Object.assign({ className: mergeClassName(styles.list, className) }, props)));
+}
+// ─── Item ─────────────────────────────────────────────────────────────────────
+function SelectPrimitiveItem(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectItem, Object.assign({ className: mergeClassName(styles.item, className) }, props)));
+}
+// ─── ItemText ─────────────────────────────────────────────────────────────────
+function SelectPrimitiveItemText(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectItemText, Object.assign({ className: mergeClassName(styles.itemText, className) }, props)));
+}
+// ─── ItemIndicator ────────────────────────────────────────────────────────────
+function SelectPrimitiveItemIndicator(_a) {
+    var { className, children } = _a, props = tslib_es6.__rest(_a, ["className", "children"]);
+    return (React.createElement(SelectGroupLabel.SelectItemIndicator, Object.assign({ keepMounted: true, className: mergeClassName(styles.itemIndicator, className) }, props), children !== null && children !== void 0 ? children : React.createElement(Icon.Icon, { color: "icon", name: "checkmark", size: "base" })));
+}
+// ─── Group ────────────────────────────────────────────────────────────────────
+function SelectPrimitiveGroup(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectGroup, Object.assign({ className: mergeClassName(styles.group, className) }, props)));
+}
+// ─── GroupLabel ───────────────────────────────────────────────────────────────
+function SelectPrimitiveGroupLabel(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(SelectGroupLabel.SelectGroupLabel, Object.assign({ className: mergeClassName(styles.groupLabel, className) }, props)));
+}
+// ─── Separator ────────────────────────────────────────────────────────────────
+function SelectPrimitiveSeparator(_a) {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(OverlaySeparator.OverlaySeparator, Object.assign({ className: classnames(styles.separator, className), "data-testid": "ATL-SelectPrimitive-Separator" }, props)));
+}
+// ─── Display names ───────────────────────────────────────────────────────────
+SelectPrimitiveTrigger.displayName = "SelectPrimitive.Trigger";
+SelectPrimitiveValue.displayName = "SelectPrimitive.Value";
+SelectPrimitivePositioner.displayName = "SelectPrimitive.Positioner";
+SelectPrimitivePopup.displayName = "SelectPrimitive.Popup";
+SelectPrimitiveList.displayName = "SelectPrimitive.List";
+SelectPrimitiveItem.displayName = "SelectPrimitive.Item";
+SelectPrimitiveItemText.displayName = "SelectPrimitive.ItemText";
+SelectPrimitiveItemIndicator.displayName = "SelectPrimitive.ItemIndicator";
+SelectPrimitiveGroup.displayName = "SelectPrimitive.Group";
+SelectPrimitiveGroupLabel.displayName = "SelectPrimitive.GroupLabel";
+SelectPrimitiveSeparator.displayName = "SelectPrimitive.Separator";
+// ─── Compound export ─────────────────────────────────────────────────────────
+const SelectPrimitive = {
+    Root: SelectGroupLabel.SelectRoot,
+    Trigger: SelectPrimitiveTrigger,
+    Value: SelectPrimitiveValue,
+    Portal: SelectGroupLabel.SelectPortal,
+    Positioner: SelectPrimitivePositioner,
+    Popup: SelectPrimitivePopup,
+    List: SelectPrimitiveList,
+    Item: SelectPrimitiveItem,
+    ItemText: SelectPrimitiveItemText,
+    ItemIndicator: SelectPrimitiveItemIndicator,
+    Group: SelectPrimitiveGroup,
+    GroupLabel: SelectPrimitiveGroupLabel,
+    Separator: SelectPrimitiveSeparator,
+};
+
+exports.SelectPrimitive = SelectPrimitive;

package/dist/SelectPrimitive-es.js

@@ -0,0 +1,110 @@
+import { _ as __rest } from './tslib.es6-es.js';
+import React__default from 'react';
+import classnames from 'classnames';
+import { I as Icon } from './Icon-es.js';
+import { O as OverlaySeparator } from './OverlaySeparator-es.js';
+import { S as SelectRoot, a as SelectPortal, b as SelectTrigger, c as SelectValue, d as SelectPositioner, e as SelectPopup, f as SelectList, g as SelectItem, h as SelectItemText, i as SelectItemIndicator, j as SelectGroup, k as SelectGroupLabel } from './SelectGroupLabel-es.js';
+
+var styles = {"trigger":"WQiJQH4jadQ-","value":"P2HhjOjxY34-","iconWrapper":"cxgFUCKcXcw-","iconRotate":"_3BEK4Z1gGis-","positioner":"g221yZJtRrU-","popup":"vifRnCQ18ss-","list":"WsOmdkQ0SWU-","item":"wQ2wXu1YH-k-","itemText":"_--Vi-17OUiU-","itemIndicator":"CfjooR3I8Jc-","separator":"lI5-MyBERFY-","group":"_21z9KBWR06w-","groupLabel":"ZhtKkgZiSQI-","spinning":"sIXiKKpdSj8-"};
+
+function mergeClassName(baseClassName, className) {
+    if (typeof className === "function") {
+        return (state) => classnames(baseClassName, className(state));
+    }
+    return classnames(baseClassName, className);
+}
+
+/**
+ * The offset (px) between the trigger bottom edge and the popup top edge,
+ * matching the Menu dropdown spacing.
+ */
+const SELECT_OFFSET = 6;
+// ─── Trigger ─────────────────────────────────────────────────────────────────
+function SelectPrimitiveTrigger(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React__default.createElement(SelectTrigger, Object.assign({ className: mergeClassName(styles.trigger, className) }, props),
+        children,
+        React__default.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
+            React__default.createElement("span", { className: styles.iconRotate },
+                React__default.createElement(Icon, { color: "greyBlue", name: "arrowDown", size: "base" })))));
+}
+// ─── Value ───────────────────────────────────────────────────────────────────
+function SelectPrimitiveValue(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectValue, Object.assign({ className: mergeClassName(styles.value, className) }, props)));
+}
+// ─── Positioner ───────────────────────────────────────────────────────────────
+function SelectPrimitivePositioner(_a) {
+    var { className, sideOffset = SELECT_OFFSET, alignItemWithTrigger = false } = _a, props = __rest(_a, ["className", "sideOffset", "alignItemWithTrigger"]);
+    return (React__default.createElement(SelectPositioner, Object.assign({ className: mergeClassName(styles.positioner, className), sideOffset: sideOffset, alignItemWithTrigger: alignItemWithTrigger }, props)));
+}
+// ─── Popup ────────────────────────────────────────────────────────────────────
+function SelectPrimitivePopup(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectPopup, Object.assign({ className: mergeClassName(styles.popup, className) }, props)));
+}
+// ─── List ─────────────────────────────────────────────────────────────────────
+function SelectPrimitiveList(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectList, Object.assign({ className: mergeClassName(styles.list, className) }, props)));
+}
+// ─── Item ─────────────────────────────────────────────────────────────────────
+function SelectPrimitiveItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectItem, Object.assign({ className: mergeClassName(styles.item, className) }, props)));
+}
+// ─── ItemText ─────────────────────────────────────────────────────────────────
+function SelectPrimitiveItemText(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectItemText, Object.assign({ className: mergeClassName(styles.itemText, className) }, props)));
+}
+// ─── ItemIndicator ────────────────────────────────────────────────────────────
+function SelectPrimitiveItemIndicator(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React__default.createElement(SelectItemIndicator, Object.assign({ keepMounted: true, className: mergeClassName(styles.itemIndicator, className) }, props), children !== null && children !== void 0 ? children : React__default.createElement(Icon, { color: "icon", name: "checkmark", size: "base" })));
+}
+// ─── Group ────────────────────────────────────────────────────────────────────
+function SelectPrimitiveGroup(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectGroup, Object.assign({ className: mergeClassName(styles.group, className) }, props)));
+}
+// ─── GroupLabel ───────────────────────────────────────────────────────────────
+function SelectPrimitiveGroupLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(SelectGroupLabel, Object.assign({ className: mergeClassName(styles.groupLabel, className) }, props)));
+}
+// ─── Separator ────────────────────────────────────────────────────────────────
+function SelectPrimitiveSeparator(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React__default.createElement(OverlaySeparator, Object.assign({ className: classnames(styles.separator, className), "data-testid": "ATL-SelectPrimitive-Separator" }, props)));
+}
+// ─── Display names ───────────────────────────────────────────────────────────
+SelectPrimitiveTrigger.displayName = "SelectPrimitive.Trigger";
+SelectPrimitiveValue.displayName = "SelectPrimitive.Value";
+SelectPrimitivePositioner.displayName = "SelectPrimitive.Positioner";
+SelectPrimitivePopup.displayName = "SelectPrimitive.Popup";
+SelectPrimitiveList.displayName = "SelectPrimitive.List";
+SelectPrimitiveItem.displayName = "SelectPrimitive.Item";
+SelectPrimitiveItemText.displayName = "SelectPrimitive.ItemText";
+SelectPrimitiveItemIndicator.displayName = "SelectPrimitive.ItemIndicator";
+SelectPrimitiveGroup.displayName = "SelectPrimitive.Group";
+SelectPrimitiveGroupLabel.displayName = "SelectPrimitive.GroupLabel";
+SelectPrimitiveSeparator.displayName = "SelectPrimitive.Separator";
+// ─── Compound export ─────────────────────────────────────────────────────────
+const SelectPrimitive = {
+    Root: SelectRoot,
+    Trigger: SelectPrimitiveTrigger,
+    Value: SelectPrimitiveValue,
+    Portal: SelectPortal,
+    Positioner: SelectPrimitivePositioner,
+    Popup: SelectPrimitivePopup,
+    List: SelectPrimitiveList,
+    Item: SelectPrimitiveItem,
+    ItemText: SelectPrimitiveItemText,
+    ItemIndicator: SelectPrimitiveItemIndicator,
+    Group: SelectPrimitiveGroup,
+    GroupLabel: SelectPrimitiveGroupLabel,
+    Separator: SelectPrimitiveSeparator,
+};
+
+export { SelectPrimitive as S };

package/dist/ToolbarRootContext-cjs.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var useRenderElement = require('./useRenderElement-cjs.js');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ToolbarRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
+function useToolbarRootContext(optional) {
+  const context = React__namespace.useContext(ToolbarRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.' : useRenderElement.formatErrorMessage(69));
+  }
+  return context;
+}
+
+exports.useToolbarRootContext = useToolbarRootContext;

package/dist/ToolbarRootContext-es.js

@@ -0,0 +1,14 @@
+import { f as formatErrorMessage } from './useRenderElement-es.js';
+import * as React from 'react';
+
+const ToolbarRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
+function useToolbarRootContext(optional) {
+  const context = React.useContext(ToolbarRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.' : formatErrorMessage(69));
+  }
+  return context;
+}
+
+export { useToolbarRootContext as u };

package/dist/docs/SelectPrimitive/SelectPrimitive.md

@@ -0,0 +1,326 @@
+# SelectPrimitive
+
+`SelectPrimitive` is a set of styled wrappers around
+[Base UI's Select](https://base-ui.com/react/components/select) parts,
+pre-themed with Atlantis design tokens. It exposes every building block as a
+named sub-component so consumers compose their own field structure — no label,
+error, or description abstraction is included.
+
+> **⚠️ Experimental** — This is a primitive building block. It does not carry
+> the same stability guarantees as promoted Atlantis components. Reach out to
+> UXF before adopting it in product code.
+
+## Design & usage guidelines
+
+Use `SelectPrimitive` when you need a composable, fully-styled select that goes
+beyond what the native `<select>` element supports — e.g. custom item layouts,
+option groups with separators, or accessible keyboard navigation baked in
+through Base UI.
+
+For everyday form selects, prefer the standard `Select` component.
+
+### Composition
+
+Because `SelectPrimitive` provides no field abstraction, consumers wire up
+labels and other field structure themselves:
+
+```tsx
+<label htmlFor="my-select">Fruit</label>
+<SelectPrimitive.Root value={value} onValueChange={setValue}>
+  <SelectPrimitive.Trigger id="my-select">
+    <SelectPrimitive.Value placeholder="Select an option" />
+  </SelectPrimitive.Trigger>
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Positioner>
+      <SelectPrimitive.Popup>
+        <SelectPrimitive.List>
+          <SelectPrimitive.Item value="apple">
+            <SelectPrimitive.ItemText>Apple</SelectPrimitive.ItemText>
+            <SelectPrimitive.ItemIndicator />
+          </SelectPrimitive.Item>
+          <SelectPrimitive.Item value="banana">
+            <SelectPrimitive.ItemText>Banana</SelectPrimitive.ItemText>
+            <SelectPrimitive.ItemIndicator />
+          </SelectPrimitive.Item>
+        </SelectPrimitive.List>
+      </SelectPrimitive.Popup>
+    </SelectPrimitive.Positioner>
+  </SelectPrimitive.Portal>
+</SelectPrimitive.Root>
+```
+
+### Placeholder
+
+Pass a `placeholder` string to `SelectPrimitive.Value` to show hint text inside
+the trigger when no value is selected. It is replaced by the selected value once
+the user makes a choice.
+
+### Dropdown
+
+The dropdown popup mirrors the `Menu` component's visual style — same border,
+shadow, border-radius, and item hover/highlight states. The popup is always at
+least as wide as the trigger.
+
+A checkmark indicator (`SelectPrimitive.ItemIndicator`) appears on the currently
+selected item. Place it inside each `SelectPrimitive.Item` to opt in.
+
+## States
+
+### Basic
+
+```tsx
+<label htmlFor="basic-select">Fruit</label>
+<SelectPrimitive.Root value={value} onValueChange={setValue}>
+  <SelectPrimitive.Trigger id="basic-select">
+    <SelectPrimitive.Value placeholder="Select an option" />
+  </SelectPrimitive.Trigger>
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Positioner>
+      <SelectPrimitive.Popup>
+        <SelectPrimitive.List>
+          <SelectPrimitive.Item value="apple">
+            <SelectPrimitive.ItemText>Apple</SelectPrimitive.ItemText>
+            <SelectPrimitive.ItemIndicator />
+          </SelectPrimitive.Item>
+          <SelectPrimitive.Item value="banana">
+            <SelectPrimitive.ItemText>Banana</SelectPrimitive.ItemText>
+            <SelectPrimitive.ItemIndicator />
+          </SelectPrimitive.Item>
+        </SelectPrimitive.List>
+      </SelectPrimitive.Popup>
+    </SelectPrimitive.Positioner>
+  </SelectPrimitive.Portal>
+</SelectPrimitive.Root>
+```
+
+### Disabled
+
+Pass `disabled` to `SelectPrimitive.Root` to prevent interaction. The trigger
+border, background, and text colour all shift to the disabled palette.
+
+### Option grouping
+
+Use `SelectPrimitive.Group` and `SelectPrimitive.GroupLabel` to organise items
+under labelled sections, and `SelectPrimitive.Separator` to add a horizontal
+rule between groups.
+
+```tsx
+<SelectPrimitive.Root value={value} onValueChange={setValue}>
+  <SelectPrimitive.Trigger id="grouped-select">
+    <SelectPrimitive.Value placeholder="Choose produce" />
+  </SelectPrimitive.Trigger>
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Positioner>
+      <SelectPrimitive.Popup>
+        <SelectPrimitive.List>
+          <SelectPrimitive.Group>
+            <SelectPrimitive.GroupLabel>Fruits</SelectPrimitive.GroupLabel>
+            <SelectPrimitive.Item value="apple">
+              <SelectPrimitive.ItemText>Apple</SelectPrimitive.ItemText>
+              <SelectPrimitive.ItemIndicator />
+            </SelectPrimitive.Item>
+          </SelectPrimitive.Group>
+
+          <SelectPrimitive.Separator />
+
+          <SelectPrimitive.Group>
+            <SelectPrimitive.GroupLabel>Vegetables</SelectPrimitive.GroupLabel>
+            <SelectPrimitive.Item value="carrot">
+              <SelectPrimitive.ItemText>Carrot</SelectPrimitive.ItemText>
+              <SelectPrimitive.ItemIndicator />
+            </SelectPrimitive.Item>
+          </SelectPrimitive.Group>
+        </SelectPrimitive.List>
+      </SelectPrimitive.Popup>
+    </SelectPrimitive.Positioner>
+  </SelectPrimitive.Portal>
+</SelectPrimitive.Root>
+```
+
+
+## Configuration
+
+### Controlled vs uncontrolled
+
+`SelectPrimitive.Root` supports both controlled (`value` + `onValueChange`) and
+uncontrolled (`defaultValue`) usage.
+
+### Generic value type
+
+`SelectPrimitive.Root` is generic over the value type — the `value` and
+`onValueChange` props stay fully typed without extra casting.
+
+### Keyboard navigation
+
+Base UI provides full keyboard support out of the box:
+
+* **Arrow Up / Down** — move between items
+* **Enter / Space** — select the highlighted item
+* **Escape** — close the dropdown without changing the value
+* **Home / End** — jump to the first / last item
+
+### Form integration
+
+Pass `name` and `required` to `SelectPrimitive.Root` to participate in standard
+HTML form submission. The value is serialised via a hidden `<input>` managed by
+Base UI.
+
+## Sub-components
+
+| Sub-component                   | Purpose                                                                                                        |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `SelectPrimitive.Root`          | Provides state, value, and open/close control. No DOM element of its own.                                      |
+| `SelectPrimitive.Trigger`       | The button that opens the dropdown. Renders the chevron icon automatically.                                    |
+| `SelectPrimitive.Value`         | Displays the selected value (or placeholder) inside the trigger.                                               |
+| `SelectPrimitive.Portal`        | Renders the popup in a portal outside the current DOM subtree.                                                 |
+| `SelectPrimitive.Positioner`    | Positions the popup relative to the trigger using floating-ui.                                                 |
+| `SelectPrimitive.Popup`         | The styled dropdown container. Sized to at least the trigger's width.                                          |
+| `SelectPrimitive.List`          | Scrollable list container inside the popup.                                                                    |
+| `SelectPrimitive.Item`          | An individual selectable option. Accepts `value`, `disabled`, and `label`.                                     |
+| `SelectPrimitive.ItemText`      | The visible text label inside an item.                                                                         |
+| `SelectPrimitive.ItemIndicator` | A checkmark shown only on the selected item. Renders an Atlantis icon by default; pass `children` to override. |
+| `SelectPrimitive.Group`         | Groups items together under a common label.                                                                    |
+| `SelectPrimitive.GroupLabel`    | The heading rendered above a group.                                                                            |
+| `SelectPrimitive.Separator`     | A horizontal rule between groups.                                                                              |
+
+
+## Props
+
+### Web
+
+#### Portal
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectPortalState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `container` | `HTMLElement | ShadowRoot | RefObject<HTMLElement | ShadowRoot>` | No | — | A parent element to render the portal element into. |
+| `ref` | `Ref<HTMLDivElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectPortalState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### Root
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `actionsRef` | `RefObject<SelectRootActions>` | No | — | A ref to imperative actions. - `unmount`: When specified, the select will not be unmounted when closed. Instead, the ... |
+| `autoComplete` | `string` | No | — | Provides a hint to the browser for autofill. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attribu... |
+| `defaultOpen` | `boolean` | No | `false` | Whether the select popup is initially open.  To render a controlled select popup, use the `open` prop instead. |
+| `defaultValue` | `SelectValueType<Value, Multiple>` | No | — | The uncontrolled value of the select when it’s initially rendered.  To render a controlled select, use the `value` pr... |
+| `disabled` | `boolean` | No | `false` | Whether the component should ignore user interaction. |
+| `highlightItemOnHover` | `boolean` | No | `true` | Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differenti... |
+| `id` | `string` | No | — | The id of the Select. |
+| `inputRef` | `Ref<HTMLInputElement>` | No | — | A ref to access the hidden input element. |
+| `isItemEqualToValue` | `(itemValue: Value, value: Value) => boolean` | No | — | Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item... |
+| `items` | `Record<string, ReactNode> | readonly { label: ReactNode; value: any; }[] | readonly Group<any>[]` | No | — | Data structure of the items rendered in the select popup. When specified, `<Select.Value>` renders the label of the s... |
+| `itemToStringLabel` | `(itemValue: Value) => string` | No | — | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a strin... |
+| `itemToStringValue` | `(itemValue: Value) => string` | No | — | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a strin... |
+| `modal` | `boolean` | No | `true` | Determines if the select enters a modal state when open. - `true`: user interaction is limited to the select: documen... |
+| `multiple` | `boolean` | No | `false` | Whether multiple items can be selected. |
+| `name` | `string` | No | — | Identifies the field when a form is submitted. |
+| `onOpenChange` | `(open: boolean, eventDetails: SelectRootChangeEventDetails) => void` | No | — | Event handler called when the select popup is opened or closed. |
+| `onOpenChangeComplete` | `(open: boolean) => void` | No | — | Event handler called after any animations complete when the select popup is opened or closed. |
+| `onValueChange` | `(value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void` | No | — | Event handler called when the value of the select changes. |
+| `open` | `boolean` | No | — | Whether the select popup is currently open. |
+| `readOnly` | `boolean` | No | `false` | Whether the user should be unable to choose a different option from the select popup. |
+| `required` | `boolean` | No | `false` | Whether the user must choose a value before submitting a form. |
+| `value` | `SelectValueType<Value, Multiple>` | No | — | The value of the select. Use when controlled. |
+
+#### SelectPrimitiveGroup
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectGroupState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectGroupState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitiveGroupLabel
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectGroupLabelState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectGroupLabelState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitiveItem
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectItemState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `disabled` | `boolean` | No | `false` | Whether the component should ignore user interaction. |
+| `label` | `string` | No | — | Specifies the text label to use when the item is matched during keyboard text navigation.  Defaults to the item text ... |
+| `nativeButton` | `boolean` | No | `true` | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if ... |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectItemState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+| `value` | `any` | No | `null` | A unique value that identifies this select item. |
+
+#### SelectPrimitiveItemIndicator
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectItemIndicatorState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `keepMounted` | `boolean` | No | — | Whether to keep the HTML element in the DOM when the item is not selected. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectItemIndicatorState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitiveItemText
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectItemTextState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectItemTextState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitiveList
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectListState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectListState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitivePopup
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectPopupState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `finalFocus` | `boolean | RefObject<HTMLElement> | ((closeType: InteractionType) => boolean | void | HTMLElement)` | No | — | Determines the element to focus when the select popup is closed.  - `false`: Do not move focus. - `true`: Move focus ... |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectPopupState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitivePositioner
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `align` | `Align` | No | `'center'` | How to align the popup relative to the specified side. |
+| `alignItemWithTrigger` | `boolean` | No | `false` | Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. Thi... |
+| `alignOffset` | `OffsetFunction | number` | No | `0` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dim... |
+| `anchor` | `Element | RefObject<Element> | VirtualElement | (() => Element | VirtualElement)` | No | — | An element to position the popup against. By default, the popup will be positioned against the trigger. |
+| `arrowPadding` | `number` | No | `5` | Minimum distance to maintain between the arrow and the edges of the popup.  Use it to prevent the arrow element from ... |
+| `className` | `string | ((state: SelectPositionerState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `collisionAvoidance` | `CollisionAvoidance` | No | — | Determines how to handle collisions when positioning the popup.  `side` controls overflow on the preferred placement ... |
+| `collisionBoundary` | `Boundary` | No | `'clipping-ancestors'` | An element or a rectangle that delimits the area that the popup is confined to. |
+| `collisionPadding` | `Padding` | No | `5` | Additional space to maintain from the edge of the collision boundary. |
+| `disableAnchorTracking` | `boolean` | No | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. |
+| `positionMethod` | `"absolute" | "fixed"` | No | `'absolute'` | Determines which CSS `position` property to use. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectPositionerState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+| `side` | `Side` | No | `'bottom'` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. |
+| `sideOffset` | `OffsetFunction | number` | No | `6` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the di... |
+| `sticky` | `boolean` | No | `false` | Whether to maintain the popup in the viewport after the anchor element was scrolled out of view. |
+
+#### SelectPrimitiveSeparator
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `orientation` | `Orientation` | No | `'horizontal'` | The orientation of the separator. |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitiveTrigger
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string | ((state: SelectTriggerState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `disabled` | `boolean` | No | — | Whether the component should ignore user interaction. |
+| `nativeButton` | `boolean` | No | `true` | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if ... |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectTriggerState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |
+
+#### SelectPrimitiveValue
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode | ((value: any) => ReactNode)` | No | — | Accepts a function that returns a `ReactNode` to format the selected value. @example ```tsx <Select.Value>   {(value:... |
+| `className` | `string | ((state: SelectValueState) => string)` | No | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
+| `placeholder` | `ReactNode` | No | — | The placeholder value to display when no value is selected. This is overridden by `children` if specified, or by a nu... |
+| `render` | `ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SelectValueState>` | No | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component.  Accep... |

package/dist/docs/index.md

@@ -79,6 +79,7 @@
 [ResponsiveSwitcher](./ResponsiveSwitcher/ResponsiveSwitcher.md)
 [scaffolding](./scaffolding/scaffolding.md)
 [SegmentedControl](./SegmentedControl/SegmentedControl.md)
+[SelectPrimitive](./SelectPrimitive/SelectPrimitive.md)
 [settings](./settings/settings.md)
 [SideDrawer](./SideDrawer/SideDrawer.md)
 [SideKick](./SideKick/SideKick.md)

package/dist/floating-ui.react-dom-cjs.js

@@ -2098,6 +2098,7 @@ exports.flip = flip;
 exports.hide = hide;
 exports.limitShift = limitShift;
 exports.offset = offset;
+exports.platform = platform;
 exports.shift = shift;
 exports.size = size;
 exports.useFloating = useFloating;

package/dist/floating-ui.react-dom-es.js

@@ -1,5 +1,5 @@
 import { g as getSideAxis, b as getAlignmentAxis, c as getSide, d as getAlignment, e as evaluate, h as getPaddingObject, r as rectToClientRect, j as getOppositePlacement, k as getExpandedPlacements, l as getOppositeAxisPlacements, m as getAlignmentSides, n as clamp, o as min, p as max, q as getAxisLength, s as sides, u as getOppositeAxis, v as placements, w as getOppositeAlignmentPlacement, x as createCoords, y as round, f as floor } from './index.esm-es.js';
-import { h as getOverflowAncestors, b as isElement, k as getWindow, l as getFrameElement, f as getComputedStyle$1, m as getDocumentElement, a as isHTMLElement, j as isWebKit, n as isTopLayer, g as getNodeName, o as isOverflowElement, p as getNodeScroll, e as getParentNode, d as isLastTraversableNode, q as isTableElement, r as isContainingBlock, s as getContainingBlock } from './floating-ui.utils.dom-es.js';
+import { k as getDocumentElement, b as isElement, a as isHTMLElement, l as isTopLayer, g as getNodeName, m as isOverflowElement, n as getNodeScroll, o as getWindow, e as getParentNode, d as isLastTraversableNode, p as isTableElement, q as isContainingBlock, r as getContainingBlock, f as getComputedStyle$1, h as getOverflowAncestors, s as getFrameElement, j as isWebKit } from './floating-ui.utils.dom-es.js';
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import * as ReactDOM from 'react-dom';
@@ -2070,4 +2070,4 @@ const arrow = (options, deps) => {
   };
 };
 
-export { arrow as a, autoUpdate as b, autoPlacement as c, size as d, flip as f, hide as h, limitShift as l, offset as o, shift as s, useFloating as u };
+export { arrow as a, autoUpdate as b, autoPlacement as c, size as d, flip as f, hide as h, limitShift as l, offset as o, platform as p, shift as s, useFloating as u };