@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/escape-button/escape-button.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/escape-button/escape-button.tsx
+const escapeButtonVariants = cva(cn("h-14 rounded-full px-7.5 text-xl font-normal tracking-[-0.012em]", "bg-foreground/6 text-foreground/72 hover:bg-foreground/6 hover:text-foreground/90", "data-[caught]:text-foreground", "data-[done]:bg-foreground data-[done]:text-background data-[done]:hover:bg-foreground data-[done]:hover:text-background", "transition-[transform,background-color,color,scale]", "duration-[var(--duration-slower),var(--duration-fast),var(--duration-fast),var(--duration-fast)]", "ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint),var(--ease-out-quint)]", "data-[escape=flee]:duration-[var(--duration-fast)] data-[escape=flee]:ease-[var(--ease-out-quint)]"), {
+	variants: { 
+	/** A hairline ring — the source's Stroke switch. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: false }
+});
+/** Pointers the game never runs for. */
+function dodgeAllowed(pointerType) {
+	if (pointerType === "touch") return false;
+	if (typeof window.matchMedia !== "function") return true;
+	return !(window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(pointer: coarse)").matches);
+}
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/** A button that dodges an approaching mouse — until it gives up. */
+function EscapeButton({ className, stroke, patience = 4, radius = 120, skittishness = 55, caughtLabel = "Fine.", resetAfter = 600, disabled, children = "Touch me", onClick, onFocus, onBlur, ref, ...props }) {
+	const buttonRef = useRef(null);
+	const offset = useRef({
+		x: 0,
+		y: 0
+	});
+	const near = useRef(false);
+	const escapes = useRef(0);
+	const focused = useRef(false);
+	const [caught, setCaught] = useState(false);
+	const [done, setDone] = useState(false);
+	const inert = Boolean(disabled) || caught || done || skittishness <= 0;
+	const place = useCallback((x, y, fleeing) => {
+		const element = buttonRef.current;
+		if (!element) return;
+		offset.current = {
+			x,
+			y
+		};
+		element.dataset.escape = fleeing ? "flee" : "rest";
+		element.style.transform = x === 0 && y === 0 ? "" : `translate(${String(x)}px, ${String(y)}px)`;
+	}, []);
+	const goHome = useCallback(() => {
+		if (offset.current.x !== 0 || offset.current.y !== 0) place(0, 0, false);
+	}, [place]);
+	useEffect(() => {
+		if (inert) {
+			near.current = false;
+			goHome();
+			return;
+		}
+		function handleMove(event) {
+			const element = buttonRef.current;
+			if (!element || focused.current || !dodgeAllowed(event.pointerType)) return;
+			const rect = element.getBoundingClientRect();
+			const restLeft = rect.left - offset.current.x;
+			const restTop = rect.top - offset.current.y;
+			const dx = restLeft + rect.width / 2 - event.clientX;
+			const dy = restTop + rect.height / 2 - event.clientY;
+			const distance = Math.hypot(dx, dy);
+			if (distance >= radius) {
+				if (near.current) {
+					near.current = false;
+					escapes.current += 1;
+					if (escapes.current >= patience) setCaught(true);
+				}
+				goHome();
+				return;
+			}
+			near.current = true;
+			const push = (1 - distance / radius) ** 2.5 * radius * skittishness * .012;
+			const unit = distance === 0 ? {
+				x: 0,
+				y: -1
+			} : {
+				x: dx / distance,
+				y: dy / distance
+			};
+			let x = unit.x * push;
+			let y = unit.y * push;
+			const field = element.parentElement?.getBoundingClientRect();
+			if (field && field.width > 0 && field.height > 0) {
+				x = clamp(x, field.left - restLeft, field.right - (restLeft + rect.width));
+				y = clamp(y, field.top - restTop, field.bottom - (restTop + rect.height));
+			}
+			place(x, y, true);
+		}
+		window.addEventListener("pointermove", handleMove, { passive: true });
+		return () => {
+			window.removeEventListener("pointermove", handleMove);
+		};
+	}, [
+		inert,
+		radius,
+		patience,
+		skittishness,
+		place,
+		goHome
+	]);
+	useEffect(() => {
+		if (!done) return;
+		const timer = setTimeout(() => {
+			escapes.current = 0;
+			setDone(false);
+			setCaught(false);
+		}, resetAfter);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [done, resetAfter]);
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		setDone(true);
+	}
+	function handleFocus(event) {
+		onFocus?.(event);
+		focused.current = true;
+		goHome();
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		focused.current = false;
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		ref: (node) => {
+			buttonRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		variant: "ghost",
+		"data-slot": "escape-button",
+		"data-escape": "rest",
+		"data-caught": caught || void 0,
+		"data-done": done || void 0,
+		disabled,
+		className: cn(escapeButtonVariants({ stroke }), className),
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		...props,
+		children: caught ? caughtLabel : children
+	});
+}
+//#endregion
+export { EscapeButton, escapeButtonVariants };
+
+//# sourceMappingURL=escape-button.js.map

package/dist/components/escape-button/escape-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-button.js","names":[],"sources":["../../../src/components/escape-button/escape-button.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Escape button (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A novelty button that scoots away from an approaching mouse, and gives up\n * after a few escapes.\n *\n * The game is for a mouse or pen only, and it is never in the way:\n *\n * - It never moves for touch, a coarse pointer, reduced motion, or while it has\n *   focus — so a keyboard user can always Tab to it and press it at once.\n * - It gives up after `patience` escapes: it returns home, reads \"Fine.\" and\n *   stays put until it has been pressed.\n * - A press always goes through, in every state; the dodging is visual only.\n *\n * Like MagneticButton, the offset is written to the element's style from\n * pointermove (no re-render per move) and CSS transitions do the easing: a\n * quick ease-out while fleeing, a soft overshoot drifting home.\n */\n\nconst escapeButtonVariants = cva(\n  cn(\n    \"h-14 rounded-full px-7.5 text-xl font-normal tracking-[-0.012em]\",\n    \"bg-foreground/6 text-foreground/72 hover:bg-foreground/6 hover:text-foreground/90\",\n    \"data-[caught]:text-foreground\",\n    \"data-[done]:bg-foreground data-[done]:text-background data-[done]:hover:bg-foreground data-[done]:hover:text-background\",\n    \"transition-[transform,background-color,color,scale]\",\n    \"duration-[var(--duration-slower),var(--duration-fast),var(--duration-fast),var(--duration-fast)]\",\n    \"ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint),var(--ease-out-quint)]\",\n    \"data-[escape=flee]:duration-[var(--duration-fast)] data-[escape=flee]:ease-[var(--ease-out-quint)]\",\n  ),\n  {\n    variants: {\n      /** A hairline ring — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: false },\n  },\n);\n\n/** Pointers the game never runs for. */\nfunction dodgeAllowed(pointerType: string): boolean {\n  if (pointerType === \"touch\") return false;\n  if (typeof window.matchMedia !== \"function\") return true;\n  return !(\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n    window.matchMedia(\"(pointer: coarse)\").matches\n  );\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport interface EscapeButtonProps\n  extends Omit<ButtonProps, \"asChild\" | \"variant\">, VariantProps<typeof escapeButtonVariants> {\n  /** Escapes before it gives up and stays put. */\n  patience?: number;\n  /** How close, in pixels, the pointer gets before it flees. */\n  radius?: number;\n  /** Flee strength, 0–100. 0 turns the game off. */\n  skittishness?: number;\n  /** The label once it has given up. */\n  caughtLabel?: ReactNode;\n  /** Milliseconds the pressed state shows before the game resets. */\n  resetAfter?: number;\n}\n\n/** A button that dodges an approaching mouse — until it gives up. */\nexport function EscapeButton({\n  className,\n  stroke,\n  patience = 4,\n  radius = 120,\n  skittishness = 55,\n  caughtLabel = \"Fine.\",\n  resetAfter = 600,\n  disabled,\n  children = \"Touch me\",\n  onClick,\n  onFocus,\n  onBlur,\n  ref,\n  ...props\n}: EscapeButtonProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const offset = useRef({ x: 0, y: 0 });\n  const near = useRef(false);\n  const escapes = useRef(0);\n  const focused = useRef(false);\n  const [caught, setCaught] = useState(false);\n  const [done, setDone] = useState(false);\n  const inert = Boolean(disabled) || caught || done || skittishness <= 0;\n\n  const place = useCallback((x: number, y: number, fleeing: boolean) => {\n    const element = buttonRef.current;\n    if (!element) return;\n    offset.current = { x, y };\n    element.dataset.escape = fleeing ? \"flee\" : \"rest\";\n    element.style.transform =\n      x === 0 && y === 0 ? \"\" : `translate(${String(x)}px, ${String(y)}px)`;\n  }, []);\n\n  const goHome = useCallback(() => {\n    if (offset.current.x !== 0 || offset.current.y !== 0) place(0, 0, false);\n  }, [place]);\n\n  useEffect(() => {\n    if (inert) {\n      near.current = false;\n      goHome();\n      return;\n    }\n\n    function handleMove(event: PointerEvent) {\n      const element = buttonRef.current;\n      if (!element || focused.current || !dodgeAllowed(event.pointerType)) return;\n\n      // Measure where it sits at rest, not where it has fled to, or it would\n      // chase its own displacement.\n      const rect = element.getBoundingClientRect();\n      const restLeft = rect.left - offset.current.x;\n      const restTop = rect.top - offset.current.y;\n      const dx = restLeft + rect.width / 2 - event.clientX;\n      const dy = restTop + rect.height / 2 - event.clientY;\n      const distance = Math.hypot(dx, dy);\n\n      if (distance >= radius) {\n        if (near.current) {\n          near.current = false;\n          escapes.current += 1;\n          if (escapes.current >= patience) setCaught(true);\n        }\n        goHome();\n        return;\n      }\n\n      near.current = true;\n      // The push grows steeply as the pointer closes in: ~14px at half the\n      // radius, ~37px at a quarter, at the default strength.\n      const closeness = 1 - distance / radius;\n      const push = closeness ** 2.5 * radius * skittishness * 0.012;\n      const unit = distance === 0 ? { x: 0, y: -1 } : { x: dx / distance, y: dy / distance };\n      let x = unit.x * push;\n      let y = unit.y * push;\n\n      const field = element.parentElement?.getBoundingClientRect();\n      if (field && field.width > 0 && field.height > 0) {\n        x = clamp(x, field.left - restLeft, field.right - (restLeft + rect.width));\n        y = clamp(y, field.top - restTop, field.bottom - (restTop + rect.height));\n      }\n      place(x, y, true);\n    }\n\n    window.addEventListener(\"pointermove\", handleMove, { passive: true });\n    return () => {\n      window.removeEventListener(\"pointermove\", handleMove);\n    };\n  }, [inert, radius, patience, skittishness, place, goHome]);\n\n  useEffect(() => {\n    if (!done) return;\n    const timer = setTimeout(() => {\n      escapes.current = 0;\n      setDone(false);\n      setCaught(false);\n    }, resetAfter);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [done, resetAfter]);\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    setDone(true);\n  }\n\n  function handleFocus(event: FocusEvent<HTMLButtonElement>) {\n    onFocus?.(event);\n    // Focus pins it in place: whatever is focused must stay where it is.\n    focused.current = true;\n    goHome();\n  }\n\n  function handleBlur(event: FocusEvent<HTMLButtonElement>) {\n    onBlur?.(event);\n    focused.current = false;\n  }\n\n  return (\n    <Button\n      ref={(node) => {\n        buttonRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      variant=\"ghost\"\n      data-slot=\"escape-button\"\n      data-escape=\"rest\"\n      data-caught={caught || undefined}\n      data-done={done || undefined}\n      disabled={disabled}\n      className={cn(escapeButtonVariants({ stroke }), className)}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      {...props}\n    >\n      {caught ? caughtLabel : children}\n    </Button>\n  );\n}\n\nexport { escapeButtonVariants };\n"],"mappings":"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"}

package/dist/components/escape-button/index.d.ts

@@ -0,0 +1,2 @@
+import { EscapeButton, EscapeButtonProps, escapeButtonVariants } from "./escape-button.js";
+export { EscapeButton, type EscapeButtonProps, escapeButtonVariants };

package/dist/components/escape-button/index.js

@@ -0,0 +1,2 @@
+import { EscapeButton, escapeButtonVariants } from "./escape-button.js";
+export { EscapeButton, escapeButtonVariants };

package/dist/components/escape-button/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/escape-button/meta.ts
+const meta = defineMeta({
+	name: "escape-button",
+	title: "Escape Button",
+	description: "A novelty button that scoots away from an approaching mouse, then gives up after a few escapes.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["escape-button.tsx"],
+	a11y: "The dodging is a mouse-and-pen game only: it never moves for touch, a coarse pointer, reduced motion, or while the button has focus, so keyboard users can Tab to it and press it at once. It gives up after `patience` escapes (4 by default) and stays put, and a press always goes through in every state — the movement is visual, never a lock. It is a real button with its visible label as its name."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/escape-button/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/escape-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"escape-button\",\n  title: \"Escape Button\",\n  description:\n    \"A novelty button that scoots away from an approaching mouse, then gives up after a few escapes.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"escape-button.tsx\"],\n  a11y:\n    \"The dodging is a mouse-and-pen game only: it never moves for touch, a coarse pointer, reduced motion, \" +\n    \"or while the button has focus, so keyboard users can Tab to it and press it at once. It gives up after \" +\n    \"`patience` escapes (4 by default) and stays put, and a press always goes through in every state — the \" +\n    \"movement is visual, never a lock. It is a real button with its visible label as its name.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAIJ,CAAC"}

package/dist/components/expandable-cards/expandable-cards.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/expandable-cards/expandable-cards.d.ts
+interface ExpandableCardAuthor {
+  name: string;
+  /** A line under the name — a job title, say. */
+  subtitle?: string;
+  /** Avatar URL. */
+  image?: string;
+}
+interface ExpandableCardItem {
+  id: string;
+  title: string;
+  /** Cover image URL. */
+  image: string;
+  /** Alt text. Empty by default, since the title names the card. */
+  imageAlt?: string;
+  /** The detail text. */
+  content: ReactNode;
+  author?: ExpandableCardAuthor;
+  /** Controls shown in the detail view — a play or read-more button. */
+  actions?: ReactNode;
+}
+interface ExpandableCardsProps extends Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue"> {
+  items: ExpandableCardItem[];
+  /**
+   * `inline` widens the chosen card in its row (the SmoothUI original);
+   * `dialog` grows it out of a grid into a modal detail view.
+   */
+  presentation?: "inline" | "dialog";
+  /** The open card's id, or null (controlled). */
+  value?: string | null;
+  /** The open card's id at first (uncontrolled). */
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  /** Classes for every card. */
+  cardClassName?: string;
+}
+/** Cards that expand into a detail view, inline or as a dialog. */
+declare function ExpandableCards({ className, items, presentation, value, defaultValue, onValueChange, cardClassName, ...props }: ExpandableCardsProps): import("react").JSX.Element;
+//#endregion
+export { ExpandableCardAuthor, ExpandableCardItem, ExpandableCards, ExpandableCardsProps };
+//# sourceMappingURL=expandable-cards.d.ts.map

package/dist/components/expandable-cards/expandable-cards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-cards.d.ts","names":[],"sources":["../../../src/components/expandable-cards/expandable-cards.tsx"],"mappings":";;UAqCiB;EACf;;EAEA;;EAEA;;UAGe;EACf;EACA;;EAEA;;EAEA;;EAEA,SAAS;EACT,SAAS;;EAET,UAAU;;UAGK,6BAA6B,KAC5C;EAGA,OAAO;;;;;EAKP;;EAEA;;EAEA;EACA,iBAAiB;;EAEjB;;;iBAiCc,kBACd,WACA,OACA,cACA,OACA,cACA,eACA,kBACG,SACF,uCAAoB,IAAA"}

package/dist/components/expandable-cards/expandable-cards.js

@@ -0,0 +1,312 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
+//#region src/components/expandable-cards/expandable-cards.tsx
+const coverTitle = "text-2xl font-bold text-white";
+const coverShade = "pointer-events-none absolute inset-0 bg-linear-to-b from-overlay to-transparent";
+function prefersReducedMotion() {
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Author({ author }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "expandable-cards-author",
+		className: "mt-4 flex items-center gap-3",
+		children: [author.image ? /* @__PURE__ */ jsx("img", {
+			src: author.image,
+			alt: "",
+			draggable: false,
+			className: "size-12 shrink-0 rounded-full border border-border bg-muted object-cover"
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "font-semibold text-foreground",
+				children: author.name
+			}), author.subtitle ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: author.subtitle
+			}) : null]
+		})]
+	});
+}
+/** Cards that expand into a detail view, inline or as a dialog. */
+function ExpandableCards({ className, items, presentation = "inline", value, defaultValue = null, onValueChange, cardClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const openId = value === void 0 ? uncontrolled : value;
+	const uid = useId().replace(/:/g, "");
+	const triggers = useRef(/* @__PURE__ */ new Map());
+	function select(id) {
+		if (value === void 0) setUncontrolled(id);
+		onValueChange?.(id);
+	}
+	const shared = {
+		items,
+		openId,
+		uid,
+		triggers,
+		select,
+		cardClassName
+	};
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "expandable-cards",
+			"data-presentation": presentation,
+			className: cn("w-full", className),
+			...props,
+			children: presentation === "dialog" ? /* @__PURE__ */ jsx(DialogCards, { ...shared }) : /* @__PURE__ */ jsx(InlineCards, { ...shared })
+		})
+	});
+}
+function InlineCards({ items, openId, uid, triggers, select, cardClassName }) {
+	const panels = useRef(/* @__PURE__ */ new Map());
+	const focusPanel = useRef(false);
+	useEffect(() => {
+		if (!focusPanel.current || openId === null) return;
+		focusPanel.current = false;
+		panels.current.get(openId)?.focus({ preventScroll: true });
+		triggers.current.get(openId)?.scrollIntoView({
+			behavior: prefersReducedMotion() ? "auto" : "smooth",
+			block: "nearest",
+			inline: "center"
+		});
+	}, [openId, triggers]);
+	function toggle(id) {
+		if (openId === id) {
+			select(null);
+			return;
+		}
+		focusPanel.current = true;
+		select(id);
+	}
+	function handleKeyDown(event, id) {
+		if (event.key !== "Escape" || openId !== id) return;
+		event.preventDefault();
+		select(null);
+		triggers.current.get(id)?.focus();
+	}
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "expandable-cards-list",
+		className: "mx-auto flex snap-x snap-mandatory [scrollbar-width:none] gap-4 overflow-x-auto px-4 pt-4 pb-8",
+		children: items.map((item) => {
+			const open = openId === item.id;
+			const panelId = `${uid}-panel-${item.id}`;
+			const titleId = `${uid}-title-${item.id}`;
+			return /* @__PURE__ */ jsxs("li", {
+				"data-slot": "expandable-cards-card",
+				"data-state": open ? "open" : "closed",
+				className: cn("relative h-75 w-50 shrink-0 snap-start overflow-hidden rounded-2xl border border-border bg-background shadow-lg", "transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] data-[state=open]:w-125", cardClassName),
+				onKeyDown: (event) => handleKeyDown(event, item.id),
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					ref: (element) => {
+						if (element) triggers.current.set(item.id, element);
+						else triggers.current.delete(item.id);
+					},
+					"aria-expanded": open,
+					"aria-controls": panelId,
+					"data-slot": "expandable-cards-trigger",
+					className: cn("relative block h-full w-50 text-start", focusRing, "focus-visible:ring-inset"),
+					onClick: () => toggle(item.id),
+					children: [
+						/* @__PURE__ */ jsx("img", {
+							src: item.image,
+							alt: item.imageAlt ?? "",
+							draggable: false,
+							className: "size-full object-cover"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: coverShade
+						}),
+						/* @__PURE__ */ jsx("span", {
+							id: titleId,
+							className: cn("absolute inset-x-0 top-0 p-6", coverTitle),
+							children: item.title
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					id: panelId,
+					ref: (element) => {
+						if (element) panels.current.set(item.id, element);
+						else panels.current.delete(item.id);
+					},
+					role: "region",
+					"aria-labelledby": titleId,
+					"aria-hidden": open ? void 0 : true,
+					inert: !open,
+					tabIndex: -1,
+					"data-slot": "expandable-cards-detail",
+					"data-state": open ? "open" : "closed",
+					className: cn("absolute inset-y-0 end-0 flex w-75 flex-col justify-between overflow-y-auto bg-background p-8 outline-none", "transition-[opacity,translate,filter] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=open]:delay-[var(--duration-fast)]", "data-[state=closed]:translate-x-5 data-[state=closed]:opacity-0 data-[state=closed]:blur-[5px] rtl:data-[state=closed]:-translate-x-5"),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "text-sm text-muted-foreground",
+							children: item.content
+						}),
+						item.actions ? /* @__PURE__ */ jsx("div", {
+							className: "mt-4 flex gap-2",
+							children: item.actions
+						}) : null,
+						item.author ? /* @__PURE__ */ jsx(Author, { author: item.author }) : null
+					]
+				})]
+			}, item.id);
+		})
+	});
+}
+function DialogCards({ items, openId, uid, triggers, select, cardClassName }) {
+	const openItem = items.find((item) => item.id === openId);
+	const layout = (part, id) => `${uid}-${part}-${id}`;
+	return /* @__PURE__ */ jsxs(LayoutGroup, {
+		id: uid,
+		children: [/* @__PURE__ */ jsx("ul", {
+			"data-slot": "expandable-cards-list",
+			className: "grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-4",
+			children: items.map((item) => /* @__PURE__ */ jsx("li", {
+				"data-slot": "expandable-cards-card",
+				className: "h-75",
+				children: /* @__PURE__ */ jsxs(motion.button, {
+					type: "button",
+					layoutId: layout("card", item.id),
+					ref: (element) => {
+						if (element) triggers.current.set(item.id, element);
+						else triggers.current.delete(item.id);
+					},
+					"aria-haspopup": "dialog",
+					"aria-expanded": openId === item.id,
+					"data-slot": "expandable-cards-trigger",
+					className: cn("relative block size-full overflow-hidden rounded-2xl border border-border bg-background text-start shadow-lg", focusRing, cardClassName),
+					style: { borderRadius: 16 },
+					onClick: () => select(item.id),
+					children: [
+						/* @__PURE__ */ jsx(motion.img, {
+							layoutId: layout("image", item.id),
+							src: item.image,
+							alt: item.imageAlt ?? "",
+							draggable: false,
+							className: "size-full object-cover"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: coverShade
+						}),
+						/* @__PURE__ */ jsx(motion.span, {
+							layoutId: layout("title", item.id),
+							className: cn("absolute inset-x-0 top-0 p-6", coverTitle),
+							children: item.title
+						})
+					]
+				})
+			}, item.id))
+		}), /* @__PURE__ */ jsx(Dialog.Root, {
+			open: openItem !== void 0,
+			onOpenChange: (open) => {
+				if (!open) select(null);
+			},
+			children: /* @__PURE__ */ jsx(AnimatePresence, { children: openItem ? /* @__PURE__ */ jsxs(Dialog.Portal, {
+				forceMount: true,
+				children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+					asChild: true,
+					forceMount: true,
+					children: /* @__PURE__ */ jsx(motion.div, {
+						"data-slot": "expandable-cards-overlay",
+						className: "fixed inset-0 z-[var(--z-overlay)] bg-overlay",
+						initial: { opacity: 0 },
+						animate: { opacity: 1 },
+						exit: { opacity: 0 }
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none fixed inset-0 z-[var(--z-modal)] grid place-items-center p-4",
+					children: /* @__PURE__ */ jsx(Dialog.Content, {
+						asChild: true,
+						forceMount: true,
+						onCloseAutoFocus: (event) => {
+							event.preventDefault();
+							triggers.current.get(openItem.id)?.focus();
+						},
+						children: /* @__PURE__ */ jsxs(motion.div, {
+							layoutId: layout("card", openItem.id),
+							"data-slot": "expandable-cards-detail",
+							className: "pointer-events-auto relative flex max-h-full w-full max-w-xl flex-col overflow-hidden border border-border bg-card text-card-foreground shadow-xl outline-none",
+							style: { borderRadius: 16 },
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "relative h-60 shrink-0",
+									children: [
+										/* @__PURE__ */ jsx(motion.img, {
+											layoutId: layout("image", openItem.id),
+											src: openItem.image,
+											alt: openItem.imageAlt ?? "",
+											draggable: false,
+											className: "size-full object-cover"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: coverShade
+										}),
+										/* @__PURE__ */ jsx(Dialog.Title, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx(motion.h2, {
+												layoutId: layout("title", openItem.id),
+												className: cn("absolute inset-x-0 top-0 p-6", coverTitle),
+												children: openItem.title
+											})
+										})
+									]
+								}),
+								/* @__PURE__ */ jsxs(motion.div, {
+									className: "flex flex-col overflow-y-auto p-6",
+									initial: { opacity: 0 },
+									animate: { opacity: 1 },
+									exit: {
+										opacity: 0,
+										transition: { duration: .1 }
+									},
+									children: [
+										/* @__PURE__ */ jsx(Dialog.Description, {
+											asChild: true,
+											children: /* @__PURE__ */ jsx("div", {
+												className: "text-sm text-muted-foreground",
+												children: openItem.content
+											})
+										}),
+										openItem.actions ? /* @__PURE__ */ jsx("div", {
+											className: "mt-4 flex gap-2",
+											children: openItem.actions
+										}) : null,
+										openItem.author ? /* @__PURE__ */ jsx(Author, { author: openItem.author }) : null
+									]
+								}),
+								/* @__PURE__ */ jsx(Dialog.Close, {
+									"aria-label": "Close",
+									"data-slot": "expandable-cards-close",
+									className: cn("absolute end-3 top-3 grid size-8 place-items-center rounded-full bg-background/80 text-foreground backdrop-blur-sm", "transition-colors duration-[var(--duration-fast)] hover:bg-background", focusRing),
+									children: /* @__PURE__ */ jsx("svg", {
+										viewBox: "0 0 24 24",
+										fill: "none",
+										"aria-hidden": "true",
+										className: "size-4",
+										children: /* @__PURE__ */ jsx("path", {
+											d: "m6 6 12 12M18 6 6 18",
+											stroke: "currentColor",
+											strokeWidth: "2",
+											strokeLinecap: "round"
+										})
+									})
+								})
+							]
+						})
+					})
+				})]
+			}, openItem.id) : null })
+		})]
+	});
+}
+//#endregion
+export { ExpandableCards };
+
+//# sourceMappingURL=expandable-cards.js.map

