@phreshos/react-ui 0.1.45 → 0.1.46

package/dist/button.d.ts

@@ -5,12 +5,20 @@ import type { Color } from "./foundation/color.js";
 import type { RadiusProps } from "./foundation/radius.js";
 import type { MaterialOverrides } from "./surface/material-options.js";
 import type { ShadowOverrides } from "./surface/shadow-options.js";
+import type { SurfaceDepth } from "./surface/surface.js";
 type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "onPress" | "render" | "style">;
 type NativeLinkProps = Omit<AriaLinkProps, "children" | "className" | "color" | "href" | "isDisabled" | "onClick" | "onPress" | "render" | "style">;
 /** A color from Appearance or CSS; omission keeps the Button neutral. */
 export type ButtonColor = Color;
 interface ButtonOwnProps extends ControlProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+    /** Raised by default; `flat` keeps its color level with its surroundings. */
+    readonly depth?: Exclude<SurfaceDepth, "recessed">;
     readonly children?: ReactNode;
+    /**
+     * The Button holds only an icon: it is square, as wide as it is tall. Name it
+     * with `aria-label`, since no text does.
+     */
+    readonly iconOnly?: boolean;
     /** Runs once for a normalized pointer, Enter, or Space activation. */
     readonly onPress?: () => void;
 }

package/dist/button.js

@@ -5,10 +5,11 @@ import { controlOpacity, transition, useControlMetrics } from "./control/control
 import { surfaceRender } from "./control/surface-render.js";
 /** A raised Surface you act on, or follow when it has an `href`. */
 export const Button = forwardRef(function Button(properties, ref) {
-    const { children, color = "default", disabled, radius, size, style, className, material, shadow, ...rest } = properties;
+    const { children, color = "default", depth, disabled, iconOnly = false, radius, size, style, className, material, shadow, ...rest } = properties;
     const metrics = useControlMetrics(size, radius);
     const surface = (state, pending) => ({
         color,
+        depth,
         material,
         shadow,
         radius: metrics.radius,
@@ -27,14 +28,14 @@ export const Button = forwardRef(function Button(properties, ref) {
                 return state.isDisabled
                     ? surfaceRender("span", state => surface(state, false))(inert, state)
                     : surfaceRender("a", state => surface(state, false))(native, state);
-            }, style: state => buttonStyle(metrics, !state.isDisabled && state.isPressed, state.isDisabled, false, style), children: children });
+            }, style: state => buttonStyle(metrics, iconOnly, !state.isDisabled && state.isPressed, state.isDisabled, false, style), children: children });
     }
     const { pending = false, type = "button", ...action } = rest;
     // Disabled state is read from React Aria, so a Button placed in a slot, such
     // as a calendar's month buttons, follows the owner that disables it.
-    return _jsx(AriaButton, { ...action, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => surface(state, pending)), style: state => buttonStyle(metrics, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: children });
+    return _jsx(AriaButton, { ...action, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => surface(state, pending)), style: state => buttonStyle(metrics, iconOnly, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: children });
 });
