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

package/dist/display/TextPreview.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+type TextPreviewProps = {
+  loading: true;
+} | {
+  loading?: false;
+  children?: ReactNode;
+  value: string;
+  moreLabel: string;
+  language?: string;
+  title: string;
+};
+export declare function TextPreview(props: TextPreviewProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TextPreview.d.ts.map

package/dist/display/TextPreview.js

@@ -0,0 +1,46 @@
+import { Button } from "../actions/Button.js";
+import { Stack } from "../layout/Flow.js";
+import { Modal } from "../overlays/Modal.js";
+import { Text } from "../typography/Typography.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/display/TextPreview.tsx
+function TextPreview(props) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex max-w-3xl min-w-0 items-center gap-3",
+		children: [/* @__PURE__ */ jsx(Text, {
+			lang: props.loading ? void 0 : props.language,
+			tone: "muted",
+			className: `min-w-0 truncate leading-6 ${props.loading ? "flex-1" : ""}`,
+			loading: props.loading,
+			children: !props.loading && props.value
+		}), props.loading ? /* @__PURE__ */ jsx(Text, {
+			className: "w-20 shrink-0 leading-6",
+			loading: true
+		}) : /* @__PURE__ */ jsx(Button, {
+			className: "h-auto shrink-0 px-0 py-0 text-sm leading-6 before:-inset-y-2.5",
+			"aria-haspopup": "dialog",
+			onClick: () => setOpen(true),
+			variant: "quiet",
+			children: props.moreLabel
+		})]
+	}), !props.loading && open ? /* @__PURE__ */ jsx(Modal, {
+		onClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsx(Modal.Content, {
+			title: props.title,
+			children: /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Stack, {
+				space: "section",
+				children: [props.children, /* @__PURE__ */ jsx(Text, {
+					lang: props.language,
+					className: "leading-7 text-pretty wrap-break-word whitespace-pre-line",
+					variant: "description",
+					children: props.value
+				})]
+			}) })
+		})
+	}) : null] });
+}
+export { TextPreview };
+
+//# sourceMappingURL=TextPreview.js.map

