@dowel-ui/react 0.5.0 → 0.8.0

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
 /**
@@ -15,7 +15,7 @@ import { cva } from "class-variance-authority";
 * hover, focus and window blur, swipe-to-dismiss, and F8 to jump focus into the
 * toast list from anywhere on the page.
 */
-const toastVariants = cva(cn("group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden", "rounded-lg border p-4 pr-10 shadow-lg", "[--slide-x:calc(100%+1rem)]", "data-[state=closed]:animate-float-out data-[state=open]:animate-slide-in", "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none", "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform", "data-[swipe=end]:animate-toast-swipe-out"), {
+const toastVariants = cva(cn("group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden", "rounded-lg border p-4 pe-10 shadow-lg", "[--slide-x:calc(100%+1rem)]", "data-[state=closed]:animate-float-out data-[state=open]:animate-slide-in", "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none", "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform", "data-[swipe=end]:animate-toast-swipe-out"), {
 	variants: { variant: {
 		default: "border-border bg-popover text-popover-foreground",
 		success: "border-success/30 bg-popover text-popover-foreground [&_svg]:text-success",
@@ -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, {
@@ -58,7 +68,7 @@ function ToastClose({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toast.Close, {
 		"data-slot": "toast-close",
 		"aria-label": "Dismiss",
-		className: cn("absolute top-3 right-3 grid size-6 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", focusRing, className),
+		className: cn("absolute end-3 top-3 grid size-6 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", focusRing, className),
 		...props,
 		children: /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",
@@ -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 pr-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 top-3 right-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\nconst viewportPositions: Record<ToastPosition, string> = {\n  \"top-left\": \"top-0 left-0 sm:flex-col-reverse\",\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\",\n  \"bottom-left\": \"bottom-0 left-0\",\n  \"bottom-center\": \"bottom-0 left-1/2 -translate-x-1/2\",\n  \"bottom-right\": \"bottom-0 right-0\",\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":"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"}
+{"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"}

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

@@ -0,0 +1,284 @@
+"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, useRef, useState } from "react";
+import { MotionConfig, animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform, useVelocity } from "motion/react";
+//#region src/components/todo-tower/todo-tower.tsx
+const PREFIX = "dowel-todo-tower";
+const STYLES = `
+@keyframes ${PREFIX}-drop{from{transform:translateY(-120%);opacity:0}}
+[data-slot=todo-tower-card]{animation:${PREFIX}-drop calc(420ms * var(--motion-scale,1)) cubic-bezier(.5,0,.6,1.25) both;animation-delay:calc(var(--todo-tower-order,0) * 60ms * var(--motion-scale,1))}
+`;
+/** Height of one brick, and the gap-free pitch of the stack, in px. */
+const PITCH = 46;
+/** Milliseconds between ticking a card and removing it: the flick. */
+const EXIT = 350;
+const todoTowerVariants = cva("relative w-[18.75rem] max-w-full touch-none select-none", {
+	variants: {
+		/** Card surface — the source's Fill switch. */
+		fill: {
+			light: "[--todo-tower-card:var(--color-card)] [--todo-tower-ink:var(--color-card-foreground)]",
+			dark: "[--todo-tower-card:var(--color-foreground)] [--todo-tower-ink:var(--color-background)]"
+		},
+		/** A hairline ring on each card — the source's Stroke switch. */
+		stroke: {
+			true: "[&_[data-slot=todo-tower-card]]:shadow-[inset_0_0_0_1px_var(--color-border)]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		fill: "light",
+		stroke: false
+	}
+});
+/** A stable, id-derived horizontal nudge of ±6–15px, so the pile looks hand-stacked. */
+function nudge(id) {
+	let hash = 0;
+	for (const char of id) hash = hash * 31 + char.charCodeAt(0) | 0;
+	const magnitude = 6 + Math.abs(hash) % 10;
+	return hash % 2 === 0 ? magnitude : -magnitude;
+}
+function reducedMotion() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Row({ item, index, count, leader, leaderIndex, out, still, gravity, slip, checkLabel, onCheck, onGrab }) {
+	const follows = leader !== null && leaderIndex !== null && index <= leaderIndex;
+	const lag = follows ? leaderIndex - index : 0;
+	const targetX = useMotionValue(0);
+	const targetY = useMotionValue(0);
+	const stiffness = lag === 0 ? 2400 : (200 + gravity * 6) / (1 + lag * .6);
+	const damping = lag === 0 ? 80 : 8 + (100 - slip) * .25;
+	const x = useSpring(targetX, {
+		stiffness,
+		damping
+	});
+	const y = useSpring(targetY, {
+		stiffness,
+		damping
+	});
+	const velocity = useVelocity(x);
+	const rotate = useTransform(velocity, (v) => still ? 0 : Math.max(-35, Math.min(35, v * .02 * (1 + lag * .4))));
+	useMotionValueEvent(leader?.x ?? targetX, "change", (value) => {
+		if (follows && leader) targetX.set(value);
+	});
+	useMotionValueEvent(leader?.y ?? targetY, "change", (value) => {
+		if (follows && leader) targetY.set(value);
+	});
+	useEffect(() => {
+		if (follows) return;
+		targetX.set(0);
+		targetY.set(0);
+	}, [
+		follows,
+		targetX,
+		targetY
+	]);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "todo-tower-row",
+		"data-held": leaderIndex === index || void 0,
+		className: cn("absolute bottom-0 left-1/2 -translate-x-1/2 translate-x-[calc(-50%+var(--todo-tower-x))] translate-y-[var(--todo-tower-y)]", "transition-[translate] duration-[var(--duration-slow)] ease-[cubic-bezier(0.5,0,0.6,1.3)]", "data-[held]:z-3"),
+		style: {
+			"--todo-tower-x": `${String(nudge(item.id))}px`,
+			"--todo-tower-y": `${String(-(count - 1 - index) * PITCH)}px`
+		},
+		onPointerDown: (event) => {
+			onGrab(index, event);
+		},
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "todo-tower-body",
+			style: {
+				x,
+				y,
+				rotate
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "todo-tower-card",
+				"data-out": out || void 0,
+				className: cn("flex h-[2.875rem] w-[12.875rem] cursor-grab items-center gap-2.5 rounded-[0.6875rem] px-3.5", "bg-[var(--todo-tower-card)] text-[var(--todo-tower-ink)]", "in-data-[held]:-translate-y-0.5 in-data-[held]:cursor-grabbing", "transition-[translate,rotate,opacity] duration-[var(--duration-slow),var(--duration-slow),var(--duration-normal)] ease-[var(--ease-in-quint)]", "data-[out]:translate-x-[118%] data-[out]:rotate-5 data-[out]:opacity-0 data-[out]:delay-[var(--duration-instant)]"),
+				style: { "--todo-tower-order": count - 1 - index },
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": checkLabel(item.label),
+					"aria-pressed": out,
+					"data-slot": "todo-tower-check",
+					className: cn("grid size-[1.1875rem] shrink-0 place-items-center rounded-md", "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_22%,transparent)] hover:shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_38%,transparent)]", "aria-pressed:bg-[var(--todo-tower-ink)] aria-pressed:text-[var(--todo-tower-card)] aria-pressed:shadow-none", focusRing),
+					onPointerDown: (event) => {
+						event.stopPropagation();
+					},
+					onClick: () => {
+						onCheck(item.id);
+					},
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "3.4",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						className: cn("size-3", !out && "invisible"),
+						children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					"data-slot": "todo-tower-text",
+					className: cn("truncate text-[0.9375rem] leading-none tracking-[-0.005em] opacity-80", out && "line-through opacity-45"),
+					children: item.label
+				})]
+			})
+		})
+	});
+}
+/** A stack of to-do cards: tick one and it flicks away; grab one and the stack sways. */
+function TodoTower({ className, fill, stroke, items: itemsProp, defaultItems = [], onItemsChange, onComplete, loop = false, gravity = 50, slip = 45, label = "To-dos", checkLabel = (text) => `Done: ${text}`, completedLabel = (text) => `Completed: ${text}`, style, ...props }) {
+	const [inner, setInner] = useState(defaultItems);
+	const items = itemsProp ?? inner;
+	const [round, setRound] = useState(0);
+	const [leaving, setLeaving] = useState([]);
+	const [leaderIndex, setLeaderIndex] = useState(null);
+	const [announced, setAnnounced] = useState("");
+	const reduced = useReducedMotion() ?? false;
+	const leaderX = useMotionValue(0);
+	const leaderY = useMotionValue(0);
+	const grab = useRef(null);
+	const listRef = useRef(null);
+	const timers = useRef([]);
+	const focusIndex = useRef(null);
+	useEffect(() => () => {
+		for (const timer of timers.current) clearTimeout(timer);
+	}, []);
+	useEffect(() => {
+		const index = focusIndex.current;
+		if (index === null) return;
+		focusIndex.current = null;
+		const checks = listRef.current?.querySelectorAll("[data-slot=todo-tower-check]");
+		const target = checks?.[Math.min(index, checks.length - 1)];
+		if (target) target.focus();
+		else listRef.current?.focus();
+	});
+	function remove(id) {
+		const index = items.findIndex((item) => item.id === id);
+		const item = items[index];
+		setLeaving((current) => current.filter((value) => value !== id));
+		if (!item) return;
+		const next = items.filter((value) => value.id !== id);
+		focusIndex.current = index;
+		onComplete?.(item);
+		onItemsChange?.(next);
+		setAnnounced(completedLabel(item.label));
+		if (itemsProp !== void 0) return;
+		if (next.length === 0 && loop) {
+			setInner(defaultItems);
+			setRound((value) => value + 1);
+		} else setInner(next);
+	}
+	function check(id) {
+		if (leaving.includes(id)) return;
+		if (reducedMotion()) {
+			remove(id);
+			return;
+		}
+		setLeaving((current) => [...current, id]);
+		timers.current.push(setTimeout(() => {
+			remove(id);
+		}, EXIT));
+	}
+	function handleGrab(index, event) {
+		if (event.button !== 0 || reduced) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		grab.current = {
+			id: event.pointerId,
+			x: event.clientX,
+			y: event.clientY
+		};
+		leaderX.jump(0);
+		leaderY.jump(0);
+		setLeaderIndex(index);
+	}
+	function handleMove(event) {
+		const current = grab.current;
+		if (!current || current.id !== event.pointerId) return;
+		leaderX.set(event.clientX - current.x);
+		leaderY.set(event.clientY - current.y);
+	}
+	function handleRelease(event) {
+		const current = grab.current;
+		if (!current || current.id !== event.pointerId) return;
+		grab.current = null;
+		const options = {
+			type: "spring",
+			stiffness: 180 + gravity * 3,
+			damping: 18
+		};
+		Promise.all([animate(leaderX, 0, {
+			...options,
+			velocity: leaderX.getVelocity()
+		}), animate(leaderY, 0, {
+			...options,
+			velocity: leaderY.getVelocity()
+		})]).then(() => {
+			if (!grab.current) setLeaderIndex(null);
+		});
+	}
+	const leader = leaderIndex === null ? null : {
+		index: leaderIndex,
+		x: leaderX,
+		y: leaderY
+	};
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "todo-tower",
+			className: cn(todoTowerVariants({
+				fill,
+				stroke
+			}), className),
+			style: {
+				height: Math.max(1, items.length) * PITCH + 20,
+				...style
+			},
+			onPointerMove: handleMove,
+			onPointerUp: handleRelease,
+			onPointerCancel: handleRelease,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("style", {
+					href: PREFIX,
+					precedence: "dowel",
+					children: STYLES
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					ref: listRef,
+					"aria-label": label,
+					tabIndex: -1,
+					className: "absolute inset-0 outline-none",
+					children: items.map((item, index) => /* @__PURE__ */ jsx(Row, {
+						item,
+						index,
+						count: items.length,
+						leader,
+						leaderIndex,
+						out: leaving.includes(item.id),
+						still: reduced,
+						gravity,
+						slip,
+						checkLabel,
+						onCheck: check,
+						onGrab: handleGrab
+					}, item.id))
+				}, round),
+				/* @__PURE__ */ jsx("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: "sr-only",
+					children: announced
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TodoTower, todoTowerVariants };
+
+//# sourceMappingURL=todo-tower.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"todo-tower.js","names":[],"sources":["../../../src/components/todo-tower/todo-tower.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Todo tower (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  MotionConfig,\n  animate,\n  motion,\n  useMotionValue,\n  useMotionValueEvent,\n  useReducedMotion,\n  useSpring,\n  useTransform,\n  useVelocity,\n  type MotionValue,\n} from \"motion/react\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A to-do list stacked like bricks on the floor. Ticking a card flicks it off\n * the side and the cards above drop into the gap; grabbing a card drags it,\n * and the cards stacked on top of it sway after it on springs.\n *\n * Deviation from the source: bencho runs a full rigid-body simulation in which\n * cards collide and topple off each other. This keeps the parts of that which\n * carry meaning — the flick, the drop, the sway of a dragged stack — without a\n * physics engine: each card above the one held follows it on a spring that\n * gets looser the higher it sits, and tilts with its own velocity. That is\n * what `motion` is for here (springs carrying a drag's velocity); the flick\n * and the drop are CSS. Dragging is decoration, so it has no keyboard\n * equivalent: every card's \"Done\" is a real button, and that is the action.\n *\n * Added: completion is announced politely, and focus moves to the card that\n * drops into the gap. Under reduced motion there is no sway, flick or drop.\n */\n\nconst PREFIX = \"dowel-todo-tower\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-drop{from{transform:translateY(-120%);opacity:0}}\n[data-slot=todo-tower-card]{animation:${PREFIX}-drop calc(420ms * var(--motion-scale,1)) cubic-bezier(.5,0,.6,1.25) both;animation-delay:calc(var(--todo-tower-order,0) * 60ms * var(--motion-scale,1))}\n`;\n\n/** Height of one brick, and the gap-free pitch of the stack, in px. */\nconst PITCH = 46;\n/** Milliseconds between ticking a card and removing it: the flick. */\nconst EXIT = 350;\n\nconst todoTowerVariants = cva(\"relative w-[18.75rem] max-w-full touch-none select-none\", {\n  variants: {\n    /** Card surface — the source's Fill switch. */\n    fill: {\n      light:\n        \"[--todo-tower-card:var(--color-card)] [--todo-tower-ink:var(--color-card-foreground)]\",\n      dark: \"[--todo-tower-card:var(--color-foreground)] [--todo-tower-ink:var(--color-background)]\",\n    },\n    /** A hairline ring on each card — the source's Stroke switch. */\n    stroke: {\n      true: \"[&_[data-slot=todo-tower-card]]:shadow-[inset_0_0_0_1px_var(--color-border)]\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { fill: \"light\", stroke: false },\n});\n\nexport interface TodoItem {\n  id: string;\n  label: string;\n}\n\n/** A stable, id-derived horizontal nudge of ±6–15px, so the pile looks hand-stacked. */\nfunction nudge(id: string): number {\n  let hash = 0;\n  for (const char of id) hash = (hash * 31 + char.charCodeAt(0)) | 0;\n  const magnitude = 6 + (Math.abs(hash) % 10);\n  return hash % 2 === 0 ? magnitude : -magnitude;\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\ninterface Leader {\n  index: number;\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n}\n\ninterface RowProps {\n  item: TodoItem;\n  index: number;\n  count: number;\n  leader: Leader | null;\n  leaderIndex: number | null;\n  out: boolean;\n  still: boolean;\n  gravity: number;\n  slip: number;\n  checkLabel: (label: string) => string;\n  onCheck: (id: string) => void;\n  onGrab: (index: number, event: PointerEvent<HTMLLIElement>) => void;\n}\n\nfunction Row({\n  item,\n  index,\n  count,\n  leader,\n  leaderIndex,\n  out,\n  still,\n  gravity,\n  slip,\n  checkLabel,\n  onCheck,\n  onGrab,\n}: RowProps) {\n  const follows = leader !== null && leaderIndex !== null && index <= leaderIndex;\n  const lag = follows ? leaderIndex - index : 0;\n  const targetX = useMotionValue(0);\n  const targetY = useMotionValue(0);\n  // The held card tracks the pointer almost rigidly; each card above it is\n  // looser than the one below, so a tall stack sways like one.\n  const stiffness = lag === 0 ? 2400 : (200 + gravity * 6) / (1 + lag * 0.6);\n  const damping = lag === 0 ? 80 : 8 + (100 - slip) * 0.25;\n  const x = useSpring(targetX, { stiffness, damping });\n  const y = useSpring(targetY, { stiffness, damping });\n  const velocity = useVelocity(x);\n  const rotate = useTransform(velocity, (v) =>\n    still ? 0 : Math.max(-35, Math.min(35, v * 0.02 * (1 + lag * 0.4))),\n  );\n\n  useMotionValueEvent(leader?.x ?? targetX, \"change\", (value) => {\n    if (follows && leader) targetX.set(value);\n  });\n  useMotionValueEvent(leader?.y ?? targetY, \"change\", (value) => {\n    if (follows && leader) targetY.set(value);\n  });\n\n  useEffect(() => {\n    if (follows) return;\n    targetX.set(0);\n    targetY.set(0);\n  }, [follows, targetX, targetY]);\n\n  return (\n    <li\n      data-slot=\"todo-tower-row\"\n      data-held={leaderIndex === index || undefined}\n      className={cn(\n        \"absolute bottom-0 left-1/2 -translate-x-1/2 translate-x-[calc(-50%+var(--todo-tower-x))] translate-y-[var(--todo-tower-y)]\",\n        \"transition-[translate] duration-[var(--duration-slow)] ease-[cubic-bezier(0.5,0,0.6,1.3)]\",\n        \"data-[held]:z-3\",\n      )}\n      style={\n        {\n          \"--todo-tower-x\": `${String(nudge(item.id))}px`,\n          \"--todo-tower-y\": `${String(-(count - 1 - index) * PITCH)}px`,\n        } as CSSProperties\n      }\n      onPointerDown={(event) => {\n        onGrab(index, event);\n      }}\n    >\n      <motion.div data-slot=\"todo-tower-body\" style={{ x, y, rotate }}>\n        <div\n          data-slot=\"todo-tower-card\"\n          data-out={out || undefined}\n          className={cn(\n            \"flex h-[2.875rem] w-[12.875rem] cursor-grab items-center gap-2.5 rounded-[0.6875rem] px-3.5\",\n            \"bg-[var(--todo-tower-card)] text-[var(--todo-tower-ink)]\",\n            \"in-data-[held]:-translate-y-0.5 in-data-[held]:cursor-grabbing\",\n            \"transition-[translate,rotate,opacity] duration-[var(--duration-slow),var(--duration-slow),var(--duration-normal)] ease-[var(--ease-in-quint)]\",\n            \"data-[out]:translate-x-[118%] data-[out]:rotate-5 data-[out]:opacity-0 data-[out]:delay-[var(--duration-instant)]\",\n          )}\n          style={{ \"--todo-tower-order\": count - 1 - index } as CSSProperties}\n        >\n          <button\n            type=\"button\"\n            aria-label={checkLabel(item.label)}\n            aria-pressed={out}\n            data-slot=\"todo-tower-check\"\n            className={cn(\n              \"grid size-[1.1875rem] shrink-0 place-items-center rounded-md\",\n              \"shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_22%,transparent)] hover:shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,currentColor_38%,transparent)]\",\n              \"aria-pressed:bg-[var(--todo-tower-ink)] aria-pressed:text-[var(--todo-tower-card)] aria-pressed:shadow-none\",\n              focusRing,\n            )}\n            onPointerDown={(event) => {\n              // The check is a button, not a handle.\n              event.stopPropagation();\n            }}\n            onClick={() => {\n              onCheck(item.id);\n            }}\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3.4\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n              className={cn(\"size-3\", !out && \"invisible\")}\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </button>\n          <span\n            data-slot=\"todo-tower-text\"\n            className={cn(\n              \"truncate text-[0.9375rem] leading-none tracking-[-0.005em] opacity-80\",\n              out && \"line-through opacity-45\",\n            )}\n          >\n            {item.label}\n          </span>\n        </div>\n      </motion.div>\n    </li>\n  );\n}\n\nexport interface TodoTowerProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof todoTowerVariants> {\n  /** Controlled to-dos, top of the stack first. */\n  items?: TodoItem[];\n  /** Initial to-dos when uncontrolled, top of the stack first. */\n  defaultItems?: TodoItem[];\n  /** Called with the remaining to-dos after one is completed. */\n  onItemsChange?: (items: TodoItem[]) => void;\n  /** Called with the to-do that was completed. */\n  onComplete?: (item: TodoItem) => void;\n  /** Re-drop the whole stack once the last card is done (uncontrolled only). */\n  loop?: boolean;\n  /** How hard the stack pulls back together, 0–100. */\n  gravity?: number;\n  /** How loosely the cards above a held one sway, 0–100. */\n  slip?: number;\n  /** The list's accessible name. */\n  label?: string;\n  /** The check button's name for a to-do. */\n  checkLabel?: (label: string) => string;\n  /** Announced when a to-do is completed. */\n  completedLabel?: (label: string) => string;\n}\n\n/** A stack of to-do cards: tick one and it flicks away; grab one and the stack sways. */\nexport function TodoTower({\n  className,\n  fill,\n  stroke,\n  items: itemsProp,\n  defaultItems = [],\n  onItemsChange,\n  onComplete,\n  loop = false,\n  gravity = 50,\n  slip = 45,\n  label = \"To-dos\",\n  checkLabel = (text) => `Done: ${text}`,\n  completedLabel = (text) => `Completed: ${text}`,\n  style,\n  ...props\n}: TodoTowerProps) {\n  const [inner, setInner] = useState(defaultItems);\n  const items = itemsProp ?? inner;\n  const [round, setRound] = useState(0);\n  const [leaving, setLeaving] = useState<string[]>([]);\n  const [leaderIndex, setLeaderIndex] = useState<number | null>(null);\n  const [announced, setAnnounced] = useState(\"\");\n  const reduced = useReducedMotion() ?? false;\n  const leaderX = useMotionValue(0);\n  const leaderY = useMotionValue(0);\n  const grab = useRef<{ id: number; x: number; y: number } | null>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);\n  const focusIndex = useRef<number | null>(null);\n\n  useEffect(\n    () => () => {\n      for (const timer of timers.current) clearTimeout(timer);\n    },\n    [],\n  );\n\n  // After a card leaves, focus the one that dropped into its place.\n  useEffect(() => {\n    const index = focusIndex.current;\n    if (index === null) return;\n    focusIndex.current = null;\n    const checks = listRef.current?.querySelectorAll<HTMLElement>(\n      \"[data-slot=todo-tower-check]\",\n    );\n    const target = checks?.[Math.min(index, checks.length - 1)];\n    if (target) target.focus();\n    else listRef.current?.focus();\n  });\n\n  function remove(id: string) {\n    const index = items.findIndex((item) => item.id === id);\n    const item = items[index];\n    setLeaving((current) => current.filter((value) => value !== id));\n    if (!item) return;\n    const next = items.filter((value) => value.id !== id);\n    focusIndex.current = index;\n    onComplete?.(item);\n    onItemsChange?.(next);\n    setAnnounced(completedLabel(item.label));\n    if (itemsProp !== undefined) return;\n    if (next.length === 0 && loop) {\n      setInner(defaultItems);\n      setRound((value) => value + 1);\n    } else {\n      setInner(next);\n    }\n  }\n\n  function check(id: string) {\n    if (leaving.includes(id)) return;\n    if (reducedMotion()) {\n      remove(id);\n      return;\n    }\n    setLeaving((current) => [...current, id]);\n    timers.current.push(\n      setTimeout(() => {\n        remove(id);\n      }, EXIT),\n    );\n  }\n\n  function handleGrab(index: number, event: PointerEvent<HTMLLIElement>) {\n    if (event.button !== 0 || reduced) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    grab.current = { id: event.pointerId, x: event.clientX, y: event.clientY };\n    leaderX.jump(0);\n    leaderY.jump(0);\n    setLeaderIndex(index);\n  }\n\n  function handleMove(event: PointerEvent<HTMLDivElement>) {\n    const current = grab.current;\n    if (!current || current.id !== event.pointerId) return;\n    leaderX.set(event.clientX - current.x);\n    leaderY.set(event.clientY - current.y);\n  }\n\n  function handleRelease(event: PointerEvent<HTMLDivElement>) {\n    const current = grab.current;\n    if (!current || current.id !== event.pointerId) return;\n    grab.current = null;\n    // Thrown: the stack springs home carrying the throw's velocity.\n    const options = { type: \"spring\", stiffness: 180 + gravity * 3, damping: 18 } as const;\n    void Promise.all([\n      animate(leaderX, 0, { ...options, velocity: leaderX.getVelocity() }),\n      animate(leaderY, 0, { ...options, velocity: leaderY.getVelocity() }),\n    ]).then(() => {\n      if (!grab.current) setLeaderIndex(null);\n    });\n  }\n\n  const leader: Leader | null =\n    leaderIndex === null ? null : { index: leaderIndex, x: leaderX, y: leaderY };\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        data-slot=\"todo-tower\"\n        className={cn(todoTowerVariants({ fill, stroke }), className)}\n        style={{ height: Math.max(1, items.length) * PITCH + 20, ...style }}\n        onPointerMove={handleMove}\n        onPointerUp={handleRelease}\n        onPointerCancel={handleRelease}\n        {...props}\n      >\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n        <ul\n          key={round}\n          ref={listRef}\n          aria-label={label}\n          tabIndex={-1}\n          className=\"absolute inset-0 outline-none\"\n        >\n          {items.map((item, index) => (\n            <Row\n              key={item.id}\n              item={item}\n              index={index}\n              count={items.length}\n              leader={leader}\n              leaderIndex={leaderIndex}\n              out={leaving.includes(item.id)}\n              still={reduced}\n              gravity={gravity}\n              slip={slip}\n              checkLabel={checkLabel}\n              onCheck={check}\n              onGrab={handleGrab}\n            />\n          ))}\n        </ul>\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {announced}\n        </span>\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport { todoTowerVariants };\n"],"mappings":"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"}

package/dist/components/tooltip/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["tooltip.tsx"],
-	a11y: "Opens on focus as well as hover, and Escape dismisses it. Never put essential or interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an icon-only button, prefer aria-label for the name and use the tooltip only to repeat it visually."
+	a11y: "Opens on focus as well as hover, and Escape dismisses it. Never put essential or interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an icon-only button, prefer aria-label for the name and use the tooltip only to repeat it visually. The opening pop is decoration and stops under reduced motion."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tooltip/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tooltip\",\n  title: \"Tooltip\",\n  description: \"A short label revealed on hover or keyboard focus.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"tooltip.tsx\"],\n  a11y:\n    \"Opens on focus as well as hover, and Escape dismisses it. Never put essential or \" +\n    \"interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an \" +\n    \"icon-only button, prefer aria-label for the name and use the tooltip only to repeat it \" +\n    \"visually.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tooltip/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tooltip\",\n  title: \"Tooltip\",\n  description: \"A short label revealed on hover or keyboard focus.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"tooltip.tsx\"],\n  a11y:\n    \"Opens on focus as well as hover, and Escape dismisses it. Never put essential or \" +\n    \"interactive content in a tooltip: it is unreachable on touch and vanishes on blur. For an \" +\n    \"icon-only button, prefer aria-label for the name and use the tooltip only to repeat it \" +\n    \"visually. The opening pop is decoration and stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAIJ,CAAC"}

package/dist/components/tooltip/tooltip.d.ts

@@ -8,6 +8,10 @@ import { ComponentPropsWithRef } from "react";
  * never be the only place information appears, because it is unreachable on
  * touch devices and disappears the moment attention moves. If the content is
  * essential, put it in the interface.
+ *
+ * It pops toward the side it opens on: a few pixels of travel away from the
+ * trigger plus a slight overshoot in scale. The instant re-open when moving
+ * between tooltips is not animated, and the pop stops under reduced motion.
  */
 declare const TooltipProvider: import("react").FC<Tooltip.TooltipProviderProps>;
 declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Tooltip.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"mappings":";;;;;;;;;;;cAea,iCAAe,GAAA,QAAA;cACf,gCAAc,0BAAA,QAAA,sCAAA,cAAA;KAEf,eAAe,6BAA6B,QAAiB;;;;;iBAMzD,YAAU,aAAa,SAAS,+BAAY,IAAA;KAQhD,sBAAsB,6BAA6B,QAAiB;iBAEhE,iBACd,WACA,YACA,aACG,SACF,sCAAmB,IAAA"}
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"mappings":";;;;;;;;;;;;;;;cAoBa,iCAAe,GAAA,QAAA;cACf,gCAAc,0BAAA,QAAA,sCAAA,cAAA;KAEf,eAAe,6BAA6B,QAAiB;;;;;iBAMzD,YAAU,aAAa,SAAS,+BAAY,IAAA;KAoBhD,sBAAsB,6BAA6B,QAAiB;iBAEhE,iBACd,WACA,YACA,aACG,SACF,sCAAmB,IAAA"}