@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/color-area.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ColorArea as AriaColorArea } from "react-aria-components";
+import { colorEdge, ColorThumb } from "./control/color-thumb.js";
+import { colorValue } from "./control/color-value.js";
+import { useControlMetrics } from "./control/control.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { dimmedClass } from "./surface/surface.js";
+/**
+ * Two channels of a color, such as saturation and brightness, on a square
+ * painted with both ranges. Inside a ColorPicker it edits the picker's color.
+ */
+export const ColorArea = forwardRef(function ColorArea({ value, defaultValue, onChange, onChangeEnd, disabled, size, radius, className, style, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaColorArea, { ...properties, ref: ref, dir: direction, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (color) => onChange(colorValue(color)) } : {}), ...(onChangeEnd !== undefined ? { onChangeEnd: (color) => onChangeEnd(colorValue(color)) } : {}), isDisabled: disabled, className: dimmedClass(disabled ?? false, className), style: ({ defaultStyle }) => ({
+                ...defaultStyle,
+                position: "relative",
+                boxSizing: "border-box",
+                flexShrink: 0,
+                width: metrics.height * 6,
+                aspectRatio: "1",
+                // An area is a region, not a control: it keeps the Appearance radius.
+                borderRadius: resolveRadius(radius ?? "medium", metrics.visual.radius),
+                boxShadow: colorEdge(metrics),
+                ...style
+            }), children: _jsx(ColorThumb, { metrics: metrics }) }) });
+});

package/dist/color-field.d.ts

@@ -0,0 +1,17 @@
+import type { ColorFieldProps as AriaColorFieldProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, ControlOverrides | "value" | "defaultValue" | "onChange" | "className" | "style">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    /** A hex color, or `null` while the field is empty. */
+    readonly value?: string | null;
+    readonly defaultValue?: string | null;
+    readonly onChange?: (value: string | null) => void;
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}
+/**
+ * A color typed as text: a hex value, or one channel when `channel` is set.
+ * Inside a ColorPicker it edits the picker's color.
+ */
+export declare const ColorField: import("react").ForwardRefExoticComponent<ColorFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/color-field.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ColorField as AriaColorField, Input as AriaInput } from "react-aria-components";
+import { colorValue } from "./control/color-value.js";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { nativeTextStyle, TextWell } from "./control/text-control.js";
+import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
+import { dimmedClass } from "./surface/surface.js";
+/**
+ * A color typed as text: a hex value, or one channel when `channel` is set.
+ * Inside a ColorPicker it edits the picker's color.
+ */
+export const ColorField = forwardRef(function ColorField({ label, description, errorMessage, disabled, readOnly, required, invalid, value, defaultValue, onChange, size, color = "background", radius, style, className, placeholder, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    return _jsxs(AriaColorField, { ...properties, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (next) => onChange(next === null ? null : colorValue(next)) } : {}), className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(TextWell, { color: color, material: material, metrics: metrics, state: state, children: _jsx("input", { ...native }) }), style: { ...nativeTextStyle(metrics, false), fontVariantNumeric: "tabular-nums" } }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
+});

