@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,253 @@
+"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 { Fragment as Fragment$1, useEffect, useId, useRef, useState } from "react";
+//#region src/components/time-stack/time-stack.tsx
+const timeStackVariants = cva("relative flex w-full items-center justify-center gap-6 overflow-hidden rounded-2xl p-4", {
+	variants: {
+		/** Card width. The stack's depth and height derive from it. */
+		size: {
+			sm: "[--ts-card:10rem]",
+			md: "[--ts-card:13.75rem]",
+			lg: "[--ts-card:18rem]"
+		},
+		tone: {
+			media: "",
+			mono: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "media"
+	}
+});
+/** Placement of one card by its distance from the current one. */
+function cardStyle(offset, count, i) {
+	const past = offset < 0;
+	return {
+		zIndex: count - i,
+		opacity: past ? 0 : Math.max(0, 1 - offset * .2),
+		transform: past ? "translate3d(0, calc(var(--ts-card) * 1.35), calc(var(--ts-card) * 0.9)) rotateX(-20deg) scale(1.3)" : [
+			`translate3d(0, calc(var(--ts-card) * ${String(-offset * .055)}),`,
+			`calc(var(--ts-card) * ${String(-offset * .27)}))`,
+			`rotateX(${String(offset * 2)}deg)`
+		].join(" ")
+	};
+}
+const WHEEL_STEP = 60;
+/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */
+function TimeStack({ className, items, index: indexProp, defaultIndex = 0, onIndexChange, wheel = true, hoverScrub = false, scrubberLabel = "Timeline", size, tone, ref, "aria-label": ariaLabel, ...props }) {
+	const count = items.length;
+	const last = Math.max(0, count - 1);
+	const clamp = (value) => Math.min(last, Math.max(0, value));
+	const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex));
+	const index = clamp(indexProp ?? uncontrolled);
+	const [hovered, setHovered] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const id = useId();
+	const stackRef = useRef(null);
+	const tickRefs = useRef([]);
+	const pressing = useRef(null);
+	function goTo(next, announce = false) {
+		const target = clamp(next);
+		if (target === index) return;
+		if (indexProp === void 0) setUncontrolled(target);
+		onIndexChange?.(target);
+		const item = items[target];
+		if (announce && item) setAnnouncement(`${item.label}: ${item.title}`);
+	}
+	const goToRef = useRef(goTo);
+	const indexRef = useRef(index);
+	useEffect(() => {
+		goToRef.current = goTo;
+		indexRef.current = index;
+	});
+	useEffect(() => {
+		const stack = stackRef.current;
+		if (!stack || !wheel) return;
+		let accumulated = 0;
+		function onWheel(event) {
+			const direction = Math.sign(event.deltaY);
+			const next = indexRef.current + direction;
+			if (direction === 0 || next < 0 || next > last) return;
+			event.preventDefault();
+			accumulated += event.deltaY;
+			if (Math.abs(accumulated) < WHEEL_STEP) return;
+			accumulated = 0;
+			goToRef.current(next, true);
+		}
+		stack.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			stack.removeEventListener("wheel", onWheel);
+		};
+	}, [wheel, last]);
+	function handleKeyDown(event) {
+		const next = {
+			ArrowUp: index + 1,
+			ArrowRight: index + 1,
+			ArrowDown: index - 1,
+			ArrowLeft: index - 1,
+			PageUp: index + 2,
+			PageDown: index - 2,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		goTo(next);
+	}
+	/** The tick nearest the pointer, by measured geometry. */
+	function nearest(clientY) {
+		let best = null;
+		let distance = Infinity;
+		tickRefs.current.forEach((tick, i) => {
+			if (!tick) return;
+			const rect = tick.getBoundingClientRect();
+			const d = Math.abs(clientY - (rect.top + rect.height / 2));
+			if (d < distance) {
+				distance = d;
+				best = i;
+			}
+		});
+		return best;
+	}
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		pressing.current = event.pointerId;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const at = nearest(event.clientY);
+		if (at !== null) goTo(at);
+	}
+	function handlePointerMove(event) {
+		const at = nearest(event.clientY);
+		setHovered(at);
+		if (at !== null && (hoverScrub || pressing.current === event.pointerId)) goTo(at);
+	}
+	function release(event) {
+		if (pressing.current !== event.pointerId) return;
+		pressing.current = null;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	}
+	const current = items[index];
+	const card = cn("grid size-full place-items-center overflow-hidden rounded-2xl border border-border shadow-lg", tone === "mono" ? "bg-muted text-sm font-bold text-muted-foreground" : "bg-card text-card-foreground");
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"data-slot": "time-stack",
+		"aria-roledescription": "time stack",
+		"aria-label": ariaLabel ?? (props["aria-labelledby"] ? void 0 : "Time stack"),
+		className: cn(timeStackVariants({
+			size,
+			tone
+		}), className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: stackRef,
+				id: `${id}-stack`,
+				"data-slot": "time-stack-stack",
+				className: "relative grid flex-1 place-items-center",
+				style: {
+					maxWidth: "calc(var(--ts-card) * 1.32)",
+					aspectRatio: "4 / 3",
+					perspective: "calc(var(--ts-card) * 3.6)",
+					transformStyle: "preserve-3d"
+				},
+				children: items.map((item, i) => {
+					const offset = i - index;
+					const isCurrent = offset === 0;
+					return /* @__PURE__ */ jsx("div", {
+						role: isCurrent ? "group" : void 0,
+						"aria-roledescription": isCurrent ? "slide" : void 0,
+						"aria-label": isCurrent ? `${item.label}: ${item.title}` : void 0,
+						"aria-hidden": isCurrent ? void 0 : true,
+						inert: !isCurrent,
+						"data-slot": "time-stack-card",
+						"data-state": offset < 0 ? "past" : isCurrent ? "current" : "future",
+						className: cn("col-start-1 row-start-1 origin-center will-change-transform", "transition-[transform,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]"),
+						style: {
+							width: "var(--ts-card)",
+							aspectRatio: "220 / 135",
+							...cardStyle(offset, count, i)
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: card,
+							children: item.content ?? (tone !== "mono" && item.image ? /* @__PURE__ */ jsx("img", {
+								src: item.image,
+								alt: item.alt ?? "",
+								draggable: false,
+								className: "size-full object-cover"
+							}) : /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: i + 1
+							}))
+						})
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": scrubberLabel,
+				"aria-orientation": "vertical",
+				"aria-valuemin": 0,
+				"aria-valuemax": last,
+				"aria-valuenow": index,
+				"aria-valuetext": current ? `${current.label}: ${current.title}` : void 0,
+				"aria-controls": `${id}-stack`,
+				"data-slot": "time-stack-scrubber",
+				className: cn("group/scrub relative z-10 flex cursor-pointer touch-none flex-col-reverse items-end rounded-md px-1 py-2 select-none", "[--ts-origin:right] rtl:[--ts-origin:left]", focusRing),
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: release,
+				onPointerCancel: release,
+				onPointerLeave: () => {
+					setHovered(null);
+				},
+				children: items.map((item, i) => {
+					const selected = i === index;
+					const showLabel = hovered === i || selected && hovered === null;
+					const near = hovered !== null && Math.abs(i - hovered) < 1;
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 ? [0, 1].map((sub) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "time-stack-subtick",
+						className: "flex w-20 justify-end py-px",
+						children: /* @__PURE__ */ jsx("span", {
+							className: cn("h-[3px] w-6 rounded-full bg-foreground/20 transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", near ? "scale-x-115 opacity-50" : "opacity-30"),
+							style: { transformOrigin: "var(--ts-origin)" }
+						})
+					}, sub)) : null, /* @__PURE__ */ jsxs("span", {
+						ref: (node) => {
+							tickRefs.current[i] = node;
+						},
+						"aria-hidden": "true",
+						"data-slot": "time-stack-tick",
+						"data-state": selected ? "active" : "inactive",
+						className: "relative flex w-20 items-center justify-end py-px",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-slot": "time-stack-tick-label",
+							className: cn("absolute end-10 text-[10px] font-semibold whitespace-nowrap", "transition-[opacity,scale,filter] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", selected ? "text-primary" : "text-foreground/90", !showLabel && "scale-80 opacity-0 blur-[2px]"),
+							children: item.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("h-[3px] w-6 rounded-full transition-[scale,background-color] duration-[var(--duration-fast)] ease-[var(--ease-overshoot)]", selected ? "bg-primary" : "bg-foreground/50", hovered !== null && (selected ? "scale-x-140" : near ? "scale-x-125" : "")),
+							style: { transformOrigin: "var(--ts-origin)" }
+						})]
+					})] }, i);
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { TimeStack, timeStackVariants };
+
+//# sourceMappingURL=time-stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-stack.js","names":["Fragment"],"sources":["../../../src/components/time-stack/time-stack.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro Time Machine Stack (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Fragment,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\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 * Cards recede in depth behind the current one; the ones already passed fall\n * forward and fade. A timeline scrubber at the inline end picks the moment.\n *\n * The scrubber is a vertical role=\"slider\" with the newest entry at the bottom\n * and history rising above it, as in macOS Time Machine — so ArrowUp, which a\n * vertical slider must use to increase, goes back in time and moves the thumb\n * up. amicro stacks the newest at the top; that order would make the keys\n * contradict the picture.\n *\n * Motion is CSS transitions on transform and opacity. The source's gooey SVG\n * filter is dropped: it softened every card edge and could not be themed.\n */\n\nconst timeStackVariants = cva(\n  \"relative flex w-full items-center justify-center gap-6 overflow-hidden rounded-2xl p-4\",\n  {\n    variants: {\n      /** Card width. The stack's depth and height derive from it. */\n      size: {\n        sm: \"[--ts-card:10rem]\",\n        md: \"[--ts-card:13.75rem]\",\n        lg: \"[--ts-card:18rem]\",\n      },\n      tone: {\n        media: \"\",\n        mono: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      tone: \"media\",\n    },\n  },\n);\n\nexport interface TimeStackItem {\n  /** Names the card. */\n  title: string;\n  /** The moment on the timeline: \"Today\", \"1w ago\", a date. */\n  label: string;\n  /** Image URL for the card when `tone=\"media\"` and no `content` is given. */\n  image?: string;\n  /** Alternative text for `image`. Defaults to empty: the title names the card. */\n  alt?: string;\n  /** Custom card content. Replaces the image or the numbered tile. */\n  content?: ReactNode;\n}\n\nexport interface TimeStackProps\n  extends\n    Omit<ComponentPropsWithRef<\"section\">, \"children\">,\n    VariantProps<typeof timeStackVariants> {\n  /** Newest first: index 0 is the front of the stack and the bottom of the timeline. */\n  items: TimeStackItem[];\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Step through with the mouse wheel over the stack. */\n  wheel?: boolean;\n  /** Select as the pointer moves over the timeline, as in the source, rather than on press. */\n  hoverScrub?: boolean;\n  /** Accessible name of the scrubber. */\n  scrubberLabel?: string;\n}\n\n/** Placement of one card by its distance from the current one. */\nfunction cardStyle(offset: number, count: number, i: number): CSSProperties {\n  const past = offset < 0;\n  return {\n    zIndex: count - i,\n    opacity: past ? 0 : Math.max(0, 1 - offset * 0.2),\n    transform: past\n      ? \"translate3d(0, calc(var(--ts-card) * 1.35), calc(var(--ts-card) * 0.9)) rotateX(-20deg) scale(1.3)\"\n      : [\n          `translate3d(0, calc(var(--ts-card) * ${String(-offset * 0.055)}),`,\n          `calc(var(--ts-card) * ${String(-offset * 0.27)}))`,\n          `rotateX(${String(offset * 2)}deg)`,\n        ].join(\" \"),\n  };\n}\n\nconst WHEEL_STEP = 60;\n\n/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */\nexport function TimeStack({\n  className,\n  items,\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  wheel = true,\n  hoverScrub = false,\n  scrubberLabel = \"Timeline\",\n  size,\n  tone,\n  ref,\n  \"aria-label\": ariaLabel,\n  ...props\n}: TimeStackProps) {\n  const count = items.length;\n  const last = Math.max(0, count - 1);\n  const clamp = (value: number) => Math.min(last, Math.max(0, value));\n  const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex));\n  const index = clamp(indexProp ?? uncontrolled);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const id = useId();\n  const stackRef = useRef<HTMLDivElement>(null);\n  const tickRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  const pressing = useRef<number | null>(null);\n\n  function goTo(next: number, announce = false) {\n    const target = clamp(next);\n    if (target === index) return;\n    if (indexProp === undefined) setUncontrolled(target);\n    onIndexChange?.(target);\n    const item = items[target];\n    if (announce && item) setAnnouncement(`${item.label}: ${item.title}`);\n  }\n\n  // The latest goTo for the native wheel listener, which is bound once.\n  const goToRef = useRef(goTo);\n  const indexRef = useRef(index);\n  useEffect(() => {\n    goToRef.current = goTo;\n    indexRef.current = index;\n  });\n\n  // React's wheel listener is passive and cannot stop the page scrolling, so\n  // bind natively. The page still scrolls once the stack is at either end.\n  useEffect(() => {\n    const stack = stackRef.current;\n    if (!stack || !wheel) return;\n    let accumulated = 0;\n    function onWheel(event: WheelEvent) {\n      const direction = Math.sign(event.deltaY);\n      const next = indexRef.current + direction;\n      if (direction === 0 || next < 0 || next > last) return;\n      event.preventDefault();\n      accumulated += event.deltaY;\n      if (Math.abs(accumulated) < WHEEL_STEP) return;\n      accumulated = 0;\n      goToRef.current(next, true);\n    }\n    stack.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => {\n      stack.removeEventListener(\"wheel\", onWheel);\n    };\n  }, [wheel, last]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const steps: Record<string, number> = {\n      ArrowUp: index + 1,\n      ArrowRight: index + 1,\n      ArrowDown: index - 1,\n      ArrowLeft: index - 1,\n      PageUp: index + 2,\n      PageDown: index - 2,\n      Home: 0,\n      End: last,\n    };\n    const next = steps[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    goTo(next);\n  }\n\n  /** The tick nearest the pointer, by measured geometry. */\n  function nearest(clientY: number) {\n    let best: number | null = null;\n    let distance = Infinity;\n    tickRefs.current.forEach((tick, i) => {\n      if (!tick) return;\n      const rect = tick.getBoundingClientRect();\n      const d = Math.abs(clientY - (rect.top + rect.height / 2));\n      if (d < distance) {\n        distance = d;\n        best = i;\n      }\n    });\n    return best;\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (event.button !== 0) return;\n    pressing.current = event.pointerId;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    const at = nearest(event.clientY);\n    if (at !== null) goTo(at);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    const at = nearest(event.clientY);\n    setHovered(at);\n    if (at !== null && (hoverScrub || pressing.current === event.pointerId)) goTo(at);\n  }\n\n  function release(event: PointerEvent<HTMLDivElement>) {\n    if (pressing.current !== event.pointerId) return;\n    pressing.current = null;\n    event.currentTarget.releasePointerCapture(event.pointerId);\n  }\n\n  const current = items[index];\n  const card = cn(\n    \"grid size-full place-items-center overflow-hidden rounded-2xl border border-border shadow-lg\",\n    tone === \"mono\"\n      ? \"bg-muted text-sm font-bold text-muted-foreground\"\n      : \"bg-card text-card-foreground\",\n  );\n\n  return (\n    <section\n      ref={ref}\n      data-slot=\"time-stack\"\n      aria-roledescription=\"time stack\"\n      aria-label={ariaLabel ?? (props[\"aria-labelledby\"] ? undefined : \"Time stack\")}\n      className={cn(timeStackVariants({ size, tone }), className)}\n      {...props}\n    >\n      <div\n        ref={stackRef}\n        id={`${id}-stack`}\n        data-slot=\"time-stack-stack\"\n        className=\"relative grid flex-1 place-items-center\"\n        style={{\n          maxWidth: \"calc(var(--ts-card) * 1.32)\",\n          aspectRatio: \"4 / 3\",\n          perspective: \"calc(var(--ts-card) * 3.6)\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        {items.map((item, i) => {\n          const offset = i - index;\n          const isCurrent = offset === 0;\n          return (\n            <div\n              key={i}\n              role={isCurrent ? \"group\" : undefined}\n              aria-roledescription={isCurrent ? \"slide\" : undefined}\n              aria-label={isCurrent ? `${item.label}: ${item.title}` : undefined}\n              aria-hidden={isCurrent ? undefined : true}\n              inert={!isCurrent}\n              data-slot=\"time-stack-card\"\n              data-state={offset < 0 ? \"past\" : isCurrent ? \"current\" : \"future\"}\n              className={cn(\n                \"col-start-1 row-start-1 origin-center will-change-transform\",\n                \"transition-[transform,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\",\n              )}\n              style={{\n                width: \"var(--ts-card)\",\n                aspectRatio: \"220 / 135\",\n                ...cardStyle(offset, count, i),\n              }}\n            >\n              <div className={card}>\n                {item.content ??\n                  (tone !== \"mono\" && item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.alt ?? \"\"}\n                      draggable={false}\n                      className=\"size-full object-cover\"\n                    />\n                  ) : (\n                    <span aria-hidden=\"true\">{i + 1}</span>\n                  ))}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={scrubberLabel}\n        aria-orientation=\"vertical\"\n        aria-valuemin={0}\n        aria-valuemax={last}\n        aria-valuenow={index}\n        aria-valuetext={current ? `${current.label}: ${current.title}` : undefined}\n        aria-controls={`${id}-stack`}\n        data-slot=\"time-stack-scrubber\"\n        className={cn(\n          \"group/scrub relative z-10 flex cursor-pointer touch-none flex-col-reverse items-end rounded-md px-1 py-2 select-none\",\n          \"[--ts-origin:right] rtl:[--ts-origin:left]\",\n          focusRing,\n        )}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={release}\n        onPointerCancel={release}\n        onPointerLeave={() => {\n          setHovered(null);\n        }}\n      >\n        {items.map((item, i) => {\n          const selected = i === index;\n          const showLabel = hovered === i || (selected && hovered === null);\n          const near = hovered !== null && Math.abs(i - hovered) < 1;\n          return (\n            <Fragment key={i}>\n              {i > 0\n                ? [0, 1].map((sub) => (\n                    <span\n                      key={sub}\n                      aria-hidden=\"true\"\n                      data-slot=\"time-stack-subtick\"\n                      className=\"flex w-20 justify-end py-px\"\n                    >\n                      <span\n                        className={cn(\n                          \"h-[3px] w-6 rounded-full bg-foreground/20 transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n                          near ? \"scale-x-115 opacity-50\" : \"opacity-30\",\n                        )}\n                        style={{ transformOrigin: \"var(--ts-origin)\" }}\n                      />\n                    </span>\n                  ))\n                : null}\n              <span\n                ref={(node) => {\n                  tickRefs.current[i] = node;\n                }}\n                aria-hidden=\"true\"\n                data-slot=\"time-stack-tick\"\n                data-state={selected ? \"active\" : \"inactive\"}\n                className=\"relative flex w-20 items-center justify-end py-px\"\n              >\n                <span\n                  data-slot=\"time-stack-tick-label\"\n                  className={cn(\n                    \"absolute end-10 text-[10px] font-semibold whitespace-nowrap\",\n                    \"transition-[opacity,scale,filter] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n                    selected ? \"text-primary\" : \"text-foreground/90\",\n                    !showLabel && \"scale-80 opacity-0 blur-[2px]\",\n                  )}\n                >\n                  {item.label}\n                </span>\n                <span\n                  className={cn(\n                    \"h-[3px] w-6 rounded-full transition-[scale,background-color] duration-[var(--duration-fast)] ease-[var(--ease-overshoot)]\",\n                    selected ? \"bg-primary\" : \"bg-foreground/50\",\n                    hovered !== null && (selected ? \"scale-x-140\" : near ? \"scale-x-125\" : \"\"),\n                  )}\n                  style={{ transformOrigin: \"var(--ts-origin)\" }}\n                />\n              </span>\n            </Fragment>\n          );\n        })}\n      </div>\n\n      <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {announcement}\n      </p>\n    </section>\n  );\n}\n\nexport { timeStackVariants };\n"],"mappings":"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"}

