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

package/dist/display/ChangeList.js

@@ -0,0 +1,56 @@
+import { Stack } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { Code } from "@ninna-ui/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/ChangeList.tsx
+/** Before → after values grouped under the item they belong to. */
+function ChangeList({ items, label }) {
+	return /* @__PURE__ */ jsx(Stack, {
+		as: "ul",
+		space: "group",
+		"aria-label": label,
+		children: items.map((item) => /* @__PURE__ */ jsx("li", {
+			className: "min-w-0",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				space: "tight",
+				children: [/* @__PURE__ */ jsx(Text, {
+					truncate: true,
+					title: item.title,
+					variant: "label",
+					children: item.title
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "space-y-1 pl-4",
+					children: item.changes.map((change) => /* @__PURE__ */ jsxs("li", {
+						className: "flex min-w-0 flex-wrap items-baseline gap-x-2",
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								variant: "caption",
+								tone: "muted",
+								children: change.label
+							}),
+							/* @__PURE__ */ jsx(Code, {
+								className: "text-xs",
+								children: change.from
+							}),
+							/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								"aria-hidden": "true",
+								variant: "caption",
+								tone: "muted",
+								children: "→"
+							}),
+							/* @__PURE__ */ jsx(Code, {
+								className: "text-xs",
+								children: change.to
+							})
+						]
+					}, change.key))
+				})]
+			})
+		}, item.key))
+	});
+}
+export { ChangeList };
+
+//# sourceMappingURL=ChangeList.js.map

package/dist/display/ChangeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangeList.js","names":[],"sources":["../../src/display/ChangeList.tsx"],"sourcesContent":["import { Code } from '@ninna-ui/primitives';\n\nimport { Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\n\nexport interface ChangeListItem {\n    changes: readonly { from: string; key: string; label: string; to: string }[];\n    key: string;\n    title: string;\n}\n\n/** Before → after values grouped under the item they belong to. */\nexport function ChangeList({ items, label }: { items: readonly ChangeListItem[]; label: string }) {\n    return (\n        <Stack as=\"ul\" space=\"group\" aria-label={label}>\n            {items.map((item) => (\n                <li key={item.key} className=\"min-w-0\">\n                    <Stack space=\"tight\">\n                        <Text truncate title={item.title} variant=\"label\">\n                            {item.title}\n                        </Text>\n                        <ul className=\"space-y-1 pl-4\">\n                            {item.changes.map((change) => (\n                                <li key={change.key} className=\"flex min-w-0 flex-wrap items-baseline gap-x-2\">\n                                    <Text as=\"span\" variant=\"caption\" tone=\"muted\">\n                                        {change.label}\n                                    </Text>\n                                    <Code className=\"text-xs\">{change.from}</Code>\n                                    <Text as=\"span\" aria-hidden=\"true\" variant=\"caption\" tone=\"muted\">\n                                        →\n                                    </Text>\n                                    <Code className=\"text-xs\">{change.to}</Code>\n                                </li>\n                            ))}\n                        </ul>\n                    </Stack>\n                </li>\n            ))}\n        </Stack>\n    );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,WAAW,EAAE,OAAO,SAA8D;CAC9F,OACI,oBAAC,OAAD;EAAO,IAAG;EAAK,OAAM;EAAQ,cAAY;EACpC,UAAA,MAAM,KAAK,SACR,oBAAC,MAAD;GAAmB,WAAU;GACzB,UAAA,qBAAC,OAAD;IAAO,OAAM;IAAb,UAAA,CACI,oBAAC,MAAD;KAAM,UAAA;KAAS,OAAO,KAAK;KAAO,SAAQ;KACrC,UAAA,KAAK;IACJ,CAAA,GACN,oBAAC,MAAD;KAAI,WAAU;KACT,UAAA,KAAK,QAAQ,KAAK,WACf,qBAAC,MAAD;MAAqB,WAAU;MAA/B,UAAA;OACI,oBAAC,MAAD;QAAM,IAAG;QAAO,SAAQ;QAAU,MAAK;QAClC,UAAA,OAAO;OACN,CAAA;OACN,oBAAC,MAAD;QAAM,WAAU;QAAW,UAAA,OAAO;OAAW,CAAA;OAC7C,oBAAC,MAAD;QAAM,IAAG;QAAO,eAAY;QAAO,SAAQ;QAAU,MAAK;QAAQ,UAAA;OAE5D,CAAA;OACN,oBAAC,MAAD;QAAM,WAAU;QAAW,UAAA,OAAO;OAAS,CAAA;MAC3C;KATK,GAAA,OAAO,GASZ,CACP;IACD,CAAA,CACD;;EACP,GApBK,KAAK,GAoBV,CACP;CACE,CAAA;AAEf"}

package/dist/display/CheckList.d.ts

@@ -0,0 +1,10 @@
+export interface CheckListItem {
+  key: string;
+  text: string;
+}
+/** Short statements of what something does or includes, each with a check mark. */
+export declare function CheckList({ items, label }: {
+  items: readonly CheckListItem[];
+  label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CheckList.d.ts.map

package/dist/display/CheckList.js

@@ -0,0 +1,25 @@
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/display/CheckList.tsx
+/** Short statements of what something does or includes, each with a check mark. */
+function CheckList({ items, label }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: "space-y-2",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex min-w-0 items-start gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-success mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				children: item.text
+			})]
+		}, item.key))
+	});
+}
+export { CheckList };
+
+//# sourceMappingURL=CheckList.js.map

