harebear-ui 0.6.0 → 0.8.0

package/dist/components/ai/dictation.js

@@ -0,0 +1,148 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, MicIcon } from "lucide-react";
+// src/components/ai/dictation.tsx
+function recognitionCtor() {
+	if (typeof window === "undefined") return void 0;
+	const w = window;
+	return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+}
+/** SpeechSource on the browser's SpeechRecognition API. Unsupported (Firefox, most WebViews) means no mic button. */
+const browserSpeechSource = {
+	isSupported: () => recognitionCtor() !== void 0,
+	start(handlers, { lang }) {
+		const Ctor = recognitionCtor();
+		if (!Ctor) {
+			handlers.onError("not-supported");
+			handlers.onEnd();
+			return () => {};
+		}
+		const rec = new Ctor();
+		if (lang) rec.lang = lang;
+		rec.interimResults = true;
+		rec.continuous = false;
+		rec.onresult = (e) => {
+			for (let i = e.resultIndex; i < e.results.length; i++) {
+				const r = e.results[i];
+				if (r) handlers.onResult(r[0].transcript, r.isFinal);
+			}
+		};
+		rec.onerror = (e) => handlers.onError(e.error);
+		rec.onend = () => handlers.onEnd();
+		rec.start();
+		return () => rec.stop();
+	}
+};
+const noopSubscribe = () => () => {};
+/** Dictation state for a custom control: `{ supported, listening, interim, error, start, stop }`. */
+function useDictation({ source = browserSpeechSource, lang, onTranscript }) {
+	const supported = React.useSyncExternalStore(noopSubscribe, source.isSupported, () => false);
+	const [listening, setListening] = React.useState(false);
+	const [interim, setInterim] = React.useState("");
+	const [error, setError] = React.useState(null);
+	const stopRef = React.useRef(null);
+	const onTranscriptRef = React.useRef(onTranscript);
+	onTranscriptRef.current = onTranscript;
+	const stop = React.useCallback(() => {
+		stopRef.current?.();
+	}, []);
+	const start = React.useCallback(() => {
+		if (stopRef.current) return;
+		setError(null);
+		setInterim("");
+		setListening(true);
+		stopRef.current = source.start({
+			onResult: (text, final) => {
+				if (final) {
+					setInterim("");
+					onTranscriptRef.current(text.trim());
+				} else setInterim(text);
+			},
+			onError: (e) => setError(e),
+			onEnd: () => {
+				stopRef.current = null;
+				setInterim("");
+				setListening(false);
+			}
+		}, { lang });
+	}, [source, lang]);
+	React.useEffect(() => () => stopRef.current?.(), []);
+	return {
+		supported,
+		listening,
+		interim,
+		error,
+		start,
+		stop
+	};
+}
+/**
+* One round button for a composer: a mic when empty, stop (with listening bars) while listening, send once there is
+* text. Announces "Listening" in a polite live region. Without a supported speech source the mic is hidden and the
+* button is just send.
+*/
+function DictationButton({ value, onTranscript, onSend, source, lang, disabled, sendLabel = "Send message", className, ...props }) {
+	const d = useDictation({
+		source,
+		lang,
+		onTranscript
+	});
+	const hasText = value.trim().length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dictation-button",
+		className: cn("flex shrink-0 items-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			role: "status",
+			"aria-live": "polite",
+			className: "sr-only",
+			children: d.listening ? "Listening" : ""
+		}), d.listening ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			size: "icon",
+			shape: "pill",
+			className: "size-10 gap-0.5",
+			"aria-label": "Stop dictation",
+			onClick: d.stop,
+			children: /* @__PURE__ */ jsx(ListeningBars, {})
+		}) : !hasText && d.supported ? /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			shape: "pill",
+			className: "size-10",
+			"aria-label": "Dictate",
+			disabled,
+			onClick: d.start,
+			children: /* @__PURE__ */ jsx(MicIcon, {})
+		}) : /* @__PURE__ */ jsx(Button, {
+			type: onSend ? "button" : "submit",
+			size: "icon",
+			shape: "pill",
+			className: "size-10",
+			"aria-label": sendLabel,
+			disabled: disabled || !hasText,
+			onClick: onSend,
+			children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+		})]
+	});
+}
+function ListeningBars() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "flex h-4 items-center gap-0.5",
+		children: [
+			0,
+			150,
+			300,
+			450
+		].map((delay) => /* @__PURE__ */ jsx("span", {
+			className: "h-full w-0.75 origin-center animate-listening rounded-full bg-current motion-reduce:scale-y-75",
+			style: { animationDelay: `${delay}ms` }
+		}, delay))
+	});
+}
+export { DictationButton, browserSpeechSource, useDictation };

