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

package/dist/display/NoticeCard.d.ts

@@ -0,0 +1,24 @@
+import { StatusTone } from "../feedback/StatusIndicator.js";
+import { ReactNode } from "react";
+interface NoticeCardProps {
+  /** Buttons for what can be done, primary first. */
+  actions?: ReactNode;
+  /** A short status such as a severity, beside the title. */
+  badge?: ReactNode;
+  children?: ReactNode;
+  description: ReactNode;
+  /** Quiet content under the actions, such as a disclosure of technical details. */
+  footer?: ReactNode;
+  icon: ReactNode;
+  /** The title's heading level; one below the section the card sits in. */
+  level?: 'h2' | 'h3' | 'h4';
+  title: string;
+  tone: StatusTone;
+}
+/**
+ * A persistent, substantial item that needs examination or a decision, with optional details and
+ * actions. Use Alert for current status, InfoBox for optional guidance, and InsetPanel for grouping.
+ */
+export declare function NoticeCard({ actions, badge, children, description, footer, icon, level, title, tone }: NoticeCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=NoticeCard.d.ts.map

package/dist/display/NoticeCard.js

@@ -0,0 +1,59 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { toneTileClasses } from "./ToneTile.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/NoticeCard.tsx
+const accentClasses = {
+	neutral: "border-l-base-300",
+	success: "border-l-success",
+	warning: "border-l-warning",
+	danger: "border-l-danger",
+	info: "border-l-info"
+};
+/**
+* A persistent, substantial item that needs examination or a decision, with optional details and
+* actions. Use Alert for current status, InfoBox for optional guidance, and InsetPanel for grouping.
+*/
+function NoticeCard({ actions, badge, children, description, footer, icon, level = "h2", title, tone }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx("article", {
+		"aria-labelledby": id,
+		className: `border-base-300 bg-base-100 rounded-lg border border-l-4 p-4 sm:p-5 ${accentClasses[tone]}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 gap-3 sm:gap-4",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: `flex size-9 shrink-0 items-center justify-center rounded-lg [&>svg]:size-5 ${toneTileClasses[tone]}`,
+				children: icon
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col gap-1",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-wrap items-center justify-between gap-2",
+							children: [/* @__PURE__ */ jsx(Heading, {
+								id,
+								as: level,
+								variant: "title",
+								children: title
+							}), badge]
+						}), /* @__PURE__ */ jsx(Text, {
+							tone: "muted",
+							children: description
+						})]
+					}),
+					children,
+					actions ? /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: actions
+					}) : null,
+					footer
+				]
+			})]
+		})
+	});
+}
+export { NoticeCard };
+
+//# sourceMappingURL=NoticeCard.js.map

package/dist/display/NoticeCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoticeCard.js","names":[],"sources":["../../src/display/NoticeCard.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport type { StatusTone } from '../feedback/StatusIndicator';\nimport { Heading, Text } from '../typography/Typography';\nimport { toneTileClasses } from './ToneTile';\n\nconst accentClasses: Record<StatusTone, string> = {\n    neutral: 'border-l-base-300',\n    success: 'border-l-success',\n    warning: 'border-l-warning',\n    danger: 'border-l-danger',\n    info: 'border-l-info',\n};\n\ninterface NoticeCardProps {\n    /** Buttons for what can be done, primary first. */\n    actions?: ReactNode;\n    /** A short status such as a severity, beside the title. */\n    badge?: ReactNode;\n    children?: ReactNode;\n    description: ReactNode;\n    /** Quiet content under the actions, such as a disclosure of technical details. */\n    footer?: ReactNode;\n    icon: ReactNode;\n    /** The title's heading level; one below the section the card sits in. */\n    level?: 'h2' | 'h3' | 'h4';\n    title: string;\n    tone: StatusTone;\n}\n\n/**\n * A persistent, substantial item that needs examination or a decision, with optional details and\n * actions. Use Alert for current status, InfoBox for optional guidance, and InsetPanel for grouping.\n */\nexport function NoticeCard({\n    actions,\n    badge,\n    children,\n    description,\n    footer,\n    icon,\n    level = 'h2',\n    title,\n    tone,\n}: NoticeCardProps) {\n    const id = useId();\n\n    return (\n        <article\n            aria-labelledby={id}\n            className={`border-base-300 bg-base-100 rounded-lg border border-l-4 p-4 sm:p-5 ${accentClasses[tone]}`}\n        >\n            <div className=\"flex min-w-0 gap-3 sm:gap-4\">\n                <span\n                    aria-hidden=\"true\"\n                    className={`flex size-9 shrink-0 items-center justify-center rounded-lg [&>svg]:size-5 ${toneTileClasses[tone]}`}\n                >\n                    {icon}\n                </span>\n                <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n                    <div className=\"flex min-w-0 flex-col gap-1\">\n                        <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-2\">\n                            <Heading id={id} as={level} variant=\"title\">\n                                {title}\n                            </Heading>\n                            {badge}\n                        </div>\n                        <Text tone=\"muted\">{description}</Text>\n                    </div>\n                    {children}\n                    {actions ? <div className=\"flex flex-wrap items-center gap-2\">{actions}</div> : null}\n                    {footer}\n                </div>\n            </div>\n        </article>\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,gBAA4C;CAC9C,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV;;;;;AAsBA,SAAgB,WAAW,EACvB,SACA,OACA,UACA,aACA,QACA,MACA,QAAQ,MACR,OACA,QACgB;CAChB,MAAM,KAAK,MAAM;CAEjB,OACI,oBAAC,WAAD;EACI,mBAAiB;EACjB,WAAW,uEAAuE,cAAc;EAEhG,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,oBAAC,QAAD;IACI,eAAY;IACZ,WAAW,8EAA8E,gBAAgB;IAExG,UAAA;GACC,CAAA,GACN,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACI,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACI,oBAAC,SAAD;QAAa;QAAI,IAAI;QAAO,SAAQ;QAC/B,UAAA;OACI,CAAA,GACR,KACA;MACL,CAAA,GAAA,oBAAC,MAAD;OAAM,MAAK;OAAS,UAAA;MAAkB,CAAA,CACrC;;KACJ;KACA,UAAU,oBAAC,OAAD;MAAK,WAAU;MAAqC,UAAA;KAAa,CAAA,IAAI;KAC/E;IACA;GACJ,CAAA,CAAA;;CACA,CAAA;AAEjB"}

package/dist/display/PairingList.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+export interface PairingListItem {
+  key: string;
+  /** Short ordinal such as `1` or `2-05`. */
+  position: string;
+  title: string;
+  /** A secondary fact aligned in its own column, such as a duration. */
+  detail?: string;
+  /** One line under the title; `warning` draws attention to a doubt. */
+  note?: string;
+  noteTone?: 'muted' | 'warning';
+  control: ReactNode;
+}
+/** Rows that pair a numbered item with a chosen counterpart, such as release tracks and files. */
+export declare function PairingList({ items, label }: {
+  items: readonly PairingListItem[];
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PairingList.d.ts.map

package/dist/display/PairingList.js

@@ -0,0 +1,53 @@
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/PairingList.tsx
+/** Rows that pair a numbered item with a chosen counterpart, such as release tracks and files. */
+function PairingList({ items, label }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "divide-base-300 border-base-300 bg-base-100 divide-y rounded-lg border",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "grid min-w-0 grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 px-3 py-2.5 sm:grid-cols-[2.5rem_minmax(0,1fr)_3.5rem_minmax(0,20rem)] sm:px-4",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					tone: "muted",
+					className: "tabular-nums",
+					children: item.position
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: "block",
+						truncate: true,
+						title: item.title,
+						variant: "label",
+						children: item.title
+					}), item.note ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: "block",
+						truncate: true,
+						title: item.note,
+						variant: "caption",
+						tone: item.noteTone === "warning" ? "warning" : "muted",
+						children: item.note
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					tone: "muted",
+					className: "text-right tabular-nums",
+					children: item.detail ?? ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "col-span-3 min-w-0 sm:col-span-1",
+					children: item.control
+				})
+			]
+		}, item.key))
+	});
+}
+export { PairingList };
+
+//# sourceMappingURL=PairingList.js.map

package/dist/display/PairingList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PairingList.js","names":[],"sources":["../../src/display/PairingList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Text } from '../typography/Typography';\n\nexport interface PairingListItem {\n    key: string;\n    /** Short ordinal such as `1` or `2-05`. */\n    position: string;\n    title: string;\n    /** A secondary fact aligned in its own column, such as a duration. */\n    detail?: string;\n    /** One line under the title; `warning` draws attention to a doubt. */\n    note?: string;\n    noteTone?: 'muted' | 'warning';\n    control: ReactNode;\n}\n\n/** Rows that pair a numbered item with a chosen counterpart, such as release tracks and files. */\nexport function PairingList({ items, label }: { items: readonly PairingListItem[]; label: string }) {\n    return (\n        <ul aria-label={label} className=\"divide-base-300 border-base-300 bg-base-100 divide-y rounded-lg border\">\n            {items.map((item) => (\n                <li\n                    key={item.key}\n                    className=\"grid min-w-0 grid-cols-[2.5rem_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 px-3 py-2.5 sm:grid-cols-[2.5rem_minmax(0,1fr)_3.5rem_minmax(0,20rem)] sm:px-4\"\n                >\n                    <Text as=\"span\" tone=\"muted\" className=\"tabular-nums\">\n                        {item.position}\n                    </Text>\n                    <span className=\"min-w-0\">\n                        <Text as=\"span\" className=\"block\" truncate title={item.title} variant=\"label\">\n                            {item.title}\n                        </Text>\n                        {item.note ? (\n                            <Text\n                                as=\"span\"\n                                className=\"block\"\n                                truncate\n                                title={item.note}\n                                variant=\"caption\"\n                                tone={item.noteTone === 'warning' ? 'warning' : 'muted'}\n                            >\n                                {item.note}\n                            </Text>\n                        ) : null}\n                    </span>\n                    <Text as=\"span\" tone=\"muted\" className=\"text-right tabular-nums\">\n                        {item.detail ?? ''}\n                    </Text>\n                    <span className=\"col-span-3 min-w-0 sm:col-span-1\">{item.control}</span>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;AAkBA,SAAgB,YAAY,EAAE,OAAO,SAA+D;CAChG,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B,UAAA,MAAM,KAAK,SACR,qBAAC,MAAD;GAEI,WAAU;GAFd,UAAA;IAII,oBAAC,MAAD;KAAM,IAAG;KAAO,MAAK;KAAQ,WAAU;KAClC,UAAA,KAAK;IACJ,CAAA;IACN,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACI,oBAAC,MAAD;MAAM,IAAG;MAAO,WAAU;MAAQ,UAAA;MAAS,OAAO,KAAK;MAAO,SAAQ;MACjE,UAAA,KAAK;KACJ,CAAA,GACL,KAAK,OACF,oBAAC,MAAD;MACI,IAAG;MACH,WAAU;MACV,UAAA;MACA,OAAO,KAAK;MACZ,SAAQ;MACR,MAAM,KAAK,aAAa,YAAY,YAAY;MAE/C,UAAA,KAAK;KACJ,CAAA,IACN,IACF;;IACN,oBAAC,MAAD;KAAM,IAAG;KAAO,MAAK;KAAQ,WAAU;KAClC,UAAA,KAAK,UAAU;IACd,CAAA;IACN,oBAAC,QAAD;KAAM,WAAU;KAAoC,UAAA,KAAK;IAAc,CAAA;GACvE;EA3BK,GAAA,KAAK,GA2BV,CACP;CACD,CAAA;AAEZ"}

package/dist/display/PathList.d.ts

@@ -0,0 +1,9 @@
+/** File paths as truncated code, one per line. */
+export declare function PathList({ label, paths }: {
+  label: string;
+  paths: readonly {
+    key: string;
+    path: string;
+  }[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=PathList.d.ts.map

package/dist/display/PathList.js

@@ -0,0 +1,21 @@
+import { Code } from "@ninna-ui/primitives";
+import { jsx } from "react/jsx-runtime";
+// src/display/PathList.tsx
+/** File paths as truncated code, one per line. */
+function PathList({ label, paths }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "space-y-1",
+		children: paths.map(({ key, path }) => /* @__PURE__ */ jsx("li", {
+			className: "min-w-0",
+			children: /* @__PURE__ */ jsx(Code, {
+				title: path,
+				className: "block max-w-full truncate text-xs",
+				children: path
+			})
+		}, key))
+	});
+}
+export { PathList };
+
+//# sourceMappingURL=PathList.js.map

package/dist/display/PathList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathList.js","names":[],"sources":["../../src/display/PathList.tsx"],"sourcesContent":["import { Code } from '@ninna-ui/primitives';\n\n/** File paths as truncated code, one per line. */\nexport function PathList({ label, paths }: { label: string; paths: readonly { key: string; path: string }[] }) {\n    return (\n        <ul aria-label={label} className=\"space-y-1\">\n            {paths.map(({ key, path }) => (\n                <li key={key} className=\"min-w-0\">\n                    <Code title={path} className=\"block max-w-full truncate text-xs\">\n                        {path}\n                    </Code>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;AAGA,SAAgB,SAAS,EAAE,OAAO,SAA6E;CAC3G,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B,UAAA,MAAM,KAAK,EAAE,KAAK,WACf,oBAAC,MAAD;GAAc,WAAU;GACpB,UAAA,oBAAC,MAAD;IAAM,OAAO;IAAM,WAAU;IACxB,UAAA;GACC,CAAA;EACN,GAJK,GAIL,CACP;CACD,CAAA;AAEZ"}

package/dist/display/PeoplePreview.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+interface PeoplePreviewItem {
+  id: string;
+  name: string;
+  role: string;
+  artwork: ReactNode;
+  href?: string;
+}
+/** Render only the cards that fit in one row, including keyboard navigation. */
+export declare function PeoplePreview({ label, items, onNavigate }: {
+  label: string;
+  items: readonly PeoplePreviewItem[];
+  onNavigate?: (href: string) => void;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PeoplePreview.d.ts.map

package/dist/display/PeoplePreview.js

@@ -0,0 +1,41 @@
+import { ImageCard } from "./ImageCard.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/display/PeoplePreview.tsx
+/** Render only the cards that fit in one row, including keyboard navigation. */
+function PeoplePreview({ label, items, onNavigate }) {
+	const rowRef = useRef(null);
+	const [visibleCount, setVisibleCount] = useState();
+	useLayoutEffect(() => {
+		const row = rowRef.current;
+		if (!row) return;
+		const measure = () => {
+			const columns = getComputedStyle(row).gridTemplateColumns;
+			if (columns && !columns.includes("repeat(") && columns !== "none") setVisibleCount(columns.trim().split(/\s+/).length);
+		};
+		const observer = new ResizeObserver(measure);
+		measure();
+		observer.observe(row);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("ul", {
+		ref: rowRef,
+		"aria-label": label,
+		className: "grid min-w-0 grid-cols-[repeat(auto-fill,minmax(min(5.5rem,100%),1fr))] gap-x-3 gap-y-5",
+		children: items.slice(0, visibleCount).map((person) => /* @__PURE__ */ jsx("li", {
+			className: "min-w-0",
+			children: /* @__PURE__ */ jsx(ImageCard, {
+				presentation: "person",
+				title: person.name,
+				label: person.name,
+				subtitle: person.role,
+				artwork: person.artwork,
+				href: person.href,
+				onNavigate
+			})
+		}, person.id))
+	});
+}
+export { PeoplePreview };
+
+//# sourceMappingURL=PeoplePreview.js.map

package/dist/display/PeoplePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeoplePreview.js","names":[],"sources":["../../src/display/PeoplePreview.tsx"],"sourcesContent":["import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport { ImageCard } from './ImageCard';\n\ninterface PeoplePreviewItem {\n    id: string;\n    name: string;\n    role: string;\n    artwork: ReactNode;\n    href?: string;\n}\n\n/** Render only the cards that fit in one row, including keyboard navigation. */\nexport function PeoplePreview({\n    label,\n    items,\n    onNavigate,\n}: {\n    label: string;\n    items: readonly PeoplePreviewItem[];\n    onNavigate?: (href: string) => void;\n}) {\n    const rowRef = useRef<HTMLUListElement>(null);\n    const [visibleCount, setVisibleCount] = useState<number>();\n\n    useLayoutEffect(() => {\n        const row = rowRef.current;\n\n        if (!row) return;\n\n        const measure = () => {\n            const columns = getComputedStyle(row).gridTemplateColumns;\n\n            if (columns && !columns.includes('repeat(') && columns !== 'none')\n                setVisibleCount(columns.trim().split(/\\s+/).length);\n        };\n        const observer = new ResizeObserver(measure);\n\n        measure();\n        observer.observe(row);\n\n        return () => observer.disconnect();\n    }, []);\n\n    return (\n        <ul\n            ref={rowRef}\n            aria-label={label}\n            className=\"grid min-w-0 grid-cols-[repeat(auto-fill,minmax(min(5.5rem,100%),1fr))] gap-x-3 gap-y-5\"\n        >\n            {items.slice(0, visibleCount).map((person) => (\n                <li key={person.id} className=\"min-w-0\">\n                    <ImageCard\n                        presentation=\"person\"\n                        title={person.name}\n                        label={person.name}\n                        subtitle={person.role}\n                        artwork={person.artwork}\n                        href={person.href}\n                        onNavigate={onNavigate}\n                    />\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;;AAaA,SAAgB,cAAc,EAC1B,OACA,OACA,cAKD;CACC,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAiB;CAEzD,sBAAsB;EAClB,MAAM,MAAM,OAAO;EAEnB,IAAI,CAAC,KAAK;EAEV,MAAM,gBAAgB;GAClB,MAAM,UAAU,iBAAiB,GAAG,CAAC,CAAC;GAEtC,IAAI,WAAW,CAAC,QAAQ,SAAS,SAAS,KAAK,YAAY,QACvD,gBAAgB,QAAQ,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;EAC1D;EACA,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,QAAQ;EACR,SAAS,QAAQ,GAAG;EAEpB,aAAa,SAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,OACI,oBAAC,MAAD;EACI,KAAK;EACL,cAAY;EACZ,WAAU;EAET,UAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,KAAK,WAC/B,oBAAC,MAAD;GAAoB,WAAU;GAC1B,UAAA,oBAAC,WAAD;IACI,cAAa;IACb,OAAO,OAAO;IACd,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,SAAS,OAAO;IAChB,MAAM,OAAO;IACD;GACf,CAAA;EACD,GAVK,OAAO,EAUZ,CACP;CACD,CAAA;AAEZ"}

package/dist/display/PropertySheet.d.ts

@@ -0,0 +1,56 @@
+import { BadgeListItem } from "./BadgeList.js";
+import { ReactNode } from "react";
+type PropertySheetProps = {
+  title: string;
+} & ({
+  children: ReactNode;
+  loading?: false;
+  loadingLabel?: never;
+} | {
+  children?: never;
+  loading: true;
+  loadingLabel?: string;
+});
+/** A titled sheet of facts about one thing; the body is label/value rows, a row of tags, or a short note. */
+declare function PropertySheetRoot({ children, loading, loadingLabel, title }: PropertySheetProps): import("react").JSX.Element;
+interface PropertySheetRow {
+  label: string;
+  value: ReactNode;
+}
+type RowsProps = {
+  loading: true;
+  items?: never;
+} | {
+  loading?: false;
+  items: readonly PropertySheetRow[];
+};
+declare function PropertySheetRows({ items, loading }: RowsProps): import("react").JSX.Element;
+type PropertySheetTag = Omit<BadgeListItem, 'struck'>;
+declare function PropertySheetTags({ items }: {
+  items: readonly PropertySheetTag[];
+}): import("react").JSX.Element;
+declare function PropertySheetNote({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function PropertySheetCollapsible({ children, title, summary }: {
+  children: ReactNode;
+  title: string;
+  summary?: string;
+}): import("react").JSX.Element;
+declare function PropertySheetTable({ label, columns, rows }: {
+  label: string;
+  columns: readonly string[];
+  rows: readonly {
+    key: string;
+    cells: readonly ReactNode[];
+  }[];
+}): import("react").JSX.Element;
+export declare const PropertySheet: typeof PropertySheetRoot & {
+  Collapsible: typeof PropertySheetCollapsible;
+  Note: typeof PropertySheetNote;
+  Rows: typeof PropertySheetRows;
+  Table: typeof PropertySheetTable;
+  Tags: typeof PropertySheetTags;
+};
+export type { PropertySheetRow, PropertySheetTag };
+//# sourceMappingURL=PropertySheet.d.ts.map

package/dist/display/PropertySheet.js

@@ -0,0 +1,150 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { BadgeList } from "./BadgeList.js";
+import { InsetPanel } from "./InsetPanel.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+// src/display/PropertySheet.tsx
+/** A titled sheet of facts about one thing; the body is label/value rows, a row of tags, or a short note. */
+function PropertySheetRoot({ children, loading = false, loadingLabel, title }) {
+	const id = useId();
+	const content = /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": loading ? void 0 : id,
+		"aria-hidden": loading && !loadingLabel || void 0,
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			id,
+			as: "h3",
+			variant: "label",
+			tone: "muted",
+			className: "px-1",
+			loading,
+			"aria-hidden": loading || void 0,
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-3",
+			children: /* @__PURE__ */ jsx(InsetPanel, {
+				presentation: "settings",
+				children: loading ? /* @__PURE__ */ jsx(PropertySheetRows, { loading: true }) : children
+			})
+		})]
+	});
+	return loading && loadingLabel ? /* @__PURE__ */ jsx(SkeletonLoader, {
+		label: loadingLabel,
+		children: content
+	}) : content;
+}
+function PropertySheetRows({ items, loading = false }) {
+	const rows = items ?? Array.from({ length: 3 }, () => ({
+		label: "",
+		value: ""
+	}));
+	return /* @__PURE__ */ jsx("dl", {
+		className: "divide-base-300 divide-y",
+		children: rows.map(({ label, value }, index) => /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] items-baseline gap-x-6 px-4 py-2.5 sm:px-5",
+			children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				tone: "muted",
+				loading,
+				children: label
+			}) }), /* @__PURE__ */ jsx("dd", {
+				className: "min-w-0 text-right",
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: "wrap-break-word tabular-nums",
+					variant: "label",
+					loading,
+					children: value
+				})
+			})]
+		}, loading ? index : label))
+	});
+}
+function PropertySheetTags({ items }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-4 py-3 sm:px-5",
+		children: /* @__PURE__ */ jsx(BadgeList, { items })
+	});
+}
+function PropertySheetNote({ children }) {
+	return /* @__PURE__ */ jsx(Text, {
+		className: "px-4 py-3 sm:px-5",
+		tone: "muted",
+		children
+	});
+}
+function PropertySheetCollapsible({ children, title, summary }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx("section", {
+		"aria-labelledby": id,
+		className: "min-w-0",
+		children: /* @__PURE__ */ jsx(InsetPanel, {
+			presentation: "settings",
+			children: /* @__PURE__ */ jsxs("details", {
+				className: "group/sheet",
+				children: [/* @__PURE__ */ jsxs("summary", {
+					className: "hover:bg-base-100 focus-visible:outline-primary flex cursor-pointer list-none items-center gap-4 px-4 py-4 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:px-5 [&::-webkit-details-marker]:hidden",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1 wrap-anywhere",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							id,
+							variant: "label",
+							className: "block",
+							children: title
+						}), summary ? /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							tone: "muted",
+							variant: "caption",
+							className: "mt-1 block",
+							children: summary
+						}) : null]
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "shrink-0 transition-transform group-open/sheet:rotate-180 [&>svg]:size-4",
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border-base-300 border-t p-4 sm:p-5",
+					children
+				})]
+			})
+		})
+	});
+}
+function PropertySheetTable({ label, columns, rows }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto",
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsxs("table", {
+			"aria-label": label,
+			className: "w-full min-w-[30rem] table-fixed border-collapse text-left text-sm",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "border-base-300 text-base-700 border-b text-xs",
+				children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					className: "px-4 py-3 font-medium sm:px-5",
+					children: column
+				}, column)) })
+			}), /* @__PURE__ */ jsx("tbody", {
+				className: "divide-base-300 divide-y",
+				children: rows.map((row) => /* @__PURE__ */ jsx("tr", { children: row.cells.map((cell, index) => /* @__PURE__ */ jsx("td", {
+					className: "px-4 py-3 align-top wrap-anywhere sm:px-5",
+					children: cell
+				}, index)) }, row.key))
+			})]
+		})
+	});
+}
+const PropertySheet = Object.assign(PropertySheetRoot, {
+	Collapsible: PropertySheetCollapsible,
+	Note: PropertySheetNote,
+	Rows: PropertySheetRows,
+	Table: PropertySheetTable,
+	Tags: PropertySheetTags
+});
+export { PropertySheet };
+
+//# sourceMappingURL=PropertySheet.js.map

package/dist/display/PropertySheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertySheet.js","names":[],"sources":["../../src/display/PropertySheet.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-react';\n/* oxlint-disable react/only-export-components -- Compound members are exported through PropertySheet. */\nimport { type ReactNode, useId } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Heading, Text } from '../typography/Typography';\nimport { BadgeList, type BadgeListItem } from './BadgeList';\nimport { InsetPanel } from './InsetPanel';\n\ntype PropertySheetProps = { title: string } & (\n    | { children: ReactNode; loading?: false; loadingLabel?: never }\n    | { children?: never; loading: true; loadingLabel?: string }\n);\n\n/** A titled sheet of facts about one thing; the body is label/value rows, a row of tags, or a short note. */\nfunction PropertySheetRoot({ children, loading = false, loadingLabel, title }: PropertySheetProps) {\n    const id = useId();\n    const content = (\n        <section\n            aria-labelledby={loading ? undefined : id}\n            aria-hidden={(loading && !loadingLabel) || undefined}\n            className=\"min-w-0\"\n        >\n            <Heading\n                id={id}\n                as=\"h3\"\n                variant=\"label\"\n                tone=\"muted\"\n                className=\"px-1\"\n                loading={loading}\n                aria-hidden={loading || undefined}\n            >\n                {title}\n            </Heading>\n            <div className=\"mt-3\">\n                <InsetPanel presentation=\"settings\">{loading ? <PropertySheetRows loading /> : children}</InsetPanel>\n            </div>\n        </section>\n    );\n\n    return loading && loadingLabel ? <SkeletonLoader label={loadingLabel}>{content}</SkeletonLoader> : content;\n}\n\ninterface PropertySheetRow {\n    label: string;\n    value: ReactNode;\n}\n\ntype RowsProps = { loading: true; items?: never } | { loading?: false; items: readonly PropertySheetRow[] };\n\nfunction PropertySheetRows({ items, loading = false }: RowsProps) {\n    const rows = items ?? Array.from({ length: 3 }, () => ({ label: '', value: '' }));\n\n    return (\n        <dl className=\"divide-base-300 divide-y\">\n            {rows.map(({ label, value }, index) => (\n                <div\n                    key={loading ? index : label}\n                    className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] items-baseline gap-x-6 px-4 py-2.5 sm:px-5\"\n                >\n                    <dt>\n                        <Text as=\"span\" tone=\"muted\" loading={loading}>\n                            {label}\n                        </Text>\n                    </dt>\n                    <dd className=\"min-w-0 text-right\">\n                        <Text as=\"span\" className=\"wrap-break-word tabular-nums\" variant=\"label\" loading={loading}>\n                            {value}\n                        </Text>\n                    </dd>\n                </div>\n            ))}\n        </dl>\n    );\n}\n\ntype PropertySheetTag = Omit<BadgeListItem, 'struck'>;\n\nfunction PropertySheetTags({ items }: { items: readonly PropertySheetTag[] }) {\n    return (\n        <div className=\"px-4 py-3 sm:px-5\">\n            <BadgeList items={items} />\n        </div>\n    );\n}\n\nfunction PropertySheetNote({ children }: { children: ReactNode }) {\n    return (\n        <Text className=\"px-4 py-3 sm:px-5\" tone=\"muted\">\n            {children}\n        </Text>\n    );\n}\n\nfunction PropertySheetCollapsible({\n    children,\n    title,\n    summary,\n}: {\n    children: ReactNode;\n    title: string;\n    summary?: string;\n}) {\n    const id = useId();\n\n    return (\n        <section aria-labelledby={id} className=\"min-w-0\">\n            <InsetPanel presentation=\"settings\">\n                <details className=\"group/sheet\">\n                    <summary className=\"hover:bg-base-100 focus-visible:outline-primary flex cursor-pointer list-none items-center gap-4 px-4 py-4 focus-visible:outline-2 focus-visible:-outline-offset-2 sm:px-5 [&::-webkit-details-marker]:hidden\">\n                        <span className=\"min-w-0 flex-1 wrap-anywhere\">\n                            <Text as=\"span\" id={id} variant=\"label\" className=\"block\">\n                                {title}\n                            </Text>\n                            {summary ? (\n                                <Text as=\"span\" tone=\"muted\" variant=\"caption\" className=\"mt-1 block\">\n                                    {summary}\n                                </Text>\n                            ) : null}\n                        </span>\n                        <span\n                            aria-hidden=\"true\"\n                            className=\"shrink-0 transition-transform group-open/sheet:rotate-180 [&>svg]:size-4\"\n                        >\n                            <ChevronDownIcon />\n                        </span>\n                    </summary>\n                    <div className=\"border-base-300 border-t p-4 sm:p-5\">{children}</div>\n                </details>\n            </InsetPanel>\n        </section>\n    );\n}\n\nfunction PropertySheetTable({\n    label,\n    columns,\n    rows,\n}: {\n    label: string;\n    columns: readonly string[];\n    rows: readonly { key: string; cells: readonly ReactNode[] }[];\n}) {\n    return (\n        <div className=\"overflow-x-auto\" tabIndex={0}>\n            <table aria-label={label} className=\"w-full min-w-[30rem] table-fixed border-collapse text-left text-sm\">\n                <thead className=\"border-base-300 text-base-700 border-b text-xs\">\n                    <tr>\n                        {columns.map((column) => (\n                            <th key={column} scope=\"col\" className=\"px-4 py-3 font-medium sm:px-5\">\n                                {column}\n                            </th>\n                        ))}\n                    </tr>\n                </thead>\n                <tbody className=\"divide-base-300 divide-y\">\n                    {rows.map((row) => (\n                        <tr key={row.key}>\n                            {row.cells.map((cell, index) => (\n                                <td key={index} className=\"px-4 py-3 align-top wrap-anywhere sm:px-5\">\n                                    {cell}\n                                </td>\n                            ))}\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n\nexport const PropertySheet = Object.assign(PropertySheetRoot, {\n    Collapsible: PropertySheetCollapsible,\n    Note: PropertySheetNote,\n    Rows: PropertySheetRows,\n    Table: PropertySheetTable,\n    Tags: PropertySheetTags,\n});\n\nexport type { PropertySheetRow, PropertySheetTag };\n"],"mappings":"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"}

package/dist/display/QrCode.d.ts

@@ -0,0 +1,6 @@
+/** Encodes locally; the value is never sent to a QR service. */
+export declare function QrCode({ label, value }: {
+  label: string;
+  value: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=QrCode.d.ts.map

package/dist/display/QrCode.js

@@ -0,0 +1,47 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/display/QrCode.tsx
+/** Encodes locally; the value is never sent to a QR service. */
+function QrCode({ label, value }) {
+	const [encoded, setEncoded] = useState();
+	useEffect(() => {
+		let active = true;
+		import("qrcode-generator").then(({ default: createQrCode }) => {
+			try {
+				const code = createQrCode(0, "M");
+				code.addData(value, "Byte");
+				code.make();
+				if (active) setEncoded({
+					source: code.createDataURL(4),
+					value
+				});
+			} catch {
+				if (active) setEncoded({
+					source: null,
+					value
+				});
+			}
+		}).catch(() => {
+			if (active) setEncoded({
+				source: null,
+				value
+			});
+		});
+		return () => {
+			active = false;
+		};
+	}, [value]);
+	if (encoded?.value !== value) return /* @__PURE__ */ jsx(SkeletonLoader, {
+		label,
+		children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "artwork" })
+	});
+	return encoded.source ? /* @__PURE__ */ jsx("img", {
+		alt: label,
+		src: encoded.source,
+		className: "block w-full max-w-sm rounded-lg bg-white"
+	}) : null;
+}
+export { QrCode };
+
+//# sourceMappingURL=QrCode.js.map

package/dist/display/QrCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode.js","names":[],"sources":["../../src/display/QrCode.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\n\n/** Encodes locally; the value is never sent to a QR service. */\nexport function QrCode({ label, value }: { label: string; value: string }) {\n    const [encoded, setEncoded] = useState<{ source: string | null; value: string }>();\n\n    useEffect(() => {\n        let active = true;\n\n        void import('qrcode-generator')\n            .then(({ default: createQrCode }) => {\n                try {\n                    const code = createQrCode(0, 'M');\n\n                    code.addData(value, 'Byte');\n                    code.make();\n\n                    if (active) setEncoded({ source: code.createDataURL(4), value });\n                } catch {\n                    // The copyable value remains available if it exceeds QR capacity.\n                    if (active) setEncoded({ source: null, value });\n                }\n            })\n            .catch(() => {\n                // The copyable value remains usable if this optional chunk fails to load.\n                if (active) setEncoded({ source: null, value });\n            });\n\n        return () => {\n            active = false;\n        };\n    }, [value]);\n\n    if (encoded?.value !== value) {\n        return (\n            <SkeletonLoader label={label}>\n                <SkeletonLoader.Shape presentation=\"artwork\" />\n            </SkeletonLoader>\n        );\n    }\n\n    return encoded.source ? (\n        <img alt={label} src={encoded.source} className=\"block w-full max-w-sm rounded-lg bg-white\" />\n    ) : null;\n}\n"],"mappings":";;;;;AAKA,SAAgB,OAAO,EAAE,OAAO,SAA2C;CACvE,MAAM,CAAC,SAAS,cAAc,SAAmD;CAEjF,gBAAgB;EACZ,IAAI,SAAS;EAEb,OAAY,mBAAmB,CAC1B,MAAM,EAAE,SAAS,mBAAmB;GACjC,IAAI;IACA,MAAM,OAAO,aAAa,GAAG,GAAG;IAEhC,KAAK,QAAQ,OAAO,MAAM;IAC1B,KAAK,KAAK;IAEV,IAAI,QAAQ,WAAW;KAAE,QAAQ,KAAK,cAAc,CAAC;KAAG;IAAM,CAAC;GACnE,QAAQ;IAEJ,IAAI,QAAQ,WAAW;KAAE,QAAQ;KAAM;IAAM,CAAC;GAClD;EACJ,CAAC,CAAC,CACD,YAAY;GAET,IAAI,QAAQ,WAAW;IAAE,QAAQ;IAAM;GAAM,CAAC;EAClD,CAAC;EAEL,aAAa;GACT,SAAS;EACb;CACJ,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,UAAU,OACnB,OACI,oBAAC,gBAAD;EAAuB;EACnB,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA;CAClC,CAAA;CAIxB,OAAO,QAAQ,SACX,oBAAC,OAAD;EAAK,KAAK;EAAO,KAAK,QAAQ;EAAQ,WAAU;CAA6C,CAAA,IAC7F;AACR"}

package/dist/display/RadioChoice.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export declare function RadioChoice({ name, checked, onChange, children, trailing }: {
+  name: string;
+  checked: boolean;
+  onChange: () => void;
+  children: ReactNode;
+  trailing?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RadioChoice.d.ts.map

package/dist/display/RadioChoice.js

@@ -0,0 +1,28 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/RadioChoice.tsx
+function RadioChoice({ name, checked, onChange, children, trailing }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "hover:bg-base-100 has-checked:bg-primary/10 has-focus-visible:ring-primary flex min-w-0 items-center gap-3 transition-colors has-focus-visible:ring-2 has-focus-visible:ring-inset has-disabled:opacity-60",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-4 py-3 has-disabled:cursor-default",
+			children: [/* @__PURE__ */ jsx("input", {
+				...tabbable,
+				type: "radio",
+				name,
+				checked,
+				onChange,
+				className: "accent-primary size-4 shrink-0"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1",
+				children
+			})]
+		}), trailing ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-3 pr-4",
+			children: trailing
+		}) : null]
+	});
+}
+export { RadioChoice };
+
+//# sourceMappingURL=RadioChoice.js.map

package/dist/display/RadioChoice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioChoice.js","names":[],"sources":["../../src/display/RadioChoice.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport function RadioChoice({\n    name,\n    checked,\n    onChange,\n    children,\n    trailing,\n}: {\n    name: string;\n    checked: boolean;\n    onChange: () => void;\n    children: ReactNode;\n    trailing?: ReactNode;\n}) {\n    return (\n        <div className=\"hover:bg-base-100 has-checked:bg-primary/10 has-focus-visible:ring-primary flex min-w-0 items-center gap-3 transition-colors has-focus-visible:ring-2 has-focus-visible:ring-inset has-disabled:opacity-60\">\n            <label className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-3 px-4 py-3 has-disabled:cursor-default\">\n                <input\n                    {...tabbable}\n                    type=\"radio\"\n                    name={name}\n                    checked={checked}\n                    onChange={onChange}\n                    className=\"accent-primary size-4 shrink-0\"\n                />\n                <span className=\"min-w-0 flex-1\">{children}</span>\n            </label>\n            {trailing ? <div className=\"flex shrink-0 items-center gap-3 pr-4\">{trailing}</div> : null}\n        </div>\n    );\n}\n"],"mappings":";;;AAIA,SAAgB,YAAY,EACxB,MACA,SACA,UACA,UACA,YAOD;CACC,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA,CACI,oBAAC,SAAD;IACI,GAAI;IACJ,MAAK;IACC;IACG;IACC;IACV,WAAU;GACb,CAAA,GACD,oBAAC,QAAD;IAAM,WAAU;IAAkB;GAAe,CAAA,CAC9C;EACN,CAAA,GAAA,WAAW,oBAAC,OAAD;GAAK,WAAU;GAAyC,UAAA;EAAc,CAAA,IAAI,IACrF;;AAEb"}

package/dist/display/RatingLink.d.ts

@@ -0,0 +1,10 @@
+/** A provider's mark and its score, linked to the original rating. */
+export declare function RatingLink({ source, value, scale, href }: {
+  source: string;
+  /** The score as it reads, such as "6.5" or "57%". */
+  value: string;
+  /** The scale shown after the score, such as "/ 10"; none for percentages. */
+  scale?: string;
+  href: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RatingLink.d.ts.map