@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/now-playing/now-playing.js

@@ -0,0 +1,354 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/now-playing/now-playing.tsx
+const PREFIX = "dowel-now-playing";
+const STYLES = `
+@keyframes ${PREFIX}-beat{0%{transform:scale(1)}38%{transform:scale(1.34)}100%{transform:scale(1)}}
+[data-slot=now-playing-like][aria-pressed=true] svg{animation:${PREFIX}-beat calc(340ms * var(--motion-scale,1)) cubic-bezier(.3,1.4,.5,1)}
+[data-slot=now-playing-glyph] path{transition:d calc(320ms * var(--motion-scale,1)) cubic-bezier(.22,1,.36,1)}
+`;
+const nowPlayingVariants = cva(cn("relative w-[16.25rem] max-w-full overflow-hidden bg-card/92 text-card-foreground backdrop-blur-[2px] backdrop-saturate-150", "transition-[height,border-radius] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]"), {
+	variants: { 
+	/** A hairline ring — the source's Stroke switch. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: true }
+});
+const morph = "absolute transition-[inset,width,height,border-radius,font-size,gap,opacity,translate] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]";
+/** Collapsed → expanded geometry, in px. */
+const GEOMETRY = {
+	box: {
+		height: [78, 189],
+		radius: [20, 26]
+	},
+	art: {
+		size: [40, 64],
+		radius: [10, 16]
+	},
+	text: {
+		start: [60, 84],
+		width: [94, 126],
+		height: [40, 64],
+		title: [13, 15.5],
+		by: [11, 12]
+	},
+	bar: { top: [65, 96] },
+	ops: {
+		x: [206, 130],
+		y: [30, 156],
+		gap: [5, 14],
+		small: [24, 34],
+		lead: [30, 46]
+	}
+};
+function formatTime(seconds) {
+	const whole = Math.max(0, Math.round(seconds));
+	return `${String(Math.floor(whole / 60))}:${String(whole % 60).padStart(2, "0")}`;
+}
+const PLAY = ["M8 5L12 7.5L12 16.5L8 19Z", "M12 7.5L18 12L18 12L12 16.5Z"];
+const PAUSE = ["M7 5L10.5 5L10.5 19L7 19Z", "M13.5 5L17 5L17 19L13.5 19Z"];
+/** Play and pause share a path structure, so each half morphs into a bar. */
+function PlayGlyph({ playing }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "now-playing-glyph",
+		children: (playing ? PAUSE : PLAY).map((d, index) => /* @__PURE__ */ jsx("path", {
+			d,
+			style: { d: `path("${d}")` }
+		}, index))
+	});
+}
+function Icon({ d, filled = false }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: filled ? "currentColor" : "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+const SKIP_BACK = "M19 20 9 12l10-8v16ZM5 19V5";
+const SKIP_FORWARD = "m5 4 10 8-10 8V4ZM19 5v14";
+const HEART = "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z";
+/** A controlled-or-not value. */
+function useValue(prop, initial, onChange) {
+	const [inner, setInner] = useState(initial);
+	const value = prop ?? inner;
+	const set = (next) => {
+		if (prop === void 0) setInner(next);
+		onChange?.(next);
+	};
+	return [
+		value,
+		set,
+		setInner
+	];
+}
+/** A mini music player that expands in place, with a seek slider and a morphing play button. */
+function NowPlaying({ className, stroke, track, artist, artwork, artworkAlt = "", duration = 214, position: positionProp, defaultPosition = 0, onPositionChange, playing: playingProp, defaultPlaying = false, onPlayingChange, liked: likedProp, defaultLiked = false, onLikedChange, expanded: expandedProp, defaultExpanded = false, onExpandedChange, onPrevious, onNext, labels = {}, style, ...props }) {
+	const panelId = useId();
+	const [expanded, setExpanded] = useValue(expandedProp, defaultExpanded, onExpandedChange);
+	const [playing, setPlaying] = useValue(playingProp, defaultPlaying, onPlayingChange);
+	const [liked, setLiked] = useValue(likedProp, defaultLiked, onLikedChange);
+	const [rawPosition, setPosition, setInnerPosition] = useValue(positionProp, defaultPosition, onPositionChange);
+	const position = Math.min(duration, Math.max(0, rawPosition));
+	const seeking = useRef(null);
+	const railRef = useRef(null);
+	const ticking = playing && positionProp === void 0;
+	useEffect(() => {
+		if (!ticking) return;
+		const timer = setInterval(() => {
+			setInnerPosition((current) => Math.min(duration, current + 1));
+		}, 1e3);
+		return () => {
+			clearInterval(timer);
+		};
+	}, [
+		ticking,
+		duration,
+		setInnerPosition
+	]);
+	const at = (pair) => pair[expanded ? 1 : 0];
+	const progress = duration > 0 ? position / duration : 0;
+	function seekTo(clientX) {
+		const rail = railRef.current;
+		if (!rail) return;
+		const rect = rail.getBoundingClientRect();
+		if (rect.width <= 0) return;
+		const fraction = (getComputedStyle(rail).direction === "rtl" ? rect.right - clientX : clientX - rect.left) / rect.width;
+		setPosition(Math.round(Math.min(1, Math.max(0, fraction)) * duration));
+	}
+	function handleSeekKey(event) {
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const steps = {
+			ArrowUp: 5,
+			ArrowDown: -5,
+			ArrowRight: rtl ? -5 : 5,
+			ArrowLeft: rtl ? 5 : -5,
+			PageUp: 30,
+			PageDown: -30
+		};
+		let next = null;
+		if (event.key in steps) next = position + (steps[event.key] ?? 0);
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = duration;
+		else if (event.key === " " || event.key === "k") {
+			event.preventDefault();
+			setPlaying(!playing);
+			return;
+		}
+		if (next === null) return;
+		event.preventDefault();
+		setPosition(Math.min(duration, Math.max(0, next)));
+	}
+	const button = cn("grid shrink-0 place-items-center rounded-full transition-[width,height,background-color,scale,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)] active:scale-90", "[&_svg]:size-[46%]", focusRing);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "now-playing",
+		"data-state": expanded ? "expanded" : "collapsed",
+		className: cn(nowPlayingVariants({ stroke }), className),
+		style: {
+			height: at(GEOMETRY.box.height),
+			borderRadius: at(GEOMETRY.box.radius),
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-expanded": expanded,
+				"aria-controls": panelId,
+				"aria-label": artist ? `${track}, ${artist}` : track,
+				"data-slot": "now-playing-toggle",
+				className: cn(morph, "peer/toggle start-0 top-0 z-0 rounded-[inherit]", focusRing),
+				style: {
+					width: expanded ? 210 : "100%",
+					height: expanded ? 84 : "100%"
+				},
+				onClick: () => {
+					setExpanded(!expanded);
+				}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-slot": "now-playing-art",
+				className: cn(morph, "pointer-events-none start-2.5 top-2.5 overflow-hidden bg-linear-to-br from-muted to-secondary", "peer-active/toggle:scale-96"),
+				style: {
+					width: at(GEOMETRY.art.size),
+					height: at(GEOMETRY.art.size),
+					borderRadius: at(GEOMETRY.art.radius)
+				},
+				children: typeof artwork === "string" ? /* @__PURE__ */ jsx("img", {
+					src: artwork,
+					alt: "",
+					className: "size-full object-cover"
+				}) : artwork
+			}),
+			artworkAlt ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: artworkAlt
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-slot": "now-playing-text",
+				className: cn(morph, "pointer-events-none top-2.5 flex flex-col justify-center"),
+				style: {
+					insetInlineStart: at(GEOMETRY.text.start),
+					width: at(GEOMETRY.text.width),
+					height: at(GEOMETRY.text.height)
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium tracking-[-0.01em] transition-[font-size] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]",
+					style: { fontSize: at(GEOMETRY.text.title) },
+					children: track
+				}), artist ? /* @__PURE__ */ jsx("span", {
+					className: "truncate text-muted-foreground transition-[font-size] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]",
+					style: { fontSize: at(GEOMETRY.text.by) },
+					children: artist
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				id: panelId,
+				"data-slot": "now-playing-panel",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": liked,
+						"aria-label": labels.like ?? "Like",
+						tabIndex: expanded ? void 0 : -1,
+						"aria-hidden": expanded ? void 0 : true,
+						"data-slot": "now-playing-like",
+						className: cn(button, morph, "end-2.5 top-2.5 z-10 size-7.5 text-muted-foreground hover:bg-foreground/7 aria-pressed:text-foreground", !expanded && "pointer-events-none opacity-0"),
+						onClick: () => {
+							setLiked(!liked);
+						},
+						children: /* @__PURE__ */ jsx(Icon, {
+							d: HEART,
+							filled: liked
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn(morph, "start-2.5 z-10 w-[15rem]"),
+						style: { top: at(GEOMETRY.bar.top) },
+						children: [/* @__PURE__ */ jsx("div", {
+							ref: railRef,
+							role: "slider",
+							tabIndex: expanded ? 0 : -1,
+							"aria-hidden": expanded ? void 0 : true,
+							"aria-label": labels.seek ?? "Seek",
+							"aria-valuemin": 0,
+							"aria-valuemax": duration,
+							"aria-valuenow": position,
+							"aria-valuetext": `${formatTime(position)} of ${formatTime(duration)}`,
+							"data-slot": "now-playing-seek",
+							className: cn("-my-2 cursor-pointer touch-none rounded-sm py-2", !expanded && "pointer-events-none", focusRing),
+							onKeyDown: handleSeekKey,
+							onPointerDown: (event) => {
+								seeking.current = event.pointerId;
+								event.currentTarget.setPointerCapture(event.pointerId);
+								seekTo(event.clientX);
+							},
+							onPointerMove: (event) => {
+								if (seeking.current === event.pointerId) seekTo(event.clientX);
+							},
+							onPointerUp: () => {
+								seeking.current = null;
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-[3px] overflow-hidden rounded-full bg-foreground/12",
+								children: /* @__PURE__ */ jsx("div", {
+									"data-slot": "now-playing-progress",
+									className: "h-full rounded-full bg-foreground",
+									style: { width: `${String(progress * 100)}%` }
+								})
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							"aria-hidden": "true",
+							"data-slot": "now-playing-clock",
+							className: cn("mt-1.5 flex justify-between text-[0.65625rem] tracking-[0.04em] text-muted-foreground tabular-nums", "transition-opacity duration-[var(--duration-slower)]", !expanded && "opacity-0"),
+							children: [/* @__PURE__ */ jsx("span", { children: formatTime(position) }), /* @__PURE__ */ jsxs("span", { children: ["−", formatTime(duration - position)] })]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-slot": "now-playing-transport",
+						className: cn(morph, "z-10 flex -translate-x-1/2 -translate-y-1/2 items-center rtl:translate-x-1/2"),
+						style: {
+							insetInlineStart: at(GEOMETRY.ops.x),
+							top: at(GEOMETRY.ops.y),
+							gap: at(GEOMETRY.ops.gap)
+						},
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": labels.previous ?? "Restart",
+								className: cn(button, "text-muted-foreground hover:bg-foreground/7"),
+								style: {
+									width: at(GEOMETRY.ops.small),
+									height: at(GEOMETRY.ops.small)
+								},
+								onClick: () => {
+									setPosition(0);
+									onPrevious?.();
+								},
+								children: /* @__PURE__ */ jsx(Icon, {
+									d: SKIP_BACK,
+									filled: true
+								})
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": playing ? labels.pause ?? "Pause" : labels.play ?? "Play",
+								"data-slot": "now-playing-play",
+								className: cn(button, "bg-foreground text-background hover:opacity-88"),
+								style: {
+									width: at(GEOMETRY.ops.lead),
+									height: at(GEOMETRY.ops.lead)
+								},
+								onClick: () => {
+									setPlaying(!playing);
+								},
+								children: /* @__PURE__ */ jsx(PlayGlyph, { playing })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": labels.next ?? "Next",
+								className: cn(button, "text-muted-foreground hover:bg-foreground/7"),
+								style: {
+									width: at(GEOMETRY.ops.small),
+									height: at(GEOMETRY.ops.small)
+								},
+								onClick: () => {
+									setPosition(0);
+									onNext?.();
+								},
+								children: /* @__PURE__ */ jsx(Icon, {
+									d: SKIP_FORWARD,
+									filled: true
+								})
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { NowPlaying, nowPlayingVariants };
+
+//# sourceMappingURL=now-playing.js.map

package/dist/components/now-playing/now-playing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"now-playing.js","names":[],"sources":["../../../src/components/now-playing/now-playing.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Now playing (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A compact music mini-player that expands in place.\n *\n * Every part is absolutely placed, and each placement has a collapsed and an\n * expanded value; one CSS transition on all of them is the source's single\n * critically-damped spring. Positions use inset-inline-start, so the layout\n * mirrors in right-to-left pages.\n *\n * Added over the source, which lists them as missing: aria-expanded on the\n * open/close control, aria-pressed on Like, a real seek slider (arrows ±5s,\n * PageUp/PageDown ±30s, Home/End, pointer drag) that also takes Space for\n * play/pause, and focus rings throughout.\n *\n * It is a presentational player: it keeps time itself while uncontrolled, and\n * a consumer with a real <audio> element controls `playing` and `position`.\n */\n\nconst PREFIX = \"dowel-now-playing\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-beat{0%{transform:scale(1)}38%{transform:scale(1.34)}100%{transform:scale(1)}}\n[data-slot=now-playing-like][aria-pressed=true] svg{animation:${PREFIX}-beat calc(340ms * var(--motion-scale,1)) cubic-bezier(.3,1.4,.5,1)}\n[data-slot=now-playing-glyph] path{transition:d calc(320ms * var(--motion-scale,1)) cubic-bezier(.22,1,.36,1)}\n`;\n\nconst nowPlayingVariants = cva(\n  cn(\n    \"relative w-[16.25rem] max-w-full overflow-hidden bg-card/92 text-card-foreground backdrop-blur-[2px] backdrop-saturate-150\",\n    \"transition-[height,border-radius] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\",\n  ),\n  {\n    variants: {\n      /** A hairline ring — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: true },\n  },\n);\n\nconst morph =\n  \"absolute transition-[inset,width,height,border-radius,font-size,gap,opacity,translate] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\";\n\n/** Collapsed → expanded geometry, in px. */\nconst GEOMETRY = {\n  box: { height: [78, 189], radius: [20, 26] },\n  art: { size: [40, 64], radius: [10, 16] },\n  text: {\n    start: [60, 84],\n    width: [94, 126],\n    height: [40, 64],\n    title: [13, 15.5],\n    by: [11, 12],\n  },\n  bar: { top: [65, 96] },\n  ops: { x: [206, 130], y: [30, 156], gap: [5, 14], small: [24, 34], lead: [30, 46] },\n} as const;\n\nfunction formatTime(seconds: number): string {\n  const whole = Math.max(0, Math.round(seconds));\n  return `${String(Math.floor(whole / 60))}:${String(whole % 60).padStart(2, \"0\")}`;\n}\n\nconst PLAY = [\"M8 5L12 7.5L12 16.5L8 19Z\", \"M12 7.5L18 12L18 12L12 16.5Z\"];\nconst PAUSE = [\"M7 5L10.5 5L10.5 19L7 19Z\", \"M13.5 5L17 5L17 19L13.5 19Z\"];\n\n/** Play and pause share a path structure, so each half morphs into a bar. */\nfunction PlayGlyph({ playing }: { playing: boolean }) {\n  const paths = playing ? PAUSE : PLAY;\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      data-slot=\"now-playing-glyph\"\n    >\n      {paths.map((d, index) => (\n        <path key={index} d={d} style={{ d: `path(\"${d}\")` }} />\n      ))}\n    </svg>\n  );\n}\n\nfunction Icon({ d, filled = false }: { d: string; filled?: boolean }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill={filled ? \"currentColor\" : \"none\"}\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d={d} />\n    </svg>\n  );\n}\n\nconst SKIP_BACK = \"M19 20 9 12l10-8v16ZM5 19V5\";\nconst SKIP_FORWARD = \"m5 4 10 8-10 8V4ZM19 5v14\";\nconst HEART =\n  \"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\";\n\n/** A controlled-or-not value. */\nfunction useValue<T>(prop: T | undefined, initial: T, onChange?: (value: T) => void) {\n  const [inner, setInner] = useState(initial);\n  const value = prop ?? inner;\n  const set = (next: T) => {\n    if (prop === undefined) setInner(next);\n    onChange?.(next);\n  };\n  return [value, set, setInner] as const;\n}\n\nexport interface NowPlayingProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"onChange\">,\n    VariantProps<typeof nowPlayingVariants> {\n  /** The track's title. */\n  track: string;\n  /** The artist, album or side. */\n  artist?: string;\n  /** Album art: an image URL, or any node. Decorative unless `artworkAlt` is set. */\n  artwork?: string | ReactNode;\n  artworkAlt?: string;\n  /** Track length in seconds. */\n  duration?: number;\n  position?: number;\n  defaultPosition?: number;\n  onPositionChange?: (seconds: number) => void;\n  playing?: boolean;\n  defaultPlaying?: boolean;\n  onPlayingChange?: (playing: boolean) => void;\n  liked?: boolean;\n  defaultLiked?: boolean;\n  onLikedChange?: (liked: boolean) => void;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Restart: called after the position returns to 0. */\n  onPrevious?: () => void;\n  /** Next track. The position returns to 0. */\n  onNext?: () => void;\n  labels?: Partial<Record<\"play\" | \"pause\" | \"previous\" | \"next\" | \"like\" | \"seek\", string>>;\n}\n\n/** A mini music player that expands in place, with a seek slider and a morphing play button. */\nexport function NowPlaying({\n  className,\n  stroke,\n  track,\n  artist,\n  artwork,\n  artworkAlt = \"\",\n  duration = 214,\n  position: positionProp,\n  defaultPosition = 0,\n  onPositionChange,\n  playing: playingProp,\n  defaultPlaying = false,\n  onPlayingChange,\n  liked: likedProp,\n  defaultLiked = false,\n  onLikedChange,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onExpandedChange,\n  onPrevious,\n  onNext,\n  labels = {},\n  style,\n  ...props\n}: NowPlayingProps) {\n  const panelId = useId();\n  const [expanded, setExpanded] = useValue(expandedProp, defaultExpanded, onExpandedChange);\n  const [playing, setPlaying] = useValue(playingProp, defaultPlaying, onPlayingChange);\n  const [liked, setLiked] = useValue(likedProp, defaultLiked, onLikedChange);\n  const [rawPosition, setPosition, setInnerPosition] = useValue(\n    positionProp,\n    defaultPosition,\n    onPositionChange,\n  );\n  const position = Math.min(duration, Math.max(0, rawPosition));\n  const seeking = useRef<number | null>(null);\n  const railRef = useRef<HTMLDivElement | null>(null);\n\n  // Uncontrolled time keeps itself; a controlled player follows its <audio>.\n  const ticking = playing && positionProp === undefined;\n  useEffect(() => {\n    if (!ticking) return;\n    const timer = setInterval(() => {\n      setInnerPosition((current) => Math.min(duration, current + 1));\n    }, 1000);\n    return () => {\n      clearInterval(timer);\n    };\n  }, [ticking, duration, setInnerPosition]);\n\n  const at = (pair: readonly [number, number]) => pair[expanded ? 1 : 0];\n  const progress = duration > 0 ? position / duration : 0;\n\n  function seekTo(clientX: number) {\n    const rail = railRef.current;\n    if (!rail) return;\n    const rect = rail.getBoundingClientRect();\n    if (rect.width <= 0) return;\n    const rtl = getComputedStyle(rail).direction === \"rtl\";\n    const fraction = (rtl ? rect.right - clientX : clientX - rect.left) / rect.width;\n    setPosition(Math.round(Math.min(1, Math.max(0, fraction)) * duration));\n  }\n\n  function handleSeekKey(event: KeyboardEvent<HTMLDivElement>) {\n    const rtl = getComputedStyle(event.currentTarget).direction === \"rtl\";\n    const steps: Record<string, number> = {\n      ArrowUp: 5,\n      ArrowDown: -5,\n      ArrowRight: rtl ? -5 : 5,\n      ArrowLeft: rtl ? 5 : -5,\n      PageUp: 30,\n      PageDown: -30,\n    };\n    let next: number | null = null;\n    if (event.key in steps) next = position + (steps[event.key] ?? 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = duration;\n    else if (event.key === \" \" || event.key === \"k\") {\n      event.preventDefault();\n      setPlaying(!playing);\n      return;\n    }\n    if (next === null) return;\n    event.preventDefault();\n    setPosition(Math.min(duration, Math.max(0, next)));\n  }\n\n  const button = cn(\n    \"grid shrink-0 place-items-center rounded-full transition-[width,height,background-color,scale,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)] active:scale-90\",\n    \"[&_svg]:size-[46%]\",\n    focusRing,\n  );\n\n  return (\n    <div\n      data-slot=\"now-playing\"\n      data-state={expanded ? \"expanded\" : \"collapsed\"}\n      className={cn(nowPlayingVariants({ stroke }), className)}\n      style={{\n        height: at(GEOMETRY.box.height),\n        borderRadius: at(GEOMETRY.box.radius),\n        ...style,\n      }}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n\n      {/* The hit area: the whole card when collapsed, the header when expanded. */}\n      <button\n        type=\"button\"\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        aria-label={artist ? `${track}, ${artist}` : track}\n        data-slot=\"now-playing-toggle\"\n        className={cn(morph, \"peer/toggle start-0 top-0 z-0 rounded-[inherit]\", focusRing)}\n        style={{\n          width: expanded ? 84 + 126 : \"100%\",\n          height: expanded ? 84 : \"100%\",\n        }}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n      />\n\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"now-playing-art\"\n        className={cn(\n          morph,\n          \"pointer-events-none start-2.5 top-2.5 overflow-hidden bg-linear-to-br from-muted to-secondary\",\n          \"peer-active/toggle:scale-96\",\n        )}\n        style={{\n          width: at(GEOMETRY.art.size),\n          height: at(GEOMETRY.art.size),\n          borderRadius: at(GEOMETRY.art.radius),\n        }}\n      >\n        {typeof artwork === \"string\" ? (\n          <img src={artwork} alt=\"\" className=\"size-full object-cover\" />\n        ) : (\n          artwork\n        )}\n      </div>\n      {artworkAlt ? <span className=\"sr-only\">{artworkAlt}</span> : null}\n\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"now-playing-text\"\n        className={cn(morph, \"pointer-events-none top-2.5 flex flex-col justify-center\")}\n        style={{\n          insetInlineStart: at(GEOMETRY.text.start),\n          width: at(GEOMETRY.text.width),\n          height: at(GEOMETRY.text.height),\n        }}\n      >\n        <span\n          className=\"truncate font-medium tracking-[-0.01em] transition-[font-size] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\"\n          style={{ fontSize: at(GEOMETRY.text.title) }}\n        >\n          {track}\n        </span>\n        {artist ? (\n          <span\n            className=\"truncate text-muted-foreground transition-[font-size] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\"\n            style={{ fontSize: at(GEOMETRY.text.by) }}\n          >\n            {artist}\n          </span>\n        ) : null}\n      </div>\n\n      <div id={panelId} data-slot=\"now-playing-panel\">\n        <button\n          type=\"button\"\n          aria-pressed={liked}\n          aria-label={labels.like ?? \"Like\"}\n          tabIndex={expanded ? undefined : -1}\n          aria-hidden={expanded ? undefined : true}\n          data-slot=\"now-playing-like\"\n          className={cn(\n            button,\n            morph,\n            \"end-2.5 top-2.5 z-10 size-7.5 text-muted-foreground hover:bg-foreground/7 aria-pressed:text-foreground\",\n            !expanded && \"pointer-events-none opacity-0\",\n          )}\n          onClick={() => {\n            setLiked(!liked);\n          }}\n        >\n          <Icon d={HEART} filled={liked} />\n        </button>\n\n        <div\n          className={cn(morph, \"start-2.5 z-10 w-[15rem]\")}\n          style={{ top: at(GEOMETRY.bar.top) }}\n        >\n          <div\n            ref={railRef}\n            role=\"slider\"\n            tabIndex={expanded ? 0 : -1}\n            aria-hidden={expanded ? undefined : true}\n            aria-label={labels.seek ?? \"Seek\"}\n            aria-valuemin={0}\n            aria-valuemax={duration}\n            aria-valuenow={position}\n            aria-valuetext={`${formatTime(position)} of ${formatTime(duration)}`}\n            data-slot=\"now-playing-seek\"\n            className={cn(\n              \"-my-2 cursor-pointer touch-none rounded-sm py-2\",\n              !expanded && \"pointer-events-none\",\n              focusRing,\n            )}\n            onKeyDown={handleSeekKey}\n            onPointerDown={(event: PointerEvent<HTMLDivElement>) => {\n              seeking.current = event.pointerId;\n              event.currentTarget.setPointerCapture(event.pointerId);\n              seekTo(event.clientX);\n            }}\n            onPointerMove={(event) => {\n              if (seeking.current === event.pointerId) seekTo(event.clientX);\n            }}\n            onPointerUp={() => {\n              seeking.current = null;\n            }}\n          >\n            <div className=\"h-[3px] overflow-hidden rounded-full bg-foreground/12\">\n              <div\n                data-slot=\"now-playing-progress\"\n                className=\"h-full rounded-full bg-foreground\"\n                style={{ width: `${String(progress * 100)}%` }}\n              />\n            </div>\n          </div>\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"now-playing-clock\"\n            className={cn(\n              \"mt-1.5 flex justify-between text-[0.65625rem] tracking-[0.04em] text-muted-foreground tabular-nums\",\n              \"transition-opacity duration-[var(--duration-slower)]\",\n              !expanded && \"opacity-0\",\n            )}\n          >\n            <span>{formatTime(position)}</span>\n            <span>−{formatTime(duration - position)}</span>\n          </div>\n        </div>\n\n        <div\n          data-slot=\"now-playing-transport\"\n          className={cn(\n            morph,\n            \"z-10 flex -translate-x-1/2 -translate-y-1/2 items-center rtl:translate-x-1/2\",\n          )}\n          style={{\n            insetInlineStart: at(GEOMETRY.ops.x),\n            top: at(GEOMETRY.ops.y),\n            gap: at(GEOMETRY.ops.gap),\n          }}\n        >\n          <button\n            type=\"button\"\n            aria-label={labels.previous ?? \"Restart\"}\n            className={cn(button, \"text-muted-foreground hover:bg-foreground/7\")}\n            style={{ width: at(GEOMETRY.ops.small), height: at(GEOMETRY.ops.small) }}\n            onClick={() => {\n              setPosition(0);\n              onPrevious?.();\n            }}\n          >\n            <Icon d={SKIP_BACK} filled />\n          </button>\n          <button\n            type=\"button\"\n            aria-label={playing ? (labels.pause ?? \"Pause\") : (labels.play ?? \"Play\")}\n            data-slot=\"now-playing-play\"\n            className={cn(button, \"bg-foreground text-background hover:opacity-88\")}\n            style={{ width: at(GEOMETRY.ops.lead), height: at(GEOMETRY.ops.lead) }}\n            onClick={() => {\n              setPlaying(!playing);\n            }}\n          >\n            <PlayGlyph playing={playing} />\n          </button>\n          <button\n            type=\"button\"\n            aria-label={labels.next ?? \"Next\"}\n            className={cn(button, \"text-muted-foreground hover:bg-foreground/7\")}\n            style={{ width: at(GEOMETRY.ops.small), height: at(GEOMETRY.ops.small) }}\n            onClick={() => {\n              setPosition(0);\n              onNext?.();\n            }}\n          >\n            <Icon d={SKIP_FORWARD} filled />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { nowPlayingVariants };\n"],"mappings":"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"}

package/dist/components/number-flow/index.d.ts

@@ -0,0 +1,2 @@
+import { NumberFlow, NumberFlowElement, NumberFlowProps, NumberFlowTrend, PriceFlow, PriceFlowProps, numberFlowDigitVariants, numberFlowVariants } from "./number-flow.js";
+export { NumberFlow, type NumberFlowElement, type NumberFlowProps, type NumberFlowTrend, PriceFlow, type PriceFlowProps, numberFlowDigitVariants, numberFlowVariants };

package/dist/components/number-flow/index.js

@@ -0,0 +1,2 @@
+import { NumberFlow, PriceFlow, numberFlowDigitVariants, numberFlowVariants } from "./number-flow.js";
+export { NumberFlow, PriceFlow, numberFlowDigitVariants, numberFlowVariants };

package/dist/components/number-flow/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/number-flow/meta.ts
+const meta = defineMeta({
+	name: "number-flow",
+	title: "Number Flow",
+	description: "A number whose digits roll to each new value — counters, prices, percentages and compact figures, formatted by Intl.NumberFormat.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["number-flow.tsx"],
+	a11y: "The formatted value is rendered once as screen-reader text; the rolling reels are aria-hidden, so a reader hears \"$1,234.56\" rather than thirty digits per place. Nothing is announced when the value changes unless the consumer passes aria-live, and then only the settled value is announced (aria-atomic is set with it), never each digit. Under reduced motion every change snaps."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/number-flow/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/number-flow/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"number-flow\",\n  title: \"Number Flow\",\n  description:\n    \"A number whose digits roll to each new value — counters, prices, percentages and compact figures, formatted by Intl.NumberFormat.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"number-flow.tsx\"],\n  a11y:\n    \"The formatted value is rendered once as screen-reader text; the rolling reels are aria-hidden, \" +\n    'so a reader hears \"$1,234.56\" rather than thirty digits per place. Nothing is announced when ' +\n    \"the value changes unless the consumer passes aria-live, and then only the settled value is \" +\n    \"announced (aria-atomic is set with it), never each digit. Under reduced motion every change snaps.\",\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;AAIJ,CAAC"}

package/dist/components/number-flow/number-flow.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/number-flow/number-flow.d.ts
+/** The row of characters. The root itself stays a plain inline box. */
+declare const numberFlowVariants: (props?: ({
+  variant?: "plain" | "tiles" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** One digit's window onto its reel. `tiles` is the source Number Flow's boxed counter. */
+declare const numberFlowDigitVariants: (props?: ({
+  variant?: "plain" | "tiles" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NumberFlowElement = "span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Which way the reels roll. `auto` follows the change in value. */
+type NumberFlowTrend = "auto" | "up" | "down";
+interface NumberFlowProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof numberFlowVariants> {
+  /** The number to show. */
+  value: number;
+  /** Passed to Intl.NumberFormat. Defaults to the user's locale. */
+  locales?: Intl.LocalesArgument;
+  /**
+   * Intl.NumberFormat options: `style: "currency" | "percent"`,
+   * `notation: "compact"`, `signDisplay`, `minimumFractionDigits`, …
+   */
+  format?: Intl.NumberFormatOptions;
+  /** Which way the reels roll. `auto` (default) rolls up on a rise, down on a fall. */
+  trend?: NumberFlowTrend;
+  /**
+   * Milliseconds between one digit starting to roll and the next, from the
+   * leading digit. Price Flow uses 50.
+   */
+  stagger?: number;
+  /** The element rendered as the root. */
+  as?: NumberFlowElement;
+}
+/** A number whose digits roll to each new value. */
+declare function NumberFlow({ className, style, value, locales, format, trend, stagger, variant, as, ...props }: NumberFlowProps): import("react").JSX.Element;
+type PriceFlowProps = NumberFlowProps;
+/**
+ * The source's Price Flow: two-digit minimum and a 50ms stagger from the
+ * leading digit. Pass `format` for a currency; the stagger is kept.
+ */
+declare function PriceFlow({ format, stagger, ...props }: PriceFlowProps): import("react").JSX.Element;
+//#endregion
+export { NumberFlow, NumberFlowElement, NumberFlowProps, NumberFlowTrend, PriceFlow, PriceFlowProps, numberFlowDigitVariants, numberFlowVariants };
+//# sourceMappingURL=number-flow.d.ts.map

package/dist/components/number-flow/number-flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-flow.d.ts","names":[],"sources":["../../../src/components/number-flow/number-flow.tsx"],"mappings":";;;;cAmDM,qBAAkB;;6CAQtB;;cAGI,0BAAuB;;6CAS3B;KAEU;;KAGA;UAEK,wBAEb,KAAK,4CACL,oBAAoB;;EAEtB;;EAEA,UAAU,KAAK;;;;;EAKf,SAAS,KAAK;;EAEd,QAAQ;;;;;EAKR;;EAEA,KAAK;;;iBA0IS,aACd,WACA,OACA,OACA,SACA,QACA,OACA,SACA,SACA,OACG,SACF,kCAAe,IAAA;KAqEN,iBAAiB;;;;;iBAMb,YAAY,QAAQ,YAAiB,SAAS,iCAAc,IAAA"}