@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/grid-loader/grid-loader.js

@@ -0,0 +1,271 @@
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/grid-loader/grid-loader.tsx
+const PREFIX = "dowel-grid-loader";
+/** A delay or duration in seconds, scaled for reduced motion. */
+function scaled(seconds) {
+	return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;
+}
+const STYLES = `
+.${PREFIX}{direction:ltr;position:relative;display:inline-grid;flex-shrink:0;color:inherit}
+.${PREFIX} [data-part]{display:block;border-radius:0.25em;background:currentColor;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1);animation-duration:var(--dur);animation-delay:var(--delay,0s)}
+.${PREFIX}[data-rounded] [data-part=cell]{border-radius:9999px}
+.${PREFIX}[data-glow] [data-part=cell]{box-shadow:0 0 0.32em currentColor,0 0 0.64em color-mix(in oklab,currentColor 25%,transparent),0 0 1.28em color-mix(in oklab,currentColor 12.5%,transparent)}
+.${PREFIX} [data-part=empty]{background:transparent;animation:none}
+.${PREFIX} [data-part=layer]{position:absolute;inset:0;display:grid;background:transparent;border-radius:0;animation-timing-function:linear}
+@keyframes ${PREFIX}-pulse{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}
+@keyframes ${PREFIX}-stagger{0%,100%{opacity:0;transform:scale(.8)}20%,80%{opacity:1;transform:scale(1)}}
+@keyframes ${PREFIX}-step{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
+@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}
+@keyframes ${PREFIX}-blink{0%{opacity:.25}50%{opacity:.55}75%{opacity:.8}100%{opacity:1}}
+`;
+/** SmoothUI's presets, as the nine cells of the 3×3 grid read row by row. */
+const PATTERNS = {
+	"solo-center": "000010000",
+	"solo-tl": "100000000",
+	"solo-tr": "001000000",
+	"solo-bl": "000000100",
+	"solo-br": "000000001",
+	"line-h-top": "111000000",
+	"line-h-mid": "000111000",
+	"line-h-bot": "000000111",
+	"line-v-left": "100100100",
+	"line-v-mid": "010010010",
+	"line-v-right": "001001001",
+	"line-diag-1": "100010001",
+	"line-diag-2": "001010100",
+	corners: "101000101",
+	"plus-hollow": "010101010",
+	"plus-full": "010111010",
+	"l-tl": "110100000",
+	"l-tr": "011001000",
+	"l-bl": "000100110",
+	"l-br": "000001011",
+	"t-top": "111010000",
+	"t-bot": "000010111",
+	"t-left": "100110100",
+	"t-right": "001011001",
+	"duo-h": "000110000",
+	"duo-v": "010010000",
+	"duo-diag": "100010000",
+	frame: "111101111",
+	"sparse-1": "100001010",
+	"sparse-2": "010100001",
+	"wave-lr": "110110110",
+	"wave-rl": "011011011",
+	"wave-tb": "111111000",
+	"wave-bt": "000111111",
+	"diagonal-tl": "110110000",
+	"diagonal-tr": "011011000",
+	"diagonal-bl": "000110110",
+	"diagonal-br": "000011011",
+	checkerboard: "101010101",
+	"stripes-h": "111000111",
+	"stripes-v": "101101101",
+	"spiral-cw": "111001001",
+	"spiral-ccw": "111100100",
+	snake: "110010000",
+	"snake-rev": "000010011",
+	"rain-rev": "000010010",
+	waterfall: "110000000",
+	chaos: "101010100"
+};
+/**
+* SmoothUI names that share a matrix with a canonical pattern. They are real
+* variants (so every source name works) but render their canonical pattern.
+*/
+const ALIASES = {
+	breathing: "solo-center",
+	"ripple-in": "solo-center",
+	"corners-only": "corners",
+	"corners-sync": "corners",
+	diamond: "plus-hollow",
+	cross: "plus-full",
+	heartbeat: "plus-full",
+	"frame-sync": "frame",
+	border: "frame",
+	"ripple-out": "frame",
+	sparkle: "checkerboard",
+	"x-shape": "checkerboard",
+	"rows-alt": "stripes-h",
+	twinkle: "sparse-1",
+	"sparse-3": "line-diag-2",
+	"edge-cw": "line-h-top",
+	rain: "duo-v"
+};
+/** Each alias variant and the canonical pattern it renders. */
+const gridLoaderAliases = ALIASES;
+/** SmoothUI's `speed` presets: one pulse, or one stagger pass, in seconds. */
+const SPEEDS = {
+	slow: 1.5,
+	normal: .8,
+	fast: .4
+};
+/** A cell, with its keyframe, duration and delay. */
+function cell(key, size, animation, duration, delay, extra = {}) {
+	const style = {
+		width: size,
+		height: size,
+		animationName: `${PREFIX}-${animation}`,
+		"--dur": scaled(duration),
+		"--delay": scaled(delay),
+		...extra
+	};
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "cell",
+		style
+	}, key);
+}
+/** An inactive cell: holds its place in the grid and draws nothing. */
+function empty(key, size) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "empty",
+		style: {
+			width: size,
+			height: size
+		}
+	}, key);
+}
+/** SmoothUI geometry: a 32px grid at md, three 10px cells and 1px gaps. */
+const CELL = "1.25em";
+const GRID = {
+	gridTemplateColumns: `repeat(3, ${CELL})`,
+	gap: "0.125em"
+};
+/**
+* One pattern's cells. `pulse` breathes every lit cell together; `stagger`
+* reveals them one by one in reading order, each offset by cycle ÷ (lit + 2).
+*/
+function cells(pattern, { cycle, mode }) {
+	const lit = [...pattern].filter((bit) => bit === "1").length;
+	let order = 0;
+	return [...pattern].map((bit, index) => {
+		if (bit !== "1") return empty(index, CELL);
+		if (mode === "pulse") return cell(index, CELL, "pulse", cycle, 0);
+		const delay = order++ * cycle / (lit + 2);
+		return cell(index, CELL, "stagger", cycle, delay);
+	});
+}
+/** SmoothUI's docs demo sequence: each pattern holds for one pulse cycle. */
+const SEQUENCE = [
+	"corners",
+	"plus-hollow",
+	"frame"
+];
+/** SmoothUI AI Loader's diagonal wave order, in eighths of its 1.2s cycle. */
+const THINKING_DELAYS = [
+	0,
+	1,
+	2,
+	1,
+	2,
+	3,
+	2,
+	3,
+	4
+];
+const THINKING_CYCLE = 1.2;
+/** amicro's 2×2 matrix, in DOM order (TL, TR, BL, BR); it fills clockwise. */
+const MATRIX_DELAYS = [
+	.2,
+	.4,
+	.8,
+	.6
+];
+const VARIANTS = {
+	...Object.fromEntries(Object.entries(PATTERNS).map(([name, pattern]) => [name, {
+		root: GRID,
+		render: (options) => cells(pattern, options)
+	}])),
+	...Object.fromEntries(Object.entries(ALIASES).map(([name, target]) => [name, {
+		root: GRID,
+		render: (options) => cells(PATTERNS[target], options)
+	}])),
+	sequence: {
+		root: {
+			width: "4em",
+			height: "4em"
+		},
+		render: (options) => SEQUENCE.map((name, step) => /* @__PURE__ */ jsx("span", {
+			"data-part": "layer",
+			style: {
+				...GRID,
+				animationName: `${PREFIX}-step`,
+				"--dur": scaled(options.cycle * SEQUENCE.length),
+				"--delay": scaled(-((SEQUENCE.length - step) % SEQUENCE.length) * options.cycle)
+			},
+			children: cells(PATTERNS[name], {
+				...options,
+				mode: "pulse"
+			})
+		}, name))
+	},
+	thinking: {
+		root: {
+			gridTemplateColumns: "repeat(3, 0.75em)",
+			gap: "0.25em"
+		},
+		render: () => THINKING_DELAYS.map((step, index) => cell(index, "0.75em", "fade", THINKING_CYCLE, step * THINKING_CYCLE / 8))
+	},
+	matrix: {
+		root: {
+			gridTemplateColumns: "repeat(2, 1.75em)",
+			gap: "0.25em"
+		},
+		render: () => MATRIX_DELAYS.map((delay, index) => cell(index, "1.75em", "blink", .8, delay, {
+			opacity: 0,
+			borderRadius: "0.333em",
+			animationTimingFunction: "ease-in-out"
+		}))
+	}
+};
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+const gridLoaderVariantNames = Object.keys(VARIANTS);
+const gridLoaderVariants = cva("", {
+	variants: { size: {
+		sm: "text-[0.25rem]",
+		md: "text-[0.375rem]",
+		lg: "text-[0.5rem]",
+		xl: "text-[0.625rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** An indeterminate loading indicator made of a grid of cells, in 68 variants. */
+function GridLoader({ className, size, variant = "plus-hollow", mode = "pulse", speed = "normal", rounded = false, glow = false, label, style, ...props }) {
+	const spec = VARIANTS[variant];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "grid-loader",
+			"data-variant": variant,
+			"data-rounded": rounded ? "" : void 0,
+			"data-glow": glow ? "" : void 0,
+			"data-motion": "indicator",
+			className: cn(PREFIX, gridLoaderVariants({ size }), className),
+			style: {
+				...spec.root,
+				...style
+			},
+			...props,
+			children: spec.render({
+				cycle: SPEEDS[speed],
+				mode
+			})
+		}),
+		label ? /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: label
+		}) : null
+	] });
+}
+//#endregion
+export { GridLoader, gridLoaderAliases, gridLoaderVariantNames, gridLoaderVariants };
+
+//# sourceMappingURL=grid-loader.js.map

