@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/card-spread/card-spread-layouts.js

@@ -0,0 +1,235 @@
+//#region src/components/card-spread/card-spread-layouts.ts
+const CARD_SPREAD_LAYOUTS = [
+	"arc",
+	"long-arc",
+	"linear",
+	"corner",
+	"stamp",
+	"cascade",
+	"scatter",
+	"wheel"
+];
+const BOTTOM = {
+	x: 0,
+	y: 100
+};
+const CENTRE = {
+	x: 0,
+	y: 50
+};
+/** Stacking order that keeps the centre card on top and falls off symmetrically. */
+function centred(d, count) {
+	return Math.round(count - Math.abs(d) * 2);
+}
+/** The card sitting exactly at the centre, if there is one (odd counts only). */
+function isCentre(d) {
+	return Math.abs(d) < .5;
+}
+/**
+* The shared shape of amicro's arcs: a fixed step in angle and distance, and a
+* parabolic drop. `lift` is how far the centre card rises, in units of
+* `offset × centre`; it is what separates the ARC's steep curve from the Long
+* ARC's and Stamp's flatter one.
+*/
+function arcPose(lift) {
+	return (d, _i, count, t) => {
+		const centre = (count - 1) / 2;
+		return {
+			x: d * t.gap,
+			y: t.offset * (d * d - lift * centre),
+			rotate: d * t.arc,
+			scale: isCentre(d) ? 1.05 : 1,
+			z: centred(d, count)
+		};
+	};
+}
+/**
+* Small fixed offsets that make the dealt hand look dealt rather than ruled.
+* Deterministic — the same card always lands in the same place — and taken
+* from the difference between amicro's hand-placed coordinates and the
+* formula, so five cards land where amicro put them.
+*/
+const SCATTER_JITTER = [
+	{
+		x: -1,
+		y: -1.5,
+		r: 0
+	},
+	{
+		x: 2,
+		y: 1.75,
+		r: 1
+	},
+	{
+		x: 0,
+		y: 0,
+		r: 2
+	},
+	{
+		x: -2,
+		y: 4.5,
+		r: 1
+	},
+	{
+		x: 1,
+		y: 1.5,
+		r: 1
+	}
+];
+const LAYOUTS = {
+	arc: {
+		defaults: {
+			arc: 15,
+			gap: 28,
+			offset: 2.8
+		},
+		origin: BOTTOM,
+		open: arcPose(1)
+	},
+	"long-arc": {
+		defaults: {
+			arc: 7.5,
+			gap: 55,
+			offset: 3.5
+		},
+		origin: BOTTOM,
+		open: arcPose(.4)
+	},
+	linear: {
+		defaults: {
+			arc: 0,
+			gap: 35,
+			offset: 0
+		},
+		origin: CENTRE,
+		open: (d, _i, count, t) => ({
+			x: d * t.gap,
+			y: t.offset * d * d,
+			rotate: d * t.arc,
+			scale: isCentre(d) ? 1.05 : 1,
+			z: centred(d, count)
+		})
+	},
+	corner: {
+		defaults: {
+			arc: 10,
+			gap: 0,
+			offset: 0
+		},
+		origin: {
+			x: -50,
+			y: 100
+		},
+		open: (_d, i, count, t) => ({
+			x: i * t.gap,
+			y: i * t.offset,
+			rotate: (i - 1) * t.arc,
+			scale: i === Math.floor((count - 1) / 2) ? 1.03 : 1,
+			z: count - i
+		})
+	},
+	stamp: {
+		defaults: {
+			arc: 12.5,
+			gap: 70,
+			offset: 7.1
+		},
+		origin: BOTTOM,
+		open: arcPose(.4)
+	},
+	cascade: {
+		defaults: {
+			arc: 6,
+			gap: 11,
+			offset: 16
+		},
+		origin: CENTRE,
+		open: (d, _i, count, t) => ({
+			x: d * t.gap,
+			y: -d * t.offset - t.offset / 2,
+			rotate: d * t.arc,
+			scale: isCentre(d) ? 1.05 : .98,
+			z: centred(d, count)
+		}),
+		rest: (d) => ({ y: d * 1.1 })
+	},
+	scatter: {
+		defaults: {
+			arc: 7,
+			gap: 29,
+			offset: 6.75
+		},
+		origin: CENTRE,
+		open: (d, i, count, t) => {
+			const jitter = SCATTER_JITTER[i % SCATTER_JITTER.length] ?? {
+				x: 0,
+				y: 0,
+				r: 0
+			};
+			return {
+				x: d * t.gap + jitter.x,
+				y: t.offset * d * d - 17 + jitter.y,
+				rotate: d * t.arc + jitter.r,
+				scale: isCentre(d) ? 1.05 : .98,
+				z: centred(d, count)
+			};
+		}
+	},
+	wheel: {
+		defaults: {
+			arc: 18,
+			gap: 0,
+			offset: 2.8
+		},
+		origin: {
+			x: 0,
+			y: 110
+		},
+		open: (d, _i, count, t) => {
+			const centre = (count - 1) / 2;
+			return {
+				x: d * t.gap,
+				y: t.offset * (d * d - centre * centre - 1.6),
+				rotate: d * t.arc,
+				scale: isCentre(d) ? 1.05 : .98,
+				z: centred(d, count)
+			};
+		}
+	}
+};
+/** The tuning a layout uses when none is given. */
+function getCardSpreadDefaults(layout) {
+	return { ...LAYOUTS[layout].defaults };
+}
+/** Where a layout's cards pivot. */
+function getCardSpreadOrigin(layout) {
+	return { ...LAYOUTS[layout].origin };
+}
+/**
+* The pose of card `index` of `count`, open or closed.
+*
+* Undefined tuning values fall back to the layout's defaults, so a consumer
+* can adjust one knob without restating the others.
+*/
+function getCardSpreadPose(layout, index, count, open, tuning = {}) {
+	const spec = LAYOUTS[layout];
+	const d = index - (count - 1) / 2;
+	if (!open) return {
+		x: 0,
+		y: 0,
+		rotate: 0,
+		scale: 1,
+		z: layout === "corner" ? count - index : centred(d, count),
+		...spec.rest?.(d, index, count)
+	};
+	const t = {
+		arc: tuning.arc ?? spec.defaults.arc,
+		gap: tuning.gap ?? spec.defaults.gap,
+		offset: tuning.offset ?? spec.defaults.offset
+	};
+	return spec.open(d, index, count, t);
+}
+//#endregion
+export { CARD_SPREAD_LAYOUTS, getCardSpreadDefaults, getCardSpreadOrigin, getCardSpreadPose };
+
+//# sourceMappingURL=card-spread-layouts.js.map

