@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/photo-stack/photo-stack.js

@@ -0,0 +1,236 @@
+"use client";
+import { focusRing, mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Direction } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { MotionConfig, motion } from "motion/react";
+//#region src/components/photo-stack/photo-stack.tsx
+/** Resting offset and scale for each position in the pile (0 = top). */
+const POSITIONS = [
+	{
+		x: 0,
+		y: 0,
+		scale: 1
+	},
+	{
+		x: 16,
+		y: 12,
+		scale: .95
+	},
+	{
+		x: 32,
+		y: 24,
+		scale: .9
+	}
+];
+/** A flick further or faster than this sends the card to the back. */
+const DISTANCE = 80;
+const VELOCITY = 500;
+function flickedAway(info) {
+	return Math.abs(info.offset.x) > DISTANCE || Math.abs(info.velocity.x) > VELOCITY;
+}
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function subscribeToMotionPreference(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+/** Live, unlike a one-off read: turning the setting on mid-session stops the drag. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeToMotionPreference, () => window.matchMedia(REDUCED_MOTION).matches, () => false);
+}
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+/** A draggable pile of photos you flick, tap or key through. */
+function PhotoStack({ className, photos, index, defaultIndex = 0, onIndexChange, controls = false, ...props }) {
+	const count = photos.length;
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const current = count === 0 ? 0 : ((index ?? uncontrolled) % count + count) % count;
+	const [announcement, setAnnouncement] = useState("");
+	const reduceMotion = usePrefersReducedMotion();
+	const flip = Direction.useDirection() === "rtl" ? -1 : 1;
+	const hintId = `dowel-photo-stack-${useId().replace(/:/g, "")}`;
+	const dragged = useRef(false);
+	const pile = useRef(null);
+	const refocus = useRef(false);
+	useEffect(() => {
+		if (!refocus.current) return;
+		refocus.current = false;
+		pile.current?.querySelector("[data-slot=\"photo-stack-next\"]")?.focus();
+	}, [current]);
+	function go(step) {
+		if (count < 2) return;
+		const next = (current + step + count) % count;
+		if (index === void 0) setUncontrolled(next);
+		onIndexChange?.(next);
+		const photo = photos[next];
+		if (photo) setAnnouncement(`${photo.name ?? photo.alt}, ${String(next + 1)} of ${String(count)}`);
+	}
+	/** Arrow keys on any of the stack's buttons move through the photos. */
+	function handleKeyDown(event) {
+		const rtl = flip === -1 || isRtl(event.currentTarget);
+		const step = {
+			ArrowDown: 1,
+			ArrowUp: -1,
+			ArrowRight: rtl ? -1 : 1,
+			ArrowLeft: rtl ? 1 : -1
+		}[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		go(step);
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "region",
+			"aria-roledescription": "carousel",
+			"aria-label": props["aria-labelledby"] ? void 0 : "Photos",
+			"data-slot": "photo-stack",
+			className: cn("flex w-56 flex-col items-center gap-4", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					ref: pile,
+					"data-slot": "photo-stack-pile",
+					className: "relative aspect-7/9 w-full select-none",
+					children: photos.map((photo, i) => {
+						const position = (i - current + count) % count;
+						const rest = POSITIONS[Math.min(position, POSITIONS.length - 1)] ?? POSITIONS[0];
+						const top = position === 0;
+						const label = `${photo.name ?? photo.alt}, ${String(i + 1)} of ${String(count)}`;
+						return /* @__PURE__ */ jsxs(motion.div, {
+							role: "group",
+							"aria-roledescription": "slide",
+							"aria-label": label,
+							"aria-hidden": top ? void 0 : true,
+							inert: !top,
+							"data-slot": "photo-stack-photo",
+							"data-position": position,
+							className: cn("absolute inset-0 overflow-hidden rounded-2xl border border-border bg-card shadow-lg", top && !reduceMotion && "cursor-grab active:cursor-grabbing"),
+							style: { zIndex: count - position },
+							initial: false,
+							animate: {
+								x: rest.x * flip,
+								y: rest.y,
+								scale: rest.scale,
+								rotate: 0
+							},
+							transition: {
+								type: "spring",
+								stiffness: 320,
+								damping: 30
+							},
+							drag: top && !reduceMotion ? "x" : false,
+							dragSnapToOrigin: true,
+							onDragStart: () => {
+								dragged.current = true;
+							},
+							onDragEnd: (_, info) => {
+								if (flickedAway(info)) go(1);
+								setTimeout(() => {
+									dragged.current = false;
+								}, 0);
+							},
+							children: [
+								/* @__PURE__ */ jsx("img", {
+									src: photo.src,
+									alt: photo.alt,
+									draggable: false,
+									className: "size-full object-cover object-top"
+								}),
+								photo.name || photo.subtitle ? /* @__PURE__ */ jsxs("div", {
+									"data-slot": "photo-stack-caption",
+									className: cn("absolute inset-x-0 bottom-0 flex flex-col gap-px p-3.5 text-white", "bg-linear-to-t from-overlay to-transparent", "transition-opacity duration-[var(--duration-normal)]", !top && "opacity-0"),
+									children: [photo.name ? /* @__PURE__ */ jsx("span", {
+										className: "text-sm font-semibold",
+										children: photo.name
+									}) : null, photo.subtitle ? /* @__PURE__ */ jsx("span", {
+										className: "text-xs opacity-85",
+										children: photo.subtitle
+									}) : null]
+								}) : null,
+								top ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": "Show next photo",
+									"aria-describedby": hintId,
+									"data-slot": "photo-stack-next",
+									className: cn("absolute inset-0 rounded-[inherit] bg-transparent", focusRing),
+									onKeyDown: handleKeyDown,
+									onClick: () => {
+										if (dragged.current) {
+											dragged.current = false;
+											return;
+										}
+										refocus.current = true;
+										go(1);
+									}
+								}) : /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "pointer-events-none absolute inset-0 bg-card",
+									style: { opacity: position === 1 ? .2 : .36 }
+								})
+							]
+						}, photo.id);
+					})
+				}),
+				controls ? /* @__PURE__ */ jsxs("div", {
+					"data-slot": "photo-stack-controls",
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Previous photo",
+						onClick: () => go(-1),
+						onKeyDown: handleKeyDown,
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2,
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							className: mirrorForDirection,
+							children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Next photo",
+						onClick: () => go(1),
+						onKeyDown: handleKeyDown,
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2,
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							className: mirrorForDirection,
+							children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+						})
+					})]
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					id: hintId,
+					className: "sr-only",
+					children: "Sends the top photo to the back. Arrow keys move through the photos."
+				}),
+				/* @__PURE__ */ jsx("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: "sr-only",
+					children: announcement
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { PhotoStack, flickedAway };
+
+//# sourceMappingURL=photo-stack.js.map

package/dist/components/photo-stack/photo-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-stack.js","names":[],"sources":["../../../src/components/photo-stack/photo-stack.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Photo Stack (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { MotionConfig, motion, type PanInfo } from \"motion/react\";\nimport { Direction } from \"radix-ui\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { focusRing, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A deck of photos. Flick the top one away and it springs to the back.\n *\n * This is one of the places `motion` earns its keep (ADR 0014): the card\n * leaves on a spring that carries the velocity of the flick, which a CSS\n * transition cannot know. Everything else is a pointer-free path to the same\n * result — tap the top photo, press Enter or Space on it, use the arrow keys,\n * or the optional previous/next buttons — so the drag is a convenience, never\n * the only way through. Under reduced motion the drag is off and cards move\n * without animating.\n */\n\nexport interface PhotoStackPhoto {\n  id: string;\n  src: string;\n  /** Describes the photo. Also names the slide when there is no `name`. */\n  alt: string;\n  /** Caption title over the top photo. */\n  name?: string;\n  /** Caption line under the name. */\n  subtitle?: string;\n}\n\n/** Resting offset and scale for each position in the pile (0 = top). */\nconst POSITIONS = [\n  { x: 0, y: 0, scale: 1 },\n  { x: 16, y: 12, scale: 0.95 },\n  { x: 32, y: 24, scale: 0.9 },\n] as const;\n\n/** A flick further or faster than this sends the card to the back. */\nconst DISTANCE = 80;\nconst VELOCITY = 500;\n\nexport function flickedAway(info: Pick<PanInfo, \"offset\" | \"velocity\">) {\n  return Math.abs(info.offset.x) > DISTANCE || Math.abs(info.velocity.x) > VELOCITY;\n}\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribeToMotionPreference(onChange: () => void) {\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\n/** Live, unlike a one-off read: turning the setting on mid-session stops the drag. */\nfunction usePrefersReducedMotion() {\n  return useSyncExternalStore(\n    subscribeToMotionPreference,\n    () => window.matchMedia(REDUCED_MOTION).matches,\n    () => false,\n  );\n}\n\nfunction isRtl(element: Element) {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\nexport interface PhotoStackProps extends ComponentPropsWithRef<\"div\"> {\n  /** The photos. The first starts on top. */\n  photos: PhotoStackPhoto[];\n  /** The photo on top (controlled). */\n  index?: number;\n  /** The photo on top at first (uncontrolled). */\n  defaultIndex?: number;\n  /** Called when another photo comes to the top. */\n  onIndexChange?: (index: number) => void;\n  /** Shows previous and next buttons under the stack. */\n  controls?: boolean;\n}\n\n/** A draggable pile of photos you flick, tap or key through. */\nexport function PhotoStack({\n  className,\n  photos,\n  index,\n  defaultIndex = 0,\n  onIndexChange,\n  controls = false,\n  ...props\n}: PhotoStackProps) {\n  const count = photos.length;\n  const [uncontrolled, setUncontrolled] = useState(defaultIndex);\n  const current = count === 0 ? 0 : (((index ?? uncontrolled) % count) + count) % count;\n  const [announcement, setAnnouncement] = useState(\"\");\n  const reduceMotion = usePrefersReducedMotion();\n  const flip = Direction.useDirection() === \"rtl\" ? -1 : 1;\n  const hintId = `dowel-photo-stack-${useId().replace(/:/g, \"\")}`;\n  // A released drag is followed by a click. Without this the card would cycle\n  // twice and land second from the top instead of at the back.\n  const dragged = useRef(false);\n  // The button that cycles lives on the top photo, so it is a new element\n  // after every cycle. Focus follows it rather than falling to the page.\n  const pile = useRef<HTMLDivElement>(null);\n  const refocus = useRef(false);\n  useEffect(() => {\n    if (!refocus.current) return;\n    refocus.current = false;\n    pile.current?.querySelector<HTMLElement>('[data-slot=\"photo-stack-next\"]')?.focus();\n  }, [current]);\n\n  function go(step: 1 | -1) {\n    if (count < 2) return;\n    const next = (current + step + count) % count;\n    if (index === undefined) setUncontrolled(next);\n    onIndexChange?.(next);\n    const photo = photos[next];\n    if (photo) {\n      setAnnouncement(`${photo.name ?? photo.alt}, ${String(next + 1)} of ${String(count)}`);\n    }\n  }\n\n  /** Arrow keys on any of the stack's buttons move through the photos. */\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    const rtl = flip === -1 || isRtl(event.currentTarget);\n    const steps: Record<string, 1 | -1> = {\n      ArrowDown: 1,\n      ArrowUp: -1,\n      ArrowRight: rtl ? -1 : 1,\n      ArrowLeft: rtl ? 1 : -1,\n    };\n    const step = steps[event.key];\n    if (step === undefined) return;\n    event.preventDefault();\n    go(step);\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label={props[\"aria-labelledby\"] ? undefined : \"Photos\"}\n        data-slot=\"photo-stack\"\n        className={cn(\"flex w-56 flex-col items-center gap-4\", className)}\n        {...props}\n      >\n        <div\n          ref={pile}\n          data-slot=\"photo-stack-pile\"\n          className=\"relative aspect-7/9 w-full select-none\"\n        >\n          {photos.map((photo, i) => {\n            const position = (i - current + count) % count;\n            const rest = POSITIONS[Math.min(position, POSITIONS.length - 1)] ?? POSITIONS[0];\n            const top = position === 0;\n            const label = `${photo.name ?? photo.alt}, ${String(i + 1)} of ${String(count)}`;\n\n            return (\n              <motion.div\n                key={photo.id}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-label={label}\n                aria-hidden={top ? undefined : true}\n                inert={!top}\n                data-slot=\"photo-stack-photo\"\n                data-position={position}\n                className={cn(\n                  \"absolute inset-0 overflow-hidden rounded-2xl border border-border bg-card shadow-lg\",\n                  top && !reduceMotion && \"cursor-grab active:cursor-grabbing\",\n                )}\n                style={{ zIndex: count - position }}\n                initial={false}\n                animate={{ x: rest.x * flip, y: rest.y, scale: rest.scale, rotate: 0 }}\n                transition={{ type: \"spring\", stiffness: 320, damping: 30 }}\n                drag={top && !reduceMotion ? \"x\" : false}\n                dragSnapToOrigin\n                onDragStart={() => {\n                  dragged.current = true;\n                }}\n                onDragEnd={(_, info) => {\n                  if (flickedAway(info)) go(1);\n                  // The trailing click, if any, arrives before this runs.\n                  setTimeout(() => {\n                    dragged.current = false;\n                  }, 0);\n                }}\n              >\n                <img\n                  src={photo.src}\n                  alt={photo.alt}\n                  draggable={false}\n                  className=\"size-full object-cover object-top\"\n                />\n                {photo.name || photo.subtitle ? (\n                  <div\n                    data-slot=\"photo-stack-caption\"\n                    className={cn(\n                      \"absolute inset-x-0 bottom-0 flex flex-col gap-px p-3.5 text-white\",\n                      \"bg-linear-to-t from-overlay to-transparent\",\n                      \"transition-opacity duration-[var(--duration-normal)]\",\n                      !top && \"opacity-0\",\n                    )}\n                  >\n                    {photo.name ? (\n                      <span className=\"text-sm font-semibold\">{photo.name}</span>\n                    ) : null}\n                    {photo.subtitle ? (\n                      <span className=\"text-xs opacity-85\">{photo.subtitle}</span>\n                    ) : null}\n                  </div>\n                ) : null}\n                {top ? (\n                  <button\n                    type=\"button\"\n                    aria-label=\"Show next photo\"\n                    aria-describedby={hintId}\n                    data-slot=\"photo-stack-next\"\n                    className={cn(\n                      \"absolute inset-0 rounded-[inherit] bg-transparent\",\n                      focusRing,\n                    )}\n                    onKeyDown={handleKeyDown}\n                    onClick={() => {\n                      if (dragged.current) {\n                        dragged.current = false;\n                        return;\n                      }\n                      refocus.current = true;\n                      go(1);\n                    }}\n                  />\n                ) : (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute inset-0 bg-card\"\n                    style={{ opacity: position === 1 ? 0.2 : 0.36 }}\n                  />\n                )}\n              </motion.div>\n            );\n          })}\n        </div>\n\n        {controls ? (\n          <div data-slot=\"photo-stack-controls\" className=\"flex items-center gap-2\">\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label=\"Previous photo\"\n              onClick={() => go(-1)}\n              onKeyDown={handleKeyDown}\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={mirrorForDirection}\n              >\n                <path d=\"m15 18-6-6 6-6\" />\n              </svg>\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label=\"Next photo\"\n              onClick={() => go(1)}\n              onKeyDown={handleKeyDown}\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={mirrorForDirection}\n              >\n                <path d=\"m9 18 6-6-6-6\" />\n              </svg>\n            </Button>\n          </div>\n        ) : null}\n\n        <span id={hintId} className=\"sr-only\">\n          Sends the top photo to the back. Arrow keys move through the photos.\n        </span>\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </div>\n    </MotionConfig>\n  );\n}\n"],"mappings":"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"}

