@phreshos/react-ui 0.1.15 → 0.1.17

package/dist/toggle-indicator.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { useLocale } from "react-aria-components";
+import { MaterialLayer, useResolvedMaterial } from "./material.js";
+import { SurfaceEdge } from "./surface-edge.js";
+import { controlTransition, visualTransition } from "./motion-style.js";
+/** Shared paint only. Selection, focus, validation, and native input behavior belong to React Aria. */
+export function ToggleIndicator({ kind, selected, indeterminate = false, focused, invalid = false, hovered = false, pressed = false, theme, material: options }) {
+    const reduced = useReducedMotion();
+    const { direction } = useLocale();
+    const diameter = theme.fontSize + 6;
+    const active = selected || indeterminate;
+    const paints = invalid ? theme.paints.danger : active ? theme.paints.palette : theme.paints.neutral;
+    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 && !reduced ? 3 : 0);
+    const travel = (diameter * 2 - thumbWidth) / 2 - 3;
+    const material = useResolvedMaterial({ color: paint.background, material: options });
+    return _jsxs(motion.span, { "aria-hidden": "true", initial: false, animate: { scale: reduced || switching ? 1 : pressed ? 0.94 : hovered ? 1.03 : 1 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: {
+            color: paint.color,
+            ...visualTransition,
+            background: "transparent",
+            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 ? `2px solid ${theme.foreground}` : "none",
+            outlineOffset: 2,
+        }, children: [_jsx(MaterialLayer, { material: material }), _jsx(SurfaceEdge, { material: material }), switching ? _jsx(motion.span, { initial: false, animate: { width: thumbWidth, x: (selected ? travel : -travel) * (direction === "rtl" ? -1 : 1) }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: {
+                    ...visualTransition,
+                    height: diameter - 6, borderRadius: diameter,
+                    background: paint.color
+                } }) : _jsx(motion.span, { initial: false, animate: { opacity: active ? 1 : 0, scale: active ? 1 : 0.7 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration }, style: { display: "grid", placeItems: "center" }, children: kind === "radio" ? _jsx("span", { style: { ...visualTransition, width: diameter / 2, height: diameter / 2, borderRadius: "50%", background: "currentColor" } })
+                    : _jsxs("svg", { width: diameter - 4, height: diameter - 4, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(motion.path, { d: "m3 8 3 3 7-7", initial: false, animate: { pathLength: selected && !indeterminate ? 1 : 0, opacity: selected && !indeterminate ? 1 : 0 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration } }), _jsx(motion.path, { d: "M4 8h8", initial: false, animate: { pathLength: indeterminate ? 1 : 0, opacity: indeterminate ? 1 : 0 }, transition: { ...controlTransition, duration: reduced ? 0 : controlTransition.duration } })] }) })] });
+}
+export function toggleStyle(theme, disabled, readOnly) {
+    return {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.gap,
+        minHeight: theme.height,
+        width: "fit-content",
+        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer"
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -52,16 +52,17 @@
     "prepack": "node --run test && node --run build"
   },
   "peerDependencies": {
-    "@phreshos/core": "^0.1.37",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
+    "@phreshos/core": "^0.1.42",
+    "colorjs.io": "^0.7.1",
+    "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"
   },
   "devDependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.37",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

package/dist/surface-material.d.ts

@@ -1,13 +0,0 @@
-interface SurfaceMaterialProps {
-    readonly color: string;
-    readonly distortion: number;
-    readonly grain: number;
-    readonly grainAmount: number;
-    readonly identity: string;
-    readonly opacity: number;
-    readonly ripples: number;
-    readonly waves: number;
-}
-/** The locally owned SVG paint layer inside one Surface. */
-export declare function SurfaceMaterial({ color, distortion, grain, grainAmount, identity, opacity, ripples, waves }: SurfaceMaterialProps): import("react").JSX.Element | null;
-export {};

package/dist/surface-material.js

@@ -1,102 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useMemo } from "react";
-import { scale } from "./scale.js";
-/** The locally owned SVG paint layer inside one Surface. */
-export function SurfaceMaterial({ color, distortion, grain, grainAmount, identity, opacity, ripples, waves }) {
-    const seed = useMemo(() => seedFrom(identity), [identity]);
-    const hasPaint = opacity > 0;
-    const hasGrain = hasPaint && grain > 0 && grainAmount > 0;
-    const hasDistortion = distortion > 0 || waves > 0 || ripples > 0;
-    const initial = useMemo(() => hasGrain ? grainPaths(seed, grainAmount) : [], [grainAmount, hasGrain, seed]);
-    if (!hasPaint && !hasDistortion)
-        return null;
-    return _jsxs("svg", { "data-surface-material": "", "data-surface-border": hasPaint ? "" : undefined, "aria-hidden": "true", focusable: "false", style: {
-            position: "absolute",
-            zIndex: -1,
-            inset: 0,
-            display: "block",
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-            borderRadius: "inherit",
-            borderColor: edgeColor(color, opacity),
-            borderStyle: hasPaint ? "solid" : "none",
-            borderWidth: hasPaint ? 1 : 0,
-            boxSizing: "border-box",
-            pointerEvents: "none"
-        }, children: [(hasGrain || hasDistortion) && _jsxs("defs", { children: [hasDistortion && _jsx(DistortionFilter, { distortion: distortion, identity: identity, ripples: ripples, seed: seed, waves: waves }), hasGrain && _jsx("pattern", { id: `${identity}-grain`, width: patternSize, height: patternSize, patternUnits: "userSpaceOnUse", children: initial.map((path, tone) => _jsx("path", { "data-surface-grain-tone": tone, d: path, fill: grainTone(color, tone, grain), shapeRendering: "crispEdges" }, tone)) })] }), hasPaint && _jsxs("g", { "data-surface-paint": "", opacity: opacity, children: [_jsx("rect", { "data-surface-base": "", width: "100%", height: "100%", fill: color }), hasGrain && _jsx("rect", { "data-surface-grain": "", width: "100%", height: "100%", fill: `url(#${identity}-grain)`, shapeRendering: "crispEdges" })] })] });
-}
-function edgeColor(color, opacity) {
-    const edge = `color-mix(in oklch, ${color} 94%, black)`;
-    const edgeOpacity = Math.min(1, scale(opacity, "large"));
-    if (edgeOpacity === 1)
-        return edge;
-    return `color-mix(in srgb, ${edge} ${Math.round(edgeOpacity * 10_000) / 100}%, transparent)`;
-}
-function DistortionFilter({ distortion, identity, ripples, seed, waves }) {
-    const fields = [
-        distortion > 0 && { name: "organic", strength: distortion, x: "R" },
-        waves > 0 && { name: "waves", strength: waves, x: "R" },
-        ripples > 0 && { name: "ripples", strength: ripples, x: "B" }
-    ].filter((field) => Boolean(field));
-    const scale = fields.reduce((total, field) => total + field.strength, 0);
-    const weighted = fields.map(field => `${identity}-${field.name}-weighted`);
-    const map = `${identity}-distortion-map`;
-    return _jsxs("filter", { id: `${identity}-distortion`, "data-surface-distortion": "", x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [distortion > 0 && _jsxs(Fragment, { children: [_jsx("feTurbulence", { "data-surface-distortion-noise": "", "data-surface-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` })] }), waves > 0 && _jsx(Fragment, { children: _jsx("feTurbulence", { "data-surface-distortion-field": "waves", type: "turbulence", baseFrequency: "0.006 0.045", numOctaves: 1, seed: seed + 17, result: `${identity}-waves-noise` }) }), ripples > 0 && _jsx(Fragment, { children: _jsx("feTurbulence", { "data-surface-distortion-field": "ripples", type: "turbulence", baseFrequency: "0.055", numOctaves: 2, seed: seed + 31, result: `${identity}-ripples-noise` }) }), fields.map(field => _jsx("feColorMatrix", { "data-surface-distortion-weight": field.name, in: `${identity}-${field.name}-noise${field.name === "organic" ? "-blurred" : ""}`, type: "matrix", values: weightMatrix(field.x, field.strength / scale), result: `${identity}-${field.name}-weighted` }, field.name)), weighted.slice(1).map((field, index) => _jsx("feComposite", { "data-surface-distortion-combine": "", in: index === 0 ? weighted[0] : `${identity}-distortion-sum-${index}`, in2: field, operator: "arithmetic", k2: 1, k3: 1, result: index === weighted.length - 2 ? map : `${identity}-distortion-sum-${index + 1}` }, field)), _jsx("feDisplacementMap", { "data-surface-distortion-stage": "combined", in: "SourceGraphic", in2: weighted.length === 1 ? weighted[0] : map, scale: scale, xChannelSelector: "R", yChannelSelector: "G" })] });
-}
-function weightMatrix(x, weight) {
-    const red = x === "R" ? `${weight} 0 0 0 0` : `0 0 ${weight} 0 0`;
-    return `${red}
-          0 ${weight} 0 0 0
-          0 0 0 0 0
-          0 0 0 1 0`;
-}
-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;