package/dist/components/card-spread/card-spread-layouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-spread-layouts.js","names":[],"sources":["../../../src/components/card-spread/card-spread-layouts.ts"],"sourcesContent":["// Ported from amicro \"Card Spreads\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\n\n/*\n * The geometry of every spread, as pure functions of (index, count).\n *\n * amicro hard-codes each spread for five (or seven) cards in pixels, for a\n * card 128 × 176 px. Here each is one formula, so any number of cards works,\n * and every distance is a percentage of the card itself — `translate(%)`\n * resolves against the element's own box — so a spread keeps its proportions\n * at any card size. The defaults reproduce amicro's positions to within a few\n * pixels at five cards.\n *\n * Units, in every pose:\n * - `x` is a percentage of the card's width (positive = toward the inline end\n *   once the component applies its direction flip),\n * - `y` a percentage of the card's height (positive = down),\n * - `rotate` degrees (positive = clockwise in LTR),\n * - `scale` a factor, `z` a stacking order.\n */\n\nexport const CARD_SPREAD_LAYOUTS = [\n  \"arc\",\n  \"long-arc\",\n  \"linear\",\n  \"corner\",\n  \"stamp\",\n  \"cascade\",\n  \"scatter\",\n  \"wheel\",\n] as const;\n\nexport type CardSpreadLayout = (typeof CARD_SPREAD_LAYOUTS)[number];\n\nexport interface CardSpreadPose {\n  x: number;\n  y: number;\n  rotate: number;\n  scale: number;\n  z: number;\n}\n\n/**\n * The three knobs amicro's adjustable Stamp Arc exposes, generalised to every\n * layout. Each layout reads the ones that mean something to it.\n */\nexport interface CardSpreadTuning {\n  /** Rotation between neighbouring cards, in degrees. */\n  arc?: number;\n  /** Horizontal distance between neighbouring cards, as a percentage of card width. */\n  gap?: number;\n  /**\n   * Vertical travel, as a percentage of card height. For the curved layouts it\n   * is the curvature: a card `d` steps from the centre drops `offset × d²`.\n   * For `cascade` it is the rise per card.\n   */\n  offset?: number;\n}\n\nexport interface CardSpreadOrigin {\n  /** Horizontal offset of the transform origin from the card's centre, in % of its width. */\n  x: number;\n  /** Vertical transform origin, in % of the card's height from its top edge. */\n  y: number;\n}\n\ninterface LayoutSpec {\n  defaults: Required<CardSpreadTuning>;\n  origin: CardSpreadOrigin;\n  open: (d: number, i: number, count: number, t: Required<CardSpreadTuning>) => CardSpreadPose;\n  rest?: (d: number, i: number, count: number) => Partial<CardSpreadPose>;\n}\n\nconst BOTTOM: CardSpreadOrigin = { x: 0, y: 100 };\nconst CENTRE: CardSpreadOrigin = { x: 0, y: 50 };\n\n/** Stacking order that keeps the centre card on top and falls off symmetrically. */\nfunction centred(d: number, count: number): number {\n  return Math.round(count - Math.abs(d) * 2);\n}\n\n/** The card sitting exactly at the centre, if there is one (odd counts only). */\nfunction isCentre(d: number): boolean {\n  return Math.abs(d) < 0.5;\n}\n\n/**\n * The shared shape of amicro's arcs: a fixed step in angle and distance, and a\n * parabolic drop. `lift` is how far the centre card rises, in units of\n * `offset × centre`; it is what separates the ARC's steep curve from the Long\n * ARC's and Stamp's flatter one.\n */\nfunction arcPose(lift: number): LayoutSpec[\"open\"] {\n  return (d, _i, count, t) => {\n    const centre = (count - 1) / 2;\n    return {\n      x: d * t.gap,\n      y: t.offset * (d * d - lift * centre),\n      rotate: d * t.arc,\n      scale: isCentre(d) ? 1.05 : 1,\n      z: centred(d, count),\n    };\n  };\n}\n\n/**\n * Small fixed offsets that make the dealt hand look dealt rather than ruled.\n * Deterministic — the same card always lands in the same place — and taken\n * from the difference between amicro's hand-placed coordinates and the\n * formula, so five cards land where amicro put them.\n */\nconst SCATTER_JITTER: readonly { x: number; y: number; r: number }[] = [\n  { x: -1, y: -1.5, r: 0 },\n  { x: 2, y: 1.75, r: 1 },\n  { x: 0, y: 0, r: 2 },\n  { x: -2, y: 4.5, r: 1 },\n  { x: 1, y: 1.5, r: 1 },\n];\n\nconst LAYOUTS: Record<CardSpreadLayout, LayoutSpec> = {\n  // ARC (5 Cards) and ARC (7 Cards): 15° and ~36 px per step, a 5 px/step² curve.\n  arc: {\n    defaults: { arc: 15, gap: 28, offset: 2.8 },\n    origin: BOTTOM,\n    open: arcPose(1),\n  },\n  // Long ARC (5 Cards): half the angle, twice the reach.\n  \"long-arc\": {\n    defaults: { arc: 7.5, gap: 55, offset: 3.5 },\n    origin: BOTTOM,\n    open: arcPose(0.4),\n  },\n  // Linear Spread: a row, no rotation, no curve.\n  linear: {\n    defaults: { arc: 0, gap: 35, offset: 0 },\n    origin: CENTRE,\n    open: (d, _i, count, t) => ({\n      x: d * t.gap,\n      y: t.offset * d * d,\n      rotate: d * t.arc,\n      scale: isCentre(d) ? 1.05 : 1,\n      z: centred(d, count),\n    }),\n  },\n  // Corner Fan: pivots on the bottom inline-start corner, first card a step back.\n  corner: {\n    defaults: { arc: 10, gap: 0, offset: 0 },\n    origin: { x: -50, y: 100 },\n    open: (_d, i, count, t) => ({\n      x: i * t.gap,\n      y: i * t.offset,\n      rotate: (i - 1) * t.arc,\n      scale: i === Math.floor((count - 1) / 2) ? 1.03 : 1,\n      z: count - i,\n    }),\n  },\n  // Stamp Arc (Adjustable): the widest, flattest arc; arc/gap/offset are its sliders.\n  stamp: {\n    defaults: { arc: 12.5, gap: 70, offset: 7.1 },\n    origin: BOTTOM,\n    open: arcPose(0.4),\n  },\n  // Cascade Stagger Fan: climbs diagonally, each card a step up and across.\n  cascade: {\n    defaults: { arc: 6, gap: 11, offset: 16 },\n    origin: CENTRE,\n    open: (d, _i, count, t) => ({\n      x: d * t.gap,\n      y: -d * t.offset - t.offset / 2,\n      rotate: d * t.arc,\n      scale: isCentre(d) ? 1.05 : 0.98,\n      z: centred(d, count),\n    }),\n    // Closed, the deck shows its edges: each card sits a hair below the last.\n    rest: (d) => ({ y: d * 1.1 }),\n  },\n  // Scatter Desk Deal: an overlapping, slightly irregular dealt hand.\n  scatter: {\n    defaults: { arc: 7, gap: 29, offset: 6.75 },\n    origin: CENTRE,\n    open: (d, i, count, t) => {\n      const jitter = SCATTER_JITTER[i % SCATTER_JITTER.length] ?? { x: 0, y: 0, r: 0 };\n      return {\n        x: d * t.gap + jitter.x,\n        y: t.offset * d * d - 17 + jitter.y,\n        rotate: d * t.arc + jitter.r,\n        scale: isCentre(d) ? 1.05 : 0.98,\n        z: centred(d, count),\n      };\n    },\n  },\n  // Wheel Radial Fan: rotates about a hub just below the cards.\n  wheel: {\n    defaults: { arc: 18, gap: 0, offset: 2.8 },\n    origin: { x: 0, y: 110 },\n    open: (d, _i, count, t) => {\n      const centre = (count - 1) / 2;\n      return {\n        x: d * t.gap,\n        y: t.offset * (d * d - centre * centre - 1.6),\n        rotate: d * t.arc,\n        scale: isCentre(d) ? 1.05 : 0.98,\n        z: centred(d, count),\n      };\n    },\n  },\n};\n\n/** The tuning a layout uses when none is given. */\nexport function getCardSpreadDefaults(layout: CardSpreadLayout): Required<CardSpreadTuning> {\n  return { ...LAYOUTS[layout].defaults };\n}\n\n/** Where a layout's cards pivot. */\nexport function getCardSpreadOrigin(layout: CardSpreadLayout): CardSpreadOrigin {\n  return { ...LAYOUTS[layout].origin };\n}\n\n/**\n * The pose of card `index` of `count`, open or closed.\n *\n * Undefined tuning values fall back to the layout's defaults, so a consumer\n * can adjust one knob without restating the others.\n */\nexport function getCardSpreadPose(\n  layout: CardSpreadLayout,\n  index: number,\n  count: number,\n  open: boolean,\n  tuning: CardSpreadTuning = {},\n): CardSpreadPose {\n  const spec = LAYOUTS[layout];\n  const d = index - (count - 1) / 2;\n\n  if (!open) {\n    const base: CardSpreadPose = {\n      x: 0,\n      y: 0,\n      rotate: 0,\n      scale: 1,\n      z: layout === \"corner\" ? count - index : centred(d, count),\n    };\n    return { ...base, ...spec.rest?.(d, index, count) };\n  }\n\n  const t: Required<CardSpreadTuning> = {\n    arc: tuning.arc ?? spec.defaults.arc,\n    gap: tuning.gap ?? spec.defaults.gap,\n    offset: tuning.offset ?? spec.defaults.offset,\n  };\n  return spec.open(d, index, count, t);\n}\n"],"mappings":"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"}