package/dist/color-picker.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { type ButtonActionProps } from "./button.js";
+import { type OpenStateProps } from "./control/open-state.js";
+import { type PopoverContentProps } from "./popover.js";
+export type ColorPickerRootProps = OpenStateProps & Readonly<{
+    /** A hex color. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    children: ReactNode;
+}>;
+/**
+ * Owns one color and the popover that edits it. The picker draws nothing of
+ * its own: its Trigger shows the color, and its Content holds whichever color
+ * components edit it, which all follow the picker's color.
+ */
+declare function ColorPickerRoot({ value, defaultValue, onChange, children, ...state }: ColorPickerRootProps): import("react").JSX.Element;
+export type ColorPickerTriggerProps = ButtonActionProps;
+export type ColorPickerContentProps = PopoverContentProps;
+export declare const ColorPicker: typeof ColorPickerRoot & {
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
+};
+export {};

package/dist/color-picker.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ColorPicker as AriaColorPicker, DialogTrigger as AriaDialogTrigger } from "react-aria-components";
+import { Button } from "./button.js";
+import { ColorSwatch } from "./color-swatch.js";
+import { colorValue } from "./control/color-value.js";
+import { useControlMetrics } from "./control/control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { PopoverContent, PopoverDialog } from "./popover.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+/**
+ * Owns one color and the popover that edits it. The picker draws nothing of
+ * its own: its Trigger shows the color, and its Content holds whichever color
+ * components edit it, which all follow the picker's color.
+ */
+function ColorPickerRoot({ value, defaultValue, onChange, children, ...state }) {
+    return _jsx(AriaColorPicker, { ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (color) => onChange(colorValue(color)) } : {}), children: _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children }) });
+}
+/** A Button that shows the picker's color before its own label, if any. */
+const ColorPickerTrigger = forwardRef(function ColorPickerTrigger({ children, size, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    return _jsxs(Button, { ...properties, ref: ref, size: size, children: [_jsx(ColorSwatch, { style: { width: metrics.indicator, height: metrics.indicator } }), children] });
+});
+/** The popover that holds the editing components, stacked by the Appearance spacing. */
+const ColorPickerContent = forwardRef(function ColorPickerContent({ children, style, placement = "bottom start", ...properties }, ref) {
+    const { spacing } = useVisual();
+    return _jsx(PopoverContent, { ...properties, ref: ref, placement: placement, style: { padding: scale(spacing, "medium"), ...style }, children: _jsx(PopoverDialog, { "aria-label": "Color", style: { display: "grid", gap: scale(spacing, "medium") }, children: children }) });
+});
+export const ColorPicker = Object.assign(ColorPickerRoot, { Trigger: ColorPickerTrigger, Content: ColorPickerContent });

package/dist/color-slider.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+import type { ColorSliderProps as AriaColorSliderProps } from "react-aria-components";
+import { type FieldProps } from "./control/control.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, "value" | "defaultValue" | "onChange" | "onChangeEnd" | "isDisabled" | "className" | "style" | "children">, Pick<FieldProps, "label" | "description"> {
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string) => void;
+    readonly onChangeEnd?: (value: string) => void;
+    readonly disabled?: boolean;
+    readonly size?: ScaleLevel;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * One channel of a color, such as hue or alpha, on a track painted with that
+ * channel's range. Inside a ColorPicker it edits the picker's color.
+ */
+export declare const ColorSlider: import("react").ForwardRefExoticComponent<ColorSliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/color-slider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ColorSlider as AriaColorSlider, Label, SliderOutput, SliderTrack } from "react-aria-components";
+import { colorEdge, ColorThumb } from "./control/color-thumb.js";
+import { colorValue } from "./control/color-value.js";
+import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { fieldStyle } from "./control/field.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
+/**
+ * One channel of a color, such as hue or alpha, on a track painted with that
+ * channel's range. Inside a ColorPicker it edits the picker's color.
+ */
+export const ColorSlider = forwardRef(function ColorSlider({ label, description, value, defaultValue, onChange, onChangeEnd, disabled, size, className, style, orientation = "horizontal", ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    const direction = resolveDirection(properties.dir, useDirection());
+    const vertical = orientation === "vertical";
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsxs(AriaColorSlider, { ...properties, ref: ref, dir: direction, orientation: orientation, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (color) => onChange(colorValue(color)) } : {}), ...(onChangeEnd !== undefined ? { onChangeEnd: (color) => onChangeEnd(colorValue(color)) } : {}), isDisabled: disabled, className: dimmedClass(disabled ?? false, className), style: fieldStyle(metrics, style), children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: metrics.gap }, children: [label != null && _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label }), _jsx(SliderOutput, { style: { fontVariantNumeric: "tabular-nums", opacity: controlOpacity.secondary } })] }), _jsx(SliderTrack, { style: ({ defaultStyle }) => ({
+                        ...defaultStyle,
+                        position: "relative",
+                        boxSizing: "border-box",
+                        width: vertical ? metrics.indicator : "100%",
+                        height: vertical ? metrics.height * 4 : metrics.indicator,
+                        // A track is round by its form.
+                        borderRadius: 9999,
+                        boxShadow: colorEdge(metrics)
+                    }), children: _jsx(ColorThumb, { metrics: metrics, center: vertical ? "left" : "top" }) }), description != null && _jsx("span", { style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+});

