@phreshos/react-ui 0.1.38 → 0.1.40

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.38",
+  "version": "0.1.40",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,