@phreshos/react-ui 0.1.35 → 0.1.37

package/dist/menu.js

@@ -1,116 +1,70 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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(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, { ...native, ...selectionProperties(properties), ref: ref, className: className, disabledKeys: disabledValues, selectionMode: selectionMode === "none" ? undefined : selectionMode, onAction: onItemAction == null ? undefined : key => onItemAction(stringKey(key)), style: {
+import { useControlMetrics } from "./control/control.js";
+import { separatorColor } from "./control/field.js";
+import { itemStyle, itemSurface, SelectionMark } from "./control/item.js";
+import { ariaSelection, stringKey } from "./control/selection.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { collectionHeaderStyle } from "./list-box.js";
+const MenuStyleContext = createContext(null);
+const MenuRootImplementation = forwardRef(function Menu(properties, ref) {
+    const { className, closeOnSelect, color = "primary", defaultValue: _defaultValue, focusWrap, onAction, onChange: _onChange, radius, selectionMode = "none", size, style, value: _value, ...native } = properties;
+    const metrics = useControlMetrics(size, radius);
+    // Items are controls: they take the control radius at their size.
+    const itemRadius = metrics.radius;
+    const context = useMemo(() => ({ color, metrics, itemRadius, selecting: selectionMode !== "none" }), [color, metrics, itemRadius, selectionMode]);
+    const selection = ariaSelection(properties, "none");
+    return _jsx(MenuStyleContext.Provider, { value: context, children: _jsx(AriaMenu, { ...native, ...selection, selectionMode: selection.selectionMode === "none" ? undefined : selection.selectionMode, shouldCloseOnSelect: closeOnSelect, shouldFocusWrap: focusWrap, ref: ref, className: className, onAction: onAction == null ? undefined : key => onAction(stringKey(key)), style: {
                 display: "grid",
-                gap: theme.gap,
-                minWidth: theme.height * 4,
-                padding: theme.gap,
+                gap: 2,
+                minWidth: metrics.height * 5,
+                padding: metrics.listInset,
                 boxSizing: "border-box",
                 outline: "none",
                 fontFamily: "inherit",
-                fontSize: theme.fontSize,
+                fontSize: metrics.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);
-    const item = { className, disabled, properties, ref, style };
-    return inherited != null && color === undefined
-        ? _jsx(MenuItemView, { ...item, theme: inherited.theme })
-        : _jsx(ResolvedMenuItem, { ...item, color: color ?? inherited?.color, size: inherited?.size });
+const MenuItemImplementation = forwardRef(function MenuItem({ children, className, closeOnSelect, color, disabled = false, style, textValue, ...properties }, ref) {
+    const { color: inherited, metrics, itemRadius, selecting } = useMenuStyle();
+    const itemColor = color ?? inherited;
+    return _jsx(AriaMenuItem, { ...properties, shouldCloseOnSelect: closeOnSelect, ref: ref, textValue: textValue ?? (typeof children === "string" ? children : undefined), className: className, isDisabled: disabled, render: surfaceRender("div", state => itemSurface(metrics.visual, itemColor, {
+            selected: state.isSelected,
+            // Keyboard focus moves the highlight through a menu the way the pointer does;
+            // pointer-restored focus alone must not keep an item highlighted.
+            hovered: state.isHovered || state.isFocusVisible,
+            pressed: state.isPressed,
+            focusVisible: false,
+            disabled: state.isDisabled
+        }, itemRadius)), style: { ...itemStyle(metrics, disabled), ...style }, children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, selecting && _jsx(SelectionMark, { visible: state.isSelected })] }) });
 });
-function ResolvedMenuItem({ color, size, ...properties }) {
-    return _jsx(MenuItemView, { ...properties, theme: useControlTheme({ color, size }) });
-}
-function MenuItemView({ className, disabled, properties, ref, style, theme }) {
-    return _jsx(AriaMenuItem, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => {
-            const paint = state.isPressed
-                ? theme.paints.palette.pressed
-                : state.isHovered || state.isSelected
-                    ? theme.paints.palette.hover
-                    : { background: "transparent", color: "inherit" };
-            return {
-                ...theme.transition,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: theme.gap,
-                minWidth: 0,
-                minHeight: theme.height,
-                paddingInline: Math.max(8, theme.spacing),
-                boxSizing: "border-box",
-                borderRadius: theme.radius,
-                outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-                outlineOffset: 1,
-                cursor: disabled ? "not-allowed" : "pointer",
-                opacity: disabled ? controlOpacity.disabled : 1,
-                userSelect: "none",
-                ...paint,
-                ...style
-            };
-        } });
-}
-export const MenuItem = MenuItemImplementation;
-export const MenuSection = AriaMenuSection;
-export const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
-    const theme = useMenuTheme();
-    return _jsx(AriaHeader, { ...properties, ref: ref, style: {
-            paddingInline: Math.max(8, theme.spacing),
-            paddingBlock: theme.gap,
-            fontWeight: controlFontWeight,
-            opacity: controlOpacity.secondary,
-            ...style
-        } });
+const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
+    const { metrics } = useMenuStyle();
+    return _jsx(AriaHeader, { ...properties, ref: ref, style: collectionHeaderStyle(metrics, style) });
 });
-export const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }, ref) {
-    const theme = useMenuTheme();
+const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }, ref) {
+    const { metrics } = useMenuStyle();
     return _jsx(AriaSeparator, { ...properties, ref: ref, style: {
             height: 1,
-            marginBlock: theme.gap,
+            marginBlock: 4,
+            marginInline: metrics.inset,
             border: 0,
-            background: colorOpacity(theme.tint, controlOpacity.separator),
+            background: separatorColor(metrics),
             ...style
         } });
 });
