@phreshos/react-ui 0.1.30 → 0.1.32

package/dist/calendar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Calendar as AriaCalendar } from "react-aria-components";
+import { AriaDirectionBoundary } from "./aria-direction.js";
+import { CalendarLayout, calendarRootStyle } from "./calendar-layout.js";
+import { useControlTheme } from "./control.js";
+import { resolveDirection, useDirection } from "./direction.js";
+/** A locale-aware, keyboard-navigable month view for selecting one date. */
+export const Calendar = forwardRef(function Calendar({ disabled, readOnly, invalid, size, color, radius, style, className, isDateUnavailable, ...properties }, ref) {
+    const theme = useControlTheme({ size, color, radius });
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaCalendar, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: calendarRootStyle(theme, disabled, style), children: _jsx(CalendarLayout, { color: color, size: size, theme: theme }) }) });
+});

package/dist/color.d.ts

@@ -31,7 +31,7 @@ export declare function orderColors(first: string, second: string): {
 export declare function opaqueColor(value: string): string;
 /** Changes only perceptual lightness; theme names never determine direction. */
 export declare function colorShade(value: string, amount: number): string;
-/** Chooses only from the two Appearance colors, against the actual painted fill. */
+/** Chooses the perceptually opposite Appearance color for the actual painted fill. */
 export declare function onColor(fill: string, background: string, foreground: string): string;
 /** Chooses readable content when the fill can be evaluated, otherwise preserves Appearance foreground. */
 export declare function contrastingColor(value: Color, colors: AppearanceColors): string;
@@ -50,3 +50,18 @@ export declare function solidColors(base: string, background: string, foreground
         color: string;
     };
 };
+/** Low-emphasis interaction paints derived from the same component-owned base. */
+export declare function subtleColors(base: string, background: string, foreground: string): {
+    rest: {
+        background: string;
+        color: string;
+    };
+    hover: {
+        background: string;
+        color: string;
+    };
+    pressed: {
+        background: string;
+        color: string;
+    };
+};

package/dist/color.js

@@ -5,7 +5,6 @@ import parse from "colorjs.io/src/parse.js";
 import serialize from "colorjs.io/src/serialize.js";
 import to from "colorjs.io/src/to.js";
 import toGamut from "colorjs.io/src/toGamut.js";
-import contrastWCAG21 from "colorjs.io/src/contrast/WCAG21.js";
 import sRGB from "colorjs.io/src/spaces/srgb.js";
 import sRGB_Linear from "colorjs.io/src/spaces/srgb-linear.js";
 import HSL from "colorjs.io/src/spaces/hsl.js";
