@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/gauge/gauge.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/gauge/gauge.d.ts
+/**
+ * Gauge: one value against a range, as a ring open at the bottom with the
+ * number at its centre. Use it for a score or a fill level; use Progress for a
+ * task that finishes.
+ *
+ * The ring fills the first time it is seen, slowly and without overshoot, like
+ * a ring closing. After that it springs to each new value with a little life
+ * while the count follows without overshooting. A band that starts at
+ * `from` sets the colour and names the state ("Healthy", "At risk"): the
+ * highest band the value reaches wins, and it changes exactly as the count
+ * crosses the threshold, so state never rests on colour alone. The label,
+ * status and detail rise in when they change, from the side the value moved
+ * toward.
+ *
+ * Plain SVG and CSS. One small spring tween writes the ring and the count
+ * straight to the DOM. The ring is a `meter` for assistive technology.
+ */
+export type GaugeTone = "primary" | "success" | "warning" | "danger";
+export interface GaugeThreshold {
+  /** The band starts at this value (in the same unit as `value`). */
+  from: number;
+  tone: GaugeTone;
+  /** Names the state. Shown under the number and announced with the value. */
+  label: string;
+}
+export interface GaugeProps extends Omit<ComponentPropsWithoutRef<"figure">, "children"> {
+  value: number;
+  /** @default 0 */
+  min?: number;
+  /** @default 100 */
+  max?: number;
+  /** What is measured. Names the meter. */
+  label: string;
+  /** A line under the label, such as "Up 4 from last week". */
+  detail?: string;
+  /** The colour when no band applies. @default "primary" */
+  tone?: GaugeTone;
+  /** Bands that set the tone and name the state. */
+  thresholds?: GaugeThreshold[];
+}
+export declare const Gauge: import("react").ForwardRefExoticComponent<GaugeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=gauge.d.ts.map

package/dist/gauge/gauge.js

@@ -0,0 +1,219 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { MORPH, REVEAL, SMOOTH, live, retarget } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/gauge/gauge.tsx
+/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */
+const RADIUS = 42;
+const START = -135;
+const SPAN = 270;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+function ringFor(sweep) {
+	const end = START + SPAN * clamp(sweep, 0, 1);
+	const at = (angle) => `${(50 + RADIUS * Math.sin(angle * Math.PI / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos(angle * Math.PI / 180)).toFixed(3)}`;
+	return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;
+}
+const TRACK = ringFor(1);
+const Gauge = forwardRef(function Gauge({ value, min = 0, max = 100, label, detail, tone = "primary", thresholds, className, ...props }, ref) {
+	const safeMax = max > min ? max : min + 1;
+	const percentage = clamp((value - min) / (safeMax - min), 0, 1);
+	const displayValue = Math.round(percentage * 100);
+	const bands = [...thresholds ?? []].sort((a, b) => a.from - b.from);
+	const bandAt = (at) => bands.filter((band) => at >= band.from - 1e-6).pop();
+	const band = bandAt(value);
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const ring = useRef(null);
+	const digits = useRef(null);
+	const sizer = useRef(null);
+	const sweep = useRef(live(0));
+	const count = useRef(live(0));
+	const [seen, setSeen] = useState(false);
+	const [filled, setFilled] = useState(false);
+	const [shownBand, setShownBand] = useState(band);
+	const [moved, setMoved] = useState({
+		value: displayValue,
+		direction: 1
+	});
+	if (moved.value !== displayValue) setMoved({
+		value: displayValue,
+		direction: displayValue < moved.value ? -1 : 1
+	});
+	const latest = useRef({
+		bandAt,
+		min,
+		span: safeMax - min,
+		filled
+	});
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			bandAt,
+			min,
+			span: safeMax - min,
+			filled
+		};
+	});
+	const shownRef = useRef(shownBand);
+	useIsomorphicLayoutEffect(() => {
+		shownRef.current = shownBand;
+	});
+	/** One writer: the ring, its fade-in over the first sliver, and the count. */
+	const paint = useCallback(() => {
+		const to = clamp(sweep.current.value, 0, 1);
+		ring.current?.setAttribute("d", ringFor(to));
+		if (ring.current) ring.current.style.opacity = String(clamp(to / .02, 0, 1));
+		const shown = clamp(count.current.value, 0, 100);
+		if (digits.current) digits.current.textContent = String(Math.round(shown));
+		const { bandAt: pick, min: lo, span, filled: done } = latest.current;
+		if (done) {
+			const next = pick(lo + shown / 100 * span);
+			const current = shownRef.current;
+			if (next?.from !== current?.from || next?.label !== current?.label) {
+				shownRef.current = next;
+				setShownBand(next);
+			}
+		}
+	}, []);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setSeen(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setSeen(true);
+		}, { threshold: .5 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const bandRef = useRef(band);
+	useIsomorphicLayoutEffect(() => {
+		bandRef.current = band;
+	});
+	useEffect(() => {
+		if (!seen) return;
+		const first = !latest.current.filled;
+		retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);
+		retarget(count.current, percentage * 100, first ? REVEAL : SMOOTH, paint, 0, first ? () => {
+			latest.current.filled = true;
+			shownRef.current = bandRef.current;
+			setShownBand(bandRef.current);
+			setFilled(true);
+		} : void 0);
+	}, [
+		percentage,
+		seen,
+		paint
+	]);
+	useEffect(() => {
+		const sweeping = sweep.current;
+		const number = count.current;
+		return () => {
+			sweeping.stop();
+			number.stop();
+		};
+	}, []);
+	useIsomorphicLayoutEffect(paint, [paint]);
+	useEffect(() => {
+		const node = sizer.current;
+		const box = digits.current;
+		if (!node || !box || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const shown = filled ? shownBand : band;
+	const activeTone = (filled ? shownBand : band)?.tone ?? tone;
+	const clampedValue = clamp(value, min, safeMax);
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		...props,
+		"data-slot": "gauge",
+		"data-tone": activeTone,
+		className: cn("gauge", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "gauge-visual",
+			role: "meter",
+			"aria-label": label,
+			"aria-valuemin": min,
+			"aria-valuemax": safeMax,
+			"aria-valuenow": clampedValue,
+			"aria-valuetext": `${displayValue}%${band ? `, ${band.label}` : ""}`,
+			className: "gauge-visual",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 100 90",
+				"aria-hidden": "true",
+				focusable: "false",
+				className: "block size-full overflow-visible",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: TRACK,
+					className: "gauge-track"
+				}), /* @__PURE__ */ jsx("path", {
+					ref: ring,
+					className: "gauge-fill",
+					style: { opacity: 0 }
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "gauge-readout",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "gauge-number",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							ref: digits,
+							className: "gauge-digits"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "gauge-unit",
+							children: "%"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							ref: sizer,
+							className: "gauge-sizer",
+							children: displayValue
+						})
+					]
+				}), thresholds ? /* @__PURE__ */ jsx("span", {
+					className: "gauge-status",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: filled ? shown?.label ?? "" : "",
+						dir: moved.direction,
+						className: "block",
+						children: shown?.label
+					})
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsxs("figcaption", {
+			className: "grid min-w-0 gap-0.5",
+			children: [/* @__PURE__ */ jsx("strong", {
+				className: "text-sm font-medium text-foreground",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: label,
+					className: "block",
+					children: label
+				})
+			}), detail ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs tabular-nums text-text-secondary",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: detail,
+					dir: moved.direction,
+					className: "block",
+					children: detail
+				})
+			}) : null]
+		})]
+	});
+});
+//#endregion
+export { Gauge };
+
+//# sourceMappingURL=gauge.js.map

