@phreshos/react-ui 0.1.16 → 0.1.18

package/dist/surface-edge.d.ts

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

package/dist/surface-edge.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { colorLightness, colorOpacity, orderColors } from "./color.js";
+import { paintTransition } from "./motion-style.js";
+import { scale } from "./scale.js";
+/** Paints the boundary owned by one Surface from the material it contains. */
+export function SurfaceEdge({ material }) {
+    const visible = material.opacity > 0;
+    const palette = useRef(null);
+    const [colors, setColors] = useState(null);
+    const updatePalette = useCallback(() => {
+        const base = palette.current;
+        const view = base?.ownerDocument.defaultView;
+        if (!base || !view)
+            return;
+        const computed = view.getComputedStyle(base);
+        const background = computed.fill;
+        const foreground = computed.color;
+        setColors(previous => previous?.background === background && previous.foreground === foreground ? previous : {
+            ...orderColors(background, foreground),
+            background,
+            foreground,
+            lightness: Math.max(0, Math.min(1, colorLightness(background)))
+        });
+    }, []);
+    useLayoutEffect(updatePalette);
+    useLayoutEffect(() => {
+        const base = palette.current;
+        if (!base)
+            return;
+        const complete = (event) => {
+            if (event.target === base && (event.propertyName === "fill" || event.propertyName === "color"))
+                updatePalette();
+        };
+        base.addEventListener("transitionend", complete);
+        return () => base.removeEventListener("transitionend", complete);
+    }, [updatePalette, visible]);
+    if (!visible)
+        return null;
+    return _jsxs(Fragment, { children: [_jsx("svg", { "data-surface-palette": "", "aria-hidden": "true", width: "0", height: "0", style: { position: "absolute", pointerEvents: "none" }, children: _jsx("rect", { ref: palette, "data-surface-palette-base": "", style: { ...paintTransition, fill: material.color, color: material.foreground } }) }), _jsx("span", { "data-surface-edge": "", "aria-hidden": "true", style: {
+                    ...paintTransition,
+                    position: "absolute",
+                    zIndex: 1,
+                    inset: 0,
+                    padding: 1,
+                    borderRadius: "inherit",
+                    pointerEvents: "none",
+                    opacity: Math.min(1, scale(material.opacity, "xlarge")) * (colors?.lightness ?? 0),
+                    background: colors ? glassEdge(colors.lighter, colors.darker) : undefined,
+                    WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                    WebkitMaskComposite: "xor",
+                    mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                    maskComposite: "exclude"
+                } })] });
+}
+function glassEdge(light, dark) {
+    const edge = `color-mix(in oklch, ${dark} 20%, ${light})`;
+    return `linear-gradient(145deg, ${colorOpacity(light, 0.92)}, ${colorOpacity(light, 0.4)} 35%, ${colorOpacity(edge, 0.18)} 55%, ${colorOpacity(light, 0.6)} 85%, ${colorOpacity(light, 0.3)})`;
+}

package/dist/surface.d.ts