package/dist/components/card-spread/card-spread.d.ts

@@ -0,0 +1,52 @@
+import { CardSpreadLayout, CardSpreadTuning } from "./card-spread-layouts.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/card-spread/card-spread.d.ts
+/** The deck: sized like one card, with the spread overflowing it. */
+declare const cardSpreadVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** A card's surface. */
+declare const cardSpreadItemVariants: (props?: ({
+  edge?: "rounded" | "stamp" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CardSpreadTrigger = "hover" | "click" | "manual";
+interface CardSpreadProps extends ComponentPropsWithRef<"div">, VariantProps<typeof cardSpreadVariants>, CardSpreadTuning {
+  /** How the cards fan out. `arc` with seven children is amicro's ARC (7 Cards). */
+  layout?: CardSpreadLayout;
+  /** Controlled pinned-open state. Hover and focus still open it transiently. */
+  open?: boolean;
+  /** Initial pinned-open state when uncontrolled. */
+  defaultOpen?: boolean;
+  /** Called when the toggle (click, tap, Enter, Space or Escape) pins or unpins the spread. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * What opens the spread.
+   *
+   * - `hover` (default): hover, keyboard focus anywhere inside, or pinned by
+   *   the deck's toggle.
+   * - `click`: only the toggle.
+   * - `manual`: only the `open` prop; no toggle is rendered.
+   */
+  trigger?: CardSpreadTrigger;
+  /** Milliseconds between one card starting to move and the next. Scaled for reduced motion. */
+  stagger?: number;
+  /** Card edge for every item. Defaults to `stamp` for the stamp layout. */
+  edge?: "rounded" | "stamp";
+  /** Accessible name of the pin toggle a deck of non-interactive cards gets. */
+  toggleLabel?: string;
+}
+/** A stack of cards that fans out into a layout on hover, focus, or when pinned. */
+declare function CardSpread({ className, children, layout, size, open: openProp, defaultOpen, onOpenChange, trigger, stagger, edge, toggleLabel, arc, gap, offset, ref, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }: CardSpreadProps): import("react").JSX.Element;
+interface CardSpreadItemProps extends ComponentPropsWithRef<"div">, VariantProps<typeof cardSpreadItemVariants> {
+  /**
+   * Render the card surface as your own element — an `<a>` or `<button>` for
+   * a card that goes somewhere or does something.
+   */
+  asChild?: boolean;
+}
+/** One card. Its position comes from its index in the deck. */
+declare function CardSpreadItem({ className, asChild, edge, style, ...props }: CardSpreadItemProps): import("react").JSX.Element;
+//#endregion
+export { CardSpread, CardSpreadItem, CardSpreadItemProps, CardSpreadProps, CardSpreadTrigger, cardSpreadItemVariants, cardSpreadVariants };
+//# sourceMappingURL=card-spread.d.ts.map

package/dist/components/card-spread/card-spread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-spread.d.ts","names":[],"sources":["../../../src/components/card-spread/card-spread.tsx"],"mappings":";;;;;cAkEM,qBAAkB;;6CAYtB;;cAGI,yBAAsB;;6CAiB3B;KAqBW;UAqCK,wBAEb,8BACA,oBAAoB,qBACpB;;EAEF,SAAS;;EAET;;EAEA;;EAEA,gBAAgB;;;;;;;;;EAShB,UAAU;;EAEV;;EAEA;;EAEA;;;iBAIc,aACd,WACA,UACA,QACA,MACA,MAAM,UACN,aACA,cACA,SACA,SACA,MACA,aACA,KACA,KACA,QACA,KACA,gBACA,gBACA,eACA,SACA,WACG,SACF,kCAAe,IAAA;UA4ID,4BACP,8BAA8B,oBAAoB;;;;;EAK1D;;;iBAIc,iBACd,WACA,SACA,MACA,UACG,SACF,sCAAmB,IAAA"}

package/dist/components/card-spread/card-spread.js

@@ -0,0 +1,224 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { getCardSpreadOrigin, getCardSpreadPose } from "./card-spread-layouts.js";
+import { Slot } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Children, Fragment as Fragment$1, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
+//#region src/components/card-spread/card-spread.tsx
+const PREFIX = "dowel-card-spread";
+const STYLES = `
+[data-slot=card-spread]{--card-spread-flip:1}
+[dir=rtl] [data-slot=card-spread]{--card-spread-flip:-1}
+[data-slot=card-spread]:dir(rtl){--card-spread-flip:-1}
+[data-slot=card-spread]:dir(ltr){--card-spread-flip:1}
+`;
+const FOCUSABLE = "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"])";
+/** The deck: sized like one card, with the spread overflowing it. */
+const cardSpreadVariants = cva("relative isolate shrink-0", {
+	variants: { 
+	/** The card size. Override with `className` (`w-* h-*`) for anything else. */
+size: {
+		sm: "h-32 w-24",
+		md: "h-44 w-32",
+		lg: "h-56 w-40"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A card's surface. */
+const cardSpreadItemVariants = cva("block size-full overflow-hidden bg-muted text-muted-foreground", {
+	variants: { 
+	/**
+	* `rounded` is a plain card. `stamp` perforates all four edges with a CSS
+	* mask — the Stamp Arc's postage stamps.
+	*/
+edge: {
+		rounded: "rounded-2xl border border-border shadow-md",
+		stamp: "rounded-none"
+	} },
+	defaultVariants: { edge: "rounded" }
+});
+/**
+* Perforations: a circle punched out every `--card-spread-hole` + gap along
+* each edge, and a solid block through the middle. The mask only reads alpha,
+* so `black` here is opacity, not a colour.
+*/
+const STAMP_MASK = ["radial-gradient(var(--card-spread-hole), transparent 98%, black) round calc(-1.5 * var(--card-spread-hole) - 0.1875rem) calc(-1.5 * var(--card-spread-hole) - 0.1875rem) / calc(3 * var(--card-spread-hole) + 0.375rem) calc(3 * var(--card-spread-hole) + 0.375rem)", "linear-gradient(black 0 0) no-repeat 50% / calc(100% - 3 * var(--card-spread-hole) - 0.375rem) calc(100% - 3 * var(--card-spread-hole) - 0.375rem)"].join(", ");
+const STAMP_STYLE = {
+	"--card-spread-hole": "0.3125rem",
+	mask: STAMP_MASK,
+	WebkitMask: STAMP_MASK
+};
+/**
+* The cards, in deck order.
+*
+* A card's position comes from its index among its siblings, so the cards must
+* be children of the spread itself. Fragments are opened up, because
+* `<>{a}{b}</>` is still a list of cards; anything else is counted as one card,
+* and a wrapper component that renders several cards would put them all at
+* index 0 on top of each other — so development builds say so (see
+* CardSpread).
+*/
+function flattenItems(children) {
+	const items = [];
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		if (child.type === Fragment$1) {
+			items.push(...flattenItems(child.props.children));
+			continue;
+		}
+		items.push(child);
+	}
+	return items;
+}
+const SpreadContext = createContext(null);
+const IndexContext = createContext(0);
+/** A stack of cards that fans out into a layout on hover, focus, or when pinned. */
+function CardSpread({ className, children, layout = "arc", size, open: openProp, defaultOpen = false, onOpenChange, trigger = "hover", stagger = 30, edge, toggleLabel = "Spread cards", arc, gap, offset, ref, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const controlled = openProp !== void 0;
+	const pinned = controlled ? openProp : uncontrolled;
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [interactiveItems, setInteractiveItems] = useState(false);
+	const rootRef = useRef(null);
+	const pressing = useRef(false);
+	const open = pinned || trigger === "hover" && (hovered || focused);
+	const setPinned = useCallback((next) => {
+		if (!controlled) setUncontrolled(next);
+		onOpenChange?.(next);
+	}, [controlled, onOpenChange]);
+	useEffect(() => {
+		const cards = rootRef.current?.querySelectorAll("[data-slot=\"card-spread-item\"]") ?? [];
+		const has = Array.from(cards).some((card) => card.querySelector(FOCUSABLE) != null);
+		if (has !== interactiveItems) setInteractiveItems(has);
+	}, [children, interactiveItems]);
+	const setRef = useCallback((node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	function handleToggleKeyDown(event) {
+		if (event.key !== "Escape" || !open) return;
+		setFocused(false);
+		setHovered(false);
+		if (pinned) setPinned(false);
+	}
+	function handlePointerEnter(event) {
+		onPointerEnter?.(event);
+		if (event.pointerType !== "touch") setHovered(true);
+	}
+	function handlePointerLeave(event) {
+		onPointerLeave?.(event);
+		setHovered(false);
+	}
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		pressing.current = true;
+	}
+	function handleFocus(event) {
+		onFocus?.(event);
+		if (!pressing.current) setFocused(true);
+		pressing.current = false;
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+	}
+	const items = flattenItems(children);
+	const foreignChild = items.some((item) => item.type !== CardSpreadItem);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !foreignChild) return;
+		console.warn("CardSpread: every child should be a <CardSpreadItem>. A component that renders several cards is counted as one, so its cards stack at the same position.");
+	}, [foreignChild]);
+	const context = {
+		layout,
+		count: items.length,
+		open,
+		tuning: {
+			arc,
+			gap,
+			offset
+		},
+		stagger,
+		edge: edge ?? (layout === "stamp" ? "stamp" : "rounded")
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("div", {
+		ref: setRef,
+		role: "group",
+		"data-slot": "card-spread",
+		"data-layout": layout,
+		"data-state": open ? "open" : "closed",
+		"data-pinned": pinned ? "" : void 0,
+		className: cn(cardSpreadVariants({ size }), className),
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onPointerDown: handlePointerDown,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		...props,
+		children: [/* @__PURE__ */ jsx(SpreadContext, {
+			value: context,
+			children: items.map((item, index) => /* @__PURE__ */ jsx(IndexContext, {
+				value: index,
+				children: item
+			}, item.key ?? index))
+		}), trigger !== "manual" && !interactiveItems ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "card-spread-toggle",
+			"aria-pressed": pinned,
+			"aria-label": toggleLabel,
+			style: { zIndex: items.length + 1 },
+			className: cn("absolute inset-0 cursor-pointer rounded-2xl", focusRing),
+			onClick: () => {
+				setPinned(!pinned);
+			},
+			onKeyDown: handleToggleKeyDown
+		}) : null]
+	})] });
+}
+/** One card. Its position comes from its index in the deck. */
+function CardSpreadItem({ className, asChild, edge, style, ...props }) {
+	const spread = useContext(SpreadContext);
+	const index = useContext(IndexContext);
+	if (!spread) throw new Error("<CardSpreadItem> must be rendered inside <CardSpread>.");
+	const { layout, count, open, tuning, stagger } = spread;
+	const pose = getCardSpreadPose(layout, index, count, open, tuning);
+	const origin = getCardSpreadOrigin(layout);
+	const flip = "var(--card-spread-flip, 1)";
+	const order = open ? index : count - 1 - index;
+	const surfaceEdge = edge ?? spread.edge;
+	const position = {
+		zIndex: pose.z,
+		transform: `translate(calc(${String(pose.x)}% * ${flip}), ${String(pose.y)}%) rotate(calc(${String(pose.rotate)}deg * ${flip})) scale(${String(pose.scale)})`,
+		transformOrigin: `calc(50% + ${String(origin.x)}% * ${flip}) ${String(origin.y)}%`,
+		transitionDelay: `calc(${String(order * stagger)}ms * var(--motion-scale, 1))`
+	};
+	const Surface = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-spread-item",
+		"data-state": open ? "open" : "closed",
+		"data-index": index,
+		style: position,
+		className: cn("absolute inset-0 transition-transform duration-[var(--duration-slower)] ease-[var(--ease-overshoot)]", "data-[state=closed]:ease-[var(--ease-out-quint)]", surfaceEdge === "stamp" && "drop-shadow-md has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring"),
+		children: /* @__PURE__ */ jsx(Surface, {
+			"data-slot": "card-spread-card",
+			"data-edge": surfaceEdge,
+			style: surfaceEdge === "stamp" ? {
+				...STAMP_STYLE,
+				...style
+			} : style,
+			className: cn(cardSpreadItemVariants({ edge: surfaceEdge }), focusRing, className),
+			...props
+		})
+	});
+}
+//#endregion
+export { CardSpread, CardSpreadItem, cardSpreadItemVariants, cardSpreadVariants };
+
+//# sourceMappingURL=card-spread.js.map

