@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/three/galaxyLogomark3DScene.d.ts

@@ -0,0 +1,27 @@
+/** @internal What the scene draws; the component passes its props and the resolved color. */
+export interface GalaxyLogomark3DSceneOptions {
+    /** Canvas width and height in CSS px. */
+    size: number;
+    /** Material color as a resolved hex (`solid.primary.background` or `background.base`). */
+    color: string;
+    /** Spin around the vertical axis at `speed`. */
+    isAutoRotate: boolean;
+    /** Drag to orbit (no zoom, no pan). */
+    isInteractive: boolean;
+    /** Double flip on random axes when the pointer enters. */
+    isHoverable: boolean;
+    /** Auto-rotation rate in rad/s; the flip lasts `0.5 / speed` s. */
+    speed: number;
+}
+/** @internal A mounted scene. */
+export interface GalaxyLogomark3DScene {
+    /** Applies new options without rebuilding the scene. */
+    update(options: GalaxyLogomark3DSceneOptions): void;
+    /** Stops the loop and frees every GPU resource and listener. */
+    dispose(): void;
+}
+/**
+ * @internal Renders the Galaxy logomark into `canvas` and keeps it moving until `dispose()`.
+ * Calls `onFirstFrame` once, after the first frame is drawn.
+ */
+export declare function mountGalaxyLogomark3DScene(canvas: HTMLCanvasElement, options: GalaxyLogomark3DSceneOptions, onFirstFrame: () => void): GalaxyLogomark3DScene;

package/dist/three/galaxyLogomark3DScene.js

