@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/progress-bar.js

@@ -1,46 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Label, ProgressBar as AriaProgressBar } from "react-aria-components";
-import { motion } from "motion/react";
-import { controlFontWeight, controlOpacity, fieldStyle, useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-/** Determinate or indeterminate progress for an operation over time. */
-export const ProgressBar = forwardRef(function ProgressBar({ className, color = "default:base", indeterminate = false, label, size = "medium", style, value, minValue = 0, maxValue = 100, ...properties }, ref) {
-    const theme = useControlTheme({ color, size });
-    const direction = resolveDirection(properties.dir, useDirection());
-    const thickness = Math.max(2, Math.round(theme.spacing / 2));
-    const sweep = direction === "rtl" ? ["100%", "-350%"] : ["-100%", "350%"];
-    const duration = typeof theme.motionTransition.duration === "number"
-        ? theme.motionTransition.duration * 10
-        : 1.2;
-    return _jsx(AriaProgressBar, { ...properties, ref: ref, className: className, value: value, minValue: minValue, maxValue: maxValue, isIndeterminate: indeterminate, style: {
-            ...fieldStyle(theme, false),
-            width: "100%",
-            ...style
-        }, children: state => {
+import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { fieldStyle } from "./control/field.js";
+import { resolveColor } from "./foundation/color.js";
+import MotionStyle from "./foundation/motion-style.js";
+import { SurfaceView } from "./surface/surface.js";
+/** Progress over time: a recessed rail filled in the owner's color. */
+export const ProgressBar = forwardRef(function ProgressBar({ className, color = "primary", indeterminate = false, label, material, size, style, value, minValue = 0, maxValue = 100, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    const thickness = Math.max(4, Math.round(metrics.spacing / 2));
+    const fill = resolveColor(color, metrics.visual.colors);
+    const moving = indeterminate && metrics.visual.duration > 0;
+    return _jsx(AriaProgressBar, { ...properties, ref: ref, className: className, value: value, minValue: minValue, maxValue: maxValue, isIndeterminate: indeterminate, style: fieldStyle(metrics, { width: "100%", ...style }), children: state => {
             const output = properties.valueLabel ?? state.valueText;
-            const showHeading = label != null || (!state.isIndeterminate && output != null);
-            const moving = state.isIndeterminate && theme.animations;
-            return _jsxs(_Fragment, { children: [showHeading && _jsxs("span", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [label != null && _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label }), !state.isIndeterminate && output != null && _jsx("span", { style: { fontVariantNumeric: "tabular-nums", opacity: controlOpacity.secondary }, children: output })] }), _jsx("span", { "data-progress-track": "", "aria-hidden": "true", style: {
-                            position: "relative",
-                            display: "block",
-                            width: "100%",
-                            height: thickness,
-                            overflow: "hidden",
-                            borderRadius: thickness,
-                            background: theme.paints.subtle.rest.background
-                        }, children: _jsx(motion.span, { "data-progress-fill": "", initial: false, animate: { x: moving ? sweep : "0%" }, transition: moving
-                                ? { ...theme.motionTransition, duration, repeat: Infinity }
-                                : theme.motionTransition, style: {
-                                ...theme.transition,
+            const heading = label != null || (!state.isIndeterminate && output != null);
+            return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), heading && _jsxs("span", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: metrics.gap }, children: [label != null && _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label }), !state.isIndeterminate && output != null && _jsx("span", { style: { fontVariantNumeric: "tabular-nums", opacity: controlOpacity.secondary }, children: output })] }), _jsx(SurfaceView, { as: "span", "aria-hidden": "true", "data-progress-track": "", color: "background", depth: "recessed", material: material, radius: "full", style: { display: "block", height: thickness, overflow: "hidden" }, children: _jsx("span", { "data-progress-fill": "", style: {
+                                ...transition(metrics.visual, "width", 1.5),
                                 position: "absolute",
                                 insetBlock: 0,
-                                insetInlineStart: state.isIndeterminate && !moving ? "30%" : 0,
+                                insetInlineStart: state.isIndeterminate ? "30%" : 0,
                                 display: "block",
                                 width: state.isIndeterminate ? "40%" : `${state.percentage ?? 0}%`,
                                 borderRadius: "inherit",
-                                background: theme.paints.palette.rest.background,
-                                transitionProperty: "width"
+                                background: fill,
+                                animation: moving ? `phreshos-ui-sweep ${Math.max(900, metrics.visual.appearance.transaction.duration * 8)}ms ${metrics.visual.easing} infinite` : undefined
                             } }) })] });
         } });
 });

package/dist/radio.d.ts

@@ -1,21 +1,24 @@
-import type { RadioRootProps as BaseRadioProps } from "@base-ui/react/radio";
-import type { RadioGroupProps as BaseRadioGroupProps } from "@base-ui/react/radio-group";
-import type { ReactNode } from "react";
-import type { ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-export interface RadioGroupProps extends Omit<BaseRadioGroupProps<string | null>, "children" | "className" | "defaultValue" | "disabled" | "onChange" | "onValueChange" | "readOnly" | "required" | "style" | "value">, ControlProps, FieldProps, MaterialOverrides, ShadowOverrides {
+import type { CSSProperties, ReactNode } from "react";
+import type { RadioFieldProps, RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, ControlOverrides | "value" | "defaultValue" | "onChange">, ControlProps, FieldProps, MaterialOverrides {
     readonly children: ReactNode;
     readonly value?: string | null;
     readonly defaultValue?: string | null;
+    /** Receives the newly selected value; a radio selection cannot be cleared. */
     readonly onChange?: (value: string) => void;
     readonly readOnly?: boolean;
-    readonly orientation?: "horizontal" | "vertical";
 }
-export interface RadioGroupItemProps extends Omit<BaseRadioProps<string>, "children" | "className" | "disabled" | "readOnly" | "required" | "style" | "value">, ControlProps, Pick<FieldProps, "label" | "description">, MaterialOverrides, ShadowOverrides {
+export interface RadioGroupItemProps extends Omit<RadioFieldProps, "children" | "className" | "isDisabled" | "style" | "value"> {
     readonly value: string;
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
 }
-/** One exclusive-choice field whose context-dependent options are grouped as Items. */
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** One exclusive-choice field whose options are its Items. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/radio.js

@@ -1,47 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Base UI accepts direction directly; React Aria derives these keys from locale.
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
-import { createContext, forwardRef, useContext, useId, useState } from "react";
-import { controlFontWeight, controlOpacity, fieldStyle, useControlTheme } from "./control.js";
-import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Label, RadioButton, RadioField, RadioGroup as AriaRadioGroup, Text } from "react-aria-components";
+import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { FieldFeedback, fieldStyle } from "./control/field.js";
+import { ToggleIndicator, toggleRowStyle } from "./control/toggle.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
 const RadioStyleContext = createContext(null);
-/** One string value selected from its Items, with direction-aware arrow navigation. */
-const RadioGroupRoot = forwardRef(function RadioGroupRoot({ label, description, errorMessage, children, disabled = false, readOnly = false, required = false, invalid = false, value, defaultValue, onChange, orientation = "vertical", size, color, style, className, material, shadow, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...properties }, ref) {
-    const theme = useControlTheme({ size, color });
+/** One string value chosen from its Items. */
+const RadioGroupRoot = forwardRef(function RadioGroup({ label, description, errorMessage, children, disabled, readOnly, required, invalid, value, defaultValue, onChange, orientation = "vertical", size, color = "primary", style, className, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
     const direction = resolveDirection(properties.dir, useDirection());
-    const labelId = useId();
-    const descriptionId = useId();
-    const errorId = useId();
-    const describedBy = [ariaDescribedBy, description != null ? descriptionId : null, invalid && errorMessage != null ? errorId : null].filter(Boolean).join(" ") || undefined;
-    const root = _jsxs(BaseRadioGroup, { ...properties, ref: ref, className: className, value: value, defaultValue: defaultValue, onValueChange: next => {
-            if (next != null)
-                onChange?.(next);
-        }, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-labelledby": ariaLabelledBy ?? (label != null ? labelId : undefined), "aria-describedby": describedBy, style: fieldStyle(theme, disabled, style), children: [label != null && _jsx("div", { id: labelId, style: { fontWeight: controlFontWeight }, children: label }), _jsx(RadioStyleContext.Provider, { value: { size, color, disabled, invalid, readOnly, material, shadow }, children: _jsx("div", { style: { display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", gap: theme.gap, flexWrap: "wrap" }, children: children }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description }), invalid && errorMessage != null && _jsx("span", { id: errorId, style: { fontSize: "0.92em", color: theme.danger }, children: errorMessage })] });
-    return _jsx(BaseDirectionProvider, { direction: direction, children: root });
+    const context = useMemo(() => ({ color, direction, material, metrics }), [color, direction, material, metrics]);
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsxs(AriaRadioGroup, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), orientation: orientation, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), onChange: next => onChange?.(next), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [label != null && _jsx(Label, { style: { fontWeight: controlFontWeight }, children: label }), _jsx(RadioStyleContext.Provider, { value: context, children: _jsx("div", { style: { display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", flexWrap: "wrap", gap: metrics.gap }, children: children }) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] }) });
 });
-/** An option in a RadioGroup. Selection and validation belong to the group. */
-const RadioGroupItem = forwardRef(function RadioGroupItem({ label, description, value, disabled = false, size, color, style, className, material, shadow, onFocus, onBlur, "aria-describedby": ariaDescribedBy, ...properties }, ref) {
+/** One option in a RadioGroup. Selection, validation, and paint belong to the group. */
+const RadioGroupItem = forwardRef(function RadioGroupItem({ label, description, disabled, className, style, ...properties }, ref) {
     const inherited = useContext(RadioStyleContext);
     if (inherited == null)
         throw new Error("RadioGroup.Item must be used inside RadioGroup");
-    const theme = useControlTheme({ size: size ?? inherited.size, color: color ?? inherited.color });
-    const descriptionId = useId();
-    const [hovered, setHovered] = useState(false);
-    const [pressed, setPressed] = useState(false);
-    const [focusVisible, setFocusVisible] = useState(false);
-    const describedBy = [ariaDescribedBy, description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined;
-    return _jsxs("div", { ref: ref, className: className, style: fieldStyle(theme, disabled && !inherited.disabled, style), children: [_jsx(BaseRadio.Root, { ...properties, value: value, disabled: disabled, "aria-describedby": describedBy, onPointerEnter: () => setHovered(true), onPointerLeave: () => { setHovered(false); setPressed(false); }, onPointerDown: () => setPressed(true), onPointerUp: () => setPressed(false), onFocus: event => {
-                    setFocusVisible(event.currentTarget.matches(":focus-visible"));
-                    onFocus?.(event);
-                }, onBlur: event => {
-                    setFocusVisible(false);
-                    onBlur?.(event);
-                }, style: state => toggleStyle(theme, state.disabled, state.readOnly), render: (native, state) => _jsxs("span", { ...native, children: [_jsx(ToggleIndicator, { kind: "radio", material: material ?? inherited.material, shadow: shadow ?? inherited.shadow, theme: theme, selected: state.checked, focused: focusVisible, invalid: inherited.invalid, hovered: !state.disabled && !state.readOnly && hovered, pressed: !state.disabled && !state.readOnly && pressed }), label] }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] });
+    const { color, direction, material, metrics } = inherited;
+    // Items inherit the group's text scale; only the group root applies it.
+    return _jsxs(RadioField, { ...properties, ref: ref, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", isDisabled: disabled, style: { display: "grid", gap: 2, minWidth: 0, ...style }, children: [_jsx(RadioButton, { style: state => toggleRowStyle(metrics, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "radio", direction: direction, color: color, material: material, metrics: metrics, state: {
+                                selected: state.isSelected,
+                                hovered: !state.isReadOnly && state.isHovered,
+                                pressed: !state.isReadOnly && state.isPressed,
+                                focusVisible: state.isFocusVisible,
+                                invalid: state.isInvalid,
+                                disabled: state.isDisabled
+                            } }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: controlOpacity.secondary, paddingInlineStart: metrics.indicator + metrics.gap }, children: description })] });
 });
-/** One exclusive-choice field whose context-dependent options are grouped as Items. */
+/** One exclusive-choice field whose options are its Items. */
 export const RadioGroup = Object.assign(RadioGroupRoot, {
     Item: RadioGroupItem
 });

package/dist/range-calendar.d.ts

@@ -1,9 +1,9 @@
 import type { CalendarDate } from "@internationalized/date";
 import type { RangeCalendarProps as AriaRangeCalendarProps } from "react-aria-components";
-import { type ControlOverrides, type ControlProps } from "./control.js";
+import { type ControlOverrides, type ControlProps } from "./control/control.js";
 import type { DateRange } from "./date-range.js";
-import type { RadiusProps } from "./radius.js";
-type RangeCalendarOverrides = ControlOverrides | "children" | "isReadOnly" | "isInvalid" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "visibleDuration" | "createCalendar" | "errorMessage" | "validationState";
+import type { RadiusProps } from "./foundation/radius.js";
+type RangeCalendarOverrides = ControlOverrides | "children" | "isReadOnly" | "isInvalid" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "visibleDuration" | "createCalendar" | "errorMessage" | "validationState" | "allowsNonContiguousRanges";
 export interface RangeCalendarProps extends Omit<AriaRangeCalendarProps<CalendarDate>, RangeCalendarOverrides>, ControlProps, RadiusProps {
     readonly value?: DateRange | null;
     readonly defaultValue?: DateRange | null;
@@ -11,6 +11,8 @@ export interface RangeCalendarProps extends Omit<AriaRangeCalendarProps<Calendar
     readonly minValue?: CalendarDate | null;
     readonly maxValue?: CalendarDate | null;
     readonly isDateUnavailable?: (date: CalendarDate, anchorDate: CalendarDate | null) => boolean;
+    /** Whether a range may include unavailable dates. */
+    readonly nonContiguous?: boolean;
     readonly readOnly?: boolean;
     readonly invalid?: boolean;
 }

package/dist/range-calendar.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { RangeCalendar as AriaRangeCalendar } from "react-aria-components";
-import { AriaDirectionBoundary } from "./aria-direction.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { CalendarLayout, calendarRootStyle } from "./calendar-layout.js";
-import { useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { useControlMetrics } from "./control/control.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
 /** A locale-aware month view for selecting an inclusive date range. */
-export const RangeCalendar = forwardRef(function RangeCalendar({ disabled, readOnly, invalid, size, color, radius, style, className, isDateUnavailable, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+export const RangeCalendar = forwardRef(function RangeCalendar({ disabled, readOnly, invalid, size, color, radius, style, className, isDateUnavailable, nonContiguous, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaRangeCalendar, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaRangeCalendar, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, allowsNonContiguousRanges: nonContiguous, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null
                 ? undefined
-                : (date, anchorDate) => isDateUnavailable(date, anchorDate), style: calendarRootStyle(theme, disabled, style), children: _jsx(CalendarLayout, { color: color, range: true, size: size, theme: theme }) }) });
+                : (date, anchorDate) => isDateUnavailable(date, anchorDate), style: calendarRootStyle(metrics, style), children: _jsx(CalendarLayout, { color: color ?? "primary", range: true, size: size, metrics: metrics }) }) });
 });

package/dist/scroll-area.d.ts

@@ -1,11 +1,11 @@
 import type { ComponentPropsWithoutRef, Ref, ReactNode, UIEventHandler } from "react";
-import type { ControlColor } from "./control.js";
+import { type Color } from "./foundation/color.js";
 export type ScrollAreaAxis = "vertical" | "horizontal" | "both";
 export interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "color" | "onScroll"> {
     readonly axis?: ScrollAreaAxis;
     readonly children?: ReactNode;
     /** Base color from which scrollbar states are derived. */
-    readonly color?: ControlColor;
+    readonly color?: Color;
     readonly onScroll?: UIEventHandler<HTMLDivElement>;
     readonly viewportRef?: Ref<HTMLDivElement>;
 }

package/dist/scroll-area.js

@@ -2,22 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useState } from "react";
-import { useResolvedAppearance } from "./appearance-context.js";
-import { colorOpacity, resolveColor } from "./color.js";
-import { transitionTiming } from "./motion-style.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { transition as timing } from "./control/control.js";
+import { colorOpacity, resolveColor } from "./foundation/color.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { useVisual } from "./foundation/visual.js";
 /** A native scrolling viewport with locally owned React UI scrollbars. */
 export const ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", children, color, onScroll, style, viewportRef, ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const { appearance } = resolved;
+    const visual = useVisual();
+    const { appearance } = visual;
     const direction = resolveDirection(properties.dir, useDirection());
-    const foreground = resolveColor(color ?? "foreground:base", resolved.colors);
-    const radius = Math.min(appearance.radius, 8);
+    const foreground = resolveColor(color ?? "foreground", visual.colors);
+    // A scrollbar thumb is a pill at any thickness.
+    const radius = 9999;
     const thickness = Math.max(8, appearance.spacing);
     const inset = Math.max(2, thickness / 3);
     const vertical = axis === "vertical" || axis === "both";
     const horizontal = axis === "horizontal" || axis === "both";
-    const transition = transitionTiming(resolved.transaction, resolved.preferences.animations);
+    const transition = timing(visual, "opacity");
     const root = _jsxs(BaseScrollArea.Root, { ...properties, "data-phreshos-scroll-area": "", ref: ref, style: {
             ...style,
             display: "flex",

package/dist/segmented-control.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { ToggleButtonGroupProps as AriaToggleButtonGroupProps, ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
+import { 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 SegmentedControlProps extends Omit<AriaToggleButtonGroupProps, "selectionMode" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "disallowEmptySelection" | "isDisabled" | "children" | "className" | "style">, ControlProps, Pick<FieldProps, "label" | "description">, RadiusProps, MaterialOverrides {
+    readonly children: ReactNode;
+    /** The selected Item's id. */
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string) => void;
+}
+export interface SegmentedControlItemProps extends Omit<AriaToggleButtonProps, "id" | "isDisabled" | "className" | "style" | "children"> {
+    /** Identity of this Item; it is the value it selects. */
+    readonly id: string;
+    readonly children: ReactNode;
+    readonly disabled?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<SegmentedControlItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/segmented-control.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
+import { ToggleButton as AriaToggleButton, ToggleButtonGroup as AriaToggleButtonGroup } from "react-aria-components";
+import { controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { fieldStyle } from "./control/field.js";
+import { SelectionItemLabel, selectionItemStyle, selectionListStyle, SelectionTrack } from "./control/selection-track.js";
+import { stringKey } from "./control/selection.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
+const SegmentedStyleContext = createContext(null);
+/**
+ * One value chosen from a few options that stay visible. It shares the Tabs
+ * track: the selection slides to the chosen Item. Use it where Tabs would
+ * switch views, but the choice is a value instead.
+ */
+const SegmentedControlRoot = forwardRef(function SegmentedControl({ label, description, children, value, defaultValue, onChange, disabled, size, color = "default", radius, material, orientation = "horizontal", className, style, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    const direction = resolveDirection(properties.dir, useDirection());
+    const context = useMemo(() => ({ color, metrics, orientation }), [color, metrics, orientation]);
+    const labelId = useId();
+    const descriptionId = useId();
+    const selected = value ?? defaultValue;
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsxs("div", { className: dimmedClass(disabled ?? false, className), style: fieldStyle(metrics, style), children: [label != null && _jsx("span", { id: labelId, style: { fontWeight: controlFontWeight }, children: label }), _jsx(SegmentedStyleContext.Provider, { value: context, children: _jsx(SelectionTrack, { metrics: metrics, color: color, material: material, orientation: orientation, selectedKey: selected, children: _jsx(AriaToggleButtonGroup, { ...properties, ref: ref, dir: direction, "data-selection-list": "", "aria-labelledby": properties["aria-labelledby"] ?? (label != null ? labelId : undefined), "aria-describedby": properties["aria-describedby"] ?? (description != null ? descriptionId : undefined), orientation: orientation, selectionMode: "single", disallowEmptySelection: true, ...(value !== undefined ? { selectedKeys: [value] } : {}), ...(defaultValue !== undefined ? { defaultSelectedKeys: [defaultValue] } : {}), onSelectionChange: keys => {
+                                const [key] = keys;
+                                if (key !== undefined)
+                                    onChange?.(stringKey(key));
+                            }, isDisabled: disabled, style: selectionListStyle(orientation), children: children }) }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
+});
+/** One option; its label may lead with an icon. */
+const SegmentedControlItem = forwardRef(function SegmentedControlItem({ children, disabled, className, style, ...properties }, ref) {
+    const inherited = useContext(SegmentedStyleContext);
+    if (inherited == null)
+        throw new Error("SegmentedControl.Item must be used inside SegmentedControl");
+    const { color, metrics, orientation } = inherited;
+    return _jsx(AriaToggleButton, { ...properties, ref: ref, isDisabled: disabled, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", style: state => ({ ...selectionItemStyle(metrics, color, orientation, state), ...style }), children: state => _jsx(SelectionItemLabel, { metrics: metrics, emphasized: state.isSelected || state.isHovered, children: children }) });
+});
+export const SegmentedControl = Object.assign(SegmentedControlRoot, { Item: SegmentedControlItem });

package/dist/select.d.ts

@@ -1,18 +1,45 @@
+import type { ReactNode } from "react";
 import type { SelectProps as AriaSelectProps } from "react-aria-components";
-import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { RadiusProps } from "./radius.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-export interface SelectOption {
-    readonly value: string;
-    readonly label: string;
-    readonly disabled?: boolean;
-}
-export interface SelectProps extends Omit<AriaSelectProps<SelectOption>, ControlOverrides | "value" | "defaultValue" | "onChange" | "selectedKey" | "defaultSelectedKey" | "onSelectionChange" | "disabledKeys" | "selectionMode">, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
-    readonly options: readonly SelectOption[];
+import { type ControlMetrics, type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import { type RadiusProps } from "./foundation/radius.js";
+import { type OpenStateProps } from "./control/open-state.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface SelectProps extends Omit<AriaSelectProps<object>, ControlOverrides | "value" | "defaultValue" | "onChange" | "selectedKey" | "defaultSelectedKey" | "onSelectionChange" | "disabledKeys" | "selectionMode" | "isOpen" | "defaultOpen" | "onOpenChange" | "shouldCloseOnSelect" | "allowsEmptyCollection">, ControlProps, FieldProps, RadiusProps, MaterialOverrides, OpenStateProps {
+    /** `Select.Item` and `Select.Section` entries. */
+    readonly children: ReactNode;
     readonly value?: string | null;
     readonly defaultValue?: string | null;
     readonly onChange?: (value: string | null) => void;
+    /** Whether the list can open while it has no Items. */
+    readonly openWhenEmpty?: boolean;
 }
-/** Single selection from string-valued options; keyboard navigation and typeahead stay native to React Aria. */
-export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Layout of a pressable field trigger shared by Select and ComboBox. */
+export declare function fieldTriggerStyle(metrics: ControlMetrics, disabled?: boolean): {
+    readonly appearance: "none";
+    readonly boxSizing: "border-box";
+    readonly display: "flex";
+    readonly alignItems: "center";
+    readonly justifyContent: "space-between";
+    readonly gap: number;
+    readonly width: "100%";
+    readonly minWidth: 0;
+    readonly height: number;
+    readonly paddingInline: number;
+    readonly border: 0;
+    readonly background: "none";
+    readonly font: "inherit";
+    readonly lineHeight: 1.45;
+    readonly textAlign: "start";
+    readonly cursor: "not-allowed" | "pointer";
+};
+/** The disclosure chevron shared by every field that opens a list. */
+export declare function Chevron({ metrics, open }: Readonly<{
+    metrics: ControlMetrics;
+    open: boolean;
+}>): import("react").JSX.Element;
+/** A single-choice field whose options are its Items. */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & 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/select.js

@@ -1,26 +1,71 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { Select as AriaSelect, Button, SelectValue } from "react-aria-components";
-import { controlOpacity, controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
-import { SurfaceButton } from "./control-surface.js";
-import { ScrollArea } from "./scroll-area.js";
-import { PopoverContent } from "./popover.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { forwardRef } from "react";
+import { Button as AriaButton, Select as AriaSelect, SelectValue } from "react-aria-components";
+import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { resolveRadius } from "./foundation/radius.js";
 import { ListBox } from "./list-box.js";
-/** Single selection from string-valued options; keyboard navigation and typeahead stay native to React Aria. */
-export const Select = forwardRef(function Select({ label, description, errorMessage, disabled, required, invalid, options, value, defaultValue, onChange, size, color, radius, style, material, shadow, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+import { ariaOpenState } from "./control/open-state.js";
+import { PopoverContent } from "./popover.js";
+import { ScrollArea } from "./scroll-area.js";
+import { dimmedClass } from "./surface/surface.js";
+import { ChevronDown } from "lucide-react";
+import { iconProps } from "./control/icon.js";
+/** One value chosen from its Items; the field recesses like every value holder. */
+const SelectRoot = forwardRef(function Select({ label, description, errorMessage, disabled, required, className, invalid, children, value, defaultValue, onChange, size, color = "background", radius, style, material, open, defaultOpen, onOpenChange, openWhenEmpty, ...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 disabledKeys = useMemo(() => options.filter(option => option.disabled).map(option => option.value), [options]);
-    return _jsx(AriaSelect, { ...properties, ref: ref, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), disabledKeys: disabledKeys, isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(Button, { render: (native, button) => _jsx(SurfaceButton, { native: native, material: material, shadow: shadow, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
-                        ...controlStyle(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered, button.isFocusVisible),
-                        display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
-                        cursor: disabled ? "not-allowed" : "pointer", textAlign: "start"
-                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? controlOpacity.placeholder : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _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", flexShrink: 0, 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(AriaSelect, { ...properties, ref: ref, ...ariaOpenState({ open, defaultOpen, onOpenChange }), allowsEmptyCollection: openWhenEmpty, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), onChange: key => onChange?.(key == null ? null : String(key)), className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(AriaButton, { render: surfaceRender("button", button => ({
+                        color,
+                        depth: "recessed",
+                        material,
+                        radius: metrics.radius,
+                        interaction: {
+                            hovered: button.isHovered,
+                            focusVisible: state.isOpen || button.isFocusVisible,
+                            invalid: state.isInvalid,
+                            disabled: button.isDisabled
+                        }
+                    })), style: fieldTriggerStyle(metrics, disabled), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ minWidth: 0, opacity: isPlaceholder ? controlOpacity.placeholder : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }), children: ({ isPlaceholder, selectedText, defaultChildren }) => isPlaceholder ? defaultChildren : selectedText }), _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, 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 })] }) });
+});
+/** Layout of a pressable field trigger shared by Select and ComboBox. */
+export function fieldTriggerStyle(metrics, disabled) {
+    return {
+        appearance: "none",
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: metrics.gap,
+        width: "100%",
+        minWidth: 0,
+        height: metrics.height,
+        paddingInline: metrics.inset,
+        border: 0,
+        background: "none",
+        font: "inherit",
+        lineHeight: 1.45,
+        textAlign: "start",
+        cursor: disabled ? "not-allowed" : "pointer"
+    };
+}
+/** The disclosure chevron shared by every field that opens a list. */
+export function Chevron({ metrics, open }) {
+    return _jsx(ChevronDown, { ...iconProps(14), style: { ...transition(metrics.visual, "rotate"), flexShrink: 0, opacity: controlOpacity.secondary, rotate: open ? "180deg" : "0deg" } });
+}
+/** A single-choice field whose options are its Items. */
+export const Select = Object.assign(SelectRoot, {
+    Item: ListBox.Item,
+    Section: ListBox.Section,
+    Header: ListBox.Header
 });

package/dist/slider.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from "react";
-import type { ControlProps, FieldProps } from "./control.js";
-export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "className" | "color" | "defaultValue" | "onChange" | "style">, ControlProps, Pick<FieldProps, "label" | "description"> {
+import { type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "className" | "color" | "defaultValue" | "onChange" | "style">, ControlProps, MaterialOverrides, Pick<FieldProps, "label" | "description"> {
     readonly value?: number;
     readonly defaultValue?: number;
     readonly minValue?: number;
@@ -13,5 +14,8 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "child
     readonly onChange?: (value: number) => void;
     readonly onChangeEnd?: (value: number) => void;
 }
-/** One numeric value with pointer, touch, keyboard, and form support. */
+/**
+ * One numeric value, drawn as a long Switch: a recessed bed, a raised fill in
+ * the owner's color up to the thumb, and the Switch thumb dragged along it.
+ */
 export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;