package/dist/components/card-spread/card-spread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-spread.js","names":["Fragment"],"sources":["../../../src/components/card-spread/card-spread.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro \"Card Spreads\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport {\n  Children,\n  createContext,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  getCardSpreadOrigin,\n  getCardSpreadPose,\n  type CardSpreadLayout,\n  type CardSpreadTuning,\n} from \"./card-spread-layouts\";\n\n/*\n * A deck that fans out (ADR 0014: one mechanism, a `layout` axis for every\n * amicro spread). amicro animates each card with a spring from `motion`; the\n * cards here only ever travel between two known poses, so a CSS transition on\n * `transform` with the overshoot ease does the same job, and the duration and\n * per-card stagger run through the motion scale: under reduced motion the\n * layout still applies, instantly. This is decoration, never an indicator.\n *\n * The spread is visual only: every card is in the accessibility tree whether\n * the deck is open or closed. The only state worth reporting is whether the\n * deck is pinned open, and that belongs to the toggle, as aria-pressed.\n */\n\nconst PREFIX = \"dowel-card-spread\";\n\n/*\n * Only the direction flip lives in the stylesheet: horizontal travel and\n * rotation are multiplied by it, so in RTL the first card fans toward the\n * inline start and the corner fan pivots on the bottom-right. Two rules,\n * because a browser without :dir() would drop a combined selector outright.\n */\nconst STYLES = `\n[data-slot=card-spread]{--card-spread-flip:1}\n[dir=rtl] [data-slot=card-spread]{--card-spread-flip:-1}\n[data-slot=card-spread]:dir(rtl){--card-spread-flip:-1}\n[data-slot=card-spread]:dir(ltr){--card-spread-flip:1}\n`;\n\nconst FOCUSABLE =\n  'a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"])';\n\n/** The deck: sized like one card, with the spread overflowing it. */\nconst cardSpreadVariants = cva(\"relative isolate shrink-0\", {\n  variants: {\n    /** The card size. Override with `className` (`w-* h-*`) for anything else. */\n    size: {\n      sm: \"h-32 w-24\",\n      md: \"h-44 w-32\",\n      lg: \"h-56 w-40\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\n/** A card's surface. */\nconst cardSpreadItemVariants = cva(\n  \"block size-full overflow-hidden bg-muted text-muted-foreground\",\n  {\n    variants: {\n      /**\n       * `rounded` is a plain card. `stamp` perforates all four edges with a CSS\n       * mask — the Stamp Arc's postage stamps.\n       */\n      edge: {\n        rounded: \"rounded-2xl border border-border shadow-md\",\n        stamp: \"rounded-none\",\n      },\n    },\n    defaultVariants: {\n      edge: \"rounded\",\n    },\n  },\n);\n\n/**\n * Perforations: a circle punched out every `--card-spread-hole` + gap along\n * each edge, and a solid block through the middle. The mask only reads alpha,\n * so `black` here is opacity, not a colour.\n */\nconst STAMP_MASK = [\n  \"radial-gradient(var(--card-spread-hole), transparent 98%, black) round \" +\n    \"calc(-1.5 * var(--card-spread-hole) - 0.1875rem) calc(-1.5 * var(--card-spread-hole) - 0.1875rem) / \" +\n    \"calc(3 * var(--card-spread-hole) + 0.375rem) calc(3 * var(--card-spread-hole) + 0.375rem)\",\n  \"linear-gradient(black 0 0) no-repeat 50% / \" +\n    \"calc(100% - 3 * var(--card-spread-hole) - 0.375rem) calc(100% - 3 * var(--card-spread-hole) - 0.375rem)\",\n].join(\", \");\n\nconst STAMP_STYLE = {\n  \"--card-spread-hole\": \"0.3125rem\",\n  mask: STAMP_MASK,\n  WebkitMask: STAMP_MASK,\n} as CSSProperties;\n\nexport type CardSpreadTrigger = \"hover\" | \"click\" | \"manual\";\n\ninterface SpreadContextValue {\n  layout: CardSpreadLayout;\n  count: number;\n  open: boolean;\n  tuning: CardSpreadTuning;\n  stagger: number;\n  edge: \"rounded\" | \"stamp\";\n}\n\n/**\n * The cards, in deck order.\n *\n * A card's position comes from its index among its siblings, so the cards must\n * be children of the spread itself. Fragments are opened up, because\n * `<>{a}{b}</>` is still a list of cards; anything else is counted as one card,\n * and a wrapper component that renders several cards would put them all at\n * index 0 on top of each other — so development builds say so (see\n * CardSpread).\n */\nfunction flattenItems(children: ReactNode): ReactElement[] {\n  const items: ReactElement[] = [];\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement<{ children?: ReactNode }>(child)) continue;\n    if (child.type === Fragment) {\n      items.push(...flattenItems(child.props.children));\n      continue;\n    }\n    items.push(child);\n  }\n  return items;\n}\n\nconst SpreadContext = createContext<SpreadContextValue | null>(null);\nconst IndexContext = createContext(0);\n\nexport interface CardSpreadProps\n  extends\n    ComponentPropsWithRef<\"div\">,\n    VariantProps<typeof cardSpreadVariants>,\n    CardSpreadTuning {\n  /** How the cards fan out. `arc` with seven children is amicro's ARC (7 Cards). */\n  layout?: CardSpreadLayout;\n  /** Controlled pinned-open state. Hover and focus still open it transiently. */\n  open?: boolean;\n  /** Initial pinned-open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Called when the toggle (click, tap, Enter, Space or Escape) pins or unpins the spread. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * What opens the spread.\n   *\n   * - `hover` (default): hover, keyboard focus anywhere inside, or pinned by\n   *   the deck's toggle.\n   * - `click`: only the toggle.\n   * - `manual`: only the `open` prop; no toggle is rendered.\n   */\n  trigger?: CardSpreadTrigger;\n  /** Milliseconds between one card starting to move and the next. Scaled for reduced motion. */\n  stagger?: number;\n  /** Card edge for every item. Defaults to `stamp` for the stamp layout. */\n  edge?: \"rounded\" | \"stamp\";\n  /** Accessible name of the pin toggle a deck of non-interactive cards gets. */\n  toggleLabel?: string;\n}\n\n/** A stack of cards that fans out into a layout on hover, focus, or when pinned. */\nexport function CardSpread({\n  className,\n  children,\n  layout = \"arc\",\n  size,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = \"hover\",\n  stagger = 30,\n  edge,\n  toggleLabel = \"Spread cards\",\n  arc,\n  gap,\n  offset,\n  ref,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onFocus,\n  onBlur,\n  ...props\n}: CardSpreadProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const controlled = openProp !== undefined;\n  const pinned = controlled ? openProp : uncontrolled;\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [interactiveItems, setInteractiveItems] = useState(false);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // Focus that follows a pointer press is not a keyboard user arriving: a\n  // click pins or unpins, and must not be masked by focus holding it open.\n  const pressing = useRef(false);\n\n  const open = pinned || (trigger === \"hover\" && (hovered || focused));\n\n  const setPinned = useCallback(\n    (next: boolean) => {\n      if (!controlled) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [controlled, onOpenChange],\n  );\n\n  // A deck of links or buttons is reached, and opened, through them. A deck\n  // of pictures gets a real toggle button instead, or a keyboard user could\n  // never open it. The toggle is a sibling of the cards, not their parent,\n  // so every card's own content stays in the accessibility tree.\n  useEffect(() => {\n    const cards = rootRef.current?.querySelectorAll('[data-slot=\"card-spread-item\"]') ?? [];\n    const has = Array.from(cards).some((card) => card.querySelector(FOCUSABLE) != null);\n    if (has !== interactiveItems) setInteractiveItems(has);\n  }, [children, interactiveItems]);\n\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  function handleToggleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    if (event.key !== \"Escape\" || !open) return;\n    setFocused(false);\n    setHovered(false);\n    if (pinned) setPinned(false);\n  }\n\n  function handlePointerEnter(event: PointerEvent<HTMLDivElement>) {\n    onPointerEnter?.(event);\n    // A tap is a click, not a hover: touch pins with the toggle instead.\n    if (event.pointerType !== \"touch\") setHovered(true);\n  }\n\n  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {\n    onPointerLeave?.(event);\n    setHovered(false);\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    onPointerDown?.(event);\n    pressing.current = true;\n  }\n\n  function handleFocus(event: FocusEvent<HTMLDivElement>) {\n    onFocus?.(event);\n    if (!pressing.current) setFocused(true);\n    pressing.current = false;\n  }\n\n  function handleBlur(event: FocusEvent<HTMLDivElement>) {\n    onBlur?.(event);\n    if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n  }\n\n  const items = flattenItems(children);\n  const foreignChild = items.some((item) => item.type !== CardSpreadItem);\n\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || !foreignChild) return;\n    console.warn(\n      \"CardSpread: every child should be a <CardSpreadItem>. A component that renders \" +\n        \"several cards is counted as one, so its cards stack at the same position.\",\n    );\n  }, [foreignChild]);\n  const context: SpreadContextValue = {\n    layout,\n    count: items.length,\n    open,\n    tuning: { arc, gap, offset },\n    stagger,\n    edge: edge ?? (layout === \"stamp\" ? \"stamp\" : \"rounded\"),\n  };\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        ref={setRef}\n        role=\"group\"\n        data-slot=\"card-spread\"\n        data-layout={layout}\n        data-state={open ? \"open\" : \"closed\"}\n        data-pinned={pinned ? \"\" : undefined}\n        className={cn(cardSpreadVariants({ size }), className)}\n        onPointerEnter={handlePointerEnter}\n        onPointerLeave={handlePointerLeave}\n        onPointerDown={handlePointerDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...props}\n      >\n        <SpreadContext value={context}>\n          {items.map((item, index) => (\n            <IndexContext key={item.key ?? index} value={index}>\n              {item}\n            </IndexContext>\n          ))}\n        </SpreadContext>\n        {trigger !== \"manual\" && !interactiveItems ? (\n          <button\n            type=\"button\"\n            data-slot=\"card-spread-toggle\"\n            aria-pressed={pinned}\n            aria-label={toggleLabel}\n            style={{ zIndex: items.length + 1 }}\n            className={cn(\"absolute inset-0 cursor-pointer rounded-2xl\", focusRing)}\n            onClick={() => {\n              setPinned(!pinned);\n            }}\n            onKeyDown={handleToggleKeyDown}\n          />\n        ) : null}\n      </div>\n    </>\n  );\n}\n\nexport interface CardSpreadItemProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof cardSpreadItemVariants> {\n  /**\n   * Render the card surface as your own element — an `<a>` or `<button>` for\n   * a card that goes somewhere or does something.\n   */\n  asChild?: boolean;\n}\n\n/** One card. Its position comes from its index in the deck. */\nexport function CardSpreadItem({\n  className,\n  asChild,\n  edge,\n  style,\n  ...props\n}: CardSpreadItemProps) {\n  const spread = useContext(SpreadContext);\n  const index = useContext(IndexContext);\n  if (!spread) throw new Error(\"<CardSpreadItem> must be rendered inside <CardSpread>.\");\n\n  const { layout, count, open, tuning, stagger } = spread;\n  const pose = getCardSpreadPose(layout, index, count, open, tuning);\n  const origin = getCardSpreadOrigin(layout);\n  const flip = \"var(--card-spread-flip, 1)\";\n  // Opening deals from the first card; closing gathers from the last.\n  const order = open ? index : count - 1 - index;\n  const surfaceEdge = edge ?? spread.edge;\n\n  const position: CSSProperties = {\n    zIndex: pose.z,\n    transform:\n      `translate(calc(${String(pose.x)}% * ${flip}), ${String(pose.y)}%) ` +\n      `rotate(calc(${String(pose.rotate)}deg * ${flip})) scale(${String(pose.scale)})`,\n    transformOrigin: `calc(50% + ${String(origin.x)}% * ${flip}) ${String(origin.y)}%`,\n    transitionDelay: `calc(${String(order * stagger)}ms * var(--motion-scale, 1))`,\n  };\n\n  const Surface = asChild ? Slot.Root : \"div\";\n\n  return (\n    <div\n      data-slot=\"card-spread-item\"\n      data-state={open ? \"open\" : \"closed\"}\n      data-index={index}\n      style={position}\n      className={cn(\n        \"absolute inset-0 transition-transform duration-[var(--duration-slower)] ease-[var(--ease-overshoot)]\",\n        \"data-[state=closed]:ease-[var(--ease-out-quint)]\",\n        // The mask would clip a ring drawn on the stamp itself, so it is drawn here.\n        surfaceEdge === \"stamp\" &&\n          \"drop-shadow-md has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ring\",\n      )}\n    >\n      <Surface\n        data-slot=\"card-spread-card\"\n        data-edge={surfaceEdge}\n        style={surfaceEdge === \"stamp\" ? { ...STAMP_STYLE, ...style } : style}\n        className={cn(cardSpreadItemVariants({ edge: surfaceEdge }), focusRing, className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport { cardSpreadItemVariants, cardSpreadVariants };\n"],"mappings":"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"}

