beez-ui 2.7.0 → 3.0.0

package/dist/components/card.js

@@ -1,84 +1,907 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a contained group of related content on
-* Arc's surface, panel radius and spacing. A card holding a link or button floats a little on fine-pointer hover,
-* and `CardMedia` drifts its photo in slowly while the card is pointed at. The compound shadcn structure is kept;
-* Arc's quick look is not part of it.
+* Arc's surface, panel radius and spacing, with optional media, an owner byline whose status rolls in word by word, a
+* trailing action and Arc's quick look. A card holding a link or button floats a little on fine-pointer hover and its
+* media drifts in slowly. With `details`, the title becomes the trigger of a dialog that grows out of the card: the
+* surface, photo, title and byline travel on one spring while the details settle in beneath them.
 */
-import * as React from "react";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { AnimatePresence, LayoutGroup, motion } from "motion/react";
+import { X } from "lucide-react";
+import { CARD_CLOSE_HIDDEN_SCALE, CARD_CLOSE_LABEL, CARD_CLOSE_PRESS_SCALE, CARD_DEFAULT_HEADING_LEVEL, CARD_DETAILS_OFFSET_PX, CARD_GROW_DURATION_S, CARD_RETURN_MS, CARD_SETTLE_DURATION_S, CARD_STATUS_OFFSET_EM, CARD_STATUS_WORD_STAGGER_S } from "../constants/card.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One critically damped spring carries the surface both ways, so it never overshoots and can reverse mid-flight. */
+const grow = {
+	...ARC_SPRING_SMOOTH,
+	visualDuration: CARD_GROW_DURATION_S
+};
+const settle = {
+	...ARC_SPRING_SMOOTH,
+	visualDuration: CARD_SETTLE_DURATION_S
+};
+const fade = { duration: ARC_DURATION.instant };
+/** Quick look extras arrive once the surface has mostly grown, so they never ride the stretch. */
+const reveal = {
+	delay: ARC_DURATION.instant,
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+const closeIn = {
+	delay: ARC_DURATION.instant,
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.enter]
+};
+/** A new status replaces the whole line: the old one lifts away quickly while the new words rise in one after another. */
+const statusLineMotion = {
+	enter: {},
+	center: {},
+	exit: {
+		opacity: 0,
+		y: `${-CARD_STATUS_OFFSET_EM}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`,
+		transition: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.standard]
+		}
+	}
+};
+const statusWordMotion = {
+	enter: {
+		opacity: 0,
+		y: `${CARD_STATUS_OFFSET_EM}em`,
+		filter: `blur(${ARC_BLUR.soft}px)`
+	},
+	center: (order) => ({
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			duration: ARC_DURATION.standard,
+			ease: [...ARC_EASE.enter],
+			delay: order * CARD_STATUS_WORD_STAGGER_S
+		}
+	})
+};
+/** The animated heading element of each title level. */
+const MOTION_HEADING = {
+	2: motion.h2,
+	3: motion.h3,
+	4: motion.h4
+};
+/** Splits a status into words and the spaces between them, so each word can rise on its own. */
+const STATUS_WORD_SEPARATOR = /(\s+)/;
+/** Card surface. The outline is a 1px ring in the border token, so the hover shadow can stack on it, and isolation
+* keeps the rounded clip on media while the card lifts (Safari drops it otherwise). */
+const cardClassName = "group/card relative isolate flex min-w-0 flex-col overflow-hidden rounded-(--radius-panel) bg-surface text-sm text-foreground ring-1 ring-border has-[[data-slot=card-trigger]:focus-visible]:ring-border-strong motion-safe:transition-[translate] motion-safe:duration-(--duration-spring) motion-safe:ease-(--ease-spring) hover-fine:has-[a,button]:motion-safe:-translate-y-0.5";
+const titleClassName = "m-0 w-fit max-w-full font-sans text-lg leading-[1.3] font-medium tracking-(--tracking-body) text-balance";
+const descriptionClassName = "m-0 mt-(--space-2) max-w-[34ch] text-sm leading-(--leading-body) text-pretty text-text-secondary";
 /**
-* Card surface. The outline is a 1px ring in the border token, so the hover shadow can stack on it, and isolation
-* keeps the rounded clip on media while the card lifts (Safari drops it otherwise).
+* Arc's status line: the full text for assistive technology, and a decorative copy whose words rise in when it changes.
+* @param props - The status text and whether motion is reduced.
+* @returns The polite status region.
 */
