harebear-ui 0.5.0 → 0.7.0

package/dist/components/ai/conversation-list.js

@@ -1,19 +1,35 @@
 "use client";
+import { ConfirmDialog } from "../admin/confirm-dialog.js";
 import { StatusDot } from "../admin/status.js";
 import { Button } from "../ui/button.js";
 import { Empty, EmptyDescription } from "../ui/empty.js";
 import { useSidebarOptional } from "../ui/sidebar.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { cn } from "../../lib/utils.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, Trash2Icon } from "lucide-react";
 // src/components/ai/conversation-list.tsx
 /**
 * Grouped list of chat threads for a sidebar. Inside a Sidebar it closes the mobile sheet on select,
 * and hides itself when the sidebar is collapsed to its icon rail.
 */
-function ConversationList({ groups, activeId, onSelect, renderAction, empty = "No conversations yet", className, ...props }) {
+function ConversationList({ groups, activeId, onSelect, renderAction, onDelete, deleteDescription = "This cannot be undone.", empty = "No conversations yet", className, ...props }) {
 	const sidebar = useSidebarOptional();
+	const [confirm, setConfirm] = React.useState(null);
+	const [confirmOpen, setConfirmOpen] = React.useState(false);
+	const deleteButton = (c) => /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		"aria-label": `Delete ${c.title}`,
+		title: typeof c.deleteDisabled === "string" ? c.deleteDisabled : "Delete conversation",
+		disabled: !!c.deleteDisabled,
+		onClick: () => {
+			setConfirm(c);
+			setConfirmOpen(true);
+		},
+		children: /* @__PURE__ */ jsx(Trash2Icon, {})
+	});
 	const select = (id) => {
 		onSelect?.(id);
 		sidebar?.setOpenMobile(false);
@@ -24,43 +40,57 @@ function ConversationList({ groups, activeId, onSelect, renderAction, empty = "N
 		"aria-label": "Conversations",
 		className: cn("flex flex-col gap-4.5 group-data-[collapsible=icon]:hidden", className),
 		...props,
-		children: [visible.map((g) => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-0.5",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground",
-				children: g.label
-			}), g.items.map((c) => {
-				const active = c.id === activeId;
-				const action = renderAction?.(c);
-				return /* @__PURE__ */ jsxs("div", {
-					"data-slot": "conversation-item",
-					"data-active": active || void 0,
-					className: cn("group/conversation flex min-w-0 items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", active && "bg-card text-foreground shadow-card hover:bg-card"),
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						"aria-current": active ? "page" : void 0,
-						onClick: () => select(c.id),
-						className: cn("flex min-w-0 flex-1 flex-col rounded-md py-2.25 pl-3 text-left font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring/40", action ? "pr-1" : "pr-3"),
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: c.title
-						}), c.description !== void 0 && /* @__PURE__ */ jsxs("span", {
-							className: "flex min-w-0 items-center gap-1.5 text-xs font-normal text-muted-foreground tabular-nums",
-							children: [c.tone && /* @__PURE__ */ jsx(StatusDot, {
-								tone: c.tone,
-								pulse: c.pulse
-							}), /* @__PURE__ */ jsx("span", {
+		children: [
+			visible.map((g) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground",
+					children: g.label
+				}), g.items.map((c) => {
+					const active = c.id === activeId;
+					const action = renderAction ? renderAction(c) : onDelete ? deleteButton(c) : null;
+					return /* @__PURE__ */ jsxs("div", {
+						"data-slot": "conversation-item",
+						"data-active": active || void 0,
+						className: cn("group/conversation flex min-w-0 items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", active && "bg-card text-foreground shadow-card hover:bg-card"),
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-current": active ? "page" : void 0,
+							onClick: () => select(c.id),
+							className: cn("flex min-w-0 flex-1 flex-col rounded-md py-2.25 pl-3 text-left font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring/40", action ? "pr-1" : "pr-3"),
+							children: [/* @__PURE__ */ jsx("span", {
 								className: "truncate",
-								children: c.description
+								children: c.title
+							}), c.description !== void 0 && /* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 items-center gap-1.5 text-xs font-normal text-muted-foreground tabular-nums",
+								children: [c.tone && /* @__PURE__ */ jsx(StatusDot, {
+									tone: c.tone,
+									pulse: c.pulse
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: c.description
+								})]
 							})]
+						}), action && /* @__PURE__ */ jsx("div", {
+							className: "mr-1 flex shrink-0 items-center [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/conversation:opacity-100 [@media(hover:hover)]:group-focus-within/conversation:opacity-100",
+							children: action
 						})]
-					}), action && /* @__PURE__ */ jsx("div", {
-						className: "mr-1 flex shrink-0 items-center [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/conversation:opacity-100 [@media(hover:hover)]:group-focus-within/conversation:opacity-100",
-						children: action
-					})]
-				}, c.id);
-			})]
-		}, g.label)), !visible.length && empty && /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsx(EmptyDescription, { children: empty }) })]
+					}, c.id);
+				})]
+			}, g.label)),
+			!visible.length && empty && /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsx(EmptyDescription, { children: empty }) }),
+			onDelete && /* @__PURE__ */ jsx(ConfirmDialog, {
+				open: confirmOpen,
+				onOpenChange: setConfirmOpen,
+				title: `Delete “${confirm?.title ?? ""}”?`,
+				description: deleteDescription,
+				confirmLabel: "Delete",
+				destructive: true,
+				onConfirm: () => {
+					if (confirm) onDelete(confirm);
+				}
+			})
+		]
 	});
 }
 /**
@@ -101,6 +131,27 @@ function groupByDate(items, getDate, toConversation, now = Date.now()) {
 	return groups.filter((g) => g.items.length);
 }
 /**
+* Short timestamp for lists and headers: the time today ("9:41 AM"), the date this year ("Nov 3"), else with the
+* year ("Nov 3, 2025"). Uses the browser locale unless `locale` is given. Pass `now` for deterministic tests.
+*/
+function formatWhen(date, now = Date.now(), locale) {
+	const d = new Date(date);
+	const n = new Date(now);
+	if (d.toDateString() === n.toDateString()) return d.toLocaleTimeString(locale, {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+	if (d.getFullYear() === n.getFullYear()) return d.toLocaleDateString(locale, {
+		month: "short",
+		day: "numeric"
+	});
+	return d.toLocaleDateString(locale, {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+/**
 * Full-width "New conversation" button for a sidebar header. In the icon rail it shrinks to an icon with a
 * tooltip; on mobile it closes the sidebar sheet after the click.
 */
@@ -136,4 +187,4 @@ function NewConversationButton({ label = "New conversation", icon = /* @__PURE__
 		children: label
 	})] });
 }
-export { ConversationList, NewConversationButton, groupByDate };
+export { ConversationList, NewConversationButton, formatWhen, groupByDate };

package/dist/components/ai/model-picker.d.ts

@@ -7,6 +7,8 @@ export interface ModelOption {
   description?: React.ReactNode;
   /** Availability dot. Default "success". */
   status?: StatusTone;
+  /** Section heading in the menu, e.g. the provider. Models with the same group are listed together. */
+  group?: string;
 }
 export interface ModelPickerProps {
   models: ModelOption[];
@@ -16,6 +18,9 @@ export interface ModelPickerProps {
   className?: string;
   disabled?: boolean;
 }
-/** Pill button showing the active model with a status dot; opens a menu of models. */
+/**
+ * Pill button showing the active model with a status dot; opens a menu of models, sectioned by `group`.
+ * A `value` missing from `models` is still listed (and checked) at the top.
+ */
 declare function ModelPicker({ models, value, onValueChange, label, className, disabled }: ModelPickerProps): React.JSX.Element;
 export { ModelPicker };

package/dist/components/ai/model-picker.js

@@ -1,14 +1,27 @@
 "use client";
 import { StatusDot } from "../admin/status.js";
 import { Button } from "../ui/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
 // src/components/ai/model-picker.tsx
-/** Pill button showing the active model with a status dot; opens a menu of models. */
+/**
+* Pill button showing the active model with a status dot; opens a menu of models, sectioned by `group`.
+* A `value` missing from `models` is still listed (and checked) at the top.
+*/
 function ModelPicker({ models, value, onValueChange, label = "Model", className, disabled }) {
 	const current = models.find((m) => m.id === value);
+	const all = current || !value ? models : [{ id: value }, ...models];
+	const groups = [];
+	for (const m of all) {
+		const g = groups.find((x) => x.name === m.group);
+		if (g) g.items.push(m);
+		else groups.push({
+			name: m.group,
+			items: [m]
+		});
+	}
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 		asChild: true,
 		disabled,
@@ -29,27 +42,34 @@ function ModelPicker({ models, value, onValueChange, label = "Model", className,
 	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
 		align: "end",
 		className: "min-w-56",
-		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), models.map((m) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			onSelect: () => onValueChange(m.id),
-			className: "items-start gap-2.5",
-			children: [
-				/* @__PURE__ */ jsx(StatusDot, {
-					tone: m.status ?? "success",
-					className: "mt-1.5"
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-mono text-xs",
-						children: m.label ?? m.id
-					}), m.description && /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-muted-foreground",
-						children: m.description
-					})]
-				}),
-				m.id === value && /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5" })
-			]
-		}, m.id))]
+		children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), groups.map((g, i) => /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+			i > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			g.name && /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-xs font-medium text-muted-foreground",
+				children: g.name
+			}),
+			g.items.map((m) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onSelect: () => onValueChange(m.id),
+				className: "items-start gap-2.5",
+				children: [
+					/* @__PURE__ */ jsx(StatusDot, {
+						tone: m.status ?? "success",
+						className: "mt-1.5"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-xs",
+							children: m.label ?? m.id
+						}), m.description && /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: m.description
+						})]
+					}),
+					m.id === value && /* @__PURE__ */ jsx(CheckIcon, { className: "mt-0.5" })
+				]
+			}, m.id))
+		] }, g.name ?? `group-${i}`))]
 	})] });
 }
 export { ModelPicker };