package/dist/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { live, MORPH, retarget, REVEAL, SMOOTH } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Gauge: one value against a range, as a ring open at the bottom with the\n * number at its centre. Use it for a score or a fill level; use Progress for a\n * task that finishes.\n *\n * The ring fills the first time it is seen, slowly and without overshoot, like\n * a ring closing. After that it springs to each new value with a little life\n * while the count follows without overshooting. A band that starts at\n * `from` sets the colour and names the state (\"Healthy\", \"At risk\"): the\n * highest band the value reaches wins, and it changes exactly as the count\n * crosses the threshold, so state never rests on colour alone. The label,\n * status and detail rise in when they change, from the side the value moved\n * toward.\n *\n * Plain SVG and CSS. One small spring tween writes the ring and the count\n * straight to the DOM. The ring is a `meter` for assistive technology.\n */\nexport type GaugeTone = \"primary\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface GaugeThreshold {\n  /** The band starts at this value (in the same unit as `value`). */\n  from: number;\n  tone: GaugeTone;\n  /** Names the state. Shown under the number and announced with the value. */\n  label: string;\n}\n\nexport interface GaugeProps extends Omit<ComponentPropsWithoutRef<\"figure\">, \"children\"> {\n  value: number;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** What is measured. Names the meter. */\n  label: string;\n  /** A line under the label, such as \"Up 4 from last week\". */\n  detail?: string;\n  /** The colour when no band applies. @default \"primary\" */\n  tone?: GaugeTone;\n  /** Bands that set the tone and name the state. */\n  thresholds?: GaugeThreshold[];\n}\n\n/** A 270 degree ring open at the bottom, drawn clockwise from its lower left end. Redrawn from the sweep every frame so the round cap stays exact. */\nconst RADIUS = 42;\nconst START = -135;\nconst SPAN = 270;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\n\nfunction ringFor(sweep: number) {\n  const end = START + SPAN * clamp(sweep, 0, 1);\n  const at = (angle: number) =>\n    `${(50 + RADIUS * Math.sin((angle * Math.PI) / 180)).toFixed(3)} ${(50 - RADIUS * Math.cos((angle * Math.PI) / 180)).toFixed(3)}`;\n  return `M ${at(START)} A ${RADIUS} ${RADIUS} 0 ${end - START > 180 ? 1 : 0} 1 ${at(end)}`;\n}\nconst TRACK = ringFor(1);\n\nexport const Gauge = forwardRef<HTMLElement, GaugeProps>(function Gauge(\n  { value, min = 0, max = 100, label, detail, tone = \"primary\", thresholds, className, ...props },\n  ref,\n) {\n  const safeMax = max > min ? max : min + 1;\n  const percentage = clamp((value - min) / (safeMax - min), 0, 1);\n  const displayValue = Math.round(percentage * 100);\n  const bands = [...(thresholds ?? [])].sort((a, b) => a.from - b.from);\n  const bandAt = (at: number) => bands.filter((band) => at >= band.from - 1e-6).pop();\n  const band = bandAt(value);\n\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const ring = useRef<SVGPathElement>(null);\n  const digits = useRef<HTMLSpanElement>(null);\n  const sizer = useRef<HTMLSpanElement>(null);\n  const sweep = useRef(live(0));\n  const count = useRef(live(0));\n\n  const [seen, setSeen] = useState(false);\n  const [filled, setFilled] = useState(false);\n  // The band on screen: after the first fill it follows the number as it counts.\n  const [shownBand, setShownBand] = useState(band);\n  const [moved, setMoved] = useState({ value: displayValue, direction: 1 });\n  if (moved.value !== displayValue) {\n    setMoved({ value: displayValue, direction: displayValue < moved.value ? -1 : 1 });\n  }\n\n  const latest = useRef({ bandAt, min, span: safeMax - min, filled });\n  useIsomorphicLayoutEffect(() => {\n    latest.current = { bandAt, min, span: safeMax - min, filled };\n  });\n  const shownRef = useRef(shownBand);\n  useIsomorphicLayoutEffect(() => {\n    shownRef.current = shownBand;\n  });\n\n  /** One writer: the ring, its fade-in over the first sliver, and the count. */\n  const paint = useCallback(() => {\n    const to = clamp(sweep.current.value, 0, 1);\n    ring.current?.setAttribute(\"d\", ringFor(to));\n    if (ring.current) ring.current.style.opacity = String(clamp(to / 0.02, 0, 1));\n    const shown = clamp(count.current.value, 0, 100);\n    if (digits.current) digits.current.textContent = String(Math.round(shown));\n    // After the first fill the state follows the number on screen, so the colour and label change as the count crosses a threshold.\n    const { bandAt: pick, min: lo, span, filled: done } = latest.current;\n    if (done) {\n      const next = pick(lo + (shown / 100) * span);\n      const current = shownRef.current;\n      if (next?.from !== current?.from || next?.label !== current?.label) {\n        shownRef.current = next;\n        setShownBand(next);\n      }\n    }\n  }, []);\n\n  // The ring fills once half of it is in view.\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setSeen(true);\n      },\n      { threshold: 0.5 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  // The first fill is slower and never overshoots; later values spring to place, the count a beat calmer.\n  const bandRef = useRef(band);\n  useIsomorphicLayoutEffect(() => {\n    bandRef.current = band;\n  });\n  useEffect(() => {\n    if (!seen) return;\n    const first = !latest.current.filled;\n    retarget(sweep.current, percentage, first ? REVEAL : MORPH, paint);\n    retarget(\n      count.current,\n      percentage * 100,\n      first ? REVEAL : SMOOTH,\n      paint,\n      0,\n      first\n        ? () => {\n            latest.current.filled = true;\n            shownRef.current = bandRef.current;\n            setShownBand(bandRef.current);\n            setFilled(true);\n          }\n        : undefined,\n    );\n  }, [percentage, seen, paint]);\n  useEffect(() => {\n    const sweeping = sweep.current;\n    const number = count.current;\n    return () => {\n      sweeping.stop();\n      number.stop();\n    };\n  }, []);\n  useIsomorphicLayoutEffect(paint, [paint]);\n\n  // The digits sit right aligned in a box sized to the target number, so the ones column never jumps while counting and the group recentres when the number gains or loses a digit.\n  useEffect(() => {\n    const node = sizer.current;\n    const box = digits.current;\n    if (!node || !box || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      box.style.width = `${entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth}px`;\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const shown = filled ? shownBand : band;\n  const activeTone = (filled ? shownBand : band)?.tone ?? tone;\n  const clampedValue = clamp(value, min, safeMax);\n\n  return (\n    <figure\n      ref={refs}\n      {...props}\n      data-slot=\"gauge\"\n      data-tone={activeTone}\n      className={cn(\"gauge\", className)}\n    >\n      <div\n        data-slot=\"gauge-visual\"\n        role=\"meter\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={safeMax}\n        aria-valuenow={clampedValue}\n        aria-valuetext={`${displayValue}%${band ? `, ${band.label}` : \"\"}`}\n        className=\"gauge-visual\"\n      >\n        <svg\n          viewBox=\"0 0 100 90\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          className=\"block size-full overflow-visible\"\n        >\n          <path d={TRACK} className=\"gauge-track\" />\n          <path ref={ring} className=\"gauge-fill\" style={{ opacity: 0 }} />\n        </svg>\n        <div aria-hidden=\"true\" className=\"gauge-readout\">\n          <span className=\"gauge-number\">\n            <span ref={digits} className=\"gauge-digits\" />\n            <span className=\"gauge-unit\">%</span>\n            <span ref={sizer} className=\"gauge-sizer\">\n              {displayValue}\n            </span>\n          </span>\n          {thresholds ? (\n            <span className=\"gauge-status\">\n              <SwapText\n                swapKey={filled ? (shown?.label ?? \"\") : \"\"}\n                dir={moved.direction}\n                className=\"block\"\n              >\n                {shown?.label}\n              </SwapText>\n            </span>\n          ) : null}\n        </div>\n      </div>\n      <figcaption className=\"grid min-w-0 gap-0.5\">\n        <strong className=\"text-sm font-medium text-foreground\">\n          <SwapText swapKey={label} className=\"block\">\n            {label}\n          </SwapText>\n        </strong>\n        {detail ? (\n          <span className=\"text-xs tabular-nums text-text-secondary\">\n            <SwapText swapKey={detail} dir={moved.direction} className=\"block\">\n              {detail}\n            </SwapText>\n          </span>\n        ) : null}\n      </figcaption>\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/gauge/index.d.ts

@@ -0,0 +1,2 @@
+import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge.js";
+export { Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone };

package/dist/gauge/index.js

@@ -0,0 +1,2 @@
+import { Gauge } from "./gauge.js";
+export { Gauge };

package/dist/in-view-title/in-view-title.d.ts

@@ -0,0 +1,33 @@
+//#region src/in-view-title/in-view-title.d.ts
+/**
+ * How the title reveals. `blur` sharpens word by word and suits most headings.
+ * `word` and `line` rise out of a clip, for editorial pages. `tracking` opens
+ * tight letter spacing. `wipe` uncovers the title from left to right through a
+ * soft edge.
+ */
+export type InViewTitleVariant = "word" | "line" | "blur" | "tracking" | "wipe";
+/**
+ * InViewTitle: a section title that reveals itself when it scrolls into view,
+ * once. A title already above the viewport shows at once, and a title rendered
+ * on a server appears on its own if scripts are slow, so text is never left
+ * hidden. The title is spoken as one heading (the pieces are a picture); reduced
+ * motion shows it at once.
+ */
+export interface InViewTitleProps {
+  /** The title. */
+  text: string;
+  /** How it reveals. @default "blur" */
+  variant?: InViewTitleVariant;
+  /** The element to render. @default "h2" */
+  as?: "h1" | "h2" | "h3";
+  /** The breaks for the `line` variant. Without them the whole title is one line. */
+  lines?: string[];
+  /** Reveal only the first time it enters. With false it hides again when it leaves below and replays. @default true */
+  once?: boolean;
+  id?: string;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+}
+export declare const InViewTitle: import("react").ForwardRefExoticComponent<InViewTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=in-view-title.d.ts.map

package/dist/in-view-title/in-view-title.js

@@ -0,0 +1,119 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { Fragment, forwardRef, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/in-view-title/in-view-title.tsx
+const TYPE = {
+	h1: "font-display text-h1 leading-(--leading-snug) m-0 font-semibold",
+	h2: "font-display text-h2 leading-(--leading-snug) m-0 font-semibold",
+	h3: "font-display text-h3 leading-(--leading-snug) m-0 font-semibold"
+};
+/** A title is revealed when this much of it is on screen. */
+const THRESHOLD = .45;
+const lateBoot = typeof window !== "undefined" && performance.now() > 2400;
+/** Stagger between words (ms): 60 at most, and 400 in all. Lines stagger 80. Letters of the tracking variant move with their word. */
+const WORD_STEP_MS = 60;
+const WORD_MAX_MS = 400;
+const LINE_STEP_MS = 80;
+const TRACKING_STEP_MS = 32;
+/** How far each letter travels per step from its word's centre in the tracking variant. */
+const TRACK_EM = .06;
+const subscribeNothing = () => () => {};
+const delayOf = (ms) => ({ "--part-delay": `${ms}ms` });
+const InViewTitle = forwardRef(function InViewTitle({ text, variant = "blur", as = "h2", lines, once = true, id, className }, ref) {
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+	const [serverRendered] = useState(!hydrated);
+	const late = serverRendered && lateBoot;
+	const [seen, setSeen] = useState(false);
+	useEffect(() => {
+		const node = root.current;
+		if (!node) return;
+		if (typeof IntersectionObserver === "undefined") {
+			setSeen(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry) return;
+			const passed = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+			if (entry.isIntersecting || passed) {
+				setSeen(true);
+				if (once) observer.disconnect();
+			} else if (!once) setSeen(false);
+		}, { threshold: THRESHOLD });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [once]);
+	const Tag = as;
+	const words = text.split(" ").filter(Boolean);
+	const step = Math.min(WORD_STEP_MS, WORD_MAX_MS / Math.max(words.length, 1));
+	const space = (index, total) => index < total - 1 ? " " : null;
+	let body = null;
+	if (variant === "word") body = words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "in-view-title-clip",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			"data-part": "",
+			style: delayOf(index * step),
+			children: word
+		})
+	}), space(index, words.length)] }, `${word}-${index}`));
+	else if (variant === "line") body = (lines?.length ? lines : [text]).map((line, index) => /* @__PURE__ */ jsx("span", {
+		className: "in-view-title-line-clip",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("span", {
+			"data-part": "",
+			style: delayOf(index * LINE_STEP_MS),
+			children: line
+		})
+	}, `${line}-${index}`));
+	else if (variant === "blur") body = words.map((word, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"data-part": "",
+		"aria-hidden": "true",
+		style: delayOf(index * step),
+		children: word
+	}), space(index, words.length)] }, `${word}-${index}`));
+	else if (variant === "tracking") body = words.map((word, index) => {
+		const letters = Array.from(word);
+		const centre = (letters.length - 1) / 2;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap",
+			"data-part": "",
+			"aria-hidden": "true",
+			style: delayOf(index * TRACKING_STEP_MS),
+			children: letters.map((letter, letterIndex) => /* @__PURE__ */ jsx("span", {
+				"data-letter": "",
+				style: { "--track-x": `${(centre - letterIndex) * TRACK_EM}em` },
+				children: letter
+			}, letterIndex))
+		}), space(index, words.length)] }, `${word}-${index}`);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: refs,
+		"data-slot": "in-view-title",
+		"data-variant": variant,
+		"data-visible": seen || late ? "" : void 0,
+		"data-instant": late ? "" : void 0,
+		"data-pending": hydrated ? void 0 : "",
+		className: cn("in-view-title", className),
+		children: variant === "wipe" ? /* @__PURE__ */ jsx("div", {
+			"data-part": "",
+			children: /* @__PURE__ */ jsx(Tag, {
+				id,
+				className: TYPE[as],
+				children: text
+			})
+		}) : /* @__PURE__ */ jsx(Tag, {
+			id,
+			"aria-label": text,
+			className: TYPE[as],
+			children: body
+		})
+	});
+});
+//#endregion
+export { InViewTitle };
+
+//# sourceMappingURL=in-view-title.js.map

