@phreshos/react-ui 0.1.36 → 0.1.38

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;
-}

package/dist/toggle-indicator.d.ts

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

package/dist/toggle-indicator.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion } from "motion/react";
-import { Surface } from "./surface.js";
-/** Shared paint only. Selection, focus, validation, and native input behavior belong to React Aria. */
-export function ToggleIndicator({ kind, direction = "ltr", selected, indeterminate = false, focused, invalid = false, hovered = false, pressed = false, theme, material: options, shadow }) {
-    const { animations, motionTransition: transition } = theme;
-    const diameter = theme.indicatorSize;
-    const active = selected || indeterminate;
-    const paints = invalid ? theme.paints.danger : active ? theme.paints.palette : theme.paints.subtle;
-    const paint = pressed ? paints.pressed : hovered ? paints.hover : paints.rest;
-    const radius = kind === "checkbox" ? Math.min(diameter / 4, typeof theme.radius === "number" ? theme.radius : diameter / 4) : diameter;
-    const switching = kind === "switch";
-    const thumbWidth = diameter - 6 + (pressed && animations ? 3 : 0);
-    const travel = (diameter * 2 - thumbWidth) / 2 - 3;
-    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",
-            placeItems: "center",
-            position: "relative",
-            boxSizing: "border-box",
-            flexShrink: 0,
-            width: switching ? diameter * 2 : diameter,
-            height: diameter,
-            borderRadius: radius,
-            border: "none",
-            outline: focused ? `1px solid ${theme.focusColor}` : "none",
-            outlineOffset: 1,
-        }, children: switching ? _jsx(motion.span, { initial: false, animate: { width: thumbWidth, x: (selected ? travel : -travel) * (direction === "rtl" ? -1 : 1) }, transition: transition, style: {
-                ...theme.transition,
-                height: diameter - 6, borderRadius: diameter,
-                background: paint.color
-            } }) : _jsx(motion.span, { initial: false, animate: { opacity: active ? 1 : 0, scale: active ? 1 : 0.7 }, transition: transition, style: { display: "grid", placeItems: "center" }, children: kind === "radio" ? _jsx("span", { style: { ...theme.transition, 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: transition }), _jsx(motion.path, { d: "M4 8h8", initial: false, animate: { pathLength: indeterminate ? 1 : 0, opacity: indeterminate ? 1 : 0 }, transition: transition })] }) }) });
-}
-export function toggleStyle(theme, disabled, readOnly) {
-    return {
-        // React Aria's focusable native input is visually hidden with absolute
-        // positioning. Anchor it here so focus cannot scroll an ancestor viewport
-        // toward a position outside the visible toggle.
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        gap: theme.gap,
-        minHeight: theme.height,
-        width: "fit-content",
-        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer"
-    };
-}