package/dist/components/expandable-cards/expandable-cards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-cards.js","names":[],"sources":["../../../src/components/expandable-cards/expandable-cards.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Expandable Cards (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { AnimatePresence, LayoutGroup, MotionConfig, motion } from \"motion/react\";\nimport { Dialog } from \"radix-ui\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Cards that open into a detail view, in one of two presentations:\n *\n * - `inline` (the SmoothUI original): a row of tall cards; the chosen one\n *   widens in place and its detail slides in beside the picture. Width is a\n *   CSS transition — the neighbours move because the layout does.\n * - `dialog`: a grid of cards; the chosen one grows into a modal detail view\n *   and shrinks back into its place on close. Growing one element out of\n *   another's box is a shared-layout animation between two DOM positions,\n *   which is what `motion`'s layoutId is for (ADR 0014), and the only reason\n *   this component depends on it.\n *\n * Either way the detail behaves like a dialog: focus moves into it, Escape\n * closes it, and focus returns to the card that opened it. The `dialog`\n * presentation is a real modal (Radix Dialog: focus trap, aria-modal, scroll\n * lock); the `inline` one is a disclosure, since the page around it stays\n * usable.\n */\n\nexport interface ExpandableCardAuthor {\n  name: string;\n  /** A line under the name — a job title, say. */\n  subtitle?: string;\n  /** Avatar URL. */\n  image?: string;\n}\n\nexport interface ExpandableCardItem {\n  id: string;\n  title: string;\n  /** Cover image URL. */\n  image: string;\n  /** Alt text. Empty by default, since the title names the card. */\n  imageAlt?: string;\n  /** The detail text. */\n  content: ReactNode;\n  author?: ExpandableCardAuthor;\n  /** Controls shown in the detail view — a play or read-more button. */\n  actions?: ReactNode;\n}\n\nexport interface ExpandableCardsProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"children\" | \"defaultValue\"\n> {\n  items: ExpandableCardItem[];\n  /**\n   * `inline` widens the chosen card in its row (the SmoothUI original);\n   * `dialog` grows it out of a grid into a modal detail view.\n   */\n  presentation?: \"inline\" | \"dialog\";\n  /** The open card's id, or null (controlled). */\n  value?: string | null;\n  /** The open card's id at first (uncontrolled). */\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\nconst coverTitle = \"text-2xl font-bold text-white\";\nconst coverShade =\n  \"pointer-events-none absolute inset-0 bg-linear-to-b from-overlay to-transparent\";\n\nfunction prefersReducedMotion() {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction Author({ author }: { author: ExpandableCardAuthor }) {\n  return (\n    <div data-slot=\"expandable-cards-author\" className=\"mt-4 flex items-center gap-3\">\n      {author.image ? (\n        <img\n          src={author.image}\n          alt=\"\"\n          draggable={false}\n          className=\"size-12 shrink-0 rounded-full border border-border bg-muted object-cover\"\n        />\n      ) : null}\n      <div className=\"min-w-0\">\n        <p className=\"font-semibold text-foreground\">{author.name}</p>\n        {author.subtitle ? (\n          <p className=\"text-xs text-muted-foreground\">{author.subtitle}</p>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\n/** Cards that expand into a detail view, inline or as a dialog. */\nexport function ExpandableCards({\n  className,\n  items,\n  presentation = \"inline\",\n  value,\n  defaultValue = null,\n  onValueChange,\n  cardClassName,\n  ...props\n}: ExpandableCardsProps) {\n  const [uncontrolled, setUncontrolled] = useState<string | null>(defaultValue);\n  const openId = value === undefined ? uncontrolled : value;\n  const uid = useId().replace(/:/g, \"\");\n  const triggers = useRef(new Map<string, HTMLButtonElement>());\n\n  function select(id: string | null) {\n    if (value === undefined) setUncontrolled(id);\n    onValueChange?.(id);\n  }\n\n  const shared = {\n    items,\n    openId,\n    uid,\n    triggers,\n    select,\n    cardClassName,\n  };\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        data-slot=\"expandable-cards\"\n        data-presentation={presentation}\n        className={cn(\"w-full\", className)}\n        {...props}\n      >\n        {presentation === \"dialog\" ? <DialogCards {...shared} /> : <InlineCards {...shared} />}\n      </div>\n    </MotionConfig>\n  );\n}\n\ninterface PresentationProps {\n  items: ExpandableCardItem[];\n  openId: string | null;\n  uid: string;\n  triggers: { current: Map<string, HTMLButtonElement> };\n  select: (id: string | null) => void;\n  cardClassName?: string;\n}\n\nfunction InlineCards({\n  items,\n  openId,\n  uid,\n  triggers,\n  select,\n  cardClassName,\n}: PresentationProps) {\n  const panels = useRef(new Map<string, HTMLDivElement>());\n  const focusPanel = useRef(false);\n\n  useEffect(() => {\n    if (!focusPanel.current || openId === null) return;\n    focusPanel.current = false;\n    panels.current.get(openId)?.focus({ preventScroll: true });\n    triggers.current.get(openId)?.scrollIntoView({\n      behavior: prefersReducedMotion() ? \"auto\" : \"smooth\",\n      block: \"nearest\",\n      inline: \"center\",\n    });\n  }, [openId, triggers]);\n\n  function toggle(id: string) {\n    if (openId === id) {\n      select(null);\n      return;\n    }\n    focusPanel.current = true;\n    select(id);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLLIElement>, id: string) {\n    if (event.key !== \"Escape\" || openId !== id) return;\n    event.preventDefault();\n    select(null);\n    triggers.current.get(id)?.focus();\n  }\n\n  return (\n    <ul\n      data-slot=\"expandable-cards-list\"\n      className=\"mx-auto flex snap-x snap-mandatory [scrollbar-width:none] gap-4 overflow-x-auto px-4 pt-4 pb-8\"\n    >\n      {items.map((item) => {\n        const open = openId === item.id;\n        const panelId = `${uid}-panel-${item.id}`;\n        const titleId = `${uid}-title-${item.id}`;\n        return (\n          // Escape closes the detail from wherever focus is inside the card —\n          // the trigger, the panel or its actions — as it would a dialog. The\n          // list item is not itself interactive; it only hears the key bubble.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <li\n            key={item.id}\n            data-slot=\"expandable-cards-card\"\n            data-state={open ? \"open\" : \"closed\"}\n            className={cn(\n              \"relative h-75 w-50 shrink-0 snap-start overflow-hidden rounded-2xl border border-border bg-background shadow-lg\",\n              \"transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] data-[state=open]:w-125\",\n              cardClassName,\n            )}\n            onKeyDown={(event) => handleKeyDown(event, item.id)}\n          >\n            <button\n              type=\"button\"\n              ref={(element) => {\n                if (element) triggers.current.set(item.id, element);\n                else triggers.current.delete(item.id);\n              }}\n              aria-expanded={open}\n              aria-controls={panelId}\n              data-slot=\"expandable-cards-trigger\"\n              className={cn(\n                \"relative block h-full w-50 text-start\",\n                focusRing,\n                \"focus-visible:ring-inset\",\n              )}\n              onClick={() => toggle(item.id)}\n            >\n              <img\n                src={item.image}\n                alt={item.imageAlt ?? \"\"}\n                draggable={false}\n                className=\"size-full object-cover\"\n              />\n              <span aria-hidden=\"true\" className={coverShade} />\n              <span id={titleId} className={cn(\"absolute inset-x-0 top-0 p-6\", coverTitle)}>\n                {item.title}\n              </span>\n            </button>\n            <div\n              id={panelId}\n              ref={(element) => {\n                if (element) panels.current.set(item.id, element);\n                else panels.current.delete(item.id);\n              }}\n              role=\"region\"\n              aria-labelledby={titleId}\n              aria-hidden={open ? undefined : true}\n              inert={!open}\n              tabIndex={-1}\n              data-slot=\"expandable-cards-detail\"\n              data-state={open ? \"open\" : \"closed\"}\n              className={cn(\n                \"absolute inset-y-0 end-0 flex w-75 flex-col justify-between overflow-y-auto bg-background p-8 outline-none\",\n                \"transition-[opacity,translate,filter] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                \"data-[state=open]:delay-[var(--duration-fast)]\",\n                \"data-[state=closed]:translate-x-5 data-[state=closed]:opacity-0 data-[state=closed]:blur-[5px] rtl:data-[state=closed]:-translate-x-5\",\n              )}\n            >\n              <div className=\"text-sm text-muted-foreground\">{item.content}</div>\n              {item.actions ? <div className=\"mt-4 flex gap-2\">{item.actions}</div> : null}\n              {item.author ? <Author author={item.author} /> : null}\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nfunction DialogCards({\n  items,\n  openId,\n  uid,\n  triggers,\n  select,\n  cardClassName,\n}: PresentationProps) {\n  const openItem = items.find((item) => item.id === openId);\n  const layout = (part: string, id: string) => `${uid}-${part}-${id}`;\n\n  return (\n    <LayoutGroup id={uid}>\n      <ul\n        data-slot=\"expandable-cards-list\"\n        className=\"grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] gap-4\"\n      >\n        {items.map((item) => (\n          <li key={item.id} data-slot=\"expandable-cards-card\" className=\"h-75\">\n            <motion.button\n              type=\"button\"\n              layoutId={layout(\"card\", item.id)}\n              ref={(element: HTMLButtonElement | null) => {\n                if (element) triggers.current.set(item.id, element);\n                else triggers.current.delete(item.id);\n              }}\n              aria-haspopup=\"dialog\"\n              aria-expanded={openId === item.id}\n              data-slot=\"expandable-cards-trigger\"\n              className={cn(\n                \"relative block size-full overflow-hidden rounded-2xl border border-border bg-background text-start shadow-lg\",\n                focusRing,\n                cardClassName,\n              )}\n              style={{ borderRadius: 16 }}\n              onClick={() => select(item.id)}\n            >\n              <motion.img\n                layoutId={layout(\"image\", item.id)}\n                src={item.image}\n                alt={item.imageAlt ?? \"\"}\n                draggable={false}\n                className=\"size-full object-cover\"\n              />\n              <span aria-hidden=\"true\" className={coverShade} />\n              <motion.span\n                layoutId={layout(\"title\", item.id)}\n                className={cn(\"absolute inset-x-0 top-0 p-6\", coverTitle)}\n              >\n                {item.title}\n              </motion.span>\n            </motion.button>\n          </li>\n        ))}\n      </ul>\n\n      <Dialog.Root\n        open={openItem !== undefined}\n        onOpenChange={(open) => {\n          if (!open) select(null);\n        }}\n      >\n        <AnimatePresence>\n          {openItem ? (\n            <Dialog.Portal forceMount key={openItem.id}>\n              <Dialog.Overlay asChild forceMount>\n                <motion.div\n                  data-slot=\"expandable-cards-overlay\"\n                  className=\"fixed inset-0 z-[var(--z-overlay)] bg-overlay\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                />\n              </Dialog.Overlay>\n              <div className=\"pointer-events-none fixed inset-0 z-[var(--z-modal)] grid place-items-center p-4\">\n                <Dialog.Content\n                  asChild\n                  forceMount\n                  onCloseAutoFocus={(event) => {\n                    event.preventDefault();\n                    triggers.current.get(openItem.id)?.focus();\n                  }}\n                >\n                  <motion.div\n                    layoutId={layout(\"card\", openItem.id)}\n                    data-slot=\"expandable-cards-detail\"\n                    className=\"pointer-events-auto relative flex max-h-full w-full max-w-xl flex-col overflow-hidden border border-border bg-card text-card-foreground shadow-xl outline-none\"\n                    style={{ borderRadius: 16 }}\n                  >\n                    <div className=\"relative h-60 shrink-0\">\n                      <motion.img\n                        layoutId={layout(\"image\", openItem.id)}\n                        src={openItem.image}\n                        alt={openItem.imageAlt ?? \"\"}\n                        draggable={false}\n                        className=\"size-full object-cover\"\n                      />\n                      <span aria-hidden=\"true\" className={coverShade} />\n                      <Dialog.Title asChild>\n                        <motion.h2\n                          layoutId={layout(\"title\", openItem.id)}\n                          className={cn(\"absolute inset-x-0 top-0 p-6\", coverTitle)}\n                        >\n                          {openItem.title}\n                        </motion.h2>\n                      </Dialog.Title>\n                    </div>\n                    <motion.div\n                      className=\"flex flex-col overflow-y-auto p-6\"\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      exit={{ opacity: 0, transition: { duration: 0.1 } }}\n                    >\n                      <Dialog.Description asChild>\n                        <div className=\"text-sm text-muted-foreground\">{openItem.content}</div>\n                      </Dialog.Description>\n                      {openItem.actions ? (\n                        <div className=\"mt-4 flex gap-2\">{openItem.actions}</div>\n                      ) : null}\n                      {openItem.author ? <Author author={openItem.author} /> : null}\n                    </motion.div>\n                    <Dialog.Close\n                      aria-label=\"Close\"\n                      data-slot=\"expandable-cards-close\"\n                      className={cn(\n                        \"absolute end-3 top-3 grid size-8 place-items-center rounded-full bg-background/80 text-foreground backdrop-blur-sm\",\n                        \"transition-colors duration-[var(--duration-fast)] hover:bg-background\",\n                        focusRing,\n                      )}\n                    >\n                      <svg\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        aria-hidden=\"true\"\n                        className=\"size-4\"\n                      >\n                        <path\n                          d=\"m6 6 12 12M18 6 6 18\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                        />\n                      </svg>\n                    </Dialog.Close>\n                  </motion.div>\n                </Dialog.Content>\n              </div>\n            </Dialog.Portal>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Root>\n    </LayoutGroup>\n  );\n}\n"],"mappings":"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"}