package/dist/display/TextPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextPreview.js","names":[],"sources":["../../src/display/TextPreview.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Stack } from '../layout/Flow';\nimport { Modal } from '../overlays/Modal';\nimport { Text } from '../typography/Typography';\n\ntype TextPreviewProps =\n    | { loading: true }\n    | {\n          loading?: false;\n          children?: ReactNode;\n          value: string;\n          moreLabel: string;\n          language?: string;\n          title: string;\n      };\n\nexport function TextPreview(props: TextPreviewProps) {\n    const [open, setOpen] = useState(false);\n\n    return (\n        <>\n            <div className=\"flex max-w-3xl min-w-0 items-center gap-3\">\n                <Text\n                    lang={props.loading ? undefined : props.language}\n                    tone=\"muted\"\n                    className={`min-w-0 truncate leading-6 ${props.loading ? 'flex-1' : ''}`}\n                    loading={props.loading}\n                >\n                    {!props.loading && props.value}\n                </Text>\n                {props.loading ? (\n                    <Text className=\"w-20 shrink-0 leading-6\" loading />\n                ) : (\n                    <Button\n                        className=\"h-auto shrink-0 px-0 py-0 text-sm leading-6 before:-inset-y-2.5\"\n                        aria-haspopup=\"dialog\"\n                        onClick={() => setOpen(true)}\n                        variant=\"quiet\"\n                    >\n                        {props.moreLabel}\n                    </Button>\n                )}\n            </div>\n            {!props.loading && open ? (\n                <Modal onClose={() => setOpen(false)}>\n                    <Modal.Content title={props.title}>\n                        <Modal.Body>\n                            <Stack space=\"section\">\n                                {props.children}\n                                <Text\n                                    lang={props.language}\n                                    className=\"leading-7 text-pretty wrap-break-word whitespace-pre-line\"\n                                    variant=\"description\"\n                                >\n                                    {props.value}\n                                </Text>\n                            </Stack>\n                        </Modal.Body>\n                    </Modal.Content>\n                </Modal>\n            ) : null}\n        </>\n    );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,YAAY,OAAyB;CACjD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACI,qBAAA,YAAA,EAAA,UAAA,CACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,oBAAC,MAAD;GACI,MAAM,MAAM,UAAU,KAAA,IAAY,MAAM;GACxC,MAAK;GACL,WAAW,8BAA8B,MAAM,UAAU,WAAW;GACpE,SAAS,MAAM;GAEd,UAAA,CAAC,MAAM,WAAW,MAAM;EACvB,CAAA,GACL,MAAM,UACH,oBAAC,MAAD;GAAM,WAAU;GAA0B,SAAA;EAAS,CAAA,IAEnD,oBAAC,QAAD;GACI,WAAU;GACV,iBAAc;GACd,eAAe,QAAQ,IAAI;GAC3B,SAAQ;GAEP,UAAA,MAAM;EACH,CAAA,CAEX;CACJ,CAAA,GAAA,CAAC,MAAM,WAAW,OACf,oBAAC,OAAD;EAAO,eAAe,QAAQ,KAAK;EAC/B,UAAA,oBAAC,MAAM,SAAP;GAAe,OAAO,MAAM;GACxB,UAAA,oBAAC,MAAM,MAAP,EAAA,UACI,qBAAC,OAAD;IAAO,OAAM;IAAb,UAAA,CACK,MAAM,UACP,oBAAC,MAAD;KACI,MAAM,MAAM;KACZ,WAAU;KACV,SAAQ;KAEP,UAAA,MAAM;IACL,CAAA,CACH;GACC,CAAA,EAAA,CAAA;EACD,CAAA;CACZ,CAAA,IACP,IACN,EAAA,CAAA;AAEV"}

package/dist/display/TimeSeriesChart.d.ts

@@ -0,0 +1,19 @@
+export interface TimeSeriesPoint {
+  timestamp: number;
+  lar: number | null;
+  host: number | null;
+}
+export declare function TimeSeriesChartSkeleton(): import("react").JSX.Element;
+interface TimeSeriesChartProps {
+  label: string;
+  larLabel: string;
+  hostLabel: string;
+  points: readonly TimeSeriesPoint[];
+  formatValue: (value: number) => string;
+  maximum?: number;
+  unavailableLabel: string;
+}
+/** Host and lar series, each drawn only when the server measured it, with gaps for missed samples. */
+export declare function TimeSeriesChart({ label, larLabel, hostLabel, points, formatValue, maximum, unavailableLabel }: TimeSeriesChartProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=TimeSeriesChart.d.ts.map

package/dist/display/TimeSeriesChart.js

@@ -0,0 +1,163 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/TimeSeriesChart.tsx
+function TimeSeriesChartSkeleton() {
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "border-base-300 bg-base-100 min-w-0 rounded-lg border p-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-3 h-5",
+				children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" })
+			}),
+			/* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "chart" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex h-4 items-center gap-5",
+				children: [/* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" }), /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex h-4 items-center justify-between",
+				children: [/* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" }), /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "short" })]
+			})
+		]
+	});
+}
+const colors = {
+	host: "var(--color-base-600)",
+	lar: "var(--color-primary)"
+};
+const time = (timestamp) => new Date(timestamp).toLocaleTimeString();
+/** Host and lar series, each drawn only when the server measured it, with gaps for missed samples. */
+function TimeSeriesChart({ label, larLabel, hostLabel, points, formatValue, maximum, unavailableLabel }) {
+	const [hovered, setHovered] = useState(null);
+	const labels = {
+		host: hostLabel,
+		lar: larLabel
+	};
+	const series = ["host", "lar"].filter((kind) => points.some((point) => point[kind] !== null));
+	if (series.length === 0) return null;
+	const observed = points.flatMap((point) => series.map((kind) => point[kind])).filter((value) => value !== null);
+	const upper = Math.max(maximum ?? 0, ...observed, 1);
+	const latest = points.at(-1);
+	const first = points[0]?.timestamp ?? 0;
+	const last = latest?.timestamp ?? first;
+	const span = Math.max(last - first, 1);
+	const x = (timestamp) => 2 + (timestamp - first) / span * 96;
+	const y = (value) => 38 - Math.max(0, value) / upper * 36;
+	const path = (kind) => points.map((point, index) => {
+		const value = point[kind];
+		if (value === null) return "";
+		const start = points[index - 1]?.[kind] == null;
+		return `${start ? "M" : "L"}${x(point.timestamp).toFixed(2)},${y(value).toFixed(2)}${start ? "h0" : ""}`;
+	}).join(" ");
+	const latestText = (kind) => latest?.[kind] == null ? unavailableLabel : formatValue(latest[kind]);
+	const swatch = (kind) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "size-2 shrink-0 rounded-full",
+		style: { backgroundColor: colors[kind] }
+	});
+	const active = hovered === null ? void 0 : points[hovered];
+	const readings = active ? series.flatMap((kind) => {
+		const value = active[kind];
+		return value === null ? [] : [{
+			kind,
+			value
+		}];
+	}) : [];
+	const trackPointer = (event) => {
+		const bounds = event.currentTarget.getBoundingClientRect();
+		const target = (event.clientX - bounds.left) / bounds.width * 100;
+		const distance = (point) => Math.abs(x(point.timestamp) - target);
+		setHovered(points.reduce((best, point, index) => distance(point) < distance(points[best] ?? point) ? index : best, 0));
+	};
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "border-base-300 bg-base-100 min-w-0 rounded-lg border p-4",
+		children: [
+			/* @__PURE__ */ jsx("figcaption", {
+				className: "text-base-content mb-3 text-sm font-medium",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative h-36 w-full touch-pan-y",
+				onPointerMove: trackPointer,
+				onPointerLeave: () => setHovered(null),
+				children: [/* @__PURE__ */ jsxs("svg", {
+					"aria-label": `${label}: ${series.map((kind) => `${labels[kind]} ${latestText(kind)}`).join(", ")}`,
+					className: "size-full overflow-visible",
+					preserveAspectRatio: "none",
+					role: "img",
+					viewBox: "0 0 100 40",
+					children: [/* @__PURE__ */ jsx("path", {
+						d: "M2,38 H98 M2,20 H98 M2,2 H98",
+						fill: "none",
+						stroke: "currentColor",
+						strokeOpacity: "0.12",
+						strokeWidth: "0.25"
+					}), series.map((kind) => /* @__PURE__ */ jsx("path", {
+						d: path(kind),
+						fill: "none",
+						stroke: colors[kind],
+						strokeLinecap: "round",
+						strokeWidth: "2",
+						vectorEffect: "non-scaling-stroke"
+					}, kind))]
+				}), active && readings.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute inset-0",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "bg-base-content/20 absolute inset-y-0 w-px -translate-x-1/2",
+							style: { left: `${x(active.timestamp)}%` }
+						}),
+						readings.map(({ kind, value }) => /* @__PURE__ */ jsx("div", {
+							className: "ring-base-50 absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2",
+							style: {
+								left: `${x(active.timestamp)}%`,
+								top: `${y(value) / 40 * 100}%`,
+								backgroundColor: colors[kind]
+							}
+						}, kind)),
+						/* @__PURE__ */ jsxs("div", {
+							className: `border-base-300 bg-base-100 absolute top-0 z-10 w-max rounded-md border px-2 py-1 text-xs shadow-sm ${x(active.timestamp) > 50 ? "-ml-2 -translate-x-full" : "ml-2"}`,
+							style: { left: `${x(active.timestamp)}%` },
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-base-600 tabular-nums",
+								children: time(active.timestamp)
+							}), readings.map(({ kind, value }) => /* @__PURE__ */ jsxs("div", {
+								className: "text-base-content flex items-center gap-1.5 tabular-nums",
+								children: [
+									swatch(kind),
+									labels[kind],
+									": ",
+									formatValue(value)
+								]
+							}, kind))]
+						})
+					]
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-base-700 mt-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs",
+				children: [series.map((kind) => /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5",
+					children: [
+						swatch(kind),
+						labels[kind],
+						": ",
+						latestText(kind)
+					]
+				}, kind)), /* @__PURE__ */ jsx("span", {
+					className: "ml-auto tabular-nums",
+					children: formatValue(upper)
+				})]
+			}),
+			points.length > 1 ? /* @__PURE__ */ jsxs("div", {
+				className: "text-base-600 mt-1 flex justify-between text-xs tabular-nums",
+				children: [/* @__PURE__ */ jsx("span", { children: time(first) }), /* @__PURE__ */ jsx("span", { children: time(last) })]
+			}) : null
+		]
+	});
+}
+export { TimeSeriesChart, TimeSeriesChartSkeleton };
+
+//# sourceMappingURL=TimeSeriesChart.js.map