package/dist/components/photo-tabs/index.d.ts

@@ -0,0 +1,2 @@
+import { PhotoTab, PhotoTabs, PhotoTabsProps, photoTabsVariants } from "./photo-tabs.js";
+export { type PhotoTab, PhotoTabs, type PhotoTabsProps, photoTabsVariants };

package/dist/components/photo-tabs/index.js

@@ -0,0 +1,2 @@
+import { PhotoTabs, photoTabsVariants } from "./photo-tabs.js";
+export { PhotoTabs, photoTabsVariants };

package/dist/components/photo-tabs/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/photo-tabs/meta.ts
+const meta = defineMeta({
+	name: "photo-tabs",
+	title: "Photo Tabs",
+	description: "A photo with a floating bar of icon tabs; each tab swaps the photo.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["tabs"],
+	files: ["photo-tabs.tsx"],
+	a11y: "Built on Dowel's Tabs: the ARIA tabs pattern with roving focus, arrow keys, Home/End and focusable panels. The tab list is named by `listLabel`; each icon-only tab carries its label as visually hidden text and the icon is aria-hidden. Each panel's image has alt text (defaulting to the label). With a fine pointer the bar hides until the photo is hovered or anything inside it has focus, so keyboard users always see it; on touch it is always visible. The hover pill is aria-hidden and its movement stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/photo-tabs/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/photo-tabs/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"photo-tabs\",\n  title: \"Photo Tabs\",\n  description: \"A photo with a floating bar of icon tabs; each tab swaps the photo.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"tabs\"],\n  files: [\"photo-tabs.tsx\"],\n  a11y:\n    \"Built on Dowel's Tabs: the ARIA tabs pattern with roving focus, arrow keys, Home/End and focusable panels. \" +\n    \"The tab list is named by `listLabel`; each icon-only tab carries its label as visually hidden text and the \" +\n    \"icon is aria-hidden. Each panel's image has alt text (defaulting to the label). With a fine pointer the bar \" +\n    \"hides until the photo is hovered or anything inside it has focus, so keyboard users always see it; on touch \" +\n    \"it is always visible. The hover pill is aria-hidden and its movement stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,MAAM;CAC7B,OAAO,CAAC,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/photo-tabs/photo-tabs.d.ts

@@ -0,0 +1,35 @@
+import { Tabs } from "../tabs/tabs.js";
+import "../tabs/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/photo-tabs/photo-tabs.d.ts
+declare const photoTabsVariants: (props?: ({
+  barPosition?: "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface PhotoTab {
+  value: string;
+  /** Names the tab; shown to assistive technology, the icon is decorative. */
+  label: string;
+  icon: ReactNode;
+  /** Image URL for the panel. */
+  src: string;
+  /** Alt text for the image. Defaults to `label`. */
+  alt?: string;
+}
+interface PhotoTabsProps extends Omit<ComponentPropsWithRef<typeof Tabs>, "children" | "orientation">, VariantProps<typeof photoTabsVariants> {
+  tabs: PhotoTab[];
+  /** Accessible name for the tab list. */
+  listLabel?: string;
+  /** Height of the photo — a number of pixels or any CSS length. */
+  height?: number | string;
+  /** Tuck the bar away until hover or focus on devices with a fine pointer. */
+  revealOnHover?: boolean;
+  listClassName?: string;
+  triggerClassName?: string;
+  imageClassName?: string;
+}
+/** Photo panels switched by a floating bar of icon tabs. */
+declare function PhotoTabs({ className, style, tabs, barPosition, listLabel, height, revealOnHover, listClassName, triggerClassName, imageClassName, defaultValue, ...props }: PhotoTabsProps): import("react").JSX.Element;
+//#endregion
+export { PhotoTab, PhotoTabs, PhotoTabsProps, photoTabsVariants };
+//# sourceMappingURL=photo-tabs.d.ts.map

package/dist/components/photo-tabs/photo-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-tabs.d.ts","names":[],"sources":["../../../src/components/photo-tabs/photo-tabs.tsx"],"mappings":";;;;;cAwBM,oBAAiB;;6CAWrB;UAEe;EACf;;EAEA;EACA,MAAM;;EAEN;;EAEA;;UAGe,uBAEb,KAAK,6BAA6B,oCAClC,oBAAoB;EACtB,MAAM;;EAEN;;EAEA;;EAEA;EACA;EACA;EACA;;;iBAIc,YACd,WACA,OACA,MACA,aACA,WACA,QACA,eACA,eACA,kBACA,gBACA,iBACG,SACF,iCAAc,IAAA"}

package/dist/components/photo-tabs/photo-tabs.js

@@ -0,0 +1,82 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs/tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+//#region src/components/photo-tabs/photo-tabs.tsx
+const photoTabsVariants = cva("group/photo-tabs relative w-full overflow-hidden rounded-2xl", {
+	variants: { 
+	/** Where the tab bar floats. */
+barPosition: {
+		bottom: "[--photo-tabs-hide:calc(100%+1rem)]",
+		top: "[--photo-tabs-hide:calc(-100%-1rem)]"
+	} },
+	defaultVariants: { barPosition: "bottom" }
+});
+/** Photo panels switched by a floating bar of icon tabs. */
+function PhotoTabs({ className, style, tabs, barPosition, listLabel = "Photos", height = "25rem", revealOnHover = true, listClassName, triggerClassName, imageClassName, defaultValue, ...props }) {
+	const [pill, setPill] = useState(null);
+	function showPill(trigger) {
+		setPill({
+			x: trigger.offsetLeft,
+			y: trigger.offsetTop,
+			width: trigger.offsetWidth,
+			height: trigger.offsetHeight
+		});
+	}
+	return /* @__PURE__ */ jsxs(Tabs, {
+		"data-slot": "photo-tabs",
+		defaultValue: defaultValue ?? tabs[0]?.value,
+		className: cn(photoTabsVariants({ barPosition }), className),
+		style: {
+			height,
+			...style
+		},
+		...props,
+		children: [tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.value,
+			"data-slot": "photo-tabs-panel",
+			className: "mt-0 size-full rounded-2xl",
+			children: /* @__PURE__ */ jsx("img", {
+				src: tab.src,
+				alt: tab.alt ?? tab.label,
+				draggable: false,
+				className: cn("size-full rounded-2xl bg-muted object-cover", imageClassName)
+			})
+		}, tab.value)), /* @__PURE__ */ jsxs(TabsList, {
+			"aria-label": listLabel,
+			"data-slot": "photo-tabs-list",
+			onPointerLeave: () => setPill(null),
+			className: cn("absolute inset-x-0 mx-auto w-fit gap-2 rounded-full bg-background/60 p-1.5 ring ring-border/70 backdrop-blur-sm", barPosition === "top" ? "top-3" : "bottom-3", "transition-[translate,opacity] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", revealOnHover && cn("pointer-fine:translate-y-[var(--photo-tabs-hide)] pointer-fine:opacity-0", "pointer-fine:group-hover/photo-tabs:translate-y-0 pointer-fine:group-hover/photo-tabs:opacity-100", "pointer-fine:group-focus-within/photo-tabs:translate-y-0 pointer-fine:group-focus-within/photo-tabs:opacity-100"), listClassName),
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "photo-tabs-pill",
+				"aria-hidden": "true",
+				"data-state": pill ? "visible" : "hidden",
+				className: cn("pointer-events-none absolute top-0 left-0 rounded-full bg-primary/25", "transition-[translate,width,height,opacity] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=hidden]:opacity-0"),
+				style: pill ? {
+					translate: `${String(pill.x)}px ${String(pill.y)}px`,
+					width: pill.width,
+					height: pill.height
+				} : void 0
+			}), tabs.map((tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.value,
+				"data-slot": "photo-tabs-trigger",
+				onPointerEnter: (event) => showPill(event.currentTarget),
+				className: cn("relative z-[1] size-9 rounded-full p-0 text-foreground", "data-[state=active]:bg-background data-[state=active]:shadow-xs [&_svg:not([class*='size-'])]:size-4", triggerClassName),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "contents",
+					children: tab.icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: tab.label
+				})]
+			}, tab.value))]
+		})]
+	});
+}
+//#endregion
+export { PhotoTabs, photoTabsVariants };
+
+//# sourceMappingURL=photo-tabs.js.map

