@phreshos/react-ui 0.1.39 → 0.1.41

package/dist/toast.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, UNSTABLE_Toast as AriaToast, UNSTABLE_ToastContent as AriaToastContent, UNSTABLE_ToastQueue as AriaToastQueue, UNSTABLE_ToastRegion as AriaToastRegion } from "react-aria-components";
+import { X } from "lucide-react";
+import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { FieldButton } from "./control/field-button.js";
+import { iconProps } from "./control/icon.js";
+import { meaningIcon } from "./control/meaning.js";
+import { colorLevel, resolveColor } from "./foundation/color.js";
+import MotionStyle, { overlayLayer, overlayTransition } from "./foundation/motion-style.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { scale } from "./foundation/scale.js";
+import { Surface } from "./surface/surface.js";
+import { floatingShadow } from "./surface/shadow-options.js";
+const queue = new AriaToastQueue({ maxVisibleToasts: 5 });
+/**
+ * Shows a brief message that does not interrupt, such as "Saved". It appears
+ * in the ToastRegion and returns a key that closes it early.
+ */
+export const toast = Object.freeze({
+    show(content, options = {}) {
+        return queue.add(content, options.timeout === undefined ? {} : { timeout: options.timeout });
+    },
+    close(key) {
+        queue.close(key);
+    }
+});
+/**
+ * Where Toasts appear: stacked at the end of the viewport bottom, above the
+ * interface, at the large spacing step from its edges. Render it once.
+ */
+export function ToastRegion({ className, style }) {
+    const metrics = useControlMetrics();
+    const visual = metrics.visual;
+    const inset = scale(visual.spacing, "large");
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaToastRegion, { queue: queue, className: className, style: {
+                    position: "fixed",
+                    insetBlockEnd: inset,
+                    insetInlineEnd: inset,
+                    zIndex: overlayLayer,
+                    display: "flex",
+                    flexDirection: "column-reverse",
+                    // Each Toast is as wide as its message, up to the width of a readable line.
+                    alignItems: "end",
+                    gap: metrics.gap,
+                    maxWidth: `min(28em, calc(100vw - ${inset * 2}px))`,
+                    outline: "none",
+                    ...style
+                }, children: ({ toast: item }) => {
+                    const color = item.content.color ?? "info";
+                    const Icon = meaningIcon(color);
+                    return _jsx(AriaToast, { toast: item, style: { outline: "none", ...overlayTransition(visual), animation: `phreshos-ui-overlay-enter var(--phreshos-ui-motion-duration) var(--phreshos-ui-motion-easing) both` }, children: _jsxs(Surface, { material: "full", shadow: floatingShadow(visual.shadow), radius: resolveRadius("medium", visual.radius), style: {
+                                display: "grid",
+                                gridTemplateColumns: "auto minmax(0, 1fr) auto",
+                                alignItems: "start",
+                                gap: metrics.gap * 2,
+                                padding: metrics.spacing,
+                                paddingInlineEnd: metrics.spacing / 2,
+                                fontSize: controlFontSizes.medium,
+                                lineHeight: 1.45
+                            }, children: [_jsx("span", { style: { display: "grid", height: "1.45em", alignItems: "center", color: colorLevel(resolveColor(color, visual.colors), "strong", visual.colors) }, children: _jsx(Icon, { ...iconProps(Math.round(metrics.height / 2)) }) }), _jsxs(AriaToastContent, { style: { display: "grid", gap: 2, minWidth: 0 }, children: [_jsx(Text, { slot: "title", style: { fontWeight: controlFontWeight }, children: item.content.title }), item.content.description != null && _jsx(Text, { slot: "description", style: { opacity: controlOpacity.secondary }, children: item.content.description })] }), _jsx(FieldButton, { slot: "close", metrics: metrics, "aria-label": "Close", children: _jsx(X, { ...iconProps(Math.round(metrics.height / 2)) }) })] }) });
+                } })] });
+}