package/dist/color-swatch-picker.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from "react";
+import type { ColorSwatchPickerItemProps as AriaColorSwatchPickerItemProps, ColorSwatchPickerProps as AriaColorSwatchPickerProps } from "react-aria-components";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+export interface ColorSwatchPickerProps extends Omit<AriaColorSwatchPickerProps, "value" | "defaultValue" | "onChange" | "className" | "style">, RadiusProps {
+    /** The selected Item's value. */
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string) => void;
+    readonly size?: ScaleLevel;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export interface ColorSwatchPickerItemProps extends Omit<AriaColorSwatchPickerItemProps, "color" | "isDisabled" | "className" | "style" | "children"> {
+    /** The color this Item stands for; it is also the value it selects. */
+    readonly value: string;
+    readonly disabled?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const ColorSwatchPicker: import("react").ForwardRefExoticComponent<ColorSwatchPickerProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<ColorSwatchPickerItemProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/color-swatch-picker.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem } from "react-aria-components";
+import { colorValue } from "./control/color-value.js";
+import { transition, useControlMetrics } from "./control/control.js";
+import { ColorSwatch } from "./color-swatch.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { colorOpacity } from "./foundation/color.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
+const SwatchPickerStyleContext = createContext(null);
+/** One color chosen from a set of swatches; arrow keys move between them. */
+const ColorSwatchPickerRoot = forwardRef(function ColorSwatchPicker({ value, defaultValue, onChange, size, radius, className, style, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    const direction = resolveDirection(properties.dir, useDirection());
+    const context = useMemo(() => ({ metrics, size, radius }), [metrics, size, radius]);
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(SwatchPickerStyleContext.Provider, { value: context, children: _jsx(AriaColorSwatchPicker, { ...properties, ref: ref, dir: direction, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), onChange: color => onChange?.(colorValue(color)), className: className, style: { display: "flex", flexWrap: "wrap", gap: metrics.gap, ...style } }) }) });
+});
+/** One selectable swatch. Selection draws a ring in the text color around it. */
+const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem({ value, disabled, className, style, ...properties }, ref) {
+    const inherited = useContext(SwatchPickerStyleContext);
+    if (inherited == null)
+        throw new Error("ColorSwatchPicker.Item must be used inside ColorSwatchPicker");
+    const { metrics, size, radius } = inherited;
+    const { colors } = metrics.visual;
+    return _jsx(AriaColorSwatchPickerItem, { ...properties, ref: ref, color: value, isDisabled: disabled, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", style: ({ isSelected, isFocusVisible, isDisabled }) => ({
+            ...transition(metrics.visual, "outline-color"),
+            display: "flex",
+            borderRadius: metrics.radius,
+            outline: `2px solid ${isFocusVisible ? colorOpacity(colors.primary, 0.6) : isSelected ? colors.foreground : "transparent"}`,
+            outlineOffset: 2,
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            ...style
+        }), children: _jsx(ColorSwatch, { size: size, radius: radius }) });
+});
+export const ColorSwatchPicker = Object.assign(ColorSwatchPickerRoot, { Item: ColorSwatchPickerItem });