@@ -0,0 +1,165 @@
+import galaxy_logomark_default from "./assets/galaxy-logomark.js";
+import { ACESFilmicToneMapping, AmbientLight, Box3, DirectionalLight, Group, MathUtils, Mesh, MeshPhysicalMaterial, PMREMGenerator, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
+import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
+//#region src/three/galaxyLogomark3DScene.ts
+/**
+* @internal The three.js scene behind `GalaxyLogomark3D`; not documented API. The component loads
+* this module with a dynamic `import()` after mount, so three.js and the ~2.4 MB model stay out of
+* every other module's graph and out of build-time evaluation. A port of the 1.x
+* react-three-fiber scene with its default look: one glossy physical material, the simple
+* three-light rig, a procedural `RoomEnvironment` (no CDN fetch), drag-to-orbit only.
+*/
+/** The 1.x mesh scale: the resting mark spans ≈ 76% of the canvas at the 1.x camera. */
+var MESH_SCALE = .088;
+/** Reflection strength of the room environment on the material (1.x default, tuned in Storybook). */
+var ENV_MAP_INTENSITY = 1.5;
+/** Ease-out-quart, the 1.x flip curve. */
+var easeOutQuart = (progress) => 1 - (1 - progress) ** 4;
+/** Eases an angle 10% of the way to rest by the shortest way, snapping to 0 once invisible. */
+var settle = (angle) => {
+	const next = MathUtils.lerp(wrapAngle(angle), 0, .1);
+	return Math.abs(next) < 1e-4 ? 0 : next;
+};
+/** The same angle in [-π, π). */
+var wrapAngle = (angle) => MathUtils.euclideanModulo(angle + Math.PI, Math.PI * 2) - Math.PI;
+/** -1, 0 or 1. */
+var randomAxis = () => Math.floor(Math.random() * 3) - 1;
+/**
+* @internal Renders the Galaxy logomark into `canvas` and keeps it moving until `dispose()`.
+* Calls `onFirstFrame` once, after the first frame is drawn.
+*/
+function mountGalaxyLogomark3DScene(canvas, options, onFirstFrame) {
+	let current = options;
+	const renderer = new WebGLRenderer({
+		canvas,
+		alpha: true,
+		antialias: true
+	});
+	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+	renderer.setSize(current.size, current.size, false);
+	renderer.setClearAlpha(0);
+	renderer.toneMapping = ACESFilmicToneMapping;
+	const camera = new PerspectiveCamera(45, 1, .1, 100);
+	camera.position.set(0, 0, 4);
+	const scene = new Scene();
+	scene.add(new AmbientLight(void 0, .5));
+	const keyLight = new DirectionalLight(void 0, 1);
+	keyLight.position.set(10, 10, 5);
+	scene.add(keyLight);
+	const fillLight = new DirectionalLight(void 0, .5);
+	fillLight.position.set(-10, -10, -5);
+	scene.add(fillLight);
+	const pmremGenerator = new PMREMGenerator(renderer);
+	const roomEnvironment = new RoomEnvironment();
+	const environmentTexture = pmremGenerator.fromScene(roomEnvironment, .04).texture;
+	roomEnvironment.dispose();
+	scene.environment = environmentTexture;
+	const material = new MeshPhysicalMaterial({
+		color: current.color,
+		sheenColor: current.color,
+		metalness: 0,
+		roughness: 0,
+		transmission: 0,
+		thickness: 0,
+		ior: 1,
+		clearcoat: 0,
+		clearcoatRoughness: 0,
+		sheen: 1,
+		sheenRoughness: 0,
+		envMapIntensity: ENV_MAP_INTENSITY
+	});
+	const model = new OBJLoader().parse(galaxy_logomark_default);
+	model.traverse((child) => {
+		if (child instanceof Mesh) child.material = material;
+	});
+	model.position.sub(new Box3().setFromObject(model).getCenter(new Vector3()));
+	const group = new Group();
+	group.scale.setScalar(MESH_SCALE);
+	group.add(model);
+	scene.add(group);
+	const controls = new OrbitControls(camera, canvas);
+	controls.enableRotate = true;
+	controls.enableZoom = false;
+	controls.enablePan = false;
+	const setInteractive = (isInteractive) => {
+		controls.enabled = isInteractive;
+		if (isInteractive) controls.connect(canvas);
+		else controls.disconnect();
+	};
+	if (!current.isInteractive) setInteractive(false);
+	const startTime = performance.now();
+	const elapsedSeconds = () => (performance.now() - startTime) / 1e3;
+	let flipStart = null;
+	let flipAxes = {
+		x: 0,
+		y: 1,
+		z: 0
+	};
+	const onPointerEnter = () => {
+		if (!current.isHoverable) return;
+		let axes = {
+			x: randomAxis(),
+			y: randomAxis(),
+			z: randomAxis()
+		};
+		while (axes.x === 0 && axes.y === 0 && axes.z === 0) axes = {
+			x: randomAxis(),
+			y: randomAxis(),
+			z: randomAxis()
+		};
+		flipAxes = axes;
+		flipStart = elapsedSeconds();
+	};
+	canvas.addEventListener("pointerenter", onPointerEnter);
+	let hasDrawn = false;
+	let frame = 0;
+	const tick = () => {
+		frame = requestAnimationFrame(tick);
+		const elapsed = elapsedSeconds();
+		const flipDuration = .5 / current.speed;
+		const { rotation } = group;
+		if (flipStart !== null && elapsed - flipStart < flipDuration) {
+			const turn = easeOutQuart((elapsed - flipStart) / flipDuration) * Math.PI * 4;
+			rotation.set(turn * flipAxes.x, turn * flipAxes.y, turn * flipAxes.z);
+		} else {
+			flipStart = null;
+			rotation.x = settle(rotation.x);
+			rotation.z = settle(rotation.z);
+			rotation.y = current.isAutoRotate ? elapsed * current.speed : settle(rotation.y);
+		}
+		renderer.render(scene, camera);
+		if (!hasDrawn) {
+			hasDrawn = true;
+			onFirstFrame();
+		}
+	};
+	frame = requestAnimationFrame(tick);
+	return {
+		update(next) {
+			if (next.size !== current.size) renderer.setSize(next.size, next.size, false);
+			if (next.color !== current.color) {
+				material.color.set(next.color);
+				material.sheenColor.set(next.color);
+			}
+			if (next.isInteractive !== current.isInteractive) setInteractive(next.isInteractive);
+			current = next;
+		},
+		dispose() {
+			cancelAnimationFrame(frame);
+			canvas.removeEventListener("pointerenter", onPointerEnter);
+			controls.dispose();
+			model.traverse((child) => {
+				if (child instanceof Mesh) child.geometry.dispose();
+			});
+			material.dispose();
+			environmentTexture.dispose();
+			pmremGenerator.dispose();
+			renderer.dispose();
+			renderer.forceContextLoss();
+		}
+	};
+}
+//#endregion
+export { mountGalaxyLogomark3DScene };

package/dist/timeline/Timeline.d.ts

@@ -0,0 +1,99 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import type { PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs (subset); the member names the type step of the event text. */
+export declare enum TimelineSize {
+    /** body_sm text, 16px box, 4px dot, 10px icon, 12px between events. */
+    SMALL = "SMALL",
+    /** body_md text, 20px box, 4px dot, 12px icon, 16px between events. The default. */
+    MEDIUM = "MEDIUM",
+    /** body_lg text, 24px box, 6px dot, 14px icon, 24px between events. */
+    LARGE = "LARGE"
+}
+/** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
+export declare enum TimelineVariant {
+    /** `text.primary` marker in a `border.primary` box. */
+    PRIMARY = "PRIMARY",
+    /** `text.secondary` marker in a `border.primary` box. The default. */
+    SECONDARY = "SECONDARY",
+    /** `text.tertiary` marker in a `border.primary` box. */
+    TERTIARY = "TERTIARY",
+    /** `text.disabled` marker in a `border.disabled` box: a skipped or cancelled step. */
+    DISABLED = "DISABLED",
+    /** `currentColor` of the item (`text.primary`) in a `border.primary` box. */
+    INHERIT = "INHERIT",
+    /** `text.success` marker in a `border.success` box. */
+    SUCCESS = "SUCCESS",
+    /** `text.warning` marker in a `border.warning` box. */
+    WARNING = "WARNING",
+    /** `text.error` marker in a `border.error` box. */
+    ERROR = "ERROR"
+}
+/** The fields of an event other than its marker color. */
+interface TimelineItemBase {
+    /** Stable identity of the event, used as the React key. Not rendered. */
+    id: string;
+    /** What happened, in a few words ("Run started"). Primary text; wraps when long. */
+    label: string;
+    /** Detail under the label, in secondary text ("12,480 rows loaded into contacts"). */
+    description?: string;
+    /** When it happened, already formatted by the app ("14:02", "2 min ago"). Shown at the end of the label line. */
+    time?: string;
+    /** Machine-readable form of `time` (ISO 8601). When set, `time` renders inside `<time dateTime>`. */
+    dateTime?: string;
+    /** Marker icon, a Phosphor component (`CheckIcon`, not `<CheckIcon />`). Without it the marker is a dot. */
+    icon?: PhosphorIcon;
+    /**
+     * The event is in progress: a dot marker pulses and the item gets `aria-current="step"`.
+     * @default false
+     */
+    isActive?: boolean;
+    /** Content under the description: links, chips, a button, a code block. */
+    footer?: ReactNode;
+}
+/** An event whose marker is colored by meaning (`variant`), or the default `SECONDARY`. */
+interface TimelineItemVariantProps {
+    /**
+     * Marker color role: a neutral step or a status. Not with `color`.
+     * @default TimelineVariant.SECONDARY
+     */
+    variant?: TimelineVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** An event whose marker is colored by category (`color`). */
+interface TimelineItemColorProps {
+    /**
+     * Marker color role: a neutral step or a status. Not with `color`.
+     * @default TimelineVariant.SECONDARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): the dot or icon takes `text.<family>`
+     * and the box `border.<family>`, the way a status variant renders. For an event's category (a source, a team); meanings take
+     * `variant`. Not with `variant`.
+     */
+    color: PaletteColor;
+}
+/** One event on the timeline. Passing both `variant` and `color` is a type error. */
+export type TimelineItem = TimelineItemBase & (TimelineItemVariantProps | TimelineItemColorProps);
+export interface TimelineProps extends AriaAttributes {
+    /** The events, in the order to show. */
+    items: TimelineItem[];
+    /**
+     * Type step of the label, time and description (`body_sm` / `body_md` / `body_lg`), the marker box (16 / 20 / 24px) and the space between events.
+     * @default TimelineSize.MEDIUM
+     */
+    size?: TimelineSize;
+    /** DOM id on the root `<ol>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<ol>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<ol>`. */
+    className?: string;
+    /** Inline style on the root `<ol>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A vertical list of events with boxed dot or icon markers on a hairline rail. */
+declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
+export default Timeline;

package/dist/timeline/Timeline.js

@@ -0,0 +1,269 @@
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import Beacon, { BeaconSize, BeaconVariant } from "../beacons/Beacon.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/timeline/Timeline.tsx
+/**
+* A sequence of events in time order, top to bottom: a pipeline run's history, a sync's steps, an
+* audit trail, an activity feed. Each item is a marker on a vertical rail (a `Beacon` dot, or an
+* `Icon` when `icon` is set, inside a small square hairline box with no fill), a one-line label
+* centered on the box, an optional time at the end of the label line, an optional description and
+* an optional footer. A 0.5px rail runs from the bottom edge of each box to the top edge of the
+* next, whatever the item's height. Only the marker takes the item's color-set `variant` (a
+* meaning) or categorical `color` (a palette family): the dot or icon its text color, the box its
+* border color. The words stay primary and secondary.
+*
+* Read-only: it does not order, group, fetch or format anything. An ordered list (`<ol>`, kept a
+* list in Safari with `role="list"` because the package reset removes list styling); the rail is
+* decorative. Not a `Stepper`, a table, or a chart over a time axis.
+*/
+/** Canonical rungs (subset); the member names the type step of the event text. */
+var TimelineSize = /* @__PURE__ */ function(TimelineSize) {
+	/** body_sm text, 16px box, 4px dot, 10px icon, 12px between events. */
+	TimelineSize["SMALL"] = "SMALL";
+	/** body_md text, 20px box, 4px dot, 12px icon, 16px between events. The default. */
+	TimelineSize["MEDIUM"] = "MEDIUM";
+	/** body_lg text, 24px box, 6px dot, 14px icon, 24px between events. */
+	TimelineSize["LARGE"] = "LARGE";
+	return TimelineSize;
+}({});
+/** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
+var TimelineVariant = /* @__PURE__ */ function(TimelineVariant) {
+	/** `text.primary` marker in a `border.primary` box. */
+	TimelineVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary` marker in a `border.primary` box. The default. */
+	TimelineVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary` marker in a `border.primary` box. */
+	TimelineVariant["TERTIARY"] = "TERTIARY";
+	/** `text.disabled` marker in a `border.disabled` box: a skipped or cancelled step. */
+	TimelineVariant["DISABLED"] = "DISABLED";
+	/** `currentColor` of the item (`text.primary`) in a `border.primary` box. */
+	TimelineVariant["INHERIT"] = "INHERIT";
+	/** `text.success` marker in a `border.success` box. */
+	TimelineVariant["SUCCESS"] = "SUCCESS";
+	/** `text.warning` marker in a `border.warning` box. */
+	TimelineVariant["WARNING"] = "WARNING";
+	/** `text.error` marker in a `border.error` box. */
+	TimelineVariant["ERROR"] = "ERROR";
+	return TimelineVariant;
+}({});
+/** The ordered list of events. */
+var Root = /*#__PURE__*/ styled("ol")({
+	name: "Root",
+	class: "gx-Timeline-rzjag0b",
+	propsAsIs: false
+});
+/**
+* One event: the rail column and the body column in one grid row, so the rail stretches to the
+* event's full height (its content plus the space before the next event) with no measurement.
+*/
+var Item = /*#__PURE__*/ styled("li")({
+	name: "Item",
+	class: "gx-Timeline-Item-ihxmlb4",
+	propsAsIs: false
+});
+/**
+* The marker box, then the connector: the connector fills from the box's bottom edge to the item's
+* bottom edge, which is the next item's top edge and so the top of the next box. No gap, no overlap.
+*/
+var Rail = /*#__PURE__*/ styled("span")({
+	name: "Rail",
+	class: "gx-Timeline-Rail-rfxm9ra",
+	propsAsIs: false
+});
+/**
+* A square hairline box holding the dot or icon: no fill, the item's border color (the
+* neutral \`border.primary\`, a status border or a palette family's border).
+*/
+var Marker = /*#__PURE__*/ styled("span")({
+	name: "Marker",
+	class: "gx-Timeline-Marker-m11eshsv",
+	propsAsIs: false
+});
+/** The 0.5px hairline from the bottom of this box to the top of the next one. */
+var Connector = /*#__PURE__*/ styled("span")({
+	name: "Connector",
+	class: "gx-Timeline-Connector-c1u5y4o2",
+	propsAsIs: false
+});
+/**
+* Label line, description and footer. The top padding centers the first line on the box; the space
+* between events is bottom padding here, so the connector crosses it.
+*/
+var Body = /*#__PURE__*/ styled("div")({
+	name: "Body",
+	class: "gx-Timeline-Body-b132ryei",
+	propsAsIs: false
+});
+/** The label wraps; the time stays at the end of the first line. */
+var Heading = /*#__PURE__*/ styled("div")({
+	name: "Heading",
+	class: "gx-Timeline-Heading-h1j1o23c",
+	propsAsIs: false
+});
+/**
+* Links, chips, a button, a code block. Inline items keep their size and wrap; block content (a
+* `CodeBlock`, a `JsonViewer`) takes the whole row, so code and JSON fill the body's width.
+*/
+var Footer = /*#__PURE__*/ styled("div")({
+	name: "Footer",
+	class: "gx-Timeline-Footer-f6c9753",
+	propsAsIs: false
+});
+/**
+* The time in the second column, on one line. A flex box, so a `<time>` wrapper has no line strut
+* of its own (the inherited font size) and shares the label's baseline at every size.
+*/
+var TIME_CSS = "gx-Timeline-TIME_CSS-t1fj1oub";
+/** Line height, marker box (16 / 20 / 24px), column gap and event spacing per rung. */
+var TIMELINE_SIZE_TO_CSS_MAP = {
+	["SMALL"]: "gx-Timeline-SMALL-s1whgn5t",
+	["MEDIUM"]: "gx-Timeline-MEDIUM-m1j9kdi1",
+	["LARGE"]: "gx-Timeline-LARGE-leakmyp"
+};
+/** The event text's type step. */
+var TIMELINE_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
+};
+/** The rung's icon size, in px, inside the 16 / 20 / 24px box. */
+var TIMELINE_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 14
+};
+/** The dot's rung, one step below the text so it sits quietly in the smaller box. */
+var TIMELINE_SIZE_TO_BEACON_SIZE_MAP = {
+	["SMALL"]: BeaconSize.X_SMALL,
+	["MEDIUM"]: BeaconSize.SMALL,
+	["LARGE"]: BeaconSize.MEDIUM
+};
+/** Identity: the item variant is the dot's. */
+var TIMELINE_VARIANT_TO_BEACON_VARIANT_MAP = {
+	["PRIMARY"]: BeaconVariant.PRIMARY,
+	["SECONDARY"]: BeaconVariant.SECONDARY,
+	["TERTIARY"]: BeaconVariant.TERTIARY,
+	["DISABLED"]: BeaconVariant.DISABLED,
+	["INHERIT"]: BeaconVariant.INHERIT,
+	["SUCCESS"]: BeaconVariant.SUCCESS,
+	["WARNING"]: BeaconVariant.WARNING,
+	["ERROR"]: BeaconVariant.ERROR
+};
+/** Identity: the item variant is the icon's. */
+var TIMELINE_VARIANT_TO_ICON_VARIANT_MAP = {
+	["PRIMARY"]: IconVariant.PRIMARY,
+	["SECONDARY"]: IconVariant.SECONDARY,
+	["TERTIARY"]: IconVariant.TERTIARY,
+	["DISABLED"]: IconVariant.DISABLED,
+	["INHERIT"]: IconVariant.INHERIT,
+	["SUCCESS"]: IconVariant.SUCCESS,
+	["WARNING"]: IconVariant.WARNING,
+	["ERROR"]: IconVariant.ERROR
+};
+/** The marker box's hairline per variant: neutral roles keep `border.primary`; statuses take theirs. */
+var TIMELINE_VARIANT_TO_BORDER_CSS_MAP = {
+	["PRIMARY"]: "gx-Timeline-PRIMARY-p1vcatjx",
+	["SECONDARY"]: "gx-Timeline-SECONDARY-s1195fxg",
+	["TERTIARY"]: "gx-Timeline-TERTIARY-t1oqbau9",
+	["DISABLED"]: "gx-Timeline-DISABLED-d11wi4d2",
+	["INHERIT"]: "gx-Timeline-INHERIT-i1r53y3e",
+	["SUCCESS"]: "gx-Timeline-SUCCESS-s61v3n7",
+	["WARNING"]: "gx-Timeline-WARNING-w1tjq5mm",
+	["ERROR"]: "gx-Timeline-ERROR-ea735oo"
+};
+/**
+* Categorical `color` on the marker: `text.<family>`, which an icon marker (`IconVariant.INHERIT`)
+* takes, and `border.<family>` on the box.
+*/
+var TIMELINE_COLOR_TO_CSS_MAP = {
+	red: "gx-Timeline-red-r1ayi32k",
+	orange: "gx-Timeline-orange-o155vzhv",
+	amber: "gx-Timeline-amber-atnc6wm",
+	yellow: "gx-Timeline-yellow-y1q3p1vl",
+	lime: "gx-Timeline-lime-l1khc5e9",
+	green: "gx-Timeline-green-gob0jun",
+	emerald: "gx-Timeline-emerald-ecpz10x",
+	teal: "gx-Timeline-teal-t1arc1uv",
+	cyan: "gx-Timeline-cyan-c1x7dvj6",
+	sky: "gx-Timeline-sky-s1fx1m3c",
+	blue: "gx-Timeline-blue-b1gy5gqm",
+	indigo: "gx-Timeline-indigo-ityv4re",
+	violet: "gx-Timeline-violet-v1506u15",
+	purple: "gx-Timeline-purple-p2f8n55",
+	fuchsia: "gx-Timeline-fuchsia-f1bza0tc",
+	pink: "gx-Timeline-pink-p1vbt6lr",
+	rose: "gx-Timeline-rose-rjtm0e"
+};
+/** A vertical list of events with boxed dot or icon markers on a hairline rail. */
+var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className, style, ...rest }, ref) {
+	const textSize = TIMELINE_SIZE_TO_TEXT_SIZE_MAP[size];
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		role: "list",
+		className: cx(TIMELINE_SIZE_TO_CSS_MAP[size], className),
+		style,
+		children: items.map((item, index) => {
+			const { color } = item;
+			const variant = item.variant ?? "SECONDARY";
+			const hasTime = Boolean(item.time);
+			return /* @__PURE__ */ jsxs(Item, {
+				"aria-current": item.isActive === true ? "step" : void 0,
+				children: [/* @__PURE__ */ jsxs(Rail, {
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx(Marker, {
+						className: color !== void 0 ? TIMELINE_COLOR_TO_CSS_MAP[color] : TIMELINE_VARIANT_TO_BORDER_CSS_MAP[variant],
+						children: item.icon === void 0 ? /* @__PURE__ */ jsx(Beacon, {
+							size: TIMELINE_SIZE_TO_BEACON_SIZE_MAP[size],
+							...color !== void 0 ? { color } : { variant: TIMELINE_VARIANT_TO_BEACON_VARIANT_MAP[variant] },
+							isPulse: item.isActive === true
+						}) : /* @__PURE__ */ jsx(Icon, {
+							component: item.icon,
+							size: TIMELINE_SIZE_TO_ICON_PX_MAP[size],
+							variant: color !== void 0 ? IconVariant.INHERIT : TIMELINE_VARIANT_TO_ICON_VARIANT_MAP[variant]
+						})
+					}), index < items.length - 1 && /* @__PURE__ */ jsx(Connector, {})]
+				}), /* @__PURE__ */ jsxs(Body, { children: [
+					/* @__PURE__ */ jsxs(Heading, { children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: TextVariant.PRIMARY,
+						children: item.label
+					}), hasTime && (item.dateTime ? /* @__PURE__ */ jsx("time", {
+						dateTime: item.dateTime,
+						className: TIME_CSS,
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							size: textSize,
+							variant: TextVariant.SECONDARY,
+							isTabular: true,
+							children: item.time
+						})
+					}) : /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						variant: TextVariant.SECONDARY,
+						isTabular: true,
+						className: TIME_CSS,
+						children: item.time
+					}))] }),
+					Boolean(item.description) && /* @__PURE__ */ jsx(Text, {
+						as: "p",
+						size: textSize,
+						variant: TextVariant.SECONDARY,
+						children: item.description
+					}),
+					item.footer !== void 0 && item.footer !== null && /* @__PURE__ */ jsx(Footer, { children: item.footer })
+				] })]
+			}, item.id);
+		})
+	});
+});
+Timeline.displayName = "Timeline";
+//#endregion
+export { TimelineSize, TimelineVariant, Timeline as default };