package/dist/components/layout/media-item.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface MediaItemProps extends Omit<React.ComponentProps<"div">, "title"> {
+  title: React.ReactNode;
+  /** Opens in a new tab. */
+  href?: string;
+  image?: string;
+  imageShape?: "poster" | "square" | "wide";
+  meta?: React.ReactNode;
+  description?: React.ReactNode;
+}
+/** Thumbnail, title, a meta line and a two-line description. For media, articles, releases. */
+declare function MediaItem({ title, href, image, imageShape, meta, description, className, ...props }: MediaItemProps): React.JSX.Element;
+export { MediaItem };

package/dist/components/layout/media-item.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/media-item.tsx
+const shapeClass = {
+	poster: "aspect-[2/3] w-14",
+	square: "aspect-square w-12",
+	wide: "aspect-video w-24"
+};
+/** Thumbnail, title, a meta line and a two-line description. For media, articles, releases. */
+function MediaItem({ title, href, image, imageShape = "poster", meta, description, className, ...props }) {
+	const img = image ? /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		loading: "lazy",
+		className: cn("shrink-0 rounded-md bg-muted object-cover", shapeClass[imageShape])
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "media-item",
+		className: cn("flex min-w-0 items-start gap-3", className),
+		...props,
+		children: [img && href ? /* @__PURE__ */ jsx("a", {
+			href,
+			target: "_blank",
+			rel: "noreferrer",
+			tabIndex: -1,
+			className: "shrink-0",
+			children: img
+		}) : img, /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "line-clamp-2 font-medium",
+					children: href ? /* @__PURE__ */ jsx("a", {
+						href,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "outline-none hover:underline focus-visible:underline",
+						children: title
+					}) : title
+				}),
+				meta && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: meta
+				}),
+				description && /* @__PURE__ */ jsx("span", {
+					className: "line-clamp-2 text-[13px] text-muted-foreground",
+					children: description
+				})
+			]
+		})]
+	});
+}
+export { MediaItem };