package/dist/display/TimeSeriesChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesChart.js","names":[],"sources":["../../src/display/TimeSeriesChart.tsx"],"sourcesContent":["import { type PointerEvent, useState } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\n\nexport interface TimeSeriesPoint {\n    timestamp: number;\n    lar: number | null;\n    host: number | null;\n}\n\nexport function TimeSeriesChartSkeleton() {\n    return (\n        <figure className=\"border-base-300 bg-base-100 min-w-0 rounded-lg border p-4\">\n            <div className=\"mb-3 h-5\">\n                <SkeletonLoader.Shape width=\"short\" />\n            </div>\n            <SkeletonLoader.Shape presentation=\"chart\" />\n            <div className=\"mt-3 flex h-4 items-center gap-5\">\n                <SkeletonLoader.Shape width=\"short\" />\n                <SkeletonLoader.Shape width=\"short\" />\n            </div>\n            <div className=\"mt-1 flex h-4 items-center justify-between\">\n                <SkeletonLoader.Shape width=\"short\" />\n                <SkeletonLoader.Shape width=\"short\" />\n            </div>\n        </figure>\n    );\n}\n\ntype Series = 'host' | 'lar';\n\ninterface TimeSeriesChartProps {\n    label: string;\n    larLabel: string;\n    hostLabel: string;\n    points: readonly TimeSeriesPoint[];\n    formatValue: (value: number) => string;\n    maximum?: number;\n    unavailableLabel: string;\n}\n\nconst colors: Record<Series, string> = { host: 'var(--color-base-600)', lar: 'var(--color-primary)' };\nconst time = (timestamp: number) => new Date(timestamp).toLocaleTimeString();\n\n/** Host and lar series, each drawn only when the server measured it, with gaps for missed samples. */\nexport function TimeSeriesChart({\n    label,\n    larLabel,\n    hostLabel,\n    points,\n    formatValue,\n    maximum,\n    unavailableLabel,\n}: TimeSeriesChartProps) {\n    const [hovered, setHovered] = useState<number | null>(null);\n    const labels: Record<Series, string> = { host: hostLabel, lar: larLabel };\n    const series = (['host', 'lar'] as const).filter((kind) => points.some((point) => point[kind] !== null));\n\n    if (series.length === 0) return null;\n\n    const observed = points.flatMap((point) => series.map((kind) => point[kind])).filter((value) => value !== null);\n    const upper = Math.max(maximum ?? 0, ...observed, 1);\n    const latest = points.at(-1);\n    const first = points[0]?.timestamp ?? 0;\n    const last = latest?.timestamp ?? first;\n    const span = Math.max(last - first, 1);\n    // Plot coordinates in percent of the viewBox, shared by the SVG lines and the HTML hover layer.\n    const x = (timestamp: number) => 2 + ((timestamp - first) / span) * 96;\n    const y = (value: number) => 38 - (Math.max(0, value) / upper) * 36;\n    const path = (kind: Series) =>\n        points\n            .map((point, index) => {\n                const value = point[kind];\n\n                if (value === null) return '';\n\n                // A sample after a gap starts a segment; a zero-length one draws as a dot through the round cap.\n                const start = points[index - 1]?.[kind] == null;\n\n                return `${start ? 'M' : 'L'}${x(point.timestamp).toFixed(2)},${y(value).toFixed(2)}${start ? 'h0' : ''}`;\n            })\n            .join(' ');\n    const latestText = (kind: Series) => (latest?.[kind] == null ? unavailableLabel : formatValue(latest[kind]));\n    const swatch = (kind: Series) => (\n        <span aria-hidden=\"true\" className=\"size-2 shrink-0 rounded-full\" style={{ backgroundColor: colors[kind] }} />\n    );\n    const active = hovered === null ? undefined : points[hovered];\n    const readings = active\n        ? series.flatMap((kind) => {\n              const value = active[kind];\n\n              return value === null ? [] : [{ kind, value }];\n          })\n        : [];\n    const trackPointer = (event: PointerEvent<HTMLDivElement>) => {\n        const bounds = event.currentTarget.getBoundingClientRect();\n        const target = ((event.clientX - bounds.left) / bounds.width) * 100;\n        const distance = (point: TimeSeriesPoint) => Math.abs(x(point.timestamp) - target);\n\n        setHovered(\n            points.reduce(\n                (best, point, index) => (distance(point) < distance(points[best] ?? point) ? index : best),\n                0,\n            ),\n        );\n    };\n\n    return (\n        <figure className=\"border-base-300 bg-base-100 min-w-0 rounded-lg border p-4\">\n            <figcaption className=\"text-base-content mb-3 text-sm font-medium\">{label}</figcaption>\n            <div\n                className=\"relative h-36 w-full touch-pan-y\"\n                onPointerMove={trackPointer}\n                onPointerLeave={() => setHovered(null)}\n            >\n                <svg\n                    aria-label={`${label}: ${series.map((kind) => `${labels[kind]} ${latestText(kind)}`).join(', ')}`}\n                    className=\"size-full overflow-visible\"\n                    preserveAspectRatio=\"none\"\n                    role=\"img\"\n                    viewBox=\"0 0 100 40\"\n                >\n                    <path\n                        d=\"M2,38 H98 M2,20 H98 M2,2 H98\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeOpacity=\"0.12\"\n                        strokeWidth=\"0.25\"\n                    />\n                    {series.map((kind) => (\n                        <path\n                            key={kind}\n                            d={path(kind)}\n                            fill=\"none\"\n                            stroke={colors[kind]}\n                            strokeLinecap=\"round\"\n                            strokeWidth=\"2\"\n                            vectorEffect=\"non-scaling-stroke\"\n                        />\n                    ))}\n                </svg>\n                {active && readings.length > 0 ? (\n                    <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0\">\n                        <div\n                            className=\"bg-base-content/20 absolute inset-y-0 w-px -translate-x-1/2\"\n                            style={{ left: `${x(active.timestamp)}%` }}\n                        />\n                        {readings.map(({ kind, value }) => (\n                            <div\n                                key={kind}\n                                className=\"ring-base-50 absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2\"\n                                style={{\n                                    left: `${x(active.timestamp)}%`,\n                                    top: `${(y(value) / 40) * 100}%`,\n                                    backgroundColor: colors[kind],\n                                }}\n                            />\n                        ))}\n                        <div\n                            className={`border-base-300 bg-base-100 absolute top-0 z-10 w-max rounded-md border px-2 py-1 text-xs shadow-sm ${x(active.timestamp) > 50 ? '-ml-2 -translate-x-full' : 'ml-2'}`}\n                            style={{ left: `${x(active.timestamp)}%` }}\n                        >\n                            <div className=\"text-base-600 tabular-nums\">{time(active.timestamp)}</div>\n                            {readings.map(({ kind, value }) => (\n                                <div key={kind} className=\"text-base-content flex items-center gap-1.5 tabular-nums\">\n                                    {swatch(kind)}\n                                    {labels[kind]}: {formatValue(value)}\n                                </div>\n                            ))}\n                        </div>\n                    </div>\n                ) : null}\n            </div>\n            <div className=\"text-base-700 mt-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs\">\n                {series.map((kind) => (\n                    <span key={kind} className=\"inline-flex items-center gap-1.5\">\n                        {swatch(kind)}\n                        {labels[kind]}: {latestText(kind)}\n                    </span>\n                ))}\n                <span className=\"ml-auto tabular-nums\">{formatValue(upper)}</span>\n            </div>\n            {points.length > 1 ? (\n                <div className=\"text-base-600 mt-1 flex justify-between text-xs tabular-nums\">\n                    <span>{time(first)}</span>\n                    <span>{time(last)}</span>\n                </div>\n            ) : null}\n        </figure>\n    );\n}\n"],"mappings":"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"}