@@ -1,44 +1,23 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { type ScaleLevel } from "./scale.js";
-/** Native div properties plus controls for the locally owned material. */
-export type SurfaceProps = Omit<ComponentPropsWithoutRef<"div">, "opacity"> & Readonly<{
-    /** Appearance-derived level or direct grain intensity from zero to one. */
-    grain?: ScaleLevel | number;
-    /** Appearance-derived level or direct retained grain amount from zero to one. */
-    grainAmount?: ScaleLevel | number;
-    /** Appearance-derived level or direct backdrop blur from zero to 24 CSS pixels. */
-    backdrop?: ScaleLevel | number;
-    /** Appearance-derived level or direct material opacity from zero to one. */
-    opacity?: ScaleLevel | number;
-    /** Appearance-derived level or direct organic displacement from zero to 140 pixels. */
-    distortion?: ScaleLevel | number;
-    /** Appearance-derived level or direct directional displacement from zero to 40 pixels. */
-    waves?: ScaleLevel | number;
-    /** Appearance-derived level or direct ripple displacement from zero to 40 pixels. */
-    ripples?: ScaleLevel | number;
-    /** Appearance-derived level or direct backdrop saturation multiplier. */
-    saturation?: ScaleLevel | number;
-    /** Appearance-derived level or direct backdrop brightness multiplier. */
-    brightness?: ScaleLevel | number;
-}>;
-/** Contains content above locally owned Surface material layers. */
-export declare const Surface: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "opacity"> & Readonly<{
-    /** Appearance-derived level or direct grain intensity from zero to one. */
-    grain?: ScaleLevel | number;
-    /** Appearance-derived level or direct retained grain amount from zero to one. */
-    grainAmount?: ScaleLevel | number;
-    /** Appearance-derived level or direct backdrop blur from zero to 24 CSS pixels. */
-    backdrop?: ScaleLevel | number;
-    /** Appearance-derived level or direct material opacity from zero to one. */
-    opacity?: ScaleLevel | number;
-    /** Appearance-derived level or direct organic displacement from zero to 140 pixels. */
-    distortion?: ScaleLevel | number;
-    /** Appearance-derived level or direct directional displacement from zero to 40 pixels. */
-    waves?: ScaleLevel | number;
-    /** Appearance-derived level or direct ripple displacement from zero to 40 pixels. */
-    ripples?: ScaleLevel | number;
-    /** Appearance-derived level or direct backdrop saturation multiplier. */
-    saturation?: ScaleLevel | number;
-    /** Appearance-derived level or direct backdrop brightness multiplier. */
-    brightness?: ScaleLevel | number;
-}> & import("react").RefAttributes<HTMLDivElement>>;
+import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from "react";
+import { type Color } from "./color.js";
+import { type MaterialOptions } from "./material-options.js";
+import { type RadiusProps } from "./radius.js";
+export type { MaterialOptions } from "./material-options.js";
+export interface SurfaceOwnProps extends MaterialOptions, RadiusProps {
+    readonly color?: Color;
+}
+/**
+ * The structural properties a component must preserve when it hosts a Surface.
+ * The component must apply `style` and render `children` on the same host element,
+ * and it must forward its ref to that element.
+ */
+export interface SurfaceHostProps {
+    readonly children?: ReactNode;
+    readonly style?: CSSProperties;
+}
+export type SurfaceHost = ElementType<SurfaceHostProps>;
+export type SurfaceProps<As extends SurfaceHost = "div"> = SurfaceOwnProps & Readonly<{
+    as?: As;
+}> & Omit<ComponentPropsWithRef<As>, keyof SurfaceOwnProps | "as" | "color">;
+export type SurfaceComponent = <As extends SurfaceHost = "div">(properties: SurfaceProps<As>) => ReactElement | null;
+export declare const Surface: SurfaceComponent;

package/dist/surface.js

@@ -1,101 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useId, useLayoutEffect, useRef } from "react";
-import { appearanceLimits } from "@phreshos/core";
-import { isScaleLevel, scale, scaleMultiplier } from "./scale.js";
-import { SurfaceMaterial } from "./surface-material.js";
+import { createElement, forwardRef, useId } from "react";
 import { useAppearance, useResolveTheme } from "./appearance-provider.js";
+import { useResolveColor } from "./color.js";
+import { useMaterialOptions } from "./material-options.js";
+import { MaterialPaint } from "./material-paint.js";
+import MotionStyle, { visualTransition } from "./motion-style.js";
+import { resolveRadius } from "./radius.js";
+import { SurfaceEdge } from "./surface-edge.js";
+/** One material-owning element. The host is a div unless `as` selects another element. */
+const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, opacity, backdrop, grain, grainAmount, distortion, saturation, radius, children, style, ...properties }, ref) {
+    const appearance = useAppearance();
+    const material = useResolvedSurface(color, { opacity, backdrop, grain, grainAmount, distortion, saturation });
+    const resolvedRadius = resolveRadius(radius ?? "medium", appearance);
+    return createElement(Element, {
+        ...properties,
+        ref,
+        style: {
+            ...visualTransition,
+            ...style,
+            background: "transparent",
+            color: style?.color ?? material.foreground,
+            borderRadius: radius === undefined ? style?.borderRadius ?? resolvedRadius : resolvedRadius,
+            position: style?.position ?? "relative",
+            isolation: "isolate"
+        }
+    }, _jsx(SurfaceLayers, { material: material }), _jsx(SurfaceEdge, { material: material }), children);
+});
+export const Surface = SurfaceRoot;
+function useResolvedSurface(color, options) {
+    const appearance = useAppearance();
+    const material = useMaterialOptions(options);
+    return {
+        ...material,
+        color: useResolveColor(color),
+        foreground: useResolveTheme(appearance.colors.foreground)
+    };
+}
 const layerStyle = {
     position: "absolute",
     inset: 0,
     borderRadius: "inherit",
     pointerEvents: "none"
 };