package/dist/display/CheckList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckList.js","names":[],"sources":["../../src/display/CheckList.tsx"],"sourcesContent":["import { CheckIcon } from 'lucide-react';\n\nimport { Text } from '../typography/Typography';\n\nexport interface CheckListItem {\n    key: string;\n    text: string;\n}\n\n/** Short statements of what something does or includes, each with a check mark. */\nexport function CheckList({ items, label }: { items: readonly CheckListItem[]; label: string }) {\n    return (\n        <ul aria-label={label} className=\"space-y-2\">\n            {items.map((item) => (\n                <li key={item.key} className=\"flex min-w-0 items-start gap-2\">\n                    <span\n                        aria-hidden=\"true\"\n                        className=\"text-success mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\"\n                    >\n                        <CheckIcon />\n                    </span>\n                    <Text as=\"span\">{item.text}</Text>\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;;AAUA,SAAgB,UAAU,EAAE,OAAO,SAA6D;CAC5F,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B,UAAA,MAAM,KAAK,SACR,qBAAC,MAAD;GAAmB,WAAU;GAA7B,UAAA,CACI,oBAAC,QAAD;IACI,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,WAAD,CAAY,CAAA;GACV,CAAA,GACN,oBAAC,MAAD;IAAM,IAAG;IAAQ,UAAA,KAAK;GAAW,CAAA,CACjC;EARK,GAAA,KAAK,GAQV,CACP;CACD,CAAA;AAEZ"}

package/dist/display/CodeBlock.d.ts

@@ -0,0 +1,6 @@
+/** Readable examples and configuration values, contained even in narrow drawers. */
+export declare function CodeBlock({ value, preserveLines }: {
+  value: string;
+  preserveLines?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CodeBlock.d.ts.map

package/dist/display/CodeBlock.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+// src/display/CodeBlock.tsx
+/** Readable examples and configuration values, contained even in narrow drawers. */
+function CodeBlock({ value, preserveLines = false }) {
+	return /* @__PURE__ */ jsx("pre", {
+		className: `border-base-300 bg-base-100/70 text-base-800 min-w-0 rounded-lg border p-4 font-mono text-xs leading-6 ${preserveLines ? "overflow-x-auto" : "wrap-anywhere whitespace-pre-wrap"}`,
+		children: /* @__PURE__ */ jsx("code", { children: value })
+	});
+}
+export { CodeBlock };
+
+//# sourceMappingURL=CodeBlock.js.map

package/dist/display/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/display/CodeBlock.tsx"],"sourcesContent":["/** Readable examples and configuration values, contained even in narrow drawers. */\nexport function CodeBlock({ value, preserveLines = false }: { value: string; preserveLines?: boolean }) {\n    return (\n        <pre\n            className={`border-base-300 bg-base-100/70 text-base-800 min-w-0 rounded-lg border p-4 font-mono text-xs leading-6 ${\n                preserveLines ? 'overflow-x-auto' : 'wrap-anywhere whitespace-pre-wrap'\n            }`}\n        >\n            <code>{value}</code>\n        </pre>\n    );\n}\n"],"mappings":";;;AACA,SAAgB,UAAU,EAAE,OAAO,gBAAgB,SAAqD;CACpG,OACI,oBAAC,OAAD;EACI,WAAW,0GACP,gBAAgB,oBAAoB;EAGxC,UAAA,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;CAClB,CAAA;AAEb"}

package/dist/display/CopyButton.d.ts

@@ -0,0 +1,9 @@
+interface CopyButtonProps {
+  copiedLabel: string;
+  label: string;
+  value: string;
+}
+/** The LAN admin also runs over HTTP, where the async clipboard API is unavailable. */
+export declare function CopyButton({ copiedLabel, label, value }: CopyButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CopyButton.d.ts.map

package/dist/display/CopyButton.js

@@ -0,0 +1,59 @@
+import { IconButton } from "../actions/IconButton.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+// src/display/CopyButton.tsx
+const COPIED_FEEDBACK_MS = 1500;
+/** The LAN admin also runs over HTTP, where the async clipboard API is unavailable. */
+function CopyButton({ copiedLabel, label, value }) {
+	const [copiedValue, setCopiedValue] = useState(null);
+	const [copying, setCopying] = useState(false);
+	const copied = copiedValue === value;
+	useEffect(() => {
+		if (copiedValue === null) return void 0;
+		const timer = window.setTimeout(() => setCopiedValue(null), COPIED_FEEDBACK_MS);
+		return () => window.clearTimeout(timer);
+	}, [copiedValue]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+		"aria-label": copied ? copiedLabel : label,
+		title: copied ? copiedLabel : label,
+		loading: copying,
+		onClick: async () => {
+			setCopying(true);
+			try {
+				if (navigator.clipboard) {
+					await navigator.clipboard.writeText(value);
+					setCopiedValue(value);
+				} else setCopiedValue(copySelection(value) ? value : null);
+			} catch {
+				setCopiedValue(copySelection(value) ? value : null);
+			} finally {
+				setCopying(false);
+			}
+		},
+		tone: copied ? "success" : "neutral"
+	});
+}
+function copySelection(value) {
+	if (typeof document.execCommand !== "function") return false;
+	const previousFocus = document.activeElement;
+	const input = document.createElement("textarea");
+	input.value = value;
+	input.readOnly = true;
+	input.className = "fixed -left-full top-0 opacity-0";
+	document.body.append(input);
+	input.focus({ preventScroll: true });
+	input.select();
+	try {
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		input.remove();
+		if (previousFocus instanceof HTMLElement) previousFocus.focus();
+	}
+}
+export { CopyButton };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/display/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../src/display/CopyButton.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\n\nconst COPIED_FEEDBACK_MS = 1500;\n\ninterface CopyButtonProps {\n    copiedLabel: string;\n    label: string;\n    value: string;\n}\n\n/** The LAN admin also runs over HTTP, where the async clipboard API is unavailable. */\nexport function CopyButton({ copiedLabel, label, value }: CopyButtonProps) {\n    const [copiedValue, setCopiedValue] = useState<string | null>(null);\n    const [copying, setCopying] = useState(false);\n    const copied = copiedValue === value;\n\n    useEffect(() => {\n        if (copiedValue === null) return undefined;\n\n        const timer = window.setTimeout(() => setCopiedValue(null), COPIED_FEEDBACK_MS);\n\n        return () => window.clearTimeout(timer);\n    }, [copiedValue]);\n\n    return (\n        <IconButton\n            icon={copied ? <CheckIcon /> : <CopyIcon />}\n            aria-label={copied ? copiedLabel : label}\n            title={copied ? copiedLabel : label}\n            loading={copying}\n            onClick={async () => {\n                setCopying(true);\n\n                try {\n                    if (navigator.clipboard) {\n                        await navigator.clipboard.writeText(value);\n                        setCopiedValue(value);\n                    } else {\n                        setCopiedValue(copySelection(value) ? value : null);\n                    }\n                } catch {\n                    setCopiedValue(copySelection(value) ? value : null);\n                } finally {\n                    setCopying(false);\n                }\n            }}\n            tone={copied ? 'success' : 'neutral'}\n        />\n    );\n}\n\nfunction copySelection(value: string): boolean {\n    if (typeof document.execCommand !== 'function') return false;\n\n    const previousFocus = document.activeElement;\n    const input = document.createElement('textarea');\n\n    input.value = value;\n    input.readOnly = true;\n    input.className = 'fixed -left-full top-0 opacity-0';\n    document.body.append(input);\n    input.focus({ preventScroll: true });\n    input.select();\n\n    try {\n        return document.execCommand('copy');\n    } catch {\n        return false;\n    } finally {\n        input.remove();\n\n        if (previousFocus instanceof HTMLElement) previousFocus.focus();\n    }\n}\n"],"mappings":";;;;;AAKA,MAAM,qBAAqB;;AAS3B,SAAgB,WAAW,EAAE,aAAa,OAAO,SAA0B;CACvE,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAClE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,gBAAgB;CAE/B,gBAAgB;EACZ,IAAI,gBAAgB,MAAM,OAAO,KAAA;EAEjC,MAAM,QAAQ,OAAO,iBAAiB,eAAe,IAAI,GAAG,kBAAkB;EAE9E,aAAa,OAAO,aAAa,KAAK;CAC1C,GAAG,CAAC,WAAW,CAAC;CAEhB,OACI,oBAAC,YAAD;EACI,MAAM,SAAS,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;EAC1C,cAAY,SAAS,cAAc;EACnC,OAAO,SAAS,cAAc;EAC9B,SAAS;EACT,SAAS,YAAY;GACjB,WAAW,IAAI;GAEf,IAAI;IACA,IAAI,UAAU,WAAW;KACrB,MAAM,UAAU,UAAU,UAAU,KAAK;KACzC,eAAe,KAAK;IACxB,OACI,eAAe,cAAc,KAAK,IAAI,QAAQ,IAAI;GAE1D,QAAQ;IACJ,eAAe,cAAc,KAAK,IAAI,QAAQ,IAAI;GACtD,UAAU;IACN,WAAW,KAAK;GACpB;EACJ;EACA,MAAM,SAAS,YAAY;CAC9B,CAAA;AAET;AAEA,SAAS,cAAc,OAAwB;CAC3C,IAAI,OAAO,SAAS,gBAAgB,YAAY,OAAO;CAEvD,MAAM,gBAAgB,SAAS;CAC/B,MAAM,QAAQ,SAAS,cAAc,UAAU;CAE/C,MAAM,QAAQ;CACd,MAAM,WAAW;CACjB,MAAM,YAAY;CAClB,SAAS,KAAK,OAAO,KAAK;CAC1B,MAAM,MAAM,EAAE,eAAe,KAAK,CAAC;CACnC,MAAM,OAAO;CAEb,IAAI;EACA,OAAO,SAAS,YAAY,MAAM;CACtC,QAAQ;EACJ,OAAO;CACX,UAAU;EACN,MAAM,OAAO;EAEb,IAAI,yBAAyB,aAAa,cAAc,MAAM;CAClE;AACJ"}

package/dist/display/DataTable.d.ts

@@ -0,0 +1,35 @@
+declare const tones: {
+  readonly default: 'text-base-content';
+  readonly muted: 'text-base-700';
+  readonly warning: 'text-warning';
+};
+export interface DataTableCell {
+  id: string;
+  text: string;
+  /** A smaller second line under the text. */
+  detail?: string;
+  /** Shown on hover. */
+  title?: string;
+  tone?: keyof typeof tones;
+}
+export interface DataTableRow {
+  id: string;
+  label: string;
+  /** One per column, in column order. */
+  cells: readonly DataTableCell[];
+}
+interface DataTableProps {
+  columns: readonly {
+    id: string;
+    label: string;
+  }[];
+  /** Names the table for assistive technology. */
+  label: string;
+  /** Heads the first column, which labels each row. */
+  rowHeader: string;
+  rows: readonly DataTableRow[];
+}
+/** A compact read-only grid of values: one labelled row per item and one column per subject. */
+export declare function DataTable({ columns, label, rowHeader, rows }: DataTableProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/display/DataTable.js

@@ -0,0 +1,53 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/display/DataTable.tsx
+const cellSpacing = "px-4 py-2.5 sm:first:pl-5 sm:last:pr-5";
+const tones = {
+	default: "text-base-content",
+	muted: "text-base-700",
+	warning: "text-warning"
+};
+/** A compact read-only grid of values: one labelled row per item and one column per subject. */
+function DataTable({ columns, label, rowHeader, rows }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ jsxs("table", {
+			"aria-label": label,
+			className: "w-full text-left text-sm leading-5 tabular-nums",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "text-base-700 text-xs leading-4",
+				children: /* @__PURE__ */ jsxs("tr", {
+					className: "border-base-300 border-b",
+					children: [/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: `${cellSpacing} font-medium`,
+						children: rowHeader
+					}), columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: `${cellSpacing} font-medium`,
+						children: column.label
+					}, column.id))]
+				})
+			}), /* @__PURE__ */ jsx("tbody", {
+				className: "divide-base-300 divide-y",
+				children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					className: `${cellSpacing} text-base-content font-normal`,
+					children: row.label
+				}), row.cells.map((cell) => /* @__PURE__ */ jsx("td", {
+					title: cell.title,
+					className: `${cellSpacing} text-xs leading-4 ${tones[cell.tone ?? "default"]}`,
+					children: cell.detail ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "block",
+						children: cell.text
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-base-700 mt-0.5 block",
+						children: cell.detail
+					})] }) : cell.text
+				}, cell.id))] }, row.id))
+			})]
+		})
+	});
+}
+export { DataTable };
+
+//# sourceMappingURL=DataTable.js.map