package/dist/display/ToneTile.js

@@ -0,0 +1,12 @@
+// src/display/ToneTile.ts
+/** A small square holding an icon, tinted by tone: T3 Code's 8% tint behind its foreground colour. */
+const toneTileClasses = {
+	neutral: "bg-base-200 text-base-700 ring-1 ring-inset ring-base-300/70 dark:bg-base-300/60",
+	success: "bg-success/10 text-(--lar-success-text) dark:bg-success/16",
+	warning: "bg-warning/12 text-(--lar-warning-text) dark:bg-warning/16",
+	danger: "bg-danger/10 text-(--lar-danger-text) dark:bg-danger/16",
+	info: "bg-info/10 text-(--lar-info-text) dark:bg-info/16"
+};
+export { toneTileClasses };
+
+//# sourceMappingURL=ToneTile.js.map

package/dist/display/ToneTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToneTile.js","names":[],"sources":["../../src/display/ToneTile.ts"],"sourcesContent":["import type { StatusTone } from '../feedback/StatusIndicator';\n\n/** A small square holding an icon, tinted by tone: T3 Code's 8% tint behind its foreground colour. */\nexport const toneTileClasses: Record<StatusTone, string> = {\n    neutral: 'bg-base-200 text-base-700 ring-1 ring-inset ring-base-300/70 dark:bg-base-300/60',\n    success: 'bg-success/10 text-(--lar-success-text) dark:bg-success/16',\n    warning: 'bg-warning/12 text-(--lar-warning-text) dark:bg-warning/16',\n    danger: 'bg-danger/10 text-(--lar-danger-text) dark:bg-danger/16',\n    info: 'bg-info/10 text-(--lar-info-text) dark:bg-info/16',\n};\n"],"mappings":";;AAGA,MAAa,kBAA8C;CACvD,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACV"}

package/dist/display/index.d.ts

@@ -0,0 +1,38 @@
+import { ActivityCard, ActivityCardSkeleton } from "./ActivityCard.js";
+import { ItemAction } from "./ItemAction.js";
+import { Artwork } from "./Artwork.js";
+import { Avatar } from "./Avatar.js";
+import { Badge, BadgeProps } from "./Badge.js";
+import { BadgeList, BadgeListItem } from "./BadgeList.js";
+import { BrandLink, BrandMark } from "./BrandMark.js";
+import { ChangeList, ChangeListItem } from "./ChangeList.js";
+import { CheckList, CheckListItem } from "./CheckList.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { CopyButton } from "./CopyButton.js";
+import { DataTable, DataTableCell, DataTableRow } from "./DataTable.js";
+import { DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags } from "./DetailHero.js";
+import { DetailList } from "./DetailList.js";
+import { DeviceCard } from "./DeviceCard.js";
+import { Identity } from "./Identity.js";
+import { ImageCard } from "./ImageCard.js";
+import { ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload } from "./ImagePicker.js";
+import { InfoBox } from "./InfoBox.js";
+import { InsetPanel } from "./InsetPanel.js";
+import { Kbd } from "./Kbd.js";
+import { KindIcon } from "./KindIcon.js";
+import { NoticeCard } from "./NoticeCard.js";
+import { PairingList, PairingListItem } from "./PairingList.js";
+import { PathList } from "./PathList.js";
+import { PeoplePreview } from "./PeoplePreview.js";
+import { PropertySheet, PropertySheetRow, PropertySheetTag } from "./PropertySheet.js";
+import { QrCode } from "./QrCode.js";
+import { RadioChoice } from "./RadioChoice.js";
+import { RatingLink } from "./RatingLink.js";
+import { ResourceCard, ResourceCardSkeleton } from "./ResourceCard.js";
+import { RowList, RowListItem } from "./RowList.js";
+import { MeterLegend, MeterSegment, MeterTone, StackedMeter } from "./StackedMeter.js";
+import { StatTile } from "./StatTile.js";
+import { StepList } from "./StepList.js";
+import { TextPreview } from "./TextPreview.js";
+import { TimeSeriesChart, TimeSeriesChartSkeleton, TimeSeriesPoint } from "./TimeSeriesChart.js";
+export { ActivityCard, ActivityCardSkeleton, Artwork, Avatar, Badge, BadgeList, type BadgeListItem, type BadgeProps, BrandLink, BrandMark, ChangeList, type ChangeListItem, CheckList, type CheckListItem, CodeBlock, CopyButton, DataTable, type DataTableCell, type DataTableRow, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DeviceCard, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, InfoBox, InsetPanel, ItemAction, Kbd, KindIcon, MeterLegend, type MeterSegment, type MeterTone, NoticeCard, PairingList, type PairingListItem, PathList, PeoplePreview, PropertySheet, type PropertySheetRow, type PropertySheetTag, QrCode, RadioChoice, RatingLink, ResourceCard, ResourceCardSkeleton, RowList, RowListItem, StackedMeter, StatTile, StepList, TextPreview, TimeSeriesChart, TimeSeriesChartSkeleton, type TimeSeriesPoint };