package/dist/components/layout/metric.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface MetricProps extends Omit<React.ComponentProps<"div">, "children"> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  unit?: React.ReactNode;
+  /** Percent change. Positive reads as good unless `lowerIsBetter`. */
+  delta?: number;
+  lowerIsBetter?: boolean;
+  align?: "start" | "center";
+}
+/** A number with a unit, a label under it, and an optional percent change over it. */
+declare function Metric({ label, value, unit, delta, lowerIsBetter, align, className, ...props }: MetricProps): React.JSX.Element;
+/** Metrics side by side, evenly spaced. */
+declare function MetricGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Metric, MetricGroup };

package/dist/components/layout/metric.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownRightIcon, ArrowUpRightIcon } from "lucide-react";
+// src/components/layout/metric.tsx
+/** A number with a unit, a label under it, and an optional percent change over it. */
+function Metric({ label, value, unit, delta, lowerIsBetter, align = "center", className, ...props }) {
+	const good = delta === void 0 || delta === 0 ? void 0 : lowerIsBetter ? delta < 0 : delta > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "metric",
+		className: cn("flex min-w-0 flex-col gap-0.5", align === "center" ? "items-center text-center" : "items-start", className),
+		...props,
+		children: [
+			delta !== void 0 && Number.isFinite(delta) && /* @__PURE__ */ jsxs("span", {
+				className: cn("inline-flex items-center gap-0.5 text-xs font-medium tabular-nums", good === void 0 ? "text-muted-foreground" : good ? "text-success" : "text-destructive"),
+				children: [
+					delta > 0 ? "+" : "",
+					delta.toFixed(1),
+					"%",
+					delta > 0 ? /* @__PURE__ */ jsx(ArrowUpRightIcon, {
+						"aria-hidden": true,
+						className: "size-3.5"
+					}) : delta < 0 ? /* @__PURE__ */ jsx(ArrowDownRightIcon, {
+						"aria-hidden": true,
+						className: "size-3.5"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-xl font-semibold tracking-tight whitespace-nowrap tabular-nums @sm:text-2xl",
+				children: [value, unit && /* @__PURE__ */ jsx("span", {
+					className: "ml-0.5 text-xs font-medium text-muted-foreground",
+					children: unit
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+				children: label
+			})
+		]
+	});
+}
+/** Metrics side by side, evenly spaced. */
+function MetricGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "metric-group",
+		className: cn("grid auto-cols-fr grid-flow-col gap-2", className),
+		...props
+	});
+}
+export { Metric, MetricGroup };

package/dist/components/layout/show-more.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+declare const gapClass: {
+  readonly none: "gap-0";
+  readonly xs: "gap-1";
+  readonly sm: "gap-2";
+  readonly md: "gap-3";
+  readonly lg: "gap-4";
+  readonly xl: "gap-6";
+};
+export interface ShowMoreProps extends React.ComponentProps<"div"> {
+  /** Children shown before the "Show N more" button. Default 5. */
+  initial?: number;
+  gap?: keyof typeof gapClass;
+}
+/** A list that collapses after `initial` children, with a button to show the rest. */
+declare function ShowMore({ initial, gap, className, children, ...props }: ShowMoreProps): React.JSX.Element;
+export { ShowMore };

package/dist/components/layout/show-more.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/layout/show-more.tsx
+const gapClass = {
+	none: "gap-0",
+	xs: "gap-1",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+	xl: "gap-6"
+};
+/** A list that collapses after `initial` children, with a button to show the rest. */
+function ShowMore({ initial = 5, gap = "md", className, children, ...props }) {
+	const [open, setOpen] = React.useState(false);
+	const all = React.Children.toArray(children);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "show-more",
+		className: cn("flex min-w-0 flex-col", gapClass[gap], className),
+		...props,
+		children: [open ? all : all.slice(0, initial), all.length > initial && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setOpen(!open),
+			className: "self-start rounded-md text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-4 focus-visible:ring-ring/20",
+			children: open ? "Show less" : `Show ${all.length - initial} more`
+		})]
+	});
+}
+export { ShowMore };