package/dist/components/grid-loader/grid-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-loader.js","names":[],"sources":["../../../src/components/grid-loader/grid-loader.tsx"],"sourcesContent":["// Ported from the SmoothUI Grid Loader and AI Loader (MIT, © 2024 Eduardo Calvo)\n// and amicro's MatrixGridLoader (MIT, © 2026 Syed Subhan Uddin). See\n// THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Same shape as every loader family (ADR 0014): geometry in `em`, colour from\n * `currentColor`, keyframes in the hoisted <style>, every duration and delay\n * through --motion-scale-indicator, and `direction: ltr` on the root.\n *\n * SmoothUI's preset patterns are 3×3 on/off matrices; each is a `variant` here.\n * Several of its presets share a matrix, and since the matrix is all that\n * differs between presets they render identically. Each matrix is stored once\n * in PATTERNS; the other SmoothUI names stay available as variants through\n * ALIASES, which resolve to the canonical pattern:\n *\n *   solo-center  ← also breathing, ripple-in\n *   corners      ← also corners-only, corners-sync\n *   plus-hollow  ← also diamond\n *   plus-full    ← also cross, heartbeat\n *   frame        ← also frame-sync, border, ripple-out\n *   checkerboard ← also sparkle, x-shape\n *   stripes-h    ← also rows-alt\n *   sparse-1     ← also twinkle\n *   line-diag-2  ← also sparse-3\n *   line-h-top   ← also edge-cw\n *   duo-v        ← also rain\n *\n * `L-*` and `T-*` are lower-cased. SmoothUI's `sequence` mode, which cycled an\n * array of patterns on a timer, is the `sequence` variant: its docs demo\n * (corners → plus-hollow → frame) done as three stacked layers taking turns.\n */\n\nconst PREFIX = \"dowel-grid-loader\";\n\n/** A delay or duration in seconds, scaled for reduced motion. */\nfunction scaled(seconds: number): string {\n  return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;\n}\n\nconst EASE = \"cubic-bezier(0.645, 0.045, 0.355, 1)\";\n\nconst STYLES = `\n.${PREFIX}{direction:ltr;position:relative;display:inline-grid;flex-shrink:0;color:inherit}\n.${PREFIX} [data-part]{display:block;border-radius:0.25em;background:currentColor;animation-iteration-count:infinite;animation-timing-function:${EASE};animation-duration:var(--dur);animation-delay:var(--delay,0s)}\n.${PREFIX}[data-rounded] [data-part=cell]{border-radius:9999px}\n.${PREFIX}[data-glow] [data-part=cell]{box-shadow:0 0 0.32em currentColor,0 0 0.64em color-mix(in oklab,currentColor 25%,transparent),0 0 1.28em color-mix(in oklab,currentColor 12.5%,transparent)}\n.${PREFIX} [data-part=empty]{background:transparent;animation:none}\n.${PREFIX} [data-part=layer]{position:absolute;inset:0;display:grid;background:transparent;border-radius:0;animation-timing-function:linear}\n@keyframes ${PREFIX}-pulse{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}\n@keyframes ${PREFIX}-stagger{0%,100%{opacity:0;transform:scale(.8)}20%,80%{opacity:1;transform:scale(1)}}\n@keyframes ${PREFIX}-step{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}\n@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}\n@keyframes ${PREFIX}-blink{0%{opacity:.25}50%{opacity:.55}75%{opacity:.8}100%{opacity:1}}\n`;\n\n/** SmoothUI's presets, as the nine cells of the 3×3 grid read row by row. */\nconst PATTERNS = {\n  \"solo-center\": \"000010000\",\n  \"solo-tl\": \"100000000\",\n  \"solo-tr\": \"001000000\",\n  \"solo-bl\": \"000000100\",\n  \"solo-br\": \"000000001\",\n  \"line-h-top\": \"111000000\",\n  \"line-h-mid\": \"000111000\",\n  \"line-h-bot\": \"000000111\",\n  \"line-v-left\": \"100100100\",\n  \"line-v-mid\": \"010010010\",\n  \"line-v-right\": \"001001001\",\n  \"line-diag-1\": \"100010001\",\n  \"line-diag-2\": \"001010100\",\n  corners: \"101000101\",\n  \"plus-hollow\": \"010101010\",\n  \"plus-full\": \"010111010\",\n  \"l-tl\": \"110100000\",\n  \"l-tr\": \"011001000\",\n  \"l-bl\": \"000100110\",\n  \"l-br\": \"000001011\",\n  \"t-top\": \"111010000\",\n  \"t-bot\": \"000010111\",\n  \"t-left\": \"100110100\",\n  \"t-right\": \"001011001\",\n  \"duo-h\": \"000110000\",\n  \"duo-v\": \"010010000\",\n  \"duo-diag\": \"100010000\",\n  frame: \"111101111\",\n  \"sparse-1\": \"100001010\",\n  \"sparse-2\": \"010100001\",\n  \"wave-lr\": \"110110110\",\n  \"wave-rl\": \"011011011\",\n  \"wave-tb\": \"111111000\",\n  \"wave-bt\": \"000111111\",\n  \"diagonal-tl\": \"110110000\",\n  \"diagonal-tr\": \"011011000\",\n  \"diagonal-bl\": \"000110110\",\n  \"diagonal-br\": \"000011011\",\n  checkerboard: \"101010101\",\n  \"stripes-h\": \"111000111\",\n  \"stripes-v\": \"101101101\",\n  \"spiral-cw\": \"111001001\",\n  \"spiral-ccw\": \"111100100\",\n  snake: \"110010000\",\n  \"snake-rev\": \"000010011\",\n  \"rain-rev\": \"000010010\",\n  waterfall: \"110000000\",\n  chaos: \"101010100\",\n} as const;\n\ntype Pattern = keyof typeof PATTERNS;\n\n/**\n * SmoothUI names that share a matrix with a canonical pattern. They are real\n * variants (so every source name works) but render their canonical pattern.\n */\nconst ALIASES = {\n  breathing: \"solo-center\",\n  \"ripple-in\": \"solo-center\",\n  \"corners-only\": \"corners\",\n  \"corners-sync\": \"corners\",\n  diamond: \"plus-hollow\",\n  cross: \"plus-full\",\n  heartbeat: \"plus-full\",\n  \"frame-sync\": \"frame\",\n  border: \"frame\",\n  \"ripple-out\": \"frame\",\n  sparkle: \"checkerboard\",\n  \"x-shape\": \"checkerboard\",\n  \"rows-alt\": \"stripes-h\",\n  twinkle: \"sparse-1\",\n  \"sparse-3\": \"line-diag-2\",\n  \"edge-cw\": \"line-h-top\",\n  rain: \"duo-v\",\n} as const satisfies Record<string, Pattern>;\n\ntype Alias = keyof typeof ALIASES;\n\n/** Each alias variant and the canonical pattern it renders. */\nexport const gridLoaderAliases: Readonly<Record<Alias, Pattern>> = ALIASES;\n\n/** SmoothUI's `speed` presets: one pulse, or one stagger pass, in seconds. */\nconst SPEEDS = { slow: 1.5, normal: 0.8, fast: 0.4 } as const;\n\nexport type GridLoaderMode = \"pulse\" | \"stagger\";\nexport type GridLoaderSpeed = keyof typeof SPEEDS;\n\ninterface RenderOptions {\n  /** Seconds per cycle, from `speed`. */\n  cycle: number;\n  mode: GridLoaderMode;\n}\n\ntype Variant = {\n  /** Root layout, inline: the hoisted stylesheet outranks Tailwind utilities. */\n  root: CSSProperties;\n  render: (options: RenderOptions) => ReactNode;\n};\n\ntype AnimatedStyle = CSSProperties & Record<`--${string}`, string>;\n\n/** A cell, with its keyframe, duration and delay. */\nfunction cell(\n  key: number | string,\n  size: string,\n  animation: string,\n  duration: number,\n  delay: number,\n  extra: CSSProperties = {},\n): ReactNode {\n  const style: AnimatedStyle = {\n    width: size,\n    height: size,\n    animationName: `${PREFIX}-${animation}`,\n    \"--dur\": scaled(duration),\n    \"--delay\": scaled(delay),\n    ...extra,\n  };\n  return <span key={key} data-part=\"cell\" style={style} />;\n}\n\n/** An inactive cell: holds its place in the grid and draws nothing. */\nfunction empty(key: number | string, size: string): ReactNode {\n  return <span key={key} data-part=\"empty\" style={{ width: size, height: size }} />;\n}\n\n/** SmoothUI geometry: a 32px grid at md, three 10px cells and 1px gaps. */\nconst CELL = \"1.25em\";\nconst GRID: CSSProperties = { gridTemplateColumns: `repeat(3, ${CELL})`, gap: \"0.125em\" };\n\n/**\n * One pattern's cells. `pulse` breathes every lit cell together; `stagger`\n * reveals them one by one in reading order, each offset by cycle ÷ (lit + 2).\n */\nfunction cells(pattern: string, { cycle, mode }: RenderOptions): ReactNode[] {\n  const lit = [...pattern].filter((bit) => bit === \"1\").length;\n  let order = 0;\n  return [...pattern].map((bit, index) => {\n    if (bit !== \"1\") return empty(index, CELL);\n    if (mode === \"pulse\") return cell(index, CELL, \"pulse\", cycle, 0);\n    const delay = (order++ * cycle) / (lit + 2);\n    return cell(index, CELL, \"stagger\", cycle, delay);\n  });\n}\n\n/** SmoothUI's docs demo sequence: each pattern holds for one pulse cycle. */\nconst SEQUENCE: Pattern[] = [\"corners\", \"plus-hollow\", \"frame\"];\n\n/** SmoothUI AI Loader's diagonal wave order, in eighths of its 1.2s cycle. */\nconst THINKING_DELAYS = [0, 1, 2, 1, 2, 3, 2, 3, 4];\nconst THINKING_CYCLE = 1.2;\n\n/** amicro's 2×2 matrix, in DOM order (TL, TR, BL, BR); it fills clockwise. */\nconst MATRIX_DELAYS = [0.2, 0.4, 0.8, 0.6];\n\nconst VARIANTS = {\n  ...(Object.fromEntries(\n    Object.entries(PATTERNS).map(([name, pattern]): [string, Variant] => [\n      name,\n      { root: GRID, render: (options) => cells(pattern, options) },\n    ]),\n  ) as Record<Pattern, Variant>),\n  ...(Object.fromEntries(\n    Object.entries(ALIASES).map(([name, target]): [string, Variant] => [\n      name,\n      { root: GRID, render: (options) => cells(PATTERNS[target], options) },\n    ]),\n  ) as Record<Alias, Variant>),\n  sequence: {\n    root: { width: \"4em\", height: \"4em\" },\n    render: (options) =>\n      SEQUENCE.map((name, step) => (\n        <span\n          key={name}\n          data-part=\"layer\"\n          style={\n            {\n              ...GRID,\n              animationName: `${PREFIX}-step`,\n              \"--dur\": scaled(options.cycle * SEQUENCE.length),\n              // Negative, so every layer is mid-rotation from the first frame.\n              \"--delay\": scaled(-((SEQUENCE.length - step) % SEQUENCE.length) * options.cycle),\n            } as AnimatedStyle\n          }\n        >\n          {cells(PATTERNS[name], { ...options, mode: \"pulse\" })}\n        </span>\n      )),\n  },\n  thinking: {\n    root: { gridTemplateColumns: \"repeat(3, 0.75em)\", gap: \"0.25em\" },\n    render: () =>\n      THINKING_DELAYS.map((step, index) =>\n        cell(index, \"0.75em\", \"fade\", THINKING_CYCLE, (step * THINKING_CYCLE) / 8),\n      ),\n  },\n  matrix: {\n    root: { gridTemplateColumns: \"repeat(2, 1.75em)\", gap: \"0.25em\" },\n    render: () =>\n      MATRIX_DELAYS.map((delay, index) =>\n        cell(index, \"1.75em\", \"blink\", 0.8, delay, {\n          opacity: 0,\n          borderRadius: \"0.333em\",\n          animationTimingFunction: \"ease-in-out\",\n        }),\n      ),\n  },\n} satisfies Record<string, Variant>;\n\nexport type GridLoaderVariant = keyof typeof VARIANTS;\n\n/** Every variant, in catalogue order. Stories and tests iterate this. */\nexport const gridLoaderVariantNames = Object.keys(VARIANTS) as GridLoaderVariant[];\n\nconst gridLoaderVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-[0.25rem]\",\n      md: \"text-[0.375rem]\",\n      lg: \"text-[0.5rem]\",\n      xl: \"text-[0.625rem]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface GridLoaderProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof gridLoaderVariants> {\n  /** Which pattern to play. */\n  variant?: GridLoaderVariant;\n  /**\n   * How the lit cells of a pattern move: together (`pulse`) or one by one in\n   * reading order (`stagger`). `sequence`, `thinking` and `matrix` have their\n   * own motion and ignore it.\n   */\n  mode?: GridLoaderMode;\n  /**\n   * Cycle length: `slow` 1.5s, `normal` 0.8s, `fast` 0.4s — still scaled by the\n   * indicator motion scale. `thinking` and `matrix` keep their own tempo.\n   */\n  speed?: GridLoaderSpeed;\n  /** Circular cells instead of rounded squares. */\n  rounded?: boolean;\n  /** A soft halo around each lit cell. Reads best on a dark surface. */\n  glow?: boolean;\n  /**\n   * Announced to assistive technology while the loader is visible.\n   *\n   * Omit it when the loader sits inside something that already reports its\n   * busy state — announcing twice is worse than not announcing at all.\n   */\n  label?: string;\n}\n\n/** An indeterminate loading indicator made of a grid of cells, in 68 variants. */\nexport function GridLoader({\n  className,\n  size,\n  variant = \"plus-hollow\",\n  mode = \"pulse\",\n  speed = \"normal\",\n  rounded = false,\n  glow = false,\n  label,\n  style,\n  ...props\n}: GridLoaderProps) {\n  const spec: Variant = VARIANTS[variant];\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"grid-loader\"\n        data-variant={variant}\n        data-rounded={rounded ? \"\" : undefined}\n        data-glow={glow ? \"\" : undefined}\n        // Exempt from the reduced-motion blanket: a loader that stops says the\n        // application has hung. It is slowed instead — see ADR 0014.\n        data-motion=\"indicator\"\n        className={cn(PREFIX, gridLoaderVariants({ size }), className)}\n        style={{ ...spec.root, ...style }}\n        {...props}\n      >\n        {spec.render({ cycle: SPEEDS[speed], mode })}\n      </span>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { gridLoaderVariants };\n"],"mappings":";;;;AAoCA,MAAM,SAAS;;AAGf,SAAS,OAAO,SAAyB;CACvC,OAAO,QAAQ,OAAO,OAAO,EAAE;AACjC;AAIA,MAAM,SAAS;GACZ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;aACG,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;;;AAIpB,MAAM,WAAW;CACf,eAAe;CACf,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,cAAc;CACd,cAAc;CACd,cAAc;CACd,eAAe;CACf,cAAc;CACd,gBAAgB;CAChB,eAAe;CACf,eAAe;CACf,SAAS;CACT,eAAe;CACf,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;CACT,UAAU;CACV,WAAW;CACX,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CACP,YAAY;CACZ,YAAY;CACZ,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,eAAe;CACf,cAAc;CACd,aAAa;CACb,aAAa;CACb,aAAa;CACb,cAAc;CACd,OAAO;CACP,aAAa;CACb,YAAY;CACZ,WAAW;CACX,OAAO;AACT;;;;;AAQA,MAAM,UAAU;CACd,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,gBAAgB;CAChB,SAAS;CACT,OAAO;CACP,WAAW;CACX,cAAc;CACd,QAAQ;CACR,cAAc;CACd,SAAS;CACT,WAAW;CACX,YAAY;CACZ,SAAS;CACT,YAAY;CACZ,WAAW;CACX,MAAM;AACR;;AAKA,MAAa,oBAAsD;;AAGnE,MAAM,SAAS;CAAE,MAAM;CAAK,QAAQ;CAAK,MAAM;AAAI;;AAoBnD,SAAS,KACP,KACA,MACA,WACA,UACA,OACA,QAAuB,CAAC,GACb;CACX,MAAM,QAAuB;EAC3B,OAAO;EACP,QAAQ;EACR,eAAe,GAAG,OAAO,GAAG;EAC5B,SAAS,OAAO,QAAQ;EACxB,WAAW,OAAO,KAAK;EACvB,GAAG;CACL;CACA,OAAO,oBAAC,QAAD;EAAgB,aAAU;EAAc;CAAQ,GAArC,GAAqC;AACzD;;AAGA,SAAS,MAAM,KAAsB,MAAyB;CAC5D,OAAO,oBAAC,QAAD;EAAgB,aAAU;EAAQ,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CAAI,GAA9D,GAA8D;AAClF;;AAGA,MAAM,OAAO;AACb,MAAM,OAAsB;CAAE,qBAAqB,aAAa,KAAK;CAAI,KAAK;AAAU;;;;;AAMxF,SAAS,MAAM,SAAiB,EAAE,OAAO,QAAoC;CAC3E,MAAM,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,QAAQ,QAAQ,GAAG,CAAC,CAAC;CACtD,IAAI,QAAQ;CACZ,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,KAAK,KAAK,UAAU;EACtC,IAAI,QAAQ,KAAK,OAAO,MAAM,OAAO,IAAI;EACzC,IAAI,SAAS,SAAS,OAAO,KAAK,OAAO,MAAM,SAAS,OAAO,CAAC;EAChE,MAAM,QAAS,UAAU,SAAU,MAAM;EACzC,OAAO,KAAK,OAAO,MAAM,WAAW,OAAO,KAAK;CAClD,CAAC;AACH;;AAGA,MAAM,WAAsB;CAAC;CAAW;CAAe;AAAO;;AAG9D,MAAM,kBAAkB;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;AAAC;AAClD,MAAM,iBAAiB;;AAGvB,MAAM,gBAAgB;CAAC;CAAK;CAAK;CAAK;AAAG;AAEzC,MAAM,WAAW;CACf,GAAI,OAAO,YACT,OAAO,QAAQ,QAAQ,CAAC,CAAC,KAAK,CAAC,MAAM,aAAgC,CACnE,MACA;EAAE,MAAM;EAAM,SAAS,YAAY,MAAM,SAAS,OAAO;CAAE,CAC7D,CAAC,CACH;CACA,GAAI,OAAO,YACT,OAAO,QAAQ,OAAO,CAAC,CAAC,KAAK,CAAC,MAAM,YAA+B,CACjE,MACA;EAAE,MAAM;EAAM,SAAS,YAAY,MAAM,SAAS,SAAS,OAAO;CAAE,CACtE,CAAC,CACH;CACA,UAAU;EACR,MAAM;GAAE,OAAO;GAAO,QAAQ;EAAM;EACpC,SAAS,YACP,SAAS,KAAK,MAAM,SAClB,oBAAC,QAAD;GAEE,aAAU;GACV,OACE;IACE,GAAG;IACH,eAAe,GAAG,OAAO;IACzB,SAAS,OAAO,QAAQ,QAAQ,SAAS,MAAM;IAE/C,WAAW,OAAO,GAAG,SAAS,SAAS,QAAQ,SAAS,UAAU,QAAQ,KAAK;GACjF;GAGD,UAAA,MAAM,SAAS,OAAO;IAAE,GAAG;IAAS,MAAM;GAAQ,CAAC;EAChD,GAbC,IAaD,CACP;CACL;CACA,UAAU;EACR,MAAM;GAAE,qBAAqB;GAAqB,KAAK;EAAS;EAChE,cACE,gBAAgB,KAAK,MAAM,UACzB,KAAK,OAAO,UAAU,QAAQ,gBAAiB,OAAO,iBAAkB,CAAC,CAC3E;CACJ;CACA,QAAQ;EACN,MAAM;GAAE,qBAAqB;GAAqB,KAAK;EAAS;EAChE,cACE,cAAc,KAAK,OAAO,UACxB,KAAK,OAAO,UAAU,SAAS,IAAK,OAAO;GACzC,SAAS;GACT,cAAc;GACd,yBAAyB;EAC3B,CAAC,CACH;CACJ;AACF;;AAKA,MAAa,yBAAyB,OAAO,KAAK,QAAQ;AAE1D,MAAM,qBAAqB,IAAI,IAAI;CACjC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAiCD,SAAgB,WAAW,EACzB,WACA,MACA,UAAU,eACV,OAAO,SACP,QAAQ,UACR,UAAU,OACV,OAAO,OACP,OACA,OACA,GAAG,SACe;CAClB,MAAM,OAAgB,SAAS;CAE/B,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GAAO,MAAM;GAAQ,YAAW;GAC7B,UAAA;EACI,CAAA;EACP,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,gBAAc;GACd,gBAAc,UAAU,KAAK,KAAA;GAC7B,aAAW,OAAO,KAAK,KAAA;GAGvB,eAAY;GACZ,WAAW,GAAG,QAAQ,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS;GAC7D,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG;GAAM;GAChC,GAAI;GAEH,UAAA,KAAK,OAAO;IAAE,OAAO,OAAO;IAAQ;GAAK,CAAC;EACvC,CAAA;EACL,QACC,oBAAC,QAAD;GAAM,MAAK;GAAS,WAAU;GAC3B,UAAA;EACG,CAAA,IACJ;CACJ,EAAA,CAAA;AAEN"}