package/dist/color-swatch.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from "react";
+import type { ColorSwatchProps as AriaColorSwatchProps } from "react-aria-components";
+import { type Color } from "./foundation/color.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, "color" | "className" | "style">, RadiusProps {
+    /**
+     * The color shown: a role, a level, or any CSS color. Inside a ColorPicker
+     * or a ColorSwatchPicker Item it defaults to that owner's color.
+     */
+    readonly color?: Color;
+    /** A control-sized square at each level. */
+    readonly size?: ScaleLevel;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** One color shown as a square, with a checkerboard beneath translucent colors. */
+export declare const ColorSwatch: import("react").ForwardRefExoticComponent<ColorSwatchProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/color-swatch.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ColorSwatch as AriaColorSwatch } from "react-aria-components";
+import { colorEdge } from "./control/color-thumb.js";
+import { useControlMetrics } from "./control/control.js";
+import { resolveColor } from "./foundation/color.js";
+/** One color shown as a square, with a checkerboard beneath translucent colors. */
+export const ColorSwatch = forwardRef(function ColorSwatch({ color, size, radius, className, style, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    return _jsx(AriaColorSwatch, { ...properties, ref: ref, ...(color === undefined ? {} : { color: resolveColor(color, metrics.visual.colors) }), className: className, style: ({ defaultStyle }) => ({
+            ...defaultStyle,
+            boxSizing: "border-box",
+            flexShrink: 0,
+            width: metrics.height,
+            height: metrics.height,
+            borderRadius: metrics.radius,
+            boxShadow: colorEdge(metrics),
+            ...style
+        }) });
+});

package/dist/combo-box.d.ts

@@ -1,12 +1,11 @@
+import type { ReactNode } from "react";
 import type { ComboBoxProps as AriaComboBoxProps } from "react-aria-components";
-import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { RadiusProps } from "./radius.js";
-import type { SelectOption } from "./select.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-export type ComboBoxOption = SelectOption;
-export interface ComboBoxProps extends Omit<AriaComboBoxProps<ComboBoxOption>, ControlOverrides | "allowsCustomValue" | "defaultItems" | "defaultInputValue" | "defaultSelectedKey" | "defaultValue" | "disabledKeys" | "inputValue" | "isReadOnly" | "items" | "onChange" | "onInputChange" | "onSelectionChange" | "selectedKey" | "selectionMode" | "value">, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
-    readonly options: readonly ComboBoxOption[];
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import { type RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface ComboBoxProps extends Omit<AriaComboBoxProps<object>, ControlOverrides | "allowsCustomValue" | "defaultItems" | "defaultInputValue" | "defaultSelectedKey" | "defaultValue" | "disabledKeys" | "inputValue" | "items" | "onChange" | "onInputChange" | "onSelectionChange" | "selectedKey" | "selectionMode" | "value" | "onOpenChange" | "allowsEmptyCollection" | "shouldFocusWrap">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    /** `ComboBox.Item` and `ComboBox.Section` entries filtered by the typed query. */
+    readonly children: ReactNode;
     readonly value?: string | null;
     readonly defaultValue?: string | null;
     readonly onChange?: (value: string | null) => void;
@@ -15,6 +14,15 @@ export interface ComboBoxProps extends Omit<AriaComboBoxProps<ComboBoxOption>, C
     readonly onInputChange?: (value: string) => void;
     readonly placeholder?: string;
     readonly readOnly?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Whether the list can open while no Item matches. */
+    readonly openWhenEmpty?: boolean;
+    /** Whether arrow keys wrap from the last Item to the first. */
+    readonly focusWrap?: boolean;
 }
-/** A searchable single-selection field whose query filters string-valued options. */
-export declare const ComboBox: import("react").ForwardRefExoticComponent<ComboBoxProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A searchable single-choice field whose options are its Items. */
+export declare const ComboBox: import("react").ForwardRefExoticComponent<ComboBoxProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("./list-box.js").ListBoxItemComponent;
+    Section: import("./list-box.js").ListBoxSectionComponent;
+    Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;
+};

package/dist/combo-box.js

