@jobber/components 8.26.3 → 8.27.1

package/dist/docs/Select/Select.md

@@ -0,0 +1,428 @@
+# Select
+
+Select presents a defined list of options to choose from. It is a prop-driven,
+labelled dropdown wrapped in a field structure that handles the label,
+description, and error messaging for you.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectBasicExample() {
+  const [value, setValue] = useState<string | undefined>("active");
+
+  return (
+    <Select label="Status" value={value} onValueChange={setValue}>
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Design & usage guidelines
+
+Use Select when a user needs to pick a single value from a known, reasonably
+short list of options. Each option is declared with `Select.Item`, where the
+`value` is submitted and the children are shown as the label.
+
+Select is controlled: pass the current `value` and an `onValueChange` handler to
+keep your state in sync.
+
+## Empty state
+
+The `label` doubles as the placeholder: while no value is selected it sits
+centered inside the field, then rises to a floating mini-label once the user
+picks an option. There is no separate `placeholder` prop — the label fills that
+role.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectEmptyExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select label="Status" value={value} onValueChange={setValue}>
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Description
+
+Use `description` to add supporting help text beneath the field.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectDescriptionExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select
+      label="Status"
+      description="This controls who can see the record."
+      value={value}
+      onValueChange={setValue}
+    >
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## States
+
+### Error
+
+Pass an `error` message to mark the field invalid and show the message beneath
+the field. The error replaces the description while it is present. Use `invalid`
+instead to apply the invalid styling without a message — for example when a form
+library such as React Hook Form renders the error text itself.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectErrorExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select
+      label="Status"
+      description="This controls who can see the record."
+      error="Please choose a status."
+      value={value}
+      onValueChange={setValue}
+    >
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+### Disabled
+
+Set `disabled` to prevent interaction with the field.
+
+```tsx
+import React from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectDisabledExample() {
+  return (
+    <Select label="Status" disabled value="active">
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Grouping
+
+Organize related options under section headers with `Select.Group` and
+`Select.GroupLabel`. Adjacent groups are divided automatically, so you don't
+need to add a separator between them. `Select.Separator` is available for adding
+a divider elsewhere in the list.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectGroupedExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select label="Produce" value={value} onValueChange={setValue}>
+      <Select.Group>
+        <Select.GroupLabel>Fruits</Select.GroupLabel>
+        <Select.Item value="apple">Apple</Select.Item>
+        <Select.Item value="banana">Banana</Select.Item>
+      </Select.Group>
+      <Select.Group>
+        <Select.GroupLabel>Vegetables</Select.GroupLabel>
+        <Select.Item value="carrot">Carrot</Select.Item>
+        <Select.Item value="spinach">Spinach</Select.Item>
+      </Select.Group>
+    </Select>
+  );
+}
+```
+
+## Custom selected value
+
+The closed trigger shows the selected value capitalized by default. Pass
+`renderValue` to display something different from the option's label — here the
+list shows short labels (`Low`, `Medium`, `High`) while the trigger shows the
+full `"High priority"`. The open list always shows each `Select.Item`'s
+children.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+const PRIORITY_LABELS: Record<string, string> = {
+  low: "Low priority",
+  medium: "Medium priority",
+  high: "High priority",
+};
+
+export function SelectRenderValueExample() {
+  const [value, setValue] = useState<string | undefined>("high");
+
+  return (
+    <Select
+      label="Priority"
+      value={value}
+      onValueChange={setValue}
+      renderValue={selected => PRIORITY_LABELS[selected]}
+    >
+      <Select.Item value="low">Low</Select.Item>
+      <Select.Item value="medium">Medium</Select.Item>
+      <Select.Item value="high">High</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Sizes
+
+Use the `size` prop to render a `small` control for tighter layouts. The
+floating mini-label is hidden at the `small` size, so the compact control keeps
+a single-line height.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectSizeExample() {
+  const [value, setValue] = useState<string | undefined>("active");
+
+  return (
+    <Select label="Status" size="small" value={value} onValueChange={setValue}>
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Inline
+
+Set `inline` to embed the Select within a line of text. The description and
+error messaging are suppressed in inline mode.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectInlineExample() {
+  const [value, setValue] = useState<string | undefined>("active");
+
+  return (
+    <div>
+      Set the record to{" "}
+      <Select label="Status" inline value={value} onValueChange={setValue}>
+        <Select.Item value="active">Active</Select.Item>
+        <Select.Item value="archived">Archived</Select.Item>
+        <Select.Item value="draft">Draft</Select.Item>
+      </Select>{" "}
+      today.
+    </div>
+  );
+}
+```
+
+## Mobile
+
+On small (touch-sized) web screens — viewport widths of `490px` or less — the
+options open as a bottom sheet instead of an anchored dropdown, matching the
+mobile pattern used by `Menu` and `Dialog`. This is automatic and requires no
+props; selection, keyboard, and focus behaviour are unchanged. Resize the
+preview narrow (or open the examples above on a phone) to see the sheet.
+
+
+## Content
+
+### Options and labels
+
+Declare each option with `Select.Item`. The `value` prop is what `onValueChange`
+reports and what is submitted with a form; the children are the human-readable
+label shown in the open list.
+
+### The selected value display
+
+The closed trigger shows the selected **value**, capitalized by default (e.g.
+`"active"` → `"Active"`). It does not read the option's children — so when the
+label differs from the capitalized value, pass `renderValue` to control what the
+trigger shows:
+
+```tsx
+<Select
+  label="Status"
+  value={value}
+  onValueChange={setValue}
+  renderValue={value => STATUS_LABELS[value]}
+>
+  {/* Select.Item options */}
+</Select>
+```
+
+### Grouping
+
+* `Select.Group`: wraps a set of related options.
+* `Select.GroupLabel`: the section header text for a group.
+* `Select.Separator`: an optional visual divider. Adjacent `Select.Group`s are
+  already divided automatically, so reach for this only to divide options
+  elsewhere in the list.
+
+## Component customization
+
+Select is intentionally opinionated: it exposes a curated set of props rather
+than the full underlying API. The subcomponents (`Select.Item`, `Select.Group`,
+`Select.GroupLabel`, `Select.Separator`) accept `className` and `style` for
+per-option styling; reach out to UXF if you need behaviour beyond what the props
+provide.
+
+### Controlled usage
+
+Select is controlled only. Always pass `value` and `onValueChange`; there is no
+uncontrolled `defaultValue`. The `id` and `name` are generated for you and wired
+to the label automatically.
+
+The change handler is named `onValueChange` to stay isomorphic with Base UI, and
+to encode the payload (the value, not an event) in its name.
+
+### Using with a form library
+
+Select is form-library-agnostic — it exposes plain controlled props, so any
+system (React Hook Form, Formik, TanStack Form, or plain `useState`) drives it
+by wiring:
+
+* `value` — the current value
+* `onValueChange` — the library's value setter
+* `onBlur` / `onFocus` — touched state and blur/focus-mode validation
+* `error` (message) or `invalid` (styling only) — validation feedback
+* `ref` — exposes `focus()`, so a form can focus this field on error
+
+Because the change prop is `onValueChange` (not `onChange`), spreading a field
+object whose handler is named `onChange` — for example React Hook Form's `field`
+via `<Select {...field} />` — will **not** wire up the change handler.
+`field.onChange` lands on a prop nothing reads, and JSX spread does not error,
+so the field silently stops updating. Wire the props explicitly instead:
+
+```tsx
+<Controller
+  control={control}
+  name="status"
+  render={({ field }) => (
+    <Select
+      label="Status"
+      name={field.name}
+      value={field.value}
+      onValueChange={field.onChange}
+      onBlur={field.onBlur}
+      ref={field.ref}
+    >
+      {/* Select.Item options */}
+    </Select>
+  )}
+/>
+```
+
+If you want spread ergonomics, keep the remap in your own app — the design
+system intentionally ships no form-library adapter:
+
+```tsx
+// app-side helper, not part of @jobber/components
+const toValueField = ({ onChange, ...field }) => ({
+  ...field,
+  onValueChange: onChange,
+});
+
+<Select label="Status" {...toValueField(field)}>
+  {/* Select.Item options */}
+</Select>;
+```
+
+> **Note:** Select is built on Base UI's `Field` primitive, but it is not yet
+> wired to participate in a surrounding Base UI `<Form>` — the `Form` `errors`
+> prop and `Form`-driven focus-on-error do not reach Select. Drive validation
+> through the `error` / `invalid` props for now.
+
+## Related components
+
+* [LegacySelect](../LegacySelect/LegacySelect.md): the previous native `<select>`-based
+  implementation.
+
+
+## Props
+
+### Web
+
+#### Select
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | `Select.Item`, `Select.Group`, `Select.GroupLabel`, and `Select.Separator` that make up the dropdown list. |
+| `description` | `ReactNode` | No | — | Helper text rendered beneath the field. |
+| `disabled` | `boolean` | No | — | Disables the whole field. |
+| `error` | `string` | No | — | Error message. Shows the message beneath the field and applies invalid styling. Replaces the description while present. |
+| `id` | `string` | No | — | Id applied to the field's trigger. Auto-generated when omitted. |
+| `inline` | `boolean` | No | — | Renders the field inline and suppresses the description / error. |
+| `invalid` | `boolean` | No | — | Applies invalid styling without rendering a message. Use when the message is rendered elsewhere (e.g. by React Hook F... |
+| `label` | `string` | No | — | Floating label shown inside the field. It sits as the placeholder when no value is selected and rises to a mini-label... |
+| `name` | `string` | No | — | Name used for the form field (FormData key, autofill, test selectors). |
+| `onBlur` | `() => void` | No | — | Called when the field's trigger loses focus. Useful for touched state and blur-mode validation. |
+| `onFocus` | `() => void` | No | — | Called when the field's trigger receives focus. |
+| `onValueChange` | `(value: string) => void` | No | — | Called with the newly selected value. Named to match Base UI. Note: React Hook Form's `field.onChange` will not be wi... |
+| `ref` | `Ref<SelectRef>` | No | — | Imperative handle exposing `focus()`. |
+| `renderValue` | `(value: string) => ReactNode` | No | — | Renders the selected value shown in the closed trigger. When omitted, the value is shown capitalized (e.g. `"active"`... |
+| `size` | `"large" | "small"` | No | — | Field size. |
+| `value` | `string` | No | — | The controlled selected value. `null` (or `undefined`) when empty. |
+
+#### Select.Group
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | A `Select.GroupLabel` and the `Select.Item`s that belong to the group. |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### Select.GroupLabel
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | The section heading shown above the group's options. |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### Select.Item
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The display label for the option. |
+| `value` | `string` | Yes | — | The value submitted when this option is selected. |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+
+#### Select.Separator
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |

package/dist/docs/SelectPrimitive/SelectPrimitive.md

@@ -194,7 +194,7 @@ Base UI.
 |------|------|----------|---------|-------------|
 | `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` (... |
+| `ref` | `Ref<HTMLButtonElement>` | 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... |
 | `style` | `CSSProperties | ((state: SelectPortalState) => CSSProperties)` | No | — | Style applied to the element, or a function that returns a style object based on the component's state. |
 
@@ -226,6 +226,13 @@ Base UI.
 | `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. |
 
+#### SelectPrimitiveFieldTrigger
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ref` | `Ref<HTMLButtonElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `valueSlot` | `ReactNode` | No | — | The value/placeholder display element rendered before the chevron. |
+
 #### SelectPrimitiveGroup
 
 | Prop | Type | Required | Default | Description |
@@ -337,3 +344,9 @@ Base UI.
 | `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... |
 | `style` | `CSSProperties | ((state: SelectValueState) => CSSProperties)` | No | — | Style applied to the element, or a function that returns a style object based on the component's state. |
+
+#### SelectPrimitiveValueText
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ref` | `Ref<HTMLButtonElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |

package/dist/docs/index.md

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

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

@@ -1,5 +1,5 @@
 import { g as getSideAxis, a as getAlignmentAxis, b as getSide, c as getAlignment, e as evaluate, d as getPaddingObject, r as rectToClientRect, h as getOppositePlacement, i as getExpandedPlacements, j as getOppositeAxisPlacements, k as getAlignmentSides, l as clamp, m as min, n as max, o as getAxisLength, s as sides, p as getOppositeAxis, q as placements, t as getOppositeAlignmentPlacement, u as createCoords, v as round, f as floor } from './floating-ui.utils-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 { k as getDocumentElement, b as isElement, i 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';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
-import { i as isShadowRoot, a as isHTMLElement, b as isElement, c as isNode, g as getNodeName, d as isLastTraversableNode, e as getParentNode, f as getComputedStyle$1, h as getOverflowAncestors, j as isWebKit } from './floating-ui.utils.dom-es.js';
+import { a as isShadowRoot, i as isHTMLElement, b as isElement, c as isNode, g as getNodeName, d as isLastTraversableNode, e as getParentNode, f as getComputedStyle$1, h as getOverflowAncestors, j as isWebKit } from './floating-ui.utils.dom-es.js';
 import { f as floor } from './floating-ui.utils-es.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';

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

@@ -162,4 +162,4 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 
-export { isHTMLElement as a, isElement as b, isNode as c, isLastTraversableNode as d, getParentNode as e, getComputedStyle as f, getNodeName as g, getOverflowAncestors as h, isShadowRoot as i, isWebKit as j, getDocumentElement as k, isTopLayer as l, isOverflowElement as m, getNodeScroll as n, getWindow as o, isTableElement as p, isContainingBlock as q, getContainingBlock as r, getFrameElement as s };
+export { isShadowRoot as a, isElement as b, isNode as c, isLastTraversableNode as d, getParentNode as e, getComputedStyle as f, getNodeName as g, getOverflowAncestors as h, isHTMLElement as i, isWebKit as j, getDocumentElement as k, isTopLayer as l, isOverflowElement as m, getNodeScroll as n, getWindow as o, isTableElement as p, isContainingBlock as q, getContainingBlock as r, getFrameElement as s };

package/dist/index.cjs

@@ -73,6 +73,7 @@ var RadioGroup = require('./RadioGroup-cjs.js');
 var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
 var LegacySelect = require('./LegacySelect-cjs.js');
 var SegmentedControl = require('./SegmentedControl-cjs.js');
+var Select = require('./Select-cjs.js');
 var SideDrawer = require('./SideDrawer-cjs.js');
 var SideKick = require('./SideKick-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
@@ -190,6 +191,13 @@ require('./MenuSubmenuTrigger-cjs.js');
 require('./useCompositeListItem-cjs.js');
 require('./isElementDisabled-cjs.js');
 require('./AtlantisPortalContent-cjs.js');
+require('./SelectPrimitive-cjs.js');
+require('./SelectGroupLabel-cjs.js');
+require('./useLabelableId-cjs.js');
+require('./resolveAriaLabelledBy-cjs.js');
+require('./HelperText-cjs.js');
+require('./FieldDescription-cjs.js');
+require('./useLabel-cjs.js');
 require('@jobber/formatters');
 require('react-dom/client');
 
@@ -324,6 +332,7 @@ exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.SegmentedControlContext = SegmentedControl.SegmentedControlContext;
 exports.SegmentedControlProvider = SegmentedControl.SegmentedControlProvider;
 exports.useSegmentedControl = SegmentedControl.useSegmentedControl;
+exports.Select = Select.Select;
 exports.SideDrawer = SideDrawer.SideDrawer;
 exports.SideKick = SideKick.SideKick;
 exports.Spinner = Spinner.Spinner;

package/dist/index.d.mts

@@ -64,6 +64,7 @@ export * from "./RadioGroup";
 export * from "./ResponsiveSwitcher";
 export * from "./LegacySelect";
 export * from "./SegmentedControl";
+export * from "./Select";
 export * from "./SideDrawer";
 export * from "./SideKick";
 export * from "./Spinner";

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export * from "./RadioGroup";
 export * from "./ResponsiveSwitcher";
 export * from "./LegacySelect";
 export * from "./SegmentedControl";
+export * from "./Select";
 export * from "./SideDrawer";
 export * from "./SideKick";
 export * from "./Spinner";

package/dist/index.mjs

@@ -71,6 +71,7 @@ export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
 export { R as ResponsiveSwitcher } from './ResponsiveSwitcher-es.js';
 export { L as LegacySelect, S as Option } from './LegacySelect-es.js';
 export { S as SegmentedControl, a as SegmentedControlContext, b as SegmentedControlProvider, u as useSegmentedControl } from './SegmentedControl-es.js';
+export { S as Select } from './Select-es.js';
 export { S as SideDrawer } from './SideDrawer-es.js';
 export { S as SideKick } from './SideKick-es.js';
 export { S as Spinner } from './Spinner-es.js';
@@ -188,6 +189,13 @@ import './MenuSubmenuTrigger-es.js';
 import './useCompositeListItem-es.js';
 import './isElementDisabled-es.js';
 import './AtlantisPortalContent-es.js';
+import './SelectPrimitive-es.js';
+import './SelectGroupLabel-es.js';
+import './useLabelableId-es.js';
+import './resolveAriaLabelledBy-es.js';
+import './HelperText-es.js';
+import './FieldDescription-es.js';
+import './useLabel-es.js';
 import '@jobber/formatters';
 import 'react-dom/client';
 

package/dist/primitives/ComboboxPrimitive/index.cjs

@@ -22,6 +22,7 @@ require('react/jsx-runtime');
 require('../../floating-ui.utils-cjs.js');
 require('../../floating-ui.react-dom-cjs.js');
 require('../../resolveAriaLabelledBy-cjs.js');
+require('../../stringifyLocale-cjs.js');
 require('../../useLabel-cjs.js');
 require('../../Separator-cjs.js');
 

package/dist/primitives/ComboboxPrimitive/index.mjs

@@ -20,5 +20,6 @@ import 'react/jsx-runtime';
 import '../../floating-ui.utils-es.js';
 import '../../floating-ui.react-dom-es.js';
 import '../../resolveAriaLabelledBy-es.js';
+import '../../stringifyLocale-es.js';
 import '../../useLabel-es.js';
 import '../../Separator-es.js';

package/dist/primitives/HelperText/HelperText.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import type { ReactNode } from "react";
 export interface HelperTextProps {
     /**
      * The helper message.
      */
-    readonly message: string;
+    readonly message: ReactNode;
     /**
      * `neutral` renders subdued text. `critical` renders an `alert` icon
      * followed by error-coloured text.

package/dist/primitives/InputNumberExperimental/index.cjs

@@ -11,13 +11,15 @@ require('../../Icon-cjs.js');
 require('@jobber/design');
 require('../../Typography-cjs.js');
 require('../../useRenderElement-cjs.js');
+require('../../FieldDescription-cjs.js');
 require('../../useButton-cjs.js');
 require('../../floating-ui.utils.dom-cjs.js');
 require('react-dom');
 require('../../useLabelableId-cjs.js');
 require('react/jsx-runtime');
-require('../../NumberFieldInput-cjs.js');
 require('../../useLabel-cjs.js');
+require('../../NumberFieldInput-cjs.js');
+require('../../stringifyLocale-cjs.js');
 require('../../clamp-cjs.js');
 
 

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -9,11 +9,13 @@ import '../../Icon-es.js';
 import '@jobber/design';
 import '../../Typography-es.js';
 import '../../useRenderElement-es.js';
+import '../../FieldDescription-es.js';
 import '../../useButton-es.js';
 import '../../floating-ui.utils.dom-es.js';
 import 'react-dom';
 import '../../useLabelableId-es.js';
 import 'react/jsx-runtime';
-import '../../NumberFieldInput-es.js';
 import '../../useLabel-es.js';
+import '../../NumberFieldInput-es.js';
+import '../../stringifyLocale-es.js';
 import '../../clamp-es.js';

package/dist/primitives/SelectPrimitive/SelectPrimitive.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
+import type { SelectPrimitiveFieldTriggerProps, SelectPrimitiveValueTextProps } from "./types";
 import { Select } from "../../unstyledPrimitives";
 import { OverlaySeparator } from "../OverlaySeparator";
+declare function SelectPrimitiveFieldTrigger({ valueSlot, className, ...props }: SelectPrimitiveFieldTriggerProps): React.JSX.Element;
+declare namespace SelectPrimitiveFieldTrigger {
+    var displayName: string;
+}
 declare function SelectPrimitiveTrigger({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof Select.Trigger>): React.JSX.Element;
 declare namespace SelectPrimitiveTrigger {
     var displayName: string;
@@ -9,6 +14,10 @@ declare function SelectPrimitiveValue({ className, ...props }: React.ComponentPr
 declare namespace SelectPrimitiveValue {
     var displayName: string;
 }
+declare function SelectPrimitiveValueText({ className, ...props }: SelectPrimitiveValueTextProps): React.JSX.Element;
+declare namespace SelectPrimitiveValueText {
+    var displayName: string;
+}
 declare function SelectPrimitivePositioner({ className, sideOffset, alignItemWithTrigger, ...props }: React.ComponentPropsWithoutRef<typeof Select.Positioner>): React.JSX.Element;
 declare namespace SelectPrimitivePositioner {
     var displayName: string;
@@ -48,7 +57,9 @@ declare namespace SelectPrimitiveSeparator {
 export declare const SelectPrimitive: {
     Root: typeof Select.Root;
     Trigger: typeof SelectPrimitiveTrigger;
+    FieldTrigger: typeof SelectPrimitiveFieldTrigger;
     Value: typeof SelectPrimitiveValue;
+    ValueText: typeof SelectPrimitiveValueText;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Positioner: typeof SelectPrimitivePositioner;
     Popup: typeof SelectPrimitivePopup;

package/dist/primitives/SelectPrimitive/index.d.ts

@@ -1,2 +1,2 @@
 export { SelectPrimitive } from "./SelectPrimitive";
-export type { SelectPrimitiveRootProps, SelectPrimitiveTriggerProps, SelectPrimitiveValueProps, SelectPrimitivePortalProps, SelectPrimitivePositionerProps, SelectPrimitivePopupProps, SelectPrimitiveListProps, SelectPrimitiveItemProps, SelectPrimitiveItemTextProps, SelectPrimitiveItemIndicatorProps, SelectPrimitiveGroupProps, SelectPrimitiveGroupLabelProps, SelectPrimitiveSeparatorProps, } from "./types";
+export type { SelectPrimitiveRootProps, SelectPrimitiveTriggerProps, SelectPrimitiveFieldTriggerProps, SelectPrimitiveValueProps, SelectPrimitiveValueTextProps, SelectPrimitivePortalProps, SelectPrimitivePositionerProps, SelectPrimitivePopupProps, SelectPrimitiveListProps, SelectPrimitiveItemProps, SelectPrimitiveItemTextProps, SelectPrimitiveItemIndicatorProps, SelectPrimitiveGroupProps, SelectPrimitiveGroupLabelProps, SelectPrimitiveSeparatorProps, } from "./types";