package/dist/feedback/Alert.d.ts

@@ -0,0 +1,15 @@
+import { StatusTone } from "./StatusIndicator.js";
+import { AlertProps } from "@ninna-ui/feedback";
+type AlertProps$1 = Omit<AlertProps, 'color' | 'size' | 'variant'> & {
+  compact?: boolean;
+  /** Stays below the application header while its containing region is visible. */
+  sticky?: boolean;
+  tone?: Exclude<StatusTone, 'neutral'>;
+};
+/**
+ * An immediate status about a condition or operation. Compact notes can hold short inline guidance.
+ * Use NoticeCard for content that needs examination and InfoBox for guidance that opens another surface.
+ */
+declare function Alert$1({ compact, sticky, tone, className, ...props }: AlertProps$1): import("react").JSX.Element;
+export { Alert$1 as Alert };
+//# sourceMappingURL=Alert.d.ts.map

package/dist/feedback/Alert.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Alert } from "@ninna-ui/feedback";
+// src/feedback/Alert.tsx
+/**
+* An immediate status about a condition or operation. Compact notes can hold short inline guidance.
+* Use NoticeCard for content that needs examination and InfoBox for guidance that opens another surface.
+*/
+function Alert$1({ compact = false, sticky = false, tone = "info", className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Alert, {
+		size: compact ? "xs" : "sm",
+		showIcon: true,
+		...props,
+		color: tone,
+		className: (sticky ? "bg-base-50 sticky top-(--lar-header-height,0px) z-30 shadow-sm " : "") + (compact ? "[&_[data-slot=description]]:text-xs [&_[data-slot=icon]>svg]:size-4 [&_[data-slot=title]]:text-xs " : "") + (tone === "warning" ? "[&_[data-slot=description]]:text-(--lar-warning-text) [&_[data-slot=description]]:opacity-100 [&_[data-slot=title]]:text-(--lar-warning-text) " : "") + className
+	});
+}
+export { Alert$1 as Alert };
+
+//# sourceMappingURL=Alert.js.map

package/dist/feedback/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["Alert","NinnaAlert"],"sources":["../../src/feedback/Alert.tsx"],"sourcesContent":["import { Alert as NinnaAlert, type AlertProps as NinnaAlertProps } from '@ninna-ui/feedback';\n\nimport type { StatusTone } from './StatusIndicator';\n\ntype AlertProps = Omit<NinnaAlertProps, 'color' | 'size' | 'variant'> & {\n    compact?: boolean;\n    /** Stays below the application header while its containing region is visible. */\n    sticky?: boolean;\n    tone?: Exclude<StatusTone, 'neutral'>;\n};\n\n/**\n * An immediate status about a condition or operation. Compact notes can hold short inline guidance.\n * Use NoticeCard for content that needs examination and InfoBox for guidance that opens another surface.\n */\nexport function Alert({ compact = false, sticky = false, tone = 'info', className = '', ...props }: AlertProps) {\n    return (\n        <NinnaAlert\n            size={compact ? 'xs' : 'sm'}\n            showIcon\n            {...props}\n            color={tone}\n            className={\n                (sticky ? 'bg-base-50 sticky top-(--lar-header-height,0px) z-30 shadow-sm ' : '') +\n                (compact\n                    ? '[&_[data-slot=description]]:text-xs [&_[data-slot=icon]>svg]:size-4 [&_[data-slot=title]]:text-xs '\n                    : '') +\n                (tone === 'warning'\n                    ? '[&_[data-slot=description]]:text-(--lar-warning-text) [&_[data-slot=description]]:opacity-100 [&_[data-slot=title]]:text-(--lar-warning-text) '\n                    : '') +\n                className\n            }\n        />\n    );\n}\n"],"mappings":";;;;;;;AAeA,SAAgBA,QAAM,EAAE,UAAU,OAAO,SAAS,OAAO,OAAO,QAAQ,YAAY,IAAI,GAAG,SAAqB;CAC5G,OACI,oBAACC,OAAD;EACI,MAAM,UAAU,OAAO;EACvB,UAAA;EACA,GAAI;EACJ,OAAO;EACP,YACK,SAAS,oEAAoE,OAC7E,UACK,uGACA,OACL,SAAS,YACJ,mJACA,MACN;CAEP,CAAA;AAET"}