@@ -1,68 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { Button, ComboBox as AriaComboBox, Group, Input as AriaInput } from "react-aria-components";
-import { controlPaint, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
-import { SurfaceField } from "./control-surface.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import FieldStyle, { textControlClass } from "./field-style.js";
+import { forwardRef } from "react";
+import { Button as AriaButton, ComboBox as AriaComboBox, Group, Input as AriaInput } from "react-aria-components";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { nativeTextStyle } from "./control/text-control.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
+import { resolveRadius } from "./foundation/radius.js";
 import { ListBox } from "./list-box.js";
 import { PopoverContent } from "./popover.js";
 import { ScrollArea } from "./scroll-area.js";
-/** A searchable single-selection field whose query filters string-valued options. */
-export const ComboBox = forwardRef(function ComboBox({ label, description, errorMessage, disabled = false, readOnly = false, required = false, invalid = false, options, value, defaultValue, onChange, inputValue, defaultInputValue, onInputChange, placeholder, size = "medium", color, radius = "medium", style, material, shadow, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+import { Chevron } from "./select.js";
+import { dimmedClass } from "./surface/surface.js";
+/** A searchable single-choice field whose options are its Items. */
+const ComboBoxRoot = forwardRef(function ComboBox({ label, description, errorMessage, disabled = false, readOnly = false, required = false, invalid = false, children, value, defaultValue, onChange, inputValue, defaultInputValue, onInputChange, placeholder, size, color = "background", radius, style, className, material, onOpenChange, openWhenEmpty, focusWrap, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    // The list shell keeps the Appearance radius at the chosen level.
+    const shell = resolveRadius(radius ?? "medium", metrics.visual.radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    const disabledValues = useMemo(() => options.filter(option => option.disabled).map(option => option.value), [options]);
-    return _jsx(AriaComboBox, { ...properties, ref: ref, dir: direction, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), inputValue: inputValue, defaultInputValue: defaultInputValue, onInputChange: onInputChange, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(Group, { style: group => ({
-                        position: "relative",
-                        minWidth: 0,
-                        height: theme.height,
-                        borderRadius: theme.radius,
-                        outline: group.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-                        outlineOffset: 1
-                    }), children: group => _jsxs(SurfaceField, { material: material, shadow: shadow, radius: theme.radius, paint: controlPaint(theme, group.isFocusWithin, group.isInvalid, group.isHovered), style: {
-                            position: "absolute",
-                            inset: 0,
-                            gridTemplateColumns: "minmax(0, 1fr) auto"
-                        }, children: [_jsx(AriaInput, { className: textControlClass, placeholder: placeholder, style: {
-                                    appearance: "none",
-                                    boxSizing: "border-box",
-                                    width: "100%",
-                                    minWidth: 0,
-                                    height: theme.height,
-                                    paddingBlock: 0,
-                                    paddingInlineStart: Math.max(8, theme.spacing),
-                                    paddingInlineEnd: theme.gap,
-                                    border: 0,
-                                    borderRadius: "inherit",
-                                    outline: "none",
-                                    background: "transparent",
-                                    color: "inherit",
-                                    caretColor: "currentColor",
-                                    font: "inherit",
-                                    lineHeight: 1.5
-                                } }), _jsx(Button, { "aria-label": "Show options", style: {
-                                    ...theme.transition,
-                                    display: "grid",
-                                    placeItems: "center",
-                                    width: theme.height,
-                                    height: theme.height,
-                                    padding: 0,
-                                    border: 0,
-                                    borderRadius: "inherit",
-                                    outline: "none",
-                                    background: "transparent",
-                                    color: "inherit",
-                                    cursor: disabled || readOnly ? "default" : "pointer"
-                                }, children: _jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: {
-                                        ...theme.transition,
-                                        transitionProperty: "transform",
-                                        transform: `rotate(${state.isOpen ? 180 : 0}deg)`
-                                    }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) }) })] }) }), _jsx(PopoverContent, { dir: direction, placement: "bottom start", offset: theme.gap, style: {
+    return _jsx(AriaComboBox, { ...properties, onOpenChange: onOpenChange === undefined ? undefined : open => onOpenChange(open), allowsEmptyCollection: openWhenEmpty, shouldFocusWrap: focusWrap, ref: ref, dir: direction, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), onChange: key => onChange?.(key == null ? null : String(key)), inputValue: inputValue, defaultInputValue: defaultInputValue, onInputChange: onInputChange, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, className: dimmedClass(disabled, className), style: fieldStyle(metrics, style), children: state => _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsxs(Group, { render: surfaceRender("div", group => ({
+                        color,
+                        depth: "recessed",
+                        material,
+                        radius: metrics.radius,
+                        interaction: { hovered: group.isHovered, focusVisible: group.isFocusWithin, invalid: group.isInvalid, disabled: group.isDisabled }
+                    })), style: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", alignItems: "center", minWidth: 0, height: metrics.height }, children: [_jsx(AriaInput, { className: textControlClass, placeholder: placeholder, style: { ...nativeTextStyle(metrics, false), paddingInlineEnd: metrics.gap } }), _jsx(AriaButton, { "aria-label": "Show options", style: {
+                                display: "grid",
+                                placeItems: "center",
+                                width: metrics.height,
+                                height: metrics.height,
+                                padding: 0,
+                                border: 0,
+                                borderRadius: "inherit",
+                                outline: "none",
+                                background: "transparent",
+                                color: "inherit",
+                                cursor: disabled || readOnly ? "default" : "pointer"
+                            }, children: _jsx(Chevron, { metrics: metrics, open: state.isOpen }) })] }), _jsx(PopoverContent, { dir: direction, placement: "bottom start", offset: metrics.gap, radius: shell, style: {
                         width: "var(--trigger-width)",
-                        maxHeight: `min(calc(100vh - ${theme.spacing * 2}px), ${theme.height * 8}px)`,
+                        maxHeight: `min(calc(100vh - ${metrics.spacing * 2}px), ${metrics.height * 8}px)`,
                         padding: 0,
                         display: "flex",
                         flexDirection: "column"
-                    }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { color: color, radius: radius, size: size, disabledValues: disabledValues, children: options.map(option => _jsx(ListBox.Item, { id: option.value, textValue: option.label, disabled: option.disabled, children: option.label }, option.value)) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
+                    }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { size: size, children: children }) }) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] }) });
+});
+/** A searchable single-choice field whose options are its Items. */
+export const ComboBox = Object.assign(ComboBoxRoot, {
+    Item: ListBox.Item,
+    Section: ListBox.Section,
+    Header: ListBox.Header
 });