package/dist/components/expandable-cards/index.d.ts

@@ -0,0 +1,2 @@
+import { ExpandableCardAuthor, ExpandableCardItem, ExpandableCards, ExpandableCardsProps } from "./expandable-cards.js";
+export { type ExpandableCardAuthor, type ExpandableCardItem, ExpandableCards, type ExpandableCardsProps };

package/dist/components/expandable-cards/index.js

@@ -0,0 +1,2 @@
+import { ExpandableCards } from "./expandable-cards.js";
+export { ExpandableCards };

package/dist/components/expandable-cards/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/expandable-cards/meta.ts
+const meta = defineMeta({
+	name: "expandable-cards",
+	title: "Expandable Cards",
+	description: "Cards that open into a detail view — widening in place in a row, or growing out of a grid into a modal.",
+	category: "display",
+	status: "beta",
+	dependencies: ["motion", "radix-ui"],
+	registryDependencies: [],
+	files: ["expandable-cards.tsx"],
+	a11y: "Every card is a real button. Inline, it is a disclosure (aria-expanded, aria-controls) whose detail is a labelled region: opening moves focus into it, Escape closes it from anywhere inside the card and returns focus to the card, and a closed detail is aria-hidden and inert. As a dialog it is a Radix modal — focus trap, aria-modal, title and description, Escape and a named Close button — and focus returns to the card that opened it. Motion follows MotionConfig reducedMotion=\"user\": under reduced motion the card still opens, without growing out of its place."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/expandable-cards/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/expandable-cards/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"expandable-cards\",\n  title: \"Expandable Cards\",\n  description:\n    \"Cards that open into a detail view — widening in place in a row, or growing out of a grid into a modal.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"expandable-cards.tsx\"],\n  a11y:\n    \"Every card is a real button. Inline, it is a disclosure (aria-expanded, aria-controls) whose detail is a \" +\n    \"labelled region: opening moves focus into it, Escape closes it from anywhere inside the card and returns \" +\n    \"focus to the card, and a closed detail is aria-hidden and inert. As a dialog it is a Radix modal — focus \" +\n    \"trap, aria-modal, title and description, Escape and a named Close button — and focus returns to the card \" +\n    'that opened it. Motion follows MotionConfig reducedMotion=\"user\": under reduced motion the card still ' +\n    \"opens, without growing out of its place.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU,UAAU;CACnC,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAMJ,CAAC"}