package/dist/components/data/sectioned-list.d.ts

@@ -0,0 +1,37 @@
+import { TaskRowAssignee } from "./task-row.js";
+import * as React from "react";
+export interface SectionedListItem {
+  id: string;
+  title: React.ReactNode;
+  meta?: React.ReactNode;
+  done?: boolean;
+  important?: boolean;
+  assignee?: TaskRowAssignee;
+}
+export interface SectionedListSection {
+  id: string;
+  /** Section heading, e.g. "Today" or "Groceries". Omit for a section without one. */
+  title?: React.ReactNode;
+  items: SectionedListItem[];
+}
+export interface SectionedListProps extends Omit<React.ComponentProps<"div">, "onToggle"> {
+  sections: SectionedListSection[];
+  /** Called when an item's check changes. Update `done` in your data; the row folds away by itself. */
+  onToggle: (id: string, done: boolean) => void;
+  /** Makes item titles buttons, e.g. to open a DetailSheet. */
+  onOpen?: (id: string) => void;
+  /** Shows one add box at the top. Called with the trimmed text on Enter. */
+  onAdd?: (text: string) => void;
+  /** Add box placeholder and label. Default "Add a to-do". */
+  addPlaceholder?: string;
+  /** Shown when no item is open, e.g. <Empty /> or a line of text. */
+  empty?: React.ReactNode;
+  /** Start with the done items shown. Default false. */
+  defaultShowDone?: boolean;
+}
+/**
+ * A to-do list: one add box, sections with headings, done items folded into a "Show N done" toggle, an empty
+ * state. Rows fold in and out with Collapse, so nothing jumps.
+ */
+declare function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder, empty, defaultShowDone, className, ...props }: SectionedListProps): React.JSX.Element;
+export { SectionedList };

package/dist/components/data/sectioned-list.js

