@phreshos/react-ui 0.1.36 → 0.1.37

package/dist/control/toggle.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties } from "react";
+import { type Color } from "../foundation/color.js";
+import type { Direction } from "../foundation/direction.js";
+import type { MaterialOverrides } from "../surface/material-options.js";
+import { type Radius } from "../foundation/radius.js";
+import { type ControlMetrics } from "./control.js";
+export type ToggleState = Readonly<{
+    selected: boolean;
+    indeterminate?: boolean;
+    hovered: boolean;
+    pressed: boolean;
+    focusVisible: boolean;
+    invalid: boolean;
+    disabled: boolean;
+}>;
+/**
+ * The indicator shared by Checkbox, Radio, and Switch. Off, it is a recessed
+ * bed; on, the same Surface rises in the owner's color. Its mark is painted in
+ * that Surface's readable content color.
+ */
+export declare function ToggleIndicator({ color, direction, kind, material, metrics, radius, state }: Readonly<{
+    color: Color;
+    direction?: Direction;
+    kind: "checkbox" | "radio" | "switch";
+    material: MaterialOverrides["material"];
+    metrics: ControlMetrics;
+    /** A checkbox's corners; radio and switch shapes are round by meaning. */
+    radius?: Radius;
+    state: ToggleState;
+}>): import("react").JSX.Element;
+/** The pressable row that pairs one indicator with its label. */
+export declare function toggleRowStyle(metrics: ControlMetrics, disabled: boolean, readOnly: boolean): CSSProperties;

package/dist/control/toggle.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lightColor } from "../foundation/color.js";
+import { SurfaceView } from "../surface/surface.js";
+import { resolveRadius } from "../foundation/radius.js";
+import { isScaleLevel } from "../foundation/scale.js";
+import { proportionalRadius, transition } from "./control.js";
+/**
+ * The indicator shared by Checkbox, Radio, and Switch. Off, it is a recessed
+ * bed; on, the same Surface rises in the owner's color. Its mark is painted in
+ * that Surface's readable content color.
+ */
+export function ToggleIndicator({ color, direction = "ltr", kind, material, metrics, radius, state }) {
+    const on = state.selected || state.indeterminate === true;
+    const size = metrics.indicator;
+    const switching = kind === "switch";
+    const width = switching ? Math.round(size * 1.8) : size;
+    const thumb = size - 6;
+    const stretch = state.pressed && metrics.visual.duration > 0 ? 3 : 0;
+    const travel = (width - thumb - 6 - stretch) * (direction === "rtl" ? -1 : 1);
+    const interactive = !state.disabled;
+    return _jsxs(SurfaceView, { as: "span", "aria-hidden": "true", color: on ? color : "background", depth: on ? "raised" : "recessed", material: material, shadow: on && !switching, radius: kind !== "checkbox"
+            ? "full"
+            : isScaleLevel(radius ?? "medium")
+                ? proportionalRadius(metrics.visual, size, (radius ?? "medium"))
+                : resolveRadius(radius, metrics.visual.radius), interaction: {
+            hovered: interactive && state.hovered,
+            pressed: interactive && state.pressed,
+            focusVisible: state.focusVisible,
+            invalid: state.invalid
+        }, style: {
+            ...transition(metrics.visual, "scale, outline-color"),
+            display: "inline-grid",
+            placeItems: "center",
+            flexShrink: 0,
+            width,
+            height: size,
+            scale: state.pressed && interactive && !switching ? "0.92" : "1"
+        }, children: [kind === "checkbox" && _jsxs("svg", { viewBox: "0 0 16 16", width: size - 6, height: size - 6, fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "m3 8.5 3 3 7-7", pathLength: 1, style: drawn(metrics, state.selected && state.indeterminate !== true) }), _jsx("path", { d: "M4 8h8", pathLength: 1, style: drawn(metrics, state.indeterminate === true) })] }), kind === "radio" && _jsx("span", { style: {
+                    ...transition(metrics.visual, "scale"),
+                    width: Math.round(size / 3),
+                    height: Math.round(size / 3),
+                    borderRadius: "50%",
+                    background: "currentColor",
+                    scale: on ? "1" : "0"
+                } }), switching && _jsx(SurfaceView, { as: "span", 
+                // A thumb is lit from above in every Theme, so it takes the lighter Appearance color.
+                color: lightColor(metrics.visual.colors), radius: "full", style: {
+                    ...transition(metrics.visual, "translate, width", 1.2),
+                    position: "absolute",
+                    top: 3,
+                    insetInlineStart: 3,
+                    zIndex: 2,
+                    width: thumb + stretch,
+                    height: thumb,
+                    translate: on ? `${direction === "rtl" ? -Math.abs(travel) : travel}px 0` : "0 0"
+                } })] });
+}
+/** A mark drawn along its path when it appears and withdrawn when it leaves. */
+function drawn(metrics, visible) {
+    return {
+        ...transition(metrics.visual, "stroke-dashoffset", 1.4),
+        strokeDasharray: 1,
+        strokeDashoffset: visible ? 0 : 1
+    };
+}
+/** The pressable row that pairs one indicator with its label. */
+export function toggleRowStyle(metrics, disabled, readOnly) {
+    return {
+        // React Aria visually hides the focusable input with absolute positioning;
+        // anchoring it here keeps focus from scrolling an ancestor toward it.
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: metrics.gap,
+        minHeight: Math.max(metrics.indicator, Math.round(metrics.height * 0.75)),
+        width: "fit-content",
+        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer",
+        WebkitTapHighlightColor: "transparent"
+    };
+}

