@passui/react 0.1.46 → 0.2.0

package/dist/sheet.js

@@ -0,0 +1,141 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { useSwipeTouchAction } from "./lib/swipe-touch-action.js";
+import { useVisualViewportVars } from "./lib/visual-viewport.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as drawer from "@zag-js/drawer";
+// src/components/sheet.tsx
+const Context = createContext(null);
+function useSheet() {
+	const ctx = useContext(Context);
+	if (!ctx) throw new Error("Sheet parts must be used inside <Sheet>.");
+	return ctx;
+}
+/** Physical side to the direction that dismisses it, honouring right to left. */
+function swipeToDismiss(side, rtl) {
+	if (side === "top") return "up";
+	if (side === "bottom") return "down";
+	return side === "right" !== rtl ? "end" : "start";
+}
+/** A panel that slides in from any edge and swipes away. Renders no element of its own. */
+function Sheet({ children, side = "right", ...props }) {
+	const id = useId();
+	const service = useMachine(drawer.machine, {
+		id,
+		swipeDirection: swipeToDismiss(side, props.dir === "rtl"),
+		...props
+	});
+	const api = drawer.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: {
+			api,
+			side
+		},
+		children
+	});
+}
+function SheetTrigger({ render, ...props }) {
+	const { api } = useSheet();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "sheet-trigger"
+	}, props), render);
+}
+function SheetClose({ render, ...props }) {
+	const { api } = useSheet();
+	const { id: _id, ...closeProps } = api.getCloseTriggerProps();
+	return renderPart("button", mergeProps({
+		...closeProps,
+		"data-slot": "sheet-close"
+	}, props), render);
+}
+const placement = {
+	right: {
+		positioner: "justify-end",
+		panel: "h-full w-3/4 max-w-sm rounded-l-3xl data-ending-style:translate-x-full data-starting-style:translate-x-full"
+	},
+	left: {
+		positioner: "justify-start",
+		panel: "h-full w-3/4 max-w-sm rounded-r-3xl data-ending-style:-translate-x-full data-starting-style:-translate-x-full"
+	},
+	top: {
+		positioner: "items-start",
+		panel: "max-h-full w-full rounded-b-3xl data-ending-style:-translate-y-full data-starting-style:-translate-y-full"
+	},
+	bottom: {
+		positioner: "items-end",
+		panel: "max-h-full w-full rounded-t-3xl data-ending-style:translate-y-full data-starting-style:translate-y-full"
+	}
+};
+/** Backdrop, panel and focus trap. Mounts only while open or leaving. */
+function SheetContent({ className, render, ...props }) {
+	const { api, side } = useSheet();
+	const { ref, mounted, attrs } = usePresence(api.open);
+	const positioner = useRef(null);
+	useVisualViewportVars(positioner, mounted);
+	useSwipeTouchAction(ref, mounted, side === "top" || side === "bottom" ? "y" : "x");
+	if (!mounted) return null;
+	const state = {
+		...attrs,
+		"data-open": api.open ? "" : void 0
+	};
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx("div", {
+		...api.getBackdropProps(),
+		...state,
+		hidden: false,
+		"data-slot": "sheet-overlay",
+		className: "ease-standard fixed inset-0 z-[60] bg-black/30 backdrop-blur-sm transition-opacity duration-(--duration-normal) data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:opacity-[calc(1-var(--drawer-swipe-progress))] data-swiping:transition-none motion-reduce:transition-none"
+	}), /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		ref: positioner,
+		hidden: false,
+		className: cx("fixed inset-x-0 top-(--visual-viewport-top,0px) z-[60] flex h-(--visual-viewport-height,100dvh)", placement[side].positioner),
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...state,
+			ref,
+			hidden: false,
+			"data-slot": "sheet-content",
+			"data-side": side,
+			className: cx("relative flex flex-col overflow-y-auto overscroll-contain glass-menu squircle p-6 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] text-label outline-none transition-[transform,translate] duration-(--duration-sheet) ease-(--ease-sheet) motion-reduce:transition-none motion-reduce:data-ending-style:translate-x-0 motion-reduce:data-ending-style:translate-y-0 motion-reduce:data-starting-style:translate-x-0 motion-reduce:data-starting-style:translate-y-0 motion-reduce:data-ending-style:opacity-0 motion-reduce:data-starting-style:opacity-0", placement[side].panel, className)
+		}, props), render)
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cx("flex flex-col gap-1.5", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cx("mt-auto flex flex-col gap-2 pt-4", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	const { api } = useSheet();
+	return /* @__PURE__ */ jsx("h2", {
+		...api.getTitleProps(),
+		"data-slot": "sheet-title",
+		className: cx("text-headline font-semibold text-label", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	const { api } = useSheet();
+	return /* @__PURE__ */ jsx("p", {
+		...api.getDescriptionProps(),
+		"data-slot": "sheet-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/sidebar.d.ts

@@ -0,0 +1,32 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+export type SidebarSize = "sm" | "md" | "lg";
+/** The navigation landmark that holds groups of rows. Name it with `aria-label`. */
+export declare function Sidebar({ className, ...props }: ComponentProps<"nav">): import("react").JSX.Element;
+/** A titled run of rows. */
+export declare function SidebarGroup({ className, ...props }: ComponentProps<"section">): import("react").JSX.Element;
+export type SidebarGroupLabelProps = ComponentProps<"h2"> & {
+  /** Matches the rows' size. @default "md" */
+  size?: SidebarSize;
+};
+/** The group's heading, bold enough to read as a category. */
+export declare function SidebarGroupLabel({ size, className, ...props }: SidebarGroupLabelProps): import("react").JSX.Element;
+export declare function SidebarMenu({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
+export type SidebarMenuButtonProps = ComponentProps<"a"> & {
+  /** The current destination. */
+  isActive?: boolean;
+  /** Row height, text and corners. @default "md" */
+  size?: SidebarSize;
+  /** A glyph before the label. */
+  icon?: ReactNode;
+  /** A count or status at the end. */
+  badge?: ReactNode;
+  /** Use your router's link, or a button. */
+  render?: RenderProp;
+};
+/**
+ * One row. It is an anchor by default; pass `render` for a router link or a
+ * button. The current row carries `aria-current="page"` and the accent.
+ */
+export declare function SidebarMenuButton({ isActive, size, icon, badge, className, children, render, ...props }: SidebarMenuButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/sidebar.js

@@ -0,0 +1,85 @@
+import { cx } from "./lib/cx.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/sidebar.tsx
+const rows = {
+	sm: "min-h-7 rounded-lg px-2 py-0.5 text-footnote [@media(pointer:coarse)]:min-h-10",
+	md: "min-h-8.5 rounded-xl px-2.5 py-1 text-subheadline [@media(pointer:coarse)]:min-h-11",
+	lg: "min-h-10 rounded-2xl px-3 py-2 text-body [@media(pointer:coarse)]:min-h-13"
+};
+const headings = {
+	sm: "px-2 pb-1 text-footnote",
+	md: "px-2.5 pb-1.5 text-footnote",
+	lg: "px-3 pb-2 text-subheadline"
+};
+const counts = {
+	sm: "text-caption2",
+	md: "text-footnote",
+	lg: "text-subheadline"
+};
+/** The navigation landmark that holds groups of rows. Name it with `aria-label`. */
+function Sidebar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "sidebar",
+		className: cx("flex w-full flex-col gap-5", className),
+		...props
+	});
+}
+/** A titled run of rows. */
+function SidebarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "sidebar-group",
+		className: cx("flex flex-col gap-0.5", className),
+		...props
+	});
+}
+/** The group's heading, bold enough to read as a category. */
+function SidebarGroupLabel({ size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-slot": "sidebar-group-label",
+		className: cx("m-0 font-semibold text-label", headings[size], className),
+		...props
+	});
+}
+function SidebarMenu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		className: cx("m-0 flex list-none flex-col gap-px p-0", className),
+		...props
+	});
+}
+function SidebarMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		className: cx("min-w-0", className),
+		...props
+	});
+}
+/**
+* One row. It is an anchor by default; pass `render` for a router link or a
+* button. The current row carries `aria-current="page"` and the accent.
+*/
+function SidebarMenuButton({ isActive, size = "md", icon, badge, className, children, render, ...props }) {
+	return renderPart("a", mergeProps({
+		"data-slot": "sidebar-menu-button",
+		"data-active": isActive ? "" : void 0,
+		"aria-current": isActive ? "page" : void 0,
+		className: cx("group flex w-full items-center gap-2.5 no-underline outline-none transition-colors duration-(--duration-fast) focus-visible:ring-2 focus-visible:ring-accent/70 motion-reduce:transition-none", rows[size], isActive ? "bg-fill font-medium text-label" : "text-label-secondary hover:bg-fill/70 hover:text-label", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cx("flex shrink-0 transition-colors", isActive ? "text-accent-text" : "text-label-secondary"),
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "grow truncate",
+				children
+			}),
+			badge != null ? /* @__PURE__ */ jsx("span", {
+				className: cx("tabular-nums", counts[size], isActive ? "text-accent-text" : "text-label-tertiary"),
+				children: badge
+			}) : null
+		] })
+	}, props), render);
+}
+export { Sidebar, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem };

package/dist/skeleton.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+/** A placeholder block while content loads. Size it with classes. */
+export declare function Skeleton({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/skeleton.js

@@ -0,0 +1,13 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/skeleton.tsx
+/** A placeholder block while content loads. Size it with classes. */
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		"aria-hidden": "true",
+		className: cx("animate-pulse rounded-xl bg-fill motion-reduce:animate-none", className),
+		...props
+	});
+}
+export { Skeleton };

package/dist/slider.d.ts

@@ -0,0 +1,9 @@
+import * as zagSlider from "@zag-js/slider";
+export interface SliderProps extends Omit<zagSlider.Props, "id" | "ids" | "value" | "defaultValue" | "onValueChange"> {
+  value?: number | number[];
+  defaultValue?: number | number[];
+  onValueChange?: (value: number[]) => void;
+  className?: string;
+}
+/** A draggable range control. Pass an array for two or more thumbs. */
+export declare function Slider({ value, defaultValue, onValueChange, className, ...props }: SliderProps): import("react").JSX.Element;

package/dist/slider.js

@@ -0,0 +1,42 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as zagSlider from "@zag-js/slider";
+// src/components/slider.tsx
+const toArray = (v) => v === void 0 ? void 0 : Array.isArray(v) ? v : [v];
+/** A draggable range control. Pass an array for two or more thumbs. */
+function Slider({ value, defaultValue, onValueChange, className, ...props }) {
+	const id = useId();
+	const service = useMachine(zagSlider.machine, {
+		id,
+		value: toArray(value),
+		defaultValue: toArray(defaultValue) ?? (value === void 0 ? [props.min ?? 0] : void 0),
+		onValueChange: ({ value: next }) => onValueChange?.(next),
+		...props
+	});
+	const api = zagSlider.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx("div", {
+		...api.getRootProps(),
+		"data-slot": "slider",
+		className: cx("w-full data-disabled:opacity-40", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			...api.getControlProps(),
+			className: "relative flex h-8 w-full touch-none items-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				...api.getTrackProps(),
+				className: "bg-fill h-2 w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("div", {
+					...api.getRangeProps(),
+					className: "bg-accent h-full rounded-full"
+				})
+			}), api.value.map((_, index) => /* @__PURE__ */ jsx("div", {
+				...api.getThumbProps({ index }),
+				className: "focus-visible:ring-accent/70 spring-snappy size-7 rounded-full bg-white shadow-[0_1px_4px_rgb(0_0_0/0.3)] transition-transform outline-none focus-visible:ring-2 data-dragging:scale-125 motion-reduce:transition-none",
+				children: /* @__PURE__ */ jsx("input", { ...api.getHiddenInputProps({ index }) })
+			}, index))]
+		})
+	});
+}
+export { Slider };

