@phreshos/react-ui 0.1.35 → 0.1.37

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>>;

package/dist/slider.js

@@ -1,25 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Base UI accepts direction directly; React Aria derives these keys from locale.
+// Base UI accepts an explicit direction; React Aria derives slider geometry
+// from the locale, which cannot follow a React UI direction boundary.
 import { Slider as BaseSlider } from "@base-ui/react/slider";
 import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
-import { controlFontWeight, controlOpacity, fieldStyle, useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-/** One numeric value with pointer, touch, keyboard, and form support. */
-export const Slider = forwardRef(function Slider({ label, description, name, form, disabled, size, color, style, orientation = "horizontal", value, defaultValue, minValue = 0, maxValue = 100, step = 1, formatOptions, onChange, onChangeEnd, ...properties }, ref) {
-    const theme = useControlTheme({ size, color });
+import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { fieldStyle } from "./control/field.js";
+import { lightColor } from "./foundation/color.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { SurfaceView, dimmedClass } from "./surface/surface.js";
+/**
+ * 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 const Slider = forwardRef(function Slider({ label, description, name, form, disabled, size, color = "primary", style, className, orientation = "horizontal", value, defaultValue, minValue = 0, maxValue = 100, step = 1, formatOptions, onChange, onChangeEnd, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    const { colors } = metrics.visual;
     const direction = resolveDirection(properties.dir, useDirection());
     const descriptionId = useId();
     const input = useRef(null);
     const initialValue = useRef(defaultValue ?? minValue);
     const [uncontrolledValue, setUncontrolledValue] = useState(initialValue.current);
-    const [hovered, setHovered] = useState(false);
     const vertical = orientation === "vertical";
-    const diameter = theme.indicatorSize;
-    const rail = Math.max(4, Math.round(diameter / 3));
+    // The Switch's proportions: its bed height, and a thumb inset by the same gap.
+    const bed = metrics.indicator;
+    const inset = 3;
+    const thumb = bed - inset * 2;
     const describedBy = [properties["aria-describedby"], description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined;
     const controlled = value !== undefined;
-    const resolvedValue = controlled ? value : uncontrolledValue;
     useEffect(() => {
         const formElement = input.current?.form;
         if (controlled || formElement == null)
@@ -28,44 +36,37 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
         formElement.addEventListener("reset", reset);
         return () => formElement.removeEventListener("reset", reset);
     }, [controlled]);
-    const root = _jsxs(BaseSlider.Root, { ...properties, ref: ref, value: resolvedValue, min: minValue, max: maxValue, step: step, name: name, form: form, disabled: disabled, orientation: orientation, format: formatOptions, onValueChange: next => {
-            if (!controlled)
-                setUncontrolledValue(next);
-            onChange?.(next);
-        }, onValueCommitted: next => onChangeEnd?.(next), style: fieldStyle(theme, disabled, style), children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [label != null && _jsx(BaseSlider.Label, { style: { fontWeight: controlFontWeight }, children: label }), _jsx(BaseSlider.Value, { style: { fontVariantNumeric: "tabular-nums", opacity: controlOpacity.secondary } })] }), _jsx(BaseSlider.Control, { style: {
-                    position: "relative",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    touchAction: "none",
-                    userSelect: "none",
-                    width: vertical ? theme.height : "100%",
-                    height: vertical ? theme.height * 4 : theme.height
-                }, children: _jsxs(BaseSlider.Track, { style: {
-                        position: "relative",
-                        width: vertical ? rail : "100%",
-                        height: vertical ? "100%" : rail,
-                        borderRadius: rail,
-                        background: theme.paints.subtle.rest.background
-                    }, children: [_jsx(BaseSlider.Indicator, { style: {
-                                ...theme.transition,
-                                borderRadius: rail,
-                                background: theme.paints.palette.rest.background
-                            } }), _jsx(BaseSlider.Thumb, { inputRef: input, "aria-label": properties["aria-label"], "aria-labelledby": properties["aria-labelledby"], "aria-describedby": describedBy, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: state => {
-                                const paint = state.dragging ? theme.paints.palette.pressed : hovered ? theme.paints.palette.hover : theme.paints.palette.rest;
-                                return {
-                                    ...theme.transition,
-                                    width: diameter,
-                                    height: diameter,
-                                    borderRadius: "50%",
-                                    boxSizing: "border-box",
-                                    background: paint.color,
-                                    border: `${Math.max(1, diameter / 6)}px solid ${paint.background}`,
-                                    outline: state.focused ? `1px solid ${theme.focusColor}` : "none",
-                                    outlineOffset: 1,
-                                    cursor: state.disabled ? "not-allowed" : state.dragging ? "grabbing" : "grab",
-                                    transform: `scale(${state.dragging ? 0.92 : hovered ? 1.08 : 1})`
-                                };
-                            } })] }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] });
-    return _jsx(BaseDirectionProvider, { direction: direction, children: root });
+    return _jsx(BaseDirectionProvider, { direction: direction, children: _jsxs(BaseSlider.Root, { ...properties, ref: ref, className: dimmedClass(disabled ?? false, className), value: controlled ? value : uncontrolledValue, min: minValue, max: maxValue, step: step, name: name, form: form, disabled: disabled, orientation: orientation, format: formatOptions, onValueChange: next => {
+                if (!controlled)
+                    setUncontrolledValue(next);
+                onChange?.(next);
+            }, onValueCommitted: next => onChangeEnd?.(next), style: fieldStyle(metrics, style), children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: metrics.gap }, children: [label != null && _jsx(BaseSlider.Label, { style: { fontWeight: controlFontWeight }, children: label }), _jsx(BaseSlider.Value, { style: { fontVariantNumeric: "tabular-nums", opacity: controlOpacity.secondary } })] }), _jsx(SurfaceView, { as: "div", color: "background", depth: "recessed", material: material, radius: "full", style: {
+                        display: "flex",
+                        boxSizing: "border-box",
+                        // The thumb center travels between the bed ends minus half a thumb,
+                        // so the thumb keeps the Switch inset at both ends.
+                        paddingBlock: vertical ? inset + thumb / 2 : inset,
+                        paddingInline: vertical ? inset : inset + thumb / 2,
+                        width: vertical ? bed : "100%",
+                        height: vertical ? metrics.height * 4 : bed
+                    }, children: _jsx(BaseSlider.Control, { style: { position: "relative", flex: 1, touchAction: "none", userSelect: "none" }, children: _jsxs(BaseSlider.Track, { style: { position: "relative", width: "100%", height: "100%" }, children: [_jsx(BaseSlider.Indicator, { render: (fill, _state) => _jsx(SurfaceView, { ...fill, ref: fill.ref, as: "div", color: color, material: material, shadow: false, radius: "full", style: {
+                                            ...fill.style,
+                                            position: "absolute",
+                                            boxSizing: "content-box",
+                                            // The fill starts at the bed's end and wraps the thumb with the
+                                            // bed's inset, like an enabled Switch.
+                                            ...(vertical
+                                                ? { insetInlineStart: -inset, width: bed, marginBottom: -(inset + thumb / 2), paddingTop: thumb + inset * 2 }
+                                                : { top: -inset, height: bed, marginInlineStart: -(inset + thumb / 2), paddingInlineEnd: thumb + inset * 2 })
+                                        } }) }), _jsx(BaseSlider.Thumb, { inputRef: input, "aria-label": properties["aria-label"], "aria-labelledby": properties["aria-labelledby"], "aria-describedby": describedBy, render: (native, state) => _jsx(SurfaceView, { ...native, ref: native.ref, as: "div", 
+                                        // A thumb is lit from above in every Theme.
+                                        color: lightColor(colors), radius: "full", interaction: { hovered: false, pressed: state.dragging, focusVisible: state.focused, disabled: state.disabled }, style: {
+                                            ...native.style,
+                                            ...transition(metrics.visual, "scale, outline-color, box-shadow"),
+                                            zIndex: 2,
+                                            width: thumb,
+                                            height: thumb,
+                                            cursor: state.disabled ? "not-allowed" : state.dragging ? "grabbing" : "grab",
+                                            scale: state.dragging ? "0.92" : "1"
+                                        } }) })] }) }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] }) });
 });

package/dist/spinner.d.ts

@@ -1,20 +1,17 @@
 import type { CSSProperties } from "react";
 import type { ProgressBarProps as AriaProgressBarProps } from "react-aria-components";
-import type { ControlColor } from "./control.js";
-import { type ScaleLevel } from "./scale.js";
+import { type Color } from "./foundation/color.js";
+import { type ScaleLevel } from "./foundation/scale.js";
 type NativeSpinnerProps = Omit<AriaProgressBarProps, "aria-hidden" | "aria-label" | "aria-labelledby" | "children" | "className" | "formatOptions" | "isIndeterminate" | "maxValue" | "minValue" | "slot" | "style" | "value" | "valueLabel">;
 interface SpinnerVisualProps extends NativeSpinnerProps {
-    /** Native class name applied without replacing the component contract. */
     readonly className?: string;
-    /** Color of the moving indicator. */
-    readonly color?: ControlColor;
-    /** Derives the indicator diameter from Appearance. */
+    /** Color of the moving arc. `currentColor` follows the surrounding content. */
+    readonly color?: Color;
     readonly size?: ScaleLevel;
-    /** Native styles applied after Spinner defaults. */
     readonly style?: CSSProperties;
 }
 type NamedSpinnerProps = Readonly<{
-    /** Accessible operation name announced with indeterminate progress semantics. */
+    /** Accessible name announced with indeterminate progress semantics. */
     label: string;
     decorative?: false;
 }>;