@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/reviews-carousel/carousel-controls.js

@@ -0,0 +1,189 @@
+"use client";
+import { mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/reviews-carousel/carousel-controls.tsx
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+function subscribeReducedMotion(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => {
+		query.removeEventListener("change", onChange);
+	};
+}
+/** Whether the reader has asked for less motion, kept live. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);
+}
+/** `index` wrapped into `[0, count)`. */
+function wrapIndex(index, count) {
+	if (count <= 0) return 0;
+	return (index % count + count) % count;
+}
+/** A controllable slide index that wraps or clamps. */
+function useCarouselIndex({ count, index: indexProp, defaultIndex = 0, onIndexChange, loop }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const controlled = indexProp !== void 0;
+	const raw = controlled ? indexProp : uncontrolled;
+	const last = Math.max(0, count - 1);
+	const index = loop ? wrapIndex(raw, count) : Math.min(Math.max(raw, 0), last);
+	const goTo = useCallback((target) => {
+		const next = loop ? wrapIndex(target, count) : Math.min(Math.max(target, 0), last);
+		if (next === index) return;
+		if (!controlled) setUncontrolled(next);
+		onIndexChange?.(next);
+	}, [
+		loop,
+		count,
+		last,
+		index,
+		controlled,
+		onIndexChange
+	]);
+	return {
+		index,
+		goTo,
+		next: () => {
+			goTo(index + 1);
+		},
+		previous: () => {
+			goTo(index - 1);
+		},
+		canNext: count > 1 && (loop || index < last),
+		canPrevious: count > 1 && (loop || index > 0)
+	};
+}
+function isRightToLeft(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+/**
+* Arrow keys (mirrored in RTL), Home and End, for the carousel's own controls.
+* It is bound to the buttons rather than the region, so arrow keys pressed
+* inside a slide's content — a text field, a slider — are never taken over.
+* Returns true when it handled the key.
+*/
+function handleCarouselKey(event, keys) {
+	if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;
+	const rtl = isRightToLeft(event.currentTarget);
+	const action = {
+		ArrowRight: rtl ? keys.previous : keys.next,
+		ArrowLeft: rtl ? keys.next : keys.previous,
+		Home: keys.first,
+		End: keys.last
+	}[event.key];
+	if (!action) return false;
+	event.preventDefault();
+	action();
+	return true;
+}
+/** APG automatic rotation: a stop/start control, and pauses for hover and focus. */
+function useAutoRotate({ autoPlay, interval, count, resetKey, advance }) {
+	const reduced = usePrefersReducedMotion();
+	const [playing, setPlaying] = useState(autoPlay);
+	const [chosen, setChosen] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const advanceRef = useRef(advance);
+	useEffect(() => {
+		advanceRef.current = advance;
+	});
+	const enabled = playing && (chosen || !reduced);
+	const rotating = enabled && !hovered && !focused && count > 1;
+	useEffect(() => {
+		if (!rotating) return;
+		const timer = setInterval(() => {
+			advanceRef.current();
+		}, interval);
+		return () => {
+			clearInterval(timer);
+		};
+	}, [
+		rotating,
+		interval,
+		resetKey
+	]);
+	return {
+		/** Whether rotation is switched on (it may still be paused by hover or focus). */
+		enabled,
+		/** Whether slides are changing by themselves right now. */
+		rotating,
+		toggle: () => {
+			setChosen(true);
+			setPlaying(!enabled);
+		},
+		rootProps: {
+			onPointerEnter: () => {
+				setHovered(true);
+			},
+			onPointerLeave: () => {
+				setHovered(false);
+			},
+			onFocus: (event) => {
+				const target = event.target;
+				setFocused(target.closest("[data-slot=carousel-rotation]") === null);
+			},
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+			}
+		}
+	};
+}
+/** Chains a consumer's handler before ours. */
+function chain(ours, theirs) {
+	return (event) => {
+		theirs?.(event);
+		ours(event);
+	};
+}
+/** A round previous/next button whose chevron mirrors in RTL. */
+function CarouselButton({ direction, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"data-slot": `carousel-${direction}`,
+		className: cn("size-8 rounded-full bg-background/70 backdrop-blur-sm", className),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			className: cn("size-4", mirrorForDirection),
+			children: /* @__PURE__ */ jsx("path", { d: direction === "previous" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+		})
+	});
+}
+/** The APG rotation control. Its name says what pressing it will do. */
+function RotationButton({ enabled, onToggle, stopLabel, startLabel, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"data-slot": "carousel-rotation",
+		"aria-label": enabled ? stopLabel : startLabel,
+		className: cn("size-8 rounded-full bg-background/70 backdrop-blur-sm", className),
+		onClick: onToggle,
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			className: "size-3.5",
+			children: enabled ? /* @__PURE__ */ jsx("path", { d: "M7 5h3v14H7zM14 5h3v14h-3z" }) : /* @__PURE__ */ jsx("path", { d: "M8 5.5v13a.5.5 0 0 0 .76.43l10.4-6.5a.5.5 0 0 0 0-.86L8.76 5.07A.5.5 0 0 0 8 5.5z" })
+		})
+	});
+}
+//#endregion
+export { CarouselButton, RotationButton, chain, handleCarouselKey, prefersReducedMotion, useAutoRotate, useCarouselIndex, usePrefersReducedMotion, wrapIndex };
+
+//# sourceMappingURL=carousel-controls.js.map