package/dist/date-control.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from "react";
-import { type ControlTheme } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-/** Shared visual and segmented-input boundary for date and time controls. */
-export declare function DateControl({ active, children, disabled, end, endFocusVisible, endRequiresVisibleFocus, group, invalid, material, shadow, theme }: Readonly<{
+import { type ControlMetrics } from "./control/control.js";
+import { type Color } from "./foundation/color.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+/** The recessed well shared by every date and time field. */
+export declare function DateControl({ active, children, color, disabled, end, endFocusVisible, endRequiresVisibleFocus, group, invalid, material, metrics }: Readonly<{
     active?: boolean;
     children?: ReactNode;
+    color: Color;
     disabled: boolean;
     end?: ReactNode;
     endFocusVisible?: boolean;
@@ -13,12 +14,11 @@ export declare function DateControl({ active, children, disabled, end, endFocusV
     group?: boolean;
     invalid: boolean;
     material: MaterialOverrides["material"];
-    shadow: ShadowOverrides["shadow"];
-    theme: ControlTheme;
+    metrics: ControlMetrics;
 }>): import("react").JSX.Element;
 /** Segmented input used once for a date and twice for a date range. */
-export declare function DateSegments({ compact, slot, theme }: Readonly<{
+export declare function DateSegments({ compact, metrics, slot }: Readonly<{
     compact?: boolean;
+    metrics: ControlMetrics;
     slot?: "start" | "end";
-    theme: ControlTheme;
 }>): import("react").JSX.Element;

package/dist/date-control.js

@@ -1,67 +1,64 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { DateInput, DateSegment, Group } from "react-aria-components";
-import { controlOpacity, controlPaint, controlStyle } from "./control.js";
-import { Surface } from "./surface.js";
-/** Shared visual and segmented-input boundary for date and time controls. */
-export function DateControl({ active = false, children, disabled, end, endFocusVisible, endRequiresVisibleFocus = false, group = false, invalid, material, shadow, theme }) {
+import { controlOpacity, transition } from "./control/control.js";
+import { colorLevel, readableColor } from "./foundation/color.js";
+import { SurfaceView } from "./surface/surface.js";
+/** The recessed well shared by every date and time field. */
+export function DateControl({ active = false, children, color, disabled, end, endFocusVisible, endRequiresVisibleFocus = false, group = false, invalid, material, metrics }) {
     const [focused, setFocused] = useState(false);
     const [endFocused, setEndFocused] = useState(false);
     const [hovered, setHovered] = useState(false);
     // Popovers restore trigger focus after pointer dismissal; only keyboard-visible
-    // focus on that end control should reactivate the field paint.
+    // focus on that end control should reactivate the field.
     const engaged = active || (focused && (!endFocused || !endRequiresVisibleFocus || endFocusVisible === true));
-    const paint = controlPaint(theme, engaged, invalid, hovered);
-    const style = controlStyle(theme, engaged, invalid, hovered, focused);
-    const onBlurCapture = event => {
-        if (!event.currentTarget.contains(event.relatedTarget)) {
-            setFocused(false);
-            setEndFocused(false);
-        }
-    };
     const surface = {
-        color: paint.background,
+        color,
+        depth: "recessed",
         material,
-        shadow,
-        radius: theme.radius,
+        radius: metrics.radius,
+        interaction: { hovered, focusVisible: engaged, invalid, disabled },
         onFocusCapture: (event) => {
             setFocused(true);
             setEndFocused(event.target instanceof Element && event.target.closest("[data-date-control-end]") != null);
         },
-        onBlurCapture,
+        onBlurCapture: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                setFocused(false);
+                setEndFocused(false);
+            }
+        },
         onPointerEnter: () => setHovered(true),
         onPointerLeave: () => setHovered(false),
         style: {
-            ...style,
             display: "flex",
             alignItems: "center",
+            boxSizing: "border-box",
+            height: metrics.height,
+            paddingInline: metrics.inset,
             cursor: disabled ? "not-allowed" : "text"
         }
     };
-    const content = _jsxs(_Fragment, { children: [children ?? _jsx(DateSegments, { theme: theme }), end] });
+    const content = _jsxs(_Fragment, { children: [children ?? _jsx(DateSegments, { metrics: metrics }), end] });
     return group
-        ? _jsx(Surface, { as: Group, ...surface, children: content })
-        : _jsx(Surface, { ...surface, children: content });
+        ? _jsx(SurfaceView, { as: Group, ...surface, children: content })
+        : _jsx(SurfaceView, { ...surface, children: content });
 }
 /** Segmented input used once for a date and twice for a date range. */
-export function DateSegments({ compact = false, slot, theme }) {
-    return _jsx(DateInput, { slot: slot, style: {
-            display: "flex",
-            alignItems: "center",
-            flex: compact ? "0 1 auto" : "1 1 auto",
-            minWidth: 0
-        }, children: segment => _jsx(DateSegment, { segment: segment, style: segmentState => segmentStyle(theme, segmentState) }) });
+export function DateSegments({ compact = false, metrics, slot }) {
+    return _jsx(DateInput, { slot: slot, style: { display: "flex", alignItems: "center", flex: compact ? "0 1 auto" : "1 1 auto", minWidth: 0 }, children: segment => _jsx(DateSegment, { segment: segment, style: state => segmentStyle(metrics, state) }) });
 }
-function segmentStyle(theme, state) {
-    const selected = state.isFocused ? theme.paints.subtle.pressed : null;
+function segmentStyle(metrics, state) {
+    const { colors } = metrics.visual;
+    const selected = state.isFocused ? colorLevel(colors.primary, "soft", colors) : null;
     return {
-        ...theme.transition,
+        ...transition(metrics.visual, "background-color, color"),
         minWidth: state.type === "literal" ? undefined : "1ch",
         paddingInline: state.type === "literal" ? 0 : 1,
-        borderRadius: Math.max(2, theme.spacing / 3),
+        borderRadius: metrics.radius,
         outline: "none",
-        background: selected?.background ?? "transparent",
-        color: selected?.color ?? "inherit",
+        background: selected ?? "transparent",
+        color: selected === null ? "inherit" : readableColor(selected, colors),
         opacity: state.isPlaceholder ? controlOpacity.placeholder : 1,
         fontVariantNumeric: "tabular-nums",
         textAlign: "center"

package/dist/date-field.d.ts

@@ -1,17 +1,18 @@
 import type { CalendarDate } from "@internationalized/date";
 import type { DateFieldProps as AriaDateFieldProps } 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 { ShadowOverrides } from "./shadow-options.js";
-type DateFieldOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "granularity" | "hourCycle" | "hideTimeZone";
-export interface DateFieldProps extends Omit<AriaDateFieldProps<CalendarDate>, DateFieldOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+import type { RadiusProps } from "./foundation/radius.js";
+type DateFieldOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "granularity" | "hourCycle" | "hideTimeZone" | "shouldForceLeadingZeros";
+export interface DateFieldProps extends Omit<AriaDateFieldProps<CalendarDate>, DateFieldOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
     readonly value?: CalendarDate | null;
     readonly defaultValue?: CalendarDate | null;
     readonly onChange?: (value: CalendarDate | null) => void;
     readonly minValue?: CalendarDate | null;
     readonly maxValue?: CalendarDate | null;
     readonly isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Whether hours, days, and months always show two digits. */
+    readonly leadingZeros?: boolean;
     readonly readOnly?: boolean;
 }
 /** A locale-aware date-only field whose year, month, and day are edited as independent segments. */

package/dist/date-field.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { DateField as AriaDateField } from "react-aria-components";
-import { AriaDirectionBoundary } from "./aria-direction.js";
-import { FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { DateControl } from "./date-control.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
 /** A locale-aware date-only field whose year, month, and day are edited as independent segments. */
-export const DateField = forwardRef(function DateField({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, shadow, style, className, isDateUnavailable, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+export const DateField = forwardRef(function DateField({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, style, className, isDateUnavailable, leadingZeros, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDateField, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { disabled: state.isDisabled, invalid: state.isInvalid, material: material, shadow: shadow, theme: theme }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) }) });
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDateField, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, shouldForceLeadingZeros: leadingZeros, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: fieldStyle(metrics, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { disabled: state.isDisabled, invalid: state.isInvalid, material: material, color: color ?? "background", metrics: metrics }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] }) }) });
 });

package/dist/date-picker.d.ts

@@ -1,17 +1,24 @@
 import type { CalendarDate } from "@internationalized/date";
 import type { DatePickerProps as AriaDatePickerProps } from "react-aria-components";
-import { type ControlOverrides, type ControlProps, type FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { RadiusProps } from "./radius.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-type DatePickerOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "granularity" | "hourCycle" | "hideTimeZone";
-export interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, DatePickerOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+import type { RadiusProps } from "./foundation/radius.js";
+type DatePickerOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "granularity" | "hourCycle" | "hideTimeZone" | "isOpen" | "defaultOpen" | "onOpenChange" | "shouldCloseOnSelect" | "shouldForceLeadingZeros";
+export interface DatePickerProps extends Omit<AriaDatePickerProps<CalendarDate>, DatePickerOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
     readonly value?: CalendarDate | null;
     readonly defaultValue?: CalendarDate | null;
     readonly onChange?: (value: CalendarDate | null) => void;
     readonly minValue?: CalendarDate | null;
     readonly maxValue?: CalendarDate | null;
     readonly isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** Whether the calendar popover is shown. */
+    readonly open?: boolean;
+    readonly defaultOpen?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Whether choosing a date closes the calendar. Defaults to `true`. */
+    readonly closeOnSelect?: boolean;
+    /** Whether hours, days, and months always show two digits. */
+    readonly leadingZeros?: boolean;
     readonly readOnly?: boolean;
 }
 /** A date-only segmented field with a calendar selection popover. */

package/dist/date-picker.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { DatePicker as AriaDatePicker } from "react-aria-components";
-import { AriaDirectionBoundary } from "./aria-direction.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { Calendar } from "./calendar.js";
 import { CalendarTrigger } from "./calendar-trigger.js";
-import { FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { DateControl } from "./date-control.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { PopoverContent, PopoverDialog } from "./popover.js";
+import { dimmedClass } from "./surface/surface.js";
 /** A date-only segmented field with a calendar selection popover. */
-export const DatePicker = forwardRef(function DatePicker({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, shadow, style, className, isDateUnavailable, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+export const DatePicker = forwardRef(function DatePicker({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, style, className, isDateUnavailable, open, defaultOpen, onOpenChange, closeOnSelect, leadingZeros, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDatePicker, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { active: state.isOpen, disabled: state.isDisabled, endFocusVisible: state.isFocusVisible, endRequiresVisibleFocus: true, group: true, invalid: state.isInvalid, material: material, shadow: shadow, theme: theme, end: _jsx(CalendarTrigger, { theme: theme }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage }), _jsx(PopoverContent, { placement: "bottom start", children: _jsx(PopoverDialog, { children: _jsx(Calendar, { color: color, size: size, radius: radius }) }) })] }) }) });
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDatePicker, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, ...ariaOpenState({ open, defaultOpen, onOpenChange }), shouldCloseOnSelect: closeOnSelect, shouldForceLeadingZeros: leadingZeros, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: fieldStyle(metrics, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { active: state.isOpen, disabled: state.isDisabled, endFocusVisible: state.isFocusVisible, endRequiresVisibleFocus: true, group: true, invalid: state.isInvalid, material: material, color: color ?? "background", metrics: metrics, end: _jsx(CalendarTrigger, { metrics: metrics }) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage }), _jsx(PopoverContent, { placement: "bottom start", children: _jsx(PopoverDialog, { children: _jsx(Calendar, { size: size, radius: radius }) }) })] }) }) });
 });

