@phreshos/react-ui 0.1.49 → 0.1.50

package/dist/button.d.ts

@@ -25,7 +25,10 @@ interface ButtonOwnProps extends ControlProps, RadiusProps, MaterialOverrides, S
 /** A Button that acts: a native `<button>`. */
 export interface ButtonActionProps extends NativeButtonProps, ButtonOwnProps {
     readonly href?: undefined;
-    /** Prevents activation while keeping the Button focusable. */
+    /**
+     * Work the Button started is under way: a Spinner shows in its place, the Button keeps its size
+     * and its name, and it stays focusable without activating.
+     */
     readonly pending?: boolean;
 }
 /**

package/dist/button.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
-import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { transition, useControlMetrics } from "./control/control.js";
 import { surfaceRender } from "./control/surface-render.js";
+import { Spinner } from "./spinner.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", depth, disabled, iconOnly = false, radius, size, style, className, material, shadow, ...rest } = properties;
@@ -33,7 +34,7 @@ export const Button = forwardRef(function Button(properties, ref) {
     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, iconOnly, !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: pending ? _jsxs(_Fragment, { children: [_jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: metrics.gap, opacity: 0 }, children: children }), _jsx("span", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center" }, children: _jsx(Spinner, { decorative: true, color: "currentColor", style: { width: metrics.indicator, height: metrics.indicator } }) })] }) : children });
 });
 function buttonStyle(metrics, iconOnly, pressed, disabled, pending, style) {
     return {
@@ -62,7 +63,7 @@ function buttonStyle(metrics, iconOnly, pressed, disabled, pending, style) {
         WebkitTapHighlightColor: "transparent",
         cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",
         scale: pressed ? "0.97" : "1",
-        ...(pending ? { opacity: controlOpacity.pending } : {}),
+        ...(pending ? { position: "relative" } : {}),
         ...style
     };
 }

package/dist/control/control.d.ts

@@ -36,7 +36,6 @@ export declare const controlLineHeight = 1.45;
 export declare const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export declare const controlOpacity: Readonly<{
-    pending: 0.68;
     secondary: 0.66;
     placeholder: 0.55;
 }>;

package/dist/control/control.js

@@ -21,7 +21,6 @@ export const controlLineHeight = 1.45;
 export const controlFontWeight = 600;
 /** Attenuation shared by every control family. */
 export const controlOpacity = Object.freeze({
-    pending: 0.68,
     secondary: 0.66,
     placeholder: 0.55
 });

package/dist/drawer.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from "react";
+export interface DrawerProps {
+    readonly open: boolean;
+    /** Called for a press outside the Drawer or for Escape. */
+    readonly onClose: () => void;
+    /** Shown at its top, such as the name of what it belongs to. */
+    readonly title?: ReactNode;
+    readonly "aria-label"?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly children: ReactNode;
+}
+/**
+ * A narrow layout's sidebar, over its content from the start side, such as the navigation a narrow
+ * window gives up to its content. It is placed in its nearest positioned container. A press
+ * outside or Escape closes it. It slides in and back out along the same path, timed by the
+ * Appearance transaction, the way out its own animation so its end is seen; without motion it
+ * simply shows and goes. Only its position moves:
+ * fading it would switch off the blur it draws of what is behind it.
+ */
+export declare function Drawer({ open, onClose, title, className, style, children, ...properties }: DrawerProps): import("react").JSX.Element | null;

package/dist/drawer.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { controlFontSizes, controlFontWeight } from "./control/control.js";
+import MotionStyle, { overlayTransition } from "./foundation/motion-style.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { Surface } from "./surface/surface.js";
+/**
+ * A narrow layout's sidebar, over its content from the start side, such as the navigation a narrow
+ * window gives up to its content. It is placed in its nearest positioned container. A press
+ * outside or Escape closes it. It slides in and back out along the same path, timed by the
+ * Appearance transaction, the way out its own animation so its end is seen; without motion it
+ * simply shows and goes. Only its position moves:
+ * fading it would switch off the blur it draws of what is behind it.
+ */
+export function Drawer({ open, onClose, title, className, style, children, ...properties }) {
+    const visual = useVisual();
+    const animated = visual.duration > 0;
+    const inset = scale(visual.spacing, "small");
+    // It stays while it slides out, and leaves once the slide ends.
+    const [present, setPresent] = useState(open);
+    useEffect(() => { if (open)
+        setPresent(true);
+    else if (!animated)
+        setPresent(false); }, [open, animated]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // Escape closes the Drawer alone, not a surface that holds it.
+        const close = (event) => { if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose();
+        } };
+        addEventListener("keydown", close, true);
+        return () => removeEventListener("keydown", close, true);
+    }, [open, onClose]);
+    if (!present)
+        return null;
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), open && _jsx("div", { "data-drawer-scrim": "", style: { position: "absolute", inset: 0, zIndex: 10 }, onPointerDown: onClose }), _jsxs(Surface, { ...properties, "data-drawer": "", "data-state": animated ? open ? "opening" : "closing" : undefined, material: "full", className: ["phreshos-ui-drawer", className].filter(Boolean).join(" "), onAnimationEnd: () => { if (!open)
+                    setPresent(false); }, style: {
+                    ...overlayTransition(visual),
+                    position: "absolute",
+                    insetBlock: inset,
+                    insetInlineStart: inset,
+                    zIndex: 11,
+                    boxSizing: "border-box",
+                    width: `min(${visual.spacing * 20}px, calc(100% - ${visual.spacing * 4}px))`,
+                    padding: inset,
+                    overflow: "auto",
+                    ...style
+                }, children: [title != null && _jsx("div", { style: { padding: `${inset}px ${inset}px ${visual.spacing}px`, fontSize: controlFontSizes.xlarge, fontWeight: controlFontWeight }, children: title }), children] })] });
+}