package/dist/components/grid-loader/index.d.ts

@@ -0,0 +1,2 @@
+import { GridLoader, GridLoaderMode, GridLoaderProps, GridLoaderSpeed, GridLoaderVariant, gridLoaderAliases, gridLoaderVariantNames, gridLoaderVariants } from "./grid-loader.js";
+export { GridLoader, type GridLoaderMode, type GridLoaderProps, type GridLoaderSpeed, type GridLoaderVariant, gridLoaderAliases, gridLoaderVariantNames, gridLoaderVariants };

package/dist/components/grid-loader/index.js

@@ -0,0 +1,2 @@
+import { GridLoader, gridLoaderAliases, gridLoaderVariantNames, gridLoaderVariants } from "./grid-loader.js";
+export { GridLoader, gridLoaderAliases, gridLoaderVariantNames, gridLoaderVariants };

package/dist/components/grid-loader/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/grid-loader/meta.ts
+const meta = defineMeta({
+	name: "grid-loader",
+	title: "Grid Loader",
+	description: "Indeterminate loading indicators on a grid of cells — 48 patterns (and 17 SmoothUI alias names) that pulse or stagger, plus sequence, thinking and matrix.",
+	category: "feedback",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["grid-loader.tsx"],
+	a11y: "Renders aria-hidden by default so it does not announce inside controls that already expose a busy state. Pass `label` to announce it standalone via role=\"status\". Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/grid-loader/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/grid-loader/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"grid-loader\",\n  title: \"Grid Loader\",\n  description:\n    \"Indeterminate loading indicators on a grid of cells — 48 patterns (and 17 SmoothUI alias names) that pulse or stagger, plus sequence, thinking and matrix.\",\n  category: \"feedback\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"grid-loader.tsx\"],\n  a11y:\n    \"Renders aria-hidden by default so it does not announce inside controls that already \" +\n    'expose a busy state. Pass `label` to announce it standalone via role=\"status\". ' +\n    \"Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,iBAAiB;CACzB,MACE;AAGJ,CAAC"}

package/dist/components/image-accordion/image-accordion.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/image-accordion/image-accordion.d.ts
+declare const imageAccordionVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ImageAccordionItem {
+  id: string | number;
+  /** The header text. It names the panel's button. */
+  title: ReactNode;
+  /** A caption shown while the panel is open. */
+  description?: ReactNode;
+  /** Image URL. */
+  image?: string;
+  /** Alternative text for `image`. Omitted, the image is treated as decorative. */
+  imageAlt?: string;
+  /** Any media node instead of an image. */
+  media?: ReactNode;
+}
+interface ImageAccordionProps extends ComponentPropsWithRef<"div">, VariantProps<typeof imageAccordionVariants> {
+  items: ImageAccordionItem[];
+  /** Controlled open panel. */
+  activeIndex?: number;
+  defaultActiveIndex?: number;
+  onActiveIndexChange?: (index: number) => void;
+  /**
+   * `hover` (default): pointing at a panel or focusing its header opens it, and
+   * so does pressing it. `click`: only pressing it (or Enter/Space) does.
+   */
+  activateOn?: "hover" | "click";
+  /** How many times wider (or taller) the open panel grows than a closed one. */
+  expandedSize?: number;
+  /** The heading level wrapping each header button. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+/** Image panels in a row; the one in focus opens wide and shows its caption. */
+declare function ImageAccordion({ className, items, activeIndex: activeProp, defaultActiveIndex, onActiveIndexChange, activateOn, expandedSize, headingLevel, orientation, ...props }: ImageAccordionProps): import("react").JSX.Element;
+//#endregion
+export { ImageAccordion, ImageAccordionItem, ImageAccordionProps, imageAccordionVariants };
+//# sourceMappingURL=image-accordion.d.ts.map

package/dist/components/image-accordion/image-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-accordion.d.ts","names":[],"sources":["../../../src/components/image-accordion/image-accordion.tsx"],"mappings":";;;cA8BM,yBAAsB;;6CAU1B;UAEe;EACf;;EAEA,OAAO;;EAEP,cAAc;;EAEd;;EAEA;;EAEA,QAAQ;;UAGO,4BACP,8BAA8B,oBAAoB;EAC1D,OAAO;;EAEP;EACA;EACA,uBAAuB;;;;;EAKvB;;EAEA;;EAEA;;;iBAIc,iBACd,WACA,OACA,aAAa,YACb,oBACA,qBACA,YACA,cACA,cACA,gBACG,SACF,sCAAmB,IAAA"}

package/dist/components/image-accordion/image-accordion.js

@@ -0,0 +1,118 @@
+"use client";
+import { focusRingInset } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useState } from "react";
+//#region src/components/image-accordion/image-accordion.tsx
+const imageAccordionVariants = cva("group/accordion flex gap-2", {
+	variants: { orientation: {
+		horizontal: "h-80 w-full flex-row",
+		vertical: "h-[28rem] w-full flex-col"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+/** Image panels in a row; the one in focus opens wide and shows its caption. */
+function ImageAccordion({ className, items, activeIndex: activeProp, defaultActiveIndex = 0, onActiveIndexChange, activateOn = "hover", expandedSize = 4, headingLevel = 3, orientation = "horizontal", ...props }) {
+	const id = useId();
+	const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
+	const controlled = activeProp !== void 0;
+	const active = controlled ? activeProp : uncontrolled;
+	const horizontal = orientation !== "vertical";
+	const Heading = `h${String(headingLevel)}`;
+	function open(index) {
+		if (index === active) return;
+		if (!controlled) setUncontrolled(index);
+		onActiveIndexChange?.(index);
+	}
+	/** Arrow keys, Home and End move focus between headers, as in the APG accordion. */
+	function handleKeyDown(event) {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const triggers = [...event.currentTarget.closest("[data-slot=image-accordion]")?.querySelectorAll(":scope > * > * > [data-slot=image-accordion-trigger]") ?? []];
+		const current = triggers.indexOf(event.currentTarget);
+		const rtl = horizontal && event.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+		const forward = horizontal ? rtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+		const back = horizontal ? rtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+		const count = triggers.length;
+		const next = {
+			[forward]: (current + 1) % count,
+			[back]: (current - 1 + count) % count,
+			Home: 0,
+			End: count - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		triggers[next]?.focus();
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "image-accordion",
+		"data-orientation": orientation,
+		className: cn(imageAccordionVariants({ orientation }), className),
+		...props,
+		children: items.map((item, index) => {
+			const isOpen = index === active;
+			const triggerId = `${id}-trigger-${String(index)}`;
+			const panelId = `${id}-panel-${String(index)}`;
+			const hasPanel = item.description != null;
+			return /* @__PURE__ */ jsxs("div", {
+				"data-slot": "image-accordion-item",
+				"data-state": isOpen ? "open" : "closed",
+				className: cn("group/item relative min-h-0 min-w-0 basis-0 overflow-hidden rounded-xl bg-muted", "transition-[flex-grow] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]"),
+				style: { flexGrow: isOpen ? expandedSize : 1 },
+				onPointerEnter: (event) => {
+					if (activateOn === "hover" && event.pointerType === "mouse") open(index);
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "image-accordion-media",
+						className: cn("absolute inset-0 transition-[scale] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]", "group-data-[state=closed]/item:scale-110 [&>img]:size-full [&>img]:object-cover"),
+						children: item.media ?? (item.image ? /* @__PURE__ */ jsx("img", {
+							src: item.image,
+							alt: item.imageAlt ?? "",
+							draggable: false
+						}) : null)
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute inset-0 bg-linear-to-t from-background/90 via-background/20 to-transparent"
+					}),
+					/* @__PURE__ */ jsx(Heading, {
+						className: "absolute inset-0 m-0",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							id: triggerId,
+							"data-slot": "image-accordion-trigger",
+							"aria-expanded": isOpen,
+							"aria-controls": hasPanel ? panelId : void 0,
+							className: cn("flex size-full cursor-pointer rounded-xl p-4 text-start text-foreground", horizontal ? "items-end justify-center group-data-[state=open]/item:justify-start" : "items-center justify-start group-data-[state=open]/item:items-end", focusRingInset),
+							onClick: () => {
+								open(index);
+							},
+							onFocus: () => {
+								if (activateOn === "hover") open(index);
+							},
+							onKeyDown: handleKeyDown,
+							children: /* @__PURE__ */ jsx("span", {
+								"data-slot": "image-accordion-title",
+								className: cn("text-sm font-semibold whitespace-nowrap", horizontal && "group-data-[state=closed]/item:rotate-180 group-data-[state=closed]/item:[writing-mode:vertical-rl]", hasPanel && "group-data-[state=open]/item:mb-6"),
+								children: item.title
+							})
+						})
+					}),
+					hasPanel ? /* @__PURE__ */ jsx("div", {
+						id: panelId,
+						"data-slot": "image-accordion-panel",
+						"aria-hidden": isOpen ? void 0 : true,
+						inert: isOpen ? void 0 : true,
+						className: cn("pointer-events-none absolute inset-x-0 bottom-0 line-clamp-1 px-4 pb-4 text-xs text-muted-foreground", "transition-opacity duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "group-data-[state=closed]/item:opacity-0"),
+						children: item.description
+					}) : null
+				]
+			}, item.id);
+		})
+	});
+}
+//#endregion
+export { ImageAccordion, imageAccordionVariants };
+
+//# sourceMappingURL=image-accordion.js.map

package/dist/components/image-accordion/image-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-accordion.js","names":[],"sources":["../../../src/components/image-accordion/image-accordion.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Image accordion).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useId,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A row of image panels; one is open, wide, with its caption showing, and the\n * rest are narrow strips with their titles turned on end. Pointing at, focusing\n * or pressing a strip opens it.\n *\n * It is an accordion in the APG sense: each panel's header is a button with\n * aria-expanded that controls its caption, inside a heading. Exactly one panel\n * is open at a time. Arrow keys move between headers (mirrored in RTL for the\n * horizontal layout), Home and End jump to the ends.\n *\n * The widening is a CSS transition on flex-grow, so the global reduced-motion\n * rule makes it instant.\n */\n\nconst imageAccordionVariants = cva(\"group/accordion flex gap-2\", {\n  variants: {\n    orientation: {\n      horizontal: \"h-80 w-full flex-row\",\n      vertical: \"h-[28rem] w-full flex-col\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport interface ImageAccordionItem {\n  id: string | number;\n  /** The header text. It names the panel's button. */\n  title: ReactNode;\n  /** A caption shown while the panel is open. */\n  description?: ReactNode;\n  /** Image URL. */\n  image?: string;\n  /** Alternative text for `image`. Omitted, the image is treated as decorative. */\n  imageAlt?: string;\n  /** Any media node instead of an image. */\n  media?: ReactNode;\n}\n\nexport interface ImageAccordionProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof imageAccordionVariants> {\n  items: ImageAccordionItem[];\n  /** Controlled open panel. */\n  activeIndex?: number;\n  defaultActiveIndex?: number;\n  onActiveIndexChange?: (index: number) => void;\n  /**\n   * `hover` (default): pointing at a panel or focusing its header opens it, and\n   * so does pressing it. `click`: only pressing it (or Enter/Space) does.\n   */\n  activateOn?: \"hover\" | \"click\";\n  /** How many times wider (or taller) the open panel grows than a closed one. */\n  expandedSize?: number;\n  /** The heading level wrapping each header button. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\n/** Image panels in a row; the one in focus opens wide and shows its caption. */\nexport function ImageAccordion({\n  className,\n  items,\n  activeIndex: activeProp,\n  defaultActiveIndex = 0,\n  onActiveIndexChange,\n  activateOn = \"hover\",\n  expandedSize = 4,\n  headingLevel = 3,\n  orientation = \"horizontal\",\n  ...props\n}: ImageAccordionProps) {\n  const id = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);\n  const controlled = activeProp !== undefined;\n  const active = controlled ? activeProp : uncontrolled;\n  const horizontal = orientation !== \"vertical\";\n  const Heading = `h${String(headingLevel)}` as \"h3\";\n\n  function open(index: number) {\n    if (index === active) return;\n    if (!controlled) setUncontrolled(index);\n    onActiveIndexChange?.(index);\n  }\n\n  /** Arrow keys, Home and End move focus between headers, as in the APG accordion. */\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const root = event.currentTarget.closest(\"[data-slot=image-accordion]\");\n    const triggers = [\n      ...(root?.querySelectorAll<HTMLButtonElement>(\n        \":scope > * > * > [data-slot=image-accordion-trigger]\",\n      ) ?? []),\n    ];\n    const current = triggers.indexOf(event.currentTarget);\n    const rtl =\n      horizontal && event.currentTarget.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n    const forward = horizontal ? (rtl ? \"ArrowLeft\" : \"ArrowRight\") : \"ArrowDown\";\n    const back = horizontal ? (rtl ? \"ArrowRight\" : \"ArrowLeft\") : \"ArrowUp\";\n    const count = triggers.length;\n    const next = {\n      [forward]: (current + 1) % count,\n      [back]: (current - 1 + count) % count,\n      Home: 0,\n      End: count - 1,\n    }[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    triggers[next]?.focus();\n  }\n\n  return (\n    <div\n      data-slot=\"image-accordion\"\n      data-orientation={orientation}\n      className={cn(imageAccordionVariants({ orientation }), className)}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const isOpen = index === active;\n        const triggerId = `${id}-trigger-${String(index)}`;\n        const panelId = `${id}-panel-${String(index)}`;\n        const hasPanel = item.description != null;\n\n        return (\n          <div\n            key={item.id}\n            data-slot=\"image-accordion-item\"\n            data-state={isOpen ? \"open\" : \"closed\"}\n            className={cn(\n              \"group/item relative min-h-0 min-w-0 basis-0 overflow-hidden rounded-xl bg-muted\",\n              \"transition-[flex-grow] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\",\n            )}\n            style={{ flexGrow: isOpen ? expandedSize : 1 }}\n            onPointerEnter={(event: PointerEvent<HTMLDivElement>) => {\n              // Touch has no hover; a tap arrives as a click instead.\n              if (activateOn === \"hover\" && event.pointerType === \"mouse\") open(index);\n            }}\n          >\n            <div\n              data-slot=\"image-accordion-media\"\n              className={cn(\n                \"absolute inset-0 transition-[scale] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\",\n                \"group-data-[state=closed]/item:scale-110 [&>img]:size-full [&>img]:object-cover\",\n              )}\n            >\n              {item.media ??\n                (item.image ? (\n                  <img src={item.image} alt={item.imageAlt ?? \"\"} draggable={false} />\n                ) : null)}\n            </div>\n            <div\n              aria-hidden=\"true\"\n              className=\"pointer-events-none absolute inset-0 bg-linear-to-t from-background/90 via-background/20 to-transparent\"\n            />\n\n            <Heading className=\"absolute inset-0 m-0\">\n              <button\n                type=\"button\"\n                id={triggerId}\n                data-slot=\"image-accordion-trigger\"\n                aria-expanded={isOpen}\n                aria-controls={hasPanel ? panelId : undefined}\n                className={cn(\n                  \"flex size-full cursor-pointer rounded-xl p-4 text-start text-foreground\",\n                  horizontal\n                    ? \"items-end justify-center group-data-[state=open]/item:justify-start\"\n                    : \"items-center justify-start group-data-[state=open]/item:items-end\",\n                  focusRingInset,\n                )}\n                onClick={() => {\n                  open(index);\n                }}\n                onFocus={() => {\n                  if (activateOn === \"hover\") open(index);\n                }}\n                onKeyDown={handleKeyDown}\n              >\n                <span\n                  data-slot=\"image-accordion-title\"\n                  className={cn(\n                    \"text-sm font-semibold whitespace-nowrap\",\n                    horizontal &&\n                      \"group-data-[state=closed]/item:rotate-180 group-data-[state=closed]/item:[writing-mode:vertical-rl]\",\n                    hasPanel && \"group-data-[state=open]/item:mb-6\",\n                  )}\n                >\n                  {item.title}\n                </span>\n              </button>\n            </Heading>\n\n            {hasPanel ? (\n              <div\n                id={panelId}\n                data-slot=\"image-accordion-panel\"\n                aria-hidden={isOpen ? undefined : true}\n                inert={isOpen ? undefined : true}\n                className={cn(\n                  \"pointer-events-none absolute inset-x-0 bottom-0 line-clamp-1 px-4 pb-4 text-xs text-muted-foreground\",\n                  \"transition-opacity duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n                  \"group-data-[state=closed]/item:opacity-0\",\n                )}\n              >\n                {item.description}\n              </div>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { imageAccordionVariants };\n"],"mappings":"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"}

package/dist/components/image-accordion/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageAccordion, ImageAccordionItem, ImageAccordionProps, imageAccordionVariants } from "./image-accordion.js";
+export { ImageAccordion, type ImageAccordionItem, type ImageAccordionProps, imageAccordionVariants };

package/dist/components/image-accordion/index.js

@@ -0,0 +1,2 @@
+import { ImageAccordion, imageAccordionVariants } from "./image-accordion.js";
+export { ImageAccordion, imageAccordionVariants };

package/dist/components/image-accordion/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/image-accordion/meta.ts
+const meta = defineMeta({
+	name: "image-accordion",
+	title: "Image Accordion",
+	description: "Image panels in a row — the open one widens and shows its caption, the rest stand as narrow strips — opened by hover, focus or press.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["image-accordion.tsx"],
+	a11y: "An APG accordion: each panel's header is a button with aria-expanded inside a heading (`headingLevel`), controlling its caption, which is aria-hidden and inert while closed. Exactly one panel is open. Arrow keys move between headers (Left/Right mirrored under dir=\"rtl\", Up/Down when vertical), Home and End jump to the ends. With `activateOn=\"hover\"` a header opens on keyboard focus as well as mouse hover, so nothing is pointer-only; touch opens on tap. Images are decorative unless `imageAlt` is given. The widening stops animating under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/image-accordion/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/image-accordion/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"image-accordion\",\n  title: \"Image Accordion\",\n  description:\n    \"Image panels in a row — the open one widens and shows its caption, the rest stand as narrow strips — opened by hover, focus or press.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"image-accordion.tsx\"],\n  a11y:\n    \"An APG accordion: each panel's header is a button with aria-expanded inside a heading (`headingLevel`), \" +\n    \"controlling its caption, which is aria-hidden and inert while closed. Exactly one panel is open. \" +\n    'Arrow keys move between headers (Left/Right mirrored under dir=\"rtl\", Up/Down when vertical), Home ' +\n    'and End jump to the ends. With `activateOn=\"hover\"` a header opens on keyboard focus as well as mouse ' +\n    \"hover, so nothing is pointer-only; touch opens on tap. Images are decorative unless `imageAlt` is \" +\n    \"given. The widening stops animating under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAMJ,CAAC"}

package/dist/components/image-metadata/image-metadata.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/image-metadata/image-metadata.d.ts
+declare const imageMetadataVariants: (props?: ({
+  shape?: "rounded" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ImageMetadataField {
+  label: string;
+  value: ReactNode;
+}
+interface ImageMetadataProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof imageMetadataVariants> {
+  src: string;
+  alt: string;
+  /** Heading of the panel, e.g. the file name. It names the panel. */
+  filename: string;
+  description?: ReactNode;
+  /** Rows of the metadata table. */
+  metadata: ImageMetadataField[];
+  /** Controls shown in the row beside the details toggle — Share, Connect. */
+  actions?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Accessible name of the toggle. */
+  openLabel?: string;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+  imageClassName?: string;
+}
+/** An image with an expandable metadata panel. */
+declare function ImageMetadata({ className, shape, src, alt, filename, description, metadata, actions, open: openProp, defaultOpen, onOpenChange, openLabel, closeLabel, imageClassName, ...props }: ImageMetadataProps): import("react").JSX.Element;
+//#endregion
+export { ImageMetadata, ImageMetadataField, ImageMetadataProps, imageMetadataVariants };
+//# sourceMappingURL=image-metadata.d.ts.map

package/dist/components/image-metadata/image-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-metadata.d.ts","names":[],"sources":["../../../src/components/image-metadata/image-metadata.tsx"],"mappings":";;;cA+BM,wBAAqB;;6CAWzB;UAEe;EACf;EACA,OAAO;;UAGQ,2BAEb,KAAK,2CACL,oBAAoB;EACtB;EACA;;EAEA;EACA,cAAc;;EAEd,UAAU;;EAEV,UAAU;EACV;EACA;EACA,gBAAgB;;EAEhB;;EAEA;EACA;;;iBAIc,gBACd,WACA,OACA,KACA,KACA,UACA,aACA,UACA,SACA,MAAM,UACN,aACA,cACA,WACA,YACA,mBACG,SACF,qCAAkB,IAAA"}