@phreshos/react-ui 0.1.15 → 0.1.17

package/dist/motion-style.d.ts

@@ -0,0 +1,21 @@
+/** The same fixed timing for Motion-driven control movements. */
+export declare const controlTransition: {
+    readonly type: "tween";
+    readonly duration: 0.12;
+    readonly ease: "easeOut";
+};
+/** Host opacity and filters are excluded: either can change backdrop sampling. */
+export declare const visualTransition: {
+    transitionProperty: "background-color, color, border-color, border-radius";
+    transitionDuration: "var(--phreshos-ui-motion-duration, 120ms)";
+    transitionTimingFunction: "ease-out";
+};
+/** Radius is inherited from the host; only the painted values transition here. */
+export declare const paintTransition: {
+    transitionProperty: "fill, stroke, opacity";
+    transitionDuration: "var(--phreshos-ui-motion-duration, 120ms)";
+    transitionTimingFunction: "ease-out";
+};
+export declare const overlayMotionClass = "phreshos-ui-overlay";
+/** React hoists and deduplicates this stylesheet, including nested providers and portals. */
+export default function MotionStyle(): import("react").JSX.Element;

package/dist/motion-style.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const timing = {
+    transitionDuration: "var(--phreshos-ui-motion-duration, 120ms)",
+    transitionTimingFunction: "ease-out"
+};
+/** The same fixed timing for Motion-driven control movements. */
+export const controlTransition = { type: "tween", duration: 0.12, ease: "easeOut" };
+/** Host opacity and filters are excluded: either can change backdrop sampling. */
+export const visualTransition = {
+    ...timing,
+    transitionProperty: "background-color, color, border-color, border-radius"
+};
+/** Radius is inherited from the host; only the painted values transition here. */
+export const paintTransition = {
+    ...timing,
+    transitionProperty: "fill, stroke, opacity"
+};
+export const overlayMotionClass = "phreshos-ui-overlay";
+const stylesheet = `
+:root { --phreshos-ui-motion-duration: 120ms; }
+
+.phreshos-ui-overlay { --phreshos-ui-overlay-x: 0px; --phreshos-ui-overlay-y: -4px; }
+.phreshos-ui-overlay[data-placement="top"] { --phreshos-ui-overlay-y: 4px; }
+.phreshos-ui-overlay[data-placement="left"] { --phreshos-ui-overlay-x: 4px; --phreshos-ui-overlay-y: 0px; }
+.phreshos-ui-overlay[data-placement="right"] { --phreshos-ui-overlay-x: -4px; --phreshos-ui-overlay-y: 0px; }
+.phreshos-ui-overlay[data-entering] {
+  animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration, 120ms) ease-out both;
+}
+.phreshos-ui-overlay[data-exiting] {
+  animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration, 120ms) ease-out reverse both;
+  pointer-events: none;
+}
+@keyframes phreshos-ui-overlay-enter {
+  from { opacity: 0; translate: var(--phreshos-ui-overlay-x) var(--phreshos-ui-overlay-y); }
+  to { opacity: 1; translate: 0 0; }
+}
+@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 nested providers and portals. */
+export default function MotionStyle() {
+    return _jsx("style", { href: "phreshos-react-ui-motion", precedence: "phreshos", children: stylesheet });
+}

package/dist/panel.d.ts

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

package/dist/panel.js

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

package/dist/radio.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { RadioGroupProps as AriaRadioGroupProps, RadioFieldProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { MaterialOverrides } from "./material.js";
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, ControlOverrides | "isReadOnly">, ControlProps, FieldProps, MaterialOverrides {
+    readonly children: ReactNode;
+    readonly readOnly?: boolean;
+}
+export interface RadioProps extends Omit<RadioFieldProps, ControlOverrides>, ControlProps, Pick<FieldProps, "label" | "description">, MaterialOverrides {
+}
+/** One string value selected from its Radio children, with native arrow-key navigation. */
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** An option in a RadioGroup. Selection and validation belong to the group. */
+export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/radio.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { RadioGroup as AriaRadioGroup, RadioField, RadioButton, Text } from "react-aria-components";
+import { FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
+const RadioStyle = createContext({});
+/** One string value selected from its Radio children, with native arrow-key navigation. */
+export const RadioGroup = forwardRef(function RadioGroup({ label, description, errorMessage, children, disabled, readOnly, required, invalid, size, color, style, material, orientation = "vertical", ...properties }, ref) {
+    const theme = useControlTheme({ size, color });
+    return _jsxs(AriaRadioGroup, { ...properties, ref: ref, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, orientation: orientation, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldLabel, { label: label }), _jsx(RadioStyle.Provider, { value: { size, color, disabled, material }, children: _jsx("div", { style: { display: "flex", flexDirection: orientation === "vertical" ? "column" : "row", gap: theme.gap, flexWrap: "wrap" }, children: children }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+});
+/** An option in a RadioGroup. Selection and validation belong to the group. */
+export const Radio = forwardRef(function Radio({ label, description, disabled, size, color, style, material, ...properties }, ref) {
+    const inherited = useContext(RadioStyle);
+    const theme = useControlTheme({ size: size ?? inherited.size, color: color ?? inherited.color });
+    return _jsxs(RadioField, { ...properties, ref: ref, isDisabled: disabled, style: state => fieldStyle(theme, state.isDisabled && !inherited.disabled, style), children: [_jsx(RadioButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "radio", material: material ?? inherited.material, theme: theme, selected: state.isSelected, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });
+});

package/dist/select.d.ts

@@ -0,0 +1,17 @@
+import type { SelectProps as AriaSelectProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { RadiusProps } from "./radius.js";
+import type { MaterialOverrides } from "./material.js";
+export interface SelectOption {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+export interface SelectProps extends Omit<AriaSelectProps<SelectOption>, ControlOverrides | "value" | "defaultValue" | "onChange" | "selectedKey" | "defaultSelectedKey" | "onSelectionChange" | "disabledKeys" | "selectionMode">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    readonly options: readonly SelectOption[];
+    readonly value?: string | null;
+    readonly defaultValue?: string | null;
+    readonly onChange?: (value: string | null) => void;
+}
+/** Single selection from string-valued options; keyboard navigation and typeahead stay native to React Aria. */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/select.js

@@ -0,0 +1,28 @@
+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 { Select as AriaSelect, Button, SelectValue, Popover, ListBox, ListBoxItem } from "react-aria-components";
+import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { MaterialButton } from "./control-material.js";
+import { Surface } from "./surface.js";
+import { controlTransition, overlayMotionClass, visualTransition } 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();
+    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(MaterialButton, { 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: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, 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: { 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 => ({
+                                    ...visualTransition,
+                                    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.d.ts

@@ -0,0 +1,7 @@
+import type { SliderProps as AriaSliderProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+export interface SliderProps extends Omit<AriaSliderProps<number>, ControlOverrides>, ControlProps, Pick<FieldProps, "label" | "description"> {
+    readonly name?: string;
+}
+/** One numeric value with pointer, touch, keyboard, and form support. */
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/slider.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { Slider as AriaSlider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from "react-aria-components";
+import { FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { controlTransition, visualTransition } from "./motion-style.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 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",
+                    width: vertical ? theme.height : "100%", height: vertical ? 160 : theme.height
+                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                            ...visualTransition,
+                            position: "absolute", borderRadius: rail,
+                            ...(vertical ? { width: rail, height: "100%", left: "50%", transform: "translateX(-50%)" } : { height: rail, width: "100%", top: "50%", transform: "translateY(-50%)" }),
+                            background: theme.paints.neutral.rest.background
+                        } }), _jsx(SliderFill, { style: {
+                            ...visualTransition,
+                            position: "absolute", background: theme.paints.palette.rest.background, borderRadius: rail,
+                            ...(vertical ? { width: rail, left: "50%", transform: "translateX(-50%)" } : { height: rail, top: "50%", transform: "translateY(-50%)" })
+                        } }), _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,
+                            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: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: { ...visualTransition, 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/surface-edge.d.ts

@@ -0,0 +1,7 @@
+import type { ResolvedMaterial } from "./material.js";
+type EdgeMaterial = Pick<ResolvedMaterial, "color" | "foreground" | "opacity">;
+/** 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,7 @@
-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 } from "react";
+import { type MaterialProps } from "./material.js";
+import { type RadiusProps } from "./radius.js";
+/** A div that hosts one Material and owns its geometry. */
+export interface SurfaceProps extends Omit<ComponentPropsWithRef<"div">, "color">, MaterialProps, RadiusProps {
+}
+export declare const Surface: import("react").ForwardRefExoticComponent<Omit<SurfaceProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/surface.js

@@ -1,101 +1,21 @@
 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 { useAppearance, useResolveTheme } from "./appearance-provider.js";
-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) {
+import { forwardRef } from "react";
+import { useAppearance } from "./appearance-provider.js";
+import { MaterialLayer, useResolvedMaterial } from "./material.js";
+import { visualTransition } from "./motion-style.js";
+import { resolveRadius } from "./radius.js";
+import { SurfaceEdge } from "./surface-edge.js";
+export const Surface = forwardRef(function Surface({ color, material: options, radius, children, style, ...properties }, ref) {
     const appearance = useAppearance();
-    const background = useResolveTheme(appearance.background);
-    const foreground = useResolveTheme(appearance.foreground);
-    const radius = useResolveTheme(appearance.radius);
-    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, ...resolved.material }), children] });
+    const material = useResolvedMaterial({ color, material: options });
+    const resolvedRadius = resolveRadius(radius ?? "medium", appearance);
+    return _jsxs("div", { ...properties, ref: ref, style: {
+            ...visualTransition,
+            background: "transparent",
+            color: material.foreground,
+            ...style,
+            borderRadius: radius === undefined ? style?.borderRadius ?? resolvedRadius : resolvedRadius,
+            position: style?.position ?? "relative",
+            isolation: "isolate"
+        }, children: [_jsx(MaterialLayer, { material: material }), _jsx(SurfaceEdge, { material: material }), children] });
 });
-/** Keeps refraction and native frost in independent compositor passes. */
-function BackdropLayer({ filter, name, zIndex }) {
-    return _jsx("div", { "data-surface-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.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.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 { MaterialField } from "./control-material.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(MaterialField, { 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;