package/dist/typography.d.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties, ReactNode } from "react";
+import { type ScaleLevel } from "./foundation/scale.js";
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps {
+    readonly children?: ReactNode;
+    /** The document level, from 1 to 6. */
+    readonly level?: HeadingLevel;
+    /** The visual size, when it should differ from the level's. */
+    readonly size?: ScaleLevel;
+    readonly id?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** A heading sized relative to the text around it, so it fits any context. */
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface TextProps {
+    readonly children?: ReactNode;
+    /** `secondary` recedes to the strength of supporting text, like descriptions. */
+    readonly tone?: "default" | "secondary";
+    /** The control text scale; omitted, the text keeps the size around it. */
+    readonly size?: ScaleLevel;
+    /** A slot name when the text describes a field or item, such as `description`. */
+    readonly slot?: string;
+    readonly elementType?: string;
+    readonly id?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** Running text in the tone and scale of the interface. */
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
+export interface KbdProps {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * A key to press, drawn as a small raised keycap. Its label takes the control
+ * text scale, and the cap is as tall as the line of text around it, so it
+ * never stretches the line.
+ */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+export interface CodeProps {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** Code inside text, set in the system monospace font in a shallow recess. */
+export declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/typography.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Heading as AriaHeading, Keyboard as AriaKeyboard, Text as AriaText } from "react-aria-components";
+import { controlFontSizes, controlFontWeight, controlOpacity, useControlMetrics } from "./control/control.js";
+import { scale, scaleMultiplier } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { Surface } from "./surface/surface.js";
+/** The size each heading level takes unless `size` says otherwise. */
+const levelSizes = Object.freeze({ 1: "xlarge", 2: "large", 3: "medium", 4: "small", 5: "xsmall", 6: "xsmall" });
+/**
+ * Headings grow by the same ladder Appearance values scale by, anchored at the
+ * large step: a medium heading is one and a half times its surrounding text,
+ * an xlarge heading twice.
+ */
+const headingGrowth = scale(1, "large");
+/** A heading sized relative to the text around it, so it fits any context. */
+export const Heading = forwardRef(function Heading({ level = 2, size, style, ...properties }, ref) {
+    return _jsx(AriaHeading, { ...properties, ref: ref, level: level, style: {
+            margin: 0,
+            fontSize: `${scaleMultiplier(headingGrowth, size ?? levelSizes[level])}em`,
+            fontWeight: controlFontWeight,
+            lineHeight: 1.2,
+            textWrap: "balance",
+            ...style
+        } });
+});
+/** Running text in the tone and scale of the interface. */
+export const Text = forwardRef(function Text({ tone = "default", size, style, ...properties }, ref) {
+    return _jsx(AriaText, { ...properties, ref: ref, style: {
+            fontSize: size === undefined ? undefined : controlFontSizes[size],
+            lineHeight: textLineHeight,
+            opacity: tone === "secondary" ? controlOpacity.secondary : undefined,
+            ...style
+        } });
+});
+/** Running text sets its lines at this height, relative to its size. */
+const textLineHeight = 1.45;
+/**
+ * A key to press, drawn as a small raised keycap. Its label takes the control
+ * text scale, and the cap is as tall as the line of text around it, so it
+ * never stretches the line.
+ */
+export const Kbd = forwardRef(function Kbd({ children, className, style }, ref) {
+    const metrics = useControlMetrics("xsmall");
+    const label = Number.parseFloat(controlFontSizes.medium);
+    const cap = `${textLineHeight / label}em`;
+    return _jsx(AriaKeyboard, { ref: ref, className: className, style: { display: "inline-block", verticalAlign: "middle", lineHeight: 1 }, children: _jsx(Surface, { as: "span", radius: metrics.radius, shadow: false, style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: cap,
+                height: cap,
+                paddingInline: metrics.gap,
+                boxSizing: "border-box",
+                fontSize: controlFontSizes.medium,
+                fontWeight: controlFontWeight,
+                fontVariantNumeric: "tabular-nums",
+                lineHeight: 1,
+                ...style
+            }, children: children }) });
+});
+/** Code inside text, set in the system monospace font in a shallow recess. */
+export const Code = forwardRef(function Code({ children, className, style }, ref) {
+    const visual = useVisual();
+    return _jsx(Surface, { as: "code", ref: ref, className: className, color: "background", depth: "recessed", radius: scale(visual.radius, "small"), style: {
+            paddingInline: scale(visual.spacing, "xsmall"),
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            fontSize: "0.9em",
+            ...style
+        }, children: children });
+});

package/dist/window.d.ts

@@ -3,7 +3,10 @@ import type { BeginWindowMoveGesture } from "@phreshos/core";
 import { type ButtonActionProps } from "./button.js";
 import { type Color } from "./foundation/color.js";
 import { type SurfaceProps } from "./surface/surface.js";
-/** The material shell that establishes the complete header-and-content layout. */
+/**
+ * The material shell that establishes the complete header-and-content layout.
+ * The Window owns its shape: nothing inside is drawn past its edges or corners.
+ */
 export type WindowProps = SurfaceProps;
 /** The remaining window area. Its consumer owns content behavior, including overflow. */
 export type WindowContentProps = HTMLAttributes<HTMLDivElement>;

package/dist/window.js

@@ -23,6 +23,8 @@ const WindowRoot = forwardRef(function WindowRoot({ children, style, ...properti
             flexDirection: "column",
             minWidth: 0,
             minHeight: 0,
+            // Clips to the rounded shape without becoming a scroll container.
+            overflow: "clip",
             ...style
         }, children: children });
 });

package/package.json

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