@phreshos/react-ui 0.1.21 → 0.1.23

package/README.md

@@ -38,27 +38,30 @@ import { Button, Surface } from "@phreshos/react-ui"
 ```
 
 Without a provider, components use Core's `defaultAppearance` and reactively
-follow the browser color scheme. `AppearanceProvider` independently overrides
-either value for a subtree; omitted values inherit from the nearest provider.
+follow the browser's complete visual preferences. `AppearanceProvider` can replace
+Appearance or Preferences for a subtree; omitted values inherit from the nearest provider.
 React UI also exports that same canonical `defaultAppearance` value for callers
 that need it explicitly.
 See [Appearance](https://docs.phreshos.com/system/appearance) for the contract
 interpreted by the provider and components.
 
 ```tsx
-import { AppearanceProvider, Button } from "@phreshos/react-ui"
+import { AppearanceProvider, Button, useBrowserPreferences } from "@phreshos/react-ui"
 
-<AppearanceProvider theme="dark">
-  <Button>Dark subtree</Button>
-</AppearanceProvider>
+function Example() {
+  const browser = useBrowserPreferences()
+
+  return <AppearanceProvider preferences={{ ...browser, theme: "dark" }}>
+    <Button>Dark subtree</Button>
+  </AppearanceProvider>
+}
 ```
 
 `Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, and `Radio`
 use the shared Surface implementation while retaining their native behavior. Color and material
 are independent inputs. `color` accepts an Appearance color and resting level such
-as `background:base` or `primary:soft`, or a direct CSS color. Surface and neutral
-surface hosts default to `background:base`; a component may select a semantic
-default required by its own behavior, such as `primary:base` for selection.
+as `background:base` or `primary:soft`, or a direct CSS color. Surface defaults
+to `background:base`; solid controls default to `default:base`.
 Hover and press derive shades of that fill. The resting fill chooses the
 higher-contrast text from Appearance's background and foreground once; interaction
 shades keep that choice.
@@ -128,8 +131,7 @@ Native properties and the forwarded ref target the outer Surface.
 
 Every input uses Appearance colors and the same five `size` levels as Button.
 `color` selects the fill independently from material. Input, Textarea, Select,
-and Button use `background:base` when it is omitted; selection indicators use
-`primary:base`. Invalid
+and Button use `default:base` when it is omitted. Invalid
 fields use danger instead. Text fields share Surface's glass edge. Interaction shades
 derive from the base color's lightness, and text or selection marks use whichever
 Appearance background or foreground has higher contrast against the base fill.
@@ -142,14 +144,14 @@ Fields distinguish hover, pointer focus, keyboard focus, and invalid state.
 Shared CSS transitions use `appearance.transaction` for colors and corner
 radius. The material fill and opacity values transition on the painted layers, not on the
 Surface host. Select menus combine a small placement-aware slide with an overlay
-opacity fade for entry and exit, using React Aria's animation lifecycle. Reduced-motion preferences make
+opacity fade for entry and exit, using React Aria's animation lifecycle. Preferences with animations disabled make
 these changes immediate without changing the Appearance value.
 Blur, distortion, geometry, and Surface host opacity are not transitioned; gradients
 and structurally removed effects change directly rather than adding extra
 layers or keeping disabled effects alive.
 
 Motion animates toggle presses, selection marks, switch travel, the Select
-chevron, and Slider thumb feedback. Reduced-motion preferences remove spatial
+chevron, and Slider thumb feedback. Preferences with animations disabled remove spatial
 feedback and make state transitions immediate. Slider values and native input
 behavior are never delayed by visual animation.
 
@@ -203,7 +205,7 @@ import { Input, Textarea, Checkbox, Radio, RadioGroup, Switch, Select, Slider }
 
 React Aria owns focus, keyboard, form, and selection behavior. Select's popup
 uses Surface defaults. Toggle indicators use Motion internally and respect
-reduced-motion preferences. The preview Program demonstrates each input's
+animation preferences. The preview Program demonstrates each input's
 sizes, colors, state, and interaction without overriding its visual defaults.
 
 ## Development

package/dist/appearance-context.d.ts