package/dist/slosh-slider.d.ts

@@ -0,0 +1,21 @@
+export type SloshSliderSize = "sm" | "md" | "lg";
+export interface SloshSliderProps {
+  label: string;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  /** 0 is rigid; 100 is loose liquid. @default 15 */
+  viscosity?: number;
+  /** How far the handle coasts after release, 0–100. @default 55 */
+  momentum?: number;
+  /** Lean of the liquid's leading edge, 0–100. @default 45 */
+  tilt?: number;
+  /** Track corner, from square to a pill, 0–20. @default 20 */
+  corner?: number;
+  /** Track height and knob scale. @default "md" */
+  size?: SloshSliderSize;
+  disabled?: boolean;
+  className?: string;
+  formatValue?: (value: number) => string;
+}
+export declare function SloshSlider({ label, value, defaultValue, onChange, viscosity, momentum, tilt, corner, size, disabled, className, formatValue }: SloshSliderProps): import("react").JSX.Element;

package/dist/slosh-slider.js

@@ -0,0 +1,205 @@
+"use client";
+import { useMediaQuery } from "./use-media-query.js";
+import { cx } from "./lib/cx.js";
+import { stepLiquid } from "./lib/liquid-step.js";
+import { clampRange } from "./lib/range-value.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/slosh-slider.tsx
+function SloshSlider({ label, value, defaultValue = 62, onChange, viscosity = 15, momentum = 55, tilt = 45, corner = 20, size = "md", disabled = false, className, formatValue }) {
+	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const track = useRef(null);
+	const fillEl = useRef(null);
+	const knobEl = useRef(null);
+	const initial = clampRange(value ?? defaultValue, 0, 100);
+	const state = useRef({
+		value: initial,
+		handleVelocity: 0,
+		fill: initial,
+		velocity: 0,
+		held: false,
+		raf: 0,
+		previous: 0,
+		last: {
+			value: initial,
+			time: 0
+		},
+		notified: Math.round(initial)
+	});
+	const settings = useRef({
+		viscosity,
+		momentum,
+		tilt,
+		reduced,
+		onChange,
+		formatValue
+	});
+	settings.current = {
+		viscosity,
+		momentum,
+		tilt,
+		reduced,
+		onChange,
+		formatValue
+	};
+	const run = useRef(() => {});
+	useEffect(() => {
+		const s = state.current;
+		const paint = () => {
+			if (!track.current || !fillEl.current || !knobEl.current) return;
+			fillEl.current.style.width = `${s.fill.toFixed(2)}%`;
+			knobEl.current.style.insetInlineStart = `${s.value.toFixed(2)}%`;
+			const lean = settings.current.reduced ? 0 : clampRange(clampRange(settings.current.tilt, 0, 100) / 100 * s.velocity * 3, -20, 20);
+			fillEl.current.style.setProperty("--slosh-lean", `${lean.toFixed(2)}px`);
+			const next = Math.round(s.value);
+			track.current.setAttribute("aria-valuenow", String(next));
+			const spoken = settings.current.formatValue?.(next);
+			if (spoken) track.current.setAttribute("aria-valuetext", spoken);
+			else track.current.removeAttribute("aria-valuetext");
+			if (s.notified !== next) {
+				s.notified = next;
+				settings.current.onChange?.(next);
+			}
+		};
+		const tick = (time) => {
+			const dt = s.previous ? clampRange((time - s.previous) / 16.67, 0, 2.5) : 1;
+			s.previous = time;
+			const knobs = settings.current;
+			if (!s.held && s.handleVelocity) {
+				s.value += s.handleVelocity * dt;
+				s.handleVelocity *= (.86 + clampRange(knobs.momentum, 0, 100) / 100 * .115) ** dt;
+				if (s.value <= 0 || s.value >= 100) {
+					s.value = clampRange(s.value, 0, 100);
+					s.handleVelocity = 0;
+				}
+				if (Math.abs(s.handleVelocity) < .01) s.handleVelocity = 0;
+			}
+			const next = stepLiquid(s, s.value, knobs.reduced ? 0 : knobs.viscosity, dt);
+			s.fill = next.fill;
+			s.velocity = next.velocity;
+			paint();
+			if (!s.handleVelocity && !s.velocity && Math.abs(s.fill - s.value) < .02) {
+				s.raf = 0;
+				s.previous = 0;
+				return;
+			}
+			s.raf = requestAnimationFrame(tick);
+		};
+		run.current = () => {
+			paint();
+			if (!s.raf) s.raf = requestAnimationFrame(tick);
+		};
+		paint();
+		return () => {
+			cancelAnimationFrame(s.raf);
+			s.raf = 0;
+			s.previous = 0;
+		};
+	}, []);
+	useEffect(() => {
+		const s = state.current;
+		if (value !== void 0 && Math.round(clampRange(value, 0, 100)) !== s.notified) {
+			s.value = clampRange(value, 0, 100);
+			s.notified = Math.round(s.value);
+			s.handleVelocity = 0;
+		}
+		if (reduced || disabled) {
+			s.handleVelocity = 0;
+			s.held = false;
+		}
+		run.current();
+	}, [
+		value,
+		reduced,
+		disabled,
+		viscosity,
+		tilt,
+		formatValue
+	]);
+	const readAt = (clientX) => {
+		const t = track.current;
+		if (!t) return 0;
+		const box = t.getBoundingClientRect();
+		const fraction = box.width ? (clientX - box.left) / box.width : 0;
+		return clampRange((getComputedStyle(t).direction === "rtl" ? 1 - fraction : fraction) * 100, 0, 100);
+	};
+	const release = (cancelled = false) => {
+		const s = state.current;
+		if (!s.held) return;
+		s.held = false;
+		s.handleVelocity = cancelled || reduced ? 0 : clampRange(s.handleVelocity, -6, 6);
+		if (performance.now() - s.last.time > 100) s.handleVelocity = 0;
+		run.current();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("passui-slosh-slider not-typeset", disabled && "opacity-40", className),
+		style: { "--slosh-radius": `${clampRange(corner, 0, 20)}px` },
+		"data-size": size,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: track,
+			className: "passui-slosh-track",
+			role: "slider",
+			tabIndex: disabled ? -1 : 0,
+			"aria-label": label,
+			"aria-disabled": disabled || void 0,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": Math.round(initial),
+			"aria-valuetext": formatValue?.(Math.round(initial)),
+			onPointerDown: (event) => {
+				if (disabled || event.button !== 0) return;
+				event.currentTarget.focus();
+				event.currentTarget.setPointerCapture(event.pointerId);
+				const s = state.current;
+				s.held = true;
+				s.handleVelocity = 0;
+				s.value = readAt(event.clientX);
+				s.last = {
+					value: s.value,
+					time: performance.now()
+				};
+				run.current();
+			},
+			onPointerMove: (event) => {
+				const s = state.current;
+				if (!s.held || disabled) return;
+				const next = readAt(event.clientX);
+				const now = performance.now();
+				s.handleVelocity = (next - s.last.value) / Math.max(1, now - s.last.time) * 16.67;
+				s.last = {
+					value: next,
+					time: now
+				};
+				s.value = next;
+				run.current();
+			},
+			onPointerUp: () => release(),
+			onPointerCancel: () => release(true),
+			onLostPointerCapture: () => release(true),
+			onKeyDown: (event) => {
+				if (disabled) return;
+				const s = state.current;
+				const step = event.shiftKey ? 10 : 2;
+				const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+				const next = event.key === "ArrowUp" || event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? s.value + step : event.key === "ArrowDown" || event.key === (rtl ? "ArrowRight" : "ArrowLeft") ? s.value - step : event.key === "Home" ? 0 : event.key === "End" ? 100 : null;
+				if (next === null) return;
+				event.preventDefault();
+				s.handleVelocity = 0;
+				s.value = clampRange(next, 0, 100);
+				run.current();
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				ref: fillEl,
+				className: "passui-slosh-fill",
+				style: { width: `${initial}%` }
+			}), /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				ref: knobEl,
+				className: "passui-slosh-knob",
+				style: { insetInlineStart: `${initial}%` }
+			})]
+		})
+	});
+}
+export { SloshSlider };