@@ -0,0 +1,139 @@
+"use client";
+import { TaskRow } from "./task-row.js";
+import { Collapse } from "../layout/collapse.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, PlusIcon } from "lucide-react";
+// src/components/data/sectioned-list.tsx
+/** How long a ticked row stays in place (so the check is seen) before it folds away. */
+const LINGER_MS = 600;
+/**
+* A to-do list: one add box, sections with headings, done items folded into a "Show N done" toggle, an empty
+* state. Rows fold in and out with Collapse, so nothing jumps.
+*/
+function SectionedList({ sections, onToggle, onOpen, onAdd, addPlaceholder = "Add a to-do", empty, defaultShowDone = false, className, ...props }) {
+	const [showDone, setShowDone] = React.useState(defaultShowDone);
+	const [lingering, setLingering] = React.useState(/* @__PURE__ */ new Set());
+	const timers = React.useRef(/* @__PURE__ */ new Map());
+	React.useEffect(() => {
+		const map = timers.current;
+		return () => map.forEach(clearTimeout);
+	}, []);
+	const toggle = (id, done) => {
+		clearTimeout(timers.current.get(id));
+		if (done) {
+			setLingering((s) => new Set(s).add(id));
+			timers.current.set(id, setTimeout(() => {
+				timers.current.delete(id);
+				setLingering((s) => {
+					const next = new Set(s);
+					next.delete(id);
+					return next;
+				});
+			}, LINGER_MS));
+		}
+		onToggle(id, done);
+	};
+	const shown = (item) => !item.done || lingering.has(item.id);
+	const done = sections.flatMap((s) => s.items.filter((i) => i.done && !lingering.has(i.id)));
+	const anyOpen = sections.some((s) => s.items.some(shown));
+	const row = (item) => /* @__PURE__ */ jsx(TaskRow, {
+		title: item.title,
+		meta: item.meta,
+		checked: !!item.done,
+		important: item.important,
+		assignee: item.assignee,
+		onCheckedChange: (v) => toggle(item.id, v),
+		onOpen: onOpen ? () => onOpen(item.id) : void 0
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sectioned-list",
+		className: cn("flex min-w-0 flex-col gap-6", className),
+		...props,
+		children: [
+			onAdd && /* @__PURE__ */ jsx(AddBox, {
+				placeholder: addPlaceholder,
+				onAdd
+			}),
+			sections.map((section) => {
+				const visible = section.items.some(shown);
+				return /* @__PURE__ */ jsx(Collapse, {
+					open: visible,
+					children: /* @__PURE__ */ jsxs("section", {
+						"aria-label": typeof section.title === "string" ? section.title : void 0,
+						children: [section.title && /* @__PURE__ */ jsx("h2", {
+							className: "px-2 pb-1 text-[13px] font-semibold text-muted-foreground",
+							children: section.title
+						}), /* @__PURE__ */ jsx("ul", {
+							className: "flex flex-col",
+							children: section.items.map((item) => /* @__PURE__ */ jsx(Collapse, {
+								open: shown(item),
+								role: "listitem",
+								children: row(item)
+							}, item.id))
+						})]
+					})
+				}, section.id);
+			}),
+			!anyOpen && empty && /* @__PURE__ */ jsx("div", {
+				"data-slot": "sectioned-list-empty",
+				children: empty
+			}),
+			done.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-expanded": showDone,
+					onClick: () => setShowDone((v) => !v),
+					className: "flex min-h-11 items-center gap-1.5 self-start rounded-md px-2 text-[13px] font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-4 focus-visible:ring-ring/20",
+					children: [/* @__PURE__ */ jsx(ChevronDownIcon, {
+						"aria-hidden": "true",
+						className: cn("size-4 transition-transform motion-reduce:transition-none", !showDone && "-rotate-90")
+					}), showDone ? "Hide done" : `Show ${done.length} done`]
+				}), /* @__PURE__ */ jsx(Collapse, {
+					open: showDone,
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-col",
+						children: done.map((item) => /* @__PURE__ */ jsx("li", { children: row(item) }, item.id))
+					})
+				})]
+			})
+		]
+	});
+}
+function AddBox({ placeholder, onAdd }) {
+	const [value, setValue] = React.useState("");
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "sectioned-list-add",
+		onSubmit: (e) => {
+			e.preventDefault();
+			const text = value.trim();
+			if (!text) return;
+			onAdd(text);
+			setValue("");
+		},
+		className: "focus-box flex h-12 items-center gap-2.5 rounded-xl border border-transparent bg-muted px-3.5",
+		children: [
+			/* @__PURE__ */ jsx(PlusIcon, {
+				"aria-hidden": "true",
+				className: "size-5 shrink-0 text-muted-foreground"
+			}),
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: "sr-only",
+				children: placeholder
+			}),
+			/* @__PURE__ */ jsx("input", {
+				id,
+				value,
+				onChange: (e) => setValue(e.target.value),
+				placeholder,
+				autoComplete: "off",
+				className: "h-full min-w-0 flex-1 bg-transparent text-[15px] text-foreground outline-none placeholder:text-muted-foreground"
+			})
+		]
+	});
+}
+export { SectionedList };