@@ -51,9 +50,12 @@ export function color(value) {
 /** Resolves the same named treatment for solid paint and contrast calculations. */
 export function resolveColorLevel(value, level) {
     if (level === "base")
-        return opaqueColor(value);
+        return resolvableOpaqueColor(value) ?? value;
+    const opaque = resolvableOpaqueColor(value);
+    if (opaque == null)
+        return color(value)[level];
     const { weight, target } = treatments[level];
-    return opaqueColor(serialize(mix(opaqueColor(value), target, 1 - weight / 100, { space: "oklch" })));
+    return opaqueColor(serialize(mix(opaque, target, 1 - weight / 100, { space: "oklch" })));
 }
 /** Returns the complete visual treatments derived from one concrete color. */
 export function useColor(value) {
@@ -68,7 +70,7 @@ export function resolveColor(value, colors) {
 /** Resolves opaque control paint from an already selected Appearance branch. */
 export function resolveSolidColor(value, colors) {
     const semantic = parseSemanticColor(value, colors);
-    return semantic ? resolveColorLevel(semantic.source, semantic.level) : opaqueColor(value);
+    return semantic ? resolveColorLevel(semantic.source, semantic.level) : resolvableOpaqueColor(value) ?? value;
 }
 /** Applies material opacity without restricting the source CSS color syntax. */
 export function colorOpacity(value, opacity) {
@@ -98,11 +100,15 @@ export function colorShade(value, amount) {
     result.coords[0] = Math.max(0, Math.min(1, lightness + (lightness > 0.6 ? -amount : amount)));
     return opaqueColor(serialize(result));
 }
-/** Chooses only from the two Appearance colors, against the actual painted fill. */
+/** Chooses the perceptually opposite Appearance color for the actual painted fill. */
 export function onColor(fill, background, foreground) {
     const first = opaqueColor(background);
     const second = opaqueColor(foreground);
-    return contrastWCAG21(fill, first) > contrastWCAG21(fill, second) ? first : second;
+    const candidates = orderColors(first, second);
+    const darker = colorLightness(candidates.darker);
+    const lighter = colorLightness(candidates.lighter);
+    const threshold = darker + (lighter - darker) * 2 / 3;
+    return colorLightness(opaqueColor(fill)) < threshold ? candidates.lighter : candidates.darker;
 }
 /** Chooses readable content when the fill can be evaluated, otherwise preserves Appearance foreground. */
 export function contrastingColor(value, colors) {
@@ -116,14 +122,57 @@ export function contrastingColor(value, colors) {
 /** Solid controls start at base; interaction shades preserve its text choice. */
 export function solidColors(base, background, foreground) {
     const fill = resolveColorLevel(base, "base");
-    const color = onColor(fill, background, foreground);
-    const paint = (background) => ({ background, color });
+    const content = resolvableOnColor(fill, background, foreground) ?? foreground;
+    const paint = (background) => ({ background, color: content });
+    const concrete = resolvableOpaqueColor(fill);
+    if (concrete == null)
+        return {
+            rest: paint(fill),
+            hover: paint(cssInteractionColor(fill, foreground, 0.045)),
+            pressed: paint(cssInteractionColor(fill, foreground, 0.085))
+        };
+    return {
+        rest: paint(concrete),
+        hover: paint(colorShade(concrete, 0.045)),
+        pressed: paint(colorShade(concrete, 0.085))
+    };
+}
+/** Low-emphasis interaction paints derived from the same component-owned base. */
+export function subtleColors(base, background, foreground) {
+    const fill = resolveColorLevel(base, "base");
+    const canvas = resolvableOpaqueColor(background) ?? background;
+    const concrete = resolvableOpaqueColor(fill);
+    const paint = (weight) => {
+        const mixed = concrete == null
+            ? `color-mix(in oklch, ${canvas} ${Math.round((1 - weight) * 10_000) / 100}%, ${fill})`
+            : opaqueColor(serialize(mix(canvas, concrete, weight, { space: "oklch" })));
+        return { background: mixed, color: resolvableOnColor(mixed, background, foreground) ?? foreground };
+    };
     return {
-        rest: paint(fill),
-        hover: paint(colorShade(fill, 0.045)),
-        pressed: paint(colorShade(fill, 0.085))
+        rest: paint(0.25),
+        hover: paint(0.5),
+        pressed: paint(0.65)
     };
 }
+function resolvableOpaqueColor(value) {
+    try {
+        return opaqueColor(value);
+    }
+    catch {
+        return null;
+    }
+}
+function resolvableOnColor(fill, background, foreground) {
+    try {
+        return onColor(fill, background, foreground);
+    }
+    catch {
+        return null;
+    }
+}
+function cssInteractionColor(base, target, amount) {
+    return `color-mix(in oklch, ${base} ${Math.round((1 - amount) * 10_000) / 100}%, ${target})`;
+}
 function parseSemanticColor(value, colors) {
     const separator = value.indexOf(":");
     if (separator < 0 || value.indexOf(":", separator + 1) >= 0)

package/dist/combo-box.d.ts

@@ -0,0 +1,20 @@
+import type { ComboBoxProps as AriaComboBoxProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { MaterialOverrides } from "./material-options.js";
+import type { RadiusProps } from "./radius.js";
+import type { SelectOption } from "./select.js";
+import type { ShadowOverrides } from "./shadow-options.js";
+export type ComboBoxOption = SelectOption;
+export interface ComboBoxProps extends Omit<AriaComboBoxProps<ComboBoxOption>, ControlOverrides | "allowsCustomValue" | "defaultItems" | "defaultInputValue" | "defaultSelectedKey" | "defaultValue" | "disabledKeys" | "inputValue" | "isReadOnly" | "items" | "onChange" | "onInputChange" | "onSelectionChange" | "selectedKey" | "selectionMode" | "value">, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+    readonly options: readonly ComboBoxOption[];
+    readonly value?: string | null;
+    readonly defaultValue?: string | null;
+    readonly onChange?: (value: string | null) => void;
+    readonly inputValue?: string;
+    readonly defaultInputValue?: string;
+    readonly onInputChange?: (value: string) => void;
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}
+/** A searchable single-selection field whose query filters string-valued options. */
+export declare const ComboBox: import("react").ForwardRefExoticComponent<ComboBoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/combo-box.js

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

package/dist/context-menu.d.ts

@@ -5,16 +5,14 @@ import { type PopoverContentProps } from "./popover.js";
 export type ContextMenuRootProps = Omit<AriaMenuTriggerProps, "trigger">;
 export declare function ContextMenuRoot(properties: ContextMenuRootProps): import("react").JSX.Element;
 export type ContextMenuTriggerProps = ComponentProps<typeof AriaPressable>;
-export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria/Pressable").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
 export type ContextMenuContentProps = Omit<PopoverContentProps, "isNonModal">;
 export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLElement>>;
 /** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
 export declare const ContextMenu: typeof ContextMenuRoot & {
-    Root: typeof ContextMenuRoot;
-    Trigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria/Pressable").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("react-aria").PressableProps & import("react").RefAttributes<import("@react-types/shared").FocusableElement>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableElement>>;
     Content: import("react").ForwardRefExoticComponent<ContextMenuContentProps & import("react").RefAttributes<HTMLElement>>;
     Menu: import("./menu.js").MenuRootComponent & {
-        Root: import("./menu.js").MenuRootComponent;
         Item: import("./menu.js").MenuItemComponent;
         Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
         Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;

package/dist/context-menu.js

@@ -38,7 +38,6 @@ export const ContextMenuContent = forwardRef(function ContextMenuContent(propert
 });
 /** A context-requested overlay sharing the same Menu contract as DropdownMenu. */
 export const ContextMenu = Object.assign(ContextMenuRoot, {
-    Root: ContextMenuRoot,
     Trigger: ContextMenuTrigger,
     Content: ContextMenuContent,
     Menu

package/dist/control-surface.d.ts

@@ -11,9 +11,10 @@ export declare function SurfaceButton({ native, paint, material: options, shadow
     readonly paint: Paint;
 } & MaterialOverrides & ShadowOverrides): import("react").JSX.Element;
 /** Void text controls use a material host while retaining native sizing. */
-export declare function SurfaceField({ paint, radius, children, material: options, shadow }: Readonly<{
+export declare function SurfaceField({ paint, radius, children, material: options, shadow, style }: Readonly<{
     paint: Paint;
     radius: CSSProperties["borderRadius"];
     children: ReactNode;
+    style?: CSSProperties;
 } & MaterialOverrides & ShadowOverrides>): import("react").JSX.Element;
 export {};

package/dist/control-surface.js

@@ -6,6 +6,6 @@ export function SurfaceButton({ native, paint, material: options, shadow }) {
     return _jsx(Surface, { ...properties, as: "button", color: paint.background, material: options, shadow: shadow, ref: ref, style: { ...style, color: paint.color }, children: children });
 }
 /** Void text controls use a material host while retaining native sizing. */
-export function SurfaceField({ paint, radius, children, material: options, shadow }) {
-    return _jsx(Surface, { as: "span", color: paint.background, material: options, shadow: shadow, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0 }, children: children });
+export function SurfaceField({ paint, radius, children, material: options, shadow, style }) {
+    return _jsx(Surface, { as: "span", color: paint.background, material: options, shadow: shadow, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0, ...style }, children: children });
 }

package/dist/control.d.ts

@@ -47,7 +47,7 @@ export interface ControlTheme {
     readonly danger: string;
     readonly paints: {
         readonly palette: SolidColors;
-        readonly neutral: SolidColors;
+        readonly subtle: SolidColors;
         readonly danger: SolidColors;
     };
     readonly radius: CSSProperties["borderRadius"];

package/dist/control.js

@@ -4,7 +4,7 @@ import { FieldError, Label, Text } from "react-aria-components";
 import { useResolvedAppearance } from "./appearance-context.js";
 import { resolveRadius } from "./radius.js";
 import { scale } from "./scale.js";
-import { colorOpacity, solidColors } from "./color.js";
+import { colorOpacity, solidColors, subtleColors } from "./color.js";
 import { resolveSolidColor } from "./color.js";
 import { controlTransition, visualTransition } from "./motion-style.js";
 export const controlFontSizes = Object.freeze({
@@ -32,15 +32,15 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
     const spacing = scale(appearance.spacing, size);
     const foreground = colors.foreground;
     const background = colors.background;
+    // One owner-provided base drives every ordinary interaction state; adding
+    // hidden state colors here would make the public color contract incomplete.
     const tint = resolveSolidColor(color ?? "default:base", colors);
-    const neutral = resolveSolidColor("default:base", colors);
-    const focus = resolveSolidColor("warning:base", colors);
     const danger = resolveSolidColor("danger:base", colors);
     const paints = useMemo(() => ({
         palette: solidColors(tint, background, foreground),
-        neutral: solidColors(neutral, background, foreground),
+        subtle: subtleColors(tint, background, foreground),
         danger: solidColors(danger, background, foreground)
-    }), [tint, neutral, background, foreground, danger]);
+    }), [tint, background, foreground, danger]);
     return useMemo(() => ({
         transition,
         motionTransition,
@@ -49,7 +49,7 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
         foreground,
         background,
         tint,
-        focusColor: colorOpacity(focus, 0.2),
+        focusColor: colorOpacity(tint, 0.2),
         danger,
         paints,
         radius: resolveRadius(radius, appearance),
@@ -57,7 +57,7 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
         indicatorSize: Math.max(16, 16 + spacing / 4),
         height: Math.max(24, 24 + spacing),
         gap: Math.max(4, spacing / 2)
-    }), [appearance, colors, transition, motionTransition, resolved.preferences.animations, spacing, foreground, background, tint, focus, danger, paints, radius, size]);
+    }), [appearance, colors, transition, motionTransition, resolved.preferences.animations, spacing, foreground, background, tint, danger, paints, radius, size]);
 }
 export function fieldStyle(theme, disabled = false, style) {
     return {
@@ -66,7 +66,6 @@ export function fieldStyle(theme, disabled = false, style) {
         display: "grid",
         gap: theme.gap,
         minWidth: 0,
-        color: theme.foreground,
         fontFamily: "inherit",
         fontSize: theme.fontSize,
         lineHeight: 1.5,

package/dist/date-control.d.ts

@@ -0,0 +1,24 @@
+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<{
+    active?: boolean;
+    children?: ReactNode;
+    disabled: boolean;
+    end?: ReactNode;
+    endFocusVisible?: boolean;
+    endRequiresVisibleFocus?: boolean;
+    group?: boolean;
+    invalid: boolean;
+    material: MaterialOverrides["material"];
+    shadow: ShadowOverrides["shadow"];
+    theme: ControlTheme;
+}>): 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<{
+    compact?: boolean;
+    slot?: "start" | "end";
+    theme: ControlTheme;
+}>): import("react").JSX.Element;

package/dist/date-control.js

@@ -0,0 +1,69 @@
+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 }) {
+    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.
+    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,
+        material,
+        shadow,
+        radius: theme.radius,
+        onFocusCapture: (event) => {
+            setFocused(true);
+            setEndFocused(event.target instanceof Element && event.target.closest("[data-date-control-end]") != null);
+        },
+        onBlurCapture,
+        onPointerEnter: () => setHovered(true),
+        onPointerLeave: () => setHovered(false),
+        style: {
+            ...style,
+            display: "flex",
+            alignItems: "center",
+            cursor: disabled ? "not-allowed" : "text"
+        }
+    };
+    const content = _jsxs(_Fragment, { children: [children ?? _jsx(DateSegments, { theme: theme }), end] });
+    return group
+        ? _jsx(Surface, { as: Group, ...surface, children: content })
+        : _jsx(Surface, { ...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) }) });
+}
+function segmentStyle(theme, state) {
+    const selected = state.isFocused ? theme.paints.subtle.pressed : null;
+    return {
+        ...theme.transition,
+        minWidth: state.type === "literal" ? undefined : "1ch",
+        paddingInline: state.type === "literal" ? 0 : 1,
+        borderRadius: Math.max(2, theme.spacing / 3),
+        outline: "none",
+        background: selected?.background ?? "transparent",
+        color: selected?.color ?? "inherit",
+        opacity: state.isPlaceholder ? controlOpacity.placeholder : 1,
+        fontVariantNumeric: "tabular-nums",
+        textAlign: "center"
+    };
+}

package/dist/date-field.d.ts

@@ -0,0 +1,19 @@
+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 {
+    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;
+    readonly readOnly?: boolean;
+}
+/** A locale-aware date-only field whose year, month, and day are edited as independent segments. */
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/date-field.js

@@ -0,0 +1,13 @@
+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 { DateControl } from "./date-control.js";
+import { resolveDirection, useDirection } from "./direction.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 });
+    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 })] }) }) });
+});