@@ -1,4 +1,4 @@
-import { type Appearance, type Theme, type ThemedValue } from "@phreshos/core";
+import { type Appearance, type DesktopPreferences as Preferences, type ThemedValue } from "@phreshos/core";
 export declare const AppearanceContext: import("react").Context<Readonly<{
     colors: ThemedValue<import("@phreshos/core").AppearanceColors>;
     spacing: number;
@@ -9,10 +9,15 @@ export declare const AppearanceContext: import("react").Context<Readonly<{
     signInWallpaper: ThemedValue<string | null>;
     desktopWallpaper: ThemedValue<string | null>;
 }>>;
-export declare const ThemeContext: import("react").Context<Theme | null>;
+export declare const PreferencesContext: import("react").Context<Readonly<{
+    theme: import("@phreshos/core").Theme;
+    animations: boolean;
+}> | null>;
 /** Returns the nearest unresolved Appearance, or Core's complete default. */
 export declare function useAppearance(): Appearance;
-/** Returns the nearest explicit Theme, or reactively follows the browser. */
-export declare function useTheme(): Theme;
+/** Returns the nearest complete Preferences, or reactively follows the browser. */
+export declare function usePreferences(): Preferences;
+/** Reactively reads the browser's complete visual preferences. */
+export declare function useBrowserPreferences(): Preferences;
 /** Selects the active branch of one complete ThemedValue. */
 export declare function useThemedValue<Value>(value: ThemedValue<Value>): Value;

package/dist/appearance-context.js

@@ -1,37 +1,41 @@
-import { createContext, useContext, useSyncExternalStore } from "react";
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
 import { defaultAppearance } from "@phreshos/core";
 export const AppearanceContext = createContext(defaultAppearance);
-export const ThemeContext = createContext(null);
+export const PreferencesContext = createContext(null);
 /** Returns the nearest unresolved Appearance, or Core's complete default. */
 export function useAppearance() {
     return useContext(AppearanceContext);
 }
-/** Returns the nearest explicit Theme, or reactively follows the browser. */
-export function useTheme() {
-    const theme = useContext(ThemeContext);
-    const browserTheme = useBrowserTheme();
-    return theme ?? browserTheme;
+/** Returns the nearest complete Preferences, or reactively follows the browser. */
+export function usePreferences() {
+    const preferences = useContext(PreferencesContext);
+    const browserPreferences = useBrowserPreferences();
+    return preferences ?? browserPreferences;
+}
+/** Reactively reads the browser's complete visual preferences. */
+export function useBrowserPreferences() {
+    const theme = useMediaPreference(darkThemeQuery) ? "dark" : "light";
+    const animations = !useMediaPreference(reducedMotionQuery);
+    return useMemo(() => ({ theme, animations }), [animations, theme]);
 }
 /** Selects the active branch of one complete ThemedValue. */
 export function useThemedValue(value) {
-    return value[useTheme()];
+    return value[usePreferences().theme];
 }
-function useBrowserTheme() {
-    return useSyncExternalStore(subscribeBrowserTheme, browserTheme, serverTheme);
+function useMediaPreference(query) {
+    return useSyncExternalStore(change => subscribeMediaPreference(query, change), () => browserMediaPreference(query), () => false);
 }
-function subscribeBrowserTheme(change) {
+function subscribeMediaPreference(query, change) {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function")
         return () => undefined;
-    const preference = window.matchMedia(darkThemeQuery);
+    const preference = window.matchMedia(query);
     preference.addEventListener("change", change);
     return () => preference.removeEventListener("change", change);
 }
-function browserTheme() {
-    return typeof window !== "undefined"
+function browserMediaPreference(query) {
+    return Boolean(typeof window !== "undefined"
         && typeof window.matchMedia === "function"
-        && window.matchMedia(darkThemeQuery).matches
-        ? "dark"
-        : "light";
+        && window.matchMedia(query).matches);
 }
-function serverTheme() { return "light"; }
 const darkThemeQuery = "(prefers-color-scheme: dark)";
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";

package/dist/appearance-provider.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
-import { type Appearance, type Theme } from "@phreshos/core";
-export { useAppearance, useTheme, useThemedValue } from "./appearance-context.js";
-/** Optionally overrides unresolved Appearance and effective Theme for a React subtree. */
-export declare function AppearanceProvider({ appearance, children, theme }: AppearanceProviderProps): import("react").JSX.Element;
+import { type Appearance, type DesktopPreferences as Preferences } from "@phreshos/core";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
+/** Optionally overrides Appearance and complete visual Preferences for a React subtree. */
+export declare function AppearanceProvider({ appearance, children, preferences }: AppearanceProviderProps): import("react").JSX.Element;
 export interface AppearanceProviderProps {
     readonly appearance?: Appearance;
     readonly children: ReactNode;
-    readonly theme?: Theme;
+    readonly preferences?: Preferences;
 }

package/dist/appearance-provider.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "@phreshos/core";
-import DocumentScrollbars from "./document-scrollbars.js";
 import MotionStyle from "./motion-style.js";
-import { AppearanceContext, ThemeContext, useAppearance, useTheme } from "./appearance-context.js";
-export { useAppearance, useTheme, useThemedValue } from "./appearance-context.js";
-/** Optionally overrides unresolved Appearance and effective Theme for a React subtree. */
-export function AppearanceProvider({ appearance, children, theme }) {
+import { AppearanceContext, PreferencesContext, useAppearance, usePreferences } from "./appearance-context.js";
+export { useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-context.js";
+/** Optionally overrides Appearance and complete visual Preferences for a React subtree. */
+export function AppearanceProvider({ appearance, children, preferences }) {
     const inheritedAppearance = useAppearance();
-    const inheritedTheme = useTheme();
+    const inheritedPreferences = usePreferences();
     const resolvedAppearance = appearance ?? inheritedAppearance;
-    const resolvedTheme = theme ?? inheritedTheme;
-    return _jsx(AppearanceContext.Provider, { value: resolvedAppearance, children: _jsxs(ThemeContext.Provider, { value: resolvedTheme, children: [_jsx(MotionStyle, {}), _jsx(DocumentScrollbars, { appearance: resolvedAppearance, theme: resolvedTheme }), children] }) });
+    const resolvedPreferences = preferences ?? inheritedPreferences;
+    return _jsx(AppearanceContext.Provider, { value: resolvedAppearance, children: _jsxs(PreferencesContext.Provider, { value: resolvedPreferences, children: [_jsx(MotionStyle, {}), children] }) });
 }

package/dist/button.d.ts

@@ -5,7 +5,7 @@ import type { RadiusProps } from "./radius.js";
 import { type ControlColor } from "./control.js";
 import type { MaterialOverrides } from "./material-options.js";
 type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "onPress" | "style">;
-/** A semantic color from Appearance; omission uses background and foreground. */
+/** A semantic color from Appearance; omission uses `default:base`. */
 export type ButtonColor = ControlColor;
 /** Properties accepted by the shared interactive button. */
 export interface ButtonProps extends NativeButtonProps, RadiusProps, MaterialOverrides {

package/dist/button.js

@@ -31,6 +31,7 @@ function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pe
         gridAutoFlow: "column",
         gridAutoColumns: "max-content",
         placeItems: "center",
+        justifyContent: "center",
         flexShrink: 0,
         minWidth: 0,
         height,
@@ -56,6 +57,6 @@ function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pe
     };
 }
 function buttonPaint(theme, interactive, hovered, pressed) {
-    const paints = theme.colored ? theme.paints.palette : theme.paints.neutral;
+    const paints = theme.paints.palette;
     return interactive && pressed ? paints.pressed : interactive && hovered ? paints.hover : paints.rest;
 }

package/dist/color.js

@@ -43,16 +43,16 @@ export function useColor(value) {
 /** Resolves a semantic Appearance color or preserves a direct CSS color. */
 export function useResolveColor(value = defaultColor) {
     const appearance = useAppearance();
-    const semantic = parseSemanticColor(value);
-    const source = useThemedValue(appearance.colors)[semantic?.name ?? "background"];
-    return semantic ? color(source)[semantic.level] : value;
+    const colors = useThemedValue(appearance.colors);
+    const semantic = parseSemanticColor(value, colors);
+    return semantic ? color(semantic.source)[semantic.level] : value;
 }
 /** Resolves a color to concrete opaque paint for solid interactive states. */
 export function useResolveSolidColor(value) {
     const appearance = useAppearance();
-    const semantic = parseSemanticColor(value);
-    const source = useThemedValue(appearance.colors)[semantic?.name ?? "background"];
-    return semantic ? resolveColorLevel(source, semantic.level) : opaqueColor(value);
+    const colors = useThemedValue(appearance.colors);
+    const semantic = parseSemanticColor(value, colors);
+    return semantic ? resolveColorLevel(semantic.source, semantic.level) : opaqueColor(value);
 }
 /** Applies material opacity without restricting the source CSS color syntax. */
 export function colorOpacity(value, opacity) {
@@ -99,17 +99,14 @@ export function solidColors(base, background, foreground) {
         pressed: paint(colorShade(fill, 0.085))
     };
 }
-function parseSemanticColor(value) {
+function parseSemanticColor(value, colors) {
     const separator = value.indexOf(":");
     if (separator < 0 || value.indexOf(":", separator + 1) >= 0)
         return null;
     const name = value.slice(0, separator);
     const level = value.slice(separator + 1);
-    if (!isAppearanceColor(name) || !isColorLevel(level))
+    const source = Reflect.get(colors, name);
+    if (typeof source !== "string" || !isColorLevel(level))
         return null;
-    return { name, level };
-}
-function isAppearanceColor(value) {
-    return value === "background" || value === "foreground" || value === "primary" || value === "secondary"
-        || value === "success" || value === "warning" || value === "danger" || value === "info";
+    return { source, level };
 }

package/dist/control.d.ts

@@ -30,7 +30,6 @@ export interface ControlTheme {
     readonly foreground: string;
     readonly background: string;
     readonly tint: string;
-    readonly colored: boolean;
     readonly danger: string;
     readonly paints: {
         readonly palette: SolidColors;

package/dist/control.js

@@ -21,20 +21,20 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
     const colors = useThemedValue(appearance.colors);
     const foreground = colors.foreground;
     const background = colors.background;
-    const tint = useResolveSolidColor(color ?? "primary:base");
+    const tint = useResolveSolidColor(color ?? "default:base");
+    const neutral = useResolveSolidColor("default:base");
     const danger = useResolveSolidColor("danger:base");
     const paints = useMemo(() => ({
         palette: solidColors(tint, background, foreground),
-        neutral: solidColors(background, background, foreground),
+        neutral: solidColors(neutral, background, foreground),
         danger: solidColors(danger, background, foreground)
-    }), [tint, background, foreground, danger]);
+    }), [tint, neutral, background, foreground, danger]);
     return {
         transition,
         spacing,
         foreground,
         background,
         tint,
-        colored: color !== undefined,
         danger,
         paints,
         radius: resolveRadius(radius, appearance),
@@ -58,7 +58,7 @@ export function fieldStyle(theme, disabled = false, style) {
     };
 }
 export function controlPaint(theme, focused, invalid, hovered = false) {
-    const paints = invalid ? theme.paints.danger : theme.colored ? theme.paints.palette : theme.paints.neutral;
+    const paints = invalid ? theme.paints.danger : theme.paints.palette;
     return focused ? paints.pressed : hovered ? paints.hover : paints.rest;
 }
 export function controlStyle(theme, focused, invalid, hovered = false, focusVisible = focused) {

package/dist/main.d.ts

@@ -5,7 +5,8 @@
  * behavior contract has been established by the package's tests.
  */
 export { defaultAppearance } from "@phreshos/core";
-export { AppearanceProvider, useAppearance, useThemedValue, useTheme, type AppearanceProviderProps } from "./appearance-provider.js";
+export { AppearanceProvider, useAppearance, useBrowserPreferences, usePreferences, useThemedValue, type AppearanceProviderProps } from "./appearance-provider.js";
+export type { DesktopPreferences as Preferences } from "@phreshos/core";
 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";
@@ -19,6 +20,7 @@ export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from "./radi
 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 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,7 +5,7 @@
  * behavior contract has been established by the package's tests.
  */
 export { defaultAppearance } from "@phreshos/core";
-export { AppearanceProvider, useAppearance, useThemedValue, useTheme } from "./appearance-provider.js";
+export { AppearanceProvider, useAppearance, useBrowserPreferences, usePreferences, useThemedValue } from "./appearance-provider.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
 export { Surface } from "./surface.js";
@@ -19,6 +19,7 @@ export { Radio, RadioGroup } from "./radio.js";
 export { Switch } from "./switch.js";
 export { Select } from "./select.js";
 export { Slider } from "./slider.js";
+export { ScrollArea } from "./scroll-area.js";
 export { resolveRadius } from "./radius.js";
 export { resolveSpacing } from "./spacing.js";
 export { useColor } from "./color.js";

package/dist/motion-style.d.ts

@@ -5,9 +5,10 @@ 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(reduced?: boolean): Transition;
+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 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,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { defaultAppearance } from "@phreshos/core";
-import { useAppearance } from "./appearance-context.js";
+import { useAppearance, usePreferences } from "./appearance-context.js";
 const visualProperties = "background-color, color, border-color, border-radius";
 const paintProperties = "fill, stroke, opacity";
 /** CSS timing for values painted directly by React UI. */
@@ -12,27 +12,30 @@ export function usePaintTransition() {
     return { ...useTransitionTiming(), transitionProperty: paintProperties };
 }
 /** Motion timing for interactive geometry owned by React UI. */
-export function useControlTransition(reduced = false) {
+export function useControlTransition() {
     const { duration, easing } = useAppearance().transaction;
+    const { animations } = usePreferences();
     return {
         type: "tween",
-        duration: reduced ? 0 : duration / 1_000,
+        duration: animations ? duration / 1_000 : 0,
         ease: motionEasing(easing)
     };
 }
 /** Per-overlay variables consumed by the shared entrance keyframes. */
 export function useOverlayTransition() {
     const { duration, easing } = useAppearance().transaction;
+    const { animations } = usePreferences();
     return {
-        "--phreshos-ui-motion-duration": `${duration}ms`,
+        "--phreshos-ui-motion-duration": `${animations ? duration : 0}ms`,
         "--phreshos-ui-motion-easing": cssEasing(easing)
     };
 }
 export const overlayMotionClass = "phreshos-ui-overlay";
-function useTransitionTiming() {
+export function useTransitionTiming() {
     const { duration, easing } = useAppearance().transaction;
+    const { animations } = usePreferences();
     return {
-        transitionDuration: `${duration}ms`,
+        transitionDuration: `${animations ? duration : 0}ms`,
         transitionTimingFunction: cssEasing(easing)
     };
 }
@@ -73,10 +76,6 @@ const stylesheet = `
   from { opacity: 0; translate: var(--phreshos-ui-overlay-x) var(--phreshos-ui-overlay-y); }
   to { opacity: 1; translate: 0 0; }
 }
-@media (prefers-reduced-motion: reduce) {
-  :root { --phreshos-ui-motion-duration: 0ms; }
-  .phreshos-ui-overlay[data-entering], .phreshos-ui-overlay[data-exiting] { animation: none; }
-}
 `;
 /** React hoists and deduplicates this stylesheet, including portals. */
 export default function MotionStyle() {

package/dist/scroll-area.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, Ref, ReactNode, UIEventHandler } from "react";
+export type ScrollAreaAxis = "vertical" | "horizontal" | "both";
+export interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onScroll"> {
+    readonly axis?: ScrollAreaAxis;
+    readonly children?: ReactNode;
+    readonly onScroll?: UIEventHandler<HTMLDivElement>;
+    readonly viewportRef?: Ref<HTMLDivElement>;
+}
+/** A native scrolling viewport with locally owned React UI scrollbars. */
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/scroll-area.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { forwardRef, useState } from "react";
+import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { colorOpacity } from "./color.js";
+import { useTransitionTiming } from "./motion-style.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 foreground = useThemedValue(appearance.colors).foreground;
+    const radius = Math.min(appearance.radius, 8);
+    const vertical = axis === "vertical" || axis === "both";
+    const horizontal = axis === "horizontal" || axis === "both";
+    return _jsxs(BaseScrollArea.Root, { ...properties, "data-phreshos-scroll-area": "", ref: ref, style: {
+            ...style,
+            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: {
+                    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" } })] });
+});
+function Scrollbar({ orientation, foreground, radius }) {
+    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,
+                opacity: present && (state.hovering || state.scrolling) ? 1 : 0,
+                pointerEvents: present && (state.hovering || state.scrolling) ? "auto" : "none",
+                transitionDuration: transition.transitionDuration,
+                transitionTimingFunction: transition.transitionTimingFunction,
+                transitionProperty: "opacity"
+            };
+        }, children: _jsx(BaseScrollArea.Thumb, { "data-phreshos-scroll-area-thumb": "", style: {
+                borderRadius: radius,
+                backgroundColor: colorOpacity(foreground, hovered ? 0.2 : 0.1),
+                transitionDuration: transition.transitionDuration,
+                transitionTimingFunction: transition.transitionTimingFunction,
+                transitionProperty: "background-color"
+            } }) });
+}

package/dist/select.js

@@ -1,30 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { motion, useReducedMotion } from "motion/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 { SurfaceButton } from "./control-surface.js";
 import { Surface } from "./surface.js";
+import { ScrollArea } from "./scroll-area.js";
 import { overlayMotionClass, useControlTransition, useOverlayTransition } from "./motion-style.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, ...properties }, ref) {
     const theme = useControlTheme({ size, color, radius });
-    const reduced = useReducedMotion();
-    const transition = useControlTransition(Boolean(reduced));
+    const transition = useControlTransition();
     const overlayTransition = useOverlayTransition();
     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, 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, { className: overlayMotionClass, placement: "bottom start", offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ListBox, { items: options, style: { display: "grid", gap: theme.gap, minHeight: 0, overflow: "auto", 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 ? `2px solid ${theme.foreground}` : "none", outlineOffset: -2,
-                                    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 ? 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, { className: overlayMotionClass, placement: "bottom start", offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { 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, 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 ? `2px solid ${theme.foreground}` : "none", outlineOffset: -2,
+                                        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 })] }) });
 });

package/dist/slider.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
-import { motion, useReducedMotion } from "motion/react";
+import { motion } from "motion/react";
 import { Slider as AriaSlider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from "react-aria-components";
 import { FieldLabel, fieldStyle, useControlTheme } from "./control.js";
 import { useControlTransition } from "./motion-style.js";
+import { usePreferences } from "./appearance-provider.js";
 /** One numeric value with pointer, touch, keyboard, and form support. */
 export const Slider = forwardRef(function Slider({ label, description, name, disabled, size, color, style, orientation = "horizontal", ...properties }, ref) {
     const theme = useControlTheme({ size, color });
     const descriptionId = useId();
     const vertical = orientation === "vertical";
     const diameter = theme.fontSize + 6;
-    const reduced = useReducedMotion();
-    const transition = useControlTransition(Boolean(reduced));
+    const { animations } = usePreferences();
+    const transition = useControlTransition();
     const rail = Math.max(4, Math.round(diameter / 3));
     return _jsxs(AriaSlider, { ...properties, ref: ref, isDisabled: disabled, orientation: orientation, style: fieldStyle(theme, disabled, style), "aria-describedby": [properties["aria-describedby"], description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [_jsx(FieldLabel, { label: label }), _jsx(SliderOutput, { style: { fontVariantNumeric: "tabular-nums", opacity: 0.7 } })] }), _jsxs(SliderTrack, { style: {
                     position: "relative", touchAction: "none",
@@ -30,7 +31,7 @@ export const Slider = forwardRef(function Slider({ label, description, name, dis
                             ...(vertical ? { left: "50%" } : { top: "50%" }),
                             outline: state.isFocusVisible ? `2px solid ${theme.foreground}` : "none", outlineOffset: 2,
                             cursor: state.isDisabled ? "not-allowed" : state.isDragging ? "grabbing" : "grab"
-                        }), children: state => _jsx(motion.span, { "aria-hidden": "true", initial: false, animate: { scale: reduced || state.isDisabled ? 1 : state.isDragging ? 0.92 : state.isHovered ? 1.08 : 1 }, transition: transition, style: { ...theme.transition, position: "absolute", inset: 0, borderRadius: "inherit", pointerEvents: "none",
+                        }), children: state => _jsx(motion.span, { "aria-hidden": "true", initial: false, animate: { scale: !animations || state.isDisabled ? 1 : state.isDragging ? 0.92 : state.isHovered ? 1.08 : 1 }, transition: transition, style: { ...theme.transition, position: "absolute", inset: 0, borderRadius: "inherit", pointerEvents: "none",
                                 background: (state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).color,
                                 border: `3px solid ${(state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).background}`,
                                 boxSizing: "border-box" } }) })] }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });

package/dist/toggle-indicator.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion, useReducedMotion } from "motion/react";
+import { motion } from "motion/react";
 import { useLocale } from "react-aria-components";
 import { useControlTransition } from "./motion-style.js";
+import { usePreferences } from "./appearance-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, selected, indeterminate = false, focused, invalid = false, hovered = false, pressed = false, theme, material: options }) {
-    const reduced = useReducedMotion();
-    const transition = useControlTransition(Boolean(reduced));
+    const { animations } = usePreferences();
+    const transition = useControlTransition();
     const { direction } = useLocale();
     const diameter = theme.fontSize + 6;
     const active = selected || indeterminate;
@@ -14,9 +15,9 @@ export function ToggleIndicator({ kind, selected, indeterminate = false, focused
     const paint = pressed ? paints.pressed : hovered ? paints.hover : paints.rest;
     const radius = kind === "checkbox" ? Math.min(diameter / 4, typeof theme.radius === "number" ? theme.radius : diameter / 4) : diameter;
     const switching = kind === "switch";
-    const thumbWidth = diameter - 6 + (pressed && !reduced ? 3 : 0);
+    const thumbWidth = diameter - 6 + (pressed && animations ? 3 : 0);
     const travel = (diameter * 2 - thumbWidth) / 2 - 3;
-    return _jsx(Surface, { as: motion.span, material: options, color: paint.background, "aria-hidden": "true", initial: false, animate: { scale: reduced || switching ? 1 : pressed ? 0.94 : hovered ? 1.03 : 1 }, transition: transition, style: {
+    return _jsx(Surface, { as: motion.span, material: options, color: paint.background, "aria-hidden": "true", initial: false, animate: { scale: !animations || switching ? 1 : pressed ? 0.94 : hovered ? 1.03 : 1 }, transition: transition, style: {
             color: paint.color,
             ...theme.transition,
             display: "inline-grid",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -55,13 +55,13 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@phreshos/core": "^0.1.48",
+    "@base-ui/react": "^1.7.0",
+    "@phreshos/core": "^0.1.49",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"
   },
   "devDependencies": {
-    "@base-ui/react": "^1.7.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/dist/document-scrollbars.d.ts

@@ -1,6 +0,0 @@
-import type { Appearance, Theme } from "@phreshos/core";
-/** Applies one Appearance to the complete owning document without rendering. */
-export default function DocumentScrollbars({ appearance, theme }: Readonly<{
-    appearance: Appearance;
-    theme: Theme;
-}>): null;

package/dist/document-scrollbars.js

@@ -1,164 +0,0 @@
-import { useInsertionEffect, useRef } from "react";
-import { colorOpacity } from "./color.js";
-const properties = {
-    thumb: "--phreshos-scrollbar-thumb",
-    thumbHover: "--phreshos-scrollbar-thumb-hover",
-    size: "--phreshos-scrollbar-size",
-    padding: "--phreshos-scrollbar-padding",
-    radius: "--phreshos-scrollbar-radius"
-};
-const stylesheet = `
-@supports not selector(::-webkit-scrollbar) {
-  * {
-    scrollbar-color: var(${properties.thumb}) transparent;
-    scrollbar-width: thin;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    * {
-      scrollbar-color: transparent transparent;
-    }
-
-    *:hover {
-      scrollbar-color: var(${properties.thumb}) transparent;
-    }
-  }
-
-  @media (forced-colors: active) {
-    *,
-    *:hover {
-      scrollbar-color: auto;
-    }
-  }
-}
-
-@supports selector(::-webkit-scrollbar) {
-  *::-webkit-scrollbar {
-    width: var(${properties.size});
-    height: var(${properties.size});
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-track,
-  *::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  *::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    border: var(${properties.padding}) solid transparent;
-    border-radius: var(${properties.radius});
-    background-color: var(${properties.thumb});
-    background-clip: padding-box;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    *:hover {
-      --phreshos-scrollbar-repaint: ;
-    }
-
-    *::-webkit-scrollbar-thumb {
-      background-color: transparent;
-    }
-
-    *:hover::-webkit-scrollbar-thumb {
-      background-color: var(${properties.thumb});
-    }
-
-    *::-webkit-scrollbar-thumb:hover {
-      background-color: var(${properties.thumbHover});
-    }
-  }
-
-  @media (forced-colors: active) {
-    *::-webkit-scrollbar-thumb,
-    *:hover::-webkit-scrollbar-thumb,
-    *::-webkit-scrollbar-thumb:hover {
-      background-color: ButtonText;
-    }
-  }
-}
-`;
-const documents = new WeakMap();
-/** Applies one Appearance to the complete owning document without rendering. */
-export default function DocumentScrollbars({ appearance, theme }) {
-    const identity = useRef(Symbol("AppearanceProvider")).current;
-    const foreground = appearance.colors[theme].foreground;
-    const padding = 5;
-    const thumbSize = 6;
-    const size = thumbSize + padding * 2;
-    const values = {
-        thumb: colorOpacity(foreground, 0.1),
-        thumbHover: colorOpacity(foreground, 0.2),
-        size: `${size}px`,
-        padding: `${padding}px`,
-        radius: `${Math.min(appearance.radius, padding + thumbSize / 2)}px`
-    };
-    useInsertionEffect(function () {
-        if (typeof document === "undefined")
-            return;
-        return register(document, identity, values);
-    }, []);
-    useInsertionEffect(function () {
-        if (typeof document !== "undefined")
-            update(document, identity, values);
-    }, [values.thumb, values.thumbHover, values.size, values.padding, values.radius]);
-    return null;
-}
-function register(owner, identity, values) {
-    const state = documents.get(owner) ?? create(owner);
-    state.providers.set(identity, values);
-    apply(state);
-    return function () {
-        state.providers.delete(identity);
-        if (state.providers.size) {
-            apply(state);
-            return;
-        }
-        state.style.remove();
-        restore(state);
-        documents.delete(owner);
-    };
-}
-function update(owner, identity, values) {
-    const state = documents.get(owner);
-    if (!state?.providers.has(identity))
-        return;
-    state.providers.set(identity, values);
-    apply(state);
-}
-function create(owner) {
-    const root = owner.documentElement;
-    const style = owner.createElement("style");
-    const original = new Map(Object.values(properties).map(property => [property, {
-            value: root.style.getPropertyValue(property),
-            priority: root.style.getPropertyPriority(property)
-        }]));
-    style.dataset.phreshosScrollbars = "";
-    style.textContent = stylesheet;
-    owner.head.append(style);
-    const state = { root, style, original, providers: new Map() };
-    documents.set(owner, state);
-    return state;
-}
-function apply(state) {
-    const values = [...state.providers.values()].at(-1);
-    if (!values)
-        return;
-    state.root.style.setProperty(properties.thumb, values.thumb);
-    state.root.style.setProperty(properties.thumbHover, values.thumbHover);
-    state.root.style.setProperty(properties.size, values.size);
-    state.root.style.setProperty(properties.padding, values.padding);
-    state.root.style.setProperty(properties.radius, values.radius);
-}
-function restore(state) {
-    for (const [property, original] of state.original) {
-        if (original.value)
-            state.root.style.setProperty(property, original.value, original.priority);
-        else
-            state.root.style.removeProperty(property);
-    }
-}