@phreshos/react-ui 0.1.16 → 0.1.18

package/dist/control.d.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties, ReactNode } from "react";
+import { type RadiusProps } from "./radius.js";
+import { type ScaleLevel } from "./scale.js";
+import { solidColors } from "./color.js";
+import { type Color } from "./color.js";
+/** Semantic Appearance colors accepted by interactive controls. */
+export type ControlColor = Color;
+export interface ControlProps {
+    readonly size?: ScaleLevel;
+    readonly color?: ControlColor;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly disabled?: boolean;
+}
+export interface FieldProps {
+    /** Visible accessible label. Otherwise supply aria-label or aria-labelledby. */
+    readonly label?: ReactNode;
+    readonly description?: ReactNode;
+    readonly errorMessage?: ReactNode;
+    readonly required?: boolean;
+    readonly invalid?: boolean;
+}
+/** Names owned by our contract, not a second set of primitive-specific aliases. */
+export type ControlOverrides = keyof ControlProps | keyof FieldProps | "children" | "isDisabled" | "isRequired" | "isInvalid";
+export declare const controlFontSizes: Readonly<Record<ScaleLevel, number>>;
+type SolidColors = ReturnType<typeof solidColors>;
+export interface ControlTheme {
+    readonly spacing: number;
+    readonly foreground: string;
+    readonly background: string;
+    readonly tint: string;
+    readonly colored: boolean;
+    readonly danger: string;
+    readonly paints: {
+        readonly palette: SolidColors;
+        readonly neutral: SolidColors;
+        readonly danger: SolidColors;
+    };
+    readonly radius: CSSProperties["borderRadius"];
+    readonly fontSize: number;
+    readonly height: number;
+    readonly gap: number;
+}
+export declare function useControlTheme({ size, color, radius }: ControlProps & RadiusProps): ControlTheme;
+export declare function fieldStyle(theme: ControlTheme, disabled?: boolean, style?: CSSProperties): CSSProperties;
+export declare function controlPaint(theme: ControlTheme, focused: boolean, invalid: boolean, hovered?: boolean): {
+    background: string;
+    color: string;
+};
+export declare function controlStyle(theme: ControlTheme, focused: boolean, invalid: boolean, hovered?: boolean, focusVisible?: boolean): CSSProperties;
+export declare function FieldLabel({ label }: Pick<FieldProps, "label">): import("react").JSX.Element | null;
+export declare function FieldFeedback({ description, errorMessage, theme }: Pick<FieldProps, "description" | "errorMessage"> & {
+    readonly theme: ControlTheme;
+}): import("react").JSX.Element;
+export {};

package/dist/control.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { FieldError, Label, Text } from "react-aria-components";
+import { useAppearance, useResolveTheme } from "./appearance-provider.js";
+import { resolveRadius } from "./radius.js";
+import { scale } from "./scale.js";
+import { solidColors } from "./color.js";
+import { useResolveSolidColor } from "./color.js";
+import { visualTransition } from "./motion-style.js";
+export const controlFontSizes = Object.freeze({
+    xsmall: 11,
+    small: 12,
+    medium: 13,
+    large: 14,
+    xlarge: 15
+});
+export function useControlTheme({ size = "medium", color, radius = "medium" }) {
+    const appearance = useAppearance();
+    const spacing = scale(useResolveTheme(appearance.spacing), size);
+    const foreground = useResolveTheme(appearance.colors.foreground);
+    const background = useResolveTheme(appearance.colors.background);
+    const tint = useResolveSolidColor(color ?? "primary:base");
+    const danger = useResolveSolidColor("danger:base");
+    const paints = useMemo(() => ({
+        palette: solidColors(tint, background, foreground),
+        neutral: solidColors(background, background, foreground),
+        danger: solidColors(danger, background, foreground)
+    }), [tint, background, foreground, danger]);
+    return {
+        spacing,
+        foreground,
+        background,
+        tint,
+        colored: color !== undefined,
+        danger,
+        paints,
+        radius: resolveRadius(radius, appearance),
+        fontSize: controlFontSizes[size],
+        height: Math.max(24, 24 + spacing),
+        gap: Math.max(4, spacing / 2)
+    };
+}
+export function fieldStyle(theme, disabled = false, style) {
+    return {
+        ...style,
+        ...visualTransition,
+        display: "grid",
+        gap: theme.gap,
+        minWidth: 0,
+        color: theme.foreground,
+        fontFamily: "inherit",
+        fontSize: theme.fontSize,
+        lineHeight: 1.5,
+        opacity: disabled ? 0.46 : 1
+    };
+}
+export function controlPaint(theme, focused, invalid, hovered = false) {
+    const paints = invalid ? theme.paints.danger : theme.colored ? theme.paints.palette : theme.paints.neutral;
+    return focused ? paints.pressed : hovered ? paints.hover : paints.rest;
+}
+export function controlStyle(theme, focused, invalid, hovered = false, focusVisible = focused) {
+    const paint = controlPaint(theme, focused, invalid, hovered);
+    return {
+        ...visualTransition,
+        appearance: "none",
+        boxSizing: "border-box",
+        width: "100%",
+        minWidth: 0,
+        height: theme.height,
+        paddingBlock: 0,
+        paddingInline: Math.max(8, theme.spacing),
+        border: 0,
+        borderRadius: theme.radius,
+        outline: focusVisible ? `2px solid ${theme.foreground}` : "none",
+        outlineOffset: 2,
+        ...paint,
+        caretColor: paint.color,
+        font: "inherit",
+        lineHeight: 1.5
+    };
+}
+export function FieldLabel({ label }) {
+    return label == null ? null : _jsx(Label, { style: { fontWeight: 550 }, children: label });
+}
+export function FieldFeedback({ description, errorMessage, theme }) {
+    return _jsxs(_Fragment, { children: [description != null && _jsx(Text, { slot: "description", style: { fontSize: "0.92em", opacity: 0.7 }, children: description }), _jsx(FieldError, { style: { fontSize: "0.92em", color: theme.danger }, children: errorMessage })] });
+}