package/dist/feedback/AsyncState.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+interface AsyncStateProps {
+  placeholder?: ReactNode;
+  error?: string;
+  errorTitle: string;
+  label: string;
+  loading: boolean;
+  onRetry?: () => void;
+  presentation?: 'card' | 'line';
+  retryLabel?: string;
+  retrying?: boolean;
+}
+/** Owns a region's loading geometry and load failure; use Alert for other operation feedback. */
+export declare function AsyncState({ error, errorTitle, label, loading, onRetry, presentation, placeholder, retryLabel, retrying }: AsyncStateProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=AsyncState.d.ts.map

package/dist/feedback/AsyncState.js

@@ -0,0 +1,29 @@
+import { Button } from "../actions/Button.js";
+import { SkeletonLoader } from "./SkeletonLoader.js";
+import { jsx } from "react/jsx-runtime";
+import { Alert } from "@ninna-ui/feedback";
+// src/feedback/AsyncState.tsx
+/** Owns a region's loading geometry and load failure; use Alert for other operation feedback. */
+function AsyncState({ error, errorTitle, label, loading, onRetry, presentation = "card", placeholder, retryLabel, retrying = false }) {
+	if (loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
+		label,
+		children: placeholder ?? /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation })
+	});
+	if (!error) return null;
+	return /* @__PURE__ */ jsx(Alert, {
+		color: "danger",
+		title: errorTitle,
+		description: error,
+		showIcon: true,
+		action: onRetry && retryLabel ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			onClick: onRetry,
+			variant: "primary",
+			loading: retrying,
+			children: retryLabel
+		}) : void 0
+	});
+}
+export { AsyncState };
+
+//# sourceMappingURL=AsyncState.js.map

package/dist/feedback/AsyncState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncState.js","names":[],"sources":["../../src/feedback/AsyncState.tsx"],"sourcesContent":["import { Alert } from '@ninna-ui/feedback';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { SkeletonLoader } from './SkeletonLoader';\n\ninterface AsyncStateProps {\n    placeholder?: ReactNode;\n    error?: string;\n    errorTitle: string;\n    label: string;\n    loading: boolean;\n    onRetry?: () => void;\n    presentation?: 'card' | 'line';\n    retryLabel?: string;\n    retrying?: boolean;\n}\n\n/** Owns a region's loading geometry and load failure; use Alert for other operation feedback. */\nexport function AsyncState({\n    error,\n    errorTitle,\n    label,\n    loading,\n    onRetry,\n    presentation = 'card',\n    placeholder,\n    retryLabel,\n    retrying = false,\n}: AsyncStateProps) {\n    if (loading) {\n        return (\n            <SkeletonLoader label={label}>\n                {placeholder ?? <SkeletonLoader.Shape presentation={presentation} />}\n            </SkeletonLoader>\n        );\n    }\n\n    if (!error) return null;\n\n    return (\n        <Alert\n            color=\"danger\"\n            title={errorTitle}\n            description={error}\n            showIcon\n            action={\n                onRetry && retryLabel ? (\n                    <Button type=\"button\" onClick={onRetry} variant=\"primary\" loading={retrying}>\n                        {retryLabel}\n                    </Button>\n                ) : undefined\n            }\n        />\n    );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,WAAW,EACvB,OACA,YACA,OACA,SACA,SACA,eAAe,QACf,aACA,YACA,WAAW,SACK;CAChB,IAAI,SACA,OACI,oBAAC,gBAAD;EAAuB;EAClB,UAAA,eAAe,oBAAC,eAAe,OAAhB,EAAoC,aAAe,CAAA;CACvD,CAAA;CAIxB,IAAI,CAAC,OAAO,OAAO;CAEnB,OACI,oBAAC,OAAD;EACI,OAAM;EACN,OAAO;EACP,aAAa;EACb,UAAA;EACA,QACI,WAAW,aACP,oBAAC,QAAD;GAAQ,MAAK;GAAS,SAAS;GAAS,SAAQ;GAAU,SAAS;GAC9D,UAAA;EACG,CAAA,IACR,KAAA;CAEX,CAAA;AAET"}

package/dist/feedback/ErrorNotification.d.ts

@@ -0,0 +1,8 @@
+export interface ErrorNotification {
+  description: string;
+  title: string;
+}
+export declare function dismissAllNotifications(): void;
+export declare function showErrorNotification(notification: ErrorNotification): void;
+export declare function showSuccessNotification(message: string): void;
+//# sourceMappingURL=ErrorNotification.d.ts.map

package/dist/feedback/ErrorNotification.js

@@ -0,0 +1,20 @@
+import { toast } from "@ninna-ui/feedback";
+// src/feedback/ErrorNotification.ts
+function dismissAllNotifications() {
+	toast.dismissAll();
+}
+function showErrorNotification(notification) {
+	toast.create({
+		...notification,
+		color: "danger"
+	});
+}
+function showSuccessNotification(message) {
+	toast.create({
+		color: "success",
+		title: message
+	});
+}
+export { dismissAllNotifications, showErrorNotification, showSuccessNotification };
+
+//# sourceMappingURL=ErrorNotification.js.map

package/dist/feedback/ErrorNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorNotification.js","names":[],"sources":["../../src/feedback/ErrorNotification.ts"],"sourcesContent":["import { toast } from '@ninna-ui/feedback';\n\nexport interface ErrorNotification {\n    description: string;\n    title: string;\n}\n\nexport function dismissAllNotifications(): void {\n    toast.dismissAll();\n}\n\nexport function showErrorNotification(notification: ErrorNotification): void {\n    toast.create({\n        ...notification,\n        color: 'danger',\n    });\n}\n\nexport function showSuccessNotification(message: string): void {\n    toast.create({\n        color: 'success',\n        title: message,\n    });\n}\n"],"mappings":";;AAOA,SAAgB,0BAAgC;CAC5C,MAAM,WAAW;AACrB;AAEA,SAAgB,sBAAsB,cAAuC;CACzE,MAAM,OAAO;EACT,GAAG;EACH,OAAO;CACX,CAAC;AACL;AAEA,SAAgB,wBAAwB,SAAuB;CAC3D,MAAM,OAAO;EACT,OAAO;EACP,OAAO;CACX,CAAC;AACL"}

package/dist/feedback/Notifications.d.ts

@@ -0,0 +1,2 @@
+export declare function Notifications(): import("react").JSX.Element;
+//# sourceMappingURL=Notifications.d.ts.map

package/dist/feedback/Notifications.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "@ninna-ui/feedback";
+// src/feedback/Notifications.tsx
+function Notifications() {
+	return /* @__PURE__ */ jsx(Toaster, { position: "bottom-right" });
+}
+export { Notifications };
+
+//# sourceMappingURL=Notifications.js.map

package/dist/feedback/Notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.js","names":[],"sources":["../../src/feedback/Notifications.tsx"],"sourcesContent":["import { Toaster } from '@ninna-ui/feedback';\n\nexport function Notifications() {\n    return <Toaster position=\"bottom-right\" />;\n}\n"],"mappings":";;;AAEA,SAAgB,gBAAgB;CAC5B,OAAO,oBAAC,SAAD,EAAS,UAAS,eAAgB,CAAA;AAC7C"}

