@phreshos/react-ui 0.1.17 → 0.1.18

package/README.md

@@ -54,9 +54,9 @@ import { AppearanceProvider, Button } from "@phreshos/react-ui"
 ```
 
 `Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, and `Radio`
-host the shared Material while retaining their native behavior. Color and material
+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. Material and neutral
+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.
 Hover and press derive shades of that fill. The resting fill chooses the
@@ -72,40 +72,34 @@ spacing and radius follow Appearance. `disabled` prevents activation and focus;
 <Button color="danger:soft" size="small">Delete</Button>
 ```
 
-`Material` is the raw visual substance: paint, opacity, frost, refraction, and
-grain. It fills the geometry of its nearest positioned container,
-inherits that container's radius, and adds no content, layout, interaction, or
-shadow. The container must establish its own geometry and isolation.
-
-```tsx
-<div style={{ position: "relative", isolation: "isolate", width: 240, height: 120, borderRadius: 18 }}>
-  <Material color="background:soft" material={{ opacity: 0.4 }} />
-</div>
-```
-
-`Surface` is the standard geometric host for a `Material`. It establishes the
-required positioning and isolation on a `div`, resolves radius, renders Material,
-and then renders its content. It never creates or consumes a shadow. Shadow remains
-an independent visual concern. `radius` accepts a size level, a number in pixels,
-or a CSS radius and defaults to `medium`.
+`Surface` is the material-owning element. It renders a `div` by default, while
+`as` selects another React element and preserves that element's native properties
+and ref type. Surface owns its paint, opacity, frost, refraction, grain, edge,
+radius, and clipping requirements. It never creates or consumes a shadow; shadow
+remains an independent visual concern. `radius` accepts a size level, a number in
+pixels, or a CSS radius and defaults to `medium`.
 
 ```tsx
 <Surface color="background:soft" radius="large">Derived values</Surface>