package/dist/components/layout/stack.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type StackSpace = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type StackJustify = "start" | "center" | "end" | "between";
+export interface StackProps extends React.ComponentProps<"div"> {
+  gap?: StackSpace;
+  align?: StackAlign;
+}
+/** Vertical stack with a named gap. */
+declare function Stack({ gap, align, className, ...props }: StackProps): React.JSX.Element;
+export interface RowProps extends React.ComponentProps<"div"> {
+  gap?: StackSpace;
+  align?: StackAlign;
+  justify?: StackJustify;
+  wrap?: boolean;
+}
+/** Horizontal row with a named gap. */
+declare function Row({ gap, align, justify, wrap, className, ...props }: RowProps): React.JSX.Element;
+export type GridCols = 1 | 2 | 3 | 4 | 5 | 6;
+export type ResponsiveGridCols = GridCols | {
+  base?: GridCols;
+  sm?: GridCols;
+  md?: GridCols;
+  lg?: GridCols;
+};
+export interface GridProps extends React.ComponentProps<"div"> {
+  /** Equal columns: a number, or per breakpoint `{ base: 1, sm: 2, md: 3 }`. */
+  cols?: ResponsiveGridCols;
+  gap?: StackSpace;
+  /**
+   * What sm/md/lg measure. "viewport" (default): the screen, Tailwind's sm/md/lg.
+   * "container": the nearest `@container` ancestor (sm >= 28rem, md >= 42rem, lg >= 56rem),
+   * for blocks that sit in cards of any width.
+   */
+  query?: "viewport" | "container";
+}
+/** Grid of equal columns with named gaps and per-breakpoint column counts. */
+declare function Grid({ cols: c, gap, query, className, ...props }: GridProps): React.JSX.Element;
+export { Grid, Row, Stack };

package/dist/components/layout/stack.js

