@phreshos/react-ui 0.1.35 → 0.1.37

package/dist/material-paint.js

@@ -1,119 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-/** The fill, refraction definition, and grain of one Surface. */
-export function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity, transition }) {
-    const grainSeed = useMemo(() => grainSeeds[seedFrom(identity) % grainSeeds.length] ?? grainSeeds[0], [identity]);
-    const hasPaint = opacity > 0;
-    const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
-    const hasDistortion = distortion > 0;
-    const grainResource = useMemo(() => hasGrain ? grainImage(grainSeed, grainAmount) : null, [grainSeed, grainAmount, hasGrain]);
-    if (!hasPaint && !hasDistortion)
-        return null;
-    return _jsxs("span", { "data-material-paint": "", "aria-hidden": "true", style: {
-            position: "absolute",
-            zIndex: -1,
-            inset: 0,
-            display: "block",
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-            borderRadius: "inherit",
-            pointerEvents: "none"
-        }, children: [hasDistortion && _jsx("svg", { width: "0", height: "0", focusable: "false", style: { position: "absolute" }, children: _jsx("defs", { children: _jsx(DistortionFilter, { distortion: distortion, identity: identity }) }) }), hasPaint && _jsx("span", { "data-material-fill": "", "data-material-base": "", style: {
-                    position: "absolute",
-                    inset: 0,
-                    borderRadius: "inherit",
-                    background: color,
-                    opacity,
-                    ...transition,
-                    transitionProperty: "background-color, opacity"
-                }, children: hasGrain && _jsx("span", { "data-material-grain": "", style: {
-                        position: "absolute",
-                        inset: 0,
-                        borderRadius: "inherit",
-                        backgroundImage: grainResource ?? undefined,
-                        backgroundRepeat: "repeat",
-                        backgroundSize: `${patternSize}px ${patternSize}px`,
-                        opacity: grain,
-                        ...transition,
-                        transitionProperty: "opacity"
-                    } }) })] });
-}
-function DistortionFilter({ distortion, identity }) {
-    return _jsxs("filter", { id: `${identity}-distortion`, "data-material-distortion": "", x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [_jsx("feTurbulence", { "data-material-distortion-noise": "", "data-material-distortion-field": "organic", type: "fractalNoise", baseFrequency: "0.008 0.008", numOctaves: 2, seed: 92, result: `${identity}-organic-noise` }), _jsx("feGaussianBlur", { in: `${identity}-organic-noise`, stdDeviation: 2, result: `${identity}-organic-noise-blurred` }), _jsx("feDisplacementMap", { "data-material-distortion-stage": "organic", in: "SourceGraphic", in2: `${identity}-organic-noise-blurred`, scale: distortion, xChannelSelector: "R", yChannelSelector: "G" })] });
-}
-function grainImage(seed, amount) {
-    const key = `${seed}:${amount}`;
-    const cached = grainResources.get(key);
-    if (cached !== undefined) {
-        grainResources.delete(key);
-        grainResources.set(key, cached);
-        return cached;
-    }
-    const paths = grainPaths(seed, amount)
-        .map((path, tone) => path
-        ? `<path d="${path}" fill="rgb(${toneChannel(tone)} ${toneChannel(tone)} ${toneChannel(tone)})"/>`
-        : "")
-        .join("");
-    const resource = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${patternSize}" height="${patternSize}" viewBox="0 0 ${patternSize} ${patternSize}">${paths}</svg>`)}")`;
-    // Preserve the exact texture while avoiding the same expensive SVG generation
-    // for every Surface. The bound prevents live grain controls from growing it forever.
-    if (grainResources.size >= grainResourceLimit) {
-        const oldest = grainResources.keys().next().value;
-        if (oldest !== undefined)
-            grainResources.delete(oldest);
-    }
-    grainResources.set(key, resource);
-    return resource;
-}
-/** Preserve the original contract: amount is the monotonic density of visible grain pixels. */
-function grainPaths(seed, amount) {
-    const tones = Array.from({ length: toneCount }, () => []);
-    for (let y = 0; y < patternSize; y += 1) {
-        for (let x = 0; x < patternSize; x += 1) {
-            const pointX = x + seed * 41;
-            const pointY = y + seed * 17;
-            const presence = shaderHash(pointX + 71.9, pointY + 13.7);
-            if (presence > amount)
-                continue;
-            const fine = shaderHash(Math.floor(pointX * 1.18), Math.floor(pointY * 1.18));
-            const clustered = shaderHash(Math.floor(pointX * 0.47) + 31.7, Math.floor(pointY * 0.47) + 31.7);
-            const value = clamp(fine * 0.8 + clustered * 0.2, 0, 1);
-            const tone = Math.min(toneCount - 1, Math.floor(value * toneCount));
-            tones[tone]?.push(`M${x} ${y}h1v1h-1z`);
-        }
-    }
-    return tones.map(tone => tone.join(""));
-}
-function toneChannel(tone) {
-    return Math.round(tone / (toneCount - 1) * 255);
-}
-function shaderHash(x, y) {
-    let red = fract(x * 0.1031);
-    let green = fract(y * 0.1031);
-    let blue = fract(x * 0.1031);
-    const product = red * (green + 33.33) + green * (blue + 33.33) + blue * (red + 33.33);
-    red += product;
-    green += product;
-    blue += product;
-    return fract((red + green) * blue);
-}
-function seedFrom(value) {
-    let seed = 2166136261;
-    for (const character of value) {
-        seed ^= character.codePointAt(0) ?? 0;
-        seed = Math.imul(seed, 16777619);
-    }
-    return (seed >>> 0) % 997 + 1;
-}
-function fract(value) {
-    return value - Math.floor(value);
-}
-function clamp(value, minimum, maximum) {
-    return Math.min(maximum, Math.max(minimum, value));
-}
-const patternSize = 64;
-const toneCount = 16;
-const grainSeeds = [19, 47, 83, 131];
-const grainResourceLimit = 64;
-const grainResources = new Map();

package/dist/motion-style.d.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from "react";
-import type { Transition } from "motion/react";
-import type { AppearanceTransaction } from "./appearance.js";
-export declare function controlTransition(transaction: AppearanceTransaction, animations: boolean): Transition;
-/** Per-overlay variables consumed by the shared entrance keyframes. */
-export declare function overlayTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-export declare const overlayMotionClass = "phreshos-ui-overlay";
-export declare const backdropMotionClass = "phreshos-ui-backdrop";
-export declare function transitionTiming(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-export declare function visualTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-export declare function paintTransition(transaction: AppearanceTransaction, animations: boolean): CSSProperties;
-/** React hoists and deduplicates this stylesheet, including portals. */
-export default function MotionStyle(): import("react").JSX.Element;

package/dist/motion-style.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const visualProperties = "background-color, color, border-color, border-radius, box-shadow";
-const paintProperties = "fill, stroke, opacity";
-export function controlTransition(transaction, animations) {
-    return {
-        type: "tween",
-        duration: animations ? transaction.duration / 1_000 : 0,
-        ease: motionEasing(transaction.easing)
-    };
-}
-/** Per-overlay variables consumed by the shared entrance keyframes. */
-export function overlayTransition(transaction, animations) {
-    return {
-        "--phreshos-ui-motion-duration": `${animations ? transaction.duration : 0}ms`,
-        "--phreshos-ui-motion-easing": cssEasing(transaction.easing)
-    };
-}
-export const overlayMotionClass = "phreshos-ui-overlay";
-export const backdropMotionClass = "phreshos-ui-backdrop";
-export function transitionTiming(transaction, animations) {
-    return {
-        transitionDuration: `${animations ? transaction.duration : 0}ms`,
-        transitionTimingFunction: cssEasing(transaction.easing)
-    };
-}
-export function visualTransition(transaction, animations) {
-    return { ...transitionTiming(transaction, animations), transitionProperty: visualProperties };
-}
-export function paintTransition(transaction, animations) {
-    return { ...transitionTiming(transaction, animations), transitionProperty: paintProperties };
-}
-function cssEasing(easing) {
-    return typeof easing === "string" ? easing : `cubic-bezier(${easing.join(", ")})`;
-}
-function motionEasing(easing) {
-    if (typeof easing !== "string")
-        return [...easing];
-    if (easing === "ease")
-        return [0.25, 0.1, 0.25, 1];
-    if (easing === "ease-in")
-        return "easeIn";
-    if (easing === "ease-out")
-        return "easeOut";
-    if (easing === "ease-in-out")
-        return "easeInOut";
-    return easing;
-}
-const stylesheet = `
-.phreshos-ui-overlay[data-entering] {
-  animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
-}
-.phreshos-ui-overlay[data-exiting] {
-  animation: phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) reverse both;
-  pointer-events: none;
-}
-.phreshos-ui-backdrop[data-entering] {
-  animation: phreshos-ui-backdrop-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both;
-}
-.phreshos-ui-backdrop[data-exiting] {
-  animation: phreshos-ui-backdrop-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) reverse both;
-  pointer-events: none;
-}
-@keyframes phreshos-ui-overlay-enter {
-  from { opacity: 0; scale: 1.05; }
-  to { opacity: 1; scale: 1; }
-}
-@keyframes phreshos-ui-backdrop-enter {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-`;
-/** React hoists and deduplicates this stylesheet, including portals. */
-export default function MotionStyle() {
-    return _jsx("style", { href: "phreshos-react-ui-motion", precedence: "phreshos", children: stylesheet });
-}

package/dist/preferences.d.ts

@@ -1,12 +0,0 @@
-import type { DesktopPreferences } from "@phreshos/core";
-/** Complete environment preferences consumed by React UI. */
-export type Preferences = Pick<DesktopPreferences, "theme" | "animations">;
-/** At least one preference merged with the nearest UIProvider. */
-export type PreferencesUpdate = Readonly<{
-    theme: Preferences["theme"];
-    animations?: Preferences["animations"];
-}> | Readonly<{
-    theme?: Preferences["theme"];
-    animations: Preferences["animations"];
-}>;
-export type Theme = Preferences["theme"];

package/dist/radius.js

@@ -1,11 +0,0 @@
-import { isScaleLevel, scale } from "./scale.js";
-/** Resolves a Radius while preserving explicit CSS and pixel values. */
-export function resolveRadius(value, appearance) {
-    if (value === "full")
-        return "9999px";
-    if (!isScaleLevel(value))
-        return value;
-    if (!appearance)
-        throw new Error("A semantic radius requires an Appearance value");
-    return scale(appearance.radius, value);
-}

package/dist/readiness.d.ts

@@ -1,37 +0,0 @@
-import type { ReactElement, ReactNode } from "react";
-/** One requirement observed during the boundary's initial readiness cycle. */
-export interface ReadinessRequirement {
-    readonly message: string;
-    readonly createdAt: Date;
-    readonly readyAt: Date | null;
-}
-export interface ReadinessProps {
-    /** Interface prepared behind this initial readiness boundary. */
-    readonly children: ReactNode;
-    /** Optional presentation rendered while initial requirements remain pending. */
-    readonly fallback?: (requirements: readonly ReadinessRequirement[]) => ReactNode;
-    /** Message used when the oldest pending requirement has none of its own. */
-    readonly message?: string;
-}
-/** Prevents interaction with one React subtree until its initial requirements are ready. */
-export declare function ReadinessRoot({ children, fallback, message }: ReadinessProps): import("react").JSX.Element;
-export interface ReadinessRequirementProps {
-    /** Message exposed while this mounted requirement remains pending. */
-    readonly message?: string;
-}
-/** One declarative requirement whose pending lifetime matches this component's mount. */
-export declare function ReadinessRequirement({ message }: ReadinessRequirementProps): null;
-/** Registers one requirement and returns its stable, idempotent completion. */
-export declare function useRequirement(message?: string): () => void;
-/** Reads the nearest boundary's current initial-readiness state. */
-export declare function useReadiness(): Readonly<{
-    ready: boolean;
-    requirements: readonly ReadinessRequirement[];
-}>;
-interface ReadinessComponent {
-    (properties: ReadinessProps): ReactElement | null;
-    readonly Requirement: typeof ReadinessRequirement;
-}
-export declare const Readiness: ReadinessComponent;
-export type ReadinessFallback = NonNullable<ReadinessProps["fallback"]>;
-export {};

package/dist/readiness.js

@@ -1,134 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-const ReadinessContext = createContext(null);
-/** Prevents interaction with one React subtree until its initial requirements are ready. */
-export function ReadinessRoot({ children, fallback, message = "Loading…" }) {
-    const parent = useContext(ReadinessContext);
-    const requirements = useRef(new Map());
-    const revealedRef = useRef(false);
-    const [revealed, setRevealed] = useState(false);
-    const [revision, invalidate] = useReducer(value => value + 1, 0);
-    const registry = useMemo(() => ({
-        register(identity, nextMessage) {
-            if (revealedRef.current)
-                return;
-            const current = requirements.current.get(identity);
-            if (current != null) {
-                if (current.readyAt == null)
-                    return;
-                // React Strict Mode restores mounted effects before the initial tree settles.
-                requirements.current.set(identity, {
-                    ...current,
-                    message: nextMessage,
-                    readyAt: null
-                });
-                invalidate();
-                return;
-            }
-            requirements.current.set(identity, {
-                message: nextMessage,
-                createdAt: new Date(),
-                readyAt: null
-            });
-            invalidate();
-        },
-        update(identity, nextMessage) {
-            if (revealedRef.current)
-                return;
-            const current = requirements.current.get(identity);
-            if (current == null || current.message === nextMessage)
-                return;
-            requirements.current.set(identity, { ...current, message: nextMessage });
-            invalidate();
-        },
-        complete(identity) {
-            if (revealedRef.current)
-                return;
-            const current = requirements.current.get(identity);
-            if (current == null || current.readyAt != null)
-                return;
-            requirements.current.set(identity, { ...current, readyAt: new Date() });
-            invalidate();
-        },
-        release(identity) {
-            if (revealedRef.current)
-                return;
-            const current = requirements.current.get(identity);
-            if (current == null || current.readyAt != null)
-                return;
-            requirements.current.set(identity, { ...current, readyAt: new Date() });
-            invalidate();
-        }
-    }), []);
-    const currentRequirements = useMemo(() => {
-        return [...requirements.current.values()].map(requirement => ({
-            message: requirement.message ?? message,
-            createdAt: new Date(requirement.createdAt),
-            readyAt: requirement.readyAt == null ? null : new Date(requirement.readyAt)
-        }));
-    }, [message, revision]);
-    const currentMessage = currentRequirements.find(requirement => requirement.readyAt == null)?.message ?? message;
-    const completeParent = useManagedRequirement(parent?.registry ?? null, currentMessage);
-    useLayoutEffect(() => {
-        if (revealedRef.current
-            || [...requirements.current.values()].some(requirement => requirement.readyAt == null))
-            return;
-        // Descendant layout effects register first, so an empty set here represents a settled commit.
-        revealedRef.current = true;
-        setRevealed(true);
-    }, [revision]);
-    useLayoutEffect(() => {
-        if (revealed)
-            completeParent();
-    }, [completeParent, revealed]);
-    const context = useMemo(() => ({
-        ready: revealed,
-        requirements: currentRequirements,
-        registry
-    }), [currentRequirements, registry, revealed]);
-    return _jsxs(ReadinessContext.Provider, { value: context, children: [_jsx("div", { "data-readiness": "", "data-ready": revealed ? "true" : "false", inert: revealed ? undefined : true, style: { display: "contents" }, children: children }), !revealed && fallback?.(currentRequirements)] });
-}
-/** One declarative requirement whose pending lifetime matches this component's mount. */
-export function ReadinessRequirement({ message }) {
-    useRequirement(message);
-    return null;
-}
-/** Registers one requirement and returns its stable, idempotent completion. */
-export function useRequirement(message) {
-    const context = useContext(ReadinessContext);
-    if (context == null)
-        throw new Error("useRequirement must be used inside Readiness");
-    return useManagedRequirement(context.registry, message);
-}
-/** Reads the nearest boundary's current initial-readiness state. */
-export function useReadiness() {
-    const context = useContext(ReadinessContext);
-    if (context == null)
-        throw new Error("useReadiness must be used inside Readiness");
-    return useMemo(() => ({
-        ready: context.ready,
-        requirements: context.requirements
-    }), [context.ready, context.requirements]);
-}
-function useManagedRequirement(registry, message) {
-    const identity = useRef({});
-    const completed = useRef(false);
-    useLayoutEffect(() => {
-        if (!completed.current)
-            registry?.register(identity.current, message);
-        return () => registry?.release(identity.current);
-    }, [registry]);
-    useLayoutEffect(() => {
-        if (!completed.current)
-            registry?.update(identity.current, message);
-    }, [message, registry]);
-    return useCallback(() => {
-        if (completed.current)
-            return;
-        completed.current = true;
-        registry?.complete(identity.current);
-    }, [registry]);
-}
-export const Readiness = Object.assign(ReadinessRoot, {
-    Requirement: ReadinessRequirement
-});

package/dist/selection.d.ts

@@ -1,18 +0,0 @@
-import type { Key, Selection } from "react-aria-components";
-export type MultipleStringSelection = readonly string[] | "all";
-export type SingleStringSelectionProps = Readonly<{
-    value?: string | null;
-    defaultValue?: string | null;
-    onChange?: (value: string | null) => void;
-}>;
-export type MultipleStringSelectionProps = Readonly<{
-    value?: MultipleStringSelection;
-    defaultValue?: MultipleStringSelection;
-    onChange?: (value: MultipleStringSelection) => void;
-}>;
-export declare function toAriaSelection(value: string | null | MultipleStringSelection | undefined): "all" | Set<string> | undefined;
-export declare function stringKey(value: Key): string;
-export declare function optionalStringKey(value: Key | null): string | null;
-export declare function singleSelection(selection: Selection): string | null;
-export declare function multipleSelection(selection: Selection): MultipleStringSelection;
-export declare function stringKeys(values: Iterable<Key>): readonly string[];

package/dist/spacing.d.ts

@@ -1,8 +0,0 @@
-import type { CSSProperties } from "react";
-import type { Appearance } from "./appearance.js";
-import { type ScaleLevel } from "./scale.js";
-/** An Appearance-derived level, pixel value, or explicit CSS spacing value. */
-export type Spacing = ScaleLevel | number | (string & {});
-/** Resolves spacing while preserving explicit CSS and pixel values. */
-export declare function resolveSpacing(value: ScaleLevel, appearance: Appearance | null): number;
-export declare function resolveSpacing(value: Spacing | undefined, appearance: Appearance | null): CSSProperties["gap"];

package/dist/spacing.js

@@ -1,8 +0,0 @@
-import { isScaleLevel, scale } from "./scale.js";
-export function resolveSpacing(value, appearance) {
-    if (!isScaleLevel(value))
-        return value;
-    if (!appearance)
-        throw new Error("Semantic spacing requires an Appearance value");
-    return scale(appearance.spacing, value);
-}

package/dist/surface-edge.d.ts

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

package/dist/surface-edge.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-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, transition }) {
-    const visible = material.opacity > 0;
-    if (!visible)
-        return null;
-    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: {
-                    ...transition,
-                    ...edgeLayer,
-                    transitionProperty: "opacity",
-                    padding: illuminatedEdgeBoundary,
-                    background: horizontalIllumination,
-                    opacity,
-                    WebkitMask: edgeMask,
-                    WebkitMaskComposite: "xor",
-                    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: {
-                    ...transition,
-                    ...edgeLayer,
-                    transitionProperty: "border-color, opacity",
-                    borderStyle: "solid",
-                    borderWidth: outerEdgeThickness,
-                    borderColor: "var(--phreshos-surface-edge-dark)",
-                    opacity,
-                    "--phreshos-surface-edge-dark": darkEdge(material.color)
-                } })] });
-}
-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

@@ -1,27 +0,0 @@
-import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from "react";
-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 { MaterialMode, MaterialOptions } from "./material-options.js";
-export type { ShadowOptions } from "./shadow-options.js";
-export interface SurfaceOwnProps extends MaterialOverrides, ShadowOverrides, RadiusProps {
-    readonly color?: Color;
-}
-/**
- * The structural properties a component must preserve when it hosts a Surface.
- * The component must apply `style` and render `children` on the same host element,
- * and it must forward its ref to that element.
- */
-export interface SurfaceHostProps {
-    readonly children?: ReactNode;
-    readonly dir?: Direction;
-    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,92 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef, useId } from "react";
-import { useResolvedAppearance } from "./appearance-context.js";
-import { contrastingColor, defaultColor, resolveColor } from "./color.js";
-import { resolveMaterialOptions } from "./material-options.js";
-import { MaterialPaint } from "./material-paint.js";
-import { paintTransition, transitionTiming, visualTransition } from "./motion-style.js";
-import { resolveRadius } from "./radius.js";
-import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
-import { SurfaceEdge } from "./surface-edge.js";
-/** 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 resolved = useResolvedAppearance();
-    const transition = visualTransition(resolved.transaction, resolved.preferences.animations);
-    const material = resolveSurface(color, options, resolved);
-    const resolvedShadow = resolveShadowOptions(typeof shadowOptions === "object" ? shadowOptions : {}, resolved.shadow);
-    const shadow = shadowOptions === false ? "none" : shadowStyle(resolvedShadow);
-    const resolvedRadius = resolveRadius(radius ?? "medium", resolved.appearance);
-    const timing = transitionTiming(resolved.transaction, resolved.preferences.animations);
-    const paintTiming = paintTransition(resolved.transaction, resolved.preferences.animations);
-    return createElement(Element, {
-        ...properties,
-        ref,
-        style: {
-            ...transition,
-            ...style,
-            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"
-        }
-    }, material.enabled && _jsx(SurfaceLayers, { material: material, paintTransition: paintTiming }), material.enabled && _jsx(SurfaceEdge, { material: material, transition: timing }), children);
-});
-export const Surface = SurfaceRoot;
-function resolveSurface(color, options, resolved) {
-    const mode = typeof options === "object" ? "full" : options ?? "basic";
-    const level = materialLevel[mode];
-    const material = resolveMaterialOptions(typeof options === "object" ? options : {}, resolved.material);
-    const fill = resolveColor(color, resolved.colors);
-    const opacity = level >= materialLevel.extended ? material.opacity : 1;
-    const backdrop = level >= materialLevel.full;
-    const grain = level === materialLevel.basic
-        ? material.grain * material.opacity
-        : material.grain;
-    return {
-        ...material,
-        enabled: level >= materialLevel.basic,
-        opacity,
-        fillOpacity: opacity,
-        grain,
-        backdrop: backdrop ? material.backdrop : 0,
-        distortion: backdrop ? material.distortion : 0,
-        saturation: backdrop ? material.saturation : 1,
-        color: fill,
-        foreground: contrastingColor(color ?? defaultColor, resolved.colors)
-    };
-}
-const materialLevel = Object.freeze({
-    none: 0,
-    basic: 1,
-    extended: 2,
-    full: 3
-});
-const layerStyle = {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "inherit",
-    pointerEvents: "none"
-};
-function SurfaceLayers({ material, paintTransition }) {
-    const filtersVisible = material.fillOpacity < 1;
-    const backdrop = filtersVisible ? material.backdrop : 0;
-    const saturation = filtersVisible ? material.saturation : 1;
-    const distortion = filtersVisible ? material.distortion : 0;
-    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: [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.fillOpacity, transition: paintTransition })] });
-}
-/** 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/text-control.d.ts

@@ -1,10 +0,0 @@
-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, ShadowOverrides {
-    readonly placeholder?: string;
-    readonly readOnly?: boolean;
-}