@phreshos/react-ui 0.1.22 → 0.1.24

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,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "@phreshos/core";
 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, {}), 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

@@ -19,7 +19,7 @@ export const Button = forwardRef(function Button({ children, color, disabled = f
 });
 function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pending, size, style }) {
     const fontSize = controlFontSizes[size];
-    const { spacing, foreground } = theme;
+    const { spacing, focusColor } = theme;
     const height = Math.max(24, 24 + spacing);
     const interactive = !disabled && !pending;
     const paint = buttonPaint(theme, interactive, isHovered, isPressed);
@@ -40,8 +40,8 @@ function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pe
         gap: Math.max(4, spacing / 2),
         border: "none",
         borderRadius: theme.radius,
-        outline: isFocusVisible ? `2px solid ${foreground}` : "none",
-        outlineOffset: 2,
+        outline: isFocusVisible ? `1px solid ${focusColor}` : "none",
+        outlineOffset: 1,
         ...paint,
         opacity: disabled ? 0.46 : pending ? 0.68 : 1,
         cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",
@@ -57,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/control.d.ts

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

package/dist/control.js

@@ -4,7 +4,7 @@ import { FieldError, Label, Text } from "react-aria-components";
 import { useAppearance, useThemedValue } from "./appearance-provider.js";
 import { resolveRadius } from "./radius.js";
 import { scale } from "./scale.js";
-import { solidColors } from "./color.js";
+import { colorOpacity, solidColors } from "./color.js";
 import { useResolveSolidColor } from "./color.js";
 import { useVisualTransition } from "./motion-style.js";
 export const controlFontSizes = Object.freeze({
@@ -21,20 +21,22 @@ 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 focus = useResolveSolidColor("warning: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,
+        focusColor: colorOpacity(focus, 0.2),
         danger,
         paints,
         radius: resolveRadius(radius, appearance),
@@ -58,7 +60,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) {
@@ -74,8 +76,8 @@ export function controlStyle(theme, focused, invalid, hovered = false, focusVisi
         paddingInline: Math.max(8, theme.spacing),
         border: 0,
         borderRadius: theme.radius,
-        outline: focusVisible ? `2px solid ${theme.foreground}` : "none",
-        outlineOffset: 2,
+        outline: focusVisible ? `1px solid ${theme.focusColor}` : "none",
+        outlineOffset: 1,
         ...paint,
         caretColor: paint.color,
         font: "inherit",

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";

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";

package/dist/motion-style.d.ts

@@ -5,7 +5,7 @@ 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";

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";
 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/select.js

@@ -1,6 +1,6 @@
 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";
@@ -10,8 +10,7 @@ import { overlayMotionClass, useControlTransition, useOverlayTransition } from "
 /** 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),
@@ -22,7 +21,7 @@ export const Select = forwardRef(function Select({ label, description, errorMess
                                         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,
+                                        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

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",
@@ -28,9 +29,9 @@ export const Slider = forwardRef(function Slider({ label, description, name, dis
                         } }), _jsx(SliderThumb, { name: name, style: state => ({
                             width: diameter, height: diameter, borderRadius: "50%", boxSizing: "border-box",
                             ...(vertical ? { left: "50%" } : { top: "50%" }),
-                            outline: state.isFocusVisible ? `2px solid ${theme.foreground}` : "none", outlineOffset: 2,
+                            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none", outlineOffset: 1,
                             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",
@@ -28,8 +29,8 @@ export function ToggleIndicator({ kind, selected, indeterminate = false, focused
             height: diameter,
             borderRadius: radius,
             border: "none",
-            outline: focused ? `2px solid ${theme.foreground}` : "none",
-            outlineOffset: 2,
+            outline: focused ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: 1,
         }, children: switching ? _jsx(motion.span, { initial: false, animate: { width: thumbWidth, x: (selected ? travel : -travel) * (direction === "rtl" ? -1 : 1) }, transition: transition, style: {
                 ...theme.transition,
                 height: diameter - 6, borderRadius: diameter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.49",
+    "@phreshos/core": "^0.1.51",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"