@phreshos/react-ui 0.1.25 → 0.1.26

package/dist/input.js

@@ -5,7 +5,7 @@ import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useC
 import { SurfaceField } from "./control-surface.js";
 import FieldStyle, { textControlClass } from "./field-style.js";
 /** A labeled single-line text control. onChange receives the string value. */
-export const Input = forwardRef(function Input({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, material, ...properties }, ref) {
+export const Input = forwardRef(function Input({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, material, shadow, ...properties }, ref) {
     const theme = useControlTheme({ size, color, radius });
-    return _jsxs(TextField, { ...properties, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(SurfaceField, { material: material, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("input", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+    return _jsxs(TextField, { ...properties, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(SurfaceField, { material: material, shadow: shadow, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("input", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
 });

package/dist/main.d.ts

@@ -5,13 +5,14 @@
  * behavior contract has been established by the package's tests.
  */
 export { defaultAppearance } from "@phreshos/core";
-export { AppearanceProvider, useAppearance, useBrowserPreferences, usePreferences, useThemedValue, type AppearanceProviderProps } from "./appearance-provider.js";
+export { UIProvider, useAppearance, useBrowserPreferences, useDirection, useDocumentDirection, usePreferences, useThemedValue, type UIProviderProps } from "./ui-provider.js";
 export type { DesktopPreferences as Preferences } from "@phreshos/core";
+export type { Direction } from "./direction.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Surface, type MaterialOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
+export { Surface, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
 export { defaultColor, type Color, type ColorLevel, type ColorScale } from "./color.js";
-export { Panel, type PanelProps } from "./panel.js";
+export { Panel, PanelRoot, PanelHeader, PanelContent, type PanelProps, type PanelRootProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
 export { Button, type ButtonColor, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";
@@ -21,6 +22,13 @@ export { Switch, type SwitchProps } from "./switch.js";
 export { Select, type SelectProps, type SelectOption } from "./select.js";
 export { Slider, type SliderProps } from "./slider.js";
 export { ScrollArea, type ScrollAreaAxis, type ScrollAreaProps } from "./scroll-area.js";
+export { Popover, PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverTitle, PopoverClose, type PopoverProps, type PopoverRootProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverDialogProps, type PopoverTitleProps, type PopoverCloseProps } from "./popover.js";
+export { Menu, MenuRoot, MenuItem, MenuSection, MenuHeader, MenuSeparator, type MenuProps, type MenuRootProps, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps } from "./menu.js";
+export { DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger, type DropdownMenuProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps } from "./dropdown-menu.js";
+export { ContextMenu, ContextMenuRoot, ContextMenuTrigger, type ContextMenuProps, type ContextMenuRootProps, type ContextMenuTriggerProps } from "./context-menu.js";
+export { Dialog, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, type DialogProps, type DialogRootProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
+export { AlertDialog, AlertDialogRoot, AlertDialogBackdrop, AlertDialogContent, type AlertDialogProps, type AlertDialogRootProps, type AlertDialogBackdropProps, type AlertDialogContentProps } from "./alert-dialog.js";
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, type TooltipProps, type TooltipRootProps, type TooltipTriggerProps, type TooltipContentProps } from "./tooltip.js";
 export type { ControlColor } from "./control.js";
 export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
 export { resolveRadius, type Radius, type RadiusProps } from "./radius.js";

package/dist/main.js

@@ -5,12 +5,12 @@
  * behavior contract has been established by the package's tests.
  */
 export { defaultAppearance } from "@phreshos/core";
-export { AppearanceProvider, useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-provider.js";
+export { UIProvider, useAppearance, useBrowserPreferences, useDirection, useDocumentDirection, usePreferences, useThemedValue } from "./ui-provider.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
 export { Surface } from "./surface.js";
 export { defaultColor } from "./color.js";
-export { Panel } from "./panel.js";
+export { Panel, PanelRoot, PanelHeader, PanelContent } from "./panel.js";
 export { Button } from "./button.js";
 export { Input } from "./input.js";
 export { Textarea } from "./textarea.js";
@@ -20,6 +20,13 @@ export { Switch } from "./switch.js";
 export { Select } from "./select.js";
 export { Slider } from "./slider.js";
 export { ScrollArea } from "./scroll-area.js";
+export { Popover, PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverTitle, PopoverClose } from "./popover.js";
+export { Menu, MenuRoot, MenuItem, MenuSection, MenuHeader, MenuSeparator } from "./menu.js";
+export { DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger } from "./dropdown-menu.js";
+export { ContextMenu, ContextMenuRoot, ContextMenuTrigger } from "./context-menu.js";
+export { Dialog, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose } from "./dialog.js";
+export { AlertDialog, AlertDialogRoot, AlertDialogBackdrop, AlertDialogContent } from "./alert-dialog.js";
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent } from "./tooltip.js";
 export { resolveRadius } from "./radius.js";
 export { resolveSpacing } from "./spacing.js";
 export { useColor } from "./color.js";

package/dist/material-options.d.ts

@@ -10,7 +10,8 @@ export interface MaterialOptions {
 }
 /** Grouped material customization exposed by components built on Surface. */
 export interface MaterialOverrides {
-    readonly material?: MaterialOptions;
+    /** Omission or true uses Appearance defaults; false uses the resolved color as a normal background. */
+    readonly material?: boolean | MaterialOptions;
 }
 /** Resolves material values from the current Appearance without knowing any host geometry. */
 export declare function useMaterialOptions(values?: MaterialOptions): {

package/dist/material-options.js

@@ -1,5 +1,5 @@
 import { appearanceLimits } from "@phreshos/core";
-import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { useAppearance, useThemedValue } from "./ui-provider.js";
 import { isScaleLevel, scale, scaleMultiplier } from "./scale.js";
 /** Resolves material values from the current Appearance without knowing any host geometry. */
 export function useMaterialOptions(values = {}) {

package/dist/menu.d.ts

@@ -0,0 +1,35 @@
+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"> {
+    readonly className?: string;
+    readonly color?: ControlColor;
+    readonly size?: ScaleLevel;
+    readonly style?: CSSProperties;
+}
+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"> {
+    readonly className?: string;
+    readonly color?: ControlColor;
+    readonly disabled?: boolean;
+    readonly style?: CSSProperties;
+}
+export type MenuItemComponent = <T = object>(properties: MenuItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export declare const MenuItem: MenuItemComponent;
+export type MenuSectionProps<T extends object = object> = AriaMenuSectionProps<T>;
+export declare const MenuSection: <T>(props: AriaMenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export type MenuHeaderProps = AriaHeaderProps;
+export declare const MenuHeader: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
+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>;

package/dist/menu.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } 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 { useControlTheme } from "./control.js";
+const MenuThemeContext = createContext(null);
+const MenuRootImplementation = forwardRef(function MenuRoot({ className, color, size = "medium", style, ...properties }, ref) {
+    const theme = useControlTheme({ color, size });
+    return _jsx(MenuThemeContext.Provider, { value: { color, size, theme }, children: _jsx(AriaMenu, { ...properties, ref: ref, className: className, style: {
+                display: "grid",
+                gap: theme.gap,
+                minWidth: 160,
+                padding: theme.gap,
+                boxSizing: "border-box",
+                outline: "none",
+                color: theme.foreground,
+                fontFamily: "inherit",
+                fontSize: theme.fontSize,
+                ...style
+            } }) });
+});
+export const MenuRoot = MenuRootImplementation;
+const MenuItemImplementation = forwardRef(function MenuItem({ className, color, disabled = false, style, ...properties }, ref) {
+    const inherited = useContext(MenuThemeContext);
+    const theme = useControlTheme({ color: color ?? inherited?.color, size: inherited?.size ?? "medium" });
+    return _jsx(AriaMenuItem, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => {
+            const paint = state.isPressed
+                ? theme.paints.palette.pressed
+                : state.isFocused || state.isHovered || state.isSelected
+                    ? theme.paints.palette.hover
+                    : { background: "transparent", color: theme.foreground };
+            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: "none",
+                cursor: disabled ? "not-allowed" : "pointer",
+                opacity: disabled ? 0.46 : 1,
+                userSelect: "none",
+                ...paint,
+                ...style
+            };
+        } });
+});
+export const MenuItem = MenuItemImplementation;
+export const MenuSection = AriaMenuSection;
+export const MenuHeader = forwardRef(function MenuHeader({ style, ...properties }, ref) {
+    const inherited = useContext(MenuThemeContext);
+    const fallback = useControlTheme({});
+    const theme = inherited?.theme ?? fallback;
+    return _jsx(AriaHeader, { ...properties, ref: ref, style: {
+            paddingInline: Math.max(8, theme.spacing),
+            paddingBlock: theme.gap,
+            fontWeight: 600,
+            opacity: 0.7,
+            ...style
+        } });
+});
+export const MenuSeparator = forwardRef(function MenuSeparator({ style, ...properties }, ref) {
+    const inherited = useContext(MenuThemeContext);
+    const fallback = useControlTheme({});
+    const theme = inherited?.theme ?? fallback;
+    return _jsx(AriaSeparator, { ...properties, ref: ref, style: {
+            height: 1,
+            marginBlock: theme.gap,
+            border: 0,
+            background: colorOpacity(theme.foreground, 0.14),
+            ...style
+        } });
+});
+/** A keyboard-navigable collection of commands or selectable options. */
+export const Menu = Object.assign(MenuRoot, {
+    Root: MenuRoot,
+    Item: MenuItem,
+    Section: MenuSection,
+    Header: MenuHeader,
+    Separator: MenuSeparator
+});

package/dist/motion-style.d.ts

@@ -9,6 +9,7 @@ export declare function useControlTransition(): Transition;
 /** Per-overlay variables consumed by the shared entrance keyframes. */
 export declare function useOverlayTransition(): CSSProperties;
 export declare const overlayMotionClass = "phreshos-ui-overlay";
+export declare const backdropMotionClass = "phreshos-ui-backdrop";
 export declare function useTransitionTiming(): CSSProperties;
 /** React hoists and deduplicates this stylesheet, including portals. */
 export default function MotionStyle(): import("react").JSX.Element;

package/dist/motion-style.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { defaultAppearance } from "@phreshos/core";
 import { useAppearance, usePreferences } from "./appearance-context.js";
-const visualProperties = "background-color, color, border-color, border-radius";
+const visualProperties = "background-color, color, border-color, border-radius, box-shadow";
 const paintProperties = "fill, stroke, opacity";
 /** CSS timing for values painted directly by React UI. */
 export function useVisualTransition() {
@@ -31,6 +31,7 @@ export function useOverlayTransition() {
     };
 }
 export const overlayMotionClass = "phreshos-ui-overlay";
+export const backdropMotionClass = "phreshos-ui-backdrop";
 export function useTransitionTiming() {
     const { duration, easing } = useAppearance().transaction;
     const { animations } = usePreferences();
@@ -61,10 +62,6 @@ const stylesheet = `
   --phreshos-ui-motion-easing: ${cssEasing(defaultAppearance.transaction.easing)};
 }
 
-.phreshos-ui-overlay { --phreshos-ui-overlay-x: 0px; --phreshos-ui-overlay-y: -4px; }
-.phreshos-ui-overlay[data-placement="top"] { --phreshos-ui-overlay-y: 4px; }
-.phreshos-ui-overlay[data-placement="left"] { --phreshos-ui-overlay-x: 4px; --phreshos-ui-overlay-y: 0px; }
-.phreshos-ui-overlay[data-placement="right"] { --phreshos-ui-overlay-x: -4px; --phreshos-ui-overlay-y: 0px; }
 .phreshos-ui-overlay[data-entering] {
   animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
 }
@@ -72,9 +69,20 @@ const stylesheet = `
   animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) reverse both;
   pointer-events: none;
 }
+.phreshos-ui-backdrop[data-entering] {
+  animation: phreshos-ui-backdrop-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
+}
+.phreshos-ui-backdrop[data-exiting] {
+  animation: phreshos-ui-backdrop-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) reverse both;
+  pointer-events: none;
+}
 @keyframes phreshos-ui-overlay-enter {
-  from { opacity: 0; translate: var(--phreshos-ui-overlay-x) var(--phreshos-ui-overlay-y); }
-  to { opacity: 1; translate: 0 0; }
+  from { opacity: 0; scale: 1.05; }
+  to { opacity: 1; scale: 1; }
+}
+@keyframes phreshos-ui-backdrop-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 `;
 /** React hoists and deduplicates this stylesheet, including portals. */

package/dist/overlay-placement.d.ts

@@ -0,0 +1,4 @@
+import type { Placement } from "react-aria-components";
+import type { Direction } from "./direction.js";
+/** Resolves logical placement before it reaches the overlay primitive. */
+export declare function resolveDirectionalPlacement(placement: Placement, direction: Direction): Placement;

package/dist/overlay-placement.js

@@ -0,0 +1,6 @@
+/** Resolves logical placement before it reaches the overlay primitive. */
+export function resolveDirectionalPlacement(placement, direction) {
+    const start = direction === "rtl" ? "right" : "left";
+    const end = direction === "rtl" ? "left" : "right";
+    return placement.replace(/\bstart\b/g, start).replace(/\bend\b/g, end);
+}

package/dist/panel.d.ts

@@ -1,9 +1,18 @@
-import { type ReactNode } from "react";
+import type { ComponentProps, HTMLAttributes } from "react";
 import { type SurfaceProps } from "./surface.js";
-/** A Surface with an optional header and an inset content Surface. */
-export interface PanelProps extends SurfaceProps {
-    readonly header?: ReactNode;
-    readonly contentProps?: Omit<SurfaceProps, "children">;
-}
-/** Owns the shared shell layout, not positioning, interaction, or lifecycle. */
-export declare const Panel: import("react").ForwardRefExoticComponent<Omit<PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Optional content placed before the inset Panel surface. */
+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. */
+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. */
+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>>;
+};
+export type PanelProps = ComponentProps<typeof PanelRoot>;

package/dist/panel.js

@@ -1,27 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useAppearance } from "./appearance-provider.js";
+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";
-/** Owns the shared shell layout, not positioning, interaction, or lifecycle. */
-export const Panel = forwardRef(function Panel({ header, children, contentProps, style, ...properties }, ref) {
-    const appearance = useAppearance();
-    const inset = scale(appearance.spacing, "small");
-    const hasHeader = header !== undefined && header !== null && header !== false;
-    return _jsxs(Surface, { ...properties, ref: ref, style: {
-            display: "grid",
-            gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+const PanelContext = createContext({ hasHeader: false });
+export const PanelHeader = forwardRef(function PanelHeader({ style, ...properties }, ref) {
+    return _jsx("div", { ...properties, ref: ref, style: {
+            minWidth: 0,
+            ...style
+        } });
+});
+export const PanelRoot = forwardRef(function PanelRoot({ 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: {
+                display: "grid",
+                gridTemplateRows: hasHeader ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)",
+                minWidth: 0,
+                minHeight: 0,
+                maxHeight: "inherit",
+                ...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",
             minWidth: 0,
             minHeight: 0,
-            maxHeight: "inherit",
+            margin: inset,
+            marginTop: hasHeader ? 0 : inset,
+            overflow: "hidden",
             ...style
-        }, children: [header, _jsx(Surface, { ...contentProps, style: {
-                    position: "relative",
-                    minWidth: 0,
-                    minHeight: 0,
-                    margin: inset,
-                    marginTop: hasHeader ? 0 : inset,
-                    overflow: "hidden",
-                    ...contentProps?.style
-                }, children: children })] });
+        } });
+});
+/** 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

@@ -0,0 +1,30 @@
+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 ButtonProps } from "./button.js";
+import { type SurfaceOwnProps } from "./surface.js";
+export type PopoverRootProps = AriaDialogTriggerProps;
+export declare function PopoverRoot(properties: 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 {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
+export type PopoverDialogProps = AriaDialogProps;
+export declare const PopoverDialog: import("react").ForwardRefExoticComponent<AriaDialogProps & import("react").RefAttributes<HTMLElement>>;
+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>>;
+/** 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>>;
+    Title: import("react").ForwardRefExoticComponent<AriaHeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Close: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type PopoverProps = ComponentProps<typeof PopoverRoot>;

package/dist/popover.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } 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 { useAppearance } from "./ui-provider.js";
+import { Button } from "./button.js";
+import { overlayMotionClass, useOverlayTransition } 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 });
+}
+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 inset = scale(useAppearance().spacing, "small");
+    const transition = useOverlayTransition();
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _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: {
+                boxSizing: "border-box",
+                maxWidth: `calc(100vw - ${inset * 2}px)`,
+                maxHeight: `calc(100vh - ${inset * 2}px)`,
+                outline: "none",
+                ...style
+            }, children: children }) });
+});
+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 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,
+    Title: PopoverTitle,
+    Close: PopoverClose
+});

package/dist/radio.d.ts

@@ -1,14 +1,21 @@
+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 { RadioGroupProps as AriaRadioGroupProps, RadioFieldProps } from "react-aria-components";
-import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { ControlProps, FieldProps } from "./control.js";
 import type { MaterialOverrides } from "./material-options.js";
-export interface RadioGroupProps extends Omit<AriaRadioGroupProps, ControlOverrides | "isReadOnly">, ControlProps, FieldProps, MaterialOverrides {
+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 {
     readonly children: ReactNode;
+    readonly value?: string | null;
+    readonly defaultValue?: string | null;
+    readonly onChange?: (value: string) => void;
     readonly readOnly?: boolean;
+    readonly orientation?: "horizontal" | "vertical";
 }
-export interface RadioProps extends Omit<RadioFieldProps, ControlOverrides>, ControlProps, Pick<FieldProps, "label" | "description">, MaterialOverrides {
+export interface RadioProps 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 native arrow-key navigation. */
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** 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<RadioProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/radio.js

@@ -1,17 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
-import { RadioGroup as AriaRadioGroup, RadioField, RadioButton, Text } from "react-aria-components";
-import { FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
+import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { fieldStyle, useControlTheme } from "./control.js";
 import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
-const RadioStyle = createContext({});
-/** One string value selected from its Radio children, with native arrow-key navigation. */
-export const RadioGroup = forwardRef(function RadioGroup({ label, description, errorMessage, children, disabled, readOnly, required, invalid, size, color, style, material, orientation = "vertical", ...properties }, ref) {
+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) {
     const theme = useControlTheme({ size, color });
-    return _jsxs(AriaRadioGroup, { ...properties, ref: ref, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, orientation: orientation, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldLabel, { label: label }), _jsx(RadioStyle.Provider, { value: { size, color, disabled, material }, children: _jsx("div", { style: { display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", gap: theme.gap, flexWrap: "wrap" }, children: children }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+    const direction = resolveDirection(properties.dir, useDirection());
+    const labelId = useId();
+    const descriptionId = useId();
+    const errorId = useId();
+    const describedBy = [ariaDescribedBy, description != null ? descriptionId : null, invalid && errorMessage != null ? errorId : null].filter(Boolean).join(" ") || undefined;
+    const root = _jsxs(BaseRadioGroup, { ...properties, ref: ref, className: className, value: value, defaultValue: defaultValue, onValueChange: next => {
+            if (next != null)
+                onChange?.(next);
+        }, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-labelledby": ariaLabelledBy ?? (label != null ? labelId : undefined), "aria-describedby": describedBy, style: fieldStyle(theme, disabled, style), children: [label != null && _jsx("div", { id: labelId, style: { fontWeight: 550 }, children: label }), _jsx(RadioStyleContext.Provider, { value: { size, color, disabled, invalid, readOnly, material, shadow }, children: _jsx("div", { style: { display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", gap: theme.gap, flexWrap: "wrap" }, children: children }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: 0.7 }, children: description }), invalid && errorMessage != null && _jsx("span", { id: errorId, style: { fontSize: "0.92em", color: theme.danger }, children: errorMessage })] });
+    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, disabled, size, color, style, material, ...properties }, ref) {
-    const inherited = useContext(RadioStyle);
+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 inherited = useContext(RadioStyleContext);
+    if (inherited == null)
+        throw new Error("Radio must be used inside RadioGroup");
     const theme = useControlTheme({ size: size ?? inherited.size, color: color ?? inherited.color });
-    return _jsxs(RadioField, { ...properties, ref: ref, isDisabled: disabled, style: state => fieldStyle(theme, state.isDisabled && !inherited.disabled, style), children: [_jsx(RadioButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "radio", material: material ?? inherited.material, theme: theme, selected: state.isSelected, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });
+    const descriptionId = useId();
+    const [hovered, setHovered] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const describedBy = [ariaDescribedBy, description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined;
+    return _jsxs("div", { ref: ref, className: className, style: fieldStyle(theme, disabled && !inherited.disabled, style), children: [_jsx(BaseRadio.Root, { ...properties, value: value, disabled: disabled, "aria-describedby": describedBy, onPointerEnter: () => setHovered(true), onPointerLeave: () => { setHovered(false); setPressed(false); }, onPointerDown: () => setPressed(true), onPointerUp: () => setPressed(false), onFocus: event => {
+                    setFocusVisible(event.currentTarget.matches(":focus-visible"));
+                    onFocus?.(event);
+                }, onBlur: event => {
+                    setFocusVisible(false);
+                    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: 0.7 }, children: description })] });
 });

package/dist/radius.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties } from "react";
 import type { Appearance } from "@phreshos/core";
 import { type ScaleLevel } from "./scale.js";
-/** An Appearance-derived level, pixel value, or explicit CSS corner radius. */
-export type Radius = ScaleLevel | number | (string & {});
+/** An Appearance-derived level, fully rounded shape, pixel value, or explicit CSS corner radius. */
+export type Radius = ScaleLevel | "full" | number | (string & {});
 /** Shared semantic corner-radius capability for React UI components. */
 export interface RadiusProps {
     readonly radius?: Radius;

package/dist/radius.js

@@ -1,9 +1,11 @@
 import { isScaleLevel, scale } from "./scale.js";
 /** Resolves a Radius while preserving explicit CSS and pixel values. */
 export function resolveRadius(value, appearance) {
+    if (value === "full")
+        return "9999px";
     if (!isScaleLevel(value))
         return value;
     if (!appearance)
-        throw new Error("A semantic radius requires an AppearanceProvider");
+        throw new Error("A semantic radius requires a UIProvider");
     return scale(appearance.radius, value);
 }