@dowel-ui/react 0.7.0 → 0.8.0

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

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

@@ -0,0 +1,35 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/expandable-list/expandable-list.d.ts
+declare const expandableListVariants: (props?: ({
+  density?: "comfortable" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ExpandableListItem {
+  id: string;
+  title: string;
+  /** A line under the title — a role and salary, say. */
+  subtitle?: ReactNode;
+  /** Small print — location, schedule. */
+  meta?: ReactNode;
+  /** A logo or avatar. Decorative: the title names the row. */
+  media?: ReactNode;
+  /** The detail shown when the row is open. */
+  content: ReactNode;
+  /** Controls in the detail view — an Apply link, say. */
+  actions?: ReactNode;
+}
+interface ExpandableListProps extends Omit<ComponentPropsWithRef<"ul">, "children" | "defaultValue">, VariantProps<typeof expandableListVariants> {
+  items: ExpandableListItem[];
+  /** The open item's id, or null (controlled). */
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  /** Accessible name of the Close button. */
+  closeLabel?: string;
+  rowClassName?: string;
+}
+/** Rows that expand into a detail dialog, growing out of their place in the list. */
+declare function ExpandableList({ className, density, items, value: valueProp, defaultValue, onValueChange, closeLabel, rowClassName, ...props }: ExpandableListProps): import("react").JSX.Element;
+//#endregion
+export { ExpandableList, ExpandableListItem, ExpandableListProps, expandableListVariants };
+//# sourceMappingURL=expandable-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-list.d.ts","names":[],"sources":["../../../src/components/expandable-list/expandable-list.tsx"],"mappings":";;;cA0BM,yBAAsB;;6CAU1B;UAEe;EACf;EACA;;EAEA,WAAW;;EAEX,OAAO;;EAEP,QAAQ;;EAER,SAAS;;EAET,UAAU;;UAGK,4BAEb,KAAK,2DACL,oBAAoB;EACtB,OAAO;;EAEP;EACA;EACA,iBAAiB;;EAEjB;EACA;;;iBAkDc,iBACd,WACA,SACA,OACA,OAAO,WACP,cACA,eACA,YACA,iBACG,SACF,sCAAmB,IAAA"}

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

@@ -0,0 +1,180 @@
+"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 { cva } from "class-variance-authority";
+import { useId, useRef, useState } from "react";
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
+//#region src/components/expandable-list/expandable-list.tsx
+const expandableListVariants = cva("flex w-full flex-col", {
+	variants: { density: {
+		comfortable: "gap-4",
+		compact: "gap-2"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+const transition = {
+	type: "spring",
+	bounce: .1,
+	duration: .25
+};
+function Summary({ item, layout, detail = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex w-full min-w-0 items-center gap-4 text-start",
+		children: [item.media ? /* @__PURE__ */ jsx(motion.span, {
+			layoutId: layout("media"),
+			"aria-hidden": "true",
+			className: "grid shrink-0 place-items-center [&_svg]:size-8",
+			children: item.media
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [
+				detail ? /* @__PURE__ */ jsx(Dialog.Title, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(motion.h2, {
+						layoutId: layout("title"),
+						className: "text-sm font-medium text-foreground",
+						children: item.title
+					})
+				}) : /* @__PURE__ */ jsx(motion.span, {
+					layoutId: layout("title"),
+					className: "font-medium text-foreground",
+					children: item.title
+				}),
+				item.subtitle ? /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: item.subtitle
+				}) : null,
+				item.meta ? /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: item.meta
+				}) : null
+			]
+		})]
+	});
+}
+/** Rows that expand into a detail dialog, growing out of their place in the list. */
+function ExpandableList({ className, density, items, value: valueProp, defaultValue = null, onValueChange, closeLabel = "Close", rowClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const openId = valueProp === void 0 ? uncontrolled : valueProp;
+	const openItem = items.find((item) => item.id === openId);
+	const uid = useId();
+	const rows = useRef(/* @__PURE__ */ new Map());
+	function select(next) {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	}
+	const layoutFor = (id) => (part) => `${uid}-${part}-${id}`;
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		transition,
+		children: /* @__PURE__ */ jsxs(LayoutGroup, {
+			id: uid,
+			children: [/* @__PURE__ */ jsx("ul", {
+				"data-slot": "expandable-list",
+				className: cn(expandableListVariants({ density }), className),
+				...props,
+				children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(motion.button, {
+					type: "button",
+					ref: (node) => {
+						if (node) rows.current.set(item.id, node);
+						else rows.current.delete(item.id);
+					},
+					layoutId: layoutFor(item.id)("card"),
+					"aria-haspopup": "dialog",
+					"aria-expanded": openId === item.id,
+					"data-slot": "expandable-list-row",
+					"data-state": openId === item.id ? "open" : "closed",
+					onClick: () => select(item.id),
+					whileTap: { scale: .97 },
+					className: cn("flex w-full cursor-pointer items-center gap-4 border border-border bg-card p-2 text-card-foreground shadow-xs select-none md:p-4", "transition-colors duration-[var(--duration-fast)] hover:bg-accent", focusRing, rowClassName),
+					style: { borderRadius: 8 },
+					children: /* @__PURE__ */ jsx(Summary, {
+						item,
+						layout: layoutFor(item.id)
+					})
+				}) }, 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-list-overlay",
+							className: "fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-xl",
+							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();
+								rows.current.get(openItem.id)?.focus();
+							},
+							children: /* @__PURE__ */ jsxs(motion.div, {
+								layoutId: layoutFor(openItem.id)("card"),
+								"data-slot": "expandable-list-detail",
+								className: "pointer-events-auto relative flex max-h-full w-[90%] max-w-2xl flex-col items-start gap-4 overflow-y-auto border border-border bg-card p-4 pe-14 text-card-foreground shadow-xl outline-none",
+								style: { borderRadius: 12 },
+								children: [
+									/* @__PURE__ */ jsx(Summary, {
+										item: openItem,
+										layout: layoutFor(openItem.id),
+										detail: true
+									}),
+									/* @__PURE__ */ jsxs(motion.div, {
+										initial: { opacity: 0 },
+										animate: { opacity: 1 },
+										exit: { opacity: 0 },
+										className: "flex w-full flex-col gap-4",
+										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: "flex flex-wrap gap-2",
+											children: openItem.actions
+										}) : null]
+									}),
+									/* @__PURE__ */ jsx(Dialog.Close, {
+										"aria-label": closeLabel,
+										"data-slot": "expandable-list-close",
+										className: cn("absolute end-3 top-3 grid size-8 place-items-center rounded-full text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", 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 { ExpandableList, expandableListVariants };
+
+//# sourceMappingURL=expandable-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-list.js","names":[],"sources":["../../../src/components/expandable-list/expandable-list.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Job Listing Component (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { AnimatePresence, LayoutGroup, MotionConfig, motion } from \"motion/react\";\nimport { Dialog } from \"radix-ui\";\nimport { useId, useRef, useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A list of compact rows — a job, a release, a person — each of which grows\n * into a detail card over a blurred backdrop.\n *\n * Every row is a real button that opens a Radix modal dialog: focus moves into\n * it and is trapped, the page behind is inert, Escape, the backdrop and a\n * named Close button all dismiss it, and focus returns to the row that opened\n * it. The title and description name and describe the dialog.\n *\n * The row growing into the card (and its logo and title travelling with it)\n * is a shared-layout animation between two DOM positions — `motion`'s\n * layoutId, the one reason this depends on it (ADR 0014). Under reduced\n * motion the dialog simply appears in place.\n */\n\nconst expandableListVariants = cva(\"flex w-full flex-col\", {\n  variants: {\n    density: {\n      comfortable: \"gap-4\",\n      compact: \"gap-2\",\n    },\n  },\n  defaultVariants: {\n    density: \"comfortable\",\n  },\n});\n\nexport interface ExpandableListItem {\n  id: string;\n  title: string;\n  /** A line under the title — a role and salary, say. */\n  subtitle?: ReactNode;\n  /** Small print — location, schedule. */\n  meta?: ReactNode;\n  /** A logo or avatar. Decorative: the title names the row. */\n  media?: ReactNode;\n  /** The detail shown when the row is open. */\n  content: ReactNode;\n  /** Controls in the detail view — an Apply link, say. */\n  actions?: ReactNode;\n}\n\nexport interface ExpandableListProps\n  extends\n    Omit<ComponentPropsWithRef<\"ul\">, \"children\" | \"defaultValue\">,\n    VariantProps<typeof expandableListVariants> {\n  items: ExpandableListItem[];\n  /** The open item's id, or null (controlled). */\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  /** Accessible name of the Close button. */\n  closeLabel?: string;\n  rowClassName?: string;\n}\n\nconst transition = { type: \"spring\", bounce: 0.1, duration: 0.25 } as const;\n\nfunction Summary({\n  item,\n  layout,\n  detail = false,\n}: {\n  item: ExpandableListItem;\n  layout: (part: string) => string;\n  detail?: boolean;\n}) {\n  return (\n    <span className=\"flex w-full min-w-0 items-center gap-4 text-start\">\n      {item.media ? (\n        <motion.span\n          layoutId={layout(\"media\")}\n          aria-hidden=\"true\"\n          className=\"grid shrink-0 place-items-center [&_svg]:size-8\"\n        >\n          {item.media}\n        </motion.span>\n      ) : null}\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        {detail ? (\n          <Dialog.Title asChild>\n            <motion.h2\n              layoutId={layout(\"title\")}\n              className=\"text-sm font-medium text-foreground\"\n            >\n              {item.title}\n            </motion.h2>\n          </Dialog.Title>\n        ) : (\n          <motion.span layoutId={layout(\"title\")} className=\"font-medium text-foreground\">\n            {item.title}\n          </motion.span>\n        )}\n        {item.subtitle ? (\n          <span className=\"text-xs text-muted-foreground\">{item.subtitle}</span>\n        ) : null}\n        {item.meta ? <span className=\"text-xs text-muted-foreground\">{item.meta}</span> : null}\n      </span>\n    </span>\n  );\n}\n\n/** Rows that expand into a detail dialog, growing out of their place in the list. */\nexport function ExpandableList({\n  className,\n  density,\n  items,\n  value: valueProp,\n  defaultValue = null,\n  onValueChange,\n  closeLabel = \"Close\",\n  rowClassName,\n  ...props\n}: ExpandableListProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const openId = valueProp === undefined ? uncontrolled : valueProp;\n  const openItem = items.find((item) => item.id === openId);\n  const uid = useId();\n  const rows = useRef(new Map<string, HTMLButtonElement>());\n\n  function select(next: string | null) {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  }\n\n  const layoutFor = (id: string) => (part: string) => `${uid}-${part}-${id}`;\n\n  return (\n    <MotionConfig reducedMotion=\"user\" transition={transition}>\n      <LayoutGroup id={uid}>\n        <ul\n          data-slot=\"expandable-list\"\n          className={cn(expandableListVariants({ density }), className)}\n          {...props}\n        >\n          {items.map((item) => (\n            <li key={item.id}>\n              <motion.button\n                type=\"button\"\n                ref={(node: HTMLButtonElement | null) => {\n                  if (node) rows.current.set(item.id, node);\n                  else rows.current.delete(item.id);\n                }}\n                layoutId={layoutFor(item.id)(\"card\")}\n                aria-haspopup=\"dialog\"\n                aria-expanded={openId === item.id}\n                data-slot=\"expandable-list-row\"\n                data-state={openId === item.id ? \"open\" : \"closed\"}\n                onClick={() => select(item.id)}\n                whileTap={{ scale: 0.97 }}\n                className={cn(\n                  \"flex w-full cursor-pointer items-center gap-4 border border-border bg-card p-2 text-card-foreground shadow-xs select-none md:p-4\",\n                  \"transition-colors duration-[var(--duration-fast)] hover:bg-accent\",\n                  focusRing,\n                  rowClassName,\n                )}\n                style={{ borderRadius: 8 }}\n              >\n                <Summary item={item} layout={layoutFor(item.id)} />\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-list-overlay\"\n                    className=\"fixed inset-0 z-[var(--z-overlay)] bg-overlay backdrop-blur-xl\"\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                      rows.current.get(openItem.id)?.focus();\n                    }}\n                  >\n                    <motion.div\n                      layoutId={layoutFor(openItem.id)(\"card\")}\n                      data-slot=\"expandable-list-detail\"\n                      className=\"pointer-events-auto relative flex max-h-full w-[90%] max-w-2xl flex-col items-start gap-4 overflow-y-auto border border-border bg-card p-4 pe-14 text-card-foreground shadow-xl outline-none\"\n                      style={{ borderRadius: 12 }}\n                    >\n                      <Summary item={openItem} layout={layoutFor(openItem.id)} detail />\n                      <motion.div\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"flex w-full flex-col gap-4\"\n                      >\n                        <Dialog.Description asChild>\n                          <div className=\"text-sm text-muted-foreground\">\n                            {openItem.content}\n                          </div>\n                        </Dialog.Description>\n                        {openItem.actions ? (\n                          <div className=\"flex flex-wrap gap-2\">{openItem.actions}</div>\n                        ) : null}\n                      </motion.div>\n                      <Dialog.Close\n                        aria-label={closeLabel}\n                        data-slot=\"expandable-list-close\"\n                        className={cn(\n                          \"absolute end-3 top-3 grid size-8 place-items-center rounded-full text-muted-foreground\",\n                          \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\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    </MotionConfig>\n  );\n}\n\nexport { expandableListVariants };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { ExpandableList, ExpandableListItem, ExpandableListProps, expandableListVariants } from "./expandable-list.js";
+export { ExpandableList, type ExpandableListItem, type ExpandableListProps, expandableListVariants };