package/dist/components/photo-tabs/photo-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-tabs.js","names":[],"sources":["../../../src/components/photo-tabs/photo-tabs.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Phototab (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/tabs\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A photo with a floating bar of icon tabs; each tab swaps the photo.\n *\n * It is Dowel's Tabs, restyled — so the ARIA tabs pattern, roving focus,\n * arrow keys that follow the reading direction and Home/End all come from\n * there. On devices with a fine pointer the bar tucks away until the photo is\n * hovered *or anything inside it has focus*, so a keyboard user never tabs\n * into an invisible control; on touch it is always shown.\n *\n * The source moved a hover pill between triggers with a `motion` layoutId.\n * Here the pill is placed from the hovered trigger's offset and moved with a\n * CSS transition — the same effect, no animation library, and it stops under\n * reduced motion.\n */\n\nconst photoTabsVariants = cva(\"group/photo-tabs relative w-full overflow-hidden rounded-2xl\", {\n  variants: {\n    /** Where the tab bar floats. */\n    barPosition: {\n      bottom: \"[--photo-tabs-hide:calc(100%+1rem)]\",\n      top: \"[--photo-tabs-hide:calc(-100%-1rem)]\",\n    },\n  },\n  defaultVariants: {\n    barPosition: \"bottom\",\n  },\n});\n\nexport interface PhotoTab {\n  value: string;\n  /** Names the tab; shown to assistive technology, the icon is decorative. */\n  label: string;\n  icon: ReactNode;\n  /** Image URL for the panel. */\n  src: string;\n  /** Alt text for the image. Defaults to `label`. */\n  alt?: string;\n}\n\nexport interface PhotoTabsProps\n  extends\n    Omit<ComponentPropsWithRef<typeof Tabs>, \"children\" | \"orientation\">,\n    VariantProps<typeof photoTabsVariants> {\n  tabs: PhotoTab[];\n  /** Accessible name for the tab list. */\n  listLabel?: string;\n  /** Height of the photo — a number of pixels or any CSS length. */\n  height?: number | string;\n  /** Tuck the bar away until hover or focus on devices with a fine pointer. */\n  revealOnHover?: boolean;\n  listClassName?: string;\n  triggerClassName?: string;\n  imageClassName?: string;\n}\n\n/** Photo panels switched by a floating bar of icon tabs. */\nexport function PhotoTabs({\n  className,\n  style,\n  tabs,\n  barPosition,\n  listLabel = \"Photos\",\n  height = \"25rem\",\n  revealOnHover = true,\n  listClassName,\n  triggerClassName,\n  imageClassName,\n  defaultValue,\n  ...props\n}: PhotoTabsProps) {\n  const [pill, setPill] = useState<{\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  function showPill(trigger: HTMLElement) {\n    setPill({\n      x: trigger.offsetLeft,\n      y: trigger.offsetTop,\n      width: trigger.offsetWidth,\n      height: trigger.offsetHeight,\n    });\n  }\n\n  return (\n    <Tabs\n      data-slot=\"photo-tabs\"\n      defaultValue={defaultValue ?? tabs[0]?.value}\n      className={cn(photoTabsVariants({ barPosition }), className)}\n      style={{ height, ...style }}\n      {...props}\n    >\n      {tabs.map((tab) => (\n        <TabsContent\n          key={tab.value}\n          value={tab.value}\n          data-slot=\"photo-tabs-panel\"\n          className=\"mt-0 size-full rounded-2xl\"\n        >\n          <img\n            src={tab.src}\n            alt={tab.alt ?? tab.label}\n            draggable={false}\n            className={cn(\"size-full rounded-2xl bg-muted object-cover\", imageClassName)}\n          />\n        </TabsContent>\n      ))}\n      <TabsList\n        aria-label={listLabel}\n        data-slot=\"photo-tabs-list\"\n        onPointerLeave={() => setPill(null)}\n        className={cn(\n          \"absolute inset-x-0 mx-auto w-fit gap-2 rounded-full bg-background/60 p-1.5 ring ring-border/70 backdrop-blur-sm\",\n          barPosition === \"top\" ? \"top-3\" : \"bottom-3\",\n          \"transition-[translate,opacity] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          revealOnHover &&\n            cn(\n              \"pointer-fine:translate-y-[var(--photo-tabs-hide)] pointer-fine:opacity-0\",\n              \"pointer-fine:group-hover/photo-tabs:translate-y-0 pointer-fine:group-hover/photo-tabs:opacity-100\",\n              \"pointer-fine:group-focus-within/photo-tabs:translate-y-0 pointer-fine:group-focus-within/photo-tabs:opacity-100\",\n            ),\n          listClassName,\n        )}\n      >\n        <span\n          data-slot=\"photo-tabs-pill\"\n          aria-hidden=\"true\"\n          data-state={pill ? \"visible\" : \"hidden\"}\n          className={cn(\n            // rtl-ok: the pill is placed from offsetLeft, a physical measurement,\n            // so it must be anchored to the physical left edge in both directions.\n            \"pointer-events-none absolute top-0 left-0 rounded-full bg-primary/25\",\n            \"transition-[translate,width,height,opacity] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"data-[state=hidden]:opacity-0\",\n          )}\n          style={\n            pill\n              ? {\n                  translate: `${String(pill.x)}px ${String(pill.y)}px`,\n                  width: pill.width,\n                  height: pill.height,\n                }\n              : undefined\n          }\n        />\n        {tabs.map((tab) => (\n          <TabsTrigger\n            key={tab.value}\n            value={tab.value}\n            data-slot=\"photo-tabs-trigger\"\n            onPointerEnter={(event) => showPill(event.currentTarget)}\n            className={cn(\n              \"relative z-[1] size-9 rounded-full p-0 text-foreground\",\n              \"data-[state=active]:bg-background data-[state=active]:shadow-xs [&_svg:not([class*='size-'])]:size-4\",\n              triggerClassName,\n            )}\n          >\n            <span aria-hidden=\"true\" className=\"contents\">\n              {tab.icon}\n            </span>\n            <span className=\"sr-only\">{tab.label}</span>\n          </TabsTrigger>\n        ))}\n      </TabsList>\n    </Tabs>\n  );\n}\n\nexport { photoTabsVariants };\n"],"mappings":";;;;;;;AAwBA,MAAM,oBAAoB,IAAI,gEAAgE;CAC5F,UAAU;;AAER,aAAa;EACX,QAAQ;EACR,KAAK;CACP,EACF;CACA,iBAAiB,EACf,aAAa,SACf;AACF,CAAC;;AA8BD,SAAgB,UAAU,EACxB,WACA,OACA,MACA,aACA,YAAY,UACZ,SAAS,SACT,gBAAgB,MAChB,eACA,kBACA,gBACA,cACA,GAAG,SACc;CACjB,MAAM,CAAC,MAAM,WAAW,SAKd,IAAI;CAEd,SAAS,SAAS,SAAsB;EACtC,QAAQ;GACN,GAAG,QAAQ;GACX,GAAG,QAAQ;GACX,OAAO,QAAQ;GACf,QAAQ,QAAQ;EAClB,CAAC;CACH;CAEA,OACE,qBAAC,MAAD;EACE,aAAU;EACV,cAAc,gBAAgB,KAAK,EAAE,EAAE;EACvC,WAAW,GAAG,kBAAkB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC3D,OAAO;GAAE;GAAQ,GAAG;EAAM;EAC1B,GAAI;EALN,UAAA,CAOG,KAAK,KAAK,QACT,oBAAC,aAAD;GAEE,OAAO,IAAI;GACX,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IACE,KAAK,IAAI;IACT,KAAK,IAAI,OAAO,IAAI;IACpB,WAAW;IACX,WAAW,GAAG,+CAA+C,cAAc;GAC5E,CAAA;EACU,GAXN,IAAI,KAWE,CACd,GACD,qBAAC,UAAD;GACE,cAAY;GACZ,aAAU;GACV,sBAAsB,QAAQ,IAAI;GAClC,WAAW,GACT,mHACA,gBAAgB,QAAQ,UAAU,YAClC,iGACA,iBACE,GACE,4EACA,qGACA,iHACF,GACF,aACF;GAfF,UAAA,CAiBE,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,cAAY,OAAO,YAAY;IAC/B,WAAW,GAGT,wEACA,8GACA,+BACF;IACA,OACE,OACI;KACE,WAAW,GAAG,OAAO,KAAK,CAAC,EAAE,KAAK,OAAO,KAAK,CAAC,EAAE;KACjD,OAAO,KAAK;KACZ,QAAQ,KAAK;IACf,IACA,KAAA;GAEP,CAAA,GACA,KAAK,KAAK,QACT,qBAAC,aAAD;IAEE,OAAO,IAAI;IACX,aAAU;IACV,iBAAiB,UAAU,SAAS,MAAM,aAAa;IACvD,WAAW,GACT,0DACA,wGACA,gBACF;IATF,UAAA,CAWE,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAChC,UAAA,IAAI;IACD,CAAA,GACN,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA,IAAI;IAAY,CAAA,CAChC;GAdN,GAAA,IAAI,KAcE,CACd,CACO;EACN,CAAA,CAAA;;AAEV"}