package/dist/document-scrollbars.js

@@ -86,7 +86,7 @@ const documents = new WeakMap();
 /** Applies one Appearance to the complete owning document without rendering. */
 export default function DocumentScrollbars({ appearance, theme }) {
     const identity = useRef(Symbol("AppearanceProvider")).current;
-    const foreground = theme === "dark" ? appearance.foreground.dark : appearance.foreground.light;
+    const foreground = theme === "dark" ? appearance.colors.foreground.dark : appearance.colors.foreground.light;
     const padding = 5;
     const thumbSize = 6;
     const size = thumbSize + padding * 2;

package/dist/field-style.d.ts

@@ -0,0 +1,3 @@
+export declare const textControlClass = "phreshos-ui-text-control";
+/** Placeholder contrast follows the control's chosen text color, not browser gray. */
+export default function FieldStyle(): import("react").JSX.Element;

package/dist/field-style.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const textControlClass = "phreshos-ui-text-control";
+/** Placeholder contrast follows the control's chosen text color, not browser gray. */
+export default function FieldStyle() {
+    return _jsx("style", { href: "phreshos-react-ui-fields", precedence: "phreshos", children: `
+.phreshos-ui-text-control::placeholder {
+    color: inherit;
+    opacity: 0.6;
+}
+` });
+}

package/dist/flex.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { alignment, justification, resolveGap } from "./layout.js";
-import { useAppearanceIfAvailable } from "./appearance-provider.js";
+import { useAppearance } from "./appearance-provider.js";
 /** A predictable Flexbox container with no visual appearance of its own. */
 export const Flex = forwardRef(function Flex({ align, direction, gap, inline = false, justify, style, wrap, ...properties }, ref) {
-    const appearance = useAppearanceIfAvailable();
+    const appearance = useAppearance();
     return _jsx("div", { ...properties, ref: ref, style: {
             ...style,
             display: inline ? "inline-flex" : "flex",

package/dist/grid.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { alignment, justification, resolveGap, tracks } from "./layout.js";
-import { useAppearanceIfAvailable } from "./appearance-provider.js";
+import { useAppearance } from "./appearance-provider.js";
 /** A predictable CSS Grid container with no visual appearance of its own. */
 export const Grid = forwardRef(function Grid({ align, columns, flow, gap, inline = false, justify, rows, style, ...properties }, ref) {
-    const appearance = useAppearanceIfAvailable();
+    const appearance = useAppearance();
     return _jsx("div", { ...properties, ref: ref, style: {
             ...style,
             display: inline ? "inline-grid" : "grid",

package/dist/input.d.ts

@@ -0,0 +1,4 @@
+import type { TextControlProps } from "./text-control.js";
+export type InputProps = TextControlProps;
+/** A labeled single-line text control. onChange receives the string value. */
+export declare const Input: import("react").ForwardRefExoticComponent<TextControlProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/input.js

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

package/dist/main.d.ts

@@ -4,14 +4,24 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
+export { defaultAppearance } from "@phreshos/core";
 export { AppearanceProvider, useAppearance, useResolveTheme, useTheme, type AppearanceProviderProps } from "./appearance-provider.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Surface, type SurfaceProps } from "./surface.js";
+export { Surface, type MaterialOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
+export { defaultColor, type Color, type ColorLevel, type ColorScale } from "./color.js";
 export { Panel, type PanelProps } from "./panel.js";
-export { Button, type ButtonProps } from "./button.js";
+export { Button, type ButtonColor, type ButtonProps } from "./button.js";
+export { Input, type InputProps } from "./input.js";
+export { Textarea, type TextareaProps } from "./textarea.js";
+export { Checkbox, type CheckboxProps } from "./checkbox.js";
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from "./radio.js";
+export { Switch, type SwitchProps } from "./switch.js";
+export { Select, type SelectProps, type SelectOption } from "./select.js";
+export { Slider, type SliderProps } from "./slider.js";
+export type { ControlColor } from "./control.js";
 export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
 export { resolveRadius, type Radius, type RadiusProps } from "./radius.js";
 export { resolveSpacing, type Spacing } from "./spacing.js";
-export { useColor, type ColorLevel, type ColorScale } from "./color.js";
+export { useColor } from "./color.js";
 export { useScale, type NumericScale, type ScaleLevel } from "./scale.js";

package/dist/main.js

@@ -4,12 +4,21 @@
  * Components enter this surface only after their implementation-independent
  * behavior contract has been established by the package's tests.
  */
+export { defaultAppearance } from "@phreshos/core";
 export { AppearanceProvider, useAppearance, useResolveTheme, useTheme } from "./appearance-provider.js";
 export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
 export { Surface } from "./surface.js";
+export { defaultColor } from "./color.js";
 export { Panel } from "./panel.js";
 export { Button } from "./button.js";
+export { Input } from "./input.js";
+export { Textarea } from "./textarea.js";
+export { Checkbox } from "./checkbox.js";
+export { Radio, RadioGroup } from "./radio.js";
+export { Switch } from "./switch.js";
+export { Select } from "./select.js";
+export { Slider } from "./slider.js";
 export { resolveRadius } from "./radius.js";
 export { resolveSpacing } from "./spacing.js";
 export { useColor } from "./color.js";

package/dist/material-options.d.ts

@@ -0,0 +1,24 @@
+import { type ScaleLevel } from "./scale.js";
+/** Optional values of visual substance, expressed directly or relative to Appearance. */
+export interface MaterialOptions {
+    readonly opacity?: ScaleLevel | number;
+    readonly backdrop?: ScaleLevel | number;
+    readonly grain?: ScaleLevel | number;
+    readonly grainAmount?: ScaleLevel | number;
+    readonly distortion?: ScaleLevel | number;
+    readonly saturation?: ScaleLevel | number;
+}
+/** Grouped material customization exposed by components built on Surface. */
+export interface MaterialOverrides {
+    readonly material?: MaterialOptions;
+}
+/** Resolves material values from the current Appearance without knowing any host geometry. */
+export declare function useMaterialOptions(values?: MaterialOptions): {
+    opacity: number;
+    backdrop: number;
+    grain: number;
+    grainAmount: number;
+    distortion: number;
+    saturation: number;
+};
+export type ResolvedMaterial = ReturnType<typeof useMaterialOptions>;

package/dist/material-options.js

@@ -0,0 +1,22 @@
+import { appearanceLimits } from "@phreshos/core";
+import { useAppearance, useResolveTheme } from "./appearance-provider.js";
+import { isScaleLevel, scale, scaleMultiplier } from "./scale.js";
+/** Resolves material values from the current Appearance without knowing any host geometry. */
+export function useMaterialOptions(values = {}) {
+    const appearance = useAppearance();
+    const defaults = useResolveTheme(appearance.material);
+    const limits = appearanceLimits.material;
+    return {
+        opacity: resolve(values.opacity, defaults.opacity, limits.opacity),
+        backdrop: resolve(values.backdrop, defaults.backdrop, limits.backdrop),
+        grain: resolve(values.grain, defaults.grain, limits.grain),
+        grainAmount: resolve(values.grainAmount, defaults.grainAmount, limits.grainAmount),
+        distortion: resolve(values.distortion, defaults.distortion, limits.distortion),
+        saturation: resolve(values.saturation, defaults.saturation, limits.saturation, scaleMultiplier)
+    };
+}
+function resolve(value, base, range, derive = scale) {
+    const resolved = isScaleLevel(value) ? derive(base, value) : value ?? base;
+    const finite = Number.isFinite(resolved) ? resolved : base;
+    return Math.min(range.maximum, Math.max(range.minimum, finite));
+}

package/dist/material-paint.d.ts

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

package/dist/material-paint.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { paintTransition } from "./motion-style.js";
+/** The fill, refraction definition, and grain of one Surface. */
+export function MaterialPaint({ color, distortion, grain, grainAmount, identity, opacity }) {
+    const seed = useMemo(() => seedFrom(identity), [identity]);
+    const hasPaint = opacity > 0;
+    const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
+    const hasDistortion = distortion > 0;
+    const initial = useMemo(() => hasGrain ? grainPaths(seed, grainAmount) : [], [grainAmount, hasGrain, seed]);
+    if (!hasPaint && !hasDistortion)
+        return null;
+    return _jsxs("svg", { "data-material-paint": "", "aria-hidden": "true", focusable: "false", style: {
+            position: "absolute",
+            zIndex: -1,
+            inset: 0,
+            display: "block",
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            borderRadius: "inherit",
+            pointerEvents: "none"
+        }, children: [(hasGrain || hasDistortion) && _jsxs("defs", { children: [hasDistortion && _jsx(DistortionFilter, { distortion: distortion, identity: identity }), hasGrain && _jsx("pattern", { id: `${identity}-grain`, width: patternSize, height: patternSize, patternUnits: "userSpaceOnUse", children: initial.map((path, tone) => _jsx("path", { "data-material-grain-tone": tone, d: path, fill: grainTone(color, tone, grain), shapeRendering: "crispEdges" }, tone)) })] }), hasPaint && _jsxs("g", { "data-material-fill": "", opacity: opacity, style: paintTransition, children: [_jsx("rect", { "data-material-base": "", width: "100%", height: "100%", style: { ...paintTransition, fill: color } }), hasGrain && _jsx("rect", { "data-material-grain": "", width: "100%", height: "100%", fill: `url(#${identity}-grain)`, shapeRendering: "crispEdges" })] })] });
+}
+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 grainTone(color, tone, intensity) {
+    const channel = Math.round(tone / (toneCount - 1) * 255);
+    const percentage = Math.round(intensity * 10_000) / 100;
+    return `color-mix(in srgb, ${color} ${100 - percentage}%, rgb(${channel} ${channel} ${channel}) ${percentage}%)`;
+}
+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 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;

package/dist/motion-style.d.ts

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

package/dist/motion-style.js

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

package/dist/panel.d.ts

@@ -6,4 +6,4 @@ export interface PanelProps extends SurfaceProps {
     readonly contentProps?: Omit<SurfaceProps, "children">;
 }
 /** Owns the shared shell layout, not positioning, interaction, or lifecycle. */
-export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Panel: import("react").ForwardRefExoticComponent<Omit<PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/radio.d.ts

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

package/dist/radio.js

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

package/dist/select.d.ts

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

package/dist/select.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { Select as AriaSelect, Button, SelectValue, Popover, ListBox, ListBoxItem } from "react-aria-components";
+import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { SurfaceButton } from "./control-surface.js";
+import { Surface } from "./surface.js";
+import { controlTransition, overlayMotionClass, visualTransition } from "./motion-style.js";
+/** Single selection from string-valued options; keyboard navigation and typeahead stay native to React Aria. */
+export const Select = forwardRef(function Select({ label, description, errorMessage, disabled, required, invalid, options, value, defaultValue, onChange, size, color, radius, style, material, ...properties }, ref) {
+    const theme = useControlTheme({ size, color, radius });
+    const reduced = useReducedMotion();
+    return _jsx(AriaSelect, { ...properties, ref: ref, value: value, defaultValue: defaultValue, onChange: key => onChange?.(key == null ? null : String(key)), disabledKeys: options.filter(option => option.disabled).map(option => option.value), isDisabled: disabled, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsxs(Button, { render: (native, button) => _jsx(SurfaceButton, { native: native, material: material, paint: controlPaint(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered) }), style: button => ({
+                        ...controlStyle(theme, state.isOpen || button.isFocused, state.isInvalid, button.isHovered, button.isFocusVisible),
+                        display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
+                        cursor: disabled ? "not-allowed" : "pointer", textAlign: "start"
+                    }), children: [_jsx(SelectValue, { style: ({ isPlaceholder }) => ({ opacity: isPlaceholder ? 0.6 : 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }) }), _jsx(motion.svg, { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", initial: false, animate: { rotate: state.isOpen ? 180 : 0 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: { flexShrink: 0 }, children: _jsx("path", { d: "m2 4 4 4 4-4" }) })] }), _jsx(Popover, { className: overlayMotionClass, placement: "bottom start", offset: theme.gap, maxHeight: 280 + theme.gap * 2, style: { width: "var(--trigger-width)", maxWidth: "calc(100vw - 16px)" }, children: _jsx(Surface, { style: { padding: theme.gap, display: "flex", flexDirection: "column", maxHeight: "inherit", boxSizing: "border-box" }, children: _jsx(ListBox, { items: options, style: { display: "grid", gap: theme.gap, minHeight: 0, overflow: "auto", outline: "none", fontSize: theme.fontSize, color: theme.foreground }, children: option => _jsx(ListBoxItem, { id: option.value, textValue: option.label, style: item => ({
+                                    ...visualTransition,
+                                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
+                                    minHeight: theme.height, paddingInline: Math.max(8, theme.spacing), boxSizing: "border-box",
+                                    borderRadius: theme.radius,
+                                    outline: item.isFocused && !item.isSelected ? `2px solid ${theme.foreground}` : "none", outlineOffset: -2,
+                                    cursor: item.isDisabled ? "not-allowed" : "pointer",
+                                    opacity: item.isDisabled ? 0.46 : 1,
+                                    ...(item.isSelected ? item.isFocused ? theme.paints.palette.hover : theme.paints.palette.rest
+                                        : { background: "transparent", color: theme.foreground })
+                                }), children: item => _jsxs(_Fragment, { children: [option.label, _jsx("span", { "aria-hidden": "true", children: item.isSelected ? "✓" : null })] }) }) }) }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) });
+});

package/dist/slider.d.ts

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

package/dist/slider.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { Slider as AriaSlider, SliderTrack, SliderThumb, SliderFill, SliderOutput } from "react-aria-components";
+import { FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { controlTransition, visualTransition } from "./motion-style.js";
+/** One numeric value with pointer, touch, keyboard, and form support. */
+export const Slider = forwardRef(function Slider({ label, description, name, disabled, size, color, style, orientation = "horizontal", ...properties }, ref) {
+    const theme = useControlTheme({ size, color });
+    const descriptionId = useId();
+    const vertical = orientation === "vertical";
+    const diameter = theme.fontSize + 6;
+    const reduced = useReducedMotion();
+    const rail = Math.max(4, Math.round(diameter / 3));
+    return _jsxs(AriaSlider, { ...properties, ref: ref, isDisabled: disabled, orientation: orientation, style: fieldStyle(theme, disabled, style), "aria-describedby": [properties["aria-describedby"], description != null ? descriptionId : null].filter(Boolean).join(" ") || undefined, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: theme.gap }, children: [_jsx(FieldLabel, { label: label }), _jsx(SliderOutput, { style: { fontVariantNumeric: "tabular-nums", opacity: 0.7 } })] }), _jsxs(SliderTrack, { style: {
+                    position: "relative", touchAction: "none",
+                    width: vertical ? theme.height : "100%", height: vertical ? 160 : theme.height
+                }, children: [_jsx("div", { "aria-hidden": "true", style: {
+                            ...visualTransition,
+                            position: "absolute", borderRadius: rail,
+                            ...(vertical ? { width: rail, height: "100%", left: "50%", transform: "translateX(-50%)" } : { height: rail, width: "100%", top: "50%", transform: "translateY(-50%)" }),
+                            background: theme.paints.neutral.rest.background
+                        } }), _jsx(SliderFill, { style: {
+                            ...visualTransition,
+                            position: "absolute", background: theme.paints.palette.rest.background, borderRadius: rail,
+                            ...(vertical ? { width: rail, left: "50%", transform: "translateX(-50%)" } : { height: rail, top: "50%", transform: "translateY(-50%)" })
+                        } }), _jsx(SliderThumb, { name: name, style: state => ({
+                            width: diameter, height: diameter, borderRadius: "50%", boxSizing: "border-box",
+                            ...(vertical ? { left: "50%" } : { top: "50%" }),
+                            outline: state.isFocusVisible ? `2px solid ${theme.foreground}` : "none", outlineOffset: 2,
+                            cursor: state.isDisabled ? "not-allowed" : state.isDragging ? "grabbing" : "grab"
+                        }), children: state => _jsx(motion.span, { "aria-hidden": "true", initial: false, animate: { scale: reduced || state.isDisabled ? 1 : state.isDragging ? 0.92 : state.isHovered ? 1.08 : 1 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: { ...visualTransition, position: "absolute", inset: 0, borderRadius: "inherit", pointerEvents: "none",
+                                background: (state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).color,
+                                border: `3px solid ${(state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).background}`,
+                                boxSizing: "border-box" } }) })] }), description != null && _jsx("span", { id: descriptionId, style: { fontSize: "0.92em", opacity: 0.7 }, children: description })] });
+});