package/dist/feedback/ProgressStatusRow.d.ts

@@ -0,0 +1,23 @@
+import { StatusTone } from "./StatusIndicator.js";
+import { ReactNode } from "react";
+interface ProgressStatusRowProps {
+  active: boolean;
+  detail?: string;
+  secondaryDetail?: string;
+  issue?: string;
+  label: string;
+  progress?: {
+    max: number;
+    value: number;
+  };
+  tone?: StatusTone;
+  trailing?: ReactNode;
+  onDetails?: () => void;
+  detailsLabel?: string;
+  progressLabel?: string;
+  compact?: boolean;
+}
+/** Ledger rows reserve the count line and track so updates never displace controls. */
+export declare function ProgressStatusRow({ active, detail, secondaryDetail, issue, label, progress, tone, trailing, onDetails, detailsLabel, progressLabel, compact }: ProgressStatusRowProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ProgressStatusRow.d.ts.map

package/dist/feedback/ProgressStatusRow.js

@@ -0,0 +1,74 @@
+import { Button } from "../actions/Button.js";
+import { StatusIndicator } from "./StatusIndicator.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+// src/feedback/ProgressStatusRow.tsx
+/** Ledger rows reserve the count line and track so updates never displace controls. */
+function ProgressStatusRow({ active, detail, secondaryDetail, issue, label, progress, tone = "info", trailing, onDetails, detailsLabel, progressLabel, compact = false }) {
+	const known = progress && progress.max > 0 ? progress : void 0;
+	const colors = {
+		info: "bg-primary",
+		success: "bg-success",
+		danger: "bg-danger",
+		warning: "bg-warning",
+		neutral: "bg-base-400"
+	};
+	const heading = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StatusIndicator, { tone }), /* @__PURE__ */ jsx("span", {
+		className: "text-base-content min-w-0 flex-1 truncate",
+		title: label,
+		children: label
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full min-w-0",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid min-h-12 min-w-0 grid-cols-[minmax(0,1fr)_auto] content-center items-center gap-x-3 gap-y-1",
+				children: [
+					onDetails ? /* @__PURE__ */ jsxs(Button, {
+						variant: "status",
+						className: "w-full",
+						onClick: onDetails,
+						"aria-label": detailsLabel,
+						"aria-haspopup": "dialog",
+						children: [heading, /* @__PURE__ */ jsx(ChevronRightIcon, {})]
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "flex h-4 min-w-0 items-center gap-1.5 text-xs",
+						children: heading
+					}),
+					trailing ? /* @__PURE__ */ jsx("div", {
+						className: "col-start-2 row-span-3 row-start-1 shrink-0",
+						children: trailing
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: `text-2xs text-base-700 col-start-1 tabular-nums ${compact ? "truncate" : "break-words"}`,
+						title: detail,
+						children: detail || "\xA0"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "bg-base-300/70 col-start-1 h-1.5 overflow-hidden rounded-full",
+						role: active ? "progressbar" : void 0,
+						"aria-label": active ? progressLabel || detail || label : void 0,
+						"aria-valuenow": active && known ? known.value : void 0,
+						"aria-valuemin": active && known ? 0 : void 0,
+						"aria-valuemax": active && known ? known.max : void 0,
+						children: active ? /* @__PURE__ */ jsx("div", {
+							className: `h-full rounded-full ${colors[tone]} ${known ? "" : "lar-progress-indeterminate"}`,
+							style: known ? { width: `${Math.min(100, Math.max(0, known.value / known.max * 100))}%` } : void 0
+						}) : null
+					})
+				]
+			}),
+			issue ? /* @__PURE__ */ jsx("div", {
+				className: "text-2xs break-words text-(--lar-danger-text) tabular-nums",
+				children: issue
+			}) : null,
+			secondaryDetail ? /* @__PURE__ */ jsx("div", {
+				className: "text-2xs text-base-700 break-words tabular-nums",
+				children: secondaryDetail
+			}) : null
+		]
+	});
+}
+export { ProgressStatusRow };
+
+//# sourceMappingURL=ProgressStatusRow.js.map