package/dist/date-range-picker.d.ts

@@ -1,18 +1,27 @@
 import type { CalendarDate } from "@internationalized/date";
 import type { DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components";
-import { type ControlOverrides, type ControlProps, type FieldProps } from "./control.js";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
 import type { DateRange } from "./date-range.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { RadiusProps } from "./radius.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-type DateRangePickerOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "granularity" | "hourCycle" | "hideTimeZone";
-export interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<CalendarDate>, DateRangePickerOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+import type { MaterialOverrides } from "./surface/material-options.js";
+import type { RadiusProps } from "./foundation/radius.js";
+type DateRangePickerOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "granularity" | "hourCycle" | "hideTimeZone" | "isOpen" | "defaultOpen" | "onOpenChange" | "shouldCloseOnSelect" | "shouldForceLeadingZeros" | "allowsNonContiguousRanges";
+export interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<CalendarDate>, DateRangePickerOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
     readonly value?: DateRange | null;
     readonly defaultValue?: DateRange | null;
     readonly onChange?: (value: DateRange | null) => void;
     readonly minValue?: CalendarDate | null;
     readonly maxValue?: CalendarDate | null;
     readonly isDateUnavailable?: (date: CalendarDate, anchorDate: CalendarDate | null) => boolean;
+    /** Whether the calendar popover is shown. */
+    readonly open?: boolean;
+    readonly defaultOpen?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Whether choosing a date closes the calendar. Defaults to `true`. */
+    readonly closeOnSelect?: boolean;
+    /** Whether hours, days, and months always show two digits. */
+    readonly leadingZeros?: boolean;
+    /** Whether a range may include unavailable dates. */
+    readonly nonContiguous?: boolean;
     readonly readOnly?: boolean;
 }
 /** Two date-only segmented fields backed by one inclusive range calendar. */