package/dist/context-menu.d.ts

@@ -1,20 +1,24 @@
 import type { ComponentProps } from "react";
 import { Pressable as AriaPressable } from "react-aria-components";
-import type { MenuTriggerProps as AriaMenuTriggerProps } from "react-aria-components";
+import { type OverlayRootProps } from "./control/open-state.js";
 import { type PopoverContentProps } from "./popover.js";
-export type ContextMenuRootProps = Omit<AriaMenuTriggerProps, "trigger">;
-export declare function ContextMenuRoot(properties: ContextMenuRootProps): import("react").JSX.Element;
-export type ContextMenuTriggerProps = ComponentProps<typeof AriaPressable>;
-export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
-export type ContextMenuContentProps = Omit<PopoverContentProps, "isNonModal">;
-export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLElement>>;
+export type ContextMenuRootProps = OverlayRootProps;
+export declare function ContextMenuRoot({ children, ...state }: ContextMenuRootProps): import("react").JSX.Element;
+/** The element that opens the menu when it is right-clicked or long-pressed. */
+export interface ContextMenuTriggerProps {
+    readonly children: ComponentProps<typeof AriaPressable>["children"];
+    readonly disabled?: boolean;
+}
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+export type ContextMenuContentProps = PopoverContentProps;
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
 /** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
 export declare const ContextMenu: typeof ContextMenuRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
-    Content: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
     Menu: import("./menu.js").MenuRootComponent & {
         Item: import("./menu.js").MenuItemComponent;
-        Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+        Section: <T extends object = object>(properties: import("./menu.js").MenuSectionProps<T>) => import("react").ReactElement | null;
         Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;
         Separator: import("react").ForwardRefExoticComponent<import("react-aria-components").SeparatorProps & import("react").RefAttributes<HTMLElement>>;
     };

package/dist/context-menu.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useContext, useEffect, useRef } from "react";
 import { MenuTrigger as AriaMenuTrigger, OverlayTriggerStateContext, Pressable as AriaPressable } from "react-aria-components";
+import { ariaOpenState } from "./control/open-state.js";
 import { Menu } from "./menu.js";
-import { PopoverContent } from "./popover.js";
-export function ContextMenuRoot(properties) {
-    return _jsx(AriaMenuTrigger, { ...properties, trigger: "contextMenu" });
+import { MenuContent } from "./popover.js";
+export function ContextMenuRoot({ children, ...state }) {
+    return _jsx(AriaMenuTrigger, { ...ariaOpenState(state), trigger: "contextMenu", children: children });
 }
-export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger(properties, ref) {
-    return _jsx(AriaPressable, { ...properties, ref: ref });
+export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger({ children, disabled }, ref) {
+    return _jsx(AriaPressable, { ref: ref, isDisabled: disabled, children: children });
 });
 function setRef(ref, value) {
     if (typeof ref === "function")
@@ -34,7 +35,7 @@ export const ContextMenuContent = forwardRef(function ContextMenuContent(propert
         document.addEventListener("pointerdown", dismiss, true);
         return () => document.removeEventListener("pointerdown", dismiss, true);
     }, [state]);
-    return _jsx(PopoverContent, { ...properties, ref: ref, isNonModal: true });
+    return _jsx(MenuContent, { ...properties, ref: ref, nonModal: true });
 });
 /** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
 export const ContextMenu = Object.assign(ContextMenuRoot, {

package/dist/control/color-thumb.d.ts

@@ -0,0 +1,13 @@
+import { type ControlMetrics } from "./control.js";
+/**
+ * The handle of a ColorSlider or ColorArea: the chosen color inside a ring of
+ * the light Appearance color, like every thumb, set apart from any gradient by
+ * a hairline in the dark Appearance color.
+ */
+export declare function ColorThumb({ metrics, center }: Readonly<{
+    metrics: ControlMetrics;
+    /** The axis React Aria leaves unpositioned on a one-channel track. */
+    center?: "top" | "left";
+}>): import("react").JSX.Element;
+/** The edge that sets a color gradient apart from whatever it sits on. */
+export declare function colorEdge(metrics: ControlMetrics): string;