package/dist/components/card-spread/index.d.ts

@@ -0,0 +1,3 @@
+import { CARD_SPREAD_LAYOUTS, CardSpreadLayout, CardSpreadOrigin, CardSpreadPose, CardSpreadTuning, getCardSpreadDefaults, getCardSpreadOrigin, getCardSpreadPose } from "./card-spread-layouts.js";
+import { CardSpread, CardSpreadItem, CardSpreadItemProps, CardSpreadProps, CardSpreadTrigger, cardSpreadItemVariants, cardSpreadVariants } from "./card-spread.js";
+export { CARD_SPREAD_LAYOUTS, CardSpread, CardSpreadItem, type CardSpreadItemProps, type CardSpreadLayout, type CardSpreadOrigin, type CardSpreadPose, type CardSpreadProps, type CardSpreadTrigger, type CardSpreadTuning, cardSpreadItemVariants, cardSpreadVariants, getCardSpreadDefaults, getCardSpreadOrigin, getCardSpreadPose };

package/dist/components/card-spread/index.js

@@ -0,0 +1,3 @@
+import { CARD_SPREAD_LAYOUTS, getCardSpreadDefaults, getCardSpreadOrigin, getCardSpreadPose } from "./card-spread-layouts.js";
+import { CardSpread, CardSpreadItem, cardSpreadItemVariants, cardSpreadVariants } from "./card-spread.js";
+export { CARD_SPREAD_LAYOUTS, CardSpread, CardSpreadItem, cardSpreadItemVariants, cardSpreadVariants, getCardSpreadDefaults, getCardSpreadOrigin, getCardSpreadPose };

