@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/carousel-3d/carousel-3d.js

@@ -0,0 +1,336 @@
+"use client";
+import { disabledStyles, focusRing, mirrorForDirection } 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, useRef, useState } from "react";
+//#region src/components/carousel-3d/carousel-3d.tsx
+const carousel3dVariants = cva(cn("group/c3d relative flex w-full flex-col items-center gap-4 overflow-hidden select-none", "[--c3d-dir:1] [--c3d-drag:0px] rtl:[--c3d-dir:-1]"), {
+	variants: {
+		variant: {
+			arc: "",
+			coverflow: ""
+		},
+		/** Card size. Every distance in the layout derives from it. */
+		size: {
+			sm: "[--c3d-card:5rem]",
+			md: "[--c3d-card:7rem]",
+			lg: "[--c3d-card:10rem]"
+		},
+		/** When the arc fans out: on hover or focus, always, or never. */
+		spread: {
+			hover: "[--c3d-spread:0] hover:[--c3d-spread:1] has-[:focus-visible]:[--c3d-spread:1]",
+			always: "[--c3d-spread:1]",
+			never: "[--c3d-spread:0]"
+		}
+	},
+	defaultVariants: {
+		variant: "arc",
+		size: "md",
+		spread: "hover"
+	}
+});
+/** The card face: an image, custom content, or a neutral numbered tile. */
+const carousel3dCardVariants = cva("relative grid size-full place-items-center overflow-hidden rounded-xl border shadow-lg", {
+	variants: { tone: {
+		media: "border-border bg-card text-card-foreground",
+		mono: "border-border bg-muted text-sm font-bold text-muted-foreground"
+	} },
+	defaultVariants: { tone: "media" }
+});
+const DRAG_THRESHOLD = 6;
+const SWIPE_THRESHOLD = 40;
+function isRtl(element) {
+	return element?.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+/** Transform and stacking for one slide, by its offset from the current index. */
+function slideStyle(variant, offset) {
+	const abs = Math.abs(offset);
+	const drag = "var(--c3d-drag)";
+	if (variant === "coverflow") {
+		const turn = offset === 0 ? 0 : offset < 0 ? 38 : -38;
+		return {
+			width: "var(--c3d-card)",
+			aspectRatio: "3 / 4",
+			zIndex: 100 - abs,
+			opacity: abs > 2 ? 0 : 1 - abs * .25,
+			transform: [
+				`translateX(calc(${offset} * var(--c3d-dir) * var(--c3d-card) * 0.4 + ${drag}))`,
+				`translateZ(calc(var(--c3d-card) * ${offset === 0 ? .6 : -abs * .6}))`,
+				`rotateY(calc(${turn} * var(--c3d-dir) * 1deg))`,
+				`scale(${offset === 0 ? 1.1 : 1 - abs * .08})`
+			].join(" ")
+		};
+	}
+	return {
+		width: "calc(var(--c3d-card) * 1.45)",
+		zIndex: 100 - abs,
+		transform: [
+			`translateX(calc(${offset} * var(--c3d-dir) * var(--c3d-card) * 1.45 + ${drag}))`,
+			`translateY(calc(${offset} * var(--c3d-spread) * var(--c3d-card) * 0.22))`,
+			`rotate(calc(${offset} * var(--c3d-dir) * (5deg + var(--c3d-spread) * 15deg)))`,
+			`scale(${offset === 0 ? "1.05" : "calc(0.8 - var(--c3d-spread) * 0.15)"})`
+		].join(" ")
+	};
+}
+const control = cn("inline-grid shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground", "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:bg-accent hover:text-foreground", focusRing, disabledStyles);
+function Chevron({ back }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: cn("size-3.5", mirrorForDirection),
+		children: /* @__PURE__ */ jsx("path", { d: back ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+	});
+}
+/** A 3D carousel: an arc of cards or a CoverFlow path, driven by buttons, dots, keys and swipe. */
+function Carousel3D({ className, items, index: indexProp, defaultIndex, onIndexChange, loop = false, variant, size, spread, tone, previousLabel = "Previous slide", nextLabel = "Next slide", dotsLabel = "Slides", slideLabel = (i, count) => `${String(i + 1)} of ${String(count)}`, ref, "aria-label": ariaLabel, ...props }) {
+	const count = items.length;
+	const last = Math.max(0, count - 1);
+	const clamp = (value) => Math.min(last, Math.max(0, value));
+	const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex ?? Math.floor(last / 2)));
+	const index = clamp(indexProp ?? uncontrolled);
+	const [announcement, setAnnouncement] = useState("");
+	const [dragging, setDragging] = useState(false);
+	const id = useId();
+	const rootRef = useRef(null);
+	const slideRefs = useRef([]);
+	const tabRefs = useRef([]);
+	const drag = useRef(null);
+	const suppressClick = useRef(false);
+	const shape = variant ?? "arc";
+	function goTo(next) {
+		const target = loop && count > 0 ? (next % count + count) % count : clamp(next);
+		if (target === index) return index;
+		if (indexProp === void 0) setUncontrolled(target);
+		onIndexChange?.(target);
+		const item = items[target];
+		if (item) setAnnouncement(`${item.title}, ${slideLabel(target, count)}`);
+		return target;
+	}
+	const atStart = !loop && index === 0;
+	const atEnd = !loop && index === last;
+	/** Arrow keys, Home and End on the controls; slide content keeps its own keys. */
+	function handleKeyDown(event) {
+		const forward = isRtl(rootRef.current) ? -1 : 1;
+		let next = null;
+		if (event.key === "ArrowRight") next = index + forward;
+		else if (event.key === "ArrowLeft") next = index - forward;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = last;
+		if (next === null) return;
+		event.preventDefault();
+		const landed = goTo(next);
+		if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab") tabRefs.current[landed]?.focus();
+	}
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		drag.current = {
+			x: event.clientX,
+			pointer: event.pointerId,
+			active: false
+		};
+	}
+	function handlePointerMove(event) {
+		const state = drag.current;
+		if (!state || state.pointer !== event.pointerId) return;
+		const dx = event.clientX - state.x;
+		if (!state.active && Math.abs(dx) > DRAG_THRESHOLD) {
+			state.active = true;
+			setDragging(true);
+			event.currentTarget.setPointerCapture(event.pointerId);
+		}
+		if (state.active) event.currentTarget.style.setProperty("--c3d-drag", `${String(dx)}px`);
+	}
+	function endDrag(event, cancelled) {
+		const state = drag.current;
+		drag.current = null;
+		if (!state?.active) return;
+		const dx = event.clientX - state.x;
+		event.currentTarget.style.setProperty("--c3d-drag", "0px");
+		setDragging(false);
+		suppressClick.current = true;
+		if (cancelled || Math.abs(dx) < SWIPE_THRESHOLD) return;
+		const step = (slideRefs.current[index]?.offsetWidth ?? 0) * (shape === "coverflow" ? .4 : 1);
+		const steps = step > 0 ? Math.max(1, Math.round(Math.abs(dx) / step)) : 1;
+		const toward = (dx < 0 ? 1 : -1) * (isRtl(rootRef.current) ? -1 : 1);
+		goTo(index + toward * steps);
+	}
+	/** A click on a neighbouring card selects it. The neighbours are inert, so hit-test by geometry. */
+	function handleClick(event) {
+		if (suppressClick.current) {
+			suppressClick.current = false;
+			return;
+		}
+		if (event.detail === 0) return;
+		let hit = null;
+		slideRefs.current.forEach((slide, i) => {
+			if (!slide) return;
+			const rect = slide.getBoundingClientRect();
+			if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom && (hit === null || Math.abs(i - index) < Math.abs(hit - index))) hit = i;
+		});
+		if (hit !== null && hit !== index) goTo(hit);
+	}
+	const cardClass = carousel3dCardVariants({ tone });
+	return /* @__PURE__ */ jsxs("section", {
+		ref: (node) => {
+			rootRef.current = node;
+			if (typeof ref === "function") return ref(node);
+			if (ref) ref.current = node;
+		},
+		"data-slot": "carousel-3d",
+		"data-variant": shape,
+		"aria-roledescription": "carousel",
+		"aria-label": ariaLabel ?? (props["aria-labelledby"] ? void 0 : "Carousel"),
+		className: cn(carousel3dVariants({
+			variant,
+			size,
+			spread
+		}), className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				id: `${id}-viewport`,
+				"data-slot": "carousel-3d-viewport",
+				"data-dragging": dragging ? "" : void 0,
+				className: cn("relative grid w-full touch-pan-y place-items-center", dragging ? "cursor-grabbing" : "cursor-grab"),
+				style: shape === "coverflow" ? {
+					perspective: "calc(var(--c3d-card) * 12)",
+					transformStyle: "preserve-3d",
+					height: "calc(var(--c3d-card) * 1.9)"
+				} : { height: "calc(var(--c3d-card) * 2.1)" },
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: (event) => {
+					endDrag(event, false);
+				},
+				onPointerCancel: (event) => {
+					endDrag(event, true);
+				},
+				onClick: handleClick,
+				children: items.map((item, i) => {
+					const offset = i - index;
+					const current = offset === 0;
+					const face = item.content ?? (tone !== "mono" && item.image ? /* @__PURE__ */ jsx("img", {
+						src: item.image,
+						alt: item.alt ?? "",
+						draggable: false,
+						className: "size-full object-cover"
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: i + 1
+					}));
+					const caption = /* @__PURE__ */ jsx("span", {
+						"data-slot": "carousel-3d-caption",
+						className: cn("max-w-full truncate text-xs font-semibold text-foreground", shape === "coverflow" && "absolute inset-x-0 top-full mt-2 text-center", "transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", !current && "scale-75 opacity-0"),
+						children: item.title
+					});
+					return /* @__PURE__ */ jsxs("div", {
+						ref: (node) => {
+							slideRefs.current[i] = node;
+						},
+						id: `${id}-slide-${String(i)}`,
+						role: "tabpanel",
+						"aria-roledescription": "slide",
+						"aria-label": slideLabel(i, count),
+						"aria-hidden": current ? void 0 : true,
+						inert: !current,
+						"data-slot": "carousel-3d-slide",
+						"data-state": current ? "active" : "inactive",
+						className: cn("relative col-start-1 row-start-1 flex flex-col items-center gap-1.5 will-change-transform", "transition-[transform,opacity] duration-[var(--duration-slower)]", shape === "arc" ? "ease-[var(--ease-overshoot)]" : "ease-[var(--ease-out-quint)]", "group-data-[dragging]/c3d:transition-none"),
+						style: slideStyle(shape, offset),
+						children: [
+							shape === "arc" ? caption : null,
+							/* @__PURE__ */ jsx("div", {
+								"data-slot": "carousel-3d-card",
+								className: cardClass,
+								style: shape === "arc" ? {
+									width: "var(--c3d-card)",
+									height: "var(--c3d-card)"
+								} : void 0,
+								children: face
+							}),
+							shape === "coverflow" ? caption : null
+						]
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "carousel-3d-controls",
+				className: "z-10 flex items-center gap-1 rounded-full border border-border bg-card/70 px-1.5 py-0.5 shadow-sm backdrop-blur-md",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "carousel-3d-previous",
+						"aria-label": previousLabel,
+						"aria-controls": `${id}-viewport`,
+						"aria-disabled": atStart || void 0,
+						className: cn(control, "size-6"),
+						onKeyDown: handleKeyDown,
+						onClick: () => {
+							if (!atStart) goTo(index - 1);
+						},
+						children: /* @__PURE__ */ jsx(Chevron, { back: true })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						role: "tablist",
+						"aria-label": dotsLabel,
+						"data-slot": "carousel-3d-dots",
+						className: "flex items-center",
+						children: items.map((item, i) => {
+							const selected = i === index;
+							return /* @__PURE__ */ jsx("button", {
+								ref: (node) => {
+									tabRefs.current[i] = node;
+								},
+								type: "button",
+								role: "tab",
+								"aria-selected": selected,
+								"aria-controls": `${id}-slide-${String(i)}`,
+								"aria-label": item.title,
+								tabIndex: selected ? 0 : -1,
+								"data-slot": "carousel-3d-dot",
+								"data-state": selected ? "active" : "inactive",
+								className: cn("group/dot grid h-6 cursor-pointer place-items-center rounded-full px-0.5", focusRing),
+								onClick: () => goTo(i),
+								onKeyDown: handleKeyDown,
+								children: /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: cn("block h-1 rounded-full transition-[width,background-color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", selected ? "w-4 bg-foreground" : "w-1 bg-foreground/30 group-hover/dot:bg-foreground/50")
+								})
+							}, i);
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "carousel-3d-next",
+						"aria-label": nextLabel,
+						"aria-controls": `${id}-viewport`,
+						"aria-disabled": atEnd || void 0,
+						className: cn(control, "size-6"),
+						onKeyDown: handleKeyDown,
+						onClick: () => {
+							if (!atEnd) goTo(index + 1);
+						},
+						children: /* @__PURE__ */ jsx(Chevron, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { Carousel3D, carousel3dCardVariants, carousel3dVariants };
+
+//# sourceMappingURL=carousel-3d.js.map

package/dist/components/carousel-3d/carousel-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-3d.js","names":[],"sources":["../../../src/components/carousel-3d/carousel-3d.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro Interactive Carousel and CoverFlow Carousel (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\n// The Interactive Carousel is credited in amicro as \"inspired by vivi\" (https://x.com/vivitseng_).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * One mechanism for amicro's two 3D carousels (ADR 0014): every slide sits in\n * the same grid cell and is placed by a transform computed from its offset to\n * the current index. `arc` fans slides along a tilted wheel rim that spreads\n * further on hover; `coverflow` turns them on the Y axis around a perspective\n * path. The monochrome editions are the same mechanism with neutral numbered\n * cards, so they are `tone=\"mono\"`.\n *\n * Motion is CSS transitions on transform and opacity. Drag follows the pointer\n * directly and settles to the nearest slide on release; no velocity is carried,\n * so there is no animation library. Direction comes from `dir` through a CSS\n * variable, so the strip and the rotations mirror in right-to-left layouts.\n */\n\nconst carousel3dVariants = cva(\n  cn(\n    \"group/c3d relative flex w-full flex-col items-center gap-4 overflow-hidden select-none\",\n    \"[--c3d-dir:1] [--c3d-drag:0px] rtl:[--c3d-dir:-1]\",\n  ),\n  {\n    variants: {\n      variant: {\n        arc: \"\",\n        coverflow: \"\",\n      },\n      /** Card size. Every distance in the layout derives from it. */\n      size: {\n        sm: \"[--c3d-card:5rem]\",\n        md: \"[--c3d-card:7rem]\",\n        lg: \"[--c3d-card:10rem]\",\n      },\n      /** When the arc fans out: on hover or focus, always, or never. */\n      spread: {\n        hover: \"[--c3d-spread:0] hover:[--c3d-spread:1] has-[:focus-visible]:[--c3d-spread:1]\",\n        always: \"[--c3d-spread:1]\",\n        never: \"[--c3d-spread:0]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"arc\",\n      size: \"md\",\n      spread: \"hover\",\n    },\n  },\n);\n\n/** The card face: an image, custom content, or a neutral numbered tile. */\nconst carousel3dCardVariants = cva(\n  \"relative grid size-full place-items-center overflow-hidden rounded-xl border shadow-lg\",\n  {\n    variants: {\n      tone: {\n        media: \"border-border bg-card text-card-foreground\",\n        mono: \"border-border bg-muted text-sm font-bold text-muted-foreground\",\n      },\n    },\n    defaultVariants: {\n      tone: \"media\",\n    },\n  },\n);\n\nexport interface Carousel3DItem {\n  /** Visible caption under the active slide, and the name of its dot. */\n  title: string;\n  /** Image URL shown as the card when `tone=\"media\"` and no `content` is given. */\n  image?: string;\n  /** Alternative text for `image`. Defaults to empty: the title already names the slide. */\n  alt?: string;\n  /** Custom card content. Replaces the image or the numbered tile. */\n  content?: ReactNode;\n}\n\nexport interface Carousel3DProps\n  extends\n    Omit<ComponentPropsWithRef<\"section\">, \"children\">,\n    VariantProps<typeof carousel3dVariants>,\n    VariantProps<typeof carousel3dCardVariants> {\n  items: Carousel3DItem[];\n  /** Controlled index of the current slide. */\n  index?: number;\n  /** Initial slide when uncontrolled. Defaults to the middle one, as in the source. */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Wrap from the last slide to the first, and back. The strip rewinds rather than circling. */\n  loop?: boolean;\n  previousLabel?: string;\n  nextLabel?: string;\n  /** Name of the dot list. */\n  dotsLabel?: string;\n  /** Label of each slide, announced with its position. */\n  slideLabel?: (index: number, count: number) => string;\n}\n\nconst DRAG_THRESHOLD = 6;\nconst SWIPE_THRESHOLD = 40;\n\nfunction isRtl(element: HTMLElement | null) {\n  return element?.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\n/** Transform and stacking for one slide, by its offset from the current index. */\nfunction slideStyle(variant: \"arc\" | \"coverflow\", offset: number): CSSProperties {\n  const abs = Math.abs(offset);\n  const drag = \"var(--c3d-drag)\";\n  if (variant === \"coverflow\") {\n    const turn = offset === 0 ? 0 : offset < 0 ? 38 : -38;\n    return {\n      width: \"var(--c3d-card)\",\n      aspectRatio: \"3 / 4\",\n      zIndex: 100 - abs,\n      opacity: abs > 2 ? 0 : 1 - abs * 0.25,\n      transform: [\n        `translateX(calc(${offset} * var(--c3d-dir) * var(--c3d-card) * 0.4 + ${drag}))`,\n        `translateZ(calc(var(--c3d-card) * ${offset === 0 ? 0.6 : -abs * 0.6}))`,\n        `rotateY(calc(${turn} * var(--c3d-dir) * 1deg))`,\n        `scale(${offset === 0 ? 1.1 : 1 - abs * 0.08})`,\n      ].join(\" \"),\n    };\n  }\n  return {\n    width: \"calc(var(--c3d-card) * 1.45)\",\n    zIndex: 100 - abs,\n    transform: [\n      `translateX(calc(${offset} * var(--c3d-dir) * var(--c3d-card) * 1.45 + ${drag}))`,\n      `translateY(calc(${offset} * var(--c3d-spread) * var(--c3d-card) * 0.22))`,\n      `rotate(calc(${offset} * var(--c3d-dir) * (5deg + var(--c3d-spread) * 15deg)))`,\n      `scale(${offset === 0 ? \"1.05\" : \"calc(0.8 - var(--c3d-spread) * 0.15)\"})`,\n    ].join(\" \"),\n  };\n}\n\nconst control = cn(\n  \"inline-grid shrink-0 cursor-pointer place-items-center rounded-full text-muted-foreground\",\n  \"transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n  \"hover:bg-accent hover:text-foreground\",\n  focusRing,\n  disabledStyles,\n);\n\nfunction Chevron({ back }: { back?: boolean }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={cn(\"size-3.5\", mirrorForDirection)}\n    >\n      <path d={back ? \"m15 18-6-6 6-6\" : \"m9 18 6-6-6-6\"} />\n    </svg>\n  );\n}\n\n/** A 3D carousel: an arc of cards or a CoverFlow path, driven by buttons, dots, keys and swipe. */\nexport function Carousel3D({\n  className,\n  items,\n  index: indexProp,\n  defaultIndex,\n  onIndexChange,\n  loop = false,\n  variant,\n  size,\n  spread,\n  tone,\n  previousLabel = \"Previous slide\",\n  nextLabel = \"Next slide\",\n  dotsLabel = \"Slides\",\n  slideLabel = (i, count) => `${String(i + 1)} of ${String(count)}`,\n  ref,\n  \"aria-label\": ariaLabel,\n  ...props\n}: Carousel3DProps) {\n  const count = items.length;\n  const last = Math.max(0, count - 1);\n  const clamp = (value: number) => Math.min(last, Math.max(0, value));\n  const [uncontrolled, setUncontrolled] = useState(() =>\n    clamp(defaultIndex ?? Math.floor(last / 2)),\n  );\n  const index = clamp(indexProp ?? uncontrolled);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const [dragging, setDragging] = useState(false);\n  const id = useId();\n  const rootRef = useRef<HTMLElement | null>(null);\n  const slideRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const drag = useRef<{ x: number; pointer: number; active: boolean } | null>(null);\n  const suppressClick = useRef(false);\n  const shape = variant ?? \"arc\";\n\n  function goTo(next: number) {\n    const target = loop && count > 0 ? ((next % count) + count) % count : clamp(next);\n    if (target === index) return index;\n    if (indexProp === undefined) setUncontrolled(target);\n    onIndexChange?.(target);\n    const item = items[target];\n    if (item) setAnnouncement(`${item.title}, ${slideLabel(target, count)}`);\n    return target;\n  }\n\n  const atStart = !loop && index === 0;\n  const atEnd = !loop && index === last;\n\n  /** Arrow keys, Home and End on the controls; slide content keeps its own keys. */\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    const forward = isRtl(rootRef.current) ? -1 : 1;\n    let next: number | null = null;\n    if (event.key === \"ArrowRight\") next = index + forward;\n    else if (event.key === \"ArrowLeft\") next = index - forward;\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = last;\n    if (next === null) return;\n    event.preventDefault();\n    const landed = goTo(next);\n    // Arrow keys on the dots move focus with the selection, as in a tablist.\n    if (event.target instanceof HTMLElement && event.target.getAttribute(\"role\") === \"tab\") {\n      tabRefs.current[landed]?.focus();\n    }\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (event.button !== 0) return;\n    drag.current = { x: event.clientX, pointer: event.pointerId, active: false };\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    const state = drag.current;\n    if (!state || state.pointer !== event.pointerId) return;\n    const dx = event.clientX - state.x;\n    if (!state.active && Math.abs(dx) > DRAG_THRESHOLD) {\n      state.active = true;\n      setDragging(true);\n      event.currentTarget.setPointerCapture(event.pointerId);\n    }\n    if (state.active) event.currentTarget.style.setProperty(\"--c3d-drag\", `${String(dx)}px`);\n  }\n\n  function endDrag(event: PointerEvent<HTMLDivElement>, cancelled: boolean) {\n    const state = drag.current;\n    drag.current = null;\n    if (!state?.active) return;\n    const dx = event.clientX - state.x;\n    event.currentTarget.style.setProperty(\"--c3d-drag\", \"0px\");\n    setDragging(false);\n    suppressClick.current = true;\n    if (cancelled || Math.abs(dx) < SWIPE_THRESHOLD) return;\n    // An arc slide is one step wide; CoverFlow cards overlap, 0.4 of a card apart.\n    const width = slideRefs.current[index]?.offsetWidth ?? 0;\n    const step = width * (shape === \"coverflow\" ? 0.4 : 1);\n    const steps = step > 0 ? Math.max(1, Math.round(Math.abs(dx) / step)) : 1;\n    // Dragging toward the inline start pulls the next slide in.\n    const toward = (dx < 0 ? 1 : -1) * (isRtl(rootRef.current) ? -1 : 1);\n    goTo(index + toward * steps);\n  }\n\n  /** A click on a neighbouring card selects it. The neighbours are inert, so hit-test by geometry. */\n  function handleClick(event: MouseEvent<HTMLDivElement>) {\n    if (suppressClick.current) {\n      suppressClick.current = false;\n      return;\n    }\n    if (event.detail === 0) return;\n    let hit: number | null = null;\n    slideRefs.current.forEach((slide, i) => {\n      if (!slide) return;\n      const rect = slide.getBoundingClientRect();\n      const inside =\n        event.clientX >= rect.left &&\n        event.clientX <= rect.right &&\n        event.clientY >= rect.top &&\n        event.clientY <= rect.bottom;\n      if (inside && (hit === null || Math.abs(i - index) < Math.abs(hit - index))) hit = i;\n    });\n    if (hit !== null && hit !== index) goTo(hit);\n  }\n\n  const cardClass = carousel3dCardVariants({ tone });\n\n  return (\n    <section\n      ref={(node) => {\n        rootRef.current = node;\n        if (typeof ref === \"function\") return ref(node);\n        if (ref) ref.current = node;\n      }}\n      data-slot=\"carousel-3d\"\n      data-variant={shape}\n      aria-roledescription=\"carousel\"\n      aria-label={ariaLabel ?? (props[\"aria-labelledby\"] ? undefined : \"Carousel\")}\n      className={cn(carousel3dVariants({ variant, size, spread }), className)}\n      {...props}\n    >\n      {/* Pointer-only conveniences (swipe, click a neighbour); the buttons and dots cover both. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        id={`${id}-viewport`}\n        data-slot=\"carousel-3d-viewport\"\n        data-dragging={dragging ? \"\" : undefined}\n        className={cn(\n          \"relative grid w-full touch-pan-y place-items-center\",\n          dragging ? \"cursor-grabbing\" : \"cursor-grab\",\n        )}\n        style={\n          shape === \"coverflow\"\n            ? {\n                perspective: \"calc(var(--c3d-card) * 12)\",\n                transformStyle: \"preserve-3d\",\n                height: \"calc(var(--c3d-card) * 1.9)\",\n              }\n            : { height: \"calc(var(--c3d-card) * 2.1)\" }\n        }\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={(event) => {\n          endDrag(event, false);\n        }}\n        onPointerCancel={(event) => {\n          endDrag(event, true);\n        }}\n        onClick={handleClick}\n      >\n        {items.map((item, i) => {\n          const offset = i - index;\n          const current = offset === 0;\n          const face =\n            item.content ??\n            (tone !== \"mono\" && item.image ? (\n              <img\n                src={item.image}\n                alt={item.alt ?? \"\"}\n                draggable={false}\n                className=\"size-full object-cover\"\n              />\n            ) : (\n              <span aria-hidden=\"true\">{i + 1}</span>\n            ));\n          const caption = (\n            <span\n              data-slot=\"carousel-3d-caption\"\n              className={cn(\n                \"max-w-full truncate text-xs font-semibold text-foreground\",\n                // CoverFlow hangs the caption under a card that fills the slide.\n                shape === \"coverflow\" && \"absolute inset-x-0 top-full mt-2 text-center\",\n                \"transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                !current && \"scale-75 opacity-0\",\n              )}\n            >\n              {item.title}\n            </span>\n          );\n          return (\n            <div\n              key={i}\n              ref={(node) => {\n                slideRefs.current[i] = node;\n              }}\n              id={`${id}-slide-${String(i)}`}\n              role=\"tabpanel\"\n              aria-roledescription=\"slide\"\n              aria-label={slideLabel(i, count)}\n              // Inert and hidden both: inert alone is not yet honoured by every screen reader.\n              aria-hidden={current ? undefined : true}\n              inert={!current}\n              data-slot=\"carousel-3d-slide\"\n              data-state={current ? \"active\" : \"inactive\"}\n              className={cn(\n                \"relative col-start-1 row-start-1 flex flex-col items-center gap-1.5 will-change-transform\",\n                \"transition-[transform,opacity] duration-[var(--duration-slower)]\",\n                shape === \"arc\"\n                  ? \"ease-[var(--ease-overshoot)]\"\n                  : \"ease-[var(--ease-out-quint)]\",\n                \"group-data-[dragging]/c3d:transition-none\",\n              )}\n              style={slideStyle(shape, offset)}\n            >\n              {shape === \"arc\" ? caption : null}\n              <div\n                data-slot=\"carousel-3d-card\"\n                className={cardClass}\n                style={\n                  shape === \"arc\"\n                    ? { width: \"var(--c3d-card)\", height: \"var(--c3d-card)\" }\n                    : undefined\n                }\n              >\n                {face}\n              </div>\n              {shape === \"coverflow\" ? caption : null}\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        data-slot=\"carousel-3d-controls\"\n        className=\"z-10 flex items-center gap-1 rounded-full border border-border bg-card/70 px-1.5 py-0.5 shadow-sm backdrop-blur-md\"\n      >\n        <button\n          type=\"button\"\n          data-slot=\"carousel-3d-previous\"\n          aria-label={previousLabel}\n          aria-controls={`${id}-viewport`}\n          aria-disabled={atStart || undefined}\n          className={cn(control, \"size-6\")}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            if (!atStart) goTo(index - 1);\n          }}\n        >\n          <Chevron back />\n        </button>\n        <div\n          role=\"tablist\"\n          aria-label={dotsLabel}\n          data-slot=\"carousel-3d-dots\"\n          className=\"flex items-center\"\n        >\n          {items.map((item, i) => {\n            const selected = i === index;\n            return (\n              <button\n                key={i}\n                ref={(node) => {\n                  tabRefs.current[i] = node;\n                }}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={selected}\n                aria-controls={`${id}-slide-${String(i)}`}\n                aria-label={item.title}\n                tabIndex={selected ? 0 : -1}\n                data-slot=\"carousel-3d-dot\"\n                data-state={selected ? \"active\" : \"inactive\"}\n                className={cn(\n                  \"group/dot grid h-6 cursor-pointer place-items-center rounded-full px-0.5\",\n                  focusRing,\n                )}\n                onClick={() => goTo(i)}\n                onKeyDown={handleKeyDown}\n              >\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(\n                    \"block h-1 rounded-full transition-[width,background-color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                    selected\n                      ? \"w-4 bg-foreground\"\n                      : \"w-1 bg-foreground/30 group-hover/dot:bg-foreground/50\",\n                  )}\n                />\n              </button>\n            );\n          })}\n        </div>\n        <button\n          type=\"button\"\n          data-slot=\"carousel-3d-next\"\n          aria-label={nextLabel}\n          aria-controls={`${id}-viewport`}\n          aria-disabled={atEnd || undefined}\n          className={cn(control, \"size-6\")}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            if (!atEnd) goTo(index + 1);\n          }}\n        >\n          <Chevron />\n        </button>\n      </div>\n\n      <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {announcement}\n      </p>\n    </section>\n  );\n}\n\nexport { carousel3dCardVariants, carousel3dVariants };\n"],"mappings":"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"}

package/dist/components/carousel-3d/index.d.ts

@@ -0,0 +1,2 @@
+import { Carousel3D, Carousel3DItem, Carousel3DProps, carousel3dCardVariants, carousel3dVariants } from "./carousel-3d.js";
+export { Carousel3D, type Carousel3DItem, type Carousel3DProps, carousel3dCardVariants, carousel3dVariants };

package/dist/components/carousel-3d/index.js

@@ -0,0 +1,2 @@
+import { Carousel3D, carousel3dCardVariants, carousel3dVariants } from "./carousel-3d.js";
+export { Carousel3D, carousel3dCardVariants, carousel3dVariants };

package/dist/components/carousel-3d/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/carousel-3d/meta.ts
+const meta = defineMeta({
+	name: "carousel-3d",
+	title: "3D Carousel",
+	description: "A 3D carousel of cards — a fanned arc or a CoverFlow path — with buttons, dots, arrow keys and swipe.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["carousel-3d.tsx"],
+	a11y: "Follows the APG tabbed carousel: a region with aria-roledescription=\"carousel\", slides that are tabpanels with aria-roledescription=\"slide\" and a position label, named previous/next buttons, and a tablist of dots with a roving tab stop. Arrow keys (mirrored in right-to-left layouts), Home and End move between slides anywhere in the carousel; changes are announced through a polite status. Only the current slide is in the accessibility tree and tab order — the neighbours are inert, and clicking one selects it. Swipe is a pointer convenience with button, dot and key equivalents. It never rotates on its own. Motion stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/carousel-3d/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/carousel-3d/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"carousel-3d\",\n  title: \"3D Carousel\",\n  description:\n    \"A 3D carousel of cards — a fanned arc or a CoverFlow path — with buttons, dots, arrow keys and swipe.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"carousel-3d.tsx\"],\n  a11y:\n    'Follows the APG tabbed carousel: a region with aria-roledescription=\"carousel\", slides that are tabpanels with ' +\n    'aria-roledescription=\"slide\" and a position label, named previous/next buttons, and a tablist of dots with a ' +\n    \"roving tab stop. Arrow keys (mirrored in right-to-left layouts), Home and End move between slides anywhere in \" +\n    \"the carousel; changes are announced through a polite status. Only the current slide is in the accessibility \" +\n    \"tree and tab order — the neighbours are inert, and clicking one selects it. Swipe is a pointer convenience \" +\n    \"with button, dot and key equivalents. It never rotates on its own. Motion stops 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,iBAAiB;CACzB,MACE;AAMJ,CAAC"}

package/dist/components/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;KAeY,gBAAgB,6BAA6B,SAAkB;iBAE3D,aAAW,cAAc,SAAS,gCAAa,IAAA"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;KAgBY,gBAAgB,6BAA6B,SAAkB;iBAkB3D,aAAW,cAAc,SAAS,gCAAa,IAAA"}

package/dist/components/checkbox/checkbox.js

@@ -4,6 +4,18 @@ import { cn } from "../../lib/utils.js";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox.tsx
+/**
+* Draws a mark along its own length when it appears.
+*
+* `pathLength={1}` normalises the stroke so one dash covers the whole path;
+* `@starting-style` (the `starting:` variant) gives the first frame an offset
+* of a full length, and the transition runs it to zero. It is a transition,
+* not a keyframe, so there is no stylesheet to ship, it re-runs whenever the
+* mark is shown again (checked ↔ indeterminate toggles `display`), and a
+* browser without `@starting-style` simply shows the mark drawn. Reduced
+* motion collapses the transition, which also leaves it drawn.
+*/
+const drawn = cn("[stroke-dasharray:1] [stroke-dashoffset:0] starting:[stroke-dashoffset:1]", "transition-[stroke-dashoffset] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]");
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-slot": "checkbox",
@@ -18,7 +30,10 @@ function Checkbox$1({ className, ...props }) {
 				"aria-hidden": "true",
 				className: "size-3.5 group-data-[state=indeterminate]:hidden",
 				children: /* @__PURE__ */ jsx("path", {
+					"data-slot": "checkbox-check",
 					d: "m5 13 4 4L19 7",
+					pathLength: 1,
+					className: drawn,
 					stroke: "currentColor",
 					strokeWidth: "3",
 					strokeLinecap: "round",
@@ -30,7 +45,10 @@ function Checkbox$1({ className, ...props }) {
 				"aria-hidden": "true",
 				className: "hidden size-3.5 group-data-[state=indeterminate]:block",
 				children: /* @__PURE__ */ jsx("path", {
+					"data-slot": "checkbox-dash",
 					d: "M6 12h12",
+					pathLength: 1,
+					className: drawn,
 					stroke: "currentColor",
 					strokeWidth: "3",
 					strokeLinecap: "round"

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A control for a single on/off choice, or one of several independent choices.\n *\n * Supports the indeterminate state (`checked=\"indeterminate\"`) for a parent box\n * summarising a partially-selected group. Indeterminate is a state the\n * *application* sets, never a third value the user cycles into.\n */\nexport type CheckboxProps = ComponentPropsWithRef<typeof CheckboxPrimitive.Root>;\n\nexport function Checkbox({ className, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer size-4 shrink-0 rounded-xs border border-input bg-background shadow-xs\",\n        \"transition-[background-color,border-color,box-shadow] duration-[var(--duration-fast)]\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n        \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n        \"disabled:cursor-not-allowed disabled:opacity-55\",\n        \"aria-invalid:border-destructive\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {/* The indicator carries data-state, so both marks live here and CSS picks\n          one. Rendering conditionally in JS would need the checked value, which\n          an uncontrolled checkbox does not expose. */}\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group grid place-items-center text-current\"\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-3.5 group-data-[state=indeterminate]:hidden\"\n        >\n          <path\n            d=\"m5 13 4 4L19 7\"\n            stroke=\"currentColor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"hidden size-3.5 group-data-[state=indeterminate]:block\"\n        >\n          <path d=\"M6 12h12\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n        </svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;AAiBA,SAAgBA,WAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,+EACA,yFACA,oHACA,sIACA,mDACA,mCACA,WACA,SACF;EACA,GAAI;EAKJ,UAAA,qBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,GACL,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KAAM,GAAE;KAAW,QAAO;KAAe,aAAY;KAAI,eAAc;IAAS,CAAA;GAC7E,CAAA,CACsB;;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Checkbox (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A control for a single on/off choice, or one of several independent choices.\n *\n * Supports the indeterminate state (`checked=\"indeterminate\"`) for a parent box\n * summarising a partially-selected group. Indeterminate is a state the\n * *application* sets, never a third value the user cycles into.\n */\nexport type CheckboxProps = ComponentPropsWithRef<typeof CheckboxPrimitive.Root>;\n\n/**\n * Draws a mark along its own length when it appears.\n *\n * `pathLength={1}` normalises the stroke so one dash covers the whole path;\n * `@starting-style` (the `starting:` variant) gives the first frame an offset\n * of a full length, and the transition runs it to zero. It is a transition,\n * not a keyframe, so there is no stylesheet to ship, it re-runs whenever the\n * mark is shown again (checked ↔ indeterminate toggles `display`), and a\n * browser without `@starting-style` simply shows the mark drawn. Reduced\n * motion collapses the transition, which also leaves it drawn.\n */\nconst drawn = cn(\n  \"[stroke-dasharray:1] [stroke-dashoffset:0] starting:[stroke-dashoffset:1]\",\n  \"transition-[stroke-dashoffset] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n);\n\nexport function Checkbox({ className, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer size-4 shrink-0 rounded-xs border border-input bg-background shadow-xs\",\n        \"transition-[background-color,border-color,box-shadow] duration-[var(--duration-fast)]\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n        \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n        \"disabled:cursor-not-allowed disabled:opacity-55\",\n        \"aria-invalid:border-destructive\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {/* The indicator carries data-state, so both marks live here and CSS picks\n          one. Rendering conditionally in JS would need the checked value, which\n          an uncontrolled checkbox does not expose. */}\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group grid place-items-center text-current\"\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-3.5 group-data-[state=indeterminate]:hidden\"\n        >\n          <path\n            data-slot=\"checkbox-check\"\n            d=\"m5 13 4 4L19 7\"\n            pathLength={1}\n            className={drawn}\n            stroke=\"currentColor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"hidden size-3.5 group-data-[state=indeterminate]:block\"\n        >\n          <path\n            data-slot=\"checkbox-dash\"\n            d=\"M6 12h12\"\n            pathLength={1}\n            className={drawn}\n            stroke=\"currentColor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,QAAQ,GACZ,6EACA,+FACF;AAEA,SAAgBA,WAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,+EACA,yFACA,oHACA,sIACA,mDACA,mCACA,WACA,SACF;EACA,GAAI;EAKJ,UAAA,qBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,GAAE;KACF,YAAY;KACZ,WAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,GACL,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,GAAE;KACF,YAAY;KACZ,WAAW;KACX,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA,CACsB;;CACP,CAAA;AAE5B"}

package/dist/components/code-block/code-block.d.ts

@@ -25,22 +25,6 @@ interface CodeBlockProps extends ComponentPropsWithRef<"div"> {
   hideCopy?: boolean;
 }
 declare function CodeBlock({ className, language, title, code, hideCopy, children, ...props }: CodeBlockProps): import("react").JSX.Element;
-interface CopyButtonProps extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
-  getText: () => string;
-  label?: string;
-  copiedLabel?: string;
-  /** How long the confirmation stays, in milliseconds. */
-  resetAfter?: number;
-}
-/**
- * Copies text and confirms it.
- *
- * The confirmation is announced politely as well as shown — a checkmark that
- * only appears visually leaves a screen reader user with no idea whether the
- * button did anything. Failure is surfaced too, rather than silently looking
- * like success, since the clipboard API can be refused outright.
- */
-declare function CopyButton({ className, getText, label, copiedLabel, resetAfter, ...props }: CopyButtonProps): import("react").JSX.Element;
 //#endregion
-export { CodeBlock, CodeBlockProps, CopyButton, CopyButtonProps };
+export { CodeBlock, CodeBlockProps };
 //# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block/code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.d.ts","names":[],"sources":["../../../src/components/code-block/code-block.tsx"],"mappings":";;;;;;;;;;;UAiBiB,uBAAuB;;EAEtC;;EAEA;;;;;;;EAOA;;EAEA;;iBAGc,YACd,WACA,UACA,OACA,MACA,UACA,aACG,SACF,iCAAc,IAAA;UAwCA,wBAAwB,KAAK;EAC5C;EACA;EACA;;EAEA;;;;;;;;;;iBAWc,aACd,WACA,SACA,OACA,aACA,eACG,SACF,kCAAe,IAAA"}
+{"version":3,"file":"code-block.d.ts","names":[],"sources":["../../../src/components/code-block/code-block.tsx"],"mappings":";;;;;;;;;;;UAkBiB,uBAAuB;;EAEtC;;EAEA;;;;;;;EAOA;;EAEA;;iBAGc,YACd,WACA,UACA,OACA,MACA,UACA,aACG,SACF,iCAAc,IAAA"}

package/dist/components/code-block/code-block.js

@@ -1,8 +1,9 @@
 "use client";
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
+import { CopyButton } from "../copy-button/copy-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 //#region src/components/code-block/code-block.tsx
 function CodeBlock({ className, language, title, code, hideCopy, children, ...props }) {
 	const preRef = useRef(null);
@@ -17,7 +18,12 @@ function CodeBlock({ className, language, title, code, hideCopy, children, ...pr
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "truncate text-2xs font-medium text-muted-foreground",
 				children: title ?? language
-			}), hideCopy ? null : /* @__PURE__ */ jsx(CopyButton, { getText: () => code ?? preRef.current?.textContent ?? "" })]
+			}), hideCopy ? null : /* @__PURE__ */ jsx(CopyButton, {
+				value: () => code ?? preRef.current?.textContent ?? "",
+				variant: "ghost",
+				"aria-label": "Copy code",
+				className: cn("ms-auto size-6 rounded text-muted-foreground hover:text-foreground", "[&_svg:not([class*='size-'])]:size-3.5")
+			})]
 		}) : null, /* @__PURE__ */ jsx("pre", {
 			ref: preRef,
 			tabIndex: 0,
@@ -28,83 +34,7 @@ function CodeBlock({ className, language, title, code, hideCopy, children, ...pr
 		})]
 	});
 }
-/**
-* Copies text and confirms it.
-*
-* The confirmation is announced politely as well as shown — a checkmark that
-* only appears visually leaves a screen reader user with no idea whether the
-* button did anything. Failure is surfaced too, rather than silently looking
-* like success, since the clipboard API can be refused outright.
-*/
-function CopyButton({ className, getText, label = "Copy code", copiedLabel = "Copied", resetAfter = 2e3, ...props }) {
-	const [state, setState] = useState("idle");
-	const timer = useRef(null);
-	useEffect(() => () => {
-		if (timer.current) clearTimeout(timer.current);
-	}, []);
-	const copy = useCallback(() => {
-		const reset = () => {
-			if (timer.current) clearTimeout(timer.current);
-			timer.current = setTimeout(() => {
-				setState("idle");
-			}, resetAfter);
-		};
-		navigator.clipboard.writeText(getText()).then(() => {
-			setState("copied");
-			reset();
-		}, () => {
-			setState("error");
-			reset();
-		});
-	}, [getText, resetAfter]);
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		"data-slot": "copy-button",
-		"data-state": state,
-		onClick: copy,
-		"aria-label": label,
-		className: cn("ml-auto grid size-6 shrink-0 place-items-center rounded text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", focusRing, className),
-		...props,
-		children: [state === "copied" ? /* @__PURE__ */ jsx("svg", {
-			viewBox: "0 0 24 24",
-			fill: "none",
-			"aria-hidden": "true",
-			className: "size-3.5",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "m5 13 4 4L19 7",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
-			})
-		}) : /* @__PURE__ */ jsxs("svg", {
-			viewBox: "0 0 24 24",
-			fill: "none",
-			"aria-hidden": "true",
-			className: "size-3.5",
-			children: [/* @__PURE__ */ jsx("rect", {
-				x: "9",
-				y: "9",
-				width: "12",
-				height: "12",
-				rx: "2",
-				stroke: "currentColor",
-				strokeWidth: "2"
-			}), /* @__PURE__ */ jsx("path", {
-				d: "M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round"
-			})]
-		}), /* @__PURE__ */ jsx("span", {
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: state === "copied" ? copiedLabel : state === "error" ? "Copy failed" : ""
-		})]
-	});
-}
 //#endregion
-export { CodeBlock, CopyButton };
+export { CodeBlock };
 
 //# sourceMappingURL=code-block.js.map