-function useMenuTheme() {
-    const inherited = useContext(MenuThemeContext);
-    if (inherited == null)
+function useMenuStyle() {
+    const context = useContext(MenuStyleContext);
+    if (context == null)
         throw new Error("Menu parts must be used inside Menu");
-    return inherited.theme;
+    return context;
 }
 /** A keyboard-navigable collection of commands or selectable options. */
-export const Menu = Object.assign(MenuRoot, {
-    Item: MenuItem,
-    Section: MenuSection,
+export const Menu = Object.assign(MenuRootImplementation, {
+    Item: MenuItemImplementation,
+    Section: AriaMenuSection,
     Header: MenuHeader,
     Separator: MenuSeparator
 });

package/dist/number-field.d.ts

@@ -0,0 +1,17 @@
+import type { NumberFieldProps as AriaNumberFieldProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, ControlOverrides | "value" | "defaultValue" | "onChange" | "className" | "style">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    /** A number, or `null` while the field is empty. */
+    readonly value?: number | null;
+    readonly defaultValue?: number | null;
+    readonly onChange?: (value: number | null) => void;
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}
+/**
+ * A number typed or stepped within a range. It is formatted by the locale and
+ * `formatOptions`, such as a unit, and checked against its range on blur.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/number-field.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Group, Input as AriaInput, NumberField as AriaNumberField } from "react-aria-components";
+import { Minus, Plus } from "lucide-react";
+import { useControlMetrics } from "./control/control.js";
+import { FieldButton } from "./control/field-button.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { iconProps } from "./control/icon.js";
+import { surfaceRender } from "./control/surface-render.js";
+import { nativeTextStyle } from "./control/text-control.js";
+import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
+import { dimmedClass } from "./surface/surface.js";
+/**
+ * A number typed or stepped within a range. It is formatted by the locale and
+ * `formatOptions`, such as a unit, and checked against its range on blur.
+ */
+export const NumberField = forwardRef(function NumberField({ label, description, errorMessage, disabled, readOnly, required, invalid, value, defaultValue, onChange, size, color = "background", radius, style, className, placeholder, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    // React Aria spells an empty number as NaN; React UI spells it as null.
+    const number = (next) => next === null ? Number.NaN : next;
+    return _jsxs(AriaNumberField, { ...properties, ...(value !== undefined ? { value: number(value) } : {}), ...(defaultValue !== undefined ? { defaultValue: number(defaultValue) } : {}), onChange: next => onChange?.(Number.isNaN(next) ? null : next), className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsxs(Group, { render: surfaceRender("div", group => ({
+                    color,
+                    depth: "recessed",
+                    material,
+                    radius: metrics.radius,
+                    interaction: { hovered: group.isHovered, focusVisible: group.isFocusWithin, invalid: group.isInvalid, disabled: group.isDisabled }
+                })), style: { display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto auto", alignItems: "center", minWidth: 0, height: metrics.height, paddingInlineEnd: 4 }, children: [_jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, style: { ...nativeTextStyle(metrics, false), paddingInlineEnd: metrics.gap, fontVariantNumeric: "tabular-nums" } }), _jsx(FieldButton, { slot: "decrement", metrics: metrics, children: _jsx(Minus, { ...iconProps(14) }) }), _jsx(FieldButton, { slot: "increment", metrics: metrics, children: _jsx(Plus, { ...iconProps(14) }) })] }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
+});

package/dist/panel.d.ts

@@ -1,15 +1,20 @@
 import type { ComponentProps, HTMLAttributes } from "react";
-import { type SurfaceProps } from "./surface.js";
-/** Optional content placed before the inset Panel surface. */
+import { type SurfaceProps } from "./surface/surface.js";
+/** Optional heading placed before the inset Panel content. */
 export type PanelHeaderProps = HTMLAttributes<HTMLDivElement>;
 export declare const PanelHeader: import("react").ForwardRefExoticComponent<PanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-/** The material shell that owns a Panel's vertical composition. */
+/** The raised, frosted shell that owns a Panel's vertical composition. */
 export type PanelRootProps = SurfaceProps;
 export declare const PanelRoot: import("react").ForwardRefExoticComponent<Omit<PanelRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** The independently configurable inset Surface that owns Panel content. */
+/**
+ * The inset region that holds a Panel's content. It is the Panel's own color,
+ * raised, with a more solid material than the frosted shell, so recessed
+ * fields inside it stand out. It sits `small` spacing inside the frame and
+ * pads its content by the Appearance spacing.
+ */
 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. */
+/** A raised shell with an optional header and one inset content region. */
 export declare const Panel: 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

@@ -1,18 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, createContext, forwardRef, isValidElement, useContext } from "react";
-import { useAppearance } from "./ui-provider.js";
-import { scale } from "./scale.js";
-import { Surface } from "./surface.js";
-const PanelContext = createContext({ hasHeader: false });
+import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import { headerHeight } from "./foundation/layout.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { paintClass, paintClassesAvailable } from "./surface/paint-class.js";
+import { Surface } from "./surface/surface.js";
+const PanelContext = createContext({ color: undefined, hasHeader: false, radius: undefined });
 export const PanelHeader = forwardRef(function PanelHeader({ style, ...properties }, ref) {
+    const { spacing } = useVisual();
+    // The same header row as a Window: its height and its side padding.
     return _jsx("div", { ...properties, ref: ref, style: {
+            boxSizing: "border-box",
+            // A grid keeps the header's content full width and centers it in the row.
+            display: "grid",
+            alignContent: "center",
             minWidth: 0,
+            minHeight: headerHeight(spacing),
+            paddingInline: spacing,
+            fontSize: controlFontSizes.medium,
+            fontWeight: controlFontWeight,
             ...style
         } });
 });
-export const PanelRoot = forwardRef(function PanelRoot({ children, style, ...properties }, ref) {
+export const PanelRoot = forwardRef(function Panel({ children, style, ...properties }, ref) {
     const hasHeader = Children.toArray(children).some(child => isValidElement(child) && child.type === PanelHeader);
-    return _jsx(PanelContext.Provider, { value: { hasHeader }, children: _jsx(Surface, { ...properties, ref: ref, style: {
+    // The shell and its content share one radius: the Appearance radius.
+    const radius = resolveRadius(properties.radius ?? "medium", useVisual().radius);
+    return _jsx(PanelContext.Provider, { value: { color: properties.color, hasHeader, radius }, children: _jsx(Surface, { material: "full", ...properties, ref: ref, radius: radius, style: {
                 display: "grid",
                 gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
                 minWidth: 0,
@@ -21,11 +37,16 @@ export const PanelRoot = forwardRef(function PanelRoot({ children, style, ...pro
                 ...style
             }, children: children }) });
 });
-export const PanelContent = forwardRef(function PanelContent({ style, ...properties }, ref) {
-    const inset = scale(useAppearance().spacing, "small");
-    const { hasHeader } = useContext(PanelContext);
-    return _jsx(Surface, { ...properties, ref: ref, style: {
-            position: "relative",
+export const PanelContent = forwardRef(function PanelContent({ className, style, ...properties }, ref) {
+    const { spacing } = useVisual();
+    const inset = scale(spacing, "small");
+    const padding = scale(spacing, "medium");
+    const { color, hasHeader, radius } = useContext(PanelContext);
+    // A zero-specificity class keeps the padding a default: any consumer class
+    // or style still sets its own.
+    const padded = paintClassesAvailable ? paintClass(`padding: ${padding}px`) : undefined;
+    return _jsx(Surface, { color: color, material: "extended", radius: radius, ...properties, ref: ref, className: [padded, className].filter(Boolean).join(" ") || undefined, style: {
+            ...(padded === undefined ? { padding } : {}),
             minWidth: 0,
             minHeight: 0,
             margin: inset,
@@ -34,7 +55,7 @@ export const PanelContent = forwardRef(function PanelContent({ style, ...propert
             ...style
         } });
 });
-/** A material shell whose named parts remain independently composable. */
+/** A raised shell with an optional header and one inset content region. */
 export const Panel = Object.assign(PanelRoot, {
     Header: PanelHeader,
     Content: PanelContent

package/dist/popover.d.ts

@@ -1,14 +1,24 @@
 import type { ComponentProps, CSSProperties, ReactNode } from "react";
-import type { DialogProps as AriaDialogProps, DialogTriggerProps as AriaDialogTriggerProps, HeadingProps as AriaHeadingProps, PopoverProps as AriaPopoverProps } from "react-aria-components";
+import type { DialogProps as AriaDialogProps, HeadingProps as AriaHeadingProps, PopoverProps as AriaPopoverProps } from "react-aria-components";
 import { type ButtonProps } from "./button.js";
-import { type SurfaceOwnProps } from "./surface.js";
-export type PopoverRootProps = AriaDialogTriggerProps;
-export declare function PopoverRoot(properties: PopoverRootProps): import("react").JSX.Element;
+import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
+import { type Direction } from "./foundation/direction.js";
+import { type SurfaceOwnProps } from "./surface/surface.js";
+export type PopoverRootProps = OverlayRootProps;
+export declare function PopoverRoot({ children, ...state }: PopoverRootProps): import("react").JSX.Element;
 export type PopoverTriggerProps = ButtonProps;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface PopoverContentProps extends Omit<AriaPopoverProps, "children" | "className" | "color" | "style">, SurfaceOwnProps {
+/**
+ * The floating Surface of an overlay. Its open state belongs to the family
+ * root, so this part takes placement, its own Surface, and ordinary element
+ * attributes.
+ */
+export interface PopoverContentProps extends Omit<AriaPopoverProps, AriaOverlayInternals | "children" | "className" | "color" | "style" | "dir">, SurfaceOwnProps {
     readonly children?: ReactNode;
     readonly className?: string;
+    readonly dir?: Direction;
+    /** DOM container that owns the positioned overlay's coordinate space. */
+    readonly portalContainer?: Element;
     readonly style?: CSSProperties;
 }
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
@@ -18,6 +28,10 @@ export type PopoverTitleProps = AriaHeadingProps;
 export declare const PopoverTitle: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export type PopoverCloseProps = ButtonProps;
 export declare const PopoverClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** Positioned content that holds a Menu; it keeps the Appearance radius like every shell. */
+export declare const MenuContent: import("react").ForwardRefExoticComponent<PopoverContentProps & Readonly<{
+    nonModal?: boolean;
+}> & import("react").RefAttributes<HTMLElement>>;
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export declare const Popover: typeof PopoverRoot & {
     Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/popover.js

@@ -1,26 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, 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";
-import { resolveDirection, useDirection } from "./direction.js";
-import { resolveDirectionalPlacement } from "./overlay-placement.js";
-export function PopoverRoot(properties) {
-    return _jsx(AriaDialogTrigger, { ...properties });
+import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import MotionStyle, { overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
+import { resolveDirectionalPlacement } from "./foundation/overlay-placement.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { floatingShadow } from "./surface/shadow-options.js";
+import { Surface } from "./surface/surface.js";
+export function PopoverRoot({ children, ...state }) {
+    return _jsx(AriaDialogTrigger, { ...ariaOpenState(state), children: children });
 }
 export const PopoverTrigger = forwardRef(function PopoverTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const PopoverContent = forwardRef(function PopoverContent({ children, className, color, material, radius, shadow, style, offset, placement = "bottom", ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const inset = scale(resolved.appearance.spacing, "small");
-    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
-    const direction = resolveDirection(properties.dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...properties, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+const PositionedContent = forwardRef(function PositionedContent({ children, className, color, material, radius, shadow, style, offset, placement = "bottom", nonModal, dir, portalContainer, ...attributes }, ref) {
+    const visual = useVisual();
+    const inset = scale(visual.spacing, "small");
+    const transition = overlayTransition(visual);
+    const direction = resolveDirection(dir, useDirection());
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaPopover, { ...attributes, isNonModal: nonModal, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, shadow: shadow ?? floatingShadow(visual.shadow), radius: radius, style: {
                         boxSizing: "border-box",
                         maxWidth: `calc(100vw - ${inset * 2}px)`,
                         maxHeight: `calc(100vh - ${inset * 2}px)`,
@@ -28,6 +30,9 @@ export const PopoverContent = forwardRef(function PopoverContent({ children, cla
                         ...style
                     }, children: children }) })] });
 });
+export const PopoverContent = forwardRef(function PopoverContent(properties, ref) {
+    return _jsx(PositionedContent, { ...properties, ref: ref });
+});
 export const PopoverDialog = forwardRef(function PopoverDialog({ style, ...properties }, ref) {
     return _jsx(AriaDialog, { ...properties, ref: ref, style: { minWidth: 0, outline: "none", ...style } });
 });
@@ -47,6 +52,8 @@ export const PopoverTitle = forwardRef(function PopoverTitle({ style, ...propert
 export const PopoverClose = forwardRef(function PopoverClose(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref, slot: "close" });
 });
+/** Positioned content that holds a Menu; it keeps the Appearance radius like every shell. */
+export const MenuContent = PositionedContent;
 /** An anchored non-modal overlay with explicit trigger, surface, and dialog roles. */
 export const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,

package/dist/progress-bar.d.ts

@@ -1,22 +1,20 @@
 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";
+import { type Color } from "./foundation/color.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
 type NativeProgressBarProps = Omit<AriaProgressBarProps, "children" | "className" | "isIndeterminate" | "style">;
-export interface ProgressBarProps extends NativeProgressBarProps {
-    /** Native class name applied without replacing the component contract. */
+export interface ProgressBarProps extends NativeProgressBarProps, MaterialOverrides {
     readonly className?: string;
-    /** Color used for the completed or moving portion. */
-    readonly color?: ControlColor;
-    /** Displays progress without asserting a current value. */
+    /** Color of the completed or moving portion. */
+    readonly color?: Color;
+    /** Shows 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. */
+/** Progress over time: a recessed rail filled in the owner's color. */
 export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/progress-bar.js

@@ -1,46 +1,30 @@
 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 => {
+import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { fieldStyle } from "./control/field.js";
+import { resolveColor } from "./foundation/color.js";
+import MotionStyle from "./foundation/motion-style.js";
+import { SurfaceView } from "./surface/surface.js";
+/** Progress over time: a recessed rail filled in the owner's color. */
+export const ProgressBar = forwardRef(function ProgressBar({ className, color = "primary", indeterminate = false, label, material, size, style, value, minValue = 0, maxValue = 100, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    const thickness = Math.max(4, Math.round(metrics.spacing / 2));
+    const fill = resolveColor(color, metrics.visual.colors);
+    const moving = indeterminate && metrics.visual.duration > 0;
+    return _jsx(AriaProgressBar, { ...properties, ref: ref, className: className, value: value, minValue: minValue, maxValue: maxValue, isIndeterminate: indeterminate, style: fieldStyle(metrics, { 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,
+            const heading = label != null || (!state.isIndeterminate && output != null);
+            return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), heading && _jsxs("span", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: metrics.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(SurfaceView, { as: "span", "aria-hidden": "true", "data-progress-track": "", color: "background", depth: "recessed", material: material, radius: "full", style: { display: "block", height: thickness, overflow: "hidden" }, children: _jsx("span", { "data-progress-fill": "", style: {
+                                ...transition(metrics.visual, "width", 1.5),
                                 position: "absolute",
                                 insetBlock: 0,
-                                insetInlineStart: state.isIndeterminate && !moving ? "30%" : 0,
+                                insetInlineStart: state.isIndeterminate ? "30%" : 0,
                                 display: "block",
                                 width: state.isIndeterminate ? "40%" : `${state.percentage ?? 0}%`,
                                 borderRadius: "inherit",
-                                background: theme.paints.palette.rest.background,
-                                transitionProperty: "width"
+                                background: fill,
+                                animation: moving ? `phreshos-ui-sweep ${Math.max(900, metrics.visual.appearance.transaction.duration * 8)}ms ${metrics.visual.easing} infinite` : undefined
                             } }) })] });
         } });
 });

package/dist/radio.d.ts

@@ -1,21 +1,24 @@
-import type { RadioRootProps as BaseRadioProps } from "@base-ui/react/radio";
-import type { RadioGroupProps as BaseRadioGroupProps } from "@base-ui/react/radio-group";
-import type { ReactNode } from "react";
-import type { ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-export interface RadioGroupProps extends Omit<BaseRadioGroupProps<string | null>, "children" | "className" | "defaultValue" | "disabled" | "onChange" | "onValueChange" | "readOnly" | "required" | "style" | "value">, ControlProps, FieldProps, MaterialOverrides, ShadowOverrides {
+import type { CSSProperties, ReactNode } from "react";
+import type { RadioFieldProps, RadioGroupProps as AriaRadioGroupProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, ControlOverrides | "value" | "defaultValue" | "onChange">, ControlProps, FieldProps, MaterialOverrides {
     readonly children: ReactNode;
     readonly value?: string | null;
     readonly defaultValue?: string | null;
+    /** Receives the newly selected value; a radio selection cannot be cleared. */
     readonly onChange?: (value: string) => void;
     readonly readOnly?: boolean;
-    readonly orientation?: "horizontal" | "vertical";
 }
-export interface RadioGroupItemProps extends Omit<BaseRadioProps<string>, "children" | "className" | "disabled" | "readOnly" | "required" | "style" | "value">, ControlProps, Pick<FieldProps, "label" | "description">, MaterialOverrides, ShadowOverrides {
+export interface RadioGroupItemProps extends Omit<RadioFieldProps, "children" | "className" | "isDisabled" | "style" | "value"> {
     readonly value: string;
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
 }
-/** 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>>;
+/** One exclusive-choice field whose options are its Items. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<HTMLDivElement>>;
 };