package/dist/date-picker.d.ts

@@ -0,0 +1,19 @@
+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 {
+    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;
+    readonly readOnly?: boolean;
+}
+/** A date-only segmented field with a calendar selection popover. */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/date-picker.js

@@ -0,0 +1,16 @@
+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 { Calendar } from "./calendar.js";
+import { CalendarTrigger } from "./calendar-trigger.js";
+import { FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { DateControl } from "./date-control.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { PopoverContent, PopoverDialog } from "./popover.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 });
+    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 }) }) })] }) }) });
+});

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

@@ -0,0 +1,20 @@
+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 { 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 {
+    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;
+    readonly readOnly?: boolean;
+}
+/** Two date-only segmented fields backed by one inclusive range calendar. */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/date-range-picker.js

@@ -0,0 +1,25 @@
+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 { CalendarTrigger } from "./calendar-trigger.js";
+import { controlOpacity, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { DateControl, DateSegments } from "./date-control.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { PopoverContent, PopoverDialog } from "./popover.js";
+import { RangeCalendar } from "./range-calendar.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 });
+    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
+                ? 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: {
+                                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 }) }) })] }) }) });
+});

package/dist/date-range.d.ts

@@ -0,0 +1,6 @@
+import type { CalendarDate } from "@internationalized/date";
+/** A date-only inclusive range shared by range calendars and range pickers. */
+export interface DateRange {
+    readonly start: CalendarDate;
+    readonly end: CalendarDate;
+}

package/dist/dialog.d.ts

@@ -1,14 +1,17 @@
 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" | "style"> {
+export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, "children" | "className" | "color" | "style"> {
     readonly children?: ReactNode;
     readonly className?: string;
+    /** Base color rendered with the backdrop's derived opacity. */
+    readonly color?: Color;
     readonly style?: CSSProperties;
 }
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -32,7 +35,6 @@ export type DialogCloseProps = ButtonProps;
 export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A modal dialog whose behavioral and structural roles remain independently composable. */
 export declare const Dialog: typeof DialogRoot & {
-    Root: typeof DialogRoot;
     Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLElement>>;