@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/ui/display.d.ts

@@ -0,0 +1,163 @@
+import * as React from "react";
+declare const badgeTones: {
+    neutral: string;
+    outline: string;
+    accent: string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    ink: string;
+};
+declare const badgeSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export type BadgeTone = keyof typeof badgeTones;
+export type BadgeSize = keyof typeof badgeSizes;
+export declare function badgeVariants({ tone, size }?: {
+    tone?: BadgeTone | null;
+    size?: BadgeSize | null;
+}): string;
+export declare function Badge({ className, tone, size, dot, children, ...props }: React.HTMLAttributes<HTMLSpanElement> & {
+    tone?: BadgeTone | null;
+    size?: BadgeSize | null;
+    dot?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export type PublishStatus = "published" | "draft" | "changed" | "held" | "scheduled" | "review" | "archived" | "error" | "building" | "live" | "offline";
+export declare const statusMap: Record<PublishStatus, {
+    label: string;
+    tone: BadgeTone;
+}>;
+export declare function StatusPill({ status, label, tone, className, size, }: {
+    status: PublishStatus;
+    label?: string;
+    /** Transition prop: live-preview's pre-D72 `pageStatus.ts` keeps its "Edited" amber pill. Remove when it adopts D72. */
+    tone?: BadgeTone;
+    className?: string;
+    size?: BadgeSize;
+}): import("react/jsx-runtime").JSX.Element;
+export type MarkStatus = "published" | "changed" | "held" | "draft" | "scheduled" | "review" | "archived";
+export declare function StatusMark({ status, at, className }: {
+    status: MarkStatus;
+    at?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
+export declare function colorFor(seed: string): string;
+export declare function initials(name: string): string;
+/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */
+export declare function avatarRingSpread({ ring, ringWidth, ringAccent }: {
+    ring?: string;
+    ringWidth?: number;
+    ringAccent?: string;
+}): number;
+export declare function Avatar({ name, src, size, className, ring, ringWidth, ringAccent, square, status, decorative, }: {
+    name: string;
+    /** a11y: true when the person's name is already shown as text next to the avatar */
+    decorative?: boolean;
+    src?: string;
+    size?: number;
+    className?: string;
+    /** separating ring colour, drawn as box-shadow so the image keeps its full size (D34) */
+    ring?: string;
+    ringWidth?: number;
+    /** optional 1px outer ring outside `ring` (e.g. a presence colour) */
+    ringAccent?: string;
+    square?: boolean;
+    status?: "online" | "away" | "offline";
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack
+ * sits on; first face on top; a +N pill names the rest on hover.
+ */
+export declare function AvatarStack({ people, max, size, ringColor, className, label, }: {
+    people: {
+        name: string;
+        src?: string;
+        color?: string;
+    }[];
+    max?: number;
+    size?: number;
+    ringColor?: string;
+    className?: string;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ className, interactive, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    interactive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader({ title, description, actions, icon, className, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Separator({ vertical, className }: {
+    vertical?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
+export declare function Skeleton({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyState({ icon, title, description, actions, className, compact, }: {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+    compact?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader({ title, description, actions, meta, className, eyebrow, as: Heading, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    meta?: React.ReactNode;
+    className?: string;
+    eyebrow?: React.ReactNode;
+    /** Heading level: h1 in the app; demos nested in documentation pass a lower level. */
+    as?: "h1" | "h2" | "h3" | "h4";
+}): import("react/jsx-runtime").JSX.Element;
+/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */
+export declare function SettingsSection({ title, description, children, footer, className, danger, actions, }: {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    danger?: boolean;
+    actions?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Stat({ label, value, delta, hint, className, }: {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    delta?: {
+        value: string;
+        positive?: boolean;
+    };
+    hint?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Th({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Td({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+export declare function Tr({ className, selected, ...props }: React.HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const dotTones: {
+    success: string;
+    warning: string;
+    danger: string;
+    neutral: string;
+    accent: string;
+    info: string;
+};
+export declare function Dot({ tone, pulse, className }: {
+    tone?: keyof typeof dotTones;
+    pulse?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/display.js

@@ -0,0 +1,455 @@
+import { cn } from "../lib/cn.js";
+import { HintTooltip } from "./button.js";
+import { Tooltip } from "./overlay.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconClock } from "@tabler/icons-react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/ui/display.tsx
+var badgeTones = {
+	neutral: "bg-kit-muted text-kit-fg-2",
+	outline: "border border-kit-line bg-kit-control-bg text-kit-fg-2",
+	accent: "bg-kit-accent-soft text-kit-accent-fg",
+	success: "bg-kit-success-soft text-kit-success-fg",
+	warning: "bg-kit-warning-soft text-kit-warning-fg",
+	danger: "bg-kit-danger-soft text-kit-danger-fg",
+	info: "bg-kit-info-soft text-kit-info-fg",
+	ink: "bg-[var(--kit-chip-ink-bg)] text-[var(--kit-chip-ink-fg)]"
+};
+var badgeSizes = {
+	sm: "h-[18px] px-1.5 text-kit-2xs",
+	md: "h-5 px-1.5 text-kit-xs",
+	lg: "h-6 px-2 text-kit-xs"
+};
+function badgeVariants({ tone, size } = {}) {
+	return cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium transition-colors duration-150 ease-out [&_svg]:size-3", badgeTones[tone ?? "neutral"], badgeSizes[size ?? "md"]);
+}
+function Badge({ className, tone, size, dot, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(badgeVariants({
+			tone,
+			size
+		}), className),
+		...props,
+		children: [dot ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-1.5 rounded-full bg-current"
+		}) : null, children]
+	});
+}
+var statusMap = {
+	published: {
+		label: "Published",
+		tone: "success"
+	},
+	live: {
+		label: "Live",
+		tone: "success"
+	},
+	draft: {
+		label: "Draft",
+		tone: "neutral"
+	},
+	/** D72: still Published; unpublished changes are a fact about it (StatusMark's amber dot), never a status of their own. */
+	changed: {
+		label: "Published",
+		tone: "success"
+	},
+	/** D53: live, with changes kept as draft (left out of whole-site publishes). */
+	held: {
+		label: "Published",
+		tone: "success"
+	},
+	scheduled: {
+		label: "Scheduled",
+		tone: "info"
+	},
+	review: {
+		label: "In review",
+		tone: "info"
+	},
+	archived: {
+		label: "Archived",
+		tone: "outline"
+	},
+	error: {
+		label: "Failed",
+		tone: "danger"
+	},
+	building: {
+		label: "Building",
+		tone: "info"
+	},
+	offline: {
+		label: "Offline",
+		tone: "neutral"
+	}
+};
+function StatusPill({ status, label, tone, className, size = "md" }) {
+	const s = statusMap[status];
+	return /* @__PURE__ */ jsxs(Badge, {
+		tone: tone ?? s.tone,
+		size,
+		className,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-pulse": status === "building" || status === "live" ? "" : void 0,
+			className: cn("size-1.5 rounded-full bg-current", (status === "building" || status === "live") && "animate-kit-pulse-dot")
+		}), label ?? s.label]
+	});
+}
+var shortDate = (iso) => new Date(iso).toLocaleDateString("en-GB", {
+	day: "numeric",
+	month: "short"
+});
+function StatusMark({ status, at, className }) {
+	const label = `${status === "changed" || status === "held" ? "Published, with unpublished changes" : statusMap[status].label}${at ? ` · Edited ${shortDate(at)}` : ""}`;
+	const mark = status === "published" ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-kit-success" }) : status === "changed" || status === "held" ? /* @__PURE__ */ jsx("span", {
+		className: "relative size-2 rounded-full bg-kit-success",
+		children: /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface" })
+	}) : status === "scheduled" ? /* @__PURE__ */ jsx(IconClock, {
+		className: "size-3 text-kit-info-fg",
+		stroke: 2
+	}) : status === "review" ? /* @__PURE__ */ jsx("span", { className: "size-[7px] rotate-45 rounded-[1px] bg-kit-info" }) : status === "archived" ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-kit-xs border border-kit-fg-4" }) : /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full border-[1.5px] border-kit-fg-4" });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": label,
+			className: cn("flex size-4 shrink-0 items-center justify-center", className),
+			children: mark
+		})
+	});
+}
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-kit-sm border border-[var(--kit-kbd-line)] bg-[var(--kit-kbd)] px-1 font-kit-sans text-kit-2xs font-medium text-kit-fg-2 shadow-[inset_0_-1px_0_var(--kit-kbd-line)]", className),
+		...props
+	});
+}
+var avatarPalette = [
+	"#c2410c",
+	"#be185d",
+	"#7e22ce",
+	"#4338ca",
+	"#1d4ed8",
+	"#047857",
+	"#b45309",
+	"#0369a1",
+	"#a21caf",
+	"#6d28d9"
+].map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);
+/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
+function colorFor(seed) {
+	let h = 0;
+	for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
+	return avatarPalette[h % avatarPalette.length];
+}
+function initials(name) {
+	return name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+}
+/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */
+function avatarRingSpread({ ring, ringWidth = 2, ringAccent }) {
+	return ring ? ringWidth + (ringAccent ? 1 : 0) : 0;
+}
+function Avatar({ name, src, size = 24, className, ring, ringWidth = 2, ringAccent, square, status, decorative }) {
+	const spread = avatarRingSpread({
+		ring,
+		ringWidth,
+		ringAccent
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex shrink-0",
+		style: spread ? { padding: spread } : void 0,
+		children: [/* @__PURE__ */ jsxs(Avatar$1.Root, {
+			style: {
+				width: size,
+				height: size,
+				boxShadow: ring ? `0 0 0 ${ringWidth}px ${ring}${ringAccent ? `, 0 0 0 ${ringWidth + 1}px ${ringAccent}` : ""}` : void 0
+			},
+			className: cn("inline-flex select-none items-center justify-center overflow-hidden bg-kit-muted", square ? "rounded-kit-md" : "rounded-full", className),
+			children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {
+				src,
+				alt: decorative ? "" : name,
+				className: "size-full object-cover"
+			}) : null, /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+				delay: src ? 300 : void 0,
+				"aria-hidden": decorative || void 0,
+				style: {
+					background: colorFor(name),
+					fontSize: Math.max(9, Math.round(size * .4))
+				},
+				className: "flex size-full items-center justify-center font-semibold text-kit-avatar-on",
+				children: initials(name)
+			})]
+		}), status ? /* @__PURE__ */ jsx("span", {
+			style: spread ? {
+				right: spread,
+				bottom: spread
+			} : void 0,
+			className: cn("absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-kit-surface", status === "online" ? "bg-kit-success" : status === "away" ? "bg-kit-warning" : "bg-kit-fg-4")
+		}) : null]
+	});
+}
+/**
+* AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack
+* sits on; first face on top; a +N pill names the rest on hover.
+*/
+function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar-ring)", className, label }) {
+	const shown = people.slice(0, max);
+	const hidden = people.slice(shown.length);
+	const step = Math.round(size * .25);
+	const band = avatarRingSpread({ ring: ringColor });
+	const box = size + band * 2;
+	const vars = {
+		"--stack-ov": `-${step + band * 2}px`,
+		"--stack-ov-open": `-${Math.max(1, Math.round(step * .35)) + band * 2}px`
+	};
+	const slot = "relative inline-flex shrink-0 rounded-full transition-[margin,transform] duration-150 ease-out [&:not(:first-child)]:ml-[var(--stack-ov)] group-hover/stack:[&:not(:first-child)]:ml-[var(--stack-ov-open)] hover:!z-30 hover:-translate-y-0.5 motion-reduce:transition-none";
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": label ?? `${people.length} ${people.length === 1 ? "person" : "people"}: ${people.map((p) => p.name).join(", ")}`,
+		style: vars,
+		className: cn("group/stack isolate flex shrink-0 items-center", className),
+		children: [shown.map((p, i) => /* @__PURE__ */ jsx(HintTooltip, {
+			content: p.name,
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					zIndex: shown.length - i + 1,
+					width: box,
+					height: box
+				},
+				className: slot,
+				children: /* @__PURE__ */ jsx(Avatar, {
+					name: p.name,
+					src: p.src,
+					size,
+					ring: ringColor,
+					decorative: true
+				})
+			})
+		}, p.name + i)), hidden.length ? /* @__PURE__ */ jsx(HintTooltip, {
+			content: hidden.map((p) => p.name).join(", "),
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					zIndex: 1,
+					width: box,
+					height: box,
+					padding: band
+				},
+				className: slot,
+				children: /* @__PURE__ */ jsxs("span", {
+					style: {
+						width: size,
+						height: size,
+						boxShadow: `0 0 0 ${band}px ${ringColor}`,
+						fontSize: Math.max(9, Math.round(size * .38))
+					},
+					className: "inline-flex items-center justify-center rounded-full bg-kit-muted font-medium leading-none tabular-nums text-kit-fg-2",
+					children: ["+", hidden.length]
+				})
+			})
+		}) : null]
+	});
+}
+function Card({ className, interactive, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-kit-xl border border-kit-line bg-kit-surface", interactive && "cursor-pointer transition-[border-color,box-shadow,transform] duration-150 hover:border-kit-line-strong hover:shadow-kit-md", className),
+		...props
+	});
+}
+function CardHeader({ title, description, actions, icon, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start justify-between gap-3 px-4 pt-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-start gap-2.5",
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 flex text-kit-fg-2 [&_svg]:size-4",
+				children: icon
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-kit-base font-semibold text-kit-fg",
+					children: title
+				}), description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null]
+			})]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-1.5",
+			children: actions
+		}) : null]
+	});
+}
+function Separator({ vertical, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": vertical ? "vertical" : void 0,
+		className: cn(vertical ? "h-4 w-px bg-kit-line" : "h-px w-full bg-kit-line", className)
+	});
+}
+/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
+function Skeleton({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("skeleton rounded-kit-md", className)
+	});
+}
+function EmptyState({ icon, title, description, actions, className, compact }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center text-center", compact ? "gap-2 py-8" : "gap-2.5 py-12", className),
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "flex text-kit-fg-3 [&_svg]:size-4",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-w-sm",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-kit-base font-medium text-kit-fg",
+					children: title
+				}), description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null]
+			}),
+			actions ? /* @__PURE__ */ jsx("div", {
+				className: "mt-1 flex flex-wrap items-center justify-center gap-2",
+				children: actions
+			}) : null
+		]
+	});
+}
+function PageHeader({ title, description, actions, meta, className, eyebrow, as: Heading = "h1" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-end justify-between gap-x-6 gap-y-3", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [
+				eyebrow ? /* @__PURE__ */ jsx("div", {
+					className: "mb-1.5 text-kit-xs font-medium text-kit-fg-3",
+					children: eyebrow
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2.5",
+					children: [/* @__PURE__ */ jsx(Heading, {
+						className: "truncate text-kit-xl font-semibold tracking-[-0.015em] text-kit-fg",
+						children: title
+					}), meta]
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null
+			]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 flex-wrap items-center gap-2",
+			children: actions
+		}) : null]
+	});
+}
+/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */
+function SettingsSection({ title, description, children, footer, className, danger, actions }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("overflow-hidden rounded-kit-xl border bg-kit-surface", danger ? "border-kit-danger-line" : "border-kit-line", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4 px-5 pt-5",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: cn("text-kit-base font-semibold", danger ? "text-kit-danger-fg" : "text-kit-fg"),
+					children: title
+				}), description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 max-w-xl text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null] }), actions]
+			}),
+			children ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-4 px-5 pb-5 pt-4",
+				children
+			}) : /* @__PURE__ */ jsx("div", { className: "h-5" }),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between gap-3 border-t border-kit-line bg-[var(--kit-subtle-2)] px-5 py-3 text-kit-sm text-kit-fg-2",
+				children: footer
+			}) : null
+		]
+	});
+}
+function Stat({ label, value, delta, hint, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-kit-sm text-kit-fg-2",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xl font-semibold tabular-nums tracking-[-0.01em] text-kit-fg",
+					children: value
+				}), delta ? /* @__PURE__ */ jsxs("span", {
+					className: cn("text-kit-xs font-medium tabular-nums", delta.positive ? "text-kit-success-fg" : "text-kit-danger-fg"),
+					children: [
+						delta.positive ? "↑" : "↓",
+						" ",
+						delta.value
+					]
+				}) : null]
+			}),
+			hint ? /* @__PURE__ */ jsx("span", {
+				className: "text-kit-xs text-kit-fg-3",
+				children: hint
+			}) : null
+		]
+	});
+}
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("table", {
+		className: cn("w-full border-separate border-spacing-0 text-kit-sm", className),
+		...props
+	});
+}
+function Th({ className, children, ...props }) {
+	const empty = children == null || children === false || children === "";
+	return /* @__PURE__ */ jsx("th", {
+		className: cn("sticky top-0 z-[1] h-10 border-b border-kit-line bg-kit-surface px-3 text-left text-kit-sm font-normal text-kit-fg-3 first:pl-4 last:pr-4", className),
+		...props,
+		children: empty ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: props["aria-label"] ?? "Actions"
+		}) : children
+	});
+}
+function Td({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("h-14 border-b border-kit-line-subtle px-3 text-kit-fg first:pl-4 last:pr-4", className),
+		...props
+	});
+}
+function Tr({ className, selected, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-selected": selected ? "true" : void 0,
+		className: cn("group/row transition-colors hover:bg-kit-subtle data-[selected=true]:bg-kit-accent-softer", className),
+		...props
+	});
+}
+var dotTones = {
+	success: "bg-kit-success",
+	warning: "bg-kit-warning",
+	danger: "bg-kit-danger",
+	neutral: "bg-kit-fg-4",
+	accent: "bg-kit-accent",
+	info: "bg-kit-info"
+};
+function Dot({ tone = "success", pulse, className }) {
+	const c = dotTones[tone];
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative inline-flex size-2 shrink-0", className),
+		children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-50", c) }) : null, /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", c) })]
+	});
+}
+//#endregion
+export { Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, Separator, SettingsSection, Skeleton, Stat, StatusMark, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap };
+
+//# sourceMappingURL=display.js.map