package/dist/date-range-picker.js

@@ -1,25 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { DateRangePicker as AriaDateRangePicker } from "react-aria-components";
-import { AriaDirectionBoundary } from "./aria-direction.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { CalendarTrigger } from "./calendar-trigger.js";
-import { controlOpacity, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { controlOpacity, useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { DateControl, DateSegments } from "./date-control.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
 import { PopoverContent, PopoverDialog } from "./popover.js";
 import { RangeCalendar } from "./range-calendar.js";
+import { dimmedClass } from "./surface/surface.js";
 /** Two date-only segmented fields backed by one inclusive range calendar. */
-export const DateRangePicker = forwardRef(function DateRangePicker({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, shadow, style, className, isDateUnavailable, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+export const DateRangePicker = forwardRef(function DateRangePicker({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, style, className, isDateUnavailable, open, defaultOpen, onOpenChange, closeOnSelect, leadingZeros, nonContiguous, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDateRangePicker, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDateRangePicker, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, ...ariaOpenState({ open, defaultOpen, onOpenChange }), shouldCloseOnSelect: closeOnSelect, shouldForceLeadingZeros: leadingZeros, allowsNonContiguousRanges: nonContiguous, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null
                 ? undefined
-                : (date, anchorDate) => isDateUnavailable(date, anchorDate), style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { active: state.isOpen, disabled: state.isDisabled, endFocusVisible: state.isFocusVisible, endRequiresVisibleFocus: true, group: true, invalid: state.isInvalid, material: material, shadow: shadow, theme: theme, end: _jsx(CalendarTrigger, { theme: theme }), children: _jsxs("div", { style: {
+                : (date, anchorDate) => isDateUnavailable(date, anchorDate), style: fieldStyle(metrics, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { active: state.isOpen, disabled: state.isDisabled, endFocusVisible: state.isFocusVisible, endRequiresVisibleFocus: true, group: true, invalid: state.isInvalid, material: material, color: color ?? "background", metrics: metrics, end: _jsx(CalendarTrigger, { metrics: metrics }), children: _jsxs("div", { style: {
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "flex-start",
                                 flex: "1 1 auto",
                                 minWidth: 0,
-                                gap: Math.max(2, theme.gap / 2)
-                            }, children: [_jsx(DateSegments, { compact: true, slot: "start", theme: theme }), _jsx("span", { "aria-hidden": "true", style: { flex: "0 0 auto", opacity: controlOpacity.secondary }, children: "\u2013" }), _jsx(DateSegments, { compact: true, slot: "end", theme: theme })] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage }), _jsx(PopoverContent, { placement: "bottom start", children: _jsx(PopoverDialog, { children: _jsx(RangeCalendar, { color: color, size: size, radius: radius }) }) })] }) }) });
+                                gap: Math.max(2, metrics.gap / 2)
+                            }, children: [_jsx(DateSegments, { compact: true, slot: "start", metrics: metrics }), _jsx("span", { "aria-hidden": "true", style: { flex: "0 0 auto", opacity: controlOpacity.secondary }, children: "\u2013" }), _jsx(DateSegments, { compact: true, slot: "end", metrics: metrics })] }) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage }), _jsx(PopoverContent, { placement: "bottom start", children: _jsx(PopoverDialog, { children: _jsx(RangeCalendar, { size: size, radius: radius }) }) })] }) }) });
 });