package/dist/components/pixel-avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { PixelAvatar, PixelAvatarProps, pixelAvatarVariants } from "./pixel-avatar.js";
+export { PixelAvatar, type PixelAvatarProps, pixelAvatarVariants };

package/dist/components/pixel-avatar/index.js

@@ -0,0 +1,2 @@
+import { PixelAvatar, pixelAvatarVariants } from "./pixel-avatar.js";
+export { PixelAvatar, pixelAvatarVariants };

package/dist/components/pixel-avatar/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/pixel-avatar/meta.ts
+const meta = defineMeta({
+	name: "pixel-avatar",
+	title: "Pixel Avatar",
+	description: "A deterministic pixel avatar generated from a seed — crisp SVG, coloured from theme tokens, with a gentle shimmer.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["pixel-avatar.tsx"],
+	a11y: "Decorative by default (aria-hidden), for the usual case of an avatar beside a visible name. Pass aria-label — the agent's name, not the seed — to make it role=\"img\". The shimmer is decoration and stops under reduced motion, leaving the resting grid."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/pixel-avatar/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/pixel-avatar/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"pixel-avatar\",\n  title: \"Pixel Avatar\",\n  description:\n    \"A deterministic pixel avatar generated from a seed — crisp SVG, coloured from theme tokens, with a gentle shimmer.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"pixel-avatar.tsx\"],\n  a11y:\n    \"Decorative by default (aria-hidden), for the usual case of an avatar beside a visible name. Pass aria-label — \" +\n    'the agent\\'s name, not the seed — to make it role=\"img\". The shimmer is decoration and stops under reduced ' +\n    \"motion, leaving the resting grid.\",\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,kBAAkB;CAC1B,MACE;AAGJ,CAAC"}

package/dist/components/pixel-avatar/pixel-avatar.d.ts

@@ -0,0 +1,23 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/pixel-avatar/pixel-avatar.d.ts
+declare const pixelAvatarVariants: (props?: ({
+  shape?: "circle" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface PixelAvatarProps extends Omit<ComponentPropsWithRef<"svg">, "children">, VariantProps<typeof pixelAvatarVariants> {
+  /** Any string — a name, an id. The same seed always draws the same avatar. */
+  seed: string;
+  /** Rendered size. A number is pixels; a string is any CSS length. */
+  size?: number | string;
+  /** Pixels per side. */
+  cells?: number;
+  /** Shimmer, sparkle and breathe. Stops under reduced motion either way. */
+  animated?: boolean;
+  /** Replaces the three token-derived colours with any CSS colours. */
+  palette?: [string, string, string];
+}
+/** A deterministic, gently animated pixel avatar generated from a seed. */
+declare function PixelAvatar({ className, seed, size, cells, animated, shape, palette, style, ...props }: PixelAvatarProps): import("react").JSX.Element;
+//#endregion
+export { PixelAvatar, PixelAvatarProps, pixelAvatarVariants };
+//# sourceMappingURL=pixel-avatar.d.ts.map

package/dist/components/pixel-avatar/pixel-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-avatar.d.ts","names":[],"sources":["../../../src/components/pixel-avatar/pixel-avatar.tsx"],"mappings":";;;cAoHM,sBAAmB;;6CAUvB;UAEe,yBAEb,KAAK,2CACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAIc,cACd,WACA,MACA,MACA,OACA,UACA,OACA,SACA,UACG,SACF,mCAAgB,IAAA"}