package/dist/control/color-thumb.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorThumb as AriaColorThumb } from "react-aria-components";
+import { colorOpacity, darkCanvas, lightColor } from "../foundation/color.js";
+import { transition } from "./control.js";
+/**
+ * The handle of a ColorSlider or ColorArea: the chosen color inside a ring of
+ * the light Appearance color, like every thumb, set apart from any gradient by
+ * a hairline in the dark Appearance color.
+ */
+export function ColorThumb({ metrics, center }) {
+    const { colors } = metrics.visual;
+    const dark = darkCanvas(colors) ? colors.background : colors.foreground;
+    const size = metrics.indicator + 4;
+    return _jsx(AriaColorThumb, { style: ({ defaultStyle, isDragging, isFocusVisible, isDisabled }) => ({
+            ...defaultStyle,
+            ...transition(metrics.visual, "scale, outline-color"),
+            ...(center === undefined ? {} : { [center]: "50%" }),
+            boxSizing: "border-box",
+            width: size,
+            height: size,
+            borderRadius: "50%",
+            border: `3px solid ${lightColor(colors)}`,
+            boxShadow: `0 0 0 1px ${colorOpacity(dark, 0.3)}, 0 1px 3px ${colorOpacity(dark, 0.3)}`,
+            outline: `3px solid ${isFocusVisible ? colorOpacity(colors.primary, 0.34) : "transparent"}`,
+            outlineOffset: 1,
+            scale: isDragging ? "0.92" : "1",
+            cursor: isDisabled ? "not-allowed" : isDragging ? "grabbing" : "grab"
+        }) });
+}
+/** The edge that sets a color gradient apart from whatever it sits on. */
+export function colorEdge(metrics) {
+    return `inset 0 0 0 1px ${colorOpacity(metrics.visual.colors.foreground, 0.12)}`;
+}

package/dist/control/color-value.d.ts

@@ -0,0 +1,6 @@
+import type { Color as AriaColor } from "react-aria-components";
+/**
+ * How React UI exchanges a color value: a hex string, with an alpha pair only
+ * when the color is translucent. React Aria's Color objects stay internal.
+ */
+export declare function colorValue(color: AriaColor): string;

package/dist/control/color-value.js

@@ -0,0 +1,7 @@
+/**
+ * How React UI exchanges a color value: a hex string, with an alpha pair only
+ * when the color is translucent. React Aria's Color objects stay internal.
+ */
+export function colorValue(color) {
+    return color.getChannelValue("alpha") < 1 ? color.toString("hexa") : color.toString("hex");
+}