package/dist/components/data/task-row.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface TaskRowAssignee {
+  name: string;
+  avatarUrl?: string;
+}
+export interface TaskRowProps extends Omit<React.ComponentProps<"div">, "title"> {
+  title: React.ReactNode;
+  /** One line under the title, e.g. "Today · Groceries". Truncates. */
+  meta?: React.ReactNode;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  /** Avatar at the right; the name is its accessible label. */
+  assignee?: TaskRowAssignee;
+  /** Warning-tinted check. Also say it in words, e.g. meta="Important · Today". */
+  important?: boolean;
+  /** Makes the title a button, e.g. to open a DetailSheet. */
+  onOpen?: () => void;
+  disabled?: boolean;
+}
+/** One to-do: round check aligned with the first line, title, one meta line, optional assignee. */
+declare function TaskRow({ title, meta, checked, onCheckedChange, assignee, important, onOpen, disabled, className, ...props }: TaskRowProps): React.JSX.Element;
+export { TaskRow };

package/dist/components/data/task-row.js

@@ -0,0 +1,60 @@
+"use client";
+import { initials } from "../admin/user-chip.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { CheckCircle } from "../ui/check-circle.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/data/task-row.tsx
+/** One to-do: round check aligned with the first line, title, one meta line, optional assignee. */
+function TaskRow({ title, meta, checked, onCheckedChange, assignee, important, onOpen, disabled, className, ...props }) {
+	const titleId = React.useId();
+	const titleClass = cn("text-[15px] leading-6 wrap-anywhere", checked ? "text-muted-foreground line-through decoration-muted-foreground/60" : "text-foreground");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "task-row",
+		"data-checked": checked || void 0,
+		className: cn("flex min-w-0 items-start gap-3 rounded-lg px-2 py-2.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(CheckCircle, {
+				checked,
+				onCheckedChange: (v) => onCheckedChange(v === true),
+				tone: important && !checked ? "important" : "default",
+				"aria-labelledby": titleId,
+				disabled
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [onOpen ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					id: titleId,
+					onClick: onOpen,
+					className: cn(titleClass, "self-start rounded-sm text-left outline-none hover:underline hover:underline-offset-4 focus-visible:ring-4 focus-visible:ring-ring/20"),
+					children: title
+				}) : /* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: titleClass,
+					children: title
+				}), meta && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs text-muted-foreground",
+					children: meta
+				})]
+			}),
+			assignee && /* @__PURE__ */ jsxs(Avatar, {
+				size: "sm",
+				role: "img",
+				"aria-label": assignee.name,
+				title: assignee.name,
+				children: [assignee.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+					src: assignee.avatarUrl,
+					alt: ""
+				}), /* @__PURE__ */ jsx(AvatarFallback, {
+					"aria-hidden": "true",
+					className: "group-data-[size=sm]/avatar:text-xs",
+					children: initials(assignee.name)
+				})]
+			})
+		]
+	});
+}
+export { TaskRow };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface CollapseProps extends React.ComponentProps<"div"> {
+  /** Shown at full height when true; animates to zero height when false. */
+  open: boolean;
+  /** Classes for the inner element that holds the children. */
+  contentClassName?: string;
+}
+/**
+ * Animates its children's height between auto and 0 with a CSS grid-template-rows transition, so neighbours move
+ * smoothly instead of jumping. Closed content is `inert` and hidden from assistive tech. No animation under
+ * prefers-reduced-motion.
+ */
+declare function Collapse({ open, contentClassName, className, children, ...props }: CollapseProps): React.JSX.Element;
+export { Collapse };

package/dist/components/layout/collapse.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/collapse.tsx
+/**
+* Animates its children's height between auto and 0 with a CSS grid-template-rows transition, so neighbours move
+* smoothly instead of jumping. Closed content is `inert` and hidden from assistive tech. No animation under
+* prefers-reduced-motion.
+*/
+function Collapse({ open, contentClassName, className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "collapse",
+		"data-state": open ? "open" : "closed",
+		"aria-hidden": open ? void 0 : true,
+		inert: !open,
+		className: cn("grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none", open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("min-h-0 overflow-hidden", contentClassName),
+			children
+		})
+	});
+}
+export { Collapse };

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 };