-function buttonStyle(metrics, pressed, disabled, pending, style) {
+function buttonStyle(metrics, iconOnly, pressed, disabled, pending, style) {
     return {
         ...transition(metrics.visual, "box-shadow, color, outline-color, opacity, scale"),
         appearance: "none",
@@ -46,8 +47,9 @@ function buttonStyle(metrics, pressed, disabled, pending, style) {
         flexShrink: 0,
         minWidth: 0,
         height: metrics.height,
+        ...(iconOnly ? { width: metrics.height } : {}),
         paddingBlock: 0,
-        paddingInline: metrics.inset,
+        paddingInline: iconOnly ? 0 : metrics.inset,
         border: 0,
         background: "none",
         font: "inherit",

package/dist/calendar-layout.js

@@ -16,7 +16,7 @@ export function CalendarLayout({ color, metrics, range = false, size }) {
     const cell = metrics.height;
     const single = useContext(CalendarStateContext);
     const ranged = useContext(RangeCalendarStateContext);
-    return _jsxs(_Fragment, { children: [_jsxs("header", { style: { display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: metrics.gap }, children: [_jsx(Button, { slot: "previous", size: size, "aria-label": "Previous month", style: { width: metrics.height, paddingInline: 0 }, children: _jsx(Chevron, { direction: direction === "rtl" ? "next" : "previous" }) }), _jsx(CalendarHeading, { style: { margin: 0, textAlign: "center", fontFamily: "inherit", fontSize: "inherit", fontStyle: "inherit", lineHeight: "inherit", fontWeight: controlFontWeight } }), _jsx(Button, { slot: "next", size: size, "aria-label": "Next month", style: { width: metrics.height, paddingInline: 0 }, children: _jsx(Chevron, { direction: direction === "rtl" ? "previous" : "next" }) })] }), _jsxs(CalendarGrid, { style: { width: "max-content", margin: 0, borderCollapse: "separate", borderSpacing: 2, background: "transparent" }, children: [_jsx(CalendarGridHeader, { children: day => _jsx(CalendarHeaderCell, { style: { height: cell * 0.72, padding: 0, textAlign: "center", fontFamily: "inherit", fontSize: "inherit", fontStyle: "inherit", lineHeight: "inherit", fontWeight: controlFontWeight, opacity: controlOpacity.secondary }, children: day }) }), _jsx(CalendarGridBody, { children: date => _jsx(CalendarCell, { date: date, className: state => dimmedClass(state.isDisabled || state.isUnavailable, state.defaultClassName) ?? "", style: state => cellStyle(metrics, color, state, daySelection(state, ranged ?? single), range) }) })] })] });
+    return _jsxs(_Fragment, { children: [_jsxs("header", { style: { display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: metrics.gap }, children: [_jsx(Button, { slot: "previous", size: size, iconOnly: true, "aria-label": "Previous month", children: _jsx(Chevron, { direction: direction === "rtl" ? "next" : "previous" }) }), _jsx(CalendarHeading, { style: { margin: 0, textAlign: "center", fontFamily: "inherit", fontSize: "inherit", fontStyle: "inherit", lineHeight: "inherit", fontWeight: controlFontWeight } }), _jsx(Button, { slot: "next", size: size, iconOnly: true, "aria-label": "Next month", children: _jsx(Chevron, { direction: direction === "rtl" ? "previous" : "next" }) })] }), _jsxs(CalendarGrid, { style: { width: "max-content", margin: 0, borderCollapse: "separate", borderSpacing: 2, background: "transparent" }, children: [_jsx(CalendarGridHeader, { children: day => _jsx(CalendarHeaderCell, { style: { height: cell * 0.72, padding: 0, textAlign: "center", fontFamily: "inherit", fontSize: "inherit", fontStyle: "inherit", lineHeight: "inherit", fontWeight: controlFontWeight, opacity: controlOpacity.secondary }, children: day }) }), _jsx(CalendarGridBody, { children: date => _jsx(CalendarCell, { date: date, className: state => dimmedClass(state.isDisabled || state.isUnavailable, state.defaultClassName) ?? "", style: state => cellStyle(metrics, color, state, daySelection(state, ranged ?? single), range) }) })] })] });
 }
 export function calendarRootStyle(metrics, style) {
     return {

package/dist/control/control.js

@@ -44,9 +44,10 @@ export function controlMetrics(visual, size, radius) {
         visual,
         spacing,
         height,
-        // Side padding follows the size, never below half the Appearance spacing,
-        // so a compact icon-only control stays close to square.
-        inset: Math.max(visual.spacing / 2, spacing),
+        // Side padding follows the size, never below two thirds of the Appearance
+        // spacing, so a small control with text still reads as a control. A Button
+        // holding only an icon is square instead (`iconOnly`), whatever its padding.
+        inset: Math.max(visual.spacing * 2 / 3, spacing),
         gap: Math.max(4, spacing / 2),
         indicator: Math.round(14 + spacing / 3),
         listInset: Math.max(4, spacing / 3),

package/dist/dialog.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Modal as AriaModal, ModalOverlay as AriaModalOverlay, Text as AriaText } from "react-aria-components";
 import { Button } from "./button.js";
-import { controlFontSizes, controlFontWeight, controlOpacity } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, controlLineHeight, controlOpacity } from "./control/control.js";
 import { ariaOpenState } from "./control/open-state.js";
 import { colorOpacity, darkCanvas } from "./foundation/color.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
@@ -90,7 +90,7 @@ export const DialogTitle = forwardRef(function DialogTitle({ style, ...propertie
             fontFamily: "inherit",
             fontSize: controlFontSizes.large,
             fontWeight: controlFontWeight,
-            lineHeight: 1.5,
+            lineHeight: controlLineHeight,
             ...style
         } });
 });
@@ -98,7 +98,7 @@ export const DialogDescription = forwardRef(function DialogDescription({ style,
     return _jsx(AriaText, { ...properties, ref: ref, slot: "description", style: {
             margin: 0,
             fontSize: controlFontSizes.medium,
-            lineHeight: 1.5,
+            lineHeight: controlLineHeight,
             opacity: controlOpacity.secondary,
             ...style
         } });

package/dist/disclosure.js

@@ -11,7 +11,7 @@ const DisclosureStyleContext = createContext(null);
 export const DisclosureRoot = forwardRef(function Disclosure({ children, className, color = "transparent", defaultExpanded, disabled = false, expanded, onExpandedChange, radius, size, style, ...properties }, ref) {
     const metrics = useControlMetrics(size, radius);
     const context = useMemo(() => ({ color, metrics }), [color, metrics]);
-    return _jsx(DisclosureStyleContext.Provider, { value: context, children: _jsx(AriaDisclosure, { ...properties, ...(expanded === undefined ? {} : { isExpanded: expanded }), ...(defaultExpanded === undefined ? {} : { defaultExpanded }), ref: ref, className: className, isDisabled: disabled, onExpandedChange: onExpandedChange, style: { display: "grid", minWidth: 0, fontFamily: "inherit", fontSize: metrics.fontSize, ...style }, children: children }) });
+    return _jsx(DisclosureStyleContext.Provider, { value: context, children: _jsx(AriaDisclosure, { ...properties, ...(expanded === undefined ? {} : { isExpanded: expanded }), ...(defaultExpanded === undefined ? {} : { defaultExpanded }), ref: ref, className: className, isDisabled: disabled, onExpandedChange: onExpandedChange, style: { display: "grid", minWidth: 0, fontFamily: "inherit", ...style }, children: children }) });
 });
 /** The control that changes the Disclosure's expansion state. */
 export const DisclosureTrigger = forwardRef(function DisclosureTrigger({ children, className, style, ...properties }, ref) {
@@ -38,6 +38,8 @@ export const DisclosureTrigger = forwardRef(function DisclosureTrigger({ childre
             background: "none",
             cursor: "pointer",
             font: "inherit",
+            // Only the trigger takes the Disclosure's size: the revealed content keeps its own.
+            fontSize: metrics.fontSize,
             fontWeight: 500,
             lineHeight: controlLineHeight,
             textAlign: "start",

package/dist/foundation/color.d.ts

@@ -21,8 +21,10 @@ export declare function mixColor(base: string, target: string, amount: number):
 export declare function colorOpacity(value: string, opacity: number): string;
 /** Resolves one Color against the active Appearance colors. */
 export declare function resolveColor(value: Color, colors: AppearanceColors): string;
-/** Derives one level from a concrete base color. */
+/** Derives one level from a base color. */
 export declare function colorLevel(base: string, level: ColorLevel, colors: AppearanceColors): string;
+/** The perceived difference between two colors (OKLab distance), or `null` when either cannot be measured. */
+export declare function perceivedDistance(first: string, second: string): number | null;
 /** Every level derived from one base color. */
 export declare function colorScale(base: string, colors: AppearanceColors): ColorScale;
 /**

package/dist/foundation/color.js

@@ -6,6 +6,7 @@ import parse from "colorjs.io/src/parse.js";
 import serialize from "colorjs.io/src/serialize.js";
 import to from "colorjs.io/src/to.js";
 import toGamut from "colorjs.io/src/toGamut.js";
+import deltaEOK from "colorjs.io/src/deltaE/deltaEOK.js";
 import sRGB from "colorjs.io/src/spaces/srgb.js";
 import sRGB_Linear from "colorjs.io/src/spaces/srgb-linear.js";
 import HSL from "colorjs.io/src/spaces/hsl.js";
@@ -28,12 +29,19 @@ for (const space of [sRGB, sRGB_Linear, HSL, HWB, Lab, LCH, OKLab, OKLCH, P3, A9
  * Levels move a color toward the canvas (`subtle`, `soft`) or toward the
  * content color (`strong`, `intense`). Direction therefore follows the colors
  * themselves, so every level keeps its meaning in any Theme.
+ *
+ * Each level is a perceived distance (OKLab): how far a canvas level stays from
+ * the canvas, and how far a content level moves from the color itself. A fixed
+ * share of the way would fade a light color on a light canvas and barely move a
+ * dark one; one distance reads the same in every Theme. A color closer to the
+ * canvas than a level's distance is that level already. Colors that cannot be
+ * measured, such as CSS variables, move by the share instead.
  */
 const levels = {
-    subtle: { toward: "background", amount: 0.84 },
-    soft: { toward: "background", amount: 0.62 },
-    strong: { toward: "foreground", amount: 0.22 },
-    intense: { toward: "foreground", amount: 0.42 }
+    subtle: { toward: "background", distance: 0.07, share: 0.84 },
+    soft: { toward: "background", distance: 0.16, share: 0.62 },
+    strong: { toward: "foreground", distance: 0.09, share: 0.22 },
+    intense: { toward: "foreground", distance: 0.17, share: 0.42 }
 };
 /*
  * Every derivation below is pure and repeats constantly across components and
@@ -128,12 +136,28 @@ export function resolveColor(value, colors) {
     cache.set(value, result);
     return result;
 }
-/** Derives one level from a concrete base color. */
+/** Derives one level from a base color. */
 export function colorLevel(base, level, colors) {
     if (level === "base")
         return base;
-    const { toward, amount } = levels[level];
-    return mixColor(base, colors[toward], amount);
+    const { toward, distance, share } = levels[level];
+    const target = colors[toward];
+    // Mixing in OKLab moves along a straight line, so the distance covered is exactly the share of the span.
+    const span = perceivedDistance(base, target);
+    if (span === null)
+        return mixColor(base, target, share);
+    if (span === 0)
+        return base;
+    const amount = toward === "background" ? 1 - distance / span : distance / span;
+    return mixColor(base, target, Math.round(Math.min(1, Math.max(0, amount)) * 1_000) / 1_000);
+}
+/** The perceived difference between two colors (OKLab distance), or `null` when either cannot be measured. */
+export function perceivedDistance(first, second) {
+    const a = concreteColor(first);
+    const b = concreteColor(second);
+    if (a === null || b === null)
+        return null;
+    return deltaEOK(parse(a), parse(b));
 }
 /** Every level derived from one base color. */
 export function colorScale(base, colors) {
@@ -227,7 +251,7 @@ export function recessColor(base) {
     return remember(recessCache, base, result);
 }
 /** The constant difference between a recess and the paint it sinks into. */
-const recessContrast = 1.085;
+const recessContrast = 1.15;
 /** The lighter Appearance content candidate: the paint of anything lit from above, such as a thumb. */
 export function lightColor(colors) {
     return darkCanvas(colors) ? colors.foreground : colors.default;

package/dist/popover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Popover as AriaPopover } from "react-aria-components";
 import { Button } from "./button.js";
-import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import { controlFontSizes, controlFontWeight, controlLineHeight } from "./control/control.js";
 import { ariaOpenState } from "./control/open-state.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import MotionStyle, { overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
@@ -45,7 +45,7 @@ export const PopoverTitle = forwardRef(function PopoverTitle({ style, ...propert
             fontFamily: "inherit",
             fontSize: controlFontSizes.medium,
             fontWeight: controlFontWeight,
-            lineHeight: 1.5,
+            lineHeight: controlLineHeight,
             ...style
         } });
 });

package/dist/snippet.js

@@ -34,7 +34,7 @@ export const Snippet = forwardRef(function Snippet({ children, code = false, cop
                     lineHeight: 1.6,
                     fontFamily: code ? "ui-monospace, SFMono-Regular, Menlo, monospace" : "inherit",
                     fontSize: code ? "0.9em" : undefined
-                }, children: children }), _jsx(Button, { size: "small", shadow: false, "aria-label": copied ? "Copied" : copyLabel, style: { position: "absolute", insetBlockStart: padding / 2, insetInlineEnd: padding / 2, width: metrics.height, paddingInline: 0 }, onPress: () => void copyText(children).then(setCopied), children: copied ? _jsx(Check, { ...iconProps(14) }) : _jsx(Copy, { ...iconProps(14) }) })] });
+                }, children: children }), _jsx(Button, { size: "small", shadow: false, "aria-label": copied ? "Copied" : copyLabel, iconOnly: true, style: { position: "absolute", insetBlockStart: padding / 2, insetInlineEnd: padding / 2 }, onPress: () => void copyText(children).then(setCopied), children: copied ? _jsx(Check, { ...iconProps(14) }) : _jsx(Copy, { ...iconProps(14) }) })] });
 });
 /**
  * Writes text to the clipboard and reports whether it could. A Program's frame

package/dist/tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
 import { Button } from "./button.js";
-import { controlFontSizes } from "./control/control.js";
+import { controlFontSizes, controlLineHeight } from "./control/control.js";
 import { ariaOpenState } from "./control/open-state.js";
 import { resolveDirection, useDirection } from "./foundation/direction.js";
 import MotionStyle, { overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
@@ -29,7 +29,7 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, cla
                         paddingInline: inset * 1.5,
                         outline: "none",
                         fontSize: controlFontSizes.small,
-                        lineHeight: 1.4,
+                        lineHeight: controlLineHeight,
                         ...style
                     }, children: children }) })] });
 });

package/dist/window.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext } from "react";
 import { Button } from "./button.js";
-import { transition } from "./control/control.js";
+import { controlFontSizes, transition } from "./control/control.js";
 import { resolveColor } from "./foundation/color.js";
 import { headerHeight } from "./foundation/layout.js";
 import { scale } from "./foundation/scale.js";
@@ -100,7 +100,7 @@ const WindowIdentity = forwardRef(function WindowIdentity({ icon, title, style,
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap",
-                    fontSize: "0.8125em",
+                    fontSize: controlFontSizes.medium,
                     fontWeight: 500
                 }, children: title })] });
 });
@@ -127,15 +127,15 @@ const WindowAction = forwardRef(function WindowAction({ ...properties }, ref) {
     return _jsx(Button, { ...properties, ref: ref, size: "xsmall" });
 });
 const WindowMinimize = forwardRef(function WindowMinimize({ "aria-label": label = "Minimize", preventFocusOnPress = true, ...properties }, ref) {
-    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label, preventFocusOnPress: preventFocusOnPress, children: _jsx(ArrowDownLeft, { ...iconProps(14) }) });
+    return _jsx(WindowAction, { ...properties, ref: ref, iconOnly: true, "aria-label": label, preventFocusOnPress: preventFocusOnPress, children: _jsx(ArrowDownLeft, { ...iconProps(14) }) });
 });
 const WindowMaximize = forwardRef(function WindowMaximize({ "aria-label": label, maximized, onPress, ...properties }, ref) {
     const header = useHeader();
     const selected = maximized ?? header.maximized;
-    return _jsx(WindowAction, { ...properties, ref: ref, onPress: onPress ?? header.onMaximize, "aria-label": label ?? (selected ? "Restore" : "Maximize"), children: selected ? _jsx(Minimize2, { ...iconProps(14) }) : _jsx(Maximize2, { ...iconProps(14) }) });
+    return _jsx(WindowAction, { ...properties, ref: ref, iconOnly: true, onPress: onPress ?? header.onMaximize, "aria-label": label ?? (selected ? "Restore" : "Maximize"), children: selected ? _jsx(Minimize2, { ...iconProps(14) }) : _jsx(Maximize2, { ...iconProps(14) }) });
 });
 const WindowClose = forwardRef(function WindowClose({ "aria-label": label = "Close", color = "danger", preventFocusOnPress = true, ...properties }, ref) {
-    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label, color: color, preventFocusOnPress: preventFocusOnPress, children: _jsx(X, { ...iconProps(14) }) });
+    return _jsx(WindowAction, { ...properties, ref: ref, iconOnly: true, "aria-label": label, color: color, preventFocusOnPress: preventFocusOnPress, children: _jsx(X, { ...iconProps(14) }) });
 });
 const Header = Object.assign(HeaderRoot, {
     Identity: WindowIdentity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,