package/dist/display/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../src/display/DataTable.tsx"],"sourcesContent":["const cellSpacing = 'px-4 py-2.5 sm:first:pl-5 sm:last:pr-5';\n\nconst tones = {\n    default: 'text-base-content',\n    muted: 'text-base-700',\n    warning: 'text-warning',\n} as const;\n\nexport interface DataTableCell {\n    id: string;\n    text: string;\n    /** A smaller second line under the text. */\n    detail?: string;\n    /** Shown on hover. */\n    title?: string;\n    tone?: keyof typeof tones;\n}\n\nexport interface DataTableRow {\n    id: string;\n    label: string;\n    /** One per column, in column order. */\n    cells: readonly DataTableCell[];\n}\n\ninterface DataTableProps {\n    columns: readonly { id: string; label: string }[];\n    /** Names the table for assistive technology. */\n    label: string;\n    /** Heads the first column, which labels each row. */\n    rowHeader: string;\n    rows: readonly DataTableRow[];\n}\n\n/** A compact read-only grid of values: one labelled row per item and one column per subject. */\nexport function DataTable({ columns, label, rowHeader, rows }: DataTableProps) {\n    return (\n        <div className=\"overflow-x-auto\">\n            <table aria-label={label} className=\"w-full text-left text-sm leading-5 tabular-nums\">\n                <thead className=\"text-base-700 text-xs leading-4\">\n                    <tr className=\"border-base-300 border-b\">\n                        <th scope=\"col\" className={`${cellSpacing} font-medium`}>\n                            {rowHeader}\n                        </th>\n                        {columns.map((column) => (\n                            <th key={column.id} scope=\"col\" className={`${cellSpacing} font-medium`}>\n                                {column.label}\n                            </th>\n                        ))}\n                    </tr>\n                </thead>\n                <tbody className=\"divide-base-300 divide-y\">\n                    {rows.map((row) => (\n                        <tr key={row.id}>\n                            <th scope=\"row\" className={`${cellSpacing} text-base-content font-normal`}>\n                                {row.label}\n                            </th>\n                            {row.cells.map((cell) => (\n                                <td\n                                    key={cell.id}\n                                    title={cell.title}\n                                    className={`${cellSpacing} text-xs leading-4 ${tones[cell.tone ?? 'default']}`}\n                                >\n                                    {cell.detail ? (\n                                        <>\n                                            <span className=\"block\">{cell.text}</span>\n                                            <span className=\"text-base-700 mt-0.5 block\">{cell.detail}</span>\n                                        </>\n                                    ) : (\n                                        cell.text\n                                    )}\n                                </td>\n                            ))}\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":";;AAAA,MAAM,cAAc;AAEpB,MAAM,QAAQ;CACV,SAAS;CACT,OAAO;CACP,SAAS;AACb;;AA6BA,SAAgB,UAAU,EAAE,SAAS,OAAO,WAAW,QAAwB;CAC3E,OACI,oBAAC,OAAD;EAAK,WAAU;EACX,UAAA,qBAAC,SAAD;GAAO,cAAY;GAAO,WAAU;GAApC,UAAA,CACI,oBAAC,SAAD;IAAO,WAAU;IACb,UAAA,qBAAC,MAAD;KAAI,WAAU;KAAd,UAAA,CACI,oBAAC,MAAD;MAAI,OAAM;MAAM,WAAW,GAAG,YAAY;MACrC,UAAA;KACD,CAAA,GACH,QAAQ,KAAK,WACV,oBAAC,MAAD;MAAoB,OAAM;MAAM,WAAW,GAAG,YAAY;MACrD,UAAA,OAAO;KACR,GAFK,OAAO,EAEZ,CACP,CACD;;GACD,CAAA,GACP,oBAAC,SAAD;IAAO,WAAU;IACZ,UAAA,KAAK,KAAK,QACP,qBAAC,MAAD,EAAA,UAAA,CACI,oBAAC,MAAD;KAAI,OAAM;KAAM,WAAW,GAAG,YAAY;KACrC,UAAA,IAAI;IACL,CAAA,GACH,IAAI,MAAM,KAAK,SACZ,oBAAC,MAAD;KAEI,OAAO,KAAK;KACZ,WAAW,GAAG,YAAY,qBAAqB,MAAM,KAAK,QAAQ;KAEjE,UAAA,KAAK,SACF,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;MAAM,WAAU;MAAS,UAAA,KAAK;KAAW,CAAA,GACzC,oBAAC,QAAD;MAAM,WAAU;MAA8B,UAAA,KAAK;KAAa,CAAA,CAClE,EAAA,CAAA,IAEF,KAAK;IAET,GAZK,KAAK,EAYV,CACP,CACD,EAAA,GApBK,IAAI,EAoBT,CACP;GACE,CAAA,CACJ;;CACN,CAAA;AAEb"}

package/dist/display/DetailHero.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+type DetailHeroProps = {
+  loading: true;
+  loadingLabel: string;
+  summary?: boolean;
+  description?: boolean;
+  details?: number;
+} | {
+  loading?: false;
+  actions?: ReactNode;
+  artwork: ReactNode;
+  backgroundSrc?: string;
+  children: ReactNode;
+  label: string;
+  subtitle?: ReactNode;
+  summary?: ReactNode;
+  title: string;
+  titleLevel?: 'h1' | 'h2';
+  titleLogoSrc?: string;
+};
+export declare function DetailHero(props: DetailHeroProps): import("react").JSX.Element;
+export declare function DetailHeroDetails({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+type DetailProps = {
+  loading: true;
+} | {
+  loading?: false;
+  label: string;
+  value: ReactNode;
+};
+export declare function DetailHeroDetail(props: DetailProps): import("react").JSX.Element;
+export declare function DetailHeroTags({ label, moreLabel, values }: {
+  label: string;
+  moreLabel: string;
+  values: readonly string[];
+}): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=DetailHero.d.ts.map

package/dist/display/DetailHero.js

@@ -0,0 +1,146 @@
+import { Button } from "../actions/Button.js";
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Popover } from "../overlays/Popover.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { Badge } from "./Badge.js";
+import { TextPreview } from "./TextPreview.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/display/DetailHero.tsx
+function DetailHero(props) {
+	const loading = props.loading === true;
+	const background = !props.loading && props.backgroundSrc;
+	return /* @__PURE__ */ jsx(SkeletonLoader, {
+		loading,
+		label: props.loading ? props.loadingLabel : "",
+		children: /* @__PURE__ */ jsxs("section", {
+			className: "relative isolate min-w-0 pb-4",
+			children: [background ? /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-x-0 -top-2 bottom-0 -z-10 overflow-hidden rounded-2xl [mask-image:linear-gradient(to_bottom,black_55%,transparent)]",
+				children: [/* @__PURE__ */ jsx("img", {
+					src: background,
+					alt: "",
+					className: "size-full object-cover opacity-35"
+				}), /* @__PURE__ */ jsx("div", { className: "from-base-50 via-base-50/60 to-base-50/20 absolute inset-0 bg-linear-to-t" })]
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: `grid gap-6 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-center md:grid-cols-[14rem_minmax(0,1fr)] md:gap-8 ${background ? "p-4 sm:p-5" : ""}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "ring-base-900/10 w-40 self-start overflow-hidden rounded-lg shadow-md ring-1 md:w-full",
+					children: props.loading ? /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "artwork" }) : props.artwork
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-5 md:gap-6",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									variant: "overline",
+									tone: "muted",
+									className: `mb-2 ${loading ? "max-w-32" : ""}`,
+									loading,
+									children: !props.loading && props.label
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex min-h-8 min-w-0 flex-wrap items-center gap-5",
+									children: [/* @__PURE__ */ jsx(Heading, {
+										as: props.loading ? "h2" : props.titleLevel ?? "h2",
+										variant: "hero",
+										className: `min-w-0 wrap-break-word ${loading ? "w-3/4 max-w-xl" : ""}`,
+										loading,
+										children: !props.loading && (props.titleLogoSrc ? /* @__PURE__ */ jsx("img", {
+											src: props.titleLogoSrc,
+											alt: props.title,
+											className: "max-h-28 w-auto max-w-full object-contain object-left sm:max-w-sm"
+										}) : props.title)
+									}), !props.loading && props.actions ? /* @__PURE__ */ jsx("div", {
+										className: "flex max-w-full shrink-0 flex-wrap items-center gap-3",
+										children: props.actions
+									}) : null]
+								}),
+								props.loading || props.subtitle ? /* @__PURE__ */ jsx(Text, {
+									variant: "description",
+									tone: "muted",
+									className: `mt-2 wrap-break-word ${loading ? "max-w-sm" : ""}`,
+									loading,
+									children: !props.loading && props.subtitle
+								}) : null
+							]
+						}),
+						props.summary ? /* @__PURE__ */ jsx(Text, {
+							tone: "muted",
+							className: "max-w-xl",
+							loading,
+							children: !props.loading && props.summary
+						}) : null,
+						props.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DetailHeroDetails, { children: Array.from({ length: props.details ?? 3 }, (_, index) => /* @__PURE__ */ jsx(DetailHeroDetail, { loading: true }, index)) }), props.description ? /* @__PURE__ */ jsx(TextPreview, { loading: true }) : null] }) : props.children
+					]
+				})]
+			})]
+		})
+	});
+}
+function DetailHeroDetails({ children }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "grid grid-cols-2 gap-x-8 gap-y-4 sm:flex sm:flex-wrap",
+		children
+	});
+}
+function DetailHeroDetail(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: props.loading ? "w-24" : "max-w-full min-w-0",
+		children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "caption",
+			tone: "muted",
+			loading: props.loading,
+			children: !props.loading && props.label
+		}) }), /* @__PURE__ */ jsx("dd", {
+			className: "mt-1 min-h-6 wrap-break-word",
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				variant: "label",
+				loading: props.loading,
+				children: !props.loading && props.value
+			})
+		})]
+	});
+}
+function DetailHeroTags({ label, moreLabel, values }) {
+	if (!values.length) return null;
+	return /* @__PURE__ */ jsx(DetailHeroDetail, {
+		label,
+		value: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-baseline gap-x-2 gap-y-1",
+			children: [/* @__PURE__ */ jsx("span", { children: values[0] }), values.length > 1 ? /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					className: "h-5 px-1.5 py-0 text-xs leading-5 before:-inset-y-3 sm:h-5",
+					"aria-label": `${label}: ${moreLabel}`,
+					variant: "quiet",
+					children: moreLabel
+				})
+			}), /* @__PURE__ */ jsxs(Popover.Content, {
+				align: "start",
+				width: "sm",
+				"aria-label": label,
+				children: [/* @__PURE__ */ jsx(Text, {
+					variant: "label",
+					children: label
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "mt-3 flex flex-wrap gap-2",
+					children: values.map((value) => /* @__PURE__ */ jsx("li", {
+						className: "max-w-full min-w-0",
+						children: /* @__PURE__ */ jsx(Badge, {
+							tone: "neutral",
+							className: "max-w-full wrap-break-word whitespace-normal",
+							children: value
+						})
+					}, value))
+				})]
+			})] }) : null]
+		})
+	});
+}
+export { DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags };
+
+//# sourceMappingURL=DetailHero.js.map

package/dist/display/DetailHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailHero.js","names":[],"sources":["../../src/display/DetailHero.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Popover } from '../overlays/Popover';\nimport { Heading, Text } from '../typography/Typography';\nimport { Badge } from './Badge';\nimport { TextPreview } from './TextPreview';\n\ntype DetailHeroProps =\n    | { loading: true; loadingLabel: string; summary?: boolean; description?: boolean; details?: number }\n    | {\n          loading?: false;\n          actions?: ReactNode;\n          artwork: ReactNode;\n          backgroundSrc?: string;\n          children: ReactNode;\n          label: string;\n          subtitle?: ReactNode;\n          summary?: ReactNode;\n          title: string;\n          titleLevel?: 'h1' | 'h2';\n          titleLogoSrc?: string;\n      };\n\nexport function DetailHero(props: DetailHeroProps) {\n    const loading = props.loading === true;\n    const background = !props.loading && props.backgroundSrc;\n\n    return (\n        <SkeletonLoader loading={loading} label={props.loading ? props.loadingLabel : ''}>\n            <section className=\"relative isolate min-w-0 pb-4\">\n                {background ? (\n                    <div\n                        aria-hidden=\"true\"\n                        className=\"pointer-events-none absolute inset-x-0 -top-2 bottom-0 -z-10 overflow-hidden rounded-2xl [mask-image:linear-gradient(to_bottom,black_55%,transparent)]\"\n                    >\n                        <img src={background} alt=\"\" className=\"size-full object-cover opacity-35\" />\n                        <div className=\"from-base-50 via-base-50/60 to-base-50/20 absolute inset-0 bg-linear-to-t\" />\n                    </div>\n                ) : null}\n                <div\n                    className={`grid gap-6 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-center md:grid-cols-[14rem_minmax(0,1fr)] md:gap-8 ${background ? 'p-4 sm:p-5' : ''}`}\n                >\n                    <div className=\"ring-base-900/10 w-40 self-start overflow-hidden rounded-lg shadow-md ring-1 md:w-full\">\n                        {props.loading ? <SkeletonLoader.Shape presentation=\"artwork\" /> : props.artwork}\n                    </div>\n                    <div className=\"flex min-w-0 flex-col gap-5 md:gap-6\">\n                        <div className=\"min-w-0\">\n                            <Text\n                                variant=\"overline\"\n                                tone=\"muted\"\n                                className={`mb-2 ${loading ? 'max-w-32' : ''}`}\n                                loading={loading}\n                            >\n                                {!props.loading && props.label}\n                            </Text>\n                            <div className=\"flex min-h-8 min-w-0 flex-wrap items-center gap-5\">\n                                <Heading\n                                    as={props.loading ? 'h2' : (props.titleLevel ?? 'h2')}\n                                    variant=\"hero\"\n                                    className={`min-w-0 wrap-break-word ${loading ? 'w-3/4 max-w-xl' : ''}`}\n                                    loading={loading}\n                                >\n                                    {!props.loading &&\n                                        (props.titleLogoSrc ? (\n                                            <img\n                                                src={props.titleLogoSrc}\n                                                alt={props.title}\n                                                className=\"max-h-28 w-auto max-w-full object-contain object-left sm:max-w-sm\"\n                                            />\n                                        ) : (\n                                            props.title\n                                        ))}\n                                </Heading>\n                                {!props.loading && props.actions ? (\n                                    <div className=\"flex max-w-full shrink-0 flex-wrap items-center gap-3\">\n                                        {props.actions}\n                                    </div>\n                                ) : null}\n                            </div>\n                            {props.loading || props.subtitle ? (\n                                <Text\n                                    variant=\"description\"\n                                    tone=\"muted\"\n                                    className={`mt-2 wrap-break-word ${loading ? 'max-w-sm' : ''}`}\n                                    loading={loading}\n                                >\n                                    {!props.loading && props.subtitle}\n                                </Text>\n                            ) : null}\n                        </div>\n                        {props.summary ? (\n                            <Text tone=\"muted\" className=\"max-w-xl\" loading={loading}>\n                                {!props.loading && props.summary}\n                            </Text>\n                        ) : null}\n                        {props.loading ? (\n                            <>\n                                <DetailHeroDetails>\n                                    {Array.from({ length: props.details ?? 3 }, (_, index) => (\n                                        <DetailHeroDetail key={index} loading />\n                                    ))}\n                                </DetailHeroDetails>\n                                {props.description ? <TextPreview loading /> : null}\n                            </>\n                        ) : (\n                            props.children\n                        )}\n                    </div>\n                </div>\n            </section>\n        </SkeletonLoader>\n    );\n}\n\nexport function DetailHeroDetails({ children }: { children: ReactNode }) {\n    return <dl className=\"grid grid-cols-2 gap-x-8 gap-y-4 sm:flex sm:flex-wrap\">{children}</dl>;\n}\n\ntype DetailProps = { loading: true } | { loading?: false; label: string; value: ReactNode };\n\nexport function DetailHeroDetail(props: DetailProps) {\n    return (\n        <div className={props.loading ? 'w-24' : 'max-w-full min-w-0'}>\n            <dt>\n                <Text as=\"span\" variant=\"caption\" tone=\"muted\" loading={props.loading}>\n                    {!props.loading && props.label}\n                </Text>\n            </dt>\n            <dd className=\"mt-1 min-h-6 wrap-break-word\">\n                <Text as=\"div\" variant=\"label\" loading={props.loading}>\n                    {!props.loading && props.value}\n                </Text>\n            </dd>\n        </div>\n    );\n}\n\nexport function DetailHeroTags({\n    label,\n    moreLabel,\n    values,\n}: {\n    label: string;\n    moreLabel: string;\n    values: readonly string[];\n}) {\n    if (!values.length) return null;\n\n    return (\n        <DetailHeroDetail\n            label={label}\n            value={\n                <div className=\"flex flex-wrap items-baseline gap-x-2 gap-y-1\">\n                    <span>{values[0]}</span>\n                    {values.length > 1 ? (\n                        <Popover>\n                            <Popover.Trigger asChild>\n                                {/* One line of the label's height at every width, so the row matches the others;\n                                    the hit area extends past it instead. */}\n                                <Button\n                                    className=\"h-5 px-1.5 py-0 text-xs leading-5 before:-inset-y-3 sm:h-5\"\n                                    aria-label={`${label}: ${moreLabel}`}\n                                    variant=\"quiet\"\n                                >\n                                    {moreLabel}\n                                </Button>\n                            </Popover.Trigger>\n                            <Popover.Content align=\"start\" width=\"sm\" aria-label={label}>\n                                <Text variant=\"label\">{label}</Text>\n                                <ul className=\"mt-3 flex flex-wrap gap-2\">\n                                    {values.map((value) => (\n                                        <li key={value} className=\"max-w-full min-w-0\">\n                                            <Badge\n                                                tone=\"neutral\"\n                                                className=\"max-w-full wrap-break-word whitespace-normal\"\n                                            >\n                                                {value}\n                                            </Badge>\n                                        </li>\n                                    ))}\n                                </ul>\n                            </Popover.Content>\n                        </Popover>\n                    ) : null}\n                </div>\n            }\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/display/DetailList.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+interface DetailListItem {
+  actions?: ReactNode;
+  key?: string;
+  label: string;
+  value: string;
+}
+interface DetailListProps {
+  compact?: boolean;
+  items: readonly DetailListItem[];
+  title: string;
+}
+export declare function DetailList({ compact, items, title }: DetailListProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DetailList.d.ts.map

package/dist/display/DetailList.js

@@ -0,0 +1,53 @@
+import { Stack as Stack$1 } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { Code } from "@ninna-ui/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@ninna-ui/layout";
+// src/display/DetailList.tsx
+function DetailList({ compact = false, items, title }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		className: compact ? "min-w-0" : "border-base-300 mt-1 border-t px-2 pt-3 pb-1",
+		children: [!compact ? /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			variant: "overline",
+			tone: "muted",
+			children: title
+		}) : null, /* @__PURE__ */ jsx(Stack$1, {
+			as: "dl",
+			"aria-label": title,
+			space: compact ? "none" : "related",
+			className: compact ? "min-w-0" : "mt-2",
+			children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: compact ? "grid min-w-0 grid-cols-[minmax(0,5rem)_minmax(0,1fr)] items-center gap-2" : "flex min-w-0 items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: compact ? "min-w-0" : "shrink-0",
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: compact ? "block" : void 0,
+						variant: "caption",
+						tone: "muted",
+						truncate: compact,
+						title: item.label,
+						children: item.label
+					})
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "min-w-0",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-1",
+						children: [/* @__PURE__ */ jsx(Code, {
+							title: item.value,
+							className: "block max-w-full min-w-0 flex-1 truncate px-1.5 py-0.5 text-xs",
+							children: item.value
+						}), item.actions ? /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0 items-center",
+							children: item.actions
+						}) : null]
+					})
+				})]
+			}, item.key ?? item.label))
+		})]
+	});
+}
+export { DetailList };
+
+//# sourceMappingURL=DetailList.js.map

package/dist/display/DetailList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailList.js","names":["Stack"],"sources":["../../src/display/DetailList.tsx"],"sourcesContent":["import { Box } from '@ninna-ui/layout';\nimport { Code } from '@ninna-ui/primitives';\nimport type { ReactNode } from 'react';\n\nimport { Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\n\ninterface DetailListItem {\n    actions?: ReactNode;\n    key?: string;\n    label: string;\n    value: string;\n}\n\ninterface DetailListProps {\n    compact?: boolean;\n    items: readonly DetailListItem[];\n    title: string;\n}\n\nexport function DetailList({ compact = false, items, title }: DetailListProps) {\n    return (\n        <Box className={compact ? 'min-w-0' : 'border-base-300 mt-1 border-t px-2 pt-3 pb-1'}>\n            {!compact ? (\n                <Text as=\"span\" variant=\"overline\" tone=\"muted\">\n                    {title}\n                </Text>\n            ) : null}\n            <Stack\n                as=\"dl\"\n                aria-label={title}\n                space={compact ? 'none' : 'related'}\n                className={compact ? 'min-w-0' : 'mt-2'}\n            >\n                {items.map((item) => (\n                    <div\n                        key={item.key ?? item.label}\n                        className={\n                            compact\n                                ? 'grid min-w-0 grid-cols-[minmax(0,5rem)_minmax(0,1fr)] items-center gap-2'\n                                : 'flex min-w-0 items-center justify-between gap-3'\n                        }\n                    >\n                        <dt className={compact ? 'min-w-0' : 'shrink-0'}>\n                            <Text\n                                as=\"span\"\n                                className={compact ? 'block' : undefined}\n                                variant=\"caption\"\n                                tone=\"muted\"\n                                truncate={compact}\n                                title={item.label}\n                            >\n                                {item.label}\n                            </Text>\n                        </dt>\n                        <dd className=\"min-w-0\">\n                            <div className=\"flex min-w-0 items-center gap-1\">\n                                <Code\n                                    title={item.value}\n                                    className=\"block max-w-full min-w-0 flex-1 truncate px-1.5 py-0.5 text-xs\"\n                                >\n                                    {item.value}\n                                </Code>\n                                {item.actions ? (\n                                    <span className=\"flex shrink-0 items-center\">{item.actions}</span>\n                                ) : null}\n                            </div>\n                        </dd>\n                    </div>\n                ))}\n            </Stack>\n        </Box>\n    );\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,WAAW,EAAE,UAAU,OAAO,OAAO,SAA0B;CAC3E,OACI,qBAAC,KAAD;EAAK,WAAW,UAAU,YAAY;EAAtC,UAAA,CACK,CAAC,UACE,oBAAC,MAAD;GAAM,IAAG;GAAO,SAAQ;GAAW,MAAK;GACnC,UAAA;EACC,CAAA,IACN,MACJ,oBAACA,SAAD;GACI,IAAG;GACH,cAAY;GACZ,OAAO,UAAU,SAAS;GAC1B,WAAW,UAAU,YAAY;GAEhC,UAAA,MAAM,KAAK,SACR,qBAAC,OAAD;IAEI,WACI,UACM,6EACA;IALd,UAAA,CAQI,oBAAC,MAAD;KAAI,WAAW,UAAU,YAAY;KACjC,UAAA,oBAAC,MAAD;MACI,IAAG;MACH,WAAW,UAAU,UAAU,KAAA;MAC/B,SAAQ;MACR,MAAK;MACL,UAAU;MACV,OAAO,KAAK;MAEX,UAAA,KAAK;KACJ,CAAA;IACN,CAAA,GACJ,oBAAC,MAAD;KAAI,WAAU;KACV,UAAA,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACI,oBAAC,MAAD;OACI,OAAO,KAAK;OACZ,WAAU;OAET,UAAA,KAAK;MACJ,CAAA,GACL,KAAK,UACF,oBAAC,QAAD;OAAM,WAAU;OAA8B,UAAA,KAAK;MAAc,CAAA,IACjE,IACH;;IACL,CAAA,CACH;GAhCI,GAAA,KAAK,OAAO,KAAK,KAgCrB,CACR;EACE,CAAA,CACN;;AAEb"}

package/dist/display/DeviceCard.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+interface DeviceCardProps {
+  /** A control in the top corner, for example a limit select. */
+  action?: ReactNode;
+  /** Beside the name, for example a status badge. */
+  badge?: ReactNode;
+  children: ReactNode;
+  detail?: string;
+  /** Below the content, past a divider, for example the device's encoder. */
+  footer?: ReactNode;
+  /** Dashed, for a device that is detected but cannot be used. */
+  unavailable?: boolean;
+  name: string;
+}
+/** One piece of hardware: its name and detail, a corner control and its content. */
+export declare function DeviceCard({ action, badge, children, detail, footer, name, unavailable }: DeviceCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DeviceCard.d.ts.map