@@ -0,0 +1,114 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/stack.tsx
+const gapClass = {
+	none: "gap-0",
+	xs: "gap-1",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+	xl: "gap-6"
+};
+const alignClass = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+};
+const justifyClass = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+/** Vertical stack with a named gap. */
+function Stack({ gap = "md", align = "stretch", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stack",
+		className: cn("flex min-w-0 flex-col", gapClass[gap], alignClass[align], className),
+		...props
+	});
+}
+/** Horizontal row with a named gap. */
+function Row({ gap = "sm", align = "center", justify = "start", wrap, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "row",
+		className: cn("flex min-w-0", gapClass[gap], alignClass[align], justifyClass[justify], wrap && "flex-wrap", className),
+		...props
+	});
+}
+const cols = {
+	base: {
+		1: "grid-cols-1",
+		2: "grid-cols-2",
+		3: "grid-cols-3",
+		4: "grid-cols-4",
+		5: "grid-cols-5",
+		6: "grid-cols-6"
+	},
+	viewport: {
+		sm: {
+			1: "sm:grid-cols-1",
+			2: "sm:grid-cols-2",
+			3: "sm:grid-cols-3",
+			4: "sm:grid-cols-4",
+			5: "sm:grid-cols-5",
+			6: "sm:grid-cols-6"
+		},
+		md: {
+			1: "md:grid-cols-1",
+			2: "md:grid-cols-2",
+			3: "md:grid-cols-3",
+			4: "md:grid-cols-4",
+			5: "md:grid-cols-5",
+			6: "md:grid-cols-6"
+		},
+		lg: {
+			1: "lg:grid-cols-1",
+			2: "lg:grid-cols-2",
+			3: "lg:grid-cols-3",
+			4: "lg:grid-cols-4",
+			5: "lg:grid-cols-5",
+			6: "lg:grid-cols-6"
+		}
+	},
+	container: {
+		sm: {
+			1: "@md:grid-cols-1",
+			2: "@md:grid-cols-2",
+			3: "@md:grid-cols-3",
+			4: "@md:grid-cols-4",
+			5: "@md:grid-cols-5",
+			6: "@md:grid-cols-6"
+		},
+		md: {
+			1: "@2xl:grid-cols-1",
+			2: "@2xl:grid-cols-2",
+			3: "@2xl:grid-cols-3",
+			4: "@2xl:grid-cols-4",
+			5: "@2xl:grid-cols-5",
+			6: "@2xl:grid-cols-6"
+		},
+		lg: {
+			1: "@4xl:grid-cols-1",
+			2: "@4xl:grid-cols-2",
+			3: "@4xl:grid-cols-3",
+			4: "@4xl:grid-cols-4",
+			5: "@4xl:grid-cols-5",
+			6: "@4xl:grid-cols-6"
+		}
+	}
+};
+/** Grid of equal columns with named gaps and per-breakpoint column counts. */
+function Grid({ cols: c = 2, gap = "md", query = "viewport", className, ...props }) {
+	const r = typeof c === "number" ? { base: c } : c;
+	const q = cols[query];
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "grid",
+		className: cn("grid min-w-0", gapClass[gap], cols.base[r.base ?? 1], r.sm && q.sm[r.sm], r.md && q.md[r.md], r.lg && q.lg[r.lg], className),
+		...props
+	});
+}
+export { Grid, Row, Stack };

package/dist/components/layout/text.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type TextTone = "default" | "muted" | "success" | "warning" | "danger" | "info";
+declare const sizeClass: {
+  readonly xs: "text-xs";
+  readonly sm: "text-[13px]";
+  readonly base: "text-sm";
+  readonly lg: "text-base";
+  readonly xl: "text-xl";
+  readonly "2xl": "text-2xl";
+};
+declare const weightClass: {
+  readonly normal: "font-normal";
+  readonly medium: "font-medium";
+  readonly semibold: "font-semibold";
+};
+export interface TextProps extends Omit<React.ComponentProps<"span">, "ref"> {
+  size?: keyof typeof sizeClass;
+  tone?: TextTone;
+  weight?: keyof typeof weightClass;
+  mono?: boolean;
+  /** One line with an ellipsis. */
+  truncate?: boolean;
+  /** Clamp to this many lines. */
+  lines?: 1 | 2 | 3;
+  /** Fixed-width digits for numbers that update. */
+  tabular?: boolean;
+  as?: "span" | "p" | "div";
+}
+/** Text with props instead of classes: size, tone, weight, mono, truncate, lines. */
+declare function Text({ size, tone, weight, mono, truncate, lines, tabular, as: As, className, ...props }: TextProps): React.JSX.Element;
+export interface HeadingProps extends React.ComponentProps<"h3"> {
+  /** 3: a section title in a card. 4: a small uppercase label over a group. */
+  level?: 3 | 4;
+}
+/** Section heading inside a card or panel. */
+declare function Heading({ level, className, ...props }: HeadingProps): React.JSX.Element;
+export { Heading, Text };