package/dist/components/toast/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["toast-store.ts", "toast.tsx"],
-	a11y: "Toasts are announced through a live region: destructive and warning variants interrupt (foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, focus and window blur, and F8 moves focus into the toast list from anywhere. An action must carry altText describing how to do the same thing without the toast, since it may be gone before a screen reader user reaches it."
+	a11y: "Toasts are announced through a live region: destructive and warning variants interrupt (foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, focus and window blur, and F8 moves focus into the toast list from anywhere. An action must carry altText describing how to do the same thing without the toast, since it may be gone before a screen reader user reaches it. The optional spring entrance stops under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/toast/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/toast/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"toast\",\n  title: \"Toast\",\n  description: \"Brief, non-blocking messages with an imperative API callable from anywhere.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"toast-store.ts\", \"toast.tsx\"],\n  a11y:\n    \"Toasts are announced through a live region: destructive and warning variants interrupt \" +\n    \"(foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, \" +\n    \"focus and window blur, and F8 moves focus into the toast list from anywhere. An action \" +\n    \"must carry altText describing how to do the same thing without the toast, since it may \" +\n    \"be gone before a screen reader user reaches it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB,WAAW;CACrC,MACE;AAKJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/toast/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"toast\",\n  title: \"Toast\",\n  description: \"Brief, non-blocking messages with an imperative API callable from anywhere.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"toast-store.ts\", \"toast.tsx\"],\n  a11y:\n    \"Toasts are announced through a live region: destructive and warning variants interrupt \" +\n    \"(foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, \" +\n    \"focus and window blur, and F8 moves focus into the toast list from anywhere. An action \" +\n    \"must carry altText describing how to do the same thing without the toast, since it may \" +\n    \"be gone before a screen reader user reaches it. The optional spring entrance stops under \" +\n    \"reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB,WAAW;CACrC,MACE;AAMJ,CAAC"}