package/dist/spinner.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+/** An indeterminate activity indicator. Colour follows the text colour. */
+export declare function Spinner({ className, ...props }: ComponentProps<"svg">): import("react").JSX.Element;

package/dist/spinner.js

@@ -0,0 +1,20 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/spinner.tsx
+/** An indeterminate activity indicator. Colour follows the text colour. */
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		role: "status",
+		"aria-label": "Loading",
+		"data-slot": "spinner",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		className: cx("size-4 animate-spin motion-reduce:animate-[spin_2s_linear_infinite]", className),
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 1 0 9 9" })
+	});
+}
+export { Spinner };

package/dist/stat-tile.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+export type StatTileTone = "critical";
+export type StatTileSize = "sm" | "md" | "lg";
+export interface StatTileProps {
+  label: string;
+  value: number;
+  /** A quiet line under the number, like "3 signed in now". */
+  caption?: ReactNode;
+  /** Turns the number red once it's above zero. */
+  tone?: StatTileTone;
+  /** Makes the tile a toggle, e.g. a filter. */
+  onClick?: () => void;
+  active?: boolean;
+  /** Custom classes for the tile container. */
+  className?: string;
+  /** Tile padding and number scale. @default "md" */
+  size?: StatTileSize;
+}
+/** One number with its label, optionally a toggle. */
+export declare function StatTile({ label, value, caption, tone, onClick, active, className, size }: StatTileProps): import("react").JSX.Element;

package/dist/stat-tile.js

@@ -0,0 +1,53 @@
+import { cx } from "./lib/cx.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/stat-tile.tsx
+const tileSizes = {
+	sm: {
+		padding: "p-3",
+		valueText: "text-title3",
+		labelText: "text-caption"
+	},
+	md: {
+		padding: "p-4",
+		valueText: "text-title1",
+		labelText: "text-footnote"
+	},
+	lg: {
+		padding: "p-5",
+		valueText: "text-title",
+		labelText: "text-subheadline"
+	}
+};
+/** One number with its label, optionally a toggle. */
+function StatTile({ label, value, caption, tone, onClick, active = false, className, size = "md" }) {
+	const dims = tileSizes[size];
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: cx(dims.labelText, "text-label-secondary"),
+			children: label
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cx("font-semibold tabular-nums", dims.valueText, tone === "critical" && value > 0 && "text-danger"),
+			children: value.toLocaleString("en-US")
+		}),
+		caption && /* @__PURE__ */ jsx("span", {
+			className: cx(dims.labelText, "text-label-tertiary"),
+			children: caption
+		})
+	] });
+	const tileClass = cx("border-separator/35 bg-elevated flex min-w-0 flex-col gap-2 rounded-2xl border text-left shadow-xs", dims.padding, className);
+	if (!onClick) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stat-tile",
+		className: tileClass,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "stat-tile",
+		"aria-pressed": active,
+		onClick,
+		className: cx(tileClass, "hover:bg-fill/60 ring-1 ring-transparent transition-colors", active && "bg-fill/70 ring-label/15"),
+		children: body
+	});
+}
+export { StatTile };