@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/control/text-control.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { TextFieldProps } from "react-aria-components";
+import type { RadiusProps } from "../foundation/radius.js";
+import type { MaterialOverrides } from "../surface/material-options.js";
+import type { Color } from "../foundation/color.js";
+import type { ControlMetrics, ControlOverrides, ControlProps, FieldProps } from "./control.js";
+/** Shared contract for native text-entry fields. */
+export interface TextControlProps extends Omit<TextFieldProps, ControlOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}
+type FieldState = Readonly<{
+    isFocused: boolean;
+    isHovered: boolean;
+    isInvalid: boolean;
+    isDisabled?: boolean;
+}>;
+/**
+ * The recessed well that holds typed content. Native text elements cannot host
+ * Surface layers, so the well wraps the element that React Aria renders.
+ */
+export declare function TextWell({ children, color, material, metrics, state, style }: Readonly<{
+    children: ReactNode;
+    color: Color;
+    material: MaterialOverrides["material"];
+    metrics: ControlMetrics;
+    state: FieldState;
+    style?: CSSProperties;
+}>): import("react").JSX.Element;
+/** Layout of the native element inside its well. */
+export declare function nativeTextStyle(metrics: ControlMetrics, multiline: boolean): CSSProperties;
+export {};

package/dist/control/text-control.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SurfaceView } from "../surface/surface.js";
+/**
+ * The recessed well that holds typed content. Native text elements cannot host
+ * Surface layers, so the well wraps the element that React Aria renders.
+ */
+export function TextWell({ children, color, material, metrics, state, style }) {
+    return _jsx(SurfaceView, { as: "span", color: color, depth: "recessed", material: material, radius: metrics.radius, interaction: { hovered: state.isHovered, focusVisible: state.isFocused, invalid: state.isInvalid }, style: { display: "grid", minWidth: 0, ...style }, children: children });
+}
+/** Layout of the native element inside its well. */
+export function nativeTextStyle(metrics, multiline) {
+    return {
+        appearance: "none",
+        boxSizing: "border-box",
+        width: "100%",
+        minWidth: 0,
+        height: multiline ? "auto" : metrics.height,
+        minHeight: metrics.height,
+        paddingBlock: multiline ? Math.max(6, metrics.spacing / 2) : 0,
+        paddingInline: metrics.inset,
+        border: 0,
+        borderRadius: "inherit",
+        outline: "none",
+        background: "transparent",
+        color: "inherit",
+        caretColor: "currentColor",
+        font: "inherit",
+        lineHeight: 1.45,
+        resize: multiline ? "vertical" : undefined
+    };
+}

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 ButtonProps } from "./button.js";
-import { type SurfaceOwnProps } from "./surface.js";
-export type DialogRootProps = AriaDialogTriggerProps;
-export declare function DialogRoot(properties: 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"> {
+import type { DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps, TextProps as AriaTextProps } from "react-aria-components";
+import { type ButtonActionProps } from "./button.js";
+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 = ButtonActionProps;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * 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"];
@@ -31,11 +45,11 @@ export type DialogBodyProps = HTMLAttributes<HTMLDivElement>;
 export declare const DialogBody: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
 export type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
 export declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-export type DialogCloseProps = ButtonProps;
-export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogCloseProps = ButtonActionProps;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A modal dialog whose behavioral and structural roles remain independently composable. */
 export declare const Dialog: typeof DialogRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLElement>>;
     Header: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -43,6 +57,6 @@ export declare const Dialog: typeof DialogRoot & {
     Description: import("react").ForwardRefExoticComponent<AriaTextProps & import("react").RefAttributes<HTMLElement>>;
     Body: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
-    Close: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export type DialogProps = ComponentProps<typeof DialogRoot>;