-<Surface color="#345678" radius={18}>Direct values</Surface>
+<Surface as="button" type="button" color="#345678" radius={18}>Action</Surface>
+<Surface as={Grid} columns={3} gap="medium">Grid content</Surface>
 ```
 
-`MaterialOptions` defines `opacity`, `backdrop`, `grain`, `grainAmount`,
-`distortion`, and `saturation`. It contains no color. `MaterialProps` keeps
-`color` beside `material?: MaterialOptions`, so paint selection never becomes a
-physical-material setting. Omitted material values follow `appearance.material`.
-Effect options accept a scale level or a direct number; opacity affects material
-only, never the host's children.
-
-Radius belongs to host geometry, while Surface's border belongs to its geometric
-boundary. Material may determine the border treatment, but it neither owns nor
-renders that border.
+`as` can also select an outside React component. A valid Surface host preserves
+the `style` and `children` it receives on one host element and forwards its ref
+to that same element. This lets layout components carry the material without a
+wrapper. The host retains ownership of its own behavior and layout properties;
+Surface retains ownership of material, edge, radius, and required geometry.
 
-Material-bearing controls expose the same separate `color` and `material` props.
+`MaterialOptions` defines `opacity`, `backdrop`, `grain`, `grainAmount`,
+`distortion`, and `saturation`. Surface accepts these properties directly because
+it is the material-owning element; it does not accept a nested `material` prop.
+Color remains a separate Surface property. Omitted material values follow
+`appearance.material`. Effect options accept a scale level or a direct number;
+opacity affects Surface paint only, never its content. The material edge is part
+of the same Surface rather than a second public entity.
+
+Surface-based controls expose the same separate `color` and `material` props.
 For text fields and Select, `material` targets the field or trigger; for Checkbox,
 Switch, and Radio, it targets the indicator. RadioGroup supplies material defaults
 to its options, and a Radio can override them.
@@ -146,7 +140,7 @@ Server SDK.
 
 Fields distinguish hover, pointer focus, keyboard focus, and invalid state.
 Shared CSS transitions use a fixed 120ms ease-out timing for colors and corner
-radius. Material fill and opacity transition on the painted layers, not on the
+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
 these changes immediate. No Appearance configuration is added for motion yet.

package/dist/button.d.ts

@@ -3,7 +3,7 @@ import type { ButtonProps as AriaButtonProps } from "react-aria-components";
 import type { ScaleLevel } from "./scale.js";
 import type { RadiusProps } from "./radius.js";
 import { type ControlColor } from "./control.js";
-import type { MaterialOverrides } from "./material.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. */
 export type ButtonColor = ControlColor;

package/dist/button.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton } from "react-aria-components";
 import { controlFontSizes, useControlTheme } from "./control.js";
-import { MaterialButton } from "./control-material.js";
+import { SurfaceButton } from "./control-surface.js";
 import { visualTransition } from "./motion-style.js";
 /** An Appearance-aware action with normalized pointer and keyboard behavior. */
 export const Button = forwardRef(function Button({ children, color, disabled = false, pending = false, onPress, radius = "medium", size = "medium", style, material, type = "button", ...properties }, ref) {
     const theme = useControlTheme({ color, radius, size });
-    return _jsx(AriaButton, { ...properties, ref: ref, type: type, isDisabled: disabled, isPending: pending, onPress: onPress, render: (native, state) => _jsx(MaterialButton, { native: native, material: material, paint: buttonPaint(theme, !disabled && !pending, state.isHovered, state.isPressed) }), style: ({ isFocusVisible, isHovered, isPressed }) => buttonStyle({
+    return _jsx(AriaButton, { ...properties, ref: ref, type: type, isDisabled: disabled, isPending: pending, onPress: onPress, render: (native, state) => _jsx(SurfaceButton, { native: native, material: material, paint: buttonPaint(theme, !disabled && !pending, state.isHovered, state.isPressed) }), style: ({ isFocusVisible, isHovered, isPressed }) => buttonStyle({
             theme,
             disabled,
             isFocusVisible,

package/dist/checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxFieldProps } from "react-aria-components";
 import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material.js";
+import type { MaterialOverrides } from "./material-options.js";
 export interface CheckboxProps extends Omit<CheckboxFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected" | "isIndeterminate">, ControlProps, FieldProps, MaterialOverrides {
     readonly checked?: boolean;
     readonly defaultChecked?: boolean;

package/dist/{control-material.d.ts → control-surface.d.ts}

@@ -4,14 +4,14 @@ type Paint = Readonly<{
     background: string;
     color: string;
 }>;
-/** A native button hosts Material without changing its native contract. */
-export declare function MaterialButton({ native, paint, material: options }: {
+/** A native button uses Surface without changing its native contract. */
+export declare function SurfaceButton({ native, paint, material: options }: {
     readonly native: ComponentPropsWithRef<"button">;
     readonly paint: Paint;
     readonly material?: MaterialOptions;
 }): import("react").JSX.Element;
 /** Void text controls use a material host while retaining native sizing. */
-export declare function MaterialField({ paint, radius, children, material: options }: Readonly<{
+export declare function SurfaceField({ paint, radius, children, material: options }: Readonly<{
     paint: Paint;
     radius: CSSProperties["borderRadius"];
     children: ReactNode;

package/dist/control-surface.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Surface } from "./surface.js";
+/** A native button uses Surface without changing its native contract. */
+export function SurfaceButton({ native, paint, material: options }) {
+    const { ref, style, children, ...properties } = native;
+    return _jsx(Surface, { ...properties, ...options, as: "button", color: paint.background, ref: ref, style: { ...style, color: paint.color }, children: children });
+}
+/** Void text controls use a material host while retaining native sizing. */
+export function SurfaceField({ paint, radius, children, material: options }) {
+    return _jsx(Surface, { ...options, as: "span", color: paint.background, radius: radius, style: { color: paint.color, display: "grid", minWidth: 0 }, children: children });
+}

package/dist/input.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Input as AriaInput, TextField } from "react-aria-components";
 import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
-import { MaterialField } from "./control-material.js";
+import { SurfaceField } from "./control-surface.js";
 import FieldStyle, { textControlClass } from "./field-style.js";
 /** A labeled single-line text control. onChange receives the string value. */
 export const Input = forwardRef(function Input({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, 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(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(MaterialField, { material: material, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("input", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+    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(AriaInput, { ref: ref, placeholder: placeholder, className: textControlClass, render: (native, state) => _jsx(SurfaceField, { material: material, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("input", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
 });

package/dist/main.d.ts

@@ -8,8 +8,7 @@ export { defaultAppearance } from "@phreshos/core";
 export { AppearanceProvider, useAppearance, useResolveTheme, useTheme, type AppearanceProviderProps } from "./appearance-provider.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Material, type MaterialOptions, type MaterialOverrides, type MaterialProps } from "./material.js";
-export { Surface, type SurfaceProps } from "./surface.js";
+export { Surface, type MaterialOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
 export { defaultColor, type Color, type ColorLevel, type ColorScale } from "./color.js";
 export { Panel, type PanelProps } from "./panel.js";
 export { Button, type ButtonColor, type ButtonProps } from "./button.js";

package/dist/main.js

@@ -8,7 +8,6 @@ export { defaultAppearance } from "@phreshos/core";
 export { AppearanceProvider, useAppearance, useResolveTheme, useTheme } from "./appearance-provider.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
-export { Material } from "./material.js";
 export { Surface } from "./surface.js";
 export { defaultColor } from "./color.js";
 export { Panel } from "./panel.js";

package/dist/material-options.d.ts

@@ -8,7 +8,11 @@ export interface MaterialOptions {
     readonly distortion?: ScaleLevel | number;
     readonly saturation?: ScaleLevel | number;
 }
-/** Resolves Material values from the current Appearance without knowing any host geometry. */
+/** Grouped material customization exposed by components built on Surface. */
+export interface MaterialOverrides {
+    readonly material?: MaterialOptions;
+}
+/** Resolves material values from the current Appearance without knowing any host geometry. */
 export declare function useMaterialOptions(values?: MaterialOptions): {
     opacity: number;
     backdrop: number;

package/dist/material-options.js

@@ -1,7 +1,7 @@
 import { appearanceLimits } from "@phreshos/core";
 import { useAppearance, useResolveTheme } from "./appearance-provider.js";
 import { isScaleLevel, scale, scaleMultiplier } from "./scale.js";
-/** Resolves Material values from the current Appearance without knowing any host geometry. */
+/** Resolves material values from the current Appearance without knowing any host geometry. */
 export function useMaterialOptions(values = {}) {
     const appearance = useAppearance();
     const defaults = useResolveTheme(appearance.material);

package/dist/material-paint.d.ts

@@ -6,6 +6,6 @@ interface MaterialPaintProps {
     readonly identity: string;
     readonly opacity: number;
 }
-/** The fill, refraction definition, and grain of one Material. */
+/** The fill, refraction definition, and grain of one Surface. */
 export declare function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity }: MaterialPaintProps): import("react").JSX.Element | null;
 export {};

package/dist/material-paint.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { paintTransition } from "./motion-style.js";
-/** The fill, refraction definition, and grain of one Material. */
+/** The fill, refraction definition, and grain of one Surface. */
 export function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity }) {
     const seed = useMemo(() => seedFrom(identity), [identity]);
     const hasPaint = opacity > 0;

package/dist/radio.d.ts

@@ -1,7 +1,7 @@
 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";
+import type { MaterialOverrides } from "./material-options.js";
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, ControlOverrides | "isReadOnly">, ControlProps, FieldProps, MaterialOverrides {
     readonly children: ReactNode;
     readonly readOnly?: boolean;

package/dist/select.d.ts

@@ -1,7 +1,7 @@
 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";
+import type { MaterialOverrides } from "./material-options.js";
 export interface SelectOption {
     readonly value: string;
     readonly label: string;

package/dist/select.js

@@ -3,14 +3,14 @@ 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 { SurfaceButton } from "./control-surface.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 => ({
+    return _jsx(AriaSelect, { ...properties, ref: ref, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), disabledKeys: options.filter(option => option.disabled).map(option => option.value), isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(Button, { render: (native, button) => _jsx(SurfaceButton, { native: native, material: material, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
                         ...controlStyle(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered, button.isFocusVisible),
                         display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
                         cursor: disabled ? "not-allowed" : "pointer", textAlign: "start"

package/dist/surface-edge.d.ts

@@ -1,5 +1,8 @@
-import type { ResolvedMaterial } from "./material.js";
-type EdgeMaterial = Pick<ResolvedMaterial, "color" | "foreground" | "opacity">;
+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;

package/dist/surface.d.ts

@@ -1,7 +1,23 @@
-import type { ComponentPropsWithRef } from "react";
-import { type MaterialProps } from "./material.js";
+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";
-/** A div that hosts one Material and owns its geometry. */
-export interface SurfaceProps extends Omit<ComponentPropsWithRef<"div">, "color">, MaterialProps, RadiusProps {
+export type { MaterialOptions } from "./material-options.js";
+export interface SurfaceOwnProps extends MaterialOptions, RadiusProps {
+    readonly color?: Color;
 }
-export declare const Surface: import("react").ForwardRefExoticComponent<Omit<SurfaceProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * 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,21 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useAppearance } from "./appearance-provider.js";
-import { MaterialLayer, useResolvedMaterial } from "./material.js";
-import { visualTransition } from "./motion-style.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";
-export const Surface = forwardRef(function Surface({ color, material: options, radius, children, style, ...properties }, ref) {
+/** 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 = useResolvedMaterial({ color, material: options });
+    const material = useResolvedSurface(color, { opacity, backdrop, grain, grainAmount, distortion, saturation });
     const resolvedRadius = resolveRadius(radius ?? "medium", appearance);
-    return _jsxs("div", { ...properties, ref: ref, style: {
+    return createElement(Element, {
+        ...properties,
+        ref,
+        style: {
             ...visualTransition,
-            background: "transparent",
-            color: material.foreground,
             ...style,
+            background: "transparent",
+            color: style?.color ?? material.foreground,
             borderRadius: radius === undefined ? style?.borderRadius ?? resolvedRadius : resolvedRadius,
             position: style?.position ?? "relative",
             isolation: "isolate"
-        }, children: [_jsx(MaterialLayer, { material: material }), _jsx(SurfaceEdge, { material: material }), children] });
+        }
+    }, _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"
+};
+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("span", { "data-material-backdrop": name, "aria-hidden": "true", style: {
+            ...layerStyle,
+            zIndex,
+            backdropFilter: filter,
+            WebkitBackdropFilter: filter
+        } });
+}

package/dist/switch.d.ts

@@ -1,6 +1,6 @@
 import type { SwitchFieldProps } from "react-aria-components";
 import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material.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;

package/dist/text-control.d.ts

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

package/dist/textarea.js

@@ -2,12 +2,12 @@ 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 { 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(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 => ({
+    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,

package/dist/toggle-indicator.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion, useReducedMotion } from "motion/react";
 import { useLocale } from "react-aria-components";
-import { MaterialLayer, useResolvedMaterial } from "./material.js";
-import { SurfaceEdge } from "./surface-edge.js";
 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();
@@ -16,11 +15,9 @@ export function ToggleIndicator({ kind, selected, indeterminate = false, focused
     const switching = kind === "switch";
     const thumbWidth = diameter - 6 + (pressed && !reduced ? 3 : 0);
     const travel = (diameter * 2 - thumbWidth) / 2 - 3;
-    const material = useResolvedMaterial({ color: paint.background, material: options });
-    return _jsxs(motion.span, { "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: {
+    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,
-            background: "transparent",
             display: "inline-grid",
             placeItems: "center",
             position: "relative",
@@ -32,12 +29,12 @@ export function ToggleIndicator({ kind, selected, indeterminate = false, focused
             border: "none",
             outline: focused ? `2px solid ${theme.foreground}` : "none",
             outlineOffset: 2,
-        }, children: [_jsx(MaterialLayer, { material: material }), _jsx(SurfaceEdge, { material: material }), 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 } })] }) })] });
+        }, 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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,

package/dist/control-material.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MaterialLayer, useResolvedMaterial } from "./material.js";
-import { SurfaceEdge } from "./surface-edge.js";
-/** A native button hosts Material without changing its native contract. */
-export function MaterialButton({ native, paint, material: options }) {
-    const { ref, style, children, ...properties } = native;
-    const material = useResolvedMaterial({ color: paint.background, material: options });
-    return _jsxs("button", { ...properties, ref: ref, style: { ...style, background: "transparent", color: paint.color, position: style?.position ?? "relative", isolation: "isolate" }, children: [_jsx(MaterialLayer, { material: material }), _jsx(SurfaceEdge, { material: material }), children] });
-}
-/** Void text controls use a material host while retaining native sizing. */
-export function MaterialField({ paint, radius, children, material: options }) {
-    const material = useResolvedMaterial({ color: paint.background, material: options });
-    return _jsxs("span", { style: { color: paint.color, display: "grid", minWidth: 0, borderRadius: radius, position: "relative", isolation: "isolate" }, children: [_jsx(MaterialLayer, { material: material }), _jsx(SurfaceEdge, { material: material }), children] });
-}

package/dist/material.d.ts

@@ -1,27 +0,0 @@
-import { type MaterialOptions } from "./material-options.js";
-import { type Color } from "./color.js";
-export type { MaterialOptions } from "./material-options.js";
-/** Visual substance without host layout, content, interaction, or shadow. */
-export interface MaterialProps {
-    readonly color?: Color;
-    readonly material?: MaterialOptions;
-}
-export interface MaterialOverrides {
-    readonly material?: MaterialOptions;
-}
-/** Fill the geometry of the nearest positioned host with the resolved material. */
-export declare function Material(options?: MaterialProps): import("react").JSX.Element;
-export declare function useResolvedMaterial({ color, material: options }?: MaterialProps): {
-    color: string;
-    foreground: string;
-    opacity: number;
-    backdrop: number;
-    grain: number;
-    grainAmount: number;
-    distortion: number;
-    saturation: number;
-};
-export type ResolvedMaterial = ReturnType<typeof useResolvedMaterial>;
-export declare function MaterialLayer({ material }: Readonly<{
-    material: ResolvedMaterial;
-}>): import("react").JSX.Element;

package/dist/material.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { useMaterialOptions } from "./material-options.js";
-import { useAppearance, useResolveTheme } from "./appearance-provider.js";
-import { useResolveColor } from "./color.js";
-import { MaterialPaint } from "./material-paint.js";
-import MotionStyle from "./motion-style.js";
-const layerStyle = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "inherit",
-    pointerEvents: "none"
-};
-/** Fill the geometry of the nearest positioned host with the resolved material. */
-export function Material(options = {}) {
-    const material = useResolvedMaterial(options);
-    return _jsx(MaterialLayer, { material: material });
-}
-export function useResolvedMaterial({ color, material: options } = {}) {
-    const appearance = useAppearance();
-    const material = useMaterialOptions(options);
-    return {
-        ...material,
-        color: useResolveColor(color),
-        foreground: useResolveTheme(appearance.colors.foreground)
-    };
-}
-export function MaterialLayer({ 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("span", { "data-material-backdrop": name, "aria-hidden": "true", style: {
-            ...layerStyle,
-            zIndex,
-            backdropFilter: filter,
-            WebkitBackdropFilter: filter
-        } });
-}