package/dist/toast/Toast.d.ts

@@ -1,29 +1,53 @@
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-import { ButtonProps } from "../buttons/Button";
-/** Severity. Sets the border tint and the default icon. */
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Severity (Constitution V-A color set, subset; the same members as `AlertVariant`). */
 export declare enum ToastVariant {
+    /** A neutral note (the default): `border.secondary`, an info glyph in `text.secondary`. */
     PRIMARY = "PRIMARY",
+    /** Done: `border.success`, a check glyph. */
     SUCCESS = "SUCCESS",
+    /** Needs attention: `border.warning`, a warning glyph. */
     WARNING = "WARNING",
+    /** Failed: `border.error`, a warning-circle glyph; announced assertively. */
     ERROR = "ERROR"
 }
-export interface ToastProps {
-    /** @default ToastVariant.PRIMARY */
+/** The one action a toast offers. */
+export interface ToastAction {
+    /** Button text ("Undo", "View", "Retry"). */
+    label: string;
+    /** Runs when the button is pressed. Inside the provider the toast is then dismissed. */
+    onClick: () => void;
+}
+export interface ToastProps extends AriaAttributes {
+    /**
+     * Severity: sets the hairline tint, the icon and how urgently it is announced.
+     * @default ToastVariant.PRIMARY
+     */
     variant?: ToastVariant;
-    /** Overrides the icon the variant would pick. Pass the component, not an element. */
+    /** The message ("Source saved"). One short line, medium weight. */
+    header: string;
+    /** Supporting text under the header. Rendered in a `Text`, so inline `Span`, `Code` and `Link` inherit its size and color. */
+    description?: ReactNode;
+    /** Replaces the variant's default icon. Pass the component, not an element. */
     icon?: PhosphorIcon;
-    /** Headline. A string is wrapped in `Text`; a node renders as-is. */
-    header: string | React.ReactNode;
-    /** Supporting line under the header. */
-    subheader: string | React.ReactNode;
-    /** Buttons in a row along the bottom. Each entry is full `ButtonProps`. */
-    actions?: ButtonProps[];
-    /** Adds a dismiss ×. `ToastProvider` supplies this — don't set it by hand. */
-    onClose?: () => void;
+    /** One action button under the text ("Undo", "View"). Choosing it runs `onClick`; inside the provider it also dismisses the toast. */
+    action?: ToastAction;
+    /**
+     * Shows a `Spinner` in place of the icon while the work it reports runs. Inside the provider a loading toast does not time out.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Shows the × button and is called when it is pressed. The provider passes it. */
+    onDismiss?: () => void;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * The toast card itself. You rarely render this directly — call `showToast`
- * from `useToast()` and let `ToastProvider` mount, stack and time it out.
- */
-declare const Toast: ({ variant, icon, header, subheader, actions, onClose, }: ToastProps) => import("react").JSX.Element;
+/** A toast card: severity icon, header, description, one action and a dismiss button. */
+declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Toast;