package/dist/foundation/motion-style.js

@@ -45,6 +45,22 @@ const stylesheet = `
   color: inherit;
   opacity: 0.55;
 }
+.phreshos-ui-text-control::-webkit-search-cancel-button,
+.phreshos-ui-text-control::-webkit-search-decoration {
+  display: none;
+}
+.phreshos-ui-drawer[data-state="opening"] {
+  animation: phreshos-ui-drawer-in var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing);
+}
+.phreshos-ui-drawer[data-state="closing"] {
+  animation: phreshos-ui-drawer-out var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) forwards;
+}
+:dir(rtl).phreshos-ui-drawer[data-state="opening"] { animation-name: phreshos-ui-drawer-in-rtl; }
+:dir(rtl).phreshos-ui-drawer[data-state="closing"] { animation-name: phreshos-ui-drawer-out-rtl; }
+@keyframes phreshos-ui-drawer-in { from { translate: calc(-100% - 1rem) 0; } }
+@keyframes phreshos-ui-drawer-out { to { translate: calc(-100% - 1rem) 0; } }
+@keyframes phreshos-ui-drawer-in-rtl { from { translate: calc(100% + 1rem) 0; } }
+@keyframes phreshos-ui-drawer-out-rtl { to { translate: calc(100% + 1rem) 0; } }
 @keyframes phreshos-ui-spin {
   to { rotate: 360deg; }
 }

package/dist/main.d.ts

@@ -17,6 +17,7 @@ export { resolveColor, useColor, useContrastingColor, type Color, type ColorLeve
 export { Panel, type PanelProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
 export { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps, type WindowMoveCaptureProps } from "./window.js";
 export { default as useWindowMoveHandle, type WindowMoveHandle } from "./use-window-move-handle.js";
+export { Drawer, type DrawerProps } from "./drawer.js";
 export { Button, type ButtonActionProps, type ButtonColor, type ButtonLinkProps, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";

package/dist/main.js

@@ -17,6 +17,7 @@ export { resolveColor, useColor, useContrastingColor } from "./foundation/color.
 export { Panel } from "./panel.js";
 export { Window } from "./window.js";
 export { default as useWindowMoveHandle } from "./use-window-move-handle.js";
+export { Drawer } from "./drawer.js";
 export { Button } from "./button.js";
 export { Input } from "./input.js";
 export { Textarea } from "./textarea.js";

package/dist/spinner.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ProgressBar as AriaProgressBar } from "react-aria-components";
 import { useControlMetrics } from "./control/control.js";
-import { colorOpacity, resolveColor } from "./foundation/color.js";
-import MotionStyle from "./foundation/motion-style.js";
+import { resolveColor } from "./foundation/color.js";
+import MotionStyle, { loopDuration } from "./foundation/motion-style.js";
 import { scale } from "./foundation/scale.js";
 /** A standalone status stays visibly distinct from the compact control indicator. */
 export function spinnerDiameter(spacing, size) {
@@ -25,7 +25,7 @@ export const Spinner = forwardRef(function Spinner({ className, color = "primary
         verticalAlign: "middle",
         ...style
     };
-    const indicator = _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsxs("svg", { "data-spinner-indicator": "", "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", style: { display: "block", animation: metrics.visual.duration > 0 ? `phreshos-ui-spin ${Math.max(600, metrics.visual.appearance.transaction.duration * 5)}ms linear infinite` : undefined }, children: [_jsx("circle", { "data-spinner-track": "", cx: "12", cy: "12", r: "9", stroke: colorOpacity(arc, 0.2), strokeWidth: "3" }), _jsx("circle", { "data-spinner-fill": "", cx: "12", cy: "12", r: "9", pathLength: "100", stroke: arc, strokeWidth: "3", strokeLinecap: "round", strokeDasharray: "30 70" })] })] });
+    const indicator = _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx("svg", { "data-spinner-indicator": "", "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", style: { display: "block", animation: metrics.visual.duration > 0 ? `phreshos-ui-spin ${loopDuration(metrics.visual)}ms linear infinite` : undefined }, children: _jsx("circle", { "data-spinner-fill": "", cx: "12", cy: "12", r: "11", pathLength: "100", stroke: arc, strokeWidth: "2", strokeDasharray: "75 25", transform: "rotate(-90 12 12)" }) })] });
     if (decorative)
         return _jsx("div", { ...properties, ref: ref, "aria-hidden": "true", className: className, style: rootStyle, children: indicator });
     return _jsx(AriaProgressBar, { ...properties, ref: ref, "aria-label": label, className: className, isIndeterminate: true, style: rootStyle, children: indicator });

package/dist/tooltip.d.ts

@@ -4,7 +4,9 @@ import { type ButtonActionProps } from "./button.js";
 import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
 import { type Direction } from "./foundation/direction.js";
 import { type SurfaceOwnProps } from "./surface/surface.js";
-export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTriggerProps, "delay" | "closeDelay" | "trigger">> & Readonly<{
+export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTriggerProps, "closeDelay" | "trigger">> & Readonly<{
+    /** Milliseconds the pointer rests on the trigger before the Tooltip opens: four Appearance transactions by default. */
+    delay?: number;
     /** Whether the Tooltip is prevented from opening. */
     disabled?: boolean;
     /** Whether pressing the trigger closes the Tooltip. Defaults to `true`. */
@@ -18,6 +20,8 @@ export interface TooltipContentProps extends Omit<AriaTooltipProps, AriaOverlayI
     readonly children?: ReactNode;
     readonly className?: string;
     readonly dir?: Direction;
+    /** DOM container that owns the positioned overlay's coordinate space. */
+    readonly portalContainer?: Element;
     readonly style?: CSSProperties;
 }
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tooltip.js

@@ -12,17 +12,19 @@ import { useVisual } from "./foundation/visual.js";
 import { floatingShadow } from "./surface/shadow-options.js";
 import { Surface } from "./surface/surface.js";
 export function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }) {
-    return _jsx(AriaTooltipTrigger, { ...ariaOpenState(state), delay: delay, closeDelay: closeDelay, trigger: trigger, isDisabled: disabled, shouldCloseOnPress: closeOnPress, children: children });
+    // A pointer resting on a trigger for four Appearance transactions is asking what it is.
+    const rest = useVisual().appearance.transaction.duration * 4;
+    return _jsx(AriaTooltipTrigger, { ...ariaOpenState(state), delay: delay ?? rest, closeDelay: closeDelay, trigger: trigger, isDisabled: disabled, shouldCloseOnPress: closeOnPress, children: children });
 }
 export const TooltipTrigger = forwardRef(function TooltipTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", dir, ...attributes }, ref) {
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", dir, portalContainer, ...attributes }, ref) {
     const visual = useVisual();
     const inset = scale(visual.spacing, "small");
     const transition = overlayTransition(visual);
     const direction = resolveDirection(dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), UNSTABLE_portalContainer: portalContainer, className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
                         boxSizing: "border-box",
                         maxWidth: "28em",
                         paddingBlock: inset,

package/dist/use-window-move-handle.d.ts

@@ -1,4 +1,4 @@
-import type { BeginWindowMoveGesture } from "@phreshos/core";
+import type { BeginPresentationMoveGesture } from "@phreshos/core";
 import { type PointerEventHandler } from "react";
 export interface WindowMoveHandle {
     onPointerDown: PointerEventHandler<HTMLElement>;
@@ -8,4 +8,4 @@ export interface WindowMoveHandle {
     onLostPointerCapture: PointerEventHandler<HTMLElement>;
 }
 /** Turns one DOM element into a move handle for any compatible host gesture. */
-export default function useWindowMoveHandle(beginMoveGesture?: BeginWindowMoveGesture, onError?: (error: unknown) => void): WindowMoveHandle;
+export default function useWindowMoveHandle(beginMoveGesture?: BeginPresentationMoveGesture, onError?: (error: unknown) => void): WindowMoveHandle;

package/dist/window.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
-import type { BeginWindowMoveGesture } from "@phreshos/core";
+import type { BeginPresentationMoveGesture } from "@phreshos/core";
 import { type ButtonActionProps } from "./button.js";
 import { type Color } from "./foundation/color.js";
 import { type SurfaceProps } from "./surface/surface.js";
@@ -16,7 +16,7 @@ export interface WindowHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
     /** Base color inherited by header-owned text and icons. */
     readonly color?: Color;
     /** Hands an intentional header drag to its host after the pointer threshold. */
-    readonly beginMoveGesture?: BeginWindowMoveGesture;
+    readonly beginMoveGesture?: BeginPresentationMoveGesture;
     /** Whether the represented window is currently maximized. */
     readonly maximized?: boolean;
     /** Toggles the represented window between maximized and restored states. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -57,7 +57,7 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@internationalized/date": "^3.12.3",
-    "@phreshos/core": "^0.1.66",
+    "@phreshos/core": "^0.1.67",
     "colorjs.io": "^0.7.1",
     "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",