@phreshos/react-ui 0.1.29 → 0.1.31

package/dist/material-paint.js

@@ -43,12 +43,28 @@ function DistortionFilter({ distortion, identity }) {
     return _jsxs("filter", { id: `${identity}-distortion`, "data-material-distortion": "", x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [_jsx("feTurbulence", { "data-material-distortion-noise": "", "data-material-distortion-field": "organic", type: "fractalNoise", baseFrequency: "0.008 0.008", numOctaves: 2, seed: 92, result: `${identity}-organic-noise` }), _jsx("feGaussianBlur", { in: `${identity}-organic-noise`, stdDeviation: 2, result: `${identity}-organic-noise-blurred` }), _jsx("feDisplacementMap", { "data-material-distortion-stage": "organic", in: "SourceGraphic", in2: `${identity}-organic-noise-blurred`, scale: distortion, xChannelSelector: "R", yChannelSelector: "G" })] });
 }
 function grainImage(seed, amount) {
+    const key = `${seed}:${amount}`;
+    const cached = grainResources.get(key);
+    if (cached !== undefined) {
+        grainResources.delete(key);
+        grainResources.set(key, cached);
+        return cached;
+    }
     const paths = grainPaths(seed, amount)
         .map((path, tone) => path
         ? `<path d="${path}" fill="rgb(${toneChannel(tone)} ${toneChannel(tone)} ${toneChannel(tone)})"/>`
         : "")
         .join("");
-    return `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${patternSize}" height="${patternSize}" viewBox="0 0 ${patternSize} ${patternSize}">${paths}</svg>`)}")`;
+    const resource = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${patternSize}" height="${patternSize}" viewBox="0 0 ${patternSize} ${patternSize}">${paths}</svg>`)}")`;
+    // Preserve the exact texture while avoiding the same expensive SVG generation
+    // for every Surface. The bound prevents live grain controls from growing it forever.
+    if (grainResources.size >= grainResourceLimit) {
+        const oldest = grainResources.keys().next().value;
+        if (oldest !== undefined)
+            grainResources.delete(oldest);
+    }
+    grainResources.set(key, resource);
+    return resource;
 }
 /** Preserve the original contract: amount is the monotonic density of visible grain pixels. */
 function grainPaths(seed, amount) {
@@ -99,3 +115,5 @@ function clamp(value, minimum, maximum) {
 const patternSize = 64;
 const toneCount = 16;
 const grainSeeds = [19, 47, 83, 131];
+const grainResourceLimit = 64;
+const grainResources = new Map();

package/dist/menu.d.ts

@@ -2,18 +2,36 @@ import type { CSSProperties, ReactElement, RefAttributes } from "react";
 import type { HeaderProps as AriaHeaderProps, MenuItemProps as AriaMenuItemProps, MenuProps as AriaMenuProps, MenuSectionProps as AriaMenuSectionProps, SeparatorProps as AriaSeparatorProps } from "react-aria-components";
 import { type ControlColor } from "./control.js";
 import type { ScaleLevel } from "./scale.js";
-export interface MenuRootProps<T extends object = object> extends Omit<AriaMenuProps<T>, "className" | "style"> {
+import { type MultipleStringSelection, type MultipleStringSelectionProps, type SingleStringSelectionProps } from "./selection.js";
+type MenuRootBaseProps<T extends object> = Omit<AriaMenuProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onAction" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style"> & Readonly<{
     readonly className?: string;
     readonly color?: ControlColor;
+    readonly disabledValues?: readonly string[];
+    readonly onItemAction?: (value: string) => void;
     readonly size?: ScaleLevel;
     readonly style?: CSSProperties;
-}
+}>;
+export type MenuNoSelectionProps = Readonly<{
+    selectionMode?: "none";
+    value?: never;
+    defaultValue?: never;
+    onChange?: never;
+}>;
+export type MenuSingleSelectionProps = SingleStringSelectionProps & Readonly<{
+    selectionMode: "single";
+}>;
+export type MenuMultipleValue = MultipleStringSelection;
+export type MenuMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
+    selectionMode: "multiple";
+}>;
+export type MenuRootProps<T extends object = object> = MenuRootBaseProps<T> & (MenuNoSelectionProps | MenuSingleSelectionProps | MenuMultipleSelectionProps);
 export type MenuRootComponent = <T extends object = object>(properties: MenuRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
 export declare const MenuRoot: MenuRootComponent;
-export interface MenuItemProps<T = object> extends Omit<AriaMenuItemProps<T>, "className" | "isDisabled" | "style"> {
+export interface MenuItemProps<T = object> extends Omit<AriaMenuItemProps<T>, "className" | "id" | "isDisabled" | "style"> {
     readonly className?: string;
     readonly color?: ControlColor;
     readonly disabled?: boolean;
+    readonly id?: string;
     readonly style?: CSSProperties;
 }
 export type MenuItemComponent = <T = object>(properties: MenuItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
@@ -26,10 +44,10 @@ export type MenuSeparatorProps = AriaSeparatorProps;
 export declare const MenuSeparator: import("react").ForwardRefExoticComponent<AriaSeparatorProps & RefAttributes<HTMLElement>>;
 /** A keyboard-navigable collection of commands or selectable options. */
 export declare const Menu: MenuRootComponent & {
-    Root: MenuRootComponent;
     Item: MenuItemComponent;
     Section: <T>(props: AriaMenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
     Header: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
     Separator: import("react").ForwardRefExoticComponent<AriaSeparatorProps & RefAttributes<HTMLElement>>;
 };
 export type MenuProps<T extends object = object> = MenuRootProps<T>;
+export {};

package/dist/menu.js

@@ -3,23 +3,43 @@ import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Header as AriaHeader, Menu as AriaMenu, MenuItem as AriaMenuItem, MenuSection as AriaMenuSection, Separator as AriaSeparator } from "react-aria-components";
 import { colorOpacity } from "./color.js";
 import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
+import { multipleSelection, singleSelection, stringKey, toAriaSelection } from "./selection.js";
 const MenuThemeContext = createContext(null);
-const MenuRootImplementation = forwardRef(function MenuRoot({ className, color, size = "medium", style, ...properties }, ref) {
+const MenuRootImplementation = forwardRef(function MenuRoot(properties, ref) {
+    const { className, color, defaultValue, disabledValues, onChange, onItemAction, selectionMode = "none", size = "medium", style, value, ...native } = properties;
     const theme = useControlTheme({ color, size });
     const context = useMemo(() => ({ color, size, theme }), [color, size, theme]);
-    return _jsx(MenuThemeContext.Provider, { value: context, children: _jsx(AriaMenu, { ...properties, ref: ref, className: className, style: {
+    return _jsx(MenuThemeContext.Provider, { value: context, children: _jsx(AriaMenu, { ...native, ...selectionProperties(properties), ref: ref, className: className, disabledKeys: disabledValues, selectionMode: selectionMode === "none" ? undefined : selectionMode, onAction: onItemAction == null ? undefined : key => onItemAction(stringKey(key)), style: {
                 display: "grid",
                 gap: theme.gap,
                 minWidth: theme.height * 4,
                 padding: theme.gap,
                 boxSizing: "border-box",
                 outline: "none",
-                color: theme.foreground,
                 fontFamily: "inherit",
                 fontSize: theme.fontSize,
                 ...style
             } }) });
 });
+function selectionProperties(properties) {
+    const selectedKeys = toAriaSelection(properties.value);
+    const defaultSelectedKeys = toAriaSelection(properties.defaultValue);
+    const onSelectionChange = properties.onChange == null
+        ? undefined
+        : (selection) => {
+            if (properties.selectionMode === "multiple") {
+                properties.onChange?.(multipleSelection(selection));
+                return;
+            }
+            if (properties.selectionMode === "single")
+                properties.onChange?.(singleSelection(selection));
+        };
+    return {
+        ...(selectedKeys !== undefined ? { selectedKeys } : {}),
+        ...(defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}),
+        ...(onSelectionChange !== undefined ? { onSelectionChange } : {})
+    };
+}
 export const MenuRoot = MenuRootImplementation;
 const MenuItemImplementation = forwardRef(function MenuItem({ className, color, disabled = false, style, ...properties }, ref) {
     const inherited = useContext(MenuThemeContext);
@@ -37,7 +57,7 @@ function MenuItemView({ className, disabled, properties, ref, style, theme }) {
                 ? theme.paints.palette.pressed
                 : state.isHovered || state.isSelected
                     ? theme.paints.palette.hover
-                    : { background: "transparent", color: theme.foreground };
+                    : { background: "transparent", color: "inherit" };
             return {
                 ...theme.transition,
                 display: "flex",
@@ -77,7 +97,7 @@ export const MenuSeparator = forwardRef(function MenuSeparator({ style, ...prope
             height: 1,
             marginBlock: theme.gap,
             border: 0,
-            background: colorOpacity(theme.foreground, controlOpacity.separator),
+            background: colorOpacity(theme.tint, controlOpacity.separator),
             ...style
         } });
 });
@@ -89,7 +109,6 @@ function useMenuTheme() {
 }
 /** A keyboard-navigable collection of commands or selectable options. */
 export const Menu = Object.assign(MenuRoot, {
-    Root: MenuRoot,
     Item: MenuItem,
     Section: MenuSection,
     Header: MenuHeader,

package/dist/panel.d.ts

@@ -11,7 +11,6 @@ export type PanelContentProps = SurfaceProps;
 export declare const PanelContent: import("react").ForwardRefExoticComponent<Omit<PanelContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** A material shell whose named parts remain independently composable. */
 export declare const Panel: import("react").ForwardRefExoticComponent<Omit<PanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<Omit<PanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Header: import("react").ForwardRefExoticComponent<PanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<PanelContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/panel.js

@@ -36,7 +36,6 @@ export const PanelContent = forwardRef(function PanelContent({ style, ...propert
 });
 /** A material shell whose named parts remain independently composable. */
 export const Panel = Object.assign(PanelRoot, {
-    Root: PanelRoot,
     Header: PanelHeader,
     Content: PanelContent
 });

package/dist/popover.d.ts

@@ -20,7 +20,6 @@ export type PopoverCloseProps = ButtonProps;
 export declare const PopoverClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export declare const Popover: typeof PopoverRoot & {
-    Root: typeof PopoverRoot;
     Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
     Dialog: import("react").ForwardRefExoticComponent<AriaDialogProps & import("react").RefAttributes<HTMLElement>>;

package/dist/popover.js

@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Popover as AriaPopover } from "react-aria-components";
 import { useResolvedAppearance } from "./appearance-context.js";
 import { Button } from "./button.js";
+import { controlFontSizes, controlFontWeight } from "./control.js";
 import MotionStyle, { overlayMotionClass, overlayTransition } from "./motion-style.js";
 import { scale } from "./scale.js";
 import { Surface } from "./surface.js";
@@ -30,15 +31,24 @@ export const PopoverContent = forwardRef(function PopoverContent({ children, cla
 export const PopoverDialog = forwardRef(function PopoverDialog({ style, ...properties }, ref) {
     return _jsx(AriaDialog, { ...properties, ref: ref, style: { minWidth: 0, outline: "none", ...style } });
 });
-export const PopoverTitle = forwardRef(function PopoverTitle(properties, ref) {
-    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title" });
+export const PopoverTitle = forwardRef(function PopoverTitle({ style, ...properties }, ref) {
+    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", 
+        // Portalled headings cannot rely on the trigger subtree to neutralize
+        // browser heading defaults; this part owns its complete text treatment.
+        style: {
+            margin: 0,
+            fontFamily: "inherit",
+            fontSize: controlFontSizes.medium,
+            fontWeight: controlFontWeight,
+            lineHeight: 1.5,
+            ...style
+        } });
 });
 export const PopoverClose = forwardRef(function PopoverClose(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref, slot: "close" });
 });
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export const Popover = Object.assign(PopoverRoot, {
-    Root: PopoverRoot,
     Trigger: PopoverTrigger,
     Content: PopoverContent,
     Dialog: PopoverDialog,

package/dist/progress-bar.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { ProgressBarProps as AriaProgressBarProps } from "react-aria-components";
+import type { ControlColor } from "./control.js";
+import type { ScaleLevel } from "./scale.js";
+type NativeProgressBarProps = Omit<AriaProgressBarProps, "children" | "className" | "isIndeterminate" | "style">;
+export interface ProgressBarProps extends NativeProgressBarProps {
+    /** Native class name applied without replacing the component contract. */
+    readonly className?: string;
+    /** Color used for the completed or moving portion. */
+    readonly color?: ControlColor;
+    /** Displays progress without asserting a current value. */
+    readonly indeterminate?: boolean;
+    /** Visible label associated with the progress value. */
+    readonly label?: ReactNode;
+    /** Derives typography and track thickness from Appearance. */
+    readonly size?: ScaleLevel;
+    /** Native styles applied after ProgressBar defaults. */
+    readonly style?: CSSProperties;
+}
+/** Determinate or indeterminate progress for an operation over time. */
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/progress-bar.js

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

package/dist/radio.d.ts

@@ -12,10 +12,10 @@ export interface RadioGroupProps extends Omit<BaseRadioGroupProps<string | null>
     readonly readOnly?: boolean;
     readonly orientation?: "horizontal" | "vertical";
 }
-export interface RadioProps extends Omit<BaseRadioProps<string>, "children" | "className" | "disabled" | "readOnly" | "required" | "style" | "value">, ControlProps, Pick<FieldProps, "label" | "description">, MaterialOverrides, ShadowOverrides {
+export interface RadioGroupItemProps extends Omit<BaseRadioProps<string>, "children" | "className" | "disabled" | "readOnly" | "required" | "style" | "value">, ControlProps, Pick<FieldProps, "label" | "description">, MaterialOverrides, ShadowOverrides {
     readonly value: string;
 }
-/** One string value selected from its Radio children, with direction-aware arrow navigation. */
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** An option in a RadioGroup. Selection and validation belong to the group. */
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** One exclusive-choice field whose context-dependent options are grouped as Items. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/radio.js

@@ -8,8 +8,8 @@ import { controlFontWeight, controlOpacity, fieldStyle, useControlTheme } from "
 import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
 import { resolveDirection, useDirection } from "./direction.js";
 const RadioStyleContext = createContext(null);
-/** One string value selected from its Radio children, with direction-aware arrow navigation. */
-export const RadioGroup = forwardRef(function RadioGroup({ label, description, errorMessage, children, disabled = false, readOnly = false, required = false, invalid = false, value, defaultValue, onChange, orientation = "vertical", size, color, style, className, material, shadow, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...properties }, ref) {
+/** One string value selected from its Items, with direction-aware arrow navigation. */
+const RadioGroupRoot = forwardRef(function RadioGroupRoot({ label, description, errorMessage, children, disabled = false, readOnly = false, required = false, invalid = false, value, defaultValue, onChange, orientation = "vertical", size, color, style, className, material, shadow, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...properties }, ref) {
     const theme = useControlTheme({ size, color });
     const direction = resolveDirection(properties.dir, useDirection());
     const labelId = useId();
@@ -23,10 +23,10 @@ export const RadioGroup = forwardRef(function RadioGroup({ label, description, e
     return _jsx(BaseDirectionProvider, { direction: direction, children: root });
 });
 /** An option in a RadioGroup. Selection and validation belong to the group. */
-export const Radio = forwardRef(function Radio({ label, description, value, disabled = false, size, color, style, className, material, shadow, onFocus, onBlur, "aria-describedby": ariaDescribedBy, ...properties }, ref) {
+const RadioGroupItem = forwardRef(function RadioGroupItem({ label, description, value, disabled = false, size, color, style, className, material, shadow, onFocus, onBlur, "aria-describedby": ariaDescribedBy, ...properties }, ref) {
     const inherited = useContext(RadioStyleContext);
     if (inherited == null)
-        throw new Error("Radio must be used inside RadioGroup");
+        throw new Error("RadioGroup.Item must be used inside RadioGroup");
     const theme = useControlTheme({ size: size ?? inherited.size, color: color ?? inherited.color });
     const descriptionId = useId();
     const [hovered, setHovered] = useState(false);
@@ -41,3 +41,7 @@ export const Radio = forwardRef(function Radio({ label, description, value, disa
                     onBlur?.(event);
                 }, style: state => toggleStyle(theme, state.disabled, state.readOnly), render: (native, state) => _jsxs("span", { ...native, children: [_jsx(ToggleIndicator, { kind: "radio", material: material ?? inherited.material, shadow: shadow ?? inherited.shadow, theme: theme, selected: state.checked, focused: focusVisible, invalid: inherited.invalid, hovered: !state.disabled && !state.readOnly && hovered, pressed: !state.disabled && !state.readOnly && pressed }), label] }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] });
 });
+/** One exclusive-choice field whose context-dependent options are grouped as Items. */
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+    Item: RadioGroupItem
+});

package/dist/radius.js

@@ -6,6 +6,6 @@ export function resolveRadius(value, appearance) {
     if (!isScaleLevel(value))
         return value;
     if (!appearance)
-        throw new Error("A semantic radius requires a UIProvider");
+        throw new Error("A semantic radius requires an Appearance value");
     return scale(appearance.radius, value);
 }

package/dist/range-calendar.d.ts

@@ -0,0 +1,19 @@
+import type { CalendarDate } from "@internationalized/date";
+import type { RangeCalendarProps as AriaRangeCalendarProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps } from "./control.js";
+import type { DateRange } from "./date-range.js";
+import type { RadiusProps } from "./radius.js";
+type RangeCalendarOverrides = ControlOverrides | "children" | "isReadOnly" | "isInvalid" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "visibleDuration" | "createCalendar" | "errorMessage" | "validationState";
+export interface RangeCalendarProps extends Omit<AriaRangeCalendarProps<CalendarDate>, RangeCalendarOverrides>, ControlProps, RadiusProps {
+    readonly value?: DateRange | null;
+    readonly defaultValue?: DateRange | null;
+    readonly onChange?: (value: DateRange) => void;
+    readonly minValue?: CalendarDate | null;
+    readonly maxValue?: CalendarDate | null;
+    readonly isDateUnavailable?: (date: CalendarDate, anchorDate: CalendarDate | null) => boolean;
+    readonly readOnly?: boolean;
+    readonly invalid?: boolean;
+}
+/** A locale-aware month view for selecting an inclusive date range. */
+export declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/range-calendar.js

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

package/dist/scroll-area.d.ts

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

package/dist/scroll-area.js

@@ -3,15 +3,15 @@ import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
 import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useState } from "react";
 import { useResolvedAppearance } from "./appearance-context.js";
-import { colorOpacity } from "./color.js";
+import { colorOpacity, resolveColor } from "./color.js";
 import { transitionTiming } from "./motion-style.js";
 import { resolveDirection, useDirection } from "./direction.js";
 /** A native scrolling viewport with locally owned React UI scrollbars. */
-export const ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", children, onScroll, style, viewportRef, ...properties }, ref) {
+export const ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", children, color, onScroll, style, viewportRef, ...properties }, ref) {
     const resolved = useResolvedAppearance();
     const { appearance } = resolved;
     const direction = resolveDirection(properties.dir, useDirection());
-    const foreground = resolved.colors.foreground;
+    const foreground = resolveColor(color ?? "foreground:base", resolved.colors);
     const radius = Math.min(appearance.radius, 8);
     const thickness = Math.max(8, appearance.spacing);
     const inset = Math.max(2, thickness / 3);

package/dist/select.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { Select as AriaSelect, Button, SelectValue, ListBox, ListBoxItem } from "react-aria-components";
+import { Select as AriaSelect, Button, SelectValue } from "react-aria-components";
 import { controlOpacity, controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
 import { SurfaceButton } from "./control-surface.js";
 import { ScrollArea } from "./scroll-area.js";
 import { PopoverContent } from "./popover.js";
 import { resolveDirection, useDirection } from "./direction.js";
+import { ListBox } from "./list-box.js";
 /** Single selection from string-valued options; keyboard navigation and typeahead stay native to React Aria. */
 export const Select = forwardRef(function Select({ label, description, errorMessage, disabled, required, invalid, options, value, defaultValue, onChange, size, color, radius, style, material, shadow, ...properties }, ref) {
     const theme = useControlTheme({ size, color, radius });
@@ -18,19 +19,8 @@ export const Select = forwardRef(function Select({ label, description, errorMess
                     }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? controlOpacity.placeholder : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: { ...theme.transition, transitionProperty: "transform", flexShrink: 0, transform: `rotate(${state.isOpen ? 180 : 0}deg)` }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(PopoverContent, { dir: direction, placement: "bottom start", offset: theme.gap, style: {
                         width: "var(--trigger-width)",
                         maxHeight: `min(calc(100vh - ${theme.spacing * 2}px), ${theme.height * 8}px)`,
-                        padding: theme.gap,
+                        padding: 0,
                         display: "flex",
                         flexDirection: "column"
-                    }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { shouldFocusOnHover: false, style: { display: "grid", gap: theme.gap, outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: options.map(option => _jsx(ListBoxItem, { id: option.value, textValue: option.label, style: item => ({
-                                    ...theme.transition,
-                                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
-                                    minHeight: theme.height, paddingInline: Math.max(8, theme.spacing), boxSizing: "border-box",
-                                    borderRadius: theme.radius,
-                                    outline: item.isFocusVisible && !item.isSelected ? `1px solid ${theme.focusColor}` : "none", outlineOffset: 1,
-                                    cursor: item.isDisabled ? "not-allowed" : "pointer",
-                                    opacity: item.isDisabled ? controlOpacity.disabled : 1,
-                                    ...(item.isSelected
-                                        ? item.isPressed ? theme.paints.palette.pressed : item.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest
-                                        : item.isHovered ? theme.paints.neutral.hover : { background: "transparent", color: theme.foreground })
-                                }), children: item => _jsxs(_Fragment, { children: [option.label, _jsx("span", { "aria-hidden": "true", children: item.isSelected ? "✓" : null })] }) }, option.value)) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
+                    }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { color: color, radius: radius, size: size, children: options.map(option => _jsx(ListBox.Item, { id: option.value, textValue: option.label, disabled: option.disabled, children: option.label }, option.value)) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
 });

package/dist/selection.d.ts

@@ -0,0 +1,18 @@
+import type { Key, Selection } from "react-aria-components";
+export type MultipleStringSelection = readonly string[] | "all";
+export type SingleStringSelectionProps = Readonly<{
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+}>;
+export type MultipleStringSelectionProps = Readonly<{
+    value?: MultipleStringSelection;
+    defaultValue?: MultipleStringSelection;
+    onChange?: (value: MultipleStringSelection) => void;
+}>;
+export declare function toAriaSelection(value: string | null | MultipleStringSelection | undefined): "all" | Set<string> | undefined;
+export declare function stringKey(value: Key): string;
+export declare function optionalStringKey(value: Key | null): string | null;
+export declare function singleSelection(selection: Selection): string | null;
+export declare function multipleSelection(selection: Selection): MultipleStringSelection;
+export declare function stringKeys(values: Iterable<Key>): readonly string[];

package/dist/selection.js

@@ -0,0 +1,28 @@
+export function toAriaSelection(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === "all")
+        return "all";
+    if (value === null)
+        return new Set();
+    if (typeof value === "string")
+        return new Set([value]);
+    return new Set(value);
+}
+export function stringKey(value) {
+    if (typeof value !== "string")
+        throw new Error("Collection identities must be strings");
+    return value;
+}
+export function optionalStringKey(value) {
+    return value === null ? null : stringKey(value);
+}
+export function singleSelection(selection) {
+    return selection === "all" ? null : optionalStringKey(selection.values().next().value ?? null);
+}
+export function multipleSelection(selection) {
+    return selection === "all" ? "all" : [...selection].map(stringKey);
+}
+export function stringKeys(values) {
+    return [...values].map(stringKey);
+}

package/dist/slider.js

@@ -46,7 +46,7 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
                         width: vertical ? rail : "100%",
                         height: vertical ? "100%" : rail,
                         borderRadius: rail,
-                        background: theme.paints.neutral.rest.background
+                        background: theme.paints.subtle.rest.background
                     }, children: [_jsx(BaseSlider.Indicator, { style: {
                                 ...theme.transition,
                                 borderRadius: rail,

package/dist/spacing.js

@@ -3,6 +3,6 @@ export function resolveSpacing(value, appearance) {
     if (!isScaleLevel(value))
         return value;
     if (!appearance)
-        throw new Error("Semantic spacing requires a UIProvider");
+        throw new Error("Semantic spacing requires an Appearance value");
     return scale(appearance.spacing, value);
 }

package/dist/surface.d.ts

@@ -4,7 +4,7 @@ import { type MaterialOverrides } from "./material-options.js";
 import { type RadiusProps } from "./radius.js";
 import { type ShadowOverrides } from "./shadow-options.js";
 import type { Direction } from "./direction.js";
-export type { MaterialOptions } from "./material-options.js";
+export type { MaterialMode, MaterialOptions } from "./material-options.js";
 export type { ShadowOptions } from "./shadow-options.js";
 export interface SurfaceOwnProps extends MaterialOverrides, ShadowOverrides, RadiusProps {
     readonly color?: Color;

package/dist/surface.js

@@ -35,15 +35,34 @@ const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, ma
 });
 export const Surface = SurfaceRoot;
 function resolveSurface(color, options, resolved) {
+    const mode = typeof options === "object" ? "full" : options ?? "basic";
+    const level = materialLevel[mode];
     const material = resolveMaterialOptions(typeof options === "object" ? options : {}, resolved.material);
     const fill = resolveColor(color, resolved.colors);
+    const opacity = level >= materialLevel.extended ? material.opacity : 1;
+    const backdrop = level >= materialLevel.full;
+    const grain = level === materialLevel.basic
+        ? material.grain * material.opacity
+        : material.grain;
     return {
         ...material,
-        enabled: options !== false,
+        enabled: level >= materialLevel.basic,
+        opacity,
+        fillOpacity: opacity,
+        grain,
+        backdrop: backdrop ? material.backdrop : 0,
+        distortion: backdrop ? material.distortion : 0,
+        saturation: backdrop ? material.saturation : 1,
         color: fill,
         foreground: contrastingColor(color ?? defaultColor, resolved.colors)
     };
 }
+const materialLevel = Object.freeze({
+    none: 0,
+    basic: 1,
+    extended: 2,
+    full: 3
+});
 const layerStyle = {
     position: "absolute",
     inset: 0,
@@ -51,7 +70,7 @@ const layerStyle = {
     pointerEvents: "none"
 };
 function SurfaceLayers({ material, paintTransition }) {
-    const filtersVisible = material.opacity < 1;
+    const filtersVisible = material.fillOpacity < 1;
     const backdrop = filtersVisible ? material.backdrop : 0;
     const saturation = filtersVisible ? material.saturation : 1;
     const distortion = filtersVisible ? material.distortion : 0;
@@ -60,7 +79,7 @@ function SurfaceLayers({ material, paintTransition }) {
         saturation === 1 ? "" : `saturate(${saturation})`
     ].filter(Boolean).join(" ");
     const identity = `phresh-material-${useId().replaceAll(":", "")}`;
-    return _jsxs("span", { "data-material": "", "aria-hidden": "true", style: layerStyle, children: [distortion > 0 && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), frost && _jsx(BackdropLayer, { name: "frost", filter: frost, zIndex: -2 }), _jsx(MaterialPaint, { identity: identity, distortion: distortion, color: material.color, grain: material.grain, grainAmount: material.grainAmount, opacity: material.opacity, transition: paintTransition })] });
+    return _jsxs("span", { "data-material": "", "aria-hidden": "true", style: layerStyle, children: [distortion > 0 && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), frost && _jsx(BackdropLayer, { name: "frost", filter: frost, zIndex: -2 }), _jsx(MaterialPaint, { identity: identity, distortion: distortion, color: material.color, grain: material.grain, grainAmount: material.grainAmount, opacity: material.fillOpacity, transition: paintTransition })] });
 }
 /** Keep refraction and native frost in independent compositor passes. */
 function BackdropLayer({ filter, name, zIndex }) {