package/dist/dialog.d.ts

@@ -1,19 +1,33 @@
 import type { ComponentProps, CSSProperties, HTMLAttributes, ReactNode } from "react";
-import type { DialogProps as AriaDialogProps, DialogTriggerProps as AriaDialogTriggerProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps, TextProps as AriaTextProps } from "react-aria-components";
-import { type Color } from "./color.js";
+import type { DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps, TextProps as AriaTextProps } from "react-aria-components";
 import { type ButtonProps } from "./button.js";
-import { type SurfaceOwnProps } from "./surface.js";
-export type DialogRootProps = AriaDialogTriggerProps;
-export declare function DialogRoot(properties: DialogRootProps): import("react").JSX.Element;
+import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
+import { type Direction } from "./foundation/direction.js";
+import { type SurfaceOwnProps } from "./surface/surface.js";
+export type DialogRootProps = OverlayRootProps;
+export declare function DialogRoot({ children, ...state }: DialogRootProps): import("react").JSX.Element;
 export type DialogTriggerProps = ButtonProps;
 export declare const DialogTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, "children" | "className" | "color" | "style"> {
+/**
+ * The layer behind a Dialog. Its open state belongs to the Dialog root; the
+ * backdrop only decides how the Dialog may be dismissed.
+ */
+export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, AriaOverlayInternals | "children" | "className" | "color" | "style" | "dir"> {
     readonly children?: ReactNode;
     readonly className?: string;
-    /** Base color rendered with the backdrop's derived opacity. */
-    readonly color?: Color;
+    readonly dir?: Direction;
+    /** Whether pressing outside the Dialog closes it. */
+    readonly dismissable?: boolean;
+    /** Whether Escape closes the Dialog. */
+    readonly keyboardDismissable?: boolean;
     readonly style?: CSSProperties;
+    /**
+     * How the interface behind the Dialog is held back: `dim` darkens it, and
+     * `blur` blurs it with the Appearance material while darkening it lightly.
+     */
+    readonly variant?: DialogBackdropVariant;
 }
+export type DialogBackdropVariant = "dim" | "blur";
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DialogContentProps extends Omit<AriaDialogProps, "children" | "className" | "style">, SurfaceOwnProps {
     readonly children?: AriaDialogProps["children"];

package/dist/dialog.js

@@ -1,32 +1,36 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Modal as AriaModal, ModalOverlay as AriaModalOverlay, Text as AriaText } from "react-aria-components";
-import { useAppearance } from "./ui-provider.js";
-import { useResolvedAppearance } from "./appearance-context.js";
-import { colorOpacity, orderColors, resolveColor } from "./color.js";
-import { controlFontSizes, controlFontWeight, controlOpacity } from "./control.js";
 import { Button } from "./button.js";
-import MotionStyle, { backdropMotionClass, overlayMotionClass, overlayTransition } from "./motion-style.js";
-import { scale } from "./scale.js";
-import { Surface } from "./surface.js";
-import { resolveDirection, useDirection } from "./direction.js";
-export function DialogRoot(properties) {
-    return _jsx(AriaDialogTrigger, { ...properties });
+import { controlFontSizes, controlFontWeight, controlOpacity } from "./control/control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { colorOpacity, darkCanvas } from "./foundation/color.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import MotionStyle, { backdropMotionClass, overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { floatingShadow } from "./surface/shadow-options.js";
+import { Surface } from "./surface/surface.js";
+export function DialogRoot({ children, ...state }) {
+    return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
 export const DialogTrigger = forwardRef(function DialogTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, color, style, ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const inset = scale(resolved.appearance.spacing, "medium");
-    const colors = resolved.colors;
-    const base = color === undefined
-        ? orderColors(colors.background, colors.foreground).darker
-        : resolveColor(color, colors);
-    const backdrop = colorOpacity(base, 0.32);
-    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
-    const direction = resolveDirection(properties.dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...properties, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
+// A blurred backdrop still dims a little, so the Dialog stays distinct on a
+// light canvas where blur alone barely separates it.
+const backdropDimming = { dim: 0.32, blur: 0.16 };
+export const DialogBackdrop = forwardRef(function DialogBackdrop({ children, className, dir, dismissable = false, keyboardDismissable = true, style, variant = "dim", ...attributes }, ref) {
+    const visual = useVisual();
+    const inset = scale(visual.spacing, "medium");
+    const colors = visual.colors;
+    // The backdrop dims toward whichever Appearance color is darker, in any Theme.
+    const darker = darkCanvas(colors) ? colors.background : colors.foreground;
+    const backdrop = colorOpacity(darker, backdropDimming[variant]);
+    const blur = variant === "blur" && visual.material.backdrop > 0 ? `blur(${visual.material.backdrop}px)` : undefined;
+    const transition = overlayTransition(visual);
+    const direction = resolveDirection(dir, useDirection());
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...attributes, isDismissable: dismissable, isKeyboardDismissDisabled: !keyboardDismissable, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
                     ...transition,
                     position: "fixed",
                     inset: 0,
@@ -37,20 +41,25 @@ export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, co
                     padding: inset,
                     overflow: "auto",
                     background: backdrop,
+                    backdropFilter: blur,
+                    WebkitBackdropFilter: blur,
                     ...style
-                } })] });
+                }, children: children })] });
 });
 export const DialogContent = forwardRef(function DialogContent({ children, className, color, material, radius, shadow, style, ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const inset = scale(resolved.appearance.spacing, "medium");
-    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
+    const visual = useVisual();
+    const inset = scale(visual.spacing, "medium");
+    const transition = overlayTransition(visual);
     const direction = resolveDirection(properties.dir, useDirection());
     return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModal, { dir: direction, className: overlayMotionClass, style: {
                     ...transition,
                     width: `min(32rem, calc(100vw - ${inset * 2}px))`,
                     maxHeight: `calc(100vh - ${inset * 2}px)`,
                     outline: "none"
-                }, children: _jsx(Surface, { className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+                }, children: _jsx(Surface, { className: className, color: color, material: material, 
+                    // Dialog content is composed by its consumer, so no owned rounded shape
+                    // sits at a known inset; it keeps the plain Appearance radius like Popover.
+                    radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
                         boxSizing: "border-box",
                         width: "100%",
                         maxHeight: "inherit",
@@ -67,7 +76,7 @@ export const DialogContent = forwardRef(function DialogContent({ children, class
                         }, children: children }) }) })] });
 });
 export const DialogHeader = forwardRef(function DialogHeader({ style, ...properties }, ref) {
-    const gap = scale(useAppearance().spacing, "small");
+    const gap = scale(useVisual().spacing, "small");
     return _jsx("div", { ...properties, ref: ref, style: { display: "grid", gap, minWidth: 0, ...style } });
 });
 export const DialogTitle = forwardRef(function DialogTitle({ style, ...properties }, ref) {
@@ -95,7 +104,7 @@ export const DialogBody = forwardRef(function DialogBody({ style, ...properties
     return _jsx("div", { ...properties, ref: ref, style: { minWidth: 0, minHeight: 0, ...style } });
 });
 export const DialogFooter = forwardRef(function DialogFooter({ style, ...properties }, ref) {
-    const gap = scale(useAppearance().spacing, "small");
+    const gap = scale(useVisual().spacing, "small");
     return _jsx("div", { ...properties, ref: ref, style: { display: "flex", justifyContent: "flex-end", flexWrap: "wrap", gap, minWidth: 0, ...style } });
 });
 export const DialogClose = forwardRef(function DialogClose(properties, ref) {