-/** Contains content above locally owned Surface material layers. */
-export const Surface = forwardRef(function Surface({ backdrop, brightness, children, distortion, grain, grainAmount, opacity, ripples, saturation, style, waves, ...properties }, forwardedRef) {
-    const appearance = useAppearance();
-    const background = useResolveTheme(appearance.background);
-    const foreground = useResolveTheme(appearance.foreground);
-    const radius = scale(useResolveTheme(appearance.radius), "medium");
-    const surface = useResolveTheme(appearance.surface);
-    const identity = `phresh-surface-${useId().replaceAll(":", "")}`;
-    const element = useRef(null);
-    const capture = useCallback((node) => {
-        element.current = node;
-        if (typeof forwardedRef === "function")
-            forwardedRef(node);
-        else if (forwardedRef)
-            forwardedRef.current = node;
-    }, [forwardedRef]);
-    const resolved = resolveSurface({ backdrop, brightness, distortion, grain, grainAmount, opacity, ripples, saturation, waves }, background, surface);
-    useLayoutEffect(() => {
-        const surface = element.current;
-        if (surface)
-            return prepareSurfaceLayout(surface);
-    });
-    return _jsxs("div", { ...properties, ref: capture, style: {
-            borderRadius: radius,
-            color: foreground,
-            ...style
-        }, children: [resolved.refracts && _jsx(BackdropLayer, { name: "refraction", filter: `url("#${identity}-distortion")`, zIndex: -3 }), resolved.frost && _jsx(BackdropLayer, { name: "frost", filter: resolved.frost, zIndex: -2 }), _jsx(SurfaceMaterial, { identity: identity, foreground: foreground, ...resolved.material }), children] });
-});
-/** Keeps refraction and native frost in independent compositor passes. */
+function SurfaceLayers({ material }) {
+    const { backdrop, saturation, distortion } = material;
+    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 })] });
+}
+/** Keep refraction and native frost in independent compositor passes. */
 function BackdropLayer({ filter, name, zIndex }) {
-    return _jsx("div", { "data-surface-backdrop": name, "aria-hidden": "true", style: {
+    return _jsx("span", { "data-material-backdrop": name, "aria-hidden": "true", style: {
             ...layerStyle,
             zIndex,
             backdropFilter: filter,
             WebkitBackdropFilter: filter
         } });
 }
-function resolveSurface(values, background, surface) {
-    const material = {
-        color: background,
-        distortion: resolveScale(values.distortion, surface.distortion, appearanceLimits.surface.distortion),
-        grain: resolveScale(values.grain, surface.grain, appearanceLimits.surface.grain),
-        grainAmount: resolveScale(values.grainAmount, surface.grainAmount, appearanceLimits.surface.grainAmount),
-        opacity: resolveScale(values.opacity, surface.opacity, appearanceLimits.surface.opacity),
-        ripples: resolveScale(values.ripples, surface.ripples, appearanceLimits.surface.ripples),
-        waves: resolveScale(values.waves, surface.waves, appearanceLimits.surface.waves)
-    };
-    const backdrop = resolveScale(values.backdrop, surface.backdrop, appearanceLimits.surface.backdrop);
-    const saturation = resolveMultiplier(values.saturation, surface.saturation, appearanceLimits.surface.saturation);
-    const brightness = resolveMultiplier(values.brightness, surface.brightness, appearanceLimits.surface.brightness);
-    const frost = [
-        backdrop === 0 ? "" : `blur(${backdrop}px)`,
-        saturation === 1 ? "" : `saturate(${saturation})`,
-        brightness === 1 ? "" : `brightness(${brightness})`
-    ].filter(Boolean).join(" ");
-    return {
-        material,
-        frost,
-        refracts: material.distortion > 0 || material.waves > 0 || material.ripples > 0
-    };
-}
-function resolveScale(value, base, range) {
-    const resolved = isScaleLevel(value) ? scale(base, value) : value ?? base;
-    const finite = Number.isFinite(resolved) ? resolved : base;
-    return Math.min(range.maximum, Math.max(range.minimum, finite));
-}
-function resolveMultiplier(value, base, range) {
-    const resolved = isScaleLevel(value) ? scaleMultiplier(base, value) : value ?? base;
-    const finite = Number.isFinite(resolved) ? resolved : base;
-    return Math.min(range.maximum, Math.max(range.minimum, finite));
-}
-function prepareSurfaceLayout(element) {
-    const view = element.ownerDocument.defaultView;
-    const computed = view?.getComputedStyle(element);
-    const position = element.style.position;
-    const isolation = element.style.isolation;
-    const ownsPosition = computed?.position === "static";
-    const ownsIsolation = computed?.isolation !== "isolate";
-    if (ownsPosition)
-        element.style.position = "relative";
-    if (ownsIsolation)
-        element.style.isolation = "isolate";
-    return () => {
-        if (ownsPosition && element.style.position === "relative")
-            element.style.position = position;
-        if (ownsIsolation && element.style.isolation === "isolate")
-            element.style.isolation = isolation;
-    };
-}

package/dist/switch.d.ts

@@ -0,0 +1,10 @@
+import type { SwitchFieldProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { MaterialOverrides } from "./material-options.js";
+export interface SwitchProps extends Omit<SwitchFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected">, ControlProps, FieldProps, MaterialOverrides {
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    readonly readOnly?: boolean;
+}
+/** An on/off setting. onChange receives the next boolean value. */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/switch.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { SwitchField, SwitchButton } from "react-aria-components";
+import { FieldFeedback, fieldStyle, useControlTheme } from "./control.js";
+import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
+/** An on/off setting. onChange receives the next boolean value. */
+export const Switch = forwardRef(function Switch({ label, description, errorMessage, disabled, required, invalid, readOnly, checked, defaultChecked, size, color, style, material, ...properties }, ref) {
+    const theme = useControlTheme({ size, color });
+    return _jsxs(SwitchField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, style: state => fieldStyle(theme, state.isDisabled, style), children: [_jsx(SwitchButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "switch", material: material, theme: theme, selected: state.isSelected, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+});

package/dist/text-control.d.ts

@@ -0,0 +1,9 @@
+import type { TextFieldProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { RadiusProps } from "./radius.js";
+import type { MaterialOverrides } from "./material-options.js";
+/** Shared contract for native text-entry controls. */
+export interface TextControlProps extends Omit<TextFieldProps, ControlOverrides | "isReadOnly">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}

package/dist/textarea.d.ts

@@ -0,0 +1,6 @@
+import type { TextControlProps } from "./text-control.js";
+export interface TextareaProps extends Omit<TextControlProps, "type" | "pattern"> {
+    readonly rows?: number;
+}
+/** A labeled multiline text control, vertically resizable without escaping its width. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextArea as AriaTextarea, TextField } from "react-aria-components";
+import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { SurfaceField } from "./control-surface.js";
+import FieldStyle, { textControlClass } from "./field-style.js";
+/** A labeled multiline text control, vertically resizable without escaping its width. */
+export const Textarea = forwardRef(function Textarea({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, rows = 4, material, ...properties }, ref) {
+    const theme = useControlTheme({ size, color, radius });
+    return _jsxs(TextField, { ...properties, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaTextarea, { ref: ref, placeholder: placeholder, rows: rows, className: textControlClass, render: (native, state) => _jsx(SurfaceField, { material: material, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("textarea", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => ({
+                    ...controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible),
+                    height: "auto",
+                    minHeight: theme.height,
+                    paddingBlock: Math.max(6, theme.spacing / 2),
+                    resize: "vertical"
+                }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+});

package/dist/toggle-indicator.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from "react";
+import type { ControlTheme } from "./control.js";
+import type { MaterialOptions } from "./material-options.js";
+/** Shared paint only. Selection, focus, validation, and native input behavior belong to React Aria. */
+export declare function ToggleIndicator({ kind, selected, indeterminate, focused, invalid, hovered, pressed, theme, material: options }: Readonly<{
+    kind: "checkbox" | "radio" | "switch";
+    selected: boolean;
+    indeterminate?: boolean;
+    focused: boolean;
+    invalid?: boolean;
+    hovered?: boolean;
+    pressed?: boolean;
+    theme: ControlTheme;
+    material?: MaterialOptions;
+}>): import("react").JSX.Element;
+export declare function toggleStyle(theme: ControlTheme, disabled: boolean, readOnly: boolean): CSSProperties;

package/dist/toggle-indicator.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { useLocale } from "react-aria-components";
+import { controlTransition, visualTransition } from "./motion-style.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 { direction } = useLocale();
+    const diameter = theme.fontSize + 6;
+    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;
+    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 travel = (diameter * 2 - thumbWidth) / 2 - 3;
+    return _jsx(Surface, { as: motion.span, ...options, color: paint.background, "aria-hidden": "true", initial: false, animate: { scale: reduced || switching ? 1 : pressed ? 0.94 : hovered ? 1.03 : 1 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: {
+            color: paint.color,
+            ...visualTransition,
+            display: "inline-grid",
+            placeItems: "center",
+            position: "relative",
+            boxSizing: "border-box",
+            flexShrink: 0,
+            width: switching ? diameter * 2 : diameter,
+            height: diameter,
+            borderRadius: radius,
+            border: "none",
+            outline: focused ? `2px solid ${theme.foreground}` : "none",
+            outlineOffset: 2,
+        }, children: switching ? _jsx(motion.span, { initial: false, animate: { width: thumbWidth, x: (selected ? travel : -travel) * (direction === "rtl" ? -1 : 1) }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: {
+                ...visualTransition,
+                height: diameter - 6, borderRadius: diameter,
+                background: paint.color
+            } }) : _jsx(motion.span, { initial: false, animate: { opacity: active ? 1 : 0, scale: active ? 1 : 0.7 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: { display: "grid", placeItems: "center" }, children: kind === "radio" ? _jsx("span", { style: { ...visualTransition, width: diameter / 2, height: diameter / 2, borderRadius: "50%", background: "currentColor" } })
+                : _jsxs("svg", { width: diameter - 4, height: diameter - 4, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(motion.path, { d: "m3 8 3 3 7-7", initial: false, animate: { pathLength: selected && !indeterminate ? 1 : 0, opacity: selected && !indeterminate ? 1 : 0 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration } }), _jsx(motion.path, { d: "M4 8h8", initial: false, animate: { pathLength: indeterminate ? 1 : 0, opacity: indeterminate ? 1 : 0 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration } })] }) }) });
+}
+export function toggleStyle(theme, disabled, readOnly) {
+    return {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.gap,
+        minHeight: theme.height,
+        width: "fit-content",
+        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer"
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -52,17 +52,17 @@
     "prepack": "node --run test && node --run build"
   },
   "peerDependencies": {
-    "@phreshos/core": "^0.1.41",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
+    "@phreshos/core": "^0.1.42",
     "colorjs.io": "^0.7.1",
+    "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"
   },
   "devDependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.41",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/dist/surface-material.d.ts

@@ -1,14 +0,0 @@
-interface SurfaceMaterialProps {
-    readonly color: string;
-    readonly distortion: number;
-    readonly foreground: string;
-    readonly grain: number;
-    readonly grainAmount: number;
-    readonly identity: string;
-    readonly opacity: number;
-    readonly ripples: number;
-    readonly waves: number;
-}
-/** The locally owned fill, refraction definition, and glass rim inside one Surface. */
-export declare function SurfaceMaterial({ color, distortion, foreground, grain, grainAmount, identity, opacity, ripples, waves }: SurfaceMaterialProps): import("react").JSX.Element | null;
-export {};

package/dist/surface-material.js

@@ -1,128 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { colorLightness, colorOpacity, orderColors } from "./color.js";
-import { scale } from "./scale.js";
-/** The locally owned fill, refraction definition, and glass rim inside one Surface. */
-export function SurfaceMaterial({ color, distortion, foreground, grain, grainAmount, identity, opacity, ripples, waves }) {
-    const element = useRef(null);
-    const [colors, setColors] = useState(null);
-    const seed = useMemo(() => seedFrom(identity), [identity]);
-    const hasPaint = opacity > 0;
-    const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
-    const hasDistortion = distortion > 0 || waves > 0 || ripples > 0;
-    const initial = useMemo(() => hasGrain ? grainPaths(seed, grainAmount) : [], [grainAmount, hasGrain, seed]);
-    // Resolve variables, currentColor, and CSS expressions in this Surface's
-    // own scope before comparing colors. Layout effects settle before paint.
-    useLayoutEffect(() => {
-        const material = element.current;
-        const view = material?.ownerDocument.defaultView;
-        if (!material || !view || !hasPaint)
-            return;
-        const computed = view.getComputedStyle(material);
-        const background = computed.fill;
-        const foreground = computed.color;
-        if (colors?.background === background && colors.foreground === foreground)
-            return;
-        setColors({ ...orderColors(background, foreground), background, foreground, lightness: Math.max(0, Math.min(1, colorLightness(background))) });
-    });
-    if (!hasPaint && !hasDistortion)
-        return null;
-    return _jsxs(Fragment, { children: [_jsxs("svg", { "data-surface-material": "", "aria-hidden": "true", focusable: "false", style: {
-                    position: "absolute",
-                    zIndex: -1,
-                    inset: 0,
-                    display: "block",
-                    width: "100%",
-                    height: "100%",
-                    overflow: "hidden",
-                    borderRadius: "inherit",
-                    boxShadow: hasPaint && colors ? `inset 0 1px 2px ${colorOpacity(colors.lighter, 0.28)}, 0 8px 24px ${colorOpacity(colors.darker, 0.04)}` : undefined,
-                    pointerEvents: "none"
-                }, children: [(hasGrain || hasDistortion) && _jsxs("defs", { children: [hasDistortion && _jsx(DistortionFilter, { distortion: distortion, identity: identity, ripples: ripples, seed: seed, waves: waves }), hasGrain && _jsx("pattern", { id: `${identity}-grain`, width: patternSize, height: patternSize, patternUnits: "userSpaceOnUse", children: initial.map((path, tone) => _jsx("path", { "data-surface-grain-tone": tone, d: path, fill: grainTone(color, tone, grain), shapeRendering: "crispEdges" }, tone)) })] }), hasPaint && _jsxs("g", { "data-surface-paint": "", opacity: opacity, children: [_jsx("rect", { ref: element, "data-surface-base": "", width: "100%", height: "100%", style: { fill: color, color: foreground } }), hasGrain && _jsx("rect", { "data-surface-grain": "", width: "100%", height: "100%", fill: `url(#${identity}-grain)`, shapeRendering: "crispEdges" })] })] }), hasPaint && _jsx("div", { "data-surface-border": "", "aria-hidden": "true", style: {
-                    position: "absolute",
-                    // The material belongs behind content; its rim belongs above it.
-                    // Opaque children must not erase the Surface's rounded edge.
-                    zIndex: 1,
-                    inset: 0,
-                    padding: 1,
-                    borderRadius: "inherit",
-                    pointerEvents: "none",
-                    opacity: Math.min(1, scale(opacity, "xlarge")) * (colors?.lightness ?? 0),
-                    background: colors ? glassRim(colors.lighter, colors.darker) : undefined,
-                    WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-                    WebkitMaskComposite: "xor",
-                    mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-                    maskComposite: "exclude"
-                } })] });
-}
-function glassRim(light, dark) {
-    const edge = `color-mix(in oklch, ${dark} 20%, ${light})`;
-    return `linear-gradient(145deg, ${colorOpacity(light, 0.92)}, ${colorOpacity(light, 0.4)} 35%, ${colorOpacity(edge, 0.18)} 55%, ${colorOpacity(light, 0.6)} 85%, ${colorOpacity(light, 0.3)})`;
-}
-function DistortionFilter({ distortion, identity, ripples, seed, waves }) {
-    const fields = [
-        distortion > 0 && { name: "organic", strength: distortion, x: "R" },
-        waves > 0 && { name: "waves", strength: waves, x: "R" },
-        ripples > 0 && { name: "ripples", strength: ripples, x: "B" }
-    ].filter((field) => Boolean(field));
-    const scale = fields.reduce((total, field) => total + field.strength, 0);
-    const weighted = fields.map(field => `${identity}-${field.name}-weighted`);
-    const map = `${identity}-distortion-map`;
-    return _jsxs("filter", { id: `${identity}-distortion`, "data-surface-distortion": "", x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [distortion > 0 && _jsxs(Fragment, { children: [_jsx("feTurbulence", { "data-surface-distortion-noise": "", "data-surface-distortion-field": "organic", type: "fractalNoise", baseFrequency: "0.008 0.008", numOctaves: 2, seed: 92, result: `${identity}-organic-noise` }), _jsx("feGaussianBlur", { in: `${identity}-organic-noise`, stdDeviation: 2, result: `${identity}-organic-noise-blurred` })] }), waves > 0 && _jsx(Fragment, { children: _jsx("feTurbulence", { "data-surface-distortion-field": "waves", type: "turbulence", baseFrequency: "0.006 0.045", numOctaves: 1, seed: seed + 17, result: `${identity}-waves-noise` }) }), ripples > 0 && _jsx(Fragment, { children: _jsx("feTurbulence", { "data-surface-distortion-field": "ripples", type: "turbulence", baseFrequency: "0.055", numOctaves: 2, seed: seed + 31, result: `${identity}-ripples-noise` }) }), fields.map(field => _jsx("feColorMatrix", { "data-surface-distortion-weight": field.name, in: `${identity}-${field.name}-noise${field.name === "organic" ? "-blurred" : ""}`, type: "matrix", values: weightMatrix(field.x, field.strength / scale), result: `${identity}-${field.name}-weighted` }, field.name)), weighted.slice(1).map((field, index) => _jsx("feComposite", { "data-surface-distortion-combine": "", in: index === 0 ? weighted[0] : `${identity}-distortion-sum-${index}`, in2: field, operator: "arithmetic", k2: 1, k3: 1, result: index === weighted.length - 2 ? map : `${identity}-distortion-sum-${index + 1}` }, field)), _jsx("feDisplacementMap", { "data-surface-distortion-stage": "combined", in: "SourceGraphic", in2: weighted.length === 1 ? weighted[0] : map, scale: scale, xChannelSelector: "R", yChannelSelector: "G" })] });
-}
-function weightMatrix(x, weight) {
-    const red = x === "R" ? `${weight} 0 0 0 0` : `0 0 ${weight} 0 0`;
-    return `${red}
-          0 ${weight} 0 0 0
-          0 0 0 0 0
-          0 0 0 1 0`;
-}
-function grainTone(color, tone, intensity) {
-    const channel = Math.round(tone / (toneCount - 1) * 255);
-    const percentage = Math.round(intensity * 10_000) / 100;
-    return `color-mix(in srgb, ${color} ${100 - percentage}%, rgb(${channel} ${channel} ${channel}) ${percentage}%)`;
-}
-function grainPaths(seed, amount) {
-    const tones = Array.from({ length: toneCount }, () => []);
-    for (let y = 0; y < patternSize; y += 1) {
-        for (let x = 0; x < patternSize; x += 1) {
-            const pointX = x + seed * 41;
-            const pointY = y + seed * 17;
-            const presence = shaderHash(pointX + 71.9, pointY + 13.7);
-            if (presence > amount)
-                continue;
-            const fine = shaderHash(Math.floor(pointX * 1.18), Math.floor(pointY * 1.18));
-            const clustered = shaderHash(Math.floor(pointX * 0.47) + 31.7, Math.floor(pointY * 0.47) + 31.7);
-            const value = clamp(fine * 0.8 + clustered * 0.2, 0, 1);
-            const tone = Math.min(toneCount - 1, Math.floor(value * toneCount));
-            tones[tone]?.push(`M${x} ${y}h1v1h-1z`);
-        }
-    }
-    return tones.map(tone => tone.join(""));
-}
-function shaderHash(x, y) {
-    let red = fract(x * 0.1031);
-    let green = fract(y * 0.1031);
-    let blue = fract(x * 0.1031);
-    const product = red * (green + 33.33) + green * (blue + 33.33) + blue * (red + 33.33);
-    red += product;
-    green += product;
-    blue += product;
-    return fract((red + green) * blue);
-}
-function seedFrom(value) {
-    let seed = 2166136261;
-    for (const character of value) {
-        seed ^= character.codePointAt(0) ?? 0;
-        seed = Math.imul(seed, 16777619);
-    }
-    return (seed >>> 0) % 997 + 1;
-}
-function fract(value) {
-    return value - Math.floor(value);
-}
-function clamp(value, minimum, maximum) {
-    return Math.min(maximum, Math.max(minimum, value));
-}
-const patternSize = 64;
-const toneCount = 16;