package/dist/in-view-title/in-view-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"in-view-title.js","names":[],"sources":["../../src/in-view-title/in-view-title.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Fragment,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * How the title reveals. `blur` sharpens word by word and suits most headings.\n * `word` and `line` rise out of a clip, for editorial pages. `tracking` opens\n * tight letter spacing. `wipe` uncovers the title from left to right through a\n * soft edge.\n */\nexport type InViewTitleVariant = \"word\" | \"line\" | \"blur\" | \"tracking\" | \"wipe\";\n\n/**\n * InViewTitle: a section title that reveals itself when it scrolls into view,\n * once. A title already above the viewport shows at once, and a title rendered\n * on a server appears on its own if scripts are slow, so text is never left\n * hidden. The title is spoken as one heading (the pieces are a picture); reduced\n * motion shows it at once.\n */\nexport interface InViewTitleProps {\n  /** The title. */\n  text: string;\n  /** How it reveals. @default \"blur\" */\n  variant?: InViewTitleVariant;\n  /** The element to render. @default \"h2\" */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  /** The breaks for the `line` variant. Without them the whole title is one line. */\n  lines?: string[];\n  /** Reveal only the first time it enters. With false it hides again when it leaves below and replays. @default true */\n  once?: boolean;\n  id?: string;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst TYPE = {\n  h1: \"font-display text-h1 leading-(--leading-snug) m-0 font-semibold\",\n  h2: \"font-display text-h2 leading-(--leading-snug) m-0 font-semibold\",\n  h3: \"font-display text-h3 leading-(--leading-snug) m-0 font-semibold\",\n} as const;\n\n/** A title is revealed when this much of it is on screen. */\nconst THRESHOLD = 0.45;\n/** Matches the stylesheet fallback: a server-rendered title that scripts reach later than this is already showing, so it stays put. */\nconst FALLBACK_MS = 2400;\nconst lateBoot = typeof window !== \"undefined\" && performance.now() > FALLBACK_MS;\n/** Stagger between words (ms): 60 at most, and 400 in all. Lines stagger 80. Letters of the tracking variant move with their word. */\nconst WORD_STEP_MS = 60;\nconst WORD_MAX_MS = 400;\nconst LINE_STEP_MS = 80;\nconst TRACKING_STEP_MS = 32;\n/** How far each letter travels per step from its word's centre in the tracking variant. */\nconst TRACK_EM = 0.06;\n\nconst subscribeNothing = () => () => {};\nconst delayOf = (ms: number) => ({ \"--part-delay\": `${ms}ms` }) as CSSProperties;\n\nexport const InViewTitle = forwardRef<HTMLDivElement, InViewTitleProps>(function InViewTitle(\n  { text, variant = \"blur\", as = \"h2\", lines, once = true, id, className },\n  ref,\n) {\n  const root = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n  const hydrated = useSyncExternalStore(\n    subscribeNothing,\n    () => true,\n    () => false,\n  );\n  // Rendered on a server, and scripts arrived after the stylesheet fallback had already shown it: nothing to reveal.\n  const [serverRendered] = useState(!hydrated);\n  const late = serverRendered && lateBoot;\n  const [seen, setSeen] = useState(false);\n\n  useEffect(() => {\n    const node = root.current;\n    if (!node) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setSeen(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry) return;\n        // Above the viewport (scrolled past, or restored mid-page) counts as seen: there is nothing to scroll to.\n        const passed = !entry.isIntersecting && entry.boundingClientRect.top < 0;\n        if (entry.isIntersecting || passed) {\n          setSeen(true);\n          if (once) observer.disconnect();\n        } else if (!once) setSeen(false);\n      },\n      { threshold: THRESHOLD },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [once]);\n\n  const Tag = as;\n  const words = text.split(\" \").filter(Boolean);\n  const step = Math.min(WORD_STEP_MS, WORD_MAX_MS / Math.max(words.length, 1));\n  const space = (index: number, total: number) => (index < total - 1 ? \" \" : null);\n\n  let body: ReactNode = null;\n  if (variant === \"word\") {\n    body = words.map((word, index) => (\n      <Fragment key={`${word}-${index}`}>\n        <span className=\"in-view-title-clip\" aria-hidden=\"true\">\n          <span data-part=\"\" style={delayOf(index * step)}>\n            {word}\n          </span>\n        </span>\n        {space(index, words.length)}\n      </Fragment>\n    ));\n  } else if (variant === \"line\") {\n    body = (lines?.length ? lines : [text]).map((line, index) => (\n      <span className=\"in-view-title-line-clip\" aria-hidden=\"true\" key={`${line}-${index}`}>\n        <span data-part=\"\" style={delayOf(index * LINE_STEP_MS)}>\n          {line}\n        </span>\n      </span>\n    ));\n  } else if (variant === \"blur\") {\n    body = words.map((word, index) => (\n      <Fragment key={`${word}-${index}`}>\n        <span data-part=\"\" aria-hidden=\"true\" style={delayOf(index * step)}>\n          {word}\n        </span>\n        {space(index, words.length)}\n      </Fragment>\n    ));\n  } else if (variant === \"tracking\") {\n    body = words.map((word, index) => {\n      const letters = Array.from(word);\n      const centre = (letters.length - 1) / 2;\n      return (\n        <Fragment key={`${word}-${index}`}>\n          <span\n            className=\"whitespace-nowrap\"\n            data-part=\"\"\n            aria-hidden=\"true\"\n            style={delayOf(index * TRACKING_STEP_MS)}\n          >\n            {letters.map((letter, letterIndex) => (\n              <span\n                key={letterIndex}\n                data-letter=\"\"\n                style={{ \"--track-x\": `${(centre - letterIndex) * TRACK_EM}em` } as CSSProperties}\n              >\n                {letter}\n              </span>\n            ))}\n          </span>\n          {space(index, words.length)}\n        </Fragment>\n      );\n    });\n  }\n\n  return (\n    <div\n      ref={refs}\n      data-slot=\"in-view-title\"\n      data-variant={variant}\n      data-visible={seen || late ? \"\" : undefined}\n      data-instant={late ? \"\" : undefined}\n      data-pending={hydrated ? undefined : \"\"}\n      className={cn(\"in-view-title\", className)}\n    >\n      {variant === \"wipe\" ? (\n        <div data-part=\"\">\n          <Tag id={id} className={TYPE[as]}>\n            {text}\n          </Tag>\n        </div>\n      ) : (\n        <Tag id={id} aria-label={text} className={TYPE[as]}>\n          {body}\n        </Tag>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;AAiDA,MAAM,OAAO;CACX,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,MAAM,YAAY;AAGlB,MAAM,WAAW,OAAO,WAAW,eAAe,YAAY,IAAI,IAAI;;AAEtE,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,eAAe;AACrB,MAAM,mBAAmB;;AAEzB,MAAM,WAAW;AAEjB,MAAM,+BAA+B,CAAC;AACtC,MAAM,WAAW,QAAgB,EAAE,gBAAgB,GAAG,GAAG,IAAI;AAE7D,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO,OAAO,MAAM,IAAI,aAC7D,KACA;CACA,MAAM,OAAO,OAA8B,IAAI;CAC/C,MAAM,OAAO,cAAc,UAAU,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC;CACtD,MAAM,WAAW,qBACf,wBACM,YACA,KACR;CAEA,MAAM,CAAC,kBAAkB,SAAS,CAAC,QAAQ;CAC3C,MAAM,OAAO,kBAAkB;CAC/B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,gBAAgB;EACd,MAAM,OAAO,KAAK;EAClB,IAAI,CAAC,MAAM;EACX,IAAI,OAAO,yBAAyB,aAAa;GAC/C,QAAQ,IAAI;GACZ;EACF;EACA,MAAM,WAAW,IAAI,sBAClB,CAAC,WAAW;GACX,IAAI,CAAC,OAAO;GAEZ,MAAM,SAAS,CAAC,MAAM,kBAAkB,MAAM,mBAAmB,MAAM;GACvE,IAAI,MAAM,kBAAkB,QAAQ;IAClC,QAAQ,IAAI;IACZ,IAAI,MAAM,SAAS,WAAW;GAChC,OAAO,IAAI,CAAC,MAAM,QAAQ,KAAK;EACjC,GACA,EAAE,WAAW,UAAU,CACzB;EACA,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,MAAM;CACZ,MAAM,QAAQ,KAAK,MAAM,GAAG,CAAC,CAAC,OAAO,OAAO;CAC5C,MAAM,OAAO,KAAK,IAAI,cAAc,cAAc,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;CAC3E,MAAM,SAAS,OAAe,UAAmB,QAAQ,QAAQ,IAAI,MAAM;CAE3E,IAAI,OAAkB;CACtB,IAAI,YAAY,QACd,OAAO,MAAM,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EAAqB,eAAY;EAC/C,UAAA,oBAAC,QAAD;GAAM,aAAU;GAAG,OAAO,QAAQ,QAAQ,IAAI;GAC3C,UAAA;EACG,CAAA;CACF,CAAA,GACL,MAAM,OAAO,MAAM,MAAM,CAClB,EAAA,GAPK,GAAG,KAAK,GAAG,OAOhB,CACX;MACI,IAAI,YAAY,QACrB,QAAQ,OAAO,SAAS,QAAQ,CAAC,IAAI,EAAA,CAAG,KAAK,MAAM,UACjD,oBAAC,QAAD;EAAM,WAAU;EAA0B,eAAY;EACpD,UAAA,oBAAC,QAAD;GAAM,aAAU;GAAG,OAAO,QAAQ,QAAQ,YAAY;GACnD,UAAA;EACG,CAAA;CACF,GAJ4D,GAAG,KAAK,GAAG,OAIvE,CACP;MACI,IAAI,YAAY,QACrB,OAAO,MAAM,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,aAAU;EAAG,eAAY;EAAO,OAAO,QAAQ,QAAQ,IAAI;EAC9D,UAAA;CACG,CAAA,GACL,MAAM,OAAO,MAAM,MAAM,CAClB,EAAA,GALK,GAAG,KAAK,GAAG,OAKhB,CACX;MACI,IAAI,YAAY,YACrB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,MAAM,UAAU,MAAM,KAAK,IAAI;EAC/B,MAAM,UAAU,QAAQ,SAAS,KAAK;EACtC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,WAAU;GACV,aAAU;GACV,eAAY;GACZ,OAAO,QAAQ,QAAQ,gBAAgB;GAEtC,UAAA,QAAQ,KAAK,QAAQ,gBACpB,oBAAC,QAAD;IAEE,eAAY;IACZ,OAAO,EAAE,aAAa,IAAI,SAAS,eAAe,SAAS,IAAI;IAE9D,UAAA;GACG,GALC,WAKD,CACP;EACG,CAAA,GACL,MAAM,OAAO,MAAM,MAAM,CAClB,EAAA,GAlBK,GAAG,KAAK,GAAG,OAkBhB;CAEd,CAAC;CAGH,OACE,oBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,gBAAc;EACd,gBAAc,QAAQ,OAAO,KAAK,KAAA;EAClC,gBAAc,OAAO,KAAK,KAAA;EAC1B,gBAAc,WAAW,KAAA,IAAY;EACrC,WAAW,GAAG,iBAAiB,SAAS;EAEvC,UAAA,YAAY,SACX,oBAAC,OAAD;GAAK,aAAU;GACb,UAAA,oBAAC,KAAD;IAAS;IAAI,WAAW,KAAK;IAC1B,UAAA;GACE,CAAA;EACF,CAAA,IAEL,oBAAC,KAAD;GAAS;GAAI,cAAY;GAAM,WAAW,KAAK;GAC5C,UAAA;EACE,CAAA;CAEJ,CAAA;AAET,CAAC"}

