@jobber/components 8.26.2 → 8.27.0

package/dist/MenuSubmenuTrigger-es.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { h as useCompositeListItem, f as getDisabledMountTransitionStyles, d as useAnchorPositioning, i as adaptiveOrigin, c as useAnchoredPopupScrollLock, e as usePositioner, C as CompositeList, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds } from './useCompositeListItem-es.js';
 import { u as useToolbarRootContext, i as isElementDisabled } from './isElementDisabled-es.js';
 import { C as COMPOSITE_KEYS } from './scrollEdges-es.js';
-import { o as getWindow, b as isElement, a as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils.dom-es.js';
+import { o as getWindow, b as isElement, i as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils.dom-es.js';
 import { p as popupStoreSelectors, l as createInitialPopupStoreState } from './ScrollAreaViewport-es.js';
 import * as ReactDOM from 'react-dom';
 

package/dist/NumberFieldInput-cjs.js

@@ -6,7 +6,7 @@ var useRenderElement = require('./useRenderElement-cjs.js');
 var useLabelableId = require('./useLabelableId-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
-var useLabel = require('./useLabel-cjs.js');
+var stringifyLocale = require('./stringifyLocale-cjs.js');
 var clamp = require('./clamp-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -41,7 +41,7 @@ function useForcedRerendering() {
 const cache = new Map();
 function getFormatter(locale, options) {
   const optionsString = JSON.stringify({
-    locale: useLabel.stringifyLocale(locale),
+    locale: stringifyLocale.stringifyLocale(locale),
     options
   });
   const cachedFormatter = cache.get(optionsString);

package/dist/NumberFieldInput-es.js

@@ -4,7 +4,7 @@ import { f as formatErrorMessage, c as useMergedRefs, u as useRenderElement, a a
 import { f as fieldValidityMapping, b as useFieldRootContext, a as useFormContext, c as useLabelableId, u as useLabelableContext, d as useRegisterFieldControl } from './useLabelableId-es.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { o as getWindow } from './floating-ui.utils.dom-es.js';
-import { s as stringifyLocale } from './useLabel-es.js';
+import { s as stringifyLocale } from './stringifyLocale-es.js';
 import { c as clamp } from './clamp-es.js';
 
 /**

package/dist/Select/Select.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { SelectGroupLabelProps, SelectGroupProps, SelectItemProps, SelectProps, SelectSeparatorProps } from "./Select.types";
+/**
+ * A prop-driven, labelled Select. On small web screens the options open in a
+ * `BottomSheet` instead of an anchored dropdown.
+ */
+export declare function Select({ label, description, error, invalid, value, onValueChange, onBlur, onFocus, renderValue, name, id: idProp, ref, disabled, size, inline, children, }: SelectProps): React.JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+    var Item: typeof SelectItem;
+    var Group: typeof SelectGroup;
+    var GroupLabel: typeof SelectGroupLabel;
+    var Separator: typeof SelectSeparator;
+}
+declare function SelectItem(props: SelectItemProps): React.JSX.Element;
+declare namespace SelectItem {
+    var displayName: string;
+}
+declare function SelectGroup(props: SelectGroupProps): React.JSX.Element;
+declare namespace SelectGroup {
+    var displayName: string;
+}
+declare function SelectGroupLabel(props: SelectGroupLabelProps): React.JSX.Element;
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+declare function SelectSeparator(props: SelectSeparatorProps): React.JSX.Element;
+declare namespace SelectSeparator {
+    var displayName: string;
+}
+export {};

package/dist/Select/Select.types.d.ts

@@ -0,0 +1,145 @@
+import type { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+/**
+ * Imperative handle exposed via `ref`. `focus()` moves focus to the field's
+ * trigger — enough to support focus-on-error in a form.
+ */
+export interface SelectRef {
+    readonly focus: () => void;
+}
+export interface SelectProps {
+    /**
+     * Floating label shown inside the field. It sits as the placeholder when no
+     * value is selected and rises to a mini-label once a value is chosen.
+     * Recommended for accessibility. Hidden at the `small` size.
+     */
+    readonly label?: string;
+    /**
+     * Helper text rendered beneath the field.
+     */
+    readonly description?: ReactNode;
+    /**
+     * Error message. Shows the message beneath the field and applies invalid
+     * styling. Replaces the description while present.
+     */
+    readonly error?: string;
+    /**
+     * Applies invalid styling without rendering a message. Use when the message
+     * is rendered elsewhere (e.g. by React Hook Form).
+     */
+    readonly invalid?: boolean;
+    /**
+     * The controlled selected value. `null` (or `undefined`) when empty.
+     */
+    readonly value?: string | null;
+    /**
+     * Called with the newly selected value. Named to match Base UI. Note: React
+     * Hook Form's `field.onChange` will not be wired by a `{...field}` spread —
+     * pass `onValueChange={field.onChange}` explicitly.
+     */
+    readonly onValueChange?: (value: string) => void;
+    /**
+     * Renders the selected value shown in the closed trigger. When omitted, the
+     * value is shown capitalized (e.g. `"active"` → `"Active"`).
+     */
+    readonly renderValue?: (value: string) => ReactNode;
+    /**
+     * Called when the field's trigger loses focus. Useful for touched state and
+     * blur-mode validation.
+     */
+    readonly onBlur?: () => void;
+    /**
+     * Called when the field's trigger receives focus.
+     */
+    readonly onFocus?: () => void;
+    /**
+     * Name used for the form field (FormData key, autofill, test selectors).
+     */
+    readonly name?: string;
+    /**
+     * Id applied to the field's trigger. Auto-generated when omitted.
+     */
+    readonly id?: string;
+    /**
+     * Imperative handle exposing `focus()`.
+     */
+    readonly ref?: Ref<SelectRef>;
+    /**
+     * Disables the whole field.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Field size.
+     */
+    readonly size?: "small" | "large";
+    /**
+     * Renders the field inline and suppresses the description / error.
+     */
+    readonly inline?: boolean;
+    /**
+     * `Select.Item`, `Select.Group`, `Select.GroupLabel`, and `Select.Separator`
+     * that make up the dropdown list.
+     */
+    readonly children?: ReactNode;
+}
+export interface SelectItemProps {
+    /**
+     * The value submitted when this option is selected.
+     */
+    readonly value: string;
+    /**
+     * The display label for the option.
+     */
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export interface SelectGroupProps {
+    /**
+     * A `Select.GroupLabel` and the `Select.Item`s that belong to the group.
+     */
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export interface SelectGroupLabelProps {
+    /**
+     * The section heading shown above the group's options.
+     */
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export interface SelectSeparatorProps {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Internal. The platform-specific implementations that the `Select.*`
+ * subcomponents dispatch to (desktop dropdown vs. mobile bottom sheet). One
+ * authored child tree renders on both platforms; each node resolves to the
+ * active shell's part — mirroring Menu's shell pattern.
+ */
+export interface SelectShell {
+    readonly Item: (props: SelectItemProps) => ReactElement;
+    readonly Group: (props: SelectGroupProps) => ReactElement;
+    readonly GroupLabel: (props: SelectGroupLabelProps) => ReactElement;
+    readonly Separator: (props: SelectSeparatorProps) => ReactElement;
+}
+/**
+ * Internal. Shared props both shell roots accept; each root reads only the
+ * fields its presentation needs and ignores the rest.
+ */
+export interface SelectShellRootProps {
+    readonly value?: string | null;
+    readonly onValueChange?: (value: string) => void;
+    readonly onBlur?: () => void;
+    readonly onFocus?: () => void;
+    readonly disabled?: boolean;
+    readonly invalid?: boolean;
+    readonly triggerId: string;
+    readonly triggerClassName: string;
+    readonly ariaLabel?: string;
+    /** Renders the selected value in the (closed) trigger on both platforms. */
+    readonly renderValue: (value: string) => ReactNode;
+    readonly children: ReactNode;
+}

package/dist/Select/SelectBottomSheet.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SelectShell, SelectShellRootProps } from "./Select.types";
+export declare const selectBottomSheetShell: SelectShell;
+export declare function SelectBottomSheetRoot({ value, onValueChange, onBlur, onFocus, disabled, invalid, renderValue, triggerId, triggerClassName, ariaLabel, children, }: SelectShellRootProps): React.JSX.Element;

package/dist/Select/SelectDropdown.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SelectShell, SelectShellRootProps } from "./Select.types";
+export declare const selectDropdownShell: SelectShell;
+export declare function SelectDropdownRoot({ value, onValueChange, onBlur, onFocus, disabled, renderValue, triggerId, triggerClassName, children, }: SelectShellRootProps): React.JSX.Element;

package/dist/Select/index.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var Select = require('../Select-cjs.js');
+require('react');
+require('@jobber/hooks');
+require('classnames');
+require('../SelectPrimitive-cjs.js');
+require('../tslib.es6-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
+require('../OverlaySeparator-cjs.js');
+require('../Separator-cjs.js');
+require('../useRenderElement-cjs.js');
+require('../SelectGroupLabel-cjs.js');
+require('../useButton-cjs.js');
+require('../floating-ui.utils.dom-cjs.js');
+require('react-dom');
+require('../useScrollLock-cjs.js');
+require('react/jsx-runtime');
+require('../floating-ui.utils-cjs.js');
+require('../isElementDisabled-cjs.js');
+require('../useLabelableId-cjs.js');
+require('../resolveAriaLabelledBy-cjs.js');
+require('../scrollEdges-cjs.js');
+require('../clamp-cjs.js');
+require('../useCompositeListItem-cjs.js');
+require('../floating-ui.react-dom-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../buttonRenderAdapter-cjs.js');
+require('../Button-cjs.js');
+require('react-router-dom');
+require('../Typography-cjs.js');
+require('../ScrollAreaViewport-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
+require('../FieldDescription-cjs.js');
+require('../useLabel-cjs.js');
+
+
+
+exports.Select = Select.Select;

package/dist/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, SelectRef, SelectItemProps, SelectGroupProps, SelectGroupLabelProps, SelectSeparatorProps, } from "./Select.types";

package/dist/Select/index.mjs

@@ -0,0 +1,35 @@
+export { S as Select } from '../Select-es.js';
+import 'react';
+import '@jobber/hooks';
+import 'classnames';
+import '../SelectPrimitive-es.js';
+import '../tslib.es6-es.js';
+import '../Icon-es.js';
+import '@jobber/design';
+import '../OverlaySeparator-es.js';
+import '../Separator-es.js';
+import '../useRenderElement-es.js';
+import '../SelectGroupLabel-es.js';
+import '../useButton-es.js';
+import '../floating-ui.utils.dom-es.js';
+import 'react-dom';
+import '../useScrollLock-es.js';
+import 'react/jsx-runtime';
+import '../floating-ui.utils-es.js';
+import '../isElementDisabled-es.js';
+import '../useLabelableId-es.js';
+import '../resolveAriaLabelledBy-es.js';
+import '../scrollEdges-es.js';
+import '../clamp-es.js';
+import '../useCompositeListItem-es.js';
+import '../floating-ui.react-dom-es.js';
+import '../BottomSheet-es.js';
+import '../buttonRenderAdapter-es.js';
+import '../Button-es.js';
+import 'react-router-dom';
+import '../Typography-es.js';
+import '../ScrollAreaViewport-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
+import '../FieldDescription-es.js';
+import '../useLabel-es.js';

package/dist/Select-cjs.js

@@ -0,0 +1,231 @@
+'use strict';
+
+var React = require('react');
+var jobberHooks = require('@jobber/hooks');
+var classnames = require('classnames');
+var SelectPrimitive = require('./SelectPrimitive-cjs.js');
+var BottomSheet = require('./BottomSheet-cjs.js');
+var Icon = require('./Icon-cjs.js');
+var HelperText = require('./HelperText-cjs.js');
+var FieldDescription = require('./FieldDescription-cjs.js');
+
+var styles = {"field":"cWI-uFeNWWw-","inline":"ddkBixixBz4-","control":"_-1-lIAkgLuo-","trigger":"_7rwBeCqTgRY-","small":"_5QeBX5VxX6o-","large":"Pp5nj1nxejw-","label":"M1IjAW17-OE-","hasLabel":"_1rx-nSAJT0U-","sheetListbox":"AVkCcDISAio-","sheetOption":"_35H33txs5QU-","sheetOptionLabel":"uL9j4OZn-3c-","sheetOptionIndicator":"_7NHtDHZnkG8-","sheetGroup":"UQ1tsDd1NFs-","sheetGroupLabel":"_0kBfkWoRI5c-","sheetSeparator":"RPsN9vqlzRw-","spinning":"oOACJmrVDf0-"};
+
+const SheetContext = React.createContext(null);
+function useSheetContext() {
+    const context = React.useContext(SheetContext);
+    if (!context) {
+        throw new Error("Select sheet parts must render inside the Select sheet");
+    }
+    return context;
+}
+const SheetGroupContext = React.createContext(null);
+function SheetOption({ value, children, className, style }) {
+    const { value: selectedValue, onSelect } = useSheetContext();
+    const selected = value === selectedValue;
+    return (React.createElement("div", { role: "option", "aria-selected": selected, "data-value": value, tabIndex: -1, className: classnames(styles.sheetOption, className), style: style, onClick: () => onSelect(value) },
+        React.createElement("span", { className: styles.sheetOptionLabel }, children),
+        selected && (React.createElement("span", { className: styles.sheetOptionIndicator, "aria-hidden": "true" },
+            React.createElement(Icon.Icon, { name: "checkmark", size: "small" })))));
+}
+function SheetGroup({ children, className, style }) {
+    const labelId = React.useId();
+    return (React.createElement(SheetGroupContext.Provider, { value: { labelId } },
+        React.createElement("div", { role: "group", "aria-labelledby": labelId, className: classnames(styles.sheetGroup, className), style: style }, children)));
+}
+function SheetGroupLabel({ children, className, style, }) {
+    const group = React.useContext(SheetGroupContext);
+    return (React.createElement("div", { id: group === null || group === void 0 ? void 0 : group.labelId, className: classnames(styles.sheetGroupLabel, className), style: style }, children));
+}
+function SheetSeparator({ className, style }) {
+    return (React.createElement("hr", { className: classnames(styles.sheetSeparator, className), style: style, "data-testid": "ATL-Select-SheetSeparator" }));
+}
+const selectBottomSheetShell = {
+    Item: SheetOption,
+    Group: SheetGroup,
+    GroupLabel: SheetGroupLabel,
+    Separator: SheetSeparator,
+};
+const OPTION_SELECTOR = '[role="option"]';
+function getOptions(list) {
+    if (!list)
+        return [];
+    return Array.from(list.querySelectorAll(OPTION_SELECTOR));
+}
+function handleListboxKeyDown(event) {
+    var _a, _b, _c, _d;
+    const options = getOptions(event.currentTarget);
+    if (options.length === 0)
+        return;
+    const active = document.activeElement;
+    const currentIndex = active ? options.indexOf(active) : -1;
+    switch (event.key) {
+        case "ArrowDown":
+            event.preventDefault();
+            (_a = options[(currentIndex + 1 + options.length) % options.length]) === null || _a === void 0 ? void 0 : _a.focus();
+            break;
+        case "ArrowUp":
+            event.preventDefault();
+            (_b = options[(currentIndex - 1 + options.length) % options.length]) === null || _b === void 0 ? void 0 : _b.focus();
+            break;
+        case "Home":
+            event.preventDefault();
+            (_c = options[0]) === null || _c === void 0 ? void 0 : _c.focus();
+            break;
+        case "End":
+            event.preventDefault();
+            (_d = options[options.length - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+            break;
+        case "Enter":
+        case " ":
+            event.preventDefault();
+            active === null || active === void 0 ? void 0 : active.click();
+            break;
+    }
+}
+function SelectBottomSheetRoot({ value, onValueChange, onBlur, onFocus, disabled, invalid, renderValue, triggerId, triggerClassName, ariaLabel, children, }) {
+    const [open, setOpen] = React.useState(false);
+    const listRef = React.useRef(null);
+    const selectedValue = value !== null && value !== void 0 ? value : undefined;
+    const valueLabel = value != null ? renderValue(value) : undefined;
+    function select(optionValue) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(optionValue);
+        setOpen(false);
+    }
+    function getInitialFocus() {
+        const options = getOptions(listRef.current);
+        const selected = options.find(option => option.dataset.value === selectedValue);
+        return selected !== null && selected !== void 0 ? selected : options[0];
+    }
+    return (React.createElement(SheetContext.Provider, { value: { value: selectedValue, onSelect: select } },
+        React.createElement(BottomSheet.BottomSheet.Root, { open: open, onOpenChange: setOpen },
+            React.createElement(BottomSheet.BottomSheet.Trigger, { render: React.createElement(SelectPrimitive.SelectPrimitive.FieldTrigger, { id: triggerId, disabled: disabled, onBlur: onBlur, onFocus: onFocus, "data-placeholder": selectedValue ? undefined : "", "data-invalid": invalid ? "" : undefined, "data-popup-open": open ? "" : undefined, className: triggerClassName, valueSlot: React.createElement(SelectPrimitive.SelectPrimitive.ValueText, null, valueLabel) }) }),
+            React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialFocus },
+                React.createElement(BottomSheet.BottomSheet.Content, null,
+                    React.createElement("div", { ref: listRef, role: "listbox", "aria-label": ariaLabel, className: styles.sheetListbox, onKeyDown: handleListboxKeyDown }, children))))));
+}
+
+function DropdownItem({ value, children, className, style }) {
+    return (React.createElement(SelectPrimitive.SelectPrimitive.Item, { className: className, style: style, value: value },
+        React.createElement(SelectPrimitive.SelectPrimitive.ItemText, null, children),
+        React.createElement(SelectPrimitive.SelectPrimitive.ItemIndicator, null)));
+}
+function DropdownGroup({ children, className, style }) {
+    return (React.createElement(SelectPrimitive.SelectPrimitive.Group, { className: className, style: style }, children));
+}
+function DropdownGroupLabel({ children, className, style, }) {
+    return (React.createElement(SelectPrimitive.SelectPrimitive.GroupLabel, { className: className, style: style }, children));
+}
+function DropdownSeparator({ className, style }) {
+    return (React.createElement(SelectPrimitive.SelectPrimitive.Separator, { className: className, style: style, orientation: "horizontal" }));
+}
+const selectDropdownShell = {
+    Item: DropdownItem,
+    Group: DropdownGroup,
+    GroupLabel: DropdownGroupLabel,
+    Separator: DropdownSeparator,
+};
+function SelectDropdownRoot({ value, onValueChange, onBlur, onFocus, disabled, renderValue, triggerId, triggerClassName, children, }) {
+    return (React.createElement(SelectPrimitive.SelectPrimitive.Root, { value: value !== null && value !== void 0 ? value : null, onValueChange: newValue => {
+            if (typeof newValue === "string")
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+        }, disabled: disabled },
+        React.createElement(SelectPrimitive.SelectPrimitive.Trigger, { className: triggerClassName, id: triggerId, onBlur: onBlur, onFocus: onFocus },
+            React.createElement(SelectPrimitive.SelectPrimitive.Value, null, selectedValue => typeof selectedValue === "string"
+                ? renderValue(selectedValue)
+                : null)),
+        React.createElement(SelectPrimitive.SelectPrimitive.Portal, null,
+            React.createElement(SelectPrimitive.SelectPrimitive.Positioner, null,
+                React.createElement(SelectPrimitive.SelectPrimitive.Popup, null,
+                    React.createElement(SelectPrimitive.SelectPrimitive.List, null, children))))));
+}
+
+const SMALL_SCREEN_BREAKPOINT = jobberHooks.BREAKPOINT_SIZES.sm;
+const SelectShellContext = React.createContext(null);
+function useSelectShell() {
+    const shell = React.useContext(SelectShellContext);
+    if (!shell) {
+        throw new Error("Select.* components must be rendered inside Select");
+    }
+    return shell;
+}
+/**
+ * Resolves the field's `id` (falling back to a generated id, since the id wires
+ * the label and imperative focus) and wires the imperative `focus()` handle to
+ * the trigger element. `name` is intentionally not synthesized: an unset `name`
+ * stays `undefined` so the field is simply excluded from form submission rather
+ * than submitted under a generated `useId()` value.
+ */
+function useSelectField(ref, idProp) {
+    const generatedId = React.useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
+    React.useImperativeHandle(ref, () => ({
+        focus: () => {
+            var _a;
+            if (typeof document !== "undefined") {
+                (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+    }), [id]);
+    return { id };
+}
+/**
+ * A prop-driven, labelled Select. On small web screens the options open in a
+ * `BottomSheet` instead of an anchored dropdown.
+ */
+function Select({ label, description, error, invalid, value, onValueChange, onBlur, onFocus, renderValue, name, id: idProp, ref, disabled, size, inline, children, }) {
+    const { id } = useSelectField(ref, idProp);
+    const renderSelectedValue = renderValue !== null && renderValue !== void 0 ? renderValue : capitalize;
+    const hasError = Boolean(error);
+    const isInvalid = hasError || Boolean(invalid);
+    const showDescription = !inline && Boolean(description) && !hasError;
+    const showError = !inline && hasError;
+    const { width } = jobberHooks.useWindowDimensions();
+    const isBottomSheet = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const shell = isBottomSheet ? selectBottomSheetShell : selectDropdownShell;
+    const ShellRoot = isBottomSheet ? SelectBottomSheetRoot : SelectDropdownRoot;
+    return (React.createElement(FieldDescription.FieldRoot, { className: classnames(styles.field, inline && styles.inline, size && styles[size], label && styles.hasLabel), disabled: disabled, invalid: isInvalid || undefined, name: name },
+        React.createElement("div", { className: styles.control },
+            label && (React.createElement(FieldDescription.FieldLabel, { className: styles.label, htmlFor: id }, label)),
+            React.createElement(SelectShellContext.Provider, { value: shell },
+                React.createElement(ShellRoot, { value: value, onValueChange: onValueChange, onBlur: onBlur, onFocus: onFocus, disabled: disabled, invalid: isInvalid, renderValue: renderSelectedValue, triggerId: id, triggerClassName: styles.trigger, ariaLabel: label }, children))),
+        showDescription && (React.createElement(FieldDescription.FieldDescription, { render: React.createElement(HelperText.HelperText, { message: description }) })),
+        showError && (React.createElement(FieldDescription.FieldError, { match: true, render: React.createElement(HelperText.HelperText, { message: error, status: "critical" }) }))));
+}
+/**
+ * Default value renderer for the closed trigger: capitalizes the value (e.g.
+ * `"active"` → `"Active"`). Consumers that need a different display pass
+ * `renderValue`.
+ */
+function capitalize(value) {
+    return value.length > 0
+        ? value.charAt(0).toUpperCase() + value.slice(1)
+        : value;
+}
+function SelectItem(props) {
+    const { Item } = useSelectShell();
+    return React.createElement(Item, Object.assign({}, props));
+}
+function SelectGroup(props) {
+    const { Group } = useSelectShell();
+    return React.createElement(Group, Object.assign({}, props));
+}
+function SelectGroupLabel(props) {
+    const { GroupLabel } = useSelectShell();
+    return React.createElement(GroupLabel, Object.assign({}, props));
+}
+function SelectSeparator(props) {
+    const { Separator } = useSelectShell();
+    return React.createElement(Separator, Object.assign({}, props));
+}
+Select.displayName = "Select";
+SelectItem.displayName = "Select.Item";
+SelectGroup.displayName = "Select.Group";
+SelectGroupLabel.displayName = "Select.GroupLabel";
+SelectSeparator.displayName = "Select.Separator";
+Select.Item = SelectItem;
+Select.Group = SelectGroup;
+Select.GroupLabel = SelectGroupLabel;
+Select.Separator = SelectSeparator;
+
+exports.Select = Select;