package/dist/components/reviews-carousel/carousel-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-controls.js","names":[],"sources":["../../../src/components/reviews-carousel/carousel-controls.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by the WAI-ARIA APG Carousel pattern).\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The state, keyboard and rotation rules every Dowel carousel shares, kept in\n * one file that each carousel carries so it installs on its own.\n *\n * - The index is controllable (`index` / `defaultIndex` / `onIndexChange`).\n * - Arrow keys follow the reading direction: in a right-to-left document the\n *   right arrow goes back, because \"next\" lies toward the inline end.\n * - Automatic rotation follows the APG: it has a stop/start control, pauses\n *   while the pointer is over the carousel or focus is inside it, and never\n *   starts by itself under reduced motion.\n */\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(REDUCED_MOTION).matches\n  );\n}\n\nfunction subscribeReducedMotion(onChange: () => void): () => void {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => {};\n  }\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => {\n    query.removeEventListener(\"change\", onChange);\n  };\n}\n\n/** Whether the reader has asked for less motion, kept live. */\nexport function usePrefersReducedMotion(): boolean {\n  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, () => false);\n}\n\n/** `index` wrapped into `[0, count)`. */\nexport function wrapIndex(index: number, count: number): number {\n  if (count <= 0) return 0;\n  return ((index % count) + count) % count;\n}\n\nexport interface CarouselIndexOptions {\n  count: number;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Wrap from the last slide to the first. Otherwise the ends are hard stops. */\n  loop: boolean;\n}\n\n/** A controllable slide index that wraps or clamps. */\nexport function useCarouselIndex({\n  count,\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  loop,\n}: CarouselIndexOptions) {\n  const [uncontrolled, setUncontrolled] = useState(defaultIndex);\n  const controlled = indexProp !== undefined;\n  const raw = controlled ? indexProp : uncontrolled;\n  const last = Math.max(0, count - 1);\n  const index = loop ? wrapIndex(raw, count) : Math.min(Math.max(raw, 0), last);\n\n  const goTo = useCallback(\n    (target: number) => {\n      const next = loop ? wrapIndex(target, count) : Math.min(Math.max(target, 0), last);\n      if (next === index) return;\n      if (!controlled) setUncontrolled(next);\n      onIndexChange?.(next);\n    },\n    [loop, count, last, index, controlled, onIndexChange],\n  );\n\n  return {\n    index,\n    goTo,\n    next: () => {\n      goTo(index + 1);\n    },\n    previous: () => {\n      goTo(index - 1);\n    },\n    canNext: count > 1 && (loop || index < last),\n    canPrevious: count > 1 && (loop || index > 0),\n  };\n}\n\nfunction isRightToLeft(element: Element): boolean {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\nexport interface CarouselKeys {\n  next: () => void;\n  previous: () => void;\n  first: () => void;\n  last: () => void;\n}\n\n/**\n * Arrow keys (mirrored in RTL), Home and End, for the carousel's own controls.\n * It is bound to the buttons rather than the region, so arrow keys pressed\n * inside a slide's content — a text field, a slider — are never taken over.\n * Returns true when it handled the key.\n */\nexport function handleCarouselKey(\n  event: KeyboardEvent<HTMLElement>,\n  keys: CarouselKeys,\n): boolean {\n  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;\n  const rtl = isRightToLeft(event.currentTarget);\n  const action = {\n    ArrowRight: rtl ? keys.previous : keys.next,\n    ArrowLeft: rtl ? keys.next : keys.previous,\n    Home: keys.first,\n    End: keys.last,\n  }[event.key];\n  if (!action) return false;\n  event.preventDefault();\n  action();\n  return true;\n}\n\nexport interface AutoRotateOptions {\n  autoPlay: boolean;\n  /** Milliseconds per slide. */\n  interval: number;\n  count: number;\n  /** Changes whenever the slide changes, so a manual move restarts the clock. */\n  resetKey: number;\n  advance: () => void;\n}\n\n/** APG automatic rotation: a stop/start control, and pauses for hover and focus. */\nexport function useAutoRotate({\n  autoPlay,\n  interval,\n  count,\n  resetKey,\n  advance,\n}: AutoRotateOptions) {\n  const reduced = usePrefersReducedMotion();\n  const [playing, setPlaying] = useState(autoPlay);\n  // Under reduced motion rotation only runs once the reader has asked for it.\n  const [chosen, setChosen] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const advanceRef = useRef(advance);\n\n  useEffect(() => {\n    advanceRef.current = advance;\n  });\n\n  const enabled = playing && (chosen || !reduced);\n  const rotating = enabled && !hovered && !focused && count > 1;\n\n  useEffect(() => {\n    if (!rotating) return;\n    const timer = setInterval(() => {\n      advanceRef.current();\n    }, interval);\n    return () => {\n      clearInterval(timer);\n    };\n  }, [rotating, interval, resetKey]);\n\n  return {\n    /** Whether rotation is switched on (it may still be paused by hover or focus). */\n    enabled,\n    /** Whether slides are changing by themselves right now. */\n    rotating,\n    toggle: () => {\n      setChosen(true);\n      setPlaying(!enabled);\n    },\n    rootProps: {\n      onPointerEnter: () => {\n        setHovered(true);\n      },\n      onPointerLeave: () => {\n        setHovered(false);\n      },\n      // Focus on the rotation control itself does not pause: that is where a\n      // keyboard user sits to start rotation and watch it run.\n      onFocus: (event: FocusEvent<HTMLElement>) => {\n        const target = event.target as Element;\n        setFocused(target.closest(\"[data-slot=carousel-rotation]\") === null);\n      },\n      onBlur: (event: FocusEvent<HTMLElement>) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n      },\n    },\n  };\n}\n\n/** Chains a consumer's handler before ours. */\nexport function chain<E>(ours: (event: E) => void, theirs?: (event: E) => void) {\n  return (event: E) => {\n    theirs?.(event);\n    ours(event);\n  };\n}\n\nexport interface CarouselButtonProps extends Omit<ButtonProps, \"children\"> {\n  direction: \"previous\" | \"next\";\n}\n\n/** A round previous/next button whose chevron mirrors in RTL. */\nexport function CarouselButton({ direction, className, ...props }: CarouselButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot={`carousel-${direction}`}\n      className={cn(\"size-8 rounded-full bg-background/70 backdrop-blur-sm\", className)}\n      {...props}\n    >\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-4\", mirrorForDirection)}\n      >\n        <path d={direction === \"previous\" ? \"m15 18-6-6 6-6\" : \"m9 18 6-6-6-6\"} />\n      </svg>\n    </Button>\n  );\n}\n\nexport interface RotationButtonProps extends Omit<ButtonProps, \"children\" | \"onClick\"> {\n  enabled: boolean;\n  onToggle: () => void;\n  stopLabel: string;\n  startLabel: string;\n}\n\n/** The APG rotation control. Its name says what pressing it will do. */\nexport function RotationButton({\n  enabled,\n  onToggle,\n  stopLabel,\n  startLabel,\n  className,\n  ...props\n}: RotationButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot=\"carousel-rotation\"\n      aria-label={enabled ? stopLabel : startLabel}\n      className={cn(\"size-8 rounded-full bg-background/70 backdrop-blur-sm\", className)}\n      onClick={onToggle}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" className=\"size-3.5\">\n        {enabled ? (\n          <path d=\"M7 5h3v14H7zM14 5h3v14h-3z\" />\n        ) : (\n          <path d=\"M8 5.5v13a.5.5 0 0 0 .76.43l10.4-6.5a.5.5 0 0 0 0-.86L8.76 5.07A.5.5 0 0 0 8 5.5z\" />\n        )}\n      </svg>\n    </Button>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Review, ReviewsCarousel, ReviewsCarouselLabels, ReviewsCarouselProps, reviewsCarouselVariants } from "./reviews-carousel.js";
+export { type Review, ReviewsCarousel, type ReviewsCarouselLabels, type ReviewsCarouselProps, reviewsCarouselVariants };

package/dist/components/reviews-carousel/index.js

@@ -0,0 +1,2 @@
+import { ReviewsCarousel, reviewsCarouselVariants } from "./reviews-carousel.js";
+export { ReviewsCarousel, reviewsCarouselVariants };

package/dist/components/reviews-carousel/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/reviews-carousel/meta.ts
+const meta = defineMeta({
+	name: "reviews-carousel",
+	title: "Reviews Carousel",
+	description: "Testimonials stacked in depth — the active review in front, the next ones receding behind — stepped through with buttons, indicators or arrow keys.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["reviews-carousel.tsx", "carousel-controls.tsx"],
+	a11y: "Follows the APG carousel pattern: a section with aria-roledescription=\"carousel\", each review a labelled group with aria-roledescription=\"slide\", and only the active one exposed (the rest are aria-hidden and inert). Previous/next buttons and indicator buttons are named, the current indicator carries aria-current, and the end buttons use aria-disabled so focus is never dropped. Arrow keys (mirrored in RTL), Home and End work while focus is inside. `autoPlay` adds a stop/start control, pauses on hover and focus, turns the live region off while rotating, and does not start by itself under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/reviews-carousel/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/reviews-carousel/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"reviews-carousel\",\n  title: \"Reviews Carousel\",\n  description:\n    \"Testimonials stacked in depth — the active review in front, the next ones receding behind — stepped through with buttons, indicators or arrow keys.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"reviews-carousel.tsx\", \"carousel-controls.tsx\"],\n  a11y:\n    'Follows the APG carousel pattern: a section with aria-roledescription=\"carousel\", each review a ' +\n    'labelled group with aria-roledescription=\"slide\", and only the active one exposed (the rest are ' +\n    \"aria-hidden and inert). Previous/next buttons and indicator buttons are named, the current indicator \" +\n    \"carries aria-current, and the end buttons use aria-disabled so focus is never dropped. Arrow keys \" +\n    \"(mirrored in RTL), Home and End work while focus is inside. `autoPlay` adds a stop/start control, \" +\n    \"pauses on hover and focus, turns the live region off while rotating, and does not start by itself \" +\n    \"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,QAAQ;CAC/B,OAAO,CAAC,wBAAwB,uBAAuB;CACvD,MACE;AAOJ,CAAC"}

package/dist/components/reviews-carousel/reviews-carousel.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/reviews-carousel/reviews-carousel.d.ts
+declare const reviewsCarouselVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface Review {
+  id: string | number;
+  /** The quotation. */
+  body: ReactNode;
+  author: ReactNode;
+  /** A role or affiliation under the author's name. */
+  title?: ReactNode;
+  /** An avatar node, rendered before the author. */
+  avatar?: ReactNode;
+}
+interface ReviewsCarouselLabels {
+  previous: string;
+  next: string;
+  stop: string;
+  start: string;
+  /** Names each slide for its position. */
+  slide: (index: number, count: number) => string;
+  /** Names each indicator button. */
+  indicator: (index: number, count: number) => string;
+}
+interface ReviewsCarouselProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
+  reviews: Review[];
+  /** Controlled active review. */
+  index?: number;
+  /** Initial active review when uncontrolled. */
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Wrap from the last review to the first. The source stops at the ends. */
+  loop?: boolean;
+  showNavigation?: boolean;
+  showIndicators?: boolean;
+  /** Advances on a timer, with a stop/start control; never starts by itself under reduced motion. */
+  autoPlay?: boolean;
+  /** Milliseconds per review while playing. */
+  autoPlayInterval?: number;
+  /** Visible and accessible text, for localisation. */
+  labels?: Partial<ReviewsCarouselLabels>;
+}
+/** Testimonials stacked in depth, stepped through with buttons, indicators or arrow keys. */
+declare function ReviewsCarousel({ className, reviews, index: indexProp, defaultIndex, onIndexChange, loop, showNavigation, showIndicators, autoPlay, autoPlayInterval, labels: labelsProp, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: ReviewsCarouselProps): import("react").JSX.Element | null;
+//#endregion
+export { Review, ReviewsCarousel, ReviewsCarouselLabels, ReviewsCarouselProps, reviewsCarouselVariants };
+//# sourceMappingURL=reviews-carousel.d.ts.map

package/dist/components/reviews-carousel/reviews-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reviews-carousel.d.ts","names":[],"sources":["../../../src/components/reviews-carousel/reviews-carousel.tsx"],"mappings":";;cAgCM,0BAAuB,iDAAA;UASZ;EACf;;EAEA,MAAM;EACN,QAAQ;;EAER,QAAQ;;EAER,SAAS;;UAGM;EACf;EACA;EACA;EACA;;EAEA,QAAQ,eAAe;;EAEvB,YAAY,eAAe;;UAYZ,6BAA6B,KAC5C;EAGA,SAAS;;EAET;;EAEA;EACA,iBAAiB;;EAEjB;EACA;EACA;;EAEA;;EAEA;;EAEA,SAAS,QAAQ;;;iBAsBH,kBACd,WACA,SACA,OAAO,WACP,cACA,eACA,MACA,gBACA,gBACA,UACA,kBACA,QAAQ,YACR,gBACA,gBACA,SACA,WACG,SACF,uCAAoB,IAAA"}

package/dist/components/reviews-carousel/reviews-carousel.js

@@ -0,0 +1,177 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { CarouselButton, RotationButton, chain, handleCarouselKey, useAutoRotate, useCarouselIndex } from "./carousel-controls.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/reviews-carousel/reviews-carousel.tsx
+/** Vertical step between stacked cards, and how many stay visible behind. */
+const STEP_REM = 1.875;
+const VISIBLE_BEHIND = 3;
+const reviewsCarouselVariants = cva(cn("col-start-1 row-start-1 w-[calc(100%-2rem)] max-w-xl rounded-2xl border border-border", "bg-card/80 p-4 text-card-foreground shadow-lg backdrop-blur-md sm:p-6", "transition-[translate,scale,opacity,filter] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "pointer-events-none data-[state=active]:pointer-events-auto"));
+const DEFAULT_LABELS = {
+	previous: "Previous review",
+	next: "Next review",
+	stop: "Stop automatic slide show",
+	start: "Start automatic slide show",
+	slide: (index, count) => `${String(index + 1)} of ${String(count)}`,
+	indicator: (index) => `Review ${String(index + 1)}`
+};
+/** Where a card sits relative to the active one. */
+function placement(offset) {
+	if (offset < 0) return {
+		translate: `0 ${String(-offset * STEP_REM)}rem`,
+		scale: "1.08",
+		opacity: 0,
+		filter: "blur(2px)"
+	};
+	return {
+		translate: `0 ${String(-Math.min(offset, VISIBLE_BEHIND) * STEP_REM)}rem`,
+		scale: String(Math.max(.08, 1 - offset * .08)),
+		opacity: offset > VISIBLE_BEHIND ? 0 : 1
+	};
+}
+/** Testimonials stacked in depth, stepped through with buttons, indicators or arrow keys. */
+function ReviewsCarousel({ className, reviews, index: indexProp, defaultIndex, onIndexChange, loop = false, showNavigation = true, showIndicators = true, autoPlay = false, autoPlayInterval = 5e3, labels: labelsProp, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const count = reviews.length;
+	const carousel = useCarouselIndex({
+		count,
+		index: indexProp,
+		defaultIndex,
+		onIndexChange,
+		loop
+	});
+	const { index, goTo } = carousel;
+	const rotation = useAutoRotate({
+		autoPlay,
+		interval: autoPlayInterval,
+		count,
+		resetKey: index,
+		advance: () => {
+			goTo(index >= count - 1 ? 0 : index + 1);
+		}
+	});
+	if (count === 0) return null;
+	const hasControls = showNavigation || showIndicators || autoPlay;
+	function handleKeyDown(event) {
+		handleCarouselKey(event, {
+			next: carousel.next,
+			previous: carousel.previous,
+			first: () => {
+				goTo(0);
+			},
+			last: () => {
+				goTo(count - 1);
+			}
+		});
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "reviews-carousel",
+		"aria-roledescription": "carousel",
+		"aria-label": props["aria-labelledby"] ? void 0 : "Reviews",
+		className: cn("relative mx-auto flex h-80 w-full max-w-4xl flex-col", className),
+		onPointerEnter: chain(rotation.rootProps.onPointerEnter, onPointerEnter),
+		onPointerLeave: chain(rotation.rootProps.onPointerLeave, onPointerLeave),
+		onFocus: chain(rotation.rootProps.onFocus, onFocus),
+		onBlur: chain(rotation.rootProps.onBlur, onBlur),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "reviews-carousel-viewport",
+			"aria-live": rotation.rotating ? "off" : "polite",
+			className: "relative grid min-h-0 flex-1 place-items-center py-8",
+			children: reviews.map((review, position) => {
+				const offset = position - index;
+				const active = offset === 0;
+				return /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-roledescription": "slide",
+					"aria-label": labels.slide(position, count),
+					"aria-hidden": active ? void 0 : true,
+					inert: active ? void 0 : true,
+					"data-slot": "reviews-carousel-slide",
+					"data-state": active ? "active" : offset < 0 ? "past" : "upcoming",
+					className: reviewsCarouselVariants(),
+					style: {
+						...placement(offset),
+						zIndex: count - position
+					},
+					children: /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsxs("blockquote", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "absolute -start-2 -top-1 text-4xl leading-none text-foreground/10",
+							children: "“"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "relative text-sm leading-relaxed text-foreground/80",
+							children: review.body
+						})]
+					}), /* @__PURE__ */ jsxs("figcaption", {
+						className: "mt-4 flex items-center gap-2 border-t border-border pt-4",
+						children: [review.avatar, /* @__PURE__ */ jsxs("span", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-xs font-semibold text-foreground",
+								children: review.author
+							}), review.title != null ? /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: review.title
+							}) : null]
+						})]
+					})] })
+				}, review.id);
+			})
+		}), hasControls ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "reviews-carousel-controls",
+			className: "relative z-10 flex items-center justify-center gap-2 pb-4",
+			children: [
+				autoPlay ? /* @__PURE__ */ jsx(RotationButton, {
+					enabled: rotation.enabled,
+					onToggle: rotation.toggle,
+					onKeyDown: handleKeyDown,
+					stopLabel: labels.stop,
+					startLabel: labels.start
+				}) : null,
+				showNavigation ? /* @__PURE__ */ jsx(CarouselButton, {
+					direction: "previous",
+					"aria-label": labels.previous,
+					"aria-disabled": !carousel.canPrevious || void 0,
+					onClick: carousel.previous,
+					onKeyDown: handleKeyDown
+				}) : null,
+				showIndicators ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "reviews-carousel-indicators",
+					className: "flex items-center",
+					children: reviews.map((review, position) => {
+						const current = position === index;
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": labels.indicator(position, count),
+							"aria-current": current ? "true" : void 0,
+							className: cn("group flex h-6 items-center rounded-full px-1", focusRing),
+							onClick: () => {
+								goTo(position);
+							},
+							onKeyDown: handleKeyDown,
+							children: /* @__PURE__ */ jsx("span", { className: cn("block h-2 rounded-full transition-[width,background-color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", current ? "w-8 bg-primary" : "w-2 bg-primary/30 group-hover:bg-primary/50") })
+						}, review.id);
+					})
+				}) : null,
+				showNavigation ? /* @__PURE__ */ jsx(CarouselButton, {
+					direction: "next",
+					"aria-label": labels.next,
+					"aria-disabled": !carousel.canNext || void 0,
+					onClick: carousel.next,
+					onKeyDown: handleKeyDown
+				}) : null
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { ReviewsCarousel, reviewsCarouselVariants };
+
+//# sourceMappingURL=reviews-carousel.js.map

package/dist/components/reviews-carousel/reviews-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reviews-carousel.js","names":[],"sources":["../../../src/components/reviews-carousel/reviews-carousel.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Reviews Carousel (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  CarouselButton,\n  RotationButton,\n  chain,\n  handleCarouselKey,\n  useAutoRotate,\n  useCarouselIndex,\n} from \"./carousel-controls\";\n\n/*\n * A stack of cards: the active review in front, the next three receding\n * upward behind it, the ones already read fading and blurring out below.\n *\n * The source animates each card with a motion spring. Nothing here carries a\n * gesture's velocity — every change comes from a button, a key or a timer — so\n * each card is a CSS transition between computed positions, and the global\n * reduced-motion rule makes the change instant.\n */\n\n/** Vertical step between stacked cards, and how many stay visible behind. */\nconst STEP_REM = 1.875;\nconst VISIBLE_BEHIND = 3;\n\nconst reviewsCarouselVariants = cva(\n  cn(\n    \"col-start-1 row-start-1 w-[calc(100%-2rem)] max-w-xl rounded-2xl border border-border\",\n    \"bg-card/80 p-4 text-card-foreground shadow-lg backdrop-blur-md sm:p-6\",\n    \"transition-[translate,scale,opacity,filter] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n    \"pointer-events-none data-[state=active]:pointer-events-auto\",\n  ),\n);\n\nexport interface Review {\n  id: string | number;\n  /** The quotation. */\n  body: ReactNode;\n  author: ReactNode;\n  /** A role or affiliation under the author's name. */\n  title?: ReactNode;\n  /** An avatar node, rendered before the author. */\n  avatar?: ReactNode;\n}\n\nexport interface ReviewsCarouselLabels {\n  previous: string;\n  next: string;\n  stop: string;\n  start: string;\n  /** Names each slide for its position. */\n  slide: (index: number, count: number) => string;\n  /** Names each indicator button. */\n  indicator: (index: number, count: number) => string;\n}\n\nconst DEFAULT_LABELS: ReviewsCarouselLabels = {\n  previous: \"Previous review\",\n  next: \"Next review\",\n  stop: \"Stop automatic slide show\",\n  start: \"Start automatic slide show\",\n  slide: (index, count) => `${String(index + 1)} of ${String(count)}`,\n  indicator: (index) => `Review ${String(index + 1)}`,\n};\n\nexport interface ReviewsCarouselProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"children\"\n> {\n  reviews: Review[];\n  /** Controlled active review. */\n  index?: number;\n  /** Initial active review when uncontrolled. */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Wrap from the last review to the first. The source stops at the ends. */\n  loop?: boolean;\n  showNavigation?: boolean;\n  showIndicators?: boolean;\n  /** Advances on a timer, with a stop/start control; never starts by itself under reduced motion. */\n  autoPlay?: boolean;\n  /** Milliseconds per review while playing. */\n  autoPlayInterval?: number;\n  /** Visible and accessible text, for localisation. */\n  labels?: Partial<ReviewsCarouselLabels>;\n}\n\n/** Where a card sits relative to the active one. */\nfunction placement(offset: number): CSSProperties {\n  if (offset < 0) {\n    return {\n      translate: `0 ${String(-offset * STEP_REM)}rem`,\n      scale: \"1.08\",\n      opacity: 0,\n      filter: \"blur(2px)\",\n    };\n  }\n  const depth = Math.min(offset, VISIBLE_BEHIND);\n  return {\n    translate: `0 ${String(-depth * STEP_REM)}rem`,\n    scale: String(Math.max(0.08, 1 - offset * 0.08)),\n    opacity: offset > VISIBLE_BEHIND ? 0 : 1,\n  };\n}\n\n/** Testimonials stacked in depth, stepped through with buttons, indicators or arrow keys. */\nexport function ReviewsCarousel({\n  className,\n  reviews,\n  index: indexProp,\n  defaultIndex,\n  onIndexChange,\n  loop = false,\n  showNavigation = true,\n  showIndicators = true,\n  autoPlay = false,\n  autoPlayInterval = 5000,\n  labels: labelsProp,\n  onPointerEnter,\n  onPointerLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: ReviewsCarouselProps) {\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n  const count = reviews.length;\n  const carousel = useCarouselIndex({\n    count,\n    index: indexProp,\n    defaultIndex,\n    onIndexChange,\n    loop,\n  });\n  const { index, goTo } = carousel;\n  const rotation = useAutoRotate({\n    autoPlay,\n    interval: autoPlayInterval,\n    count,\n    resetKey: index,\n    // A timer always wraps, even when the buttons stop at the ends.\n    advance: () => {\n      goTo(index >= count - 1 ? 0 : index + 1);\n    },\n  });\n\n  if (count === 0) return null;\n\n  const hasControls = showNavigation || showIndicators || autoPlay;\n\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    handleCarouselKey(event, {\n      next: carousel.next,\n      previous: carousel.previous,\n      first: () => {\n        goTo(0);\n      },\n      last: () => {\n        goTo(count - 1);\n      },\n    });\n  }\n\n  return (\n    <section\n      data-slot=\"reviews-carousel\"\n      aria-roledescription=\"carousel\"\n      aria-label={props[\"aria-labelledby\"] ? undefined : \"Reviews\"}\n      className={cn(\"relative mx-auto flex h-80 w-full max-w-4xl flex-col\", className)}\n      onPointerEnter={chain(rotation.rootProps.onPointerEnter, onPointerEnter)}\n      onPointerLeave={chain(rotation.rootProps.onPointerLeave, onPointerLeave)}\n      onFocus={chain(rotation.rootProps.onFocus, onFocus)}\n      onBlur={chain(rotation.rootProps.onBlur, onBlur)}\n      {...props}\n    >\n      <div\n        data-slot=\"reviews-carousel-viewport\"\n        aria-live={rotation.rotating ? \"off\" : \"polite\"}\n        className=\"relative grid min-h-0 flex-1 place-items-center py-8\"\n      >\n        {reviews.map((review, position) => {\n          const offset = position - index;\n          const active = offset === 0;\n          return (\n            <div\n              key={review.id}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={labels.slide(position, count)}\n              aria-hidden={active ? undefined : true}\n              inert={active ? undefined : true}\n              data-slot=\"reviews-carousel-slide\"\n              data-state={active ? \"active\" : offset < 0 ? \"past\" : \"upcoming\"}\n              className={reviewsCarouselVariants()}\n              style={{ ...placement(offset), zIndex: count - position }}\n            >\n              <figure>\n                <blockquote className=\"relative\">\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"absolute -start-2 -top-1 text-4xl leading-none text-foreground/10\"\n                  >\n                    &ldquo;\n                  </span>\n                  <p className=\"relative text-sm leading-relaxed text-foreground/80\">\n                    {review.body}\n                  </p>\n                </blockquote>\n                <figcaption className=\"mt-4 flex items-center gap-2 border-t border-border pt-4\">\n                  {review.avatar}\n                  <span className=\"flex flex-col\">\n                    <span className=\"text-xs font-semibold text-foreground\">\n                      {review.author}\n                    </span>\n                    {review.title != null ? (\n                      <span className=\"text-xs text-muted-foreground\">{review.title}</span>\n                    ) : null}\n                  </span>\n                </figcaption>\n              </figure>\n            </div>\n          );\n        })}\n      </div>\n\n      {hasControls ? (\n        <div\n          data-slot=\"reviews-carousel-controls\"\n          className=\"relative z-10 flex items-center justify-center gap-2 pb-4\"\n        >\n          {autoPlay ? (\n            <RotationButton\n              enabled={rotation.enabled}\n              onToggle={rotation.toggle}\n              onKeyDown={handleKeyDown}\n              stopLabel={labels.stop}\n              startLabel={labels.start}\n            />\n          ) : null}\n          {showNavigation ? (\n            <CarouselButton\n              direction=\"previous\"\n              aria-label={labels.previous}\n              // aria-disabled rather than disabled: a button that disables itself\n              // under the pointer or the keyboard would drop focus to the page.\n              aria-disabled={!carousel.canPrevious || undefined}\n              onClick={carousel.previous}\n              onKeyDown={handleKeyDown}\n            />\n          ) : null}\n          {showIndicators ? (\n            <div data-slot=\"reviews-carousel-indicators\" className=\"flex items-center\">\n              {reviews.map((review, position) => {\n                const current = position === index;\n                return (\n                  <button\n                    key={review.id}\n                    type=\"button\"\n                    aria-label={labels.indicator(position, count)}\n                    aria-current={current ? \"true\" : undefined}\n                    className={cn(\"group flex h-6 items-center rounded-full px-1\", focusRing)}\n                    onClick={() => {\n                      goTo(position);\n                    }}\n                    onKeyDown={handleKeyDown}\n                  >\n                    <span\n                      className={cn(\n                        \"block h-2 rounded-full transition-[width,background-color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                        current\n                          ? \"w-8 bg-primary\"\n                          : \"w-2 bg-primary/30 group-hover:bg-primary/50\",\n                      )}\n                    />\n                  </button>\n                );\n              })}\n            </div>\n          ) : null}\n          {showNavigation ? (\n            <CarouselButton\n              direction=\"next\"\n              aria-label={labels.next}\n              aria-disabled={!carousel.canNext || undefined}\n              onClick={carousel.next}\n              onKeyDown={handleKeyDown}\n            />\n          ) : null}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\nexport { reviewsCarouselVariants };\n"],"mappings":"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"}

package/dist/components/rich-popover/index.d.ts

@@ -0,0 +1,2 @@
+import { RichPopover, RichPopoverProps, richPopoverVariants } from "./rich-popover.js";
+export { RichPopover, type RichPopoverProps, richPopoverVariants };

package/dist/components/rich-popover/index.js

@@ -0,0 +1,2 @@
+import { RichPopover, richPopoverVariants } from "./rich-popover.js";
+export { RichPopover, richPopoverVariants };

package/dist/components/rich-popover/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/rich-popover/meta.ts
+const meta = defineMeta({
+	name: "rich-popover",
+	title: "Rich Popover",
+	description: "A popover card for an inline reference — heading or link, description, a meta chip and one call to action.",
+	category: "overlay",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["popover"],
+	files: ["rich-popover.tsx"],
+	a11y: "Built on Dowel's Popover: the content is a role=\"dialog\" labelled by its heading, opens from pointer or keyboard, closes on Escape or an outside press and returns focus to the trigger. The trigger must be a focusable element with an accessible name (an icon-only trigger needs aria-label). Links open in a new tab with rel=noopener; the leading icon, chip icon and arrow are decorative. The blur-in stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/rich-popover/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/rich-popover/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"rich-popover\",\n  title: \"Rich Popover\",\n  description:\n    \"A popover card for an inline reference — heading or link, description, a meta chip and one call to action.\",\n  category: \"overlay\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"popover\"],\n  files: [\"rich-popover.tsx\"],\n  a11y:\n    'Built on Dowel\\'s Popover: the content is a role=\"dialog\" labelled by its heading, opens from pointer or ' +\n    \"keyboard, closes on Escape or an outside press and returns focus to the trigger. The trigger must be a \" +\n    \"focusable element with an accessible name (an icon-only trigger needs aria-label). Links open in a new tab \" +\n    \"with rel=noopener; the leading icon, chip icon and arrow are decorative. The blur-in 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,SAAS;CAChC,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAIJ,CAAC"}

package/dist/components/rich-popover/rich-popover.d.ts

@@ -0,0 +1,36 @@
+import { PopoverContentProps } from "../popover/popover.js";
+import "../popover/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/rich-popover/rich-popover.d.ts
+declare const richPopoverVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface RichPopoverProps extends Omit<PopoverContentProps, "children">, VariantProps<typeof richPopoverVariants> {
+  /** The element that opens it. Must accept a ref — a button, or an inline span with a role. */
+  trigger: ReactElement;
+  /** The card's heading, which also names it. */
+  heading: ReactNode;
+  /** Makes the heading a link, opened in a new tab. */
+  headingHref?: string;
+  /** A leading mark beside the heading (a logo, a type icon). Decorative. */
+  icon?: ReactNode;
+  description?: ReactNode;
+  /** A small chip — a duration, a date. */
+  meta?: ReactNode;
+  /** The call to action's label. Without it there is no action. */
+  actionLabel?: ReactNode;
+  /** Makes the action a link, opened in a new tab. */
+  actionHref?: string;
+  onActionClick?: () => void;
+  /** The action's icon. A play glyph by default. */
+  actionIcon?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+/** A popover card for an inline reference: heading, description, meta and an action. */
+declare function RichPopover({ className, trigger, heading, headingHref, icon, description, meta, actionLabel, actionHref, onActionClick, actionIcon, open, defaultOpen, onOpenChange, tone, side, ...props }: RichPopoverProps): import("react").JSX.Element;
+//#endregion
+export { RichPopover, RichPopoverProps, richPopoverVariants };
+//# sourceMappingURL=rich-popover.d.ts.map

package/dist/components/rich-popover/rich-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-popover.d.ts","names":[],"sources":["../../../src/components/rich-popover/rich-popover.tsx"],"mappings":";;;;;cA0CM,sBAAmB;;6CAcxB;UA2CgB,yBACP,KAAK,kCAAkC,oBAAoB;;EAEnE,SAAS;;EAET,SAAS;;EAET;;EAEA,OAAO;EACP,cAAc;;EAEd,OAAO;;EAEP,cAAc;;EAEd;EACA;;EAEA,aAAa;EACb;EACA;EACA,gBAAgB;;;iBAIF,cACd,WACA,SACA,SACA,aACA,MACA,aACA,MACA,aACA,YACA,eACA,YACA,MACA,aACA,cACA,MACA,SACG,SACF,mCAAgB,IAAA"}