-function Card({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ _jsx(MotionSlot, {
-		kind: "card",
-		children: /* @__PURE__ */ _jsx("div", {
-			"data-slot": "card",
-			"data-size": size,
-			className: cn("group/card isolate flex min-w-0 flex-col gap-(--space-4) overflow-hidden rounded-(--radius-panel) bg-surface py-(--space-5) text-sm text-foreground ring-1 ring-border has-[>img:first-child]:pt-0 has-[>[data-slot=card-media]:first-child]:pt-0 data-[size=sm]:gap-(--space-3) data-[size=sm]:py-(--space-4) motion-safe:transition-[translate] motion-safe:duration-(--duration-spring) motion-safe:ease-(--ease-spring) hover-fine:has-[a,button]:motion-safe:-translate-y-0.5", className),
-			...props
-		})
-	});
+function CardStatus(t0) {
+	const $ = _c(12);
+	const { text, reduceMotion } = t0;
+	let t1;
+	if ($[0] !== text) {
+		t1 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: text
+		});
+		$[0] = text;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const t2 = reduceMotion ? false : "enter";
+	const t3 = reduceMotion ? undefined : "exit";
+	let t4;
+	if ($[2] !== text) {
+		t4 = text.split(STATUS_WORD_SEPARATOR).map(_temp);
+		$[2] = text;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== text) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "relative block",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: "block overflow-x-clip text-ellipsis",
+					variants: statusLineMotion,
+					initial: t2,
+					animate: "center",
+					exit: t3,
+					children: t4
+				}, text)
+			})
+		});
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = text;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== t1 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs("span", {
+			"data-slot": "card-status",
+			role: "status",
+			className: "relative overflow-x-clip text-text-muted tabular-nums whitespace-nowrap",
+			children: [t1, t5]
+		});
+		$[9] = t1;
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t6 = $[11];
+	}
+	return t6;
+}
+function _temp(part, index) {
+	return /* @__PURE__ */ _jsx(motion.span, {
+		className: "inline-block whitespace-pre",
+		custom: index / 2,
+		variants: statusWordMotion,
+		children: part
+	}, index);
 }
 /**
-* Arc's card media: a muted frame for a photo or illustration that zooms in slowly while the card is pointed at
-* and eases back a little faster. Place it first to sit flush with the top edge.
+* Reads a radius back in pixels: Motion only scale-corrects pixel radii, so token radii are converted for the morph.
+* @param node - Element whose document gives the root font size.
+* @param value - Computed radius, in pixels or rem.
+* @returns The radius in pixels, or `undefined` when it is not a length.
 */
-function CardMedia({ className, children, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-media",
-		className: cn("relative overflow-hidden bg-surface-muted", className),
-		...props,
-		children: /* @__PURE__ */ _jsx("div", {
-			className: "grid min-h-28 place-items-center transition-transform duration-(--duration-considered) ease-(--ease-standard) motion-reduce:transition-none pointer-fine:group-hover/card:scale-[1.04] pointer-fine:group-hover/card:duration-[calc(var(--duration-considered)*2)] motion-reduce:scale-100! [&>img]:size-full [&>img]:object-cover",
-			children
-		})
-	});
-}
-function CardHeader({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-header",
-		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-(--space-2) px-(--space-5) group-data-[size=sm]/card:px-(--space-4) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--space-5) group-data-[size=sm]/card:[.border-b]:pb-(--space-4)", className),
-		...props
-	});
-}
-function CardTitle({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-title",
-		className: cn("font-sans text-lg leading-[1.3] font-medium tracking-(--tracking-body) text-balance group-data-[size=sm]/card:text-base", className),
-		...props
-	});
-}
-function CardDescription({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-description",
-		className: cn("text-sm leading-(--leading-body) text-pretty text-text-secondary", className),
-		...props
-	});
+function toPixels(node, value) {
+	const amount = parseFloat(value);
+	if (!Number.isFinite(amount)) return undefined;
+	return value.trim().endsWith("rem") ? amount * parseFloat(getComputedStyle(node.ownerDocument.documentElement).fontSize) : amount;
 }