package/dist/in-view-title/index.d.ts

@@ -0,0 +1,2 @@
+import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-title.js";
+export { InViewTitle, type InViewTitleProps, type InViewTitleVariant };

package/dist/in-view-title/index.js

@@ -0,0 +1,2 @@
+import { InViewTitle } from "./in-view-title.js";
+export { InViewTitle };

package/dist/index.d.ts

@@ -1,54 +1,97 @@
 import { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./accordion/accordion.js";
 import { Button, ButtonProps, buttonVariants } from "./button/button.js";
 import { ActionButton, ActionButtonProps } from "./action-button/action-button.js";
+import { ActivityDay, ActivityDayDetail, ActivityHeatmap, ActivityHeatmapProps } from "./activity-heatmap/activity-heatmap.js";
 import { Dialog, DialogFooter, DialogFooterProps, DialogProps, DialogTrigger, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants } from "./dialog/dialog.js";
-import { AlertDialog, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogProps } from "./alert-dialog/alert-dialog.js";
 import { Alert, AlertProps, alertVariants } from "./alert/alert.js";
+import { AnimatedCounter, AnimatedCounterProps } from "./animated-counter/animated-counter.js";
+import { Announcement, AnnouncementAction, AnnouncementBar, AnnouncementBarProps, clearAnnouncementDismissal } from "./announcement-bar/announcement-bar.js";
 import { Avatar, AvatarProps, avatarVariants } from "./avatar/avatar.js";
 import { Badge, BadgeProps, badgeVariants } from "./badge/badge.js";
+import { BarChart, BarChartDatum, BarChartProps } from "./bar-chart/bar-chart.js";
 import { BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
+import { BrushChart, BrushChartAnnotation, BrushChartDatum, BrushChartProps } from "./brush-chart/brush-chart.js";
 import { ButtonGroup, ButtonGroupItem, ButtonGroupMenu, ButtonGroupMenuItem, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupSize, ButtonGroupVariant } from "./button-group/button-group.js";
 import { Calendar, CalendarProps, CalendarRange, CalendarRangeProps, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants } from "./calendar/calendar.js";
+import { CardDecision, CardStack, CardStackProps } from "./card-stack/card-stack.js";
 import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
+import { Carousel, CarouselProps } from "./carousel/carousel.js";
 import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
+import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group/chip-group.js";
 import { ConfirmMorph, ConfirmMorphMode, ConfirmMorphProps, ConfirmMorphState } from "./confirm-morph/confirm-morph.js";
 import { CopyButton, CopyButtonProps } from "./copy-button/copy-button.js";
+import { Countdown, CountdownProps, CountdownUnit } from "./countdown/countdown.js";
 import { datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants } from "./date-picker/picker-parts.js";
 import { DateRangePicker, DateRangePickerMessages, DateRangePickerProps, DateRangePickerValue, DateRangePreset, defaultDateRangePresets } from "./date-picker/date-range-picker.js";
 import { DatePicker, DatePickerProps } from "./date-picker/date-picker.js";
+import { DonutChart, DonutChartDatum, DonutChartProps } from "./donut-chart/donut-chart.js";
 import { EmptyState, EmptyStateProps, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants } from "./empty-state/empty-state.js";
 import { ExpandingButtonGroup, ExpandingButtonGroupItem, ExpandingButtonGroupProps, ExpandingButtonGroupSize, ExpandingButtonGroupTone } from "./expanding-button-group/expanding-button-group.js";
 import { FileDropZone, FileDropZoneProps, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants } from "./file-drop-zone/file-drop-zone.js";
 import { FilterBar, FilterBarCustomField, FilterBarField, FilterBarOption, FilterBarProps, FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar/filter-bar.js";
 import { FloatingButtonGroup, FloatingButtonGroupAction, FloatingButtonGroupItem, FloatingButtonGroupOrientation, FloatingButtonGroupProps, FloatingButtonGroupSeparator, FloatingButtonGroupSize, FloatingButtonGroupVariant } from "./floating-button-group/floating-button-group.js";
+import { Gauge, GaugeProps, GaugeThreshold, GaugeTone } from "./gauge/gauge.js";
 import { BellIcon, ChevronIcon, ChevronIconProps, CopyCheckIcon, HeartIcon, IconMorph, IconMorphIconProps, IconMorphName, IconMorphProps, MenuIcon, PlayPauseIcon, PlusCheckIcon, SunMoonIcon } from "./icon-morph/icon-morph.js";
+import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-title/in-view-title.js";
 import { Input, InputProps, inputVariants } from "./input/input.js";
 import { Label, LabelProps, labelVariants } from "./label/label.js";
 import { cn, cnAll } from "./lib/cn.js";
+import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartSeries } from "./line-chart/line-chart.js";
+import { Mention, MentionChannel, MentionInput, MentionInputHandle, MentionInputProps, MentionKind, MentionPerson, MentionValue, mentionText, serializeMentions } from "./mention-input/mention-input.js";
 import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
+import { MoneyInput, MoneyInputDetails, MoneyInputProps } from "./money-input/money-input.js";
+import { MorphSelect, MorphSelectGroup, MorphSelectItem, MorphSelectOption, MorphSelectProps } from "./morph-select/morph-select.js";
+import { MultiSelect, MultiSelectProps } from "./multi-select/multi-select.js";
+import { NumberField, NumberFieldProps } from "./number-field/number-field.js";
+import { OnboardingChecklist, OnboardingChecklistProps, OnboardingStep } from "./onboarding-checklist/onboarding-checklist.js";
 import { PageHeader, PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header/page-header.js";
 import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswordFieldMessages } from "./password-field/password-field.js";
 import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRuleOptions, PasswordStrength, PasswordStrengthLevels, PasswordStrengthMessages, PasswordStrengthMessagesInput, PasswordStrengthProps, PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength/password-strength.js";
+import { PHONE_COUNTRIES, PhoneCountry, PhoneStatus, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
+import { PhoneInput, PhoneInputDetails, PhoneInputProps } from "./phone-input/phone-input.js";
 import { Popover, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
 import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
-import { ScrollArea, ScrollAreaProps, scrollAreaVariants } from "./scroll-area/scroll-area.js";
+import { Reaction, ReactionOption, Reactions, ReactionsProps } from "./reactions/reactions.js";
+import { Ridgeline, RidgelineProps, RidgelineSeries } from "./ridgeline/ridgeline.js";
+import { ScrollArea, ScrollAreaProps, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area/scroll-area.js";
+import { ScrubInput, ScrubInputChangeDetails, ScrubInputProps, ScrubInputSource } from "./scrub-input/scrub-input.js";
+import { evaluateScrubExpression } from "./scrub-input/evaluate.js";
+import "./scrub-input/index.js";
 import { SearchField, SearchFieldProps } from "./search-field/search-field.js";
 import { Select, SelectItem, SelectItemProps, SelectProps, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "./select/select.js";
 import { Separator, SeparatorProps, separatorVariants } from "./separator/separator.js";
 import { Sheet, SheetProps, sheetOverlayVariants, sheetPanelVariants } from "./sheet/sheet.js";
+import { Platform, ShortcutToken, formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-recorder/shortcut-model.js";
+import { ShortcutBinding, ShortcutKbd, ShortcutKbdProps, ShortcutKeys, ShortcutKeysProps, ShortcutRecorder, ShortcutRecorderProps, usePlatform, usePressedKeys } from "./shortcut-recorder/shortcut-recorder.js";
+import "./shortcut-recorder/index.js";
 import { SideNav, SideNavGroup, SideNavProps, SideNavSection, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants } from "./side-nav/side-nav.js";
 import { Skeleton, SkeletonProps, skeletonVariants } from "./skeleton/skeleton.js";
-import { Slider, SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
+import { Slider, SliderMark, SliderProps, SliderValue, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider/slider.js";
+import { SlopeChart, SlopeChartProps, SlopeItem } from "./slope-chart/slope-chart.js";
 import { Spinner, SpinnerProps, spinnerVariants } from "./spinner/spinner.js";
+import { SplitBar, SplitBarProps, SplitSegment } from "./split-bar/split-bar.js";
 import { SplitButton, SplitButtonAction, SplitButtonProps } from "./split-button/split-button.js";
-import { StatCard, StatCardProps, StatCardTone, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
+import { SPARKLINE_DRAW_MS, Sparkline, SparklineProps, SparklineTone, sparklineVariants } from "./sparkline/sparkline.js";
+import { StatCard, StatCardProps, StatCardTone, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
+import { Stepper, StepperOrientation, StepperProps, StepperStatus, StepperStep } from "./stepper/stepper.js";
+import { Streamgraph, StreamgraphDatum, StreamgraphProps, StreamgraphSeries } from "./streamgraph/streamgraph.js";
+import { SwipeAction, SwipeActions, SwipeActionsProps, SwipeActionsRow, SwipeActionsRowProps } from "./swipe-actions/swipe-actions.js";
+import "./swipe-actions/index.js";
 import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
-import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table/table.js";
+import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants } from "./table/table.js";
 import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
+import { TextShimmer, TextShimmerProps } from "./text-shimmer/text-shimmer.js";
+import { TagInput, TagInputProps } from "./tag-input/tag-input.js";
+import { TextMorph, TextMorphProps } from "./text-morph/text-morph.js";
+import { TextReveal, TextRevealProps } from "./text-reveal/text-reveal.js";
 import { Textarea, TextareaProps, textareaVariants } from "./textarea/textarea.js";
 import { Theme, ThemeSwitch, ThemeSwitchProps, ThemeSwitchVariant } from "./theme-switch/theme-switch.js";
 import { TimePicker, TimePickerProps, timePickerItemVariants, timePickerListVariants } from "./time-picker/time-picker.js";
 import { ToastContent, ToastRegion, ToastRegionProps, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants } from "./toast/toast.js";
 import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVariants } from "./tooltip/tooltip.js";
-export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, Input, type InputProps, Label, type LabelProps, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, PlayPauseIcon, PlusCheckIcon, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RowKey, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonAction, type SplitButtonProps, StatCard, type StatCardProps, type StatCardTone, SunMoonIcon, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, inputVariants, labelVariants, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, sheetOverlayVariants, sheetPanelVariants, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, spinnerVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants };
+import { Treemap, TreemapNode, TreemapProps } from "./treemap/treemap.js";
+import { UsageMeter, UsageMeterProps, UsageMeterSegment } from "./usage-meter/usage-meter.js";
+import { WaffleCategory, WaffleChart, WaffleChartProps } from "./waffle-chart/waffle-chart.js";
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, type AlertProps, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartDatum, type LineChartProps, type LineChartSeries, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardProps, type StatCardTone, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type WaffleCategory, WaffleChart, type WaffleChartProps, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateTextVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };