@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/display/RatingLink.js

@@ -0,0 +1,80 @@
+import { Link } from "../typography/Link.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/display/RatingLink.tsx
+/** The sources' own marks and colors, as the Apple apps draw them. Anything else reads by its name. */
+function ratingMark(source) {
+	switch (source.trim().toLowerCase()) {
+		case "trakt": return {
+			name: "Trakt",
+			label: "Trakt",
+			mark: /* @__PURE__ */ jsx("span", {
+				className: "inline-flex size-5 items-center justify-center rounded-full bg-[#ed1c24] text-white [&>svg]:size-3 [&>svg]:stroke-[3]",
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			})
+		};
+		case "imdb": return {
+			name: "IMDb",
+			mark: /* @__PURE__ */ jsx("span", {
+				className: "inline-flex h-5 items-center rounded-sm bg-[#f5c518] px-1 text-xs font-black text-black",
+				children: "IMDb"
+			})
+		};
+		case "rotten tomatoes critics": return {
+			name: "Tomatometer",
+			mark: /* @__PURE__ */ jsx("span", { children: "🍅" })
+		};
+		case "rotten tomatoes audience": return {
+			name: "Popcornmeter",
+			mark: /* @__PURE__ */ jsx("span", { children: "🍿" })
+		};
+		default: return {
+			name: source,
+			label: source,
+			mark: null
+		};
+	}
+}
+/** A provider's mark and its score, linked to the original rating. */
+function RatingLink({ source, value, scale, href }) {
+	const { name, label, mark } = ratingMark(source);
+	return /* @__PURE__ */ jsxs(Link, {
+		href,
+		external: true,
+		"aria-label": [
+			name,
+			value,
+			scale
+		].filter(Boolean).join(" "),
+		className: "max-w-full gap-1.5",
+		children: [
+			mark ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: mark
+			}) : null,
+			label ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "caption",
+				"aria-hidden": "true",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "label",
+				className: "tabular-nums",
+				children: value
+			}),
+			scale ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "caption",
+				tone: "muted",
+				className: "tabular-nums",
+				children: scale
+			}) : null
+		]
+	});
+}
+export { RatingLink };
+
+//# sourceMappingURL=RatingLink.js.map

package/dist/display/RatingLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingLink.js","names":[],"sources":["../../src/display/RatingLink.tsx"],"sourcesContent":["import { CheckIcon } from 'lucide-react';\n\nimport { Link } from '../typography/Link';\nimport { Text } from '../typography/Typography';\n\n/** The sources' own marks and colors, as the Apple apps draw them. Anything else reads by its name. */\nfunction ratingMark(source: string) {\n    switch (source.trim().toLowerCase()) {\n        case 'trakt':\n            return {\n                name: 'Trakt',\n                label: 'Trakt',\n                mark: (\n                    <span className=\"inline-flex size-5 items-center justify-center rounded-full bg-[#ed1c24] text-white [&>svg]:size-3 [&>svg]:stroke-[3]\">\n                        <CheckIcon />\n                    </span>\n                ),\n            };\n        case 'imdb':\n            return {\n                name: 'IMDb',\n                mark: (\n                    <span className=\"inline-flex h-5 items-center rounded-sm bg-[#f5c518] px-1 text-xs font-black text-black\">\n                        IMDb\n                    </span>\n                ),\n            };\n        case 'rotten tomatoes critics':\n            return { name: 'Tomatometer', mark: <span>🍅</span> };\n        case 'rotten tomatoes audience':\n            return { name: 'Popcornmeter', mark: <span>🍿</span> };\n        default:\n            return { name: source, label: source, mark: null };\n    }\n}\n\n/** A provider's mark and its score, linked to the original rating. */\nexport function RatingLink({\n    source,\n    value,\n    scale,\n    href,\n}: {\n    source: string;\n    /** The score as it reads, such as \"6.5\" or \"57%\". */\n    value: string;\n    /** The scale shown after the score, such as \"/ 10\"; none for percentages. */\n    scale?: string;\n    href: string;\n}) {\n    const { name, label, mark } = ratingMark(source);\n\n    return (\n        <Link\n            href={href}\n            external\n            aria-label={[name, value, scale].filter(Boolean).join(' ')}\n            className=\"max-w-full gap-1.5\"\n        >\n            {mark ? <span aria-hidden=\"true\">{mark}</span> : null}\n            {label ? (\n                <Text as=\"span\" variant=\"caption\" aria-hidden=\"true\">\n                    {label}\n                </Text>\n            ) : null}\n            <Text as=\"span\" variant=\"label\" className=\"tabular-nums\">\n                {value}\n            </Text>\n            {scale ? (\n                <Text as=\"span\" variant=\"caption\" tone=\"muted\" className=\"tabular-nums\">\n                    {scale}\n                </Text>\n            ) : null}\n        </Link>\n    );\n}\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,QAAgB;CAChC,QAAQ,OAAO,KAAK,CAAC,CAAC,YAAY,GAAlC;EACI,KAAK,SACD,OAAO;GACH,MAAM;GACN,OAAO;GACP,MACI,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,WAAD,CAAY,CAAA;GACV,CAAA;EAEd;EACJ,KAAK,QACD,OAAO;GACH,MAAM;GACN,MACI,oBAAC,QAAD;IAAM,WAAU;IAA0F,UAAA;GAEpG,CAAA;EAEd;EACJ,KAAK,2BACD,OAAO;GAAE,MAAM;GAAe,MAAM,oBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;EAAE;EACxD,KAAK,4BACD,OAAO;GAAE,MAAM;GAAgB,MAAM,oBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;EAAE;EACzD,SACI,OAAO;GAAE,MAAM;GAAQ,OAAO;GAAQ,MAAM;EAAK;CACzD;AACJ;;AAGA,SAAgB,WAAW,EACvB,QACA,OACA,OACA,QAQD;CACC,MAAM,EAAE,MAAM,OAAO,SAAS,WAAW,MAAM;CAE/C,OACI,qBAAC,MAAD;EACU;EACN,UAAA;EACA,cAAY;GAAC;GAAM;GAAO;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACzD,WAAU;EAJd,UAAA;GAMK,OAAO,oBAAC,QAAD;IAAM,eAAY;IAAQ,UAAA;GAAW,CAAA,IAAI;GAChD,QACG,oBAAC,MAAD;IAAM,IAAG;IAAO,SAAQ;IAAU,eAAY;IACzC,UAAA;GACC,CAAA,IACN;GACJ,oBAAC,MAAD;IAAM,IAAG;IAAO,SAAQ;IAAQ,WAAU;IACrC,UAAA;GACC,CAAA;GACL,QACG,oBAAC,MAAD;IAAM,IAAG;IAAO,SAAQ;IAAU,MAAK;IAAQ,WAAU;IACpD,UAAA;GACC,CAAA,IACN;EACF;;AAEd"}

package/dist/display/ResourceCard.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+interface ResourceCardProps {
+  presentation?: 'default' | 'overview' | 'scan';
+  metrics?: readonly {
+    label: ReactNode;
+    value: ReactNode;
+  }[];
+  metricsLabel?: string;
+  actions: ReactNode;
+  compact?: boolean;
+  details: ReactNode;
+  leading?: ReactNode;
+  panel?: ReactNode;
+  status: ReactNode;
+  trailing?: ReactNode;
+}
+export declare function ResourceCard({ actions, compact, presentation, metrics, metricsLabel, details, leading, panel, status, trailing }: ResourceCardProps): import("react").JSX.Element;
+export declare function ResourceCardSkeleton({ presentation }: Pick<ResourceCardProps, 'presentation'>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ResourceCard.d.ts.map

package/dist/display/ResourceCard.js

@@ -0,0 +1,200 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Stack } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/ResourceCard.tsx
+function ResourceCard({ actions, compact = false, presentation = "default", metrics, metricsLabel, details, leading, panel, status, trailing }) {
+	if (presentation === "scan") return /* @__PURE__ */ jsx("article", {
+		className: "border-base-300 @container border-b last:border-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 px-3 py-1 @min-[40rem]:grid-cols-[minmax(5rem,7rem)_minmax(0,1fr)_auto]",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2 pt-1 @min-[40rem]:pt-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "text-base-700 shrink-0 [&_svg]:size-4",
+						children: leading
+					}), /* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1",
+						children: details
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "col-span-full row-start-3 min-w-0 @min-[28rem]:col-span-1 @min-[28rem]:row-start-2 @min-[40rem]:col-start-2 @min-[40rem]:row-start-1",
+					children: status
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "col-span-full row-start-2 flex flex-wrap items-center gap-2 @min-[28rem]:col-span-1 @min-[28rem]:col-start-2 @min-[28rem]:row-span-2 @min-[28rem]:row-start-1 @min-[40rem]:col-start-3",
+					children: actions
+				})
+			]
+		})
+	});
+	if (presentation === "overview") return /* @__PURE__ */ jsxs("article", {
+		className: "group border-base-300 from-base-100/70 to-base-50 hover:border-primary/30 flex min-w-0 flex-col overflow-hidden rounded-xl border bg-linear-to-br shadow-xs/5 transition-colors",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-3 p-3 pb-2",
+				children: [
+					leading ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "text-base-500 flex shrink-0 self-start pt-0.5 [&_svg]:size-5",
+						children: leading
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: "min-h-10 min-w-0 flex-1 [&_a]:block [&_a]:truncate",
+						children: details
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "shrink-0 self-start [&>[data-slot=skeleton]]:size-8",
+						children: actions
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("dl", {
+				"aria-label": metricsLabel,
+				className: "flex flex-1 flex-wrap gap-x-5 gap-y-1 px-3 pb-2",
+				children: metrics?.map((metric, index) => /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-16 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "min-h-4 min-w-10",
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							variant: "caption",
+							tone: "muted",
+							className: "block",
+							children: metric.label
+						})
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "order-first min-h-8 min-w-6",
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							variant: "metric",
+							className: "block tabular-nums",
+							children: metric.value
+						})
+					})]
+				}, index))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-base-300 bg-base-100/40 flex min-h-8 min-w-0 items-center border-t px-3 py-1",
+				children: status
+			})
+		]
+	});
+	if (compact) return /* @__PURE__ */ jsxs("article", {
+		className: "@container",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `grid min-w-0 items-center gap-3 px-3 sm:px-4 ${trailing ? "min-h-18 py-3" : "min-h-12 py-2"} ${trailing ? leading ? "grid-cols-1 @min-[36rem]:grid-cols-[auto_minmax(0,1fr)_auto]" : "grid-cols-1 @min-[36rem]:grid-cols-[minmax(0,1fr)_auto]" : leading ? "grid-cols-[auto_minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)_auto]"}`,
+			children: [
+				leading ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: `${trailing ? "hidden @min-[36rem]:flex" : "flex"} text-base-500 size-8 items-center justify-center [&_svg]:size-5 [&>[data-slot=skeleton]]:size-full`,
+					children: leading
+				}) : null,
+				trailing ? /* @__PURE__ */ jsxs(Stack, {
+					space: "tight",
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "min-w-0 truncate",
+						children: details
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0",
+						children: status
+					})]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "grid min-w-0 items-center gap-x-4 gap-y-1 @min-[40rem]:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "min-w-0 [&_a]:max-w-full [&_a]:min-w-0 [&_a]:truncate",
+						children: details
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0 @min-[40rem]:justify-end",
+						children: status
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: `flex min-w-0 shrink-0 flex-wrap items-center gap-2 ${trailing ? "border-base-300 bg-base-100/40 col-span-full -mx-3 -mb-3 justify-between border-t px-3 py-2 sm:-mx-4 sm:px-4 @min-[36rem]:col-span-1 @min-[36rem]:m-0 @min-[36rem]:justify-end @min-[36rem]:border-0 @min-[36rem]:bg-transparent @min-[36rem]:p-0 [&>button]:min-h-10 @min-[36rem]:[&>button]:min-h-8 [&>label]:min-h-10 @min-[36rem]:[&>label]:min-h-8" : ""}`,
+					children: [actions, trailing]
+				})
+			]
+		}), panel ? /* @__PURE__ */ jsx("div", {
+			className: "border-base-300 bg-base-100/40 border-t p-4 sm:p-5",
+			children: panel
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: "border-base-300 bg-base-100 hover:border-base-300 overflow-hidden rounded-xl border shadow-xs/5 transition-colors",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 gap-4 p-4 sm:p-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-start",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-start gap-3",
+					children: [leading ? /* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "bg-base-100 text-base-600 flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5",
+						children: leading
+					}) : null, /* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1",
+						children: details
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex min-h-11 min-w-0 flex-col items-start gap-1 md:max-w-72 md:items-end md:text-right",
+					children: status
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "border-base-300 bg-base-100/60 flex flex-col gap-3 border-t px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "-ml-1 flex min-w-0 flex-wrap items-center gap-1",
+					children: actions
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-3 sm:justify-end",
+					children: trailing
+				})]
+			}),
+			panel ? /* @__PURE__ */ jsx("div", {
+				className: "border-base-300 bg-base-100 border-t",
+				children: panel
+			}) : null
+		]
+	});
+}
+function ResourceCardSkeleton({ presentation = "default" }) {
+	if (presentation === "overview") return /* @__PURE__ */ jsx(ResourceCard, {
+		presentation: "overview",
+		details: /* @__PURE__ */ jsxs(Stack, {
+			space: "tight",
+			children: [/* @__PURE__ */ jsx(SkeletonLoader.Shape, {
+				presentation: "heading",
+				width: "wide"
+			}), /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" })]
+		}),
+		actions: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "circle" }),
+		metrics: [0, 1].map(() => ({
+			value: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "metric" }),
+			label: /* @__PURE__ */ jsx(SkeletonLoader.Shape, {})
+		})),
+		status: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "wide" })
+	});
+	return /* @__PURE__ */ jsx(ResourceCard, {
+		compact: true,
+		actions: null,
+		leading: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "circle" }),
+		details: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "medium" }),
+		status: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" }),
+		trailing: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-56 max-w-full items-center gap-3 py-1",
+			children: [/* @__PURE__ */ jsx(SkeletonLoader.Shape, {
+				presentation: "control",
+				width: "medium"
+			}), /* @__PURE__ */ jsx(SkeletonLoader.Shape, {
+				presentation: "control",
+				width: "medium"
+			})]
+		})
+	});
+}
+export { ResourceCard, ResourceCardSkeleton };
+
+//# sourceMappingURL=ResourceCard.js.map

package/dist/display/ResourceCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceCard.js","names":[],"sources":["../../src/display/ResourceCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\n\ninterface ResourceCardProps {\n    presentation?: 'default' | 'overview' | 'scan';\n    metrics?: readonly { label: ReactNode; value: ReactNode }[];\n    metricsLabel?: string;\n    actions: ReactNode;\n    compact?: boolean;\n    details: ReactNode;\n    leading?: ReactNode;\n    panel?: ReactNode;\n    status: ReactNode;\n    trailing?: ReactNode;\n}\n\nexport function ResourceCard({\n    actions,\n    compact = false,\n    presentation = 'default',\n    metrics,\n    metricsLabel,\n    details,\n    leading,\n    panel,\n    status,\n    trailing,\n}: ResourceCardProps) {\n    if (presentation === 'scan')\n        return (\n            <article className=\"border-base-300 @container border-b last:border-0\">\n                <div className=\"grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 px-3 py-1 @min-[40rem]:grid-cols-[minmax(5rem,7rem)_minmax(0,1fr)_auto]\">\n                    <div className=\"flex min-w-0 items-center gap-2 pt-1 @min-[40rem]:pt-0\">\n                        <span aria-hidden=\"true\" className=\"text-base-700 shrink-0 [&_svg]:size-4\">\n                            {leading}\n                        </span>\n                        <div className=\"min-w-0 flex-1\">{details}</div>\n                    </div>\n                    <div className=\"col-span-full row-start-3 min-w-0 @min-[28rem]:col-span-1 @min-[28rem]:row-start-2 @min-[40rem]:col-start-2 @min-[40rem]:row-start-1\">\n                        {status}\n                    </div>\n                    <div className=\"col-span-full row-start-2 flex flex-wrap items-center gap-2 @min-[28rem]:col-span-1 @min-[28rem]:col-start-2 @min-[28rem]:row-span-2 @min-[28rem]:row-start-1 @min-[40rem]:col-start-3\">\n                        {actions}\n                    </div>\n                </div>\n            </article>\n        );\n\n    if (presentation === 'overview') {\n        return (\n            <article className=\"group border-base-300 from-base-100/70 to-base-50 hover:border-primary/30 flex min-w-0 flex-col overflow-hidden rounded-xl border bg-linear-to-br shadow-xs/5 transition-colors\">\n                <div className=\"flex min-w-0 items-center gap-3 p-3 pb-2\">\n                    {leading ? (\n                        <span\n                            aria-hidden=\"true\"\n                            className=\"text-base-500 flex shrink-0 self-start pt-0.5 [&_svg]:size-5\"\n                        >\n                            {leading}\n                        </span>\n                    ) : null}\n                    <div className=\"min-h-10 min-w-0 flex-1 [&_a]:block [&_a]:truncate\">{details}</div>\n                    <div className=\"shrink-0 self-start [&>[data-slot=skeleton]]:size-8\">{actions}</div>\n                </div>\n                <dl aria-label={metricsLabel} className=\"flex flex-1 flex-wrap gap-x-5 gap-y-1 px-3 pb-2\">\n                    {metrics?.map((metric, index) => (\n                        <div key={index} className=\"flex min-w-16 items-center gap-1.5\">\n                            <dt className=\"min-h-4 min-w-10\">\n                                <Text as=\"span\" variant=\"caption\" tone=\"muted\" className=\"block\">\n                                    {metric.label}\n                                </Text>\n                            </dt>\n                            <dd className=\"order-first min-h-8 min-w-6\">\n                                <Text as=\"span\" variant=\"metric\" className=\"block tabular-nums\">\n                                    {metric.value}\n                                </Text>\n                            </dd>\n                        </div>\n                    ))}\n                </dl>\n                <div className=\"border-base-300 bg-base-100/40 flex min-h-8 min-w-0 items-center border-t px-3 py-1\">\n                    {status}\n                </div>\n            </article>\n        );\n    }\n\n    if (compact) {\n        return (\n            <article className=\"@container\">\n                <div\n                    className={`grid min-w-0 items-center gap-3 px-3 sm:px-4 ${trailing ? 'min-h-18 py-3' : 'min-h-12 py-2'} ${\n                        trailing\n                            ? leading\n                                ? 'grid-cols-1 @min-[36rem]:grid-cols-[auto_minmax(0,1fr)_auto]'\n                                : 'grid-cols-1 @min-[36rem]:grid-cols-[minmax(0,1fr)_auto]'\n                            : leading\n                              ? 'grid-cols-[auto_minmax(0,1fr)_auto]'\n                              : 'grid-cols-[minmax(0,1fr)_auto]'\n                    }`}\n                >\n                    {leading ? (\n                        <span\n                            aria-hidden=\"true\"\n                            className={`${trailing ? 'hidden @min-[36rem]:flex' : 'flex'} text-base-500 size-8 items-center justify-center [&_svg]:size-5 [&>[data-slot=skeleton]]:size-full`}\n                        >\n                            {leading}\n                        </span>\n                    ) : null}\n                    {trailing ? (\n                        <Stack space=\"tight\" className=\"min-w-0\">\n                            <div className=\"min-w-0 truncate\">{details}</div>\n                            <div className=\"flex min-w-0\">{status}</div>\n                        </Stack>\n                    ) : (\n                        <div className=\"grid min-w-0 items-center gap-x-4 gap-y-1 @min-[40rem]:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n                            <div className=\"min-w-0 [&_a]:max-w-full [&_a]:min-w-0 [&_a]:truncate\">{details}</div>\n                            <div className=\"flex min-w-0 @min-[40rem]:justify-end\">{status}</div>\n                        </div>\n                    )}\n                    <div\n                        className={`flex min-w-0 shrink-0 flex-wrap items-center gap-2 ${\n                            trailing\n                                ? 'border-base-300 bg-base-100/40 col-span-full -mx-3 -mb-3 justify-between border-t px-3 py-2 sm:-mx-4 sm:px-4 @min-[36rem]:col-span-1 @min-[36rem]:m-0 @min-[36rem]:justify-end @min-[36rem]:border-0 @min-[36rem]:bg-transparent @min-[36rem]:p-0 [&>button]:min-h-10 @min-[36rem]:[&>button]:min-h-8 [&>label]:min-h-10 @min-[36rem]:[&>label]:min-h-8'\n                                : ''\n                        }`}\n                    >\n                        {actions}\n                        {trailing}\n                    </div>\n                </div>\n                {panel ? <div className=\"border-base-300 bg-base-100/40 border-t p-4 sm:p-5\">{panel}</div> : null}\n            </article>\n        );\n    }\n\n    return (\n        <article className=\"border-base-300 bg-base-100 hover:border-base-300 overflow-hidden rounded-xl border shadow-xs/5 transition-colors\">\n            <div className=\"grid min-w-0 gap-4 p-4 sm:p-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-start\">\n                <div className=\"flex min-w-0 items-start gap-3\">\n                    {leading ? (\n                        <div\n                            aria-hidden=\"true\"\n                            className=\"bg-base-100 text-base-600 flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5\"\n                        >\n                            {leading}\n                        </div>\n                    ) : null}\n                    <div className=\"min-w-0 flex-1\">{details}</div>\n                </div>\n                <div className=\"flex min-h-11 min-w-0 flex-col items-start gap-1 md:max-w-72 md:items-end md:text-right\">\n                    {status}\n                </div>\n            </div>\n            <div className=\"border-base-300 bg-base-100/60 flex flex-col gap-3 border-t px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4\">\n                <div className=\"-ml-1 flex min-w-0 flex-wrap items-center gap-1\">{actions}</div>\n                <div className=\"flex min-w-0 flex-wrap items-center gap-3 sm:justify-end\">{trailing}</div>\n            </div>\n            {panel ? <div className=\"border-base-300 bg-base-100 border-t\">{panel}</div> : null}\n        </article>\n    );\n}\n\nexport function ResourceCardSkeleton({ presentation = 'default' }: Pick<ResourceCardProps, 'presentation'>) {\n    if (presentation === 'overview')\n        return (\n            <ResourceCard\n                presentation=\"overview\"\n                details={\n                    <Stack space=\"tight\">\n                        <SkeletonLoader.Shape presentation=\"heading\" width=\"wide\" />\n                        <SkeletonLoader.Shape width=\"short\" />\n                    </Stack>\n                }\n                actions={<SkeletonLoader.Shape presentation=\"circle\" />}\n                metrics={[0, 1].map(() => ({\n                    value: <SkeletonLoader.Shape presentation=\"metric\" />,\n                    label: <SkeletonLoader.Shape />,\n                }))}\n                status={<SkeletonLoader.Shape width=\"wide\" />}\n            />\n        );\n\n    return (\n        <ResourceCard\n            compact\n            actions={null}\n            leading={<SkeletonLoader.Shape presentation=\"circle\" />}\n            details={<SkeletonLoader.Shape width=\"medium\" />}\n            status={<SkeletonLoader.Shape width=\"short\" />}\n            trailing={\n                <div className=\"flex w-56 max-w-full items-center gap-3 py-1\">\n                    <SkeletonLoader.Shape presentation=\"control\" width=\"medium\" />\n                    <SkeletonLoader.Shape presentation=\"control\" width=\"medium\" />\n                </div>\n            }\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/display/RowList.d.ts

@@ -0,0 +1,28 @@
+import { StatusTone } from "../feedback/StatusIndicator.js";
+import { ReactNode } from "react";
+/** Rows of one list inside a single bordered panel, separated by rules; or ruled rows in two columns on wide screens. */
+export declare function RowList({ children, label, layout }: {
+  children: ReactNode;
+  label: string;
+  layout?: 'panel' | 'columns';
+}): import("react").JSX.Element;
+interface RowListItemProps {
+  /** Independent controls at the end of the row. */
+  actions?: ReactNode;
+  /** Short labels such as "lar can fix", shown before the actions or chevron. */
+  badges?: ReactNode;
+  detail?: string;
+  icon: ReactNode;
+  /** A round portrait instead of the tinted square tile. */
+  avatar?: boolean;
+  /** Makes the whole row a link, with actions remaining independently usable. */
+  href?: string;
+  onNavigate?: (href: string) => void;
+  subtitle?: string;
+  title: string;
+  tone?: StatusTone;
+}
+/** One row: a tinted icon, what the user recognises, one line about it, and muted facts. */
+export declare function RowListItem({ actions, badges, detail, icon, avatar, href, onNavigate, subtitle, title, tone }: RowListItemProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RowList.d.ts.map

package/dist/display/RowList.js

@@ -0,0 +1,76 @@
+import { LinkBox, LinkOverlay } from "../typography/Link.js";
+import { Text } from "../typography/Typography.js";
+import { toneTileClasses } from "./ToneTile.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+// src/display/RowList.tsx
+/** Rows of one list inside a single bordered panel, separated by rules; or ruled rows in two columns on wide screens. */
+function RowList({ children, label, layout = "panel" }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: layout === "columns" ? "[&>li]:border-base-300 grid gap-x-8 md:grid-cols-2 [&>li]:border-b" : "divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border",
+		children
+	});
+}
+/** One row: a tinted icon, what the user recognises, one line about it, and muted facts. */
+function RowListItem({ actions, badges, detail, icon, avatar = false, href, onNavigate, subtitle, title, tone = "neutral" }) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: `flex shrink-0 items-center justify-center [&>div]:w-full [&>svg]:size-5 ${avatar ? "size-10 overflow-hidden rounded-full" : "size-9 rounded-lg"} ${toneTileClasses[tone]}`,
+			children: icon
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "label",
+					truncate: true,
+					title,
+					children: href ? /* @__PURE__ */ jsx(LinkOverlay, {
+						href,
+						onNavigate,
+						children: title
+					}) : title
+				}),
+				subtitle ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					truncate: true,
+					title: subtitle,
+					children: subtitle
+				}) : null,
+				detail ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					truncate: true,
+					title: detail,
+					children: detail
+				}) : null
+			]
+		}),
+		badges ? /* @__PURE__ */ jsx("span", {
+			className: "hidden shrink-0 items-center gap-2 sm:flex",
+			children: badges
+		}) : null
+	] });
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(LinkBox, {
+		className: `flex w-full min-w-0 items-center gap-3 px-4 py-3 ${href ? "hover:bg-base-100 focus-within:bg-base-100 transition-colors" : ""}`,
+		children: [
+			content,
+			actions ? /* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0 items-center gap-1",
+				children: actions
+			}) : null,
+			href ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-base-500 flex shrink-0 [&>svg]:size-4",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			}) : null
+		]
+	}) });
+}
+export { RowList, RowListItem };
+
+//# sourceMappingURL=RowList.js.map

package/dist/display/RowList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowList.js","names":[],"sources":["../../src/display/RowList.tsx"],"sourcesContent":["import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport type { StatusTone } from '../feedback/StatusIndicator';\nimport { LinkBox, LinkOverlay } from '../typography/Link';\nimport { Text } from '../typography/Typography';\nimport { toneTileClasses } from './ToneTile';\n\n/** Rows of one list inside a single bordered panel, separated by rules; or ruled rows in two columns on wide screens. */\nexport function RowList({\n    children,\n    label,\n    layout = 'panel',\n}: {\n    children: ReactNode;\n    label: string;\n    layout?: 'panel' | 'columns';\n}) {\n    return (\n        <ul\n            aria-label={label}\n            className={\n                layout === 'columns'\n                    ? '[&>li]:border-base-300 grid gap-x-8 md:grid-cols-2 [&>li]:border-b'\n                    : 'divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border'\n            }\n        >\n            {children}\n        </ul>\n    );\n}\n\ninterface RowListItemProps {\n    /** Independent controls at the end of the row. */\n    actions?: ReactNode;\n    /** Short labels such as \"lar can fix\", shown before the actions or chevron. */\n    badges?: ReactNode;\n    detail?: string;\n    icon: ReactNode;\n    /** A round portrait instead of the tinted square tile. */\n    avatar?: boolean;\n    /** Makes the whole row a link, with actions remaining independently usable. */\n    href?: string;\n    onNavigate?: (href: string) => void;\n    subtitle?: string;\n    title: string;\n    tone?: StatusTone;\n}\n\n/** One row: a tinted icon, what the user recognises, one line about it, and muted facts. */\nexport function RowListItem({\n    actions,\n    badges,\n    detail,\n    icon,\n    avatar = false,\n    href,\n    onNavigate,\n    subtitle,\n    title,\n    tone = 'neutral',\n}: RowListItemProps) {\n    const content = (\n        <>\n            <span\n                aria-hidden=\"true\"\n                className={`flex shrink-0 items-center justify-center [&>div]:w-full [&>svg]:size-5 ${avatar ? 'size-10 overflow-hidden rounded-full' : 'size-9 rounded-lg'} ${toneTileClasses[tone]}`}\n            >\n                {icon}\n            </span>\n            <span className=\"flex min-w-0 flex-1 flex-col\">\n                <Text as=\"span\" variant=\"label\" truncate title={title}>\n                    {href ? (\n                        <LinkOverlay href={href} onNavigate={onNavigate}>\n                            {title}\n                        </LinkOverlay>\n                    ) : (\n                        title\n                    )}\n                </Text>\n                {subtitle ? (\n                    <Text as=\"span\" truncate title={subtitle}>\n                        {subtitle}\n                    </Text>\n                ) : null}\n                {detail ? (\n                    <Text as=\"span\" variant=\"caption\" tone=\"muted\" truncate title={detail}>\n                        {detail}\n                    </Text>\n                ) : null}\n            </span>\n            {badges ? <span className=\"hidden shrink-0 items-center gap-2 sm:flex\">{badges}</span> : null}\n        </>\n    );\n    const row = 'flex w-full min-w-0 items-center gap-3 px-4 py-3';\n\n    return (\n        <li>\n            <LinkBox className={`${row} ${href ? 'hover:bg-base-100 focus-within:bg-base-100 transition-colors' : ''}`}>\n                {content}\n                {actions ? <span className=\"flex shrink-0 items-center gap-1\">{actions}</span> : null}\n                {href ? (\n                    <span aria-hidden=\"true\" className=\"text-base-500 flex shrink-0 [&>svg]:size-4\">\n                        <ChevronRightIcon />\n                    </span>\n                ) : null}\n            </LinkBox>\n        </li>\n    );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,QAAQ,EACpB,UACA,OACA,SAAS,WAKV;CACC,OACI,oBAAC,MAAD;EACI,cAAY;EACZ,WACI,WAAW,YACL,uEACA;EAGT;CACD,CAAA;AAEZ;;AAoBA,SAAgB,YAAY,EACxB,SACA,QACA,QACA,MACA,SAAS,OACT,MACA,YACA,UACA,OACA,OAAO,aACU;CACjB,MAAM,UACF,qBAAA,UAAA,EAAA,UAAA;EACI,oBAAC,QAAD;GACI,eAAY;GACZ,WAAW,2EAA2E,SAAS,yCAAyC,oBAAoB,GAAG,gBAAgB;GAE9K,UAAA;EACC,CAAA;EACN,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACI,oBAAC,MAAD;KAAM,IAAG;KAAO,SAAQ;KAAQ,UAAA;KAAgB;KAC3C,UAAA,OACG,oBAAC,aAAD;MAAmB;MAAkB;MAChC,UAAA;KACQ,CAAA,IAEb;IAEF,CAAA;IACL,WACG,oBAAC,MAAD;KAAM,IAAG;KAAO,UAAA;KAAS,OAAO;KAC3B,UAAA;IACC,CAAA,IACN;IACH,SACG,oBAAC,MAAD;KAAM,IAAG;KAAO,SAAQ;KAAU,MAAK;KAAQ,UAAA;KAAS,OAAO;KAC1D,UAAA;IACC,CAAA,IACN;GACF;;EACL,SAAS,oBAAC,QAAD;GAAM,WAAU;GAA8C,UAAA;EAAa,CAAA,IAAI;CAC3F,EAAA,CAAA;CAIN,OACI,oBAAC,MAAD,EAAA,UACI,qBAAC,SAAD;EAAS,WAAW,oDAAU,OAAO,iEAAiE;EAAtG,UAAA;GACK;GACA,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAoC,UAAA;GAAc,CAAA,IAAI;GAChF,OACG,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAC/B,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACjB,CAAA,IACN;EACC;CACT,CAAA,EAAA,CAAA;AAEZ"}

package/dist/display/StackedMeter.d.ts

@@ -0,0 +1,28 @@
+export type MeterTone = 'primary' | 'info' | 'success' | 'warning';
+export interface MeterSegment {
+  id: string;
+  /** Shown on hover, for example "Playback 50%". */
+  label: string;
+  tone: MeterTone;
+  /** The share of the whole meter, from 0 to 1. */
+  value: number;
+}
+interface StackedMeterProps {
+  /** Summarizes the meter for assistive technology. */
+  label: string;
+  /** A dashed line at a share of the whole, for example a limit. */
+  marker?: {
+    label: string;
+    value: number;
+  };
+  segments: readonly MeterSegment[];
+}
+/** One bar split into toned segments, with an optional dashed marker. */
+export declare function StackedMeter({ label, marker, segments }: StackedMeterProps): import("react").JSX.Element;
+/** The key to the tones of one or more stacked meters. */
+export declare function MeterLegend({ items, label }: {
+  items: readonly Omit<MeterSegment, 'value'>[];
+  label: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StackedMeter.d.ts.map

package/dist/display/StackedMeter.js

@@ -0,0 +1,48 @@
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/StackedMeter.tsx
+const toneClasses = {
+	primary: "bg-primary",
+	info: "bg-info",
+	success: "bg-success",
+	warning: "bg-warning"
+};
+/** One bar split into toned segments, with an optional dashed marker. */
+function StackedMeter({ label, marker, segments }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "img",
+		"aria-label": label,
+		className: "bg-base-200 relative flex h-4 w-full overflow-hidden rounded-full",
+		children: [segments.filter((segment) => segment.value > 0).map((segment) => /* @__PURE__ */ jsx("span", {
+			title: segment.label,
+			className: `border-base-50 h-full border-r last:border-r-0 ${toneClasses[segment.tone]}`,
+			style: { width: `${Math.min(segment.value, 1) * 100}%` }
+		}, segment.id)), marker ? /* @__PURE__ */ jsx("span", {
+			title: marker.label,
+			className: "border-base-content absolute inset-y-0 border-l-2 border-dashed",
+			style: { left: `${Math.min(Math.max(marker.value, 0), 1) * 100}%` }
+		}) : null]
+	});
+}
+/** The key to the tones of one or more stacked meters. */
+function MeterLegend({ items, label }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "flex flex-wrap gap-x-4 gap-y-1",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: `size-2 shrink-0 rounded-full ${toneClasses[item.tone]}`
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "caption",
+				tone: "muted",
+				children: item.label
+			})]
+		}, item.id))
+	});
+}
+export { MeterLegend, StackedMeter };
+
+//# sourceMappingURL=StackedMeter.js.map

package/dist/display/StackedMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedMeter.js","names":[],"sources":["../../src/display/StackedMeter.tsx"],"sourcesContent":["import { Text } from '../typography/Typography';\n\nexport type MeterTone = 'primary' | 'info' | 'success' | 'warning';\n\nconst toneClasses: Record<MeterTone, string> = {\n    primary: 'bg-primary',\n    info: 'bg-info',\n    success: 'bg-success',\n    warning: 'bg-warning',\n};\n\nexport interface MeterSegment {\n    id: string;\n    /** Shown on hover, for example \"Playback 50%\". */\n    label: string;\n    tone: MeterTone;\n    /** The share of the whole meter, from 0 to 1. */\n    value: number;\n}\n\ninterface StackedMeterProps {\n    /** Summarizes the meter for assistive technology. */\n    label: string;\n    /** A dashed line at a share of the whole, for example a limit. */\n    marker?: { label: string; value: number };\n    segments: readonly MeterSegment[];\n}\n\n/** One bar split into toned segments, with an optional dashed marker. */\nexport function StackedMeter({ label, marker, segments }: StackedMeterProps) {\n    return (\n        <div\n            role=\"img\"\n            aria-label={label}\n            className=\"bg-base-200 relative flex h-4 w-full overflow-hidden rounded-full\"\n        >\n            {segments\n                .filter((segment) => segment.value > 0)\n                .map((segment) => (\n                    <span\n                        key={segment.id}\n                        title={segment.label}\n                        className={`border-base-50 h-full border-r last:border-r-0 ${toneClasses[segment.tone]}`}\n                        style={{ width: `${Math.min(segment.value, 1) * 100}%` }}\n                    />\n                ))}\n            {marker ? (\n                <span\n                    title={marker.label}\n                    className=\"border-base-content absolute inset-y-0 border-l-2 border-dashed\"\n                    style={{ left: `${Math.min(Math.max(marker.value, 0), 1) * 100}%` }}\n                />\n            ) : null}\n        </div>\n    );\n}\n\n/** The key to the tones of one or more stacked meters. */\nexport function MeterLegend({ items, label }: { items: readonly Omit<MeterSegment, 'value'>[]; label: string }) {\n    return (\n        <ul aria-label={label} className=\"flex flex-wrap gap-x-4 gap-y-1\">\n            {items.map((item) => (\n                <li key={item.id} className=\"flex items-center gap-1.5\">\n                    <span aria-hidden=\"true\" className={`size-2 shrink-0 rounded-full ${toneClasses[item.tone]}`} />\n                    <Text as=\"span\" variant=\"caption\" tone=\"muted\">\n                        {item.label}\n                    </Text>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;AAIA,MAAM,cAAyC;CAC3C,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;AACb;;AAoBA,SAAgB,aAAa,EAAE,OAAO,QAAQ,YAA+B;CACzE,OACI,qBAAC,OAAD;EACI,MAAK;EACL,cAAY;EACZ,WAAU;EAHd,UAAA,CAKK,SACI,QAAQ,YAAY,QAAQ,QAAQ,CAAC,CAAC,CACtC,KAAK,YACF,oBAAC,QAAD;GAEI,OAAO,QAAQ;GACf,WAAW,kDAAkD,YAAY,QAAQ;GACjF,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,QAAQ,OAAO,CAAC,IAAI,IAAI,GAAG;EAC1D,GAJQ,QAAQ,EAIhB,CACJ,GACJ,SACG,oBAAC,QAAD;GACI,OAAO,OAAO;GACd,WAAU;GACV,OAAO,EAAE,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG;EACrE,CAAA,IACD,IACH;;AAEb;;AAGA,SAAgB,YAAY,EAAE,OAAO,SAA2E;CAC5G,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B,UAAA,MAAM,KAAK,SACR,qBAAC,MAAD;GAAkB,WAAU;GAA5B,UAAA,CACI,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,gCAAgC,YAAY,KAAK;GAAU,CAAA,GAC/F,oBAAC,MAAD;IAAM,IAAG;IAAO,SAAQ;IAAU,MAAK;IAClC,UAAA,KAAK;GACJ,CAAA,CACN;EALK,GAAA,KAAK,EAKV,CACP;CACD,CAAA;AAEZ"}

package/dist/display/StatTile.d.ts

@@ -0,0 +1,13 @@
+import { StatusTone } from "../feedback/StatusIndicator.js";
+import { ReactNode } from "react";
+interface StatTileProps {
+  label: string;
+  onClick: () => void;
+  selected: boolean;
+  tone: StatusTone;
+  value: ReactNode;
+}
+/** A count with a label that doubles as a toggle filter. */
+export declare function StatTile({ label, onClick, selected, tone, value }: StatTileProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=StatTile.d.ts.map

package/dist/display/StatTile.js

@@ -0,0 +1,35 @@
+import { StatusIndicator } from "../feedback/StatusIndicator.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Inline } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/StatTile.tsx
+/** A count with a label that doubles as a toggle filter. */
+function StatTile({ label, onClick, selected, tone, value }) {
+	return /* @__PURE__ */ jsxs("button", {
+		...tabbable,
+		type: "button",
+		"aria-pressed": selected,
+		className: `focus-visible:outline-primary flex flex-col items-start gap-2 rounded-lg border p-4 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 ${selected ? "border-primary bg-primary/5" : "border-base-300 bg-base-100/60 hover:border-base-300"}`,
+		onClick,
+		children: [/* @__PURE__ */ jsxs(Inline, {
+			align: "center",
+			space: "related",
+			children: [/* @__PURE__ */ jsx(StatusIndicator, {
+				size: "sm",
+				tone
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "label",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "metric",
+			children: value
+		})]
+	});
+}
+export { StatTile };
+
+//# sourceMappingURL=StatTile.js.map

package/dist/display/StatTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatTile.js","names":[],"sources":["../../src/display/StatTile.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Inline } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\n\ninterface StatTileProps {\n    label: string;\n    onClick: () => void;\n    selected: boolean;\n    tone: StatusTone;\n    value: ReactNode;\n}\n\n/** A count with a label that doubles as a toggle filter. */\nexport function StatTile({ label, onClick, selected, tone, value }: StatTileProps) {\n    return (\n        <button\n            {...tabbable}\n            type=\"button\"\n            aria-pressed={selected}\n            className={`focus-visible:outline-primary flex flex-col items-start gap-2 rounded-lg border p-4 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 ${\n                selected ? 'border-primary bg-primary/5' : 'border-base-300 bg-base-100/60 hover:border-base-300'\n            }`}\n            onClick={onClick}\n        >\n            <Inline align=\"center\" space=\"related\">\n                <StatusIndicator size=\"sm\" tone={tone} />\n                <Text as=\"span\" variant=\"label\">\n                    {label}\n                </Text>\n            </Inline>\n            <Text as=\"span\" variant=\"metric\">\n                {value}\n            </Text>\n        </button>\n    );\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,SAAS,EAAE,OAAO,SAAS,UAAU,MAAM,SAAwB;CAC/E,OACI,qBAAC,UAAD;EACI,GAAI;EACJ,MAAK;EACL,gBAAc;EACd,WAAW,0KACP,WAAW,gCAAgC;EAEtC;EAPb,UAAA,CASI,qBAAC,QAAD;GAAQ,OAAM;GAAS,OAAM;GAA7B,UAAA,CACI,oBAAC,iBAAD;IAAiB,MAAK;IAAW;GAAO,CAAA,GACxC,oBAAC,MAAD;IAAM,IAAG;IAAO,SAAQ;IACnB,UAAA;GACC,CAAA,CACF;EACR,CAAA,GAAA,oBAAC,MAAD;GAAM,IAAG;GAAO,SAAQ;GACnB,UAAA;EACC,CAAA,CACF;;AAEhB"}

package/dist/display/StepList.d.ts

@@ -0,0 +1,5 @@
+/** Numbered instructions in reading order. */
+export declare function StepList({ steps }: {
+  steps: readonly string[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=StepList.d.ts.map

package/dist/display/StepList.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+// src/display/StepList.tsx
+/** Numbered instructions in reading order. */
+function StepList({ steps }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "text-base-800 list-decimal space-y-1 pl-5 text-sm",
+		children: steps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step))
+	});
+}
+export { StepList };
+
+//# sourceMappingURL=StepList.js.map

package/dist/display/StepList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepList.js","names":[],"sources":["../../src/display/StepList.tsx"],"sourcesContent":["/** Numbered instructions in reading order. */\nexport function StepList({ steps }: { steps: readonly string[] }) {\n    return (\n        <ol className=\"text-base-800 list-decimal space-y-1 pl-5 text-sm\">\n            {steps.map((step) => (\n                <li key={step}>{step}</li>\n            ))}\n        </ol>\n    );\n}\n"],"mappings":";;;AACA,SAAgB,SAAS,EAAE,SAAuC;CAC9D,OACI,oBAAC,MAAD;EAAI,WAAU;EACT,UAAA,MAAM,KAAK,SACR,oBAAC,MAAD,EAAA,UAAgB,KAAS,GAAhB,IAAgB,CAC5B;CACD,CAAA;AAEZ"}