package/dist/components/card-spread/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/card-spread/meta.ts
+const meta = defineMeta({
+	name: "card-spread",
+	title: "Card Spread",
+	description: "A stack of cards that fans into an arc, row, corner fan, stamp arc, cascade, dealt hand or wheel on hover, focus or click.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["card-spread.tsx", "card-spread-layouts.ts"],
+	a11y: "The deck is a role=\"group\"; name it with aria-label or aria-labelledby. A deck of non-interactive cards gets a real toggle button (aria-pressed, named by `toggleLabel`, default \"Spread cards\") laid over the stack: it is the tab stop, Enter/Space/click/tap pin the spread open, and Escape closes it. It is a sibling of the cards, so every card's own content stays in the accessibility tree. A deck whose cards are links or buttons (via `asChild`) has no toggle and is reached through them. Keyboard focus anywhere inside opens the spread. Under reduced motion the layout still applies, instantly. In RTL the spread mirrors toward the inline start."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/card-spread/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/card-spread/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"card-spread\",\n  title: \"Card Spread\",\n  description:\n    \"A stack of cards that fans into an arc, row, corner fan, stamp arc, cascade, dealt hand or wheel on hover, focus or click.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"card-spread.tsx\", \"card-spread-layouts.ts\"],\n  a11y:\n    'The deck is a role=\"group\"; name it with aria-label or aria-labelledby. A deck of non-interactive cards ' +\n    'gets a real toggle button (aria-pressed, named by `toggleLabel`, default \"Spread cards\") laid over the ' +\n    \"stack: it is the tab stop, Enter/Space/click/tap pin the spread open, and Escape closes it. It is a sibling \" +\n    \"of the cards, so every card's own content stays in the accessibility tree. A deck whose cards are links or \" +\n    \"buttons (via `asChild`) has no toggle and is reached through them. Keyboard focus anywhere inside opens the \" +\n    \"spread. Under reduced motion the layout still applies, instantly. In RTL the spread mirrors toward the \" +\n    \"inline start.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB,wBAAwB;CACnD,MACE;AAOJ,CAAC"}