@phreshos/react-ui 0.1.25 → 0.1.26

package/dist/scroll-area.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
 import { forwardRef, useState } from "react";
-import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { useAppearance, useThemedValue } from "./ui-provider.js";
 import { colorOpacity } from "./color.js";
 import { useTransitionTiming } from "./motion-style.js";
+import { resolveDirection, useDirection } from "./direction.js";
 /** A native scrolling viewport with locally owned React UI scrollbars. */
 export const ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", children, onScroll, style, viewportRef, ...properties }, ref) {
     const appearance = useAppearance();
+    const direction = resolveDirection(properties.dir, useDirection());
     const foreground = useThemedValue(appearance.colors).foreground;
     const radius = Math.min(appearance.radius, 8);
     const vertical = axis === "vertical" || axis === "both";
     const horizontal = axis === "horizontal" || axis === "both";
-    return _jsxs(BaseScrollArea.Root, { ...properties, "data-phreshos-scroll-area": "", ref: ref, style: {
+    const root = _jsxs(BaseScrollArea.Root, { ...properties, "data-phreshos-scroll-area": "", ref: ref, style: {
             ...style,
             position: style?.position ?? "relative",
             minWidth: style?.minWidth ?? 0,
@@ -23,6 +26,7 @@ export const ScrollArea = forwardRef(function ScrollArea({ axis = "vertical", ch
                     overflowX: horizontal ? "scroll" : "hidden",
                     overflowY: vertical ? "scroll" : "hidden"
                 }, children: _jsx(BaseScrollArea.Content, { "data-phreshos-scroll-area-content": "", style: vertical && !horizontal ? { minWidth: "100%", width: "100%" } : undefined, children: children }) }), vertical && _jsx(Scrollbar, { orientation: "vertical", foreground: foreground, radius: radius }), horizontal && _jsx(Scrollbar, { orientation: "horizontal", foreground: foreground, radius: radius }), vertical && horizontal && _jsx(BaseScrollArea.Corner, { style: { background: "transparent" } })] });
+    return _jsx(BaseDirectionProvider, { direction: direction, children: root });
 });
 function Scrollbar({ orientation, foreground, radius }) {
     const [hovered, setHovered] = useState(false);

package/dist/select.d.ts

@@ -2,12 +2,13 @@ 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-options.js";
+import type { ShadowOverrides } from "./shadow-options.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 {
+export interface SelectProps extends Omit<AriaSelectProps<SelectOption>, ControlOverrides | "value" | "defaultValue" | "onChange" | "selectedKey" | "defaultSelectedKey" | "onSelectionChange" | "disabledKeys" | "selectionMode">, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
     readonly options: readonly SelectOption[];
     readonly value?: string | null;
     readonly defaultValue?: string | null;

package/dist/select.js

@@ -7,16 +7,34 @@ import { SurfaceButton } from "./control-surface.js";
 import { Surface } from "./surface.js";
 import { ScrollArea } from "./scroll-area.js";
 import { overlayMotionClass, useControlTransition, useOverlayTransition } from "./motion-style.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { resolveDirectionalPlacement } from "./overlay-placement.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) {
+export const Select = forwardRef(function Select({ label, description, errorMessage, disabled, required, invalid, options, value, defaultValue, onChange, size, color, radius, style, material, shadow, ...properties }, ref) {
     const theme = useControlTheme({ size, color, radius });
     const transition = useControlTransition();
     const overlayTransition = useOverlayTransition();
-    return _jsx(AriaSelect, { ...properties, ref: ref, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), disabledKeys: options.filter(option => option.disabled).map(option => option.value), isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(Button, { render: (native, button) => _jsx(SurfaceButton, { native: native, material: material, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
+    const direction = resolveDirection(properties.dir, useDirection());
+    const optionDependencies = [
+        theme.transition.transitionDuration,
+        theme.transition.transitionTimingFunction,
+        theme.transition.transitionProperty,
+        theme.gap,
+        theme.height,
+        theme.spacing,
+        theme.radius,
+        theme.focusColor,
+        theme.foreground,
+        theme.paints.palette.rest.background,
+        theme.paints.palette.rest.color,
+        theme.paints.palette.hover.background,
+        theme.paints.palette.hover.color
+    ];
+    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, shadow: shadow, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
                         ...controlStyle(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered, button.isFocusVisible),
                         display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
                         cursor: disabled ? "not-allowed" : "pointer", textAlign: "start"
-                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? 0.6 : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx(motion.svg, { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", initial: false, animate: { rotate: state.isOpen ? 180 : 0 }, transition: transition, style: { flexShrink: 0 }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(Popover, { className: overlayMotionClass, placement: "bottom start", offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { items: options, style: { display: "grid", gap: theme.gap, outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: option => _jsx(ListBoxItem, { id: option.value, textValue: option.label, style: item => ({
+                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? 0.6 : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx(motion.svg, { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", initial: false, animate: { rotate: state.isOpen ? 180 : 0 }, transition: transition, style: { flexShrink: 0 }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(Popover, { dir: direction, className: overlayMotionClass, placement: resolveDirectionalPlacement("bottom start", direction), offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { ...overlayTransition, width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { dir: direction, style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ScrollArea, { style: { flex: "1 1 auto", minHeight: 0 }, children: _jsx(ListBox, { items: options, dependencies: optionDependencies, shouldFocusOnHover: false, style: { display: "grid", gap: theme.gap, outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: option => _jsx(ListBoxItem, { id: option.value, textValue: option.label, style: item => ({
                                         ...theme.transition,
                                         display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
                                         minHeight: theme.height, paddingInline: Math.max(8, theme.spacing), boxSizing: "border-box",

package/dist/shadow-options.d.ts

@@ -0,0 +1,25 @@
+import { type ScaleLevel } from "./scale.js";
+/** Optional outer-shadow values expressed directly or relative to Appearance. */
+export interface ShadowOptions {
+    readonly x?: ScaleLevel | number;
+    readonly y?: ScaleLevel | number;
+    readonly blur?: ScaleLevel | number;
+    readonly spread?: ScaleLevel | number;
+    readonly opacity?: ScaleLevel | number;
+}
+/** Grouped shadow customization exposed by components built on Surface. */
+export interface ShadowOverrides {
+    /** Omission or true uses Appearance defaults; false removes the shadow. */
+    readonly shadow?: boolean | ShadowOptions;
+}
+/** Resolves shadow values from the active Appearance branch. */
+export declare function useShadowOptions(values?: ShadowOptions): {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    opacity: number;
+};
+export type ResolvedShadow = ReturnType<typeof useShadowOptions>;
+/** Serializes one resolved neutral-black outer shadow. */
+export declare function shadowStyle({ x, y, blur, spread, opacity }: ResolvedShadow): string;

package/dist/shadow-options.js

@@ -0,0 +1,25 @@
+import { appearanceLimits } from "@phreshos/core";
+import { useAppearance, useThemedValue } from "./ui-provider.js";
+import { isScaleLevel, scale } from "./scale.js";
+/** Resolves shadow values from the active Appearance branch. */
+export function useShadowOptions(values = {}) {
+    const appearance = useAppearance();
+    const defaults = useThemedValue(appearance.shadow);
+    const limits = appearanceLimits.shadow;
+    return {
+        x: resolve(values.x, defaults.x, limits.x),
+        y: resolve(values.y, defaults.y, limits.y),
+        blur: resolve(values.blur, defaults.blur, limits.blur),
+        spread: resolve(values.spread, defaults.spread, limits.spread),
+        opacity: resolve(values.opacity, defaults.opacity, limits.opacity)
+    };
+}
+/** Serializes one resolved neutral-black outer shadow. */
+export function shadowStyle({ x, y, blur, spread, opacity }) {
+    return opacity === 0 ? "none" : `${x}px ${y}px ${blur}px ${spread}px rgba(0, 0, 0, ${opacity})`;
+}
+function resolve(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));
+}

package/dist/slider.d.ts

@@ -1,7 +1,17 @@
-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"> {
+import type { HTMLAttributes } from "react";
+import type { ControlProps, FieldProps } from "./control.js";
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "className" | "color" | "defaultValue" | "onChange" | "style">, ControlProps, Pick<FieldProps, "label" | "description"> {
+    readonly value?: number;
+    readonly defaultValue?: number;
+    readonly minValue?: number;
+    readonly maxValue?: number;
+    readonly step?: number;
+    readonly orientation?: "horizontal" | "vertical";
     readonly name?: string;
+    readonly form?: string;
+    readonly formatOptions?: Intl.NumberFormatOptions;
+    readonly onChange?: (value: number) => void;
+    readonly onChangeEnd?: (value: number) => void;
 }
 /** 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

@@ -1,38 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { motion } from "motion/react";
-import { Slider as AriaSlider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from "react-aria-components";
-import { FieldLabel, fieldStyle, useControlTheme } from "./control.js";
-import { useControlTransition } from "./motion-style.js";
-import { usePreferences } from "./appearance-provider.js";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { DirectionProvider as BaseDirectionProvider } from "@base-ui/react/direction-provider";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { fieldStyle, useControlTheme } from "./control.js";
+import { resolveDirection, useDirection } from "./direction.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) {
+export const Slider = forwardRef(function Slider({ label, description, name, form, disabled, size, color, style, orientation = "horizontal", value, defaultValue, minValue = 0, maxValue = 100, step = 1, formatOptions, onChange, onChangeEnd, ...properties }, ref) {
     const theme = useControlTheme({ size, color });
+    const direction = resolveDirection(properties.dir, useDirection());
     const descriptionId = useId();
+    const input = useRef(null);
+    const initialValue = useRef(defaultValue ?? minValue);
+    const [uncontrolledValue, setUncontrolledValue] = useState(initialValue.current);
+    const [hovered, setHovered] = useState(false);
     const vertical = orientation === "vertical";
     const diameter = theme.fontSize + 6;
-    const { animations } = usePreferences();
-    const transition = useControlTransition();
     const rail = Math.max(4, Math.round(diameter / 3));
-    return _jsxs(AriaSlider, { ...properties, ref: ref, isDisabled: disabled, orientation: orientation, style: fieldStyle(theme, disabled, style), "aria-describedby": [properties["aria-describedby"], description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [_jsx(FieldLabel, { label: label }), _jsx(SliderOutput, { style: { fontVariantNumeric: "tabular-nums", opacity: 0.7 } })] }), _jsxs(SliderTrack, { style: {
-                    position: "relative", touchAction: "none",
-                    width: vertical ? theme.height : "100%", height: vertical ? 160 : theme.height
-                }, children: [_jsx("div", { "aria-hidden": "true", style: {
-                            ...theme.transition,
-                            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: {
-                            ...theme.transition,
-                            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 ? `1px solid ${theme.focusColor}` : "none", outlineOffset: 1,
-                            cursor: state.isDisabled ? "not-allowed" : state.isDragging ? "grabbing" : "grab"
-                        }), children: state => _jsx(motion.span, { "aria-hidden": "true", initial: false, animate: { scale: !animations || state.isDisabled ? 1 : state.isDragging ? 0.92 : state.isHovered ? 1.08 : 1 }, transition: transition, style: { ...theme.transition, position: "absolute", inset: 0, borderRadius: "inherit", pointerEvents: "none",
-                                background: (state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).color,
-                                border: `3px solid ${(state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).background}`,
-                                boxSizing: "border-box" } }) })] }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });
+    const describedBy = [properties["aria-describedby"], description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined;
+    const controlled = value !== undefined;
+    const resolvedValue = controlled ? value : uncontrolledValue;
+    useEffect(() => {
+        const formElement = input.current?.form;
+        if (controlled || formElement == null)
+            return;
+        const reset = () => setUncontrolledValue(initialValue.current);
+        formElement.addEventListener("reset", reset);
+        return () => formElement.removeEventListener("reset", reset);
+    }, [controlled]);
+    const root = _jsxs(BaseSlider.Root, { ...properties, ref: ref, value: resolvedValue, min: minValue, max: maxValue, step: step, name: name, form: form, disabled: disabled, orientation: orientation, format: formatOptions, onValueChange: next => {
+            if (!controlled)
+                setUncontrolledValue(next);
+            onChange?.(next);
+        }, onValueCommitted: next => onChangeEnd?.(next), style: fieldStyle(theme, disabled, style), children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [label != null && _jsx(BaseSlider.Label, { style: { fontWeight: 550 }, children: label }), _jsx(BaseSlider.Value, { style: { fontVariantNumeric: "tabular-nums", opacity: 0.7 } })] }), _jsx(BaseSlider.Control, { style: {
+                    position: "relative",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    touchAction: "none",
+                    userSelect: "none",
+                    width: vertical ? theme.height : "100%",
+                    height: vertical ? 160 : theme.height
+                }, children: _jsxs(BaseSlider.Track, { style: {
+                        position: "relative",
+                        width: vertical ? rail : "100%",
+                        height: vertical ? "100%" : rail,
+                        borderRadius: rail,
+                        background: theme.paints.neutral.rest.background
+                    }, children: [_jsx(BaseSlider.Indicator, { style: {
+                                ...theme.transition,
+                                borderRadius: rail,
+                                background: theme.paints.palette.rest.background
+                            } }), _jsx(BaseSlider.Thumb, { inputRef: input, "aria-label": properties["aria-label"], "aria-labelledby": properties["aria-labelledby"], "aria-describedby": describedBy, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: state => {
+                                const paint = state.dragging ? theme.paints.palette.pressed : hovered ? theme.paints.palette.hover : theme.paints.palette.rest;
+                                return {
+                                    ...theme.transition,
+                                    width: diameter,
+                                    height: diameter,
+                                    borderRadius: "50%",
+                                    boxSizing: "border-box",
+                                    background: paint.color,
+                                    border: `3px solid ${paint.background}`,
+                                    outline: state.focused ? `1px solid ${theme.focusColor}` : "none",
+                                    outlineOffset: 1,
+                                    cursor: state.disabled ? "not-allowed" : state.dragging ? "grabbing" : "grab",
+                                    transform: `scale(${state.dragging ? 0.92 : hovered ? 1.08 : 1})`
+                                };
+                            } })] }) }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });
+    return _jsx(BaseDirectionProvider, { direction: direction, children: root });
 });

package/dist/spacing.js

@@ -3,6 +3,6 @@ export function resolveSpacing(value, appearance) {
     if (!isScaleLevel(value))
         return value;
     if (!appearance)
-        throw new Error("Semantic spacing requires an AppearanceProvider");
+        throw new Error("Semantic spacing requires a UIProvider");
     return scale(appearance.spacing, value);
 }

package/dist/surface-edge.d.ts

@@ -1,6 +1,5 @@
 type EdgeMaterial = Readonly<{
     color: string;
-    foreground: string;
     opacity: number;
 }>;
 /** Paints the boundary owned by one Surface from the material it contains. */

package/dist/surface-edge.js

@@ -1,60 +1,57 @@
 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 { usePaintTransition } from "./motion-style.js";
+import { Fragment } from "react";
+import { useTransitionTiming } from "./motion-style.js";
 import { scale } from "./scale.js";
+const edgeLayer = {
+    position: "absolute",
+    zIndex: 1,
+    inset: 0,
+    boxSizing: "border-box",
+    borderRadius: "inherit",
+    pointerEvents: "none"
+};
+const edgeScale = 0.8;
+const outerEdgeThickness = edgeScale;
+const illuminatedEdgeThickness = 0.3;
+const illuminatedEdgeBoundary = Math.round((outerEdgeThickness + illuminatedEdgeThickness) * 100) / 100;
+const horizontalIllumination = "linear-gradient(90deg, var(--phreshos-surface-edge-light-minimum) 0%, var(--phreshos-surface-edge-light-minimum) 12%, var(--phreshos-surface-edge-light-soft) 34%, var(--phreshos-surface-edge-light-peak) 50%, var(--phreshos-surface-edge-light-soft) 66%, var(--phreshos-surface-edge-light-minimum) 88%, var(--phreshos-surface-edge-light-minimum) 100%)";
+const edgeMask = "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)";
 /** Paints the boundary owned by one Surface from the material it contains. */
 export function SurfaceEdge({ material }) {
-    const paintTransition = usePaintTransition();
+    const timing = useTransitionTiming();
     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)",
+    const opacity = Math.min(1, scale(material.opacity, "xlarge"));
+    const peak = illumination(material.color, 92);
+    return _jsxs(Fragment, { children: [_jsx("span", { "data-surface-edge-light": "", "aria-hidden": "true", style: {
+                    ...timing,
+                    ...edgeLayer,
+                    transitionProperty: "opacity",
+                    padding: illuminatedEdgeBoundary,
+                    background: horizontalIllumination,
+                    opacity,
+                    WebkitMask: edgeMask,
                     WebkitMaskComposite: "xor",
-                    mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-                    maskComposite: "exclude"
+                    mask: edgeMask,
+                    maskComposite: "exclude",
+                    "--phreshos-surface-edge-light-peak": peak,
+                    "--phreshos-surface-edge-light-soft": illumination(material.color, 56),
+                    "--phreshos-surface-edge-light-minimum": illumination(material.color, 24)
+                } }), _jsx("span", { "data-surface-edge": "", "aria-hidden": "true", style: {
+                    ...timing,
+                    ...edgeLayer,
+                    transitionProperty: "border-color, opacity",
+                    borderStyle: "solid",
+                    borderWidth: outerEdgeThickness,
+                    borderColor: "var(--phreshos-surface-edge-dark)",
+                    opacity,
+                    "--phreshos-surface-edge-dark": darkEdge(material.color)
                 } })] });
 }
-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)})`;
+function darkEdge(color) {
+    return `color-mix(in srgb, color-mix(in oklch, ${color} 72%, black) 38%, transparent)`;
+}
+function illumination(color, opacity) {
+    return `color-mix(in srgb, color-mix(in oklch, ${color} 64%, white) ${opacity}%, transparent)`;
 }

package/dist/surface.d.ts

@@ -2,8 +2,11 @@ import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, R
 import { type Color } from "./color.js";
 import { type MaterialOverrides } from "./material-options.js";
 import { type RadiusProps } from "./radius.js";
+import { type ShadowOverrides } from "./shadow-options.js";
+import type { Direction } from "./direction.js";
 export type { MaterialOptions } from "./material-options.js";
-export interface SurfaceOwnProps extends MaterialOverrides, RadiusProps {
+export type { ShadowOptions } from "./shadow-options.js";
+export interface SurfaceOwnProps extends MaterialOverrides, ShadowOverrides, RadiusProps {
     readonly color?: Color;
 }
 /**
@@ -13,6 +16,7 @@ export interface SurfaceOwnProps extends MaterialOverrides, RadiusProps {
  */
 export interface SurfaceHostProps {
     readonly children?: ReactNode;
+    readonly dir?: Direction;
     readonly style?: CSSProperties;
 }
 export type SurfaceHost = ElementType<SurfaceHostProps>;

package/dist/surface.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, forwardRef, useId } from "react";
-import { useAppearance, useThemedValue } from "./appearance-provider.js";
+import { useAppearance, useThemedValue } from "./ui-provider.js";
 import { useResolveColor } from "./color.js";
 import { useMaterialOptions } from "./material-options.js";
 import { MaterialPaint } from "./material-paint.js";
 import MotionStyle, { useVisualTransition } from "./motion-style.js";
 import { resolveRadius } from "./radius.js";
+import { shadowStyle, useShadowOptions } from "./shadow-options.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, material: options, radius, children, style, ...properties }, ref) {
+/** One material- and shadow-owning element. The host is a div unless `as` selects another element. */
+const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, material: options, shadow: shadowOptions, radius, children, style, ...properties }, ref) {
     const appearance = useAppearance();
     const transition = useVisualTransition();
     const material = useResolvedSurface(color, options);
+    const resolvedShadow = useShadowOptions(typeof shadowOptions === "object" ? shadowOptions : undefined);
+    const shadow = shadowOptions === false ? "none" : shadowStyle(resolvedShadow);
     const resolvedRadius = resolveRadius(radius ?? "medium", appearance);
     return createElement(Element, {
         ...properties,
@@ -19,20 +22,22 @@ const SurfaceRoot = forwardRef(function Surface({ as: Element = "div", color, ma
         style: {
             ...transition,
             ...style,
-            background: "transparent",
+            background: material.enabled ? "transparent" : material.color,
+            boxShadow: shadow,
             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);
+    }, material.enabled && _jsx(SurfaceLayers, { material: material }), material.enabled && _jsx(SurfaceEdge, { material: material }), children);
 });
 export const Surface = SurfaceRoot;
 function useResolvedSurface(color, options) {
     const appearance = useAppearance();
-    const material = useMaterialOptions(options);
+    const material = useMaterialOptions(typeof options === "object" ? options : undefined);
     return {
         ...material,
+        enabled: options !== false,
         color: useResolveColor(color),
         foreground: useThemedValue(appearance.colors).foreground
     };

package/dist/switch.d.ts

@@ -1,7 +1,8 @@
 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 {
+import type { ShadowOverrides } from "./shadow-options.js";
+export interface SwitchProps extends Omit<SwitchFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected">, ControlProps, FieldProps, MaterialOverrides, ShadowOverrides {
     readonly checked?: boolean;
     readonly defaultChecked?: boolean;
     readonly readOnly?: boolean;

package/dist/switch.js

@@ -3,8 +3,10 @@ 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";
+import { resolveDirection, useDirection } from "./direction.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) {
+export const Switch = forwardRef(function Switch({ label, description, errorMessage, disabled, required, invalid, readOnly, checked, defaultChecked, size, color, style, material, shadow, ...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 })] });
+    const direction = resolveDirection(properties.dir, useDirection());
+    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", direction: direction, material: material, shadow: shadow, 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

@@ -2,8 +2,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";
+import type { ShadowOverrides } from "./shadow-options.js";
 /** Shared contract for native text-entry controls. */
-export interface TextControlProps extends Omit<TextFieldProps, ControlOverrides | "isReadOnly">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+export interface TextControlProps extends Omit<TextFieldProps, ControlOverrides | "isReadOnly">, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
     readonly placeholder?: string;
     readonly readOnly?: boolean;
 }

package/dist/textarea.js

@@ -5,9 +5,9 @@ import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useC
 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) {
+export const Textarea = forwardRef(function Textarea({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, rows = 4, material, shadow, ...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 => ({
+    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, shadow: shadow, 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.d.ts

@@ -1,9 +1,12 @@
 import type { CSSProperties } from "react";
 import type { ControlTheme } from "./control.js";
-import type { MaterialOptions } from "./material-options.js";
+import type { MaterialOverrides } from "./material-options.js";
+import type { ShadowOverrides } from "./shadow-options.js";
+import type { Direction } from "./direction.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<{
+export declare function ToggleIndicator({ kind, direction, selected, indeterminate, focused, invalid, hovered, pressed, theme, material: options, shadow }: Readonly<{
     kind: "checkbox" | "radio" | "switch";
+    direction?: Direction;
     selected: boolean;
     indeterminate?: boolean;
     focused: boolean;
@@ -11,6 +14,5 @@ export declare function ToggleIndicator({ kind, selected, indeterminate, focused
     hovered?: boolean;
     pressed?: boolean;
     theme: ControlTheme;
-    material?: MaterialOptions;
-}>): import("react").JSX.Element;
+} & MaterialOverrides & ShadowOverrides>): import("react").JSX.Element;
 export declare function toggleStyle(theme: ControlTheme, disabled: boolean, readOnly: boolean): CSSProperties;

package/dist/toggle-indicator.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
-import { useLocale } from "react-aria-components";
 import { useControlTransition } from "./motion-style.js";
-import { usePreferences } from "./appearance-provider.js";
+import { usePreferences } from "./ui-provider.js";
 import { Surface } from "./surface.js";
 /** Shared paint only. Selection, focus, validation, and native input behavior belong to React Aria. */
-export function ToggleIndicator({ kind, selected, indeterminate = false, focused, invalid = false, hovered = false, pressed = false, theme, material: options }) {
+export function ToggleIndicator({ kind, direction = "ltr", selected, indeterminate = false, focused, invalid = false, hovered = false, pressed = false, theme, material: options, shadow }) {
     const { animations } = usePreferences();
     const transition = useControlTransition();
-    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;
@@ -17,7 +15,7 @@ export function ToggleIndicator({ kind, selected, indeterminate = false, focused
     const switching = kind === "switch";
     const thumbWidth = diameter - 6 + (pressed && animations ? 3 : 0);
     const travel = (diameter * 2 - thumbWidth) / 2 - 3;
-    return _jsx(Surface, { as: motion.span, material: options, color: paint.background, "aria-hidden": "true", initial: false, animate: { scale: !animations || switching ? 1 : pressed ? 0.94 : hovered ? 1.03 : 1 }, transition: transition, style: {
+    return _jsx(Surface, { as: motion.span, material: options, shadow: shadow, color: paint.background, "aria-hidden": "true", initial: false, animate: { scale: !animations || switching ? 1 : pressed ? 0.94 : hovered ? 1.03 : 1 }, transition: transition, style: {
             color: paint.color,
             ...theme.transition,
             display: "inline-grid",

package/dist/tooltip.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps as AriaTooltipTriggerProps } from "react-aria-components";
+import { type ButtonProps } from "./button.js";
+import { type SurfaceOwnProps } from "./surface.js";
+export type TooltipRootProps = AriaTooltipTriggerProps;
+export declare function TooltipRoot(properties: TooltipRootProps): import("react").JSX.Element;
+export type TooltipTriggerProps = ButtonProps;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface TooltipContentProps extends Omit<AriaTooltipProps, "children" | "className" | "color" | "style">, SurfaceOwnProps {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A description shown from the focus and hover state of its trigger. */
+export declare const Tooltip: typeof TooltipRoot & {
+    Root: typeof TooltipRoot;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type TooltipProps = ComponentProps<typeof TooltipRoot>;