@phreshos/react-ui 0.1.27 → 0.1.29

package/dist/motion-style.d.ts

@@ -1,15 +1,13 @@
 import type { CSSProperties } from "react";
 import type { Transition } from "motion/react";
-/** CSS timing for values painted directly by React UI. */
-export declare function useVisualTransition(): CSSProperties;
-/** CSS timing for SVG paint owned by a Material. */
-export declare function usePaintTransition(): CSSProperties;
-/** Motion timing for interactive geometry owned by React UI. */
-export declare function useControlTransition(): Transition;
+import type { AppearanceTransaction } from "./appearance.js";
+export declare function controlTransition(transaction: AppearanceTransaction, animations: boolean): Transition;
 /** Per-overlay variables consumed by the shared entrance keyframes. */
-export declare function useOverlayTransition(): CSSProperties;
+export declare function overlayTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
 export declare const overlayMotionClass = "phreshos-ui-overlay";
 export declare const backdropMotionClass = "phreshos-ui-backdrop";
-export declare function useTransitionTiming(): CSSProperties;
+export declare function transitionTiming(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
+export declare function visualTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
+export declare function paintTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
 /** React hoists and deduplicates this stylesheet, including portals. */
 export default function MotionStyle(): import("react").JSX.Element;

package/dist/motion-style.js

@@ -1,45 +1,34 @@
 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, box-shadow";
 const paintProperties = "fill, stroke, opacity";
-/** CSS timing for values painted directly by React UI. */
-export function useVisualTransition() {
-    return { ...useTransitionTiming(), transitionProperty: visualProperties };
-}
-/** CSS timing for SVG paint owned by a Material. */
-export function usePaintTransition() {
-    return { ...useTransitionTiming(), transitionProperty: paintProperties };
-}
-/** Motion timing for interactive geometry owned by React UI. */
-export function useControlTransition() {
-    const { duration, easing } = useAppearance().transaction;
-    const { animations } = usePreferences();
+export function controlTransition(transaction, animations) {
     return {
         type: "tween",
-        duration: animations ? duration / 1_000 : 0,
-        ease: motionEasing(easing)
+        duration: animations ? transaction.duration / 1_000 : 0,
+        ease: motionEasing(transaction.easing)
     };
 }
 /** Per-overlay variables consumed by the shared entrance keyframes. */
-export function useOverlayTransition() {
-    const { duration, easing } = useAppearance().transaction;
-    const { animations } = usePreferences();
+export function overlayTransition(transaction, animations) {
     return {
-        "--phreshos-ui-motion-duration": `${animations ? duration : 0}ms`,
-        "--phreshos-ui-motion-easing": cssEasing(easing)
+        "--phreshos-ui-motion-duration": `${animations ? transaction.duration : 0}ms`,
+        "--phreshos-ui-motion-easing": cssEasing(transaction.easing)
     };
 }
 export const overlayMotionClass = "phreshos-ui-overlay";
 export const backdropMotionClass = "phreshos-ui-backdrop";
-export function useTransitionTiming() {
-    const { duration, easing } = useAppearance().transaction;
-    const { animations } = usePreferences();
+export function transitionTiming(transaction, animations) {
     return {
-        transitionDuration: `${animations ? duration : 0}ms`,
-        transitionTimingFunction: cssEasing(easing)
+        transitionDuration: `${animations ? transaction.duration : 0}ms`,
+        transitionTimingFunction: cssEasing(transaction.easing)
     };
 }
+export function visualTransition(transaction, animations) {
+    return { ...transitionTiming(transaction, animations), transitionProperty: visualProperties };
+}
+export function paintTransition(transaction, animations) {
+    return { ...transitionTiming(transaction, animations), transitionProperty: paintProperties };
+}
 function cssEasing(easing) {
     return typeof easing === "string" ? easing : `cubic-bezier(${easing.join(", ")})`;
 }
@@ -57,11 +46,6 @@ function motionEasing(easing) {
     return easing;
 }
 const stylesheet = `
-:root {
-  --phreshos-ui-motion-duration: ${defaultAppearance.transaction.duration}ms;
-  --phreshos-ui-motion-easing: ${cssEasing(defaultAppearance.transaction.easing)};
-}
-
 .phreshos-ui-overlay[data-entering] {
   animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
 }

package/dist/popover.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 { useAppearance } from "./ui-provider.js";
+import { useResolvedAppearance } from "./appearance-context.js";
 import { Button } from "./button.js";
-import { overlayMotionClass, useOverlayTransition } from "./motion-style.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";
@@ -15,16 +15,17 @@ 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 resolved = useResolvedAppearance();
+    const inset = scale(resolved.appearance.spacing, "small");
+    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
     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 }) });
+    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: {
+                        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 } });

package/dist/preferences.d.ts

@@ -0,0 +1,4 @@
+import type { DesktopPreferences } from "@phreshos/core";
+/** Complete environment preferences consumed by React UI. */
+export type Preferences = Pick<DesktopPreferences, "theme" | "animations">;
+export type Theme = Preferences["theme"];

package/dist/radio.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Base UI accepts direction directly; React Aria derives these keys from locale.
 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 { controlFontWeight, controlOpacity, fieldStyle, useControlTheme } from "./control.js";
 import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
 import { resolveDirection, useDirection } from "./direction.js";
 const RadioStyleContext = createContext(null);
@@ -18,7 +19,7 @@ export const RadioGroup = forwardRef(function RadioGroup({ label, description, e
     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 })] });
+        }, 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: controlFontWeight }, 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: controlOpacity.secondary }, 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. */
@@ -38,5 +39,5 @@ export const Radio = forwardRef(function Radio({ label, description, value, disa
                 }, 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 })] });
+                }, 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 })] });
 });

package/dist/radius.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import type { Appearance } from "@phreshos/core";
+import type { Appearance } from "./appearance.js";
 import { type ScaleLevel } from "./scale.js";
 /** An Appearance-derived level, fully rounded shape, pixel value, or explicit CSS corner radius. */
 export type Radius = ScaleLevel | "full" | number | (string & {});

package/dist/scroll-area.js

@@ -2,43 +2,50 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { useAppearance, useThemedValue } from "./ui-provider.js";
+import { useResolvedAppearance } from "./appearance-context.js";
 import { colorOpacity } from "./color.js";
-import { useTransitionTiming } from "./motion-style.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) {
-    const appearance = useAppearance();
+    const resolved = useResolvedAppearance();
+    const { appearance } = resolved;
     const direction = resolveDirection(properties.dir, useDirection());
-    const foreground = useThemedValue(appearance.colors).foreground;
+    const foreground = resolved.colors.foreground;
     const radius = Math.min(appearance.radius, 8);
+    const thickness = Math.max(8, appearance.spacing);
+    const inset = Math.max(2, thickness / 3);
     const vertical = axis === "vertical" || axis === "both";
     const horizontal = axis === "horizontal" || axis === "both";
+    const transition = transitionTiming(resolved.transaction, resolved.preferences.animations);
     const root = _jsxs(BaseScrollArea.Root, { ...properties, "data-phreshos-scroll-area": "", ref: ref, style: {
             ...style,
+            display: "flex",
+            flexDirection: "column",
             position: style?.position ?? "relative",
             minWidth: style?.minWidth ?? 0,
             minHeight: style?.minHeight ?? 0,
             overflow: "hidden"
         }, children: [_jsx(BaseScrollArea.Viewport, { "data-phreshos-scroll-area-viewport": "", ref: viewportRef, onScroll: onScroll, style: {
+                    flex: "1 1 auto",
+                    minHeight: 0,
                     width: "100%",
                     height: "100%",
                     overflowX: horizontal ? "scroll" : "hidden",
                     overflowY: vertical ? "scroll" : "hidden"
-                }, children: _jsx(BaseScrollArea.Content, { "data-phreshos-scroll-area-content": "", style: vertical && !horizontal ? { minWidth: "100%", width: "100%" } : undefined, children: children }) }), vertical && _jsx(Scrollbar, { orientation: "vertical", foreground: foreground, radius: radius }), horizontal && _jsx(Scrollbar, { orientation: "horizontal", foreground: foreground, radius: radius }), vertical && horizontal && _jsx(BaseScrollArea.Corner, { style: { background: "transparent" } })] });
+                }, children: _jsx(BaseScrollArea.Content, { "data-phreshos-scroll-area-content": "", style: vertical && !horizontal ? { minWidth: "100%", width: "100%" } : undefined, children: children }) }), vertical && _jsx(Scrollbar, { orientation: "vertical", foreground: foreground, radius: radius, thickness: thickness, inset: inset, transition: transition }), horizontal && _jsx(Scrollbar, { orientation: "horizontal", foreground: foreground, radius: radius, thickness: thickness, inset: inset, transition: transition }), vertical && horizontal && _jsx(BaseScrollArea.Corner, { style: { background: "transparent" } })] });
     return _jsx(BaseDirectionProvider, { direction: direction, children: root });
 });
-function Scrollbar({ orientation, foreground, radius }) {
+function Scrollbar({ orientation, foreground, radius, thickness, inset, transition }) {
     const [hovered, setHovered] = useState(false);
-    const transition = useTransitionTiming();
     const vertical = orientation === "vertical";
     return _jsx(BaseScrollArea.Scrollbar, { "data-phreshos-scroll-area-scrollbar": "", orientation: orientation, keepMounted: true, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: state => {
             const present = vertical ? state.hasOverflowY : state.hasOverflowX;
             return {
                 boxSizing: "border-box",
-                width: vertical ? 16 : undefined,
-                height: vertical ? undefined : 16,
-                padding: 5,
+                width: vertical ? thickness : undefined,
+                height: vertical ? undefined : thickness,
+                padding: inset,
                 opacity: present && (state.hovering || state.scrolling) ? 1 : 0,
                 pointerEvents: present && (state.hovering || state.scrolling) ? "auto" : "none",
                 transitionDuration: transition.transitionDuration,

package/dist/select.js

@@ -1,48 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { motion } from "motion/react";
-import { Select as AriaSelect, Button, SelectValue, Popover, ListBox, ListBoxItem } from "react-aria-components";
-import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { forwardRef, useMemo } from "react";
+import { Select as AriaSelect, Button, SelectValue, ListBox, ListBoxItem } from "react-aria-components";
+import { controlOpacity, controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
 import { SurfaceButton } from "./control-surface.js";
-import { Surface } from "./surface.js";
 import { ScrollArea } from "./scroll-area.js";
-import { overlayMotionClass, useControlTransition, useOverlayTransition } from "./motion-style.js";
+import { PopoverContent } from "./popover.js";
 import { resolveDirection, useDirection } from "./direction.js";
-import { resolveDirectionalPlacement } from "./overlay-placement.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 });
-    const transition = useControlTransition();
-    const overlayTransition = useOverlayTransition();
     const direction = resolveDirection(properties.dir, useDirection());
-    const optionDependencies = [
-        theme.transition.transitionDuration,
-        theme.transition.transitionTimingFunction,
-        theme.transition.transitionProperty,
-        theme.gap,
-        theme.height,
-        theme.spacing,
-        theme.radius,
-        theme.focusColor,
-        theme.foreground,
-        theme.paints.palette.rest.background,
-        theme.paints.palette.rest.color,
-        theme.paints.palette.hover.background,
-        theme.paints.palette.hover.color
-    ];
-    return _jsx(AriaSelect, { ...properties, ref: ref, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), disabledKeys: options.filter(option => option.disabled).map(option => option.value), isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(Button, { render: (native, button) => _jsx(SurfaceButton, { native: native, material: material, shadow: shadow, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
+    const disabledKeys = useMemo(() => options.filter(option => option.disabled).map(option => option.value), [options]);
+    return _jsx(AriaSelect, { ...properties, ref: ref, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), disabledKeys: disabledKeys, isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(Button, { render: (native, button) => _jsx(SurfaceButton, { native: native, material: material, shadow: shadow, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
                         ...controlStyle(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered, button.isFocusVisible),
                         display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
                         cursor: disabled ? "not-allowed" : "pointer", textAlign: "start"
-                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? 0.6 : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx(motion.svg, { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", initial: false, animate: { rotate: state.isOpen ? 180 : 0 }, transition: transition, style: { flexShrink: 0 }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(Popover, { dir: direction, className: overlayMotionClass, placement: resolveDirectionalPlacement("bottom start", direction), offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { dir: direction, style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { items: options, dependencies: optionDependencies, shouldFocusOnHover: false, style: { display: "grid", gap: theme.gap, outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: 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.isFocused && !item.isSelected ? `1px solid ${theme.focusColor}` : "none", outlineOffset: 1,
-                                        cursor: item.isDisabled ? "not-allowed" : "pointer",
-                                        opacity: item.isDisabled ? 0.46 : 1,
-                                        ...(item.isSelected ? item.isFocused ? theme.paints.palette.hover : theme.paints.palette.rest
-                                            : { background: "transparent", color: theme.foreground })
-                                    }), children: item => _jsxs(_Fragment, { children: [option.label, _jsx("span", { "aria-hidden": "true", children: item.isSelected ? "✓" : null })] }) }) }) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
+                    }), 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,
+                        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 })] }) });
 });

package/dist/shadow-options.d.ts

@@ -12,14 +12,20 @@ export interface ShadowOverrides {
     /** Omission or true uses Appearance defaults; false removes the shadow. */
     readonly shadow?: boolean | ShadowOptions;
 }
-/** Resolves shadow values from the active Appearance branch. */
-export declare function useShadowOptions(values?: ShadowOptions): {
+/** Resolves overrides against an already selected shadow branch. */
+export declare function resolveShadowOptions(values: ShadowOptions, defaults: Readonly<{
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    opacity: number;
+}>): {
     x: number;
     y: number;
     blur: number;
     spread: number;
     opacity: number;
 };
-export type ResolvedShadow = ReturnType<typeof useShadowOptions>;
+export type ResolvedShadow = ReturnType<typeof resolveShadowOptions>;
 /** Serializes one resolved neutral-black outer shadow. */
 export declare function shadowStyle({ x, y, blur, spread, opacity }: ResolvedShadow): string;

package/dist/shadow-options.js

@@ -1,10 +1,7 @@
-import { appearanceLimits } from "@phreshos/core";
-import { useAppearance, useThemedValue } from "./ui-provider.js";
+import { appearanceLimits } from "./appearance.js";
 import { isScaleLevel, scale } from "./scale.js";
-/** Resolves shadow values from the active Appearance branch. */
-export function useShadowOptions(values = {}) {
-    const appearance = useAppearance();
-    const defaults = useThemedValue(appearance.shadow);
+/** Resolves overrides against an already selected shadow branch. */
+export function resolveShadowOptions(values, defaults) {
     const limits = appearanceLimits.shadow;
     return {
         x: resolve(values.x, defaults.x, limits.x),

package/dist/slider.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Base UI accepts direction directly; React Aria derives these keys from locale.
 import { Slider as BaseSlider } from "@base-ui/react/slider";
 import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useEffect, useId, useRef, useState } from "react";
-import { fieldStyle, useControlTheme } from "./control.js";
+import { controlFontWeight, controlOpacity, fieldStyle, useControlTheme } from "./control.js";
 import { resolveDirection, useDirection } from "./direction.js";
 /** One numeric value with pointer, touch, keyboard, and form support. */
 export const Slider = forwardRef(function Slider({ label, description, name, form, disabled, size, color, style, orientation = "horizontal", value, defaultValue, minValue = 0, maxValue = 100, step = 1, formatOptions, onChange, onChangeEnd, ...properties }, ref) {
@@ -14,7 +15,7 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
     const [uncontrolledValue, setUncontrolledValue] = useState(initialValue.current);
     const [hovered, setHovered] = useState(false);
     const vertical = orientation === "vertical";
-    const diameter = theme.fontSize + 6;
+    const diameter = theme.indicatorSize;
     const rail = Math.max(4, Math.round(diameter / 3));
     const describedBy = [properties["aria-describedby"], description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined;
     const controlled = value !== undefined;
@@ -31,7 +32,7 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
             if (!controlled)
                 setUncontrolledValue(next);
             onChange?.(next);
-        }, onValueCommitted: next => onChangeEnd?.(next), style: fieldStyle(theme, disabled, style), children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [label != null && _jsx(BaseSlider.Label, { style: { fontWeight: 550 }, children: label }), _jsx(BaseSlider.Value, { style: { fontVariantNumeric: "tabular-nums", opacity: 0.7 } })] }), _jsx(BaseSlider.Control, { style: {
+        }, onValueCommitted: next => onChangeEnd?.(next), style: fieldStyle(theme, disabled, style), children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [label != null && _jsx(BaseSlider.Label, { style: { fontWeight: controlFontWeight }, children: label }), _jsx(BaseSlider.Value, { style: { fontVariantNumeric: "tabular-nums", opacity: controlOpacity.secondary } })] }), _jsx(BaseSlider.Control, { style: {
                     position: "relative",
                     display: "flex",
                     alignItems: "center",
@@ -39,7 +40,7 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
                     touchAction: "none",
                     userSelect: "none",
                     width: vertical ? theme.height : "100%",
-                    height: vertical ? 160 : theme.height
+                    height: vertical ? theme.height * 4 : theme.height
                 }, children: _jsxs(BaseSlider.Track, { style: {
                         position: "relative",
                         width: vertical ? rail : "100%",
@@ -59,12 +60,12 @@ export const Slider = forwardRef(function Slider({ label, description, name, for
                                     borderRadius: "50%",
                                     boxSizing: "border-box",
                                     background: paint.color,
-                                    border: `3px solid ${paint.background}`,
+                                    border: `${Math.max(1, diameter / 6)}px solid ${paint.background}`,
                                     outline: state.focused ? `1px solid ${theme.focusColor}` : "none",
                                     outlineOffset: 1,
                                     cursor: state.disabled ? "not-allowed" : state.dragging ? "grabbing" : "grab",
                                     transform: `scale(${state.dragging ? 0.92 : hovered ? 1.08 : 1})`
                                 };
-                            } })] }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });
+                            } })] }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: controlOpacity.secondary }, children: description })] });
     return _jsx(BaseDirectionProvider, { direction: direction, children: root });
 });

package/dist/spacing.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import type { Appearance } from "@phreshos/core";
+import type { Appearance } from "./appearance.js";
 import { type ScaleLevel } from "./scale.js";
 /** An Appearance-derived level, pixel value, or explicit CSS spacing value. */
 export type Spacing = ScaleLevel | number | (string & {});

package/dist/surface-edge.d.ts

@@ -1,9 +1,11 @@
+import { type CSSProperties } from "react";
 type EdgeMaterial = Readonly<{
     color: string;
     opacity: number;
 }>;
 /** Paints the boundary owned by one Surface from the material it contains. */
-export declare function SurfaceEdge({ material }: Readonly<{
+export declare function SurfaceEdge({ material, transition }: Readonly<{
     material: EdgeMaterial;
+    transition: CSSProperties;
 }>): import("react").JSX.Element | null;
 export {};

package/dist/surface-edge.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { useTransitionTiming } from "./motion-style.js";
 import { scale } from "./scale.js";
 const edgeLayer = {
     position: "absolute",
@@ -17,15 +16,14 @@ const illuminatedEdgeBoundary = Math.round((outerEdgeThickness + illuminatedEdge
 const horizontalIllumination = "linear-gradient(90deg, var(--phreshos-surface-edge-light-minimum) 0%, var(--phreshos-surface-edge-light-minimum) 12%, var(--phreshos-surface-edge-light-soft) 34%, var(--phreshos-surface-edge-light-peak) 50%, var(--phreshos-surface-edge-light-soft) 66%, var(--phreshos-surface-edge-light-minimum) 88%, var(--phreshos-surface-edge-light-minimum) 100%)";
 const edgeMask = "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)";
 /** Paints the boundary owned by one Surface from the material it contains. */
-export function SurfaceEdge({ material }) {
-    const timing = useTransitionTiming();
+export function SurfaceEdge({ material, transition }) {
     const visible = material.opacity > 0;
     if (!visible)
         return null;
     const opacity = Math.min(1, scale(material.opacity, "xlarge"));
     const peak = illumination(material.color, 92);
     return _jsxs(Fragment, { children: [_jsx("span", { "data-surface-edge-light": "", "aria-hidden": "true", style: {
-                    ...timing,
+                    ...transition,
                     ...edgeLayer,
                     transitionProperty: "opacity",
                     padding: illuminatedEdgeBoundary,
@@ -39,7 +37,7 @@ export function SurfaceEdge({ material }) {
                     "--phreshos-surface-edge-light-soft": illumination(material.color, 56),
                     "--phreshos-surface-edge-light-minimum": illumination(material.color, 24)
                 } }), _jsx("span", { "data-surface-edge": "", "aria-hidden": "true", style: {
-                    ...timing,
+                    ...transition,
                     ...edgeLayer,
                     transitionProperty: "border-color, opacity",
                     borderStyle: "solid",

package/dist/surface.js

@@ -1,21 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, forwardRef, useId } from "react";
-import { useAppearance, useThemedValue } from "./ui-provider.js";
-import { useResolveColor } from "./color.js";
-import { useMaterialOptions } from "./material-options.js";
+import { useResolvedAppearance } from "./appearance-context.js";
+import { contrastingColor, defaultColor, resolveColor } from "./color.js";
+import { resolveMaterialOptions } from "./material-options.js";
 import { MaterialPaint } from "./material-paint.js";
-import MotionStyle, { useVisualTransition } from "./motion-style.js";
+import { paintTransition, transitionTiming, visualTransition } from "./motion-style.js";
 import { resolveRadius } from "./radius.js";
-import { shadowStyle, useShadowOptions } from "./shadow-options.js";
+import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
 import { SurfaceEdge } from "./surface-edge.js";
 /** One material- and shadow-owning element. The host is a div unless `as` selects another element. */
 const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, material: options, shadow: shadowOptions, radius, children, style, ...properties }, ref) {
-    const appearance = useAppearance();
-    const transition = useVisualTransition();
-    const material = useResolvedSurface(color, options);
-    const resolvedShadow = useShadowOptions(typeof shadowOptions === "object" ? shadowOptions : undefined);
+    const resolved = useResolvedAppearance();
+    const transition = visualTransition(resolved.transaction, resolved.preferences.animations);
+    const material = resolveSurface(color, options, resolved);
+    const resolvedShadow = resolveShadowOptions(typeof shadowOptions === "object" ? shadowOptions : {}, resolved.shadow);
     const shadow = shadowOptions === false ? "none" : shadowStyle(resolvedShadow);
-    const resolvedRadius = resolveRadius(radius ?? "medium", appearance);
+    const resolvedRadius = resolveRadius(radius ?? "medium", resolved.appearance);
+    const timing = transitionTiming(resolved.transaction, resolved.preferences.animations);
+    const paintTiming = paintTransition(resolved.transaction, resolved.preferences.animations);
     return createElement(Element, {
         ...properties,
         ref,
@@ -29,17 +31,17 @@ const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, ma
             position: style?.position ?? "relative",
             isolation: "isolate"
         }
-    }, material.enabled && _jsx(SurfaceLayers, { material: material }), material.enabled && _jsx(SurfaceEdge, { material: material }), children);
+    }, material.enabled && _jsx(SurfaceLayers, { material: material, paintTransition: paintTiming }), material.enabled && _jsx(SurfaceEdge, { material: material, transition: timing }), children);
 });
 export const Surface = SurfaceRoot;
-function useResolvedSurface(color, options) {
-    const appearance = useAppearance();
-    const material = useMaterialOptions(typeof options === "object" ? options : undefined);
+function resolveSurface(color, options, resolved) {
+    const material = resolveMaterialOptions(typeof options === "object" ? options : {}, resolved.material);
+    const fill = resolveColor(color, resolved.colors);
     return {
         ...material,
         enabled: options !== false,
-        color: useResolveColor(color),
-        foreground: useThemedValue(appearance.colors).foreground
+        color: fill,
+        foreground: contrastingColor(color ?? defaultColor, resolved.colors)
     };
 }
 const layerStyle = {
@@ -48,14 +50,17 @@ const layerStyle = {
     borderRadius: "inherit",
     pointerEvents: "none"
 };
-function SurfaceLayers({ material }) {
-    const { backdrop, saturation, distortion } = material;
+function SurfaceLayers({ material, paintTransition }) {
+    const filtersVisible = material.opacity < 1;
+    const backdrop = filtersVisible ? material.backdrop : 0;
+    const saturation = filtersVisible ? material.saturation : 1;
+    const distortion = filtersVisible ? material.distortion : 0;
     const frost = [
         backdrop === 0 ? "" : `blur(${backdrop}px)`,
         saturation === 1 ? "" : `saturate(${saturation})`
     ].filter(Boolean).join(" ");
     const identity = `phresh-material-${useId().replaceAll(":", "")}`;
-    return _jsxs("span", { "data-material": "", "aria-hidden": "true", style: layerStyle, children: [_jsx(MotionStyle, {}), 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 })] });
+    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 })] });
 }
 /** Keep refraction and native frost in independent compositor passes. */
 function BackdropLayer({ filter, name, zIndex }) {

package/dist/toggle-indicator.js

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
-import { useControlTransition } from "./motion-style.js";
-import { usePreferences } from "./ui-provider.js";
 import { Surface } from "./surface.js";
 /** Shared paint only. Selection, focus, validation, and native input behavior belong to React Aria. */
 export function ToggleIndicator({ kind, direction = "ltr", selected, indeterminate = false, focused, invalid = false, hovered = false, pressed = false, theme, material: options, shadow }) {
-    const { animations } = usePreferences();
-    const transition = useControlTransition();
-    const diameter = theme.fontSize + 6;
+    const { animations, motionTransition: transition } = theme;
+    const diameter = theme.indicatorSize;
     const active = selected || indeterminate;
     const paints = invalid ? theme.paints.danger : active ? theme.paints.palette : theme.paints.neutral;
     const paint = pressed ? paints.pressed : hovered ? paints.hover : paints.rest;