package/dist/components/toast/toast.d.ts

@@ -12,11 +12,18 @@ import { ComponentPropsWithRef } from "react";
  * toast list from anywhere on the page.
  */
 declare const toastVariants: (props?: ({
-  variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+  variant?: "default" | "success" | "warning" | "destructive" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const ToastProvider: import("react").FC<Toast.ToastProviderProps>;
-interface ToastProps extends ComponentPropsWithRef<typeof Toast.Root>, VariantProps<typeof toastVariants> {}
-declare function Toast$1({ className, variant, ...props }: ToastProps): import("react").JSX.Element;
+interface ToastProps extends ComponentPropsWithRef<typeof Toast.Root>, VariantProps<typeof toastVariants> {
+  /**
+   * How the toast enters. `default` slides in from off-screen. `spring` hops a
+   * short way in from the docked edge with a scale pop and a slight overshoot.
+   * Both leave, and swipe away, the same way. Stops under reduced motion.
+   */
+  animation?: "default" | "spring";
+}
+declare function Toast$1({ className, variant, animation, ...props }: ToastProps): import("react").JSX.Element;
 declare function ToastTitle({ className, ...props }: ComponentPropsWithRef<typeof Toast.Title>): import("react").JSX.Element;
 declare function ToastDescription({ className, ...props }: ComponentPropsWithRef<typeof Toast.Description>): import("react").JSX.Element;
 declare function ToastAction({ className, ...props }: ComponentPropsWithRef<typeof Toast.Action>): import("react").JSX.Element;
@@ -29,11 +36,13 @@ interface ToasterProps {
   className?: string;
   /** Names the toast region for assistive technology. */
   label?: string;
+  /** How toasts enter. See `Toast`'s `animation`. */
+  animation?: "default" | "spring";
 }
 /**
  * Renders the toast queue. Mount once, near the root of the application.
  */
-declare function Toaster({ position, duration, className, label }: ToasterProps): import("react").JSX.Element;
+declare function Toaster({ position, duration, className, label, animation }: ToasterProps): import("react").JSX.Element;
 //#endregion
 export { Toast$1 as Toast, ToastAction, ToastClose, ToastDescription, ToastPosition, ToastProps, ToastProvider, ToastTitle, Toaster, ToasterProps, toastVariants };
 //# sourceMappingURL=toast.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","names":[],"sources":["../../../src/components/toast/toast.tsx"],"mappings":";;;;;;;;;;;;;cA2BM,gBAAa;;6CAyBlB;cAEY,+BAAa,GAAA,MAAA;UAET,mBAEb,6BAA6B,MAAe,OAC5C,oBAAoB;iBAER,UAAQ,WAAW,YAAY,SAAS,6BAAU,IAAA;iBAUlD,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,MAAe,+BAAY,IAAA;iBAU3C,cACd,cACG,SACF,6BAA6B,MAAe,0BAAO,IAAA;iBAetC,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;KAyBzC;UAoBK;EACf,WAAW;;EAEX;EACA;;EAEA;;;;;iBAMc,UACd,UACA,UACA,WACA,SACC,+BAAY,IAAA"}
+{"version":3,"file":"toast.d.ts","names":[],"sources":["../../../src/components/toast/toast.tsx"],"mappings":";;;;;;;;;;;;;cA4BM,gBAAa;;6CAyBlB;cAEY,+BAAa,GAAA,MAAA;UAYT,mBAEb,6BAA6B,MAAe,OAC5C,oBAAoB;;;;;;EAMtB;;iBAGc,UAAQ,WAAW,SAAS,cAA0B,SAAS,6BAAU,IAAA;iBA6BzE,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,MAAe,+BAAY,IAAA;iBAU3C,cACd,cACG,SACF,6BAA6B,MAAe,0BAAO,IAAA;iBAetC,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;KAyBzC;UA8BK;EACf,WAAW;;EAEX;EACA;;EAEA;;EAEA;;;;;iBAMc,UACd,UACA,UACA,WACA,OACA,aACC,+BAAY,IAAA"}

package/dist/components/toast/toast.js

@@ -3,7 +3,7 @@ import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { DEFAULT_TOAST_DURATION, toast, useToasts } from "./toast-store.js";
 import { Toast } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/toast/toast.tsx
 /**
@@ -26,12 +26,22 @@ const toastVariants = cva(cn("group pointer-events-auto relative flex w-full ite
 	defaultVariants: { variant: "default" }
 });
 const ToastProvider = Toast.Provider;
-function Toast$1({ className, variant, ...props }) {
-	return /* @__PURE__ */ jsx(Toast.Root, {
+const PREFIX = "dowel-toast";
+const STYLES = `
+@keyframes ${PREFIX}-spring-in{from{opacity:0;transform:translate3d(var(--${PREFIX}-from,3rem),0,0) scale(.8)}}
+`;
+function Toast$1({ className, variant, animation = "default", ...props }) {
+	const spring = animation === "spring";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [spring ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsx(Toast.Root, {
 		"data-slot": "toast",
-		className: cn(toastVariants({ variant }), className),
+		"data-animation": spring ? "spring" : void 0,
+		className: cn(toastVariants({ variant }), spring && "data-[animation=spring]:data-[state=open]:animate-[dowel-toast-spring-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]", className),
 		...props
-	});
+	})] });
 }
 function ToastTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toast.Title, {
@@ -82,19 +92,31 @@ const viewportPositions = {
 	"bottom-center": "bottom-0 left-1/2 -translate-x-1/2",
 	"bottom-right": "bottom-0 right-0"
 };
+/** Where a spring toast hops in from: the edge it is docked against. */
+const springOrigins = {
+	"top-left": "[--dowel-toast-from:-3rem]",
+	"top-center": "[--dowel-toast-from:0]",
+	"top-right": "[--dowel-toast-from:3rem]",
+	"bottom-left": "[--dowel-toast-from:-3rem]",
+	"bottom-center": "[--dowel-toast-from:0]",
+	"bottom-right": "[--dowel-toast-from:3rem]"
+};
 /**
 * Renders the toast queue. Mount once, near the root of the application.
 */
-function Toaster({ position = "bottom-right", duration = DEFAULT_TOAST_DURATION, className, label = "Notifications" }) {
+function Toaster({ position = "bottom-right", duration = DEFAULT_TOAST_DURATION, className, label = "Notifications", animation = "default" }) {
 	const toasts = useToasts();
 	const swipeDirection = position.endsWith("left") ? "left" : "right";
 	return /* @__PURE__ */ jsxs(Toast.Provider, {
 		swipeDirection,
 		duration,
 		label,
-		children: [toasts.map((record) => /* @__PURE__ */ jsx(ToastItem, { record }, record.id)), /* @__PURE__ */ jsx(Toast.Viewport, {
+		children: [toasts.map((record) => /* @__PURE__ */ jsx(ToastItem, {
+			record,
+			animation
+		}, record.id)), /* @__PURE__ */ jsx(Toast.Viewport, {
 			"data-slot": "toast-viewport",
-			className: cn("pointer-events-none fixed z-[var(--z-toast)] flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm", viewportPositions[position], className)
+			className: cn("pointer-events-none fixed z-[var(--z-toast)] flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm", viewportPositions[position], animation === "spring" && springOrigins[position], className)
 		})]
 	});
 }
@@ -109,11 +131,12 @@ const FOREGROUND_VARIANTS = /* @__PURE__ */ new Set(["destructive", "warning"]);
 * was asked for.
 */
 const MAX_TIMEOUT_MS = 2147483647;
-function ToastItem({ record }) {
+function ToastItem({ record, animation }) {
 	const { id, title, description, variant, action, duration } = record;
 	const type = FOREGROUND_VARIANTS.has(variant) ? "foreground" : "background";
 	return /* @__PURE__ */ jsxs(Toast$1, {
 		variant,
+		animation,
 		type,
 		"data-type": type,
 		duration: duration === Infinity ? MAX_TIMEOUT_MS : duration,

package/dist/components/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["ToastPrimitive","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Toast as ToastPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  DEFAULT_TOAST_DURATION,\n  toast,\n  useToasts,\n  type ToastRecord,\n  type ToastVariant,\n} from \"./toast-store\";\n\n/**\n * Brief, non-blocking messages about something that just happened.\n *\n * Render one `<Toaster />` near the root of the app; raise messages from\n * anywhere with `toast()`. The primitive underneath supplies the parts that are\n * easy to get wrong: a screen-reader announcement region, timers that pause on\n * hover, focus and window blur, swipe-to-dismiss, and F8 to jump focus into the\n * toast list from anywhere on the page.\n */\n\nconst toastVariants = cva(\n  cn(\n    \"group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden\",\n    \"rounded-lg border p-4 pe-10 shadow-lg\",\n    \"[--slide-x:calc(100%+1rem)]\",\n    \"data-[state=closed]:animate-float-out data-[state=open]:animate-slide-in\",\n    \"data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform\",\n    \"data-[swipe=end]:animate-toast-swipe-out\",\n  ),\n  {\n    variants: {\n      variant: {\n        default: \"border-border bg-popover text-popover-foreground\",\n        success: \"border-success/30 bg-popover text-popover-foreground [&_svg]:text-success\",\n        warning: \"border-warning/35 bg-popover text-popover-foreground [&_svg]:text-warning\",\n        destructive:\n          \"border-destructive/30 bg-popover text-popover-foreground [&_svg]:text-destructive\",\n        info: \"border-info/30 bg-popover text-popover-foreground [&_svg]:text-info\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport const ToastProvider = ToastPrimitive.Provider;\n\nexport interface ToastProps\n  extends\n    ComponentPropsWithRef<typeof ToastPrimitive.Root>,\n    VariantProps<typeof toastVariants> {}\n\nexport function Toast({ className, variant, ...props }: ToastProps) {\n  return (\n    <ToastPrimitive.Root\n      data-slot=\"toast\"\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport function ToastTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Title>) {\n  return (\n    <ToastPrimitive.Title\n      data-slot=\"toast-title\"\n      className={cn(\"text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ToastDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Description>) {\n  return (\n    <ToastPrimitive.Description\n      data-slot=\"toast-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ToastAction({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Action>) {\n  return (\n    <ToastPrimitive.Action\n      data-slot=\"toast-action\"\n      className={cn(\n        \"inline-flex h-8 shrink-0 items-center rounded-md border border-input bg-transparent px-3 text-xs font-medium\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ToastClose({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Close>) {\n  return (\n    <ToastPrimitive.Close\n      data-slot=\"toast-close\"\n      aria-label=\"Dismiss\"\n      className={cn(\n        \"absolute end-3 top-3 grid size-6 place-items-center rounded-md text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n        <path\n          d=\"m6 6 12 12M18 6 6 18\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </ToastPrimitive.Close>\n  );\n}\n\nexport type ToastPosition =\n  \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\";\n\n/*\n  rtl-ok: the positions are *named* left and right, so they stay physical. A\n  toast asked for at `bottom-right` that appears bottom-left in Arabic is the\n  same lie as a Sheet asked for on the left that opens on the right — and it is\n  worse here, because the slide-in comes from the right edge and the toast would\n  fly across the screen to reach the other one. The logical version of this is a\n  `bottom-end` position, which is a rename rather than a restyle.\n*/\nconst viewportPositions: Record<ToastPosition, string> = {\n  \"top-left\": \"top-0 left-0 sm:flex-col-reverse\", // rtl-ok: named position\n  \"top-center\": \"top-0 left-1/2 -translate-x-1/2 sm:flex-col-reverse\",\n  \"top-right\": \"top-0 right-0 sm:flex-col-reverse\", // rtl-ok: named position\n  \"bottom-left\": \"bottom-0 left-0\", // rtl-ok: named position\n  \"bottom-center\": \"bottom-0 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-0 right-0\", // rtl-ok: named position\n};\n\nexport interface ToasterProps {\n  position?: ToastPosition;\n  /** Default auto-dismiss in ms. Individual toasts may override it. */\n  duration?: number;\n  className?: string;\n  /** Names the toast region for assistive technology. */\n  label?: string;\n}\n\n/**\n * Renders the toast queue. Mount once, near the root of the application.\n */\nexport function Toaster({\n  position = \"bottom-right\",\n  duration = DEFAULT_TOAST_DURATION,\n  className,\n  label = \"Notifications\",\n}: ToasterProps) {\n  const toasts = useToasts();\n  // Swiping should follow the edge the toasts are docked against.\n  const swipeDirection = position.endsWith(\"left\") ? \"left\" : \"right\";\n\n  return (\n    <ToastPrimitive.Provider swipeDirection={swipeDirection} duration={duration} label={label}>\n      {toasts.map((record) => (\n        <ToastItem key={record.id} record={record} />\n      ))}\n      <ToastPrimitive.Viewport\n        data-slot=\"toast-viewport\"\n        className={cn(\n          \"pointer-events-none fixed z-[var(--z-toast)] flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm\",\n          viewportPositions[position],\n          className,\n        )}\n      />\n    </ToastPrimitive.Provider>\n  );\n}\n\n/** Variants that report a problem should interrupt rather than wait for a pause. */\nconst FOREGROUND_VARIANTS = new Set<ToastVariant>([\"destructive\", \"warning\"]);\n\n/**\n * Largest delay setTimeout accepts (2^31 - 1 ms, about 24 days).\n *\n * Anything above this silently overflows to a 32-bit integer and fires almost\n * immediately, so mapping `Infinity` to MAX_SAFE_INTEGER would dismiss a\n * persistent toast after roughly one millisecond — the exact opposite of what\n * was asked for.\n */\nconst MAX_TIMEOUT_MS = 2_147_483_647;\n\nfunction ToastItem({ record }: { record: ToastRecord }) {\n  const { id, title, description, variant, action, duration } = record;\n\n  const type = FOREGROUND_VARIANTS.has(variant) ? \"foreground\" : \"background\";\n\n  return (\n    <Toast\n      variant={variant}\n      type={type}\n      // Mirrored onto the element because the primitive expresses `type` only\n      // through the transient live region it renders elsewhere. Having it here\n      // gives styling and tests something stable to read.\n      data-type={type}\n      duration={duration === Infinity ? MAX_TIMEOUT_MS : duration}\n      onOpenChange={(open) => {\n        // Covers every route out: the timer, the close button and a swipe.\n        if (!open) toast.dismiss(id);\n      }}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {title === undefined ? null : <ToastTitle>{title}</ToastTitle>}\n        {description === undefined ? null : <ToastDescription>{description}</ToastDescription>}\n      </div>\n      {action ? (\n        <ToastAction altText={action.altText ?? action.label} onClick={action.onClick}>\n          {action.label}\n        </ToastAction>\n      ) : null}\n      <ToastClose />\n    </Toast>\n  );\n}\n\nexport { toastVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,MAAM,gBAAgB,IACpB,GACE,oFACA,yCACA,+BACA,4EACA,qGACA,8EACA,0CACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,aACE;EACF,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,MAAa,gBAAgBA,MAAe;AAO5C,SAAgBC,QAAM,EAAE,WAAW,SAAS,GAAG,SAAqB;CAClE,OACE,oBAACD,MAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,WAAW,EACzB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,MAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,MAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAC1B,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,MAAe,QAAhB;EACE,aAAU;EACV,WAAW,GACT,gHACA,kGACA,WACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,WAAW,EACzB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,MAAe,OAAhB;EACE,aAAU;EACV,cAAW;EACX,WAAW,GACT,wFACA,2FACA,WACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;GACf,CAAA;EACE,CAAA;CACe,CAAA;AAE1B;AAaA,MAAM,oBAAmD;CACvD,YAAY;CACZ,cAAc;CACd,aAAa;CACb,eAAe;CACf,iBAAiB;CACjB,gBAAgB;AAClB;;;;AAcA,SAAgB,QAAQ,EACtB,WAAW,gBACX,WAAW,wBACX,WACA,QAAQ,mBACO;CACf,MAAM,SAAS,UAAU;CAEzB,MAAM,iBAAiB,SAAS,SAAS,MAAM,IAAI,SAAS;CAE5D,OACE,qBAACA,MAAe,UAAhB;EAAyC;EAA0B;EAAiB;EAApF,UAAA,CACG,OAAO,KAAK,WACX,oBAAC,WAAD,EAAmC,OAAS,GAA5B,OAAO,EAAqB,CAC7C,GACD,oBAACA,MAAe,UAAhB;GACE,aAAU;GACV,WAAW,GACT,wGACA,kBAAkB,WAClB,SACF;EACD,CAAA,CACsB;;AAE7B;;AAGA,MAAM,sCAAsB,IAAI,IAAkB,CAAC,eAAe,SAAS,CAAC;;;;;;;;;AAU5E,MAAM,iBAAiB;AAEvB,SAAS,UAAU,EAAE,UAAmC;CACtD,MAAM,EAAE,IAAI,OAAO,aAAa,SAAS,QAAQ,aAAa;CAE9D,MAAM,OAAO,oBAAoB,IAAI,OAAO,IAAI,eAAe;CAE/D,OACE,qBAACC,SAAD;EACW;EACH;EAIN,aAAW;EACX,UAAU,aAAa,WAAW,iBAAiB;EACnD,eAAe,SAAS;GAEtB,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;EAC7B;EAXF,UAAA;GAaE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UAAU,KAAA,IAAY,OAAO,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,GAC5D,gBAAgB,KAAA,IAAY,OAAO,oBAAC,kBAAD,EAAA,UAAmB,YAA8B,CAAA,CAClF;;GACJ,SACC,oBAAC,aAAD;IAAa,SAAS,OAAO,WAAW,OAAO;IAAO,SAAS,OAAO;IACnE,UAAA,OAAO;GACG,CAAA,IACX;GACJ,oBAAC,YAAD,CAAa,CAAA;EACR;;AAEX"}
+{"version":3,"file":"toast.js","names":["ToastPrimitive","Toast"],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI BasicToast (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Toast as ToastPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  DEFAULT_TOAST_DURATION,\n  toast,\n  useToasts,\n  type ToastRecord,\n  type ToastVariant,\n} from \"./toast-store\";\n\n/**\n * Brief, non-blocking messages about something that just happened.\n *\n * Render one `<Toaster />` near the root of the app; raise messages from\n * anywhere with `toast()`. The primitive underneath supplies the parts that are\n * easy to get wrong: a screen-reader announcement region, timers that pause on\n * hover, focus and window blur, swipe-to-dismiss, and F8 to jump focus into the\n * toast list from anywhere on the page.\n */\n\nconst toastVariants = cva(\n  cn(\n    \"group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden\",\n    \"rounded-lg border p-4 pe-10 shadow-lg\",\n    \"[--slide-x:calc(100%+1rem)]\",\n    \"data-[state=closed]:animate-float-out data-[state=open]:animate-slide-in\",\n    \"data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform\",\n    \"data-[swipe=end]:animate-toast-swipe-out\",\n  ),\n  {\n    variants: {\n      variant: {\n        default: \"border-border bg-popover text-popover-foreground\",\n        success: \"border-success/30 bg-popover text-popover-foreground [&_svg]:text-success\",\n        warning: \"border-warning/35 bg-popover text-popover-foreground [&_svg]:text-warning\",\n        destructive:\n          \"border-destructive/30 bg-popover text-popover-foreground [&_svg]:text-destructive\",\n        info: \"border-info/30 bg-popover text-popover-foreground [&_svg]:text-info\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport const ToastProvider = ToastPrimitive.Provider;\n\nconst PREFIX = \"dowel-toast\";\n\n/* A short hop from the docked edge with a scale pop, instead of the full slide\n * in from off-screen. The edge comes from --dowel-toast-from, which the Toaster\n * sets from its position (3rem from the right, -3rem from the left, 0 when\n * centred); a Toast used on its own comes from the right, like the default. */\nconst STYLES = `\n@keyframes ${PREFIX}-spring-in{from{opacity:0;transform:translate3d(var(--${PREFIX}-from,3rem),0,0) scale(.8)}}\n`;\n\nexport interface ToastProps\n  extends\n    ComponentPropsWithRef<typeof ToastPrimitive.Root>,\n    VariantProps<typeof toastVariants> {\n  /**\n   * How the toast enters. `default` slides in from off-screen. `spring` hops a\n   * short way in from the docked edge with a scale pop and a slight overshoot.\n   * Both leave, and swipe away, the same way. Stops under reduced motion.\n   */\n  animation?: \"default\" | \"spring\";\n}\n\nexport function Toast({ className, variant, animation = \"default\", ...props }: ToastProps) {\n  const spring = animation === \"spring\";\n\n  return (\n    <>\n      {spring ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <ToastPrimitive.Root\n        data-slot=\"toast\"\n        data-animation={spring ? \"spring\" : undefined}\n        className={cn(\n          toastVariants({ variant }),\n          // Keyed on data-animation as well as data-state so the selector is\n          // more specific than the base slide-in, which tailwind-merge cannot\n          // recognise as a conflict (it does not know the theme's animate-*\n          // names). Spelled out because Tailwind reads class names from source.\n          spring &&\n            \"data-[animation=spring]:data-[state=open]:animate-[dowel-toast-spring-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\",\n          className,\n        )}\n        {...props}\n      />\n    </>\n  );\n}\n\nexport function ToastTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Title>) {\n  return (\n    <ToastPrimitive.Title\n      data-slot=\"toast-title\"\n      className={cn(\"text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ToastDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Description>) {\n  return (\n    <ToastPrimitive.Description\n      data-slot=\"toast-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ToastAction({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Action>) {\n  return (\n    <ToastPrimitive.Action\n      data-slot=\"toast-action\"\n      className={cn(\n        \"inline-flex h-8 shrink-0 items-center rounded-md border border-input bg-transparent px-3 text-xs font-medium\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ToastClose({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof ToastPrimitive.Close>) {\n  return (\n    <ToastPrimitive.Close\n      data-slot=\"toast-close\"\n      aria-label=\"Dismiss\"\n      className={cn(\n        \"absolute end-3 top-3 grid size-6 place-items-center rounded-md text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n        <path\n          d=\"m6 6 12 12M18 6 6 18\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </ToastPrimitive.Close>\n  );\n}\n\nexport type ToastPosition =\n  \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\";\n\n/*\n  rtl-ok: the positions are *named* left and right, so they stay physical. A\n  toast asked for at `bottom-right` that appears bottom-left in Arabic is the\n  same lie as a Sheet asked for on the left that opens on the right — and it is\n  worse here, because the slide-in comes from the right edge and the toast would\n  fly across the screen to reach the other one. The logical version of this is a\n  `bottom-end` position, which is a rename rather than a restyle.\n*/\nconst viewportPositions: Record<ToastPosition, string> = {\n  \"top-left\": \"top-0 left-0 sm:flex-col-reverse\", // rtl-ok: named position\n  \"top-center\": \"top-0 left-1/2 -translate-x-1/2 sm:flex-col-reverse\",\n  \"top-right\": \"top-0 right-0 sm:flex-col-reverse\", // rtl-ok: named position\n  \"bottom-left\": \"bottom-0 left-0\", // rtl-ok: named position\n  \"bottom-center\": \"bottom-0 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-0 right-0\", // rtl-ok: named position\n};\n\n/** Where a spring toast hops in from: the edge it is docked against. */\nconst springOrigins: Record<ToastPosition, string> = {\n  \"top-left\": \"[--dowel-toast-from:-3rem]\",\n  \"top-center\": \"[--dowel-toast-from:0]\",\n  \"top-right\": \"[--dowel-toast-from:3rem]\",\n  \"bottom-left\": \"[--dowel-toast-from:-3rem]\",\n  \"bottom-center\": \"[--dowel-toast-from:0]\",\n  \"bottom-right\": \"[--dowel-toast-from:3rem]\",\n};\n\nexport interface ToasterProps {\n  position?: ToastPosition;\n  /** Default auto-dismiss in ms. Individual toasts may override it. */\n  duration?: number;\n  className?: string;\n  /** Names the toast region for assistive technology. */\n  label?: string;\n  /** How toasts enter. See `Toast`'s `animation`. */\n  animation?: \"default\" | \"spring\";\n}\n\n/**\n * Renders the toast queue. Mount once, near the root of the application.\n */\nexport function Toaster({\n  position = \"bottom-right\",\n  duration = DEFAULT_TOAST_DURATION,\n  className,\n  label = \"Notifications\",\n  animation = \"default\",\n}: ToasterProps) {\n  const toasts = useToasts();\n  // Swiping should follow the edge the toasts are docked against.\n  const swipeDirection = position.endsWith(\"left\") ? \"left\" : \"right\";\n\n  return (\n    <ToastPrimitive.Provider swipeDirection={swipeDirection} duration={duration} label={label}>\n      {toasts.map((record) => (\n        <ToastItem key={record.id} record={record} animation={animation} />\n      ))}\n      <ToastPrimitive.Viewport\n        data-slot=\"toast-viewport\"\n        className={cn(\n          \"pointer-events-none fixed z-[var(--z-toast)] flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm\",\n          viewportPositions[position],\n          animation === \"spring\" && springOrigins[position],\n          className,\n        )}\n      />\n    </ToastPrimitive.Provider>\n  );\n}\n\n/** Variants that report a problem should interrupt rather than wait for a pause. */\nconst FOREGROUND_VARIANTS = new Set<ToastVariant>([\"destructive\", \"warning\"]);\n\n/**\n * Largest delay setTimeout accepts (2^31 - 1 ms, about 24 days).\n *\n * Anything above this silently overflows to a 32-bit integer and fires almost\n * immediately, so mapping `Infinity` to MAX_SAFE_INTEGER would dismiss a\n * persistent toast after roughly one millisecond — the exact opposite of what\n * was asked for.\n */\nconst MAX_TIMEOUT_MS = 2_147_483_647;\n\nfunction ToastItem({\n  record,\n  animation,\n}: {\n  record: ToastRecord;\n  animation: \"default\" | \"spring\";\n}) {\n  const { id, title, description, variant, action, duration } = record;\n\n  const type = FOREGROUND_VARIANTS.has(variant) ? \"foreground\" : \"background\";\n\n  return (\n    <Toast\n      variant={variant}\n      animation={animation}\n      type={type}\n      // Mirrored onto the element because the primitive expresses `type` only\n      // through the transient live region it renders elsewhere. Having it here\n      // gives styling and tests something stable to read.\n      data-type={type}\n      duration={duration === Infinity ? MAX_TIMEOUT_MS : duration}\n      onOpenChange={(open) => {\n        // Covers every route out: the timer, the close button and a swipe.\n        if (!open) toast.dismiss(id);\n      }}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {title === undefined ? null : <ToastTitle>{title}</ToastTitle>}\n        {description === undefined ? null : <ToastDescription>{description}</ToastDescription>}\n      </div>\n      {action ? (\n        <ToastAction altText={action.altText ?? action.label} onClick={action.onClick}>\n          {action.label}\n        </ToastAction>\n      ) : null}\n      <ToastClose />\n    </Toast>\n  );\n}\n\nexport { toastVariants };\n"],"mappings":"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"}

package/dist/components/todo-tower/index.d.ts

@@ -0,0 +1,2 @@
+import { TodoItem, TodoTower, TodoTowerProps, todoTowerVariants } from "./todo-tower.js";
+export { type TodoItem, TodoTower, type TodoTowerProps, todoTowerVariants };

package/dist/components/todo-tower/index.js

@@ -0,0 +1,2 @@
+import { TodoTower, todoTowerVariants } from "./todo-tower.js";
+export { TodoTower, todoTowerVariants };

package/dist/components/todo-tower/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/todo-tower/meta.ts
+const meta = defineMeta({
+	name: "todo-tower",
+	title: "Todo Tower",
+	description: "To-do cards stacked like bricks: tick one and it flicks away as the cards above drop; drag one and the stack sways.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: [],
+	files: ["todo-tower.tsx"],
+	a11y: "A labelled list. Each card's check is a real button named \"Done: <task>\", so Tab and Enter/Space complete tasks; completion is announced politely and focus moves to the card that drops into the gap. Dragging and swaying the stack is decoration with no keyboard equivalent because it does nothing. Under reduced motion there is no sway, flick or drop."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/todo-tower/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/todo-tower/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"todo-tower\",\n  title: \"Todo Tower\",\n  description:\n    \"To-do cards stacked like bricks: tick one and it flicks away as the cards above drop; drag one and the stack sways.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [],\n  files: [\"todo-tower.tsx\"],\n  a11y:\n    'A labelled list. Each card\\'s check is a real button named \"Done: <task>\", so Tab and Enter/Space complete ' +\n    \"tasks; completion is announced politely and focus moves to the card that drops into the gap. Dragging and \" +\n    \"swaying the stack is decoration with no keyboard equivalent because it does nothing. Under reduced motion \" +\n    \"there is no sway, flick or drop.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,QAAQ;CACnD,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}

package/dist/components/todo-tower/todo-tower.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/todo-tower/todo-tower.d.ts
+declare const todoTowerVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TodoItem {
+  id: string;
+  label: string;
+}
+interface TodoTowerProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">, VariantProps<typeof todoTowerVariants> {
+  /** Controlled to-dos, top of the stack first. */
+  items?: TodoItem[];
+  /** Initial to-dos when uncontrolled, top of the stack first. */
+  defaultItems?: TodoItem[];
+  /** Called with the remaining to-dos after one is completed. */
+  onItemsChange?: (items: TodoItem[]) => void;
+  /** Called with the to-do that was completed. */
+  onComplete?: (item: TodoItem) => void;
+  /** Re-drop the whole stack once the last card is done (uncontrolled only). */
+  loop?: boolean;
+  /** How hard the stack pulls back together, 0–100. */
+  gravity?: number;
+  /** How loosely the cards above a held one sway, 0–100. */
+  slip?: number;
+  /** The list's accessible name. */
+  label?: string;
+  /** The check button's name for a to-do. */
+  checkLabel?: (label: string) => string;
+  /** Announced when a to-do is completed. */
+  completedLabel?: (label: string) => string;
+}
+/** A stack of to-do cards: tick one and it flicks away; grab one and the stack sways. */
+declare function TodoTower({ className, fill, stroke, items: itemsProp, defaultItems, onItemsChange, onComplete, loop, gravity, slip, label, checkLabel, completedLabel, style, ...props }: TodoTowerProps): import("react").JSX.Element;
+//#endregion
+export { TodoItem, TodoTower, TodoTowerProps, todoTowerVariants };
+//# sourceMappingURL=todo-tower.d.ts.map

package/dist/components/todo-tower/todo-tower.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"todo-tower.d.ts","names":[],"sources":["../../../src/components/todo-tower/todo-tower.tsx"],"mappings":";;;cA0DM,oBAAiB;;;6CAerB;UAEe;EACf;EACA;;UAgKe,uBAEb,KAAK,4DACL,oBAAoB;;EAEtB,QAAQ;;EAER,eAAe;;EAEf,iBAAiB,OAAO;;EAExB,cAAc,MAAM;;EAEpB;;EAEA;;EAEA;;EAEA;;EAEA,cAAc;;EAEd,kBAAkB;;;iBAIJ,YACd,WACA,MACA,QACA,OAAO,WACP,cACA,eACA,YACA,MACA,SACA,MACA,OACA,YACA,gBACA,UACG,SACF,iCAAc,IAAA"}