package/dist/feedback/ProgressStatusRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressStatusRow.js","names":[],"sources":["../../src/feedback/ProgressStatusRow.tsx"],"sourcesContent":["import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { StatusIndicator, type StatusTone } from './StatusIndicator';\n\ninterface ProgressStatusRowProps {\n    active: boolean;\n    detail?: string;\n    secondaryDetail?: string;\n    issue?: string;\n    label: string;\n    progress?: { max: number; value: number };\n    tone?: StatusTone;\n    trailing?: ReactNode;\n    onDetails?: () => void;\n    detailsLabel?: string;\n    progressLabel?: string;\n    compact?: boolean;\n}\n\n/** Ledger rows reserve the count line and track so updates never displace controls. */\nexport function ProgressStatusRow({\n    active,\n    detail,\n    secondaryDetail,\n    issue,\n    label,\n    progress,\n    tone = 'info',\n    trailing,\n    onDetails,\n    detailsLabel,\n    progressLabel,\n    compact = false,\n}: ProgressStatusRowProps) {\n    const known = progress && progress.max > 0 ? progress : undefined;\n    const colors = {\n        info: 'bg-primary',\n        success: 'bg-success',\n        danger: 'bg-danger',\n        warning: 'bg-warning',\n        neutral: 'bg-base-400',\n    };\n    const heading = (\n        <>\n            <StatusIndicator tone={tone} />\n            <span className=\"text-base-content min-w-0 flex-1 truncate\" title={label}>\n                {label}\n            </span>\n        </>\n    );\n\n    return (\n        <div className=\"w-full min-w-0\">\n            <div className=\"grid min-h-12 min-w-0 grid-cols-[minmax(0,1fr)_auto] content-center items-center gap-x-3 gap-y-1\">\n                {onDetails ? (\n                    <Button\n                        variant=\"status\"\n                        className=\"w-full\"\n                        onClick={onDetails}\n                        aria-label={detailsLabel}\n                        aria-haspopup=\"dialog\"\n                    >\n                        {heading}\n                        <ChevronRightIcon />\n                    </Button>\n                ) : (\n                    <div className=\"flex h-4 min-w-0 items-center gap-1.5 text-xs\">{heading}</div>\n                )}\n                {trailing ? <div className=\"col-start-2 row-span-3 row-start-1 shrink-0\">{trailing}</div> : null}\n                <div\n                    className={`text-2xs text-base-700 col-start-1 tabular-nums ${compact ? 'truncate' : 'break-words'}`}\n                    title={detail}\n                >\n                    {detail || '\\u00a0'}\n                </div>\n                <div\n                    className=\"bg-base-300/70 col-start-1 h-1.5 overflow-hidden rounded-full\"\n                    role={active ? 'progressbar' : undefined}\n                    aria-label={active ? progressLabel || detail || label : undefined}\n                    aria-valuenow={active && known ? known.value : undefined}\n                    aria-valuemin={active && known ? 0 : undefined}\n                    aria-valuemax={active && known ? known.max : undefined}\n                >\n                    {active ? (\n                        <div\n                            className={`h-full rounded-full ${colors[tone]} ${known ? '' : 'lar-progress-indeterminate'}`}\n                            style={\n                                known\n                                    ? { width: `${Math.min(100, Math.max(0, (known.value / known.max) * 100))}%` }\n                                    : undefined\n                            }\n                        />\n                    ) : null}\n                </div>\n            </div>\n            {issue ? <div className=\"text-2xs break-words text-(--lar-danger-text) tabular-nums\">{issue}</div> : null}\n            {secondaryDetail ? (\n                <div className=\"text-2xs text-base-700 break-words tabular-nums\">{secondaryDetail}</div>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,kBAAkB,EAC9B,QACA,QACA,iBACA,OACA,OACA,UACA,OAAO,QACP,UACA,WACA,cACA,eACA,UAAU,SACa;CACvB,MAAM,QAAQ,YAAY,SAAS,MAAM,IAAI,WAAW,KAAA;CACxD,MAAM,SAAS;EACX,MAAM;EACN,SAAS;EACT,QAAQ;EACR,SAAS;EACT,SAAS;CACb;CACA,MAAM,UACF,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,iBAAD,EAAuB,KAAO,CAAA,GAC9B,oBAAC,QAAD;EAAM,WAAU;EAA4C,OAAO;EAC9D,UAAA;CACC,CAAA,CACR,EAAA,CAAA;CAGN,OACI,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACK,YACG,qBAAC,QAAD;MACI,SAAQ;MACR,WAAU;MACV,SAAS;MACT,cAAY;MACZ,iBAAc;MALlB,UAAA,CAOK,SACD,oBAAC,kBAAD,CAAmB,CAAA,CACf;KAER,CAAA,IAAA,oBAAC,OAAD;MAAK,WAAU;MAAiD,UAAA;KAAa,CAAA;KAEhF,WAAW,oBAAC,OAAD;MAAK,WAAU;MAA+C,UAAA;KAAc,CAAA,IAAI;KAC5F,oBAAC,OAAD;MACI,WAAW,mDAAmD,UAAU,aAAa;MACrF,OAAO;MAEN,UAAA,UAAU;KACV,CAAA;KACL,oBAAC,OAAD;MACI,WAAU;MACV,MAAM,SAAS,gBAAgB,KAAA;MAC/B,cAAY,SAAS,iBAAiB,UAAU,QAAQ,KAAA;MACxD,iBAAe,UAAU,QAAQ,MAAM,QAAQ,KAAA;MAC/C,iBAAe,UAAU,QAAQ,IAAI,KAAA;MACrC,iBAAe,UAAU,QAAQ,MAAM,MAAM,KAAA;MAE5C,UAAA,SACG,oBAAC,OAAD;OACI,WAAW,uBAAuB,OAAO,MAAM,GAAG,QAAQ,KAAK;OAC/D,OACI,QACM,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,MAAM,QAAQ,MAAM,MAAO,GAAG,CAAC,EAAE,GAAG,IAC3E,KAAA;MAEb,CAAA,IACD;KACH,CAAA;IACJ;;GACJ,QAAQ,oBAAC,OAAD;IAAK,WAAU;IAA8D,UAAA;GAAW,CAAA,IAAI;GACpG,kBACG,oBAAC,OAAD;IAAK,WAAU;IAAmD,UAAA;GAAqB,CAAA,IACvF;EACH;;AAEb"}

package/dist/feedback/SkeletonLoader.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+type SkeletonPresentation = 'artwork' | 'poster' | 'video' | 'card' | 'chart' | 'circle' | 'control' | 'heading' | 'line' | 'metric';
+type SkeletonWidth = 'action' | 'full' | 'medium' | 'short' | 'wide';
+interface SkeletonLoaderProps {
+  children: ReactNode;
+  label: string;
+  loading?: boolean;
+}
+declare function SkeletonLoaderRoot({ children, label, loading }: SkeletonLoaderProps): import("react").JSX.Element;
+interface SkeletonShapeProps {
+  presentation?: SkeletonPresentation;
+  width?: SkeletonWidth;
+}
+declare function SkeletonShape({ presentation, width }: SkeletonShapeProps): import("react").JSX.Element;
+export declare const SkeletonLoader: typeof SkeletonLoaderRoot & {
+  Shape: typeof SkeletonShape;
+};
+export {};
+//# sourceMappingURL=SkeletonLoader.d.ts.map