-function CardAction({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-action",
-		className: cn("relative z-1 col-start-2 row-span-2 row-start-1 flex flex-wrap gap-(--space-3) self-start justify-self-end", className),
-		...props
-	});
-}
-function CardContent({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-content",
-		className: cn("px-(--space-5) group-data-[size=sm]/card:px-(--space-4)", className),
-		...props
-	});
+/**
+* Tells whether an optional slot was given: `0` and `""` are content, while `undefined`, `null` and `false` leave it out.
+* @param node - Slot content.
+* @returns Whether the slot renders.
+*/
+function hasContent(node) {
+	return node !== undefined && node !== null && node !== false;
 }
-/** Arc's footer row: a byline or meta on the start side and actions on the end, without a tinted band. */
-function CardFooter({ className, ...props }) {
-	return /* @__PURE__ */ _jsx("div", {
-		"data-slot": "card-footer",
-		className: cn("flex items-center justify-between gap-(--space-3) px-(--space-5) group-data-[size=sm]/card:px-(--space-4)", className),
-		...props
-	});
+/**
+* A content card with optional media, byline, action and footer that can grow into a quick look dialog.
+* @param props - Arc's card content and quick look state, the heading level, a footer and native article attributes.
+* @returns The card article, wrapped in its quick look dialog when `details` is set.
+*/
+function Card(t0) {
+	const $ = _c(131);
+	let action;
+	let avatar;
+	let children;
+	let className;
+	let description;
+	let details;
+	let footer;
+	let media;
+	let meta;
+	let onOpenChange;
+	let openProp;
+	let props;
+	let ref;
+	let status;
+	let style;
+	let t1;
+	let t2;
+	let title;
+	if ($[0] !== t0) {
+		({title, description, media, action, avatar, meta, status, details, open: openProp, defaultOpen: t1, onOpenChange, footer, headingLevel: t2, children, className, style, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = action;
+		$[2] = avatar;
+		$[3] = children;
+		$[4] = className;
+		$[5] = description;
+		$[6] = details;
+		$[7] = footer;
+		$[8] = media;
+		$[9] = meta;
+		$[10] = onOpenChange;
+		$[11] = openProp;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = status;
+		$[15] = style;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = title;
+	} else {
+		action = $[1];
+		avatar = $[2];
+		children = $[3];
+		className = $[4];
+		description = $[5];
+		details = $[6];
+		footer = $[7];
+		media = $[8];
+		meta = $[9];
+		onOpenChange = $[10];
+		openProp = $[11];
+		props = $[12];
+		ref = $[13];
+		status = $[14];
+		style = $[15];
+		t1 = $[16];
+		t2 = $[17];
+		title = $[18];
+	}
+	const defaultOpen = t1 === undefined ? false : t1;
+	const headingLevel = t2 === undefined ? CARD_DEFAULT_HEADING_LEVEL : t2;
+	const reduceMotion = usePrefersReducedMotion();
+	const layoutGroupId = useId();
+	const [cardNode, attachCard] = useAttachedElement(ref);
+	const descriptionRef = useRef(null);
+	const quickLookRef = useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	let t3;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {};
+		$[19] = t3;
+	} else {
+		t3 = $[19];
+	}
+	const [geometry, setGeometry] = useState(t3);
+	const [landing, setLanding] = useState(null);
+	let t4;
+	if ($[20] !== details || $[21] !== title) {
+		t4 = hasContent(details) && hasContent(title);
+		$[20] = details;
+		$[21] = title;
+		$[22] = t4;
+	} else {
+		t4 = $[22];
+	}
+	const hasQuickLook = t4;
+	const isOpen = hasQuickLook ? openProp ?? uncontrolledOpen : false;
+	const shouldMorph = hasQuickLook && !reduceMotion;
+	const isReturning = !isOpen && landing !== null;
+	let t5;
+	if ($[23] !== description) {
+		t5 = hasContent(description);
+		$[23] = description;
+		$[24] = t5;
+	} else {
+		t5 = $[24];
+	}
+	const hasDescription = t5;
+	const MotionHeading = MOTION_HEADING[headingLevel];
+	let t6;
+	if ($[25] !== onOpenChange || $[26] !== openProp) {
+		t6 = (nextOpen) => {
+			if (openProp === undefined) {
+				setUncontrolledOpen(nextOpen);
+			}
+			onOpenChange?.(nextOpen);
+		};
+		$[25] = onOpenChange;
+		$[26] = openProp;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	const setOpen = t6;
+	let t7;
+	if ($[28] !== cardNode || $[29] !== shouldMorph) {
+		t7 = () => {
+			const node = cardNode;
+			const text = descriptionRef.current;
+			if (!shouldMorph || !node || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver(() => {
+				const computed = getComputedStyle(node);
+				const cardRadius = toPixels(node, computed.borderTopLeftRadius);
+				const panelRadius = toPixels(node, computed.getPropertyValue("--radius-surface"));
+				const measure = text?.offsetWidth || undefined;
+				setGeometry((current) => current.card !== undefined && current.measure === measure ? current : {
+					card: current.card ?? cardRadius,
+					panel: current.panel ?? panelRadius,
+					measure
+				});
+			});
+			observer.observe(node);
+			if (text) {
+				observer.observe(text);
+			}
+			return () => observer.disconnect();
+		};
+		$[28] = cardNode;
+		$[29] = shouldMorph;
+		$[30] = t7;
+	} else {
+		t7 = $[30];
+	}
+	let t8;
+	if ($[31] !== cardNode || $[32] !== hasDescription || $[33] !== shouldMorph) {
+		t8 = [
+			shouldMorph,
+			hasDescription,
+			cardNode
+		];
+		$[31] = cardNode;
+		$[32] = hasDescription;
+		$[33] = shouldMorph;
+		$[34] = t8;
+	} else {
+		t8 = $[34];
+	}
+	useEffect(t7, t8);
+	const wasOpen = useRef(isOpen);
+	let t10;
+	let t9;
+	if ($[35] !== cardNode || $[36] !== isOpen || $[37] !== shouldMorph) {
+		t9 = () => {
+			const hasClosed = wasOpen.current && !isOpen;
+			wasOpen.current = isOpen;
+			const node_0 = cardNode;
+			if (isOpen) {
+				setLanding(null);
+			} else {
+				if (hasClosed && shouldMorph && node_0) {
+					const box = node_0.getBoundingClientRect();
+					setLanding({
+						top: box.top,
+						left: box.left,
+						width: box.width,
+						height: box.height
+					});
+				}
+			}
+		};
+		t10 = [
+			isOpen,
+			shouldMorph,
+			cardNode
+		];
+		$[35] = cardNode;
+		$[36] = isOpen;
+		$[37] = shouldMorph;
+		$[38] = t10;
+		$[39] = t9;
+	} else {
+		t10 = $[38];
+		t9 = $[39];
+	}
+	useLayoutEffect(t9, t10);
+	let t11;
+	let t12;
+	if ($[40] !== isOpen) {
+		t11 = () => {
+			const panel = quickLookRef.current;
+			if (!panel) {
+				return;
+			}
+			panel.toggleAttribute("inert", !isOpen);
+			if (isOpen) {
+				panel.removeAttribute("aria-hidden");
+			} else {
+				panel.setAttribute("aria-hidden", "true");
+			}
+		};
+		t12 = [isOpen];
+		$[40] = isOpen;
+		$[41] = t11;
+		$[42] = t12;
+	} else {
+		t11 = $[41];
+		t12 = $[42];
+	}
+	useLayoutEffect(t11, t12);
+	let t13;
+	let t14;
+	if ($[43] !== isReturning) {
+		t13 = () => {
+			if (!isReturning) {
+				return;
+			}
+			const timer = window.setTimeout(() => setLanding(null), CARD_RETURN_MS);
+			return () => window.clearTimeout(timer);
+		};
+		t14 = [isReturning];
+		$[43] = isReturning;
+		$[44] = t13;
+		$[45] = t14;
+	} else {
+		t13 = $[44];
+		t14 = $[45];
+	}
+	useEffect(t13, t14);
+	let t15;
+	if ($[46] !== isOpen || $[47] !== isReturning || $[48] !== shouldMorph) {
+		t15 = (id, side, t16) => {
+			const layout = t16 === undefined ? true : t16;
+			return shouldMorph ? {
+				layoutId: id,
+				layout,
+				layoutCrossfade: false,
+				layoutDependency: side === "card" ? isOpen : isReturning ? "return" : "panel",
+				transition: { layout: side === "card" ? settle : grow }
+			} : {};
+		};
+		$[46] = isOpen;
+		$[47] = isReturning;
+		$[48] = shouldMorph;
+		$[49] = t15;
+	} else {
+		t15 = $[49];
+	}
+	const shared = t15;
+	let t16;
+	if ($[50] !== action || $[51] !== avatar || $[52] !== meta || $[53] !== reduceMotion || $[54] !== shared || $[55] !== status) {
+		t16 = (side_0) => {
+			const bylineAvatar = side_0 === "card" ? avatar : null;
+			const bylineAction = side_0 === "card" ? action : null;
+			return bylineAvatar || meta || status || bylineAction ? /* @__PURE__ */ _jsxs("div", {
+				"data-slot": "card-byline",
+				className: "mt-(--space-5) flex items-center justify-between gap-(--space-3)",
+				children: [bylineAvatar || meta || status ? /* @__PURE__ */ _jsxs(motion.div, {
+					className: "flex min-w-0 flex-auto items-center gap-(--space-3)",
+					...shared("byline", side_0, "position"),
+					children: [bylineAvatar ? /* @__PURE__ */ _jsx("span", {
+						className: "grid size-(--space-8) flex-none overflow-hidden rounded-(--radius-pill) bg-surface-muted *:size-full *:object-cover",
+						children: bylineAvatar
+					}) : null, /* @__PURE__ */ _jsxs("span", {
+						className: "grid min-w-0 grid-cols-[minmax(0,1fr)] text-xs leading-(--leading-body)",
+						children: [meta ? /* @__PURE__ */ _jsx("span", {
+							className: "overflow-hidden font-medium text-ellipsis whitespace-nowrap text-foreground",
+							children: meta
+						}) : null, status ? /* @__PURE__ */ _jsx(CardStatus, {
+							text: status,
+							reduceMotion
+						}) : null]
+					})]
+				}) : null, bylineAction ? /* @__PURE__ */ _jsx(motion.div, {
+					"data-slot": "card-action",
+					className: "relative z-1 flex flex-none flex-wrap gap-(--space-3)",
+					...shared("action", side_0, "position"),
+					children: bylineAction
+				}) : null]
+			}) : null;
+		};
+		$[50] = action;
+		$[51] = avatar;
+		$[52] = meta;
+		$[53] = reduceMotion;
+		$[54] = shared;
+		$[55] = status;
+		$[56] = t16;
+	} else {
+		t16 = $[56];
+	}
+	const byline = t16;
+	let t17;
+	if ($[57] !== footer) {
+		t17 = footer ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "card-footer",
+			className: "relative z-1 mt-(--space-5) flex items-center justify-between gap-(--space-3)",
+			children: footer
+		}) : null;
+		$[57] = footer;
+		$[58] = t17;
+	} else {
+		t17 = $[58];
+	}
+	const footerRow = t17;
+	const t18 = props;
+	let t19;
+	if ($[59] !== className) {
+		t19 = cn(cardClassName, className);
+		$[59] = className;
+		$[60] = t19;
+	} else {
+		t19 = $[60];
+	}
+	const t20 = geometry.card ?? style?.borderRadius;
+	let t21;
+	if ($[61] !== style || $[62] !== t20) {
+		t21 = {
+			...style,
+			borderRadius: t20
+		};
+		$[61] = style;
+		$[62] = t20;
+		$[63] = t21;
+	} else {
+		t21 = $[63];
+	}
+	let t22;
+	if ($[64] !== shared) {
+		t22 = shared("card", "card");
+		$[64] = shared;
+		$[65] = t22;
+	} else {
+		t22 = $[65];
+	}
+	let t23;
+	if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = {
+			default: ARC_SPRING_SNAPPY,
+			layout: settle
+		};
+		$[66] = t23;
+	} else {
+		t23 = $[66];
+	}
+	let t24;
+	if ($[67] !== media || $[68] !== shared) {
+		t24 = media ? /* @__PURE__ */ _jsx(motion.div, {
+			"data-slot": "card-media",
+			className: "relative overflow-hidden bg-surface-muted",
+			...shared("media", "card"),
+			children: /* @__PURE__ */ _jsx("div", {
+				className: "grid min-h-28 place-items-center transition-transform duration-(--duration-considered) ease-(--ease-standard) motion-reduce:transition-none pointer-fine:group-hover/card:scale-[1.04] pointer-fine:group-hover/card:duration-[calc(var(--duration-considered)*2)] motion-reduce:scale-100! [&>img]:size-full [&>img]:object-cover",
+				children: media
+			})
+		}) : null;
+		$[67] = media;
+		$[68] = shared;
+		$[69] = t24;
+	} else {
+		t24 = $[69];
+	}
+	let t25;
+	if ($[70] !== MotionHeading || $[71] !== hasQuickLook || $[72] !== shared || $[73] !== title) {
+		t25 = title !== undefined && title !== null ? /* @__PURE__ */ _jsx(MotionHeading, {
+			"data-slot": "card-title",
+			className: titleClassName,
+			...shared("title", "card"),
+			children: hasQuickLook ? /* @__PURE__ */ _jsx(DialogPrimitive.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ _jsx("button", {
+					type: "button",
+					"data-slot": "card-trigger",
+					className: "cursor-pointer border-0 bg-transparent p-0 text-left [font:inherit] [letter-spacing:inherit] text-inherit [-webkit-tap-highlight-color:transparent] after:absolute after:inset-0 after:content-[''] focus-visible:outline-none",
+					children: title
+				})
+			}) : title
+		}) : null;
+		$[70] = MotionHeading;
+		$[71] = hasQuickLook;
+		$[72] = shared;
+		$[73] = title;
+		$[74] = t25;
+	} else {
+		t25 = $[74];
+	}
+	let t26;
+	if ($[75] !== description || $[76] !== hasDescription || $[77] !== shared) {
+		t26 = hasDescription ? /* @__PURE__ */ _jsx(motion.p, {
+			ref: descriptionRef,
+			"data-slot": "card-description",
+			className: descriptionClassName,
+			...shared("description", "card", "position"),
+			children: description
+		}) : null;
+		$[75] = description;
+		$[76] = hasDescription;
+		$[77] = shared;
+		$[78] = t26;
+	} else {
+		t26 = $[78];
+	}
+	let t27;
+	if ($[79] !== children || $[80] !== hasQuickLook) {
+		t27 = hasQuickLook && children ? /* @__PURE__ */ _jsx("div", {
+			"data-slot": "card-body",
+			className: "pointer-events-none relative z-1 [&_:is(a,button,input,select,textarea,label,summary,iframe,video,audio,[tabindex],[contenteditable])]:pointer-events-auto",
+			children
+		}) : children;
+		$[79] = children;
+		$[80] = hasQuickLook;
+		$[81] = t27;
+	} else {
+		t27 = $[81];
+	}
+	let t28;
+	if ($[82] !== byline) {
+		t28 = byline("card");
+		$[82] = byline;
+		$[83] = t28;
+	} else {
+		t28 = $[83];
+	}
+	let t29;
+	if ($[84] !== footerRow || $[85] !== t25 || $[86] !== t26 || $[87] !== t27 || $[88] !== t28) {
+		t29 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "card-content",
+			className: "p-(--space-5)",
+			children: [
+				t25,
+				t26,
+				t27,
+				t28,
+				footerRow
+			]
+		});
+		$[84] = footerRow;
+		$[85] = t25;
+		$[86] = t26;
+		$[87] = t27;
+		$[88] = t28;
+		$[89] = t29;
+	} else {
+		t29 = $[89];
+	}
+	let t30;
+	if ($[90] !== attachCard || $[91] !== t18 || $[92] !== t19 || $[93] !== t21 || $[94] !== t22 || $[95] !== t24 || $[96] !== t29) {
+		t30 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "card",
+			children: /* @__PURE__ */ _jsxs(motion.article, {
+				...t18,
+				ref: attachCard,
+				"data-slot": "card",
+				className: t19,
+				style: t21,
+				...t22,
+				transition: t23,
+				children: [t24, t29]
+			})
+		});
+		$[90] = attachCard;
+		$[91] = t18;
+		$[92] = t19;
+		$[93] = t21;
+		$[94] = t22;
+		$[95] = t24;
+		$[96] = t29;
+		$[97] = t30;
+	} else {
+		t30 = $[97];
+	}
+	const card = t30;
+	if (!hasQuickLook) {
+		return card;
+	}
+	const t31 = geometry.measure ? `${geometry.measure}px` : undefined;
+	let t32;
+	if ($[98] !== isReturning || $[99] !== landing) {
+		t32 = landing && isReturning ? {
+			"--landing-top": `${landing.top}px`,
+			"--landing-left": `${landing.left}px`,
+			"--landing-width": `${landing.width}px`,
+			"--landing-height": `${landing.height}px`
+		} : {};
+		$[98] = isReturning;
+		$[99] = landing;
+		$[100] = t32;
+	} else {
+		t32 = $[100];
+	}
+	let t33;
+	if ($[101] !== geometry.panel || $[102] !== t31 || $[103] !== t32) {
+		t33 = {
+			borderRadius: geometry.panel,
+			"--card-measure": t31,
+			...t32
+		};
+		$[101] = geometry.panel;
+		$[102] = t31;
+		$[103] = t32;
+		$[104] = t33;
+	} else {
+		t33 = $[104];
+	}
+	const panelStyle = t33;
+	let t34;
+	if ($[105] !== byline || $[106] !== description || $[107] !== details || $[108] !== geometry.card || $[109] !== geometry.panel || $[110] !== hasDescription || $[111] !== isOpen || $[112] !== isReturning || $[113] !== layoutGroupId || $[114] !== media || $[115] !== panelStyle || $[116] !== reduceMotion || $[117] !== shared || $[118] !== shouldMorph || $[119] !== title) {
+		t34 = isOpen || isReturning ? /* @__PURE__ */ _jsxs(DialogPrimitive.Portal, {
+			forceMount: true,
+			children: [/* @__PURE__ */ _jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ _jsx(DialogPrimitive.Overlay, {
+				asChild: true,
+				forceMount: true,
+				children: /* @__PURE__ */ _jsx(motion.div, {
+					"data-slot": "card-quick-look-overlay",
+					className: "fixed inset-0 z-50 bg-[oklch(10%_0_0/0.46)] supports-backdrop-filter:backdrop-blur-[7px]",
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: {
+						opacity: 0,
+						transition: reduceMotion ? fade : {
+							duration: ARC_DURATION.exit,
+							ease: [...ARC_EASE.standard]
+						}
+					},
+					transition: reduceMotion ? fade : {
+						duration: ARC_DURATION.standard,
+						ease: [...ARC_EASE.enter]
+					}
+				})
+			}, "overlay") : null }), /* @__PURE__ */ _jsx(DialogPrimitive.Content, {
+				asChild: true,
+				forceMount: true,
+				...hasDescription ? {} : { "aria-describedby": undefined },
+				children: /* @__PURE__ */ _jsxs(motion.div, {
+					ref: quickLookRef,
+					"data-slot": "card-quick-look",
+					"data-returning": isReturning || undefined,
+					className: "group/quick-look fixed inset-0 z-50 m-auto h-fit max-h-[calc(100dvh-var(--space-8))] w-[min(calc(100vw-var(--space-8)),30rem)] overflow-x-hidden overflow-y-auto overscroll-contain rounded-(--radius-surface) border border-border bg-surface-raised text-sm text-foreground shadow-(--shadow-floating) transition-[background-color,box-shadow] duration-(--duration-standard) ease-(--ease-standard) focus:outline-none data-returning:pointer-events-none data-returning:inset-auto data-returning:top-(--landing-top) data-returning:left-(--landing-left) data-returning:m-0 data-returning:h-(--landing-height) data-returning:max-h-none data-returning:w-(--landing-width) data-returning:overflow-hidden data-returning:bg-surface data-returning:shadow-none",
+					"data-framer-portal-id": layoutGroupId,
+					layoutScroll: true,
+					style: panelStyle,
+					...shouldMorph ? {
+						...shared("card", "panel"),
+						initial: false,
+						animate: geometry.card !== undefined && geometry.panel !== undefined ? { borderRadius: isReturning ? geometry.card : geometry.panel } : undefined,
+						transition: {
+							layout: isReturning ? settle : grow,
+							borderRadius: isReturning ? settle : grow
+						},
+						exit: {
+							opacity: 0,
+							transition: { duration: 0 }
+						}
+					} : {
+						initial: { opacity: 0 },
+						animate: { opacity: 1 },
+						exit: {
+							opacity: 0,
+							transition: fade
+						},
+						transition: fade
+					},
+					children: [
+						media ? /* @__PURE__ */ _jsx(motion.div, {
+							className: "relative overflow-hidden bg-surface-muted",
+							...shared("media", "panel"),
+							children: /* @__PURE__ */ _jsx("div", {
+								className: "grid min-h-28 place-items-center [&>img]:size-full [&>img]:object-cover",
+								children: media
+							})
+						}) : null,
+						/* @__PURE__ */ _jsx(motion.span, {
+							className: "absolute top-(--space-4) right-(--space-4) z-2 grid",
+							initial: reduceMotion ? { opacity: 0 } : {
+								opacity: 0,
+								scale: CARD_CLOSE_HIDDEN_SCALE
+							},
+							animate: isReturning ? {
+								opacity: 0,
+								scale: CARD_CLOSE_HIDDEN_SCALE
+							} : {
+								opacity: 1,
+								scale: 1
+							},
+							transition: isReturning || reduceMotion ? fade : closeIn,
+							children: /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+								asChild: true,
+								children: /* @__PURE__ */ _jsx(motion.button, {
+									type: "button",
+									"data-slot": "card-quick-look-close",
+									"aria-label": CARD_CLOSE_LABEL,
+									className: "grid size-(--space-8) cursor-pointer place-items-center rounded-(--radius-pill) border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface-raised)_74%,transparent)] p-0 text-foreground [-webkit-tap-highlight-color:transparent] backdrop-blur-[12px] transition-[background-color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-raised",
+									whileTap: reduceMotion ? undefined : { scale: CARD_CLOSE_PRESS_SCALE },
+									transition: ARC_SPRING_SNAPPY,
+									children: /* @__PURE__ */ _jsx(X, {
+										className: "size-4",
+										strokeWidth: 1.75,
+										"aria-hidden": "true"
+									})
+								})
+							})
+						}),
+						/* @__PURE__ */ _jsxs("div", {
+							className: "p-(--space-6) group-data-returning/quick-look:p-(--space-5)",
+							children: [
+								/* @__PURE__ */ _jsx(DialogPrimitive.Title, {
+									asChild: true,
+									children: /* @__PURE__ */ _jsx(motion.h2, {
+										className: cn(titleClassName, "text-xl group-data-returning/quick-look:text-lg"),
+										...shared("title", "panel"),
+										children: title
+									})
+								}),
+								hasDescription ? /* @__PURE__ */ _jsx(DialogPrimitive.Description, {
+									asChild: true,
+									children: /* @__PURE__ */ _jsx(motion.p, {
+										className: cn(descriptionClassName, "max-w-[var(--card-measure,34ch)]"),
+										...shared("description", "panel", "position"),
+										children: description
+									})
+								}) : null,
+								byline("panel"),
+								/* @__PURE__ */ _jsx(motion.div, {
+									"data-slot": "card-details",
+									className: "mt-(--space-6) border-t border-border pt-(--space-5) text-sm leading-(--leading-body) text-text-secondary",
+									initial: reduceMotion ? false : {
+										opacity: 0,
+										y: CARD_DETAILS_OFFSET_PX
+									},
+									animate: isReturning ? {
+										opacity: 0,
+										y: 0
+									} : {
+										opacity: 1,
+										y: 0
+									},
+									exit: {
+										opacity: 0,
+										transition: fade
+									},
+									transition: isReturning || reduceMotion ? fade : reveal,
+									children: details
+								})
+							]
+						})
+					]
+				})
+			})]
+		}, "quick-look") : null;
+		$[105] = byline;
+		$[106] = description;
+		$[107] = details;
+		$[108] = geometry.card;
+		$[109] = geometry.panel;
+		$[110] = hasDescription;
+		$[111] = isOpen;
+		$[112] = isReturning;
+		$[113] = layoutGroupId;
+		$[114] = media;
+		$[115] = panelStyle;
+		$[116] = reduceMotion;
+		$[117] = shared;
+		$[118] = shouldMorph;
+		$[119] = title;
+		$[120] = t34;
+	} else {
+		t34 = $[120];
+	}
+	let t35;
+	if ($[121] !== t34) {
+		t35 = /* @__PURE__ */ _jsx(AnimatePresence, { children: t34 });
+		$[121] = t34;
+		$[122] = t35;
+	} else {
+		t35 = $[122];
+	}
+	let t36;
+	if ($[123] !== card || $[124] !== layoutGroupId || $[125] !== t35) {
+		t36 = /* @__PURE__ */ _jsxs(LayoutGroup, {
+			id: layoutGroupId,
+			children: [card, t35]
+		});
+		$[123] = card;
+		$[124] = layoutGroupId;
+		$[125] = t35;
+		$[126] = t36;
+	} else {
+		t36 = $[126];
+	}
+	let t37;
+	if ($[127] !== isOpen || $[128] !== setOpen || $[129] !== t36) {
+		t37 = /* @__PURE__ */ _jsx(DialogPrimitive.Root, {
+			open: isOpen,
+			onOpenChange: setOpen,
+			children: t36
+		});
+		$[127] = isOpen;
+		$[128] = setOpen;
+		$[129] = t36;
+		$[130] = t37;
+	} else {
+		t37 = $[130];
+	}
+	return t37;
 }
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia };
+export { Card };