@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/island/island.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+// Ported from SmoothUI Dynamic Island (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+ * A pill that reshapes itself around whatever it is showing: an idle glyph,
+ * an incoming call, a timer, a player. The source drove this with motion's
+ * `layout` spring; here the pill's size is measured (ResizeObserver) and the
+ * width/height change is a CSS transition on an overshooting curve, which is
+ * the same bounce without a JavaScript animation loop. Any change of size
+ * animates — a new view *or* content growing inside the current one — because
+ * the measurement does not care why the content changed.
+ *
+ * The incoming view blurs and scales in through a hoisted keyframe. Both stop
+ * under reduced motion: the pill simply is its new size.
+ */
+
+const STYLES = `
+@keyframes dowel-island-enter {
+  from { opacity: 0; scale: 0.9; filter: blur(5px); }
+  to { opacity: 1; scale: 1; filter: blur(0); }
+}
+[data-slot="island-content"] {
+  animation: dowel-island-enter calc(300ms * var(--motion-scale)) var(--ease-out-quint)
+    calc(50ms * var(--motion-scale)) both;
+}
+`;
+
+const islandVariants = cva(
+  cn(
+    "relative inline-flex min-w-[6.25rem] items-center justify-center overflow-hidden rounded-[2rem]",
+    "transition-[width,height] duration-[var(--duration-slow)]",
+  ),
+  {
+    variants: {
+      tone: {
+        /** The source's black pill: the inverse of the page. */
+        inverted: "bg-foreground text-background",
+        card: "border border-border bg-card text-card-foreground shadow-md",
+        primary: "bg-primary text-primary-foreground",
+      },
+    },
+    defaultVariants: {
+      tone: "inverted",
+    },
+  },
+);
+
+export type IslandBounce = number | ((from: string, to: string) => number);
+
+export interface IslandProps<V extends string = string>
+  extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof islandVariants> {
+  /** The view currently shown — a key of `views`. */
+  view: V;
+  /** Content for each view, e.g. `{ compact: …, expanded: … }`. */
+  views: Record<V, ReactNode>;
+  /**
+   * How far the pill overshoots its new size, 0 (none) to 1. A function gets
+   * the previous and next view, so each transition can have its own feel.
+   */
+  bounce?: IslandBounce;
+  /**
+   * Announce each new view to screen readers. Off by default: an island that
+   * announces every idle tick trains people to ignore it.
+   */
+  live?: "off" | "polite" | "assertive";
+}
+
+/** Maps a 0–1 bounce onto the overshoot of a cubic-bezier, clamped. */
+export function islandEasing(bounce: number): string {
+  const overshoot = 1 + Math.min(1, Math.max(0, bounce)) * 0.8;
+  return `cubic-bezier(0.34, ${overshoot.toFixed(2)}, 0.64, 1)`;
+}
+
+/** The content box's size, or null until it has been measured. */
+function useMeasuredSize(ref: RefObject<HTMLElement | null>) {
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => {
+      const width = element.offsetWidth;
+      const height = element.offsetHeight;
+      if (!width || !height) return;
+      setSize((previous) =>
+        previous?.width === width && previous.height === height ? previous : { width, height },
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return size;
+}
+
+/** A pill that morphs between views, resizing around its content. */
+export function Island<V extends string>({
+  className,
+  style,
+  view,
+  views,
+  bounce = 0.5,
+  live = "off",
+  tone,
+  ...props
+}: IslandProps<V>) {
+  const measureRef = useRef<HTMLDivElement>(null);
+  const size = useMeasuredSize(measureRef);
+
+  // The view we are coming from, captured when `view` changes, so a bounce
+  // function can tell one transition from another.
+  const [shown, setShown] = useState<V>(view);
+  const [from, setFrom] = useState<V>(view);
+  if (shown !== view) {
+    setFrom(shown);
+    setShown(view);
+  }
+
+  const amount = typeof bounce === "function" ? bounce(from, view) : bounce;
+
+  return (
+    <div
+      data-slot="island"
+      data-view={view}
+      aria-live={live === "off" ? undefined : live}
+      aria-atomic={live === "off" ? undefined : true}
+      className={cn(islandVariants({ tone }), className)}
+      style={{
+        width: size?.width,
+        height: size?.height,
+        transitionTimingFunction: islandEasing(amount),
+        ...style,
+      }}
+      {...props}
+    >
+      <style href="dowel-island" precedence="dowel">
+        {STYLES}
+      </style>
+      <div ref={measureRef} data-slot="island-measure" className="w-max shrink-0">
+        <div key={view} data-slot="island-content">
+          {views[view]}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { islandVariants };

package/src/components/island/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "island",
+  title: "Island",
+  description:
+    "A pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: [],
+  files: ["island.tsx"],
+  a11y:
+    "The island is a container: the controls inside a view (play, skip, answer) are ordinary buttons and must be " +
+    'named by the consumer. Pass `live="polite"` to announce each new view — it is off by default, since an ' +
+    "island that announces every change is noise. The resize and the incoming view's blur stop under reduced " +
+    "motion; the pill takes its new size immediately.",
+});

package/src/components/liquid-toggle/index.ts

@@ -0,0 +1 @@
+export { LiquidToggle, liquidToggleVariants, type LiquidToggleProps } from "./liquid-toggle";

package/src/components/liquid-toggle/liquid-toggle.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+// Ported from bencho Liquid toggle (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  MotionConfig,
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useTransform,
+  useVelocity,
+  type MotionStyle,
+} from "motion/react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type MouseEvent,
+  type PointerEvent,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A switch whose knob behaves like a droplet: it stretches along its travel
+ * and squashes across it in proportion to its speed.
+ *
+ * Built on the Radix switch primitive, like Dowel's Switch, so it has the
+ * switch role, Space/Enter, a native click, and a hidden input inside forms.
+ * Dowel's Switch cannot take this knob — its thumb is fixed — so this composes
+ * the same primitive instead.
+ *
+ * `motion` is used for one thing CSS cannot do: the knob can be dragged, and on
+ * release its spring has to carry the drag's velocity, and the squash is read
+ * off that velocity every frame. The knob's position is a single 0–1 value
+ * written to a CSS variable; logical `start` and an RTL-negated translate make
+ * "on" the inline end in both directions. Under reduced motion the knob jumps
+ * and never deforms.
+ */
+
+const liquidToggleVariants = cva(
+  cn(
+    "relative inline-flex shrink-0 touch-none items-center rounded-full select-none",
+    "bg-card data-[state=checked]:bg-foreground",
+    "transition-[background-color,box-shadow] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
+    "disabled:cursor-not-allowed disabled:opacity-55",
+    focusRing,
+  ),
+  {
+    variants: {
+      size: {
+        sm: "h-6 w-11 [--liquid-toggle-inset:0.1875rem] [--liquid-toggle-knob:1.125rem] [--liquid-toggle-travel:1.25rem]",
+        md: "h-[2.875rem] w-[5.75rem] [--liquid-toggle-inset:0.3125rem] [--liquid-toggle-knob:2.25rem] [--liquid-toggle-travel:2.875rem]",
+      },
+      /** A hairline ring on the track — the source's Stroke switch. */
+      stroke: {
+        true: "shadow-[inset_0_0_0_1px_var(--color-border)] data-[state=checked]:shadow-none",
+        false: "",
+      },
+    },
+    defaultVariants: { size: "md", stroke: true },
+  },
+);
+
+export interface LiquidToggleProps
+  extends
+    Omit<ComponentPropsWithRef<typeof SwitchPrimitive.Root>, "children">,
+    VariantProps<typeof liquidToggleVariants> {
+  /** Spring stiffness, 0–100: how quickly the knob crosses. */
+  speed?: number;
+  /** Velocity squash and stretch, 0–100. 0 keeps the knob a rigid circle. */
+  stretch?: number;
+}
+
+/** Pixels the pointer must travel before a press becomes a drag. */
+const DRAG_SLOP = 3;
+
+/** A droplet switch: the knob stretches with its speed and can be dragged across. */
+export function LiquidToggle({
+  className,
+  size,
+  stroke,
+  speed = 50,
+  stretch = 36,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onClick,
+  ...props
+}: LiquidToggleProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const checked = checkedProp ?? uncontrolled;
+  const reduced = useReducedMotion() ?? false;
+  const knobRef = useRef<HTMLSpanElement | null>(null);
+  const drag = useRef<{ id: number; x: number; from: number; moved: boolean } | null>(null);
+  const suppressClick = useRef(false);
+
+  const position = useMotionValue(checked ? 1 : 0);
+  const velocity = useVelocity(position);
+  const gain = (stretch / 36) * 0.016;
+  const limit = 1 + (stretch / 100) * 0.4;
+  const scaleX = useTransform(velocity, (v) =>
+    reduced ? 1 : Math.min(limit, 1 + Math.abs(v) * gain),
+  );
+  const scaleY = useTransform(scaleX, (x) => 2 - x);
+
+  const stiffness = 150 + speed * 4;
+  const damping = 2 * Math.sqrt(stiffness) * 0.85;
+
+  function settle(target: number) {
+    if (reduced) {
+      position.jump(target);
+      return;
+    }
+    void animate(position, target, {
+      type: "spring",
+      stiffness,
+      damping,
+      velocity: position.getVelocity(),
+    });
+  }
+
+  // Any change of state — click, key, drag release or the controlled prop —
+  // springs the knob to its side, carrying whatever velocity it already has.
+  useEffect(() => {
+    if (drag.current) return;
+    const target = checked ? 1 : 0;
+    if (position.get() === target) return;
+    if (reduced) {
+      position.jump(target);
+      return;
+    }
+    const controls = animate(position, target, {
+      type: "spring",
+      stiffness,
+      damping,
+      velocity: position.getVelocity(),
+    });
+    return () => {
+      controls.stop();
+    };
+  }, [checked, reduced, stiffness, damping, position]);
+
+  function setChecked(next: boolean) {
+    if (checkedProp === undefined) setUncontrolled(next);
+    onCheckedChange?.(next);
+  }
+
+  /** Pixels of travel between the two sides, measured from the rendered track. */
+  function travel(track: HTMLElement, rtl: boolean): number {
+    const knob = knobRef.current;
+    if (!knob) return 0;
+    const width = track.clientWidth;
+    // offsetLeft ignores the translate, so it is the resting inset.
+    const inset = rtl ? width - knob.offsetLeft - knob.offsetWidth : knob.offsetLeft;
+    return width - knob.offsetWidth - 2 * inset;
+  }
+
+  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {
+    onPointerDown?.(event);
+    if (disabled || event.button !== 0) return;
+    drag.current = {
+      id: event.pointerId,
+      x: event.clientX,
+      from: position.get(),
+      moved: false,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+
+  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {
+    onPointerMove?.(event);
+    const current = drag.current;
+    if (!current || current.id !== event.pointerId) return;
+    const dx = event.clientX - current.x;
+    if (!current.moved && Math.abs(dx) < DRAG_SLOP) return;
+    current.moved = true;
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const distance = travel(event.currentTarget, rtl);
+    if (distance <= 0) return;
+    const next = current.from + (rtl ? -dx : dx) / distance;
+    position.set(Math.min(1, Math.max(0, next)));
+  }
+
+  function release(event: PointerEvent<HTMLButtonElement>, cancelled: boolean) {
+    const current = drag.current;
+    if (!current || current.id !== event.pointerId) return;
+    drag.current = null;
+    if (!current.moved) return;
+    // A drag is not a tap: the click that follows pointerup must not toggle.
+    suppressClick.current = !cancelled;
+    const next = position.get() >= 0.5;
+    if (next === checked) settle(next ? 1 : 0);
+    else setChecked(next);
+  }
+
+  function handleClick(event: MouseEvent<HTMLButtonElement>) {
+    onClick?.(event);
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      event.preventDefault();
+    }
+  }
+
+  return (
+    <MotionConfig reducedMotion="user">
+      <SwitchPrimitive.Root
+        data-slot="liquid-toggle"
+        checked={checked}
+        onCheckedChange={setChecked}
+        disabled={disabled}
+        className={cn(liquidToggleVariants({ size, stroke }), className)}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={(event) => {
+          onPointerUp?.(event);
+          release(event, false);
+        }}
+        onPointerCancel={(event) => {
+          onPointerCancel?.(event);
+          release(event, true);
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        <motion.span
+          ref={knobRef}
+          aria-hidden="true"
+          data-slot="liquid-toggle-knob"
+          data-state={checked ? "checked" : "unchecked"}
+          className={cn(
+            "pointer-events-none absolute start-[var(--liquid-toggle-inset)] top-1/2 size-[var(--liquid-toggle-knob)] rounded-full",
+            "translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel))] -translate-y-1/2",
+            "rtl:translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel)*-1)]",
+            "bg-[color-mix(in_oklab,var(--color-foreground)_19%,var(--color-card))] data-[state=checked]:bg-card",
+            "transition-[background-color] duration-[var(--duration-slow)]",
+          )}
+          style={{ scaleX, scaleY, ...({ "--liquid-toggle-p": position } as MotionStyle) }}
+        />
+      </SwitchPrimitive.Root>
+    </MotionConfig>
+  );
+}
+
+export { liquidToggleVariants };

package/src/components/liquid-toggle/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "liquid-toggle",
+  title: "Liquid Toggle",
+  description:
+    "A switch whose knob squashes like a droplet as it travels, and can be dragged across.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority", "motion", "radix-ui"],
+  registryDependencies: [],
+  files: ["liquid-toggle.tsx"],
+  a11y:
+    'Built on the Radix switch primitive: role="switch" with aria-checked, toggled by click, Space or Enter, ' +
+    "with a visible focus ring (missing in the source) and a hidden input inside forms. It has no visible " +
+    "label, so name it with aria-label or a <label>. Dragging the knob is a pointer convenience; releasing " +
+    "a drag never also counts as a click. Under reduced motion the knob jumps and never deforms.",
+});

package/src/components/log-viewer/log-viewer.tsx

@@ -203,7 +203,7 @@ export function LogViewer({
                   data-index={item.index}
                   data-slot="log-viewer-row"
                   data-level={line.level}
-                  className="absolute top-0 left-0 w-full"
+                  className="absolute start-0 top-0 w-full"
                   style={{ transform: `translateY(${String(item.start)}px)` }}
                 >
                   <LogViewerRow
@@ -296,7 +296,7 @@ export function LogViewerRow({ line, expanded = false, onToggle }: LogViewerRowP
       {expanded && line.fields ? (
         <dl
           data-slot="log-viewer-fields"
-          className="mt-1 mb-1 ml-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-l border-border pl-3"
+          className="ms-4 mt-1 mb-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-s border-border ps-3"
         >
           {Object.entries(line.fields).map(([key, value]) => (
             <div key={key} className="contents">

package/src/components/magnetic-button/index.ts

@@ -0,0 +1 @@
+export { MagneticButton, type MagneticButtonProps } from "./magnetic-button";

package/src/components/magnetic-button/magnetic-button.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+// Ported from SmoothUI Magnetic Button (MIT, © 2024 Eduardo Calvo) and amicro "Magnetic Field" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.
+import { useCallback, useEffect, useRef, type PointerEvent, type Ref } from "react";
+
+import { Button, type ButtonProps } from "@/components/button";
+import { cn } from "@/lib/utils";
+
+/*
+ * Both sources animate the offset with a JavaScript spring. Here the offset is
+ * written straight to the element's style from pointermove — no React state,
+ * so no re-render per move — and CSS transitions do the easing: a quick
+ * ease-out while following, an overshooting ease on release, which is what the
+ * springs were for.
+ *
+ * The transition lists name transform first so it can take its own timing:
+ * colours keep Button's fast ease, only the drift gets the slow overshoot.
+ */
+
+// Spelled out in full: Tailwind finds classes by scanning source text, so a
+// class assembled from template pieces would never be generated.
+const drift = cn(
+  "group/magnetic",
+  "transition-[transform,background-color,border-color,color,box-shadow]",
+  "duration-[var(--duration-slow),var(--duration-fast),var(--duration-fast),var(--duration-fast),var(--duration-fast)]",
+  "ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint),var(--ease-out-quint),var(--ease-out-quint)]",
+  "data-[magnetic=follow]:duration-[var(--duration-fast)] data-[magnetic=follow]:ease-[var(--ease-out-quint)]",
+);
+
+const contentDrift = cn(
+  "inline-flex items-center justify-center gap-[inherit]",
+  "transition-transform duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]",
+  "group-data-[magnetic=follow]/magnetic:duration-[var(--duration-fast)] group-data-[magnetic=follow]/magnetic:ease-[var(--ease-out-quint)]",
+);
+
+/** Pointers the effect never runs for: touch has no hover to follow. */
+function motionAllowed(pointerType: string): boolean {
+  if (pointerType === "touch") return false;
+  if (typeof window.matchMedia !== "function") return true;
+  return !(
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
+    window.matchMedia("(pointer: coarse)").matches
+  );
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+
+function translate(x: number, y: number): string {
+  return x === 0 && y === 0 ? "" : `translate3d(${String(x)}px, ${String(y)}px, 0)`;
+}
+
+export interface MagneticButtonProps extends ButtonProps {
+  /**
+   * How far the button drifts toward the pointer, as a fraction of the
+   * pointer's distance from its centre. 0 turns the effect off.
+   */
+  strength?: number;
+  /**
+   * The content's total pull, for a layered effect. Set it above `strength`
+   * and the label leans further than the button around it. Ignored with
+   * `asChild`, whose single child cannot be wrapped.
+   */
+  contentStrength?: number;
+  /**
+   * How far beyond its edges, in pixels, the button starts to feel the
+   * pointer. The pull fades to nothing at this distance. 0 (the default) keeps
+   * the effect within the button's own bounds.
+   */
+  radius?: number;
+}
+
+/**
+ * A button that drifts toward the pointer and springs back when it leaves.
+ *
+ * Purely decorative: it never moves for touch, coarse pointers, or users who
+ * prefer reduced motion, and a disabled or loading button stays put.
+ */
+export function MagneticButton({
+  className,
+  strength = 0.35,
+  contentStrength,
+  radius = 0,
+  asChild = false,
+  disabled,
+  loading,
+  children,
+  ref,
+  onPointerMove,
+  onPointerLeave,
+  ...props
+}: MagneticButtonProps) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const contentRef = useRef<HTMLSpanElement | null>(null);
+  const offset = useRef({ x: 0, y: 0 });
+  const layered = contentStrength !== undefined && !asChild;
+  const inert = Boolean(disabled) || Boolean(loading) || strength === 0;
+
+  const setRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      buttonRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  const place = useCallback(
+    (x: number, y: number, following: boolean) => {
+      const element = buttonRef.current;
+      if (!element) return;
+      offset.current = { x, y };
+      element.dataset.magnetic = following ? "follow" : "rest";
+      element.style.transform = translate(x, y);
+      if (contentRef.current && contentStrength !== undefined && strength !== 0) {
+        const extra = contentStrength / strength - 1;
+        contentRef.current.style.transform = translate(x * extra, y * extra);
+      }
+    },
+    [contentStrength, strength],
+  );
+
+  const release = useCallback(() => {
+    if (offset.current.x !== 0 || offset.current.y !== 0) place(0, 0, false);
+  }, [place]);
+
+  const pull = useCallback(
+    (clientX: number, clientY: number, pointerType: string) => {
+      const element = buttonRef.current;
+      if (!element || inert || !motionAllowed(pointerType)) {
+        release();
+        return;
+      }
+
+      // Measure where the button sits at rest, not where it has drifted to,
+      // or it would chase its own displacement.
+      const rect = element.getBoundingClientRect();
+      const halfWidth = rect.width / 2;
+      const halfHeight = rect.height / 2;
+      const dx = clientX - (rect.left - offset.current.x + halfWidth);
+      const dy = clientY - (rect.top - offset.current.y + halfHeight);
+
+      let factor = 1;
+      if (radius > 0) {
+        const outside = Math.hypot(
+          Math.max(0, Math.abs(dx) - halfWidth),
+          Math.max(0, Math.abs(dy) - halfHeight),
+        );
+        if (outside >= radius) {
+          release();
+          return;
+        }
+        factor = 1 - outside / radius;
+      }
+
+      place(dx * strength * factor, dy * strength * factor, true);
+    },
+    [inert, place, radius, release, strength],
+  );
+
+  // Beyond the bounds, the pointer is not over the button, so its own events
+  // cannot see it. A passive window listener can, without widening the hit
+  // area over neighbouring controls the way a padded wrapper would.
+  useEffect(() => {
+    if (radius <= 0) return;
+    const onMove = (event: globalThis.PointerEvent) => {
+      pull(event.clientX, event.clientY, event.pointerType);
+    };
+    const root = document.documentElement;
+    window.addEventListener("pointermove", onMove, { passive: true });
+    root.addEventListener("pointerleave", release);
+    window.addEventListener("blur", release);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", release);
+      window.removeEventListener("blur", release);
+    };
+  }, [pull, radius, release]);
+
+  // Becoming disabled mid-drift should not leave the button stranded.
+  useEffect(() => {
+    if (inert) release();
+  }, [inert, release]);
+
+  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {
+    onPointerMove?.(event);
+    if (radius <= 0) pull(event.clientX, event.clientY, event.pointerType);
+  }
+
+  function handlePointerLeave(event: PointerEvent<HTMLButtonElement>) {
+    onPointerLeave?.(event);
+    if (radius <= 0) release();
+  }
+
+  return (
+    <Button
+      ref={setRef}
+      data-slot="magnetic-button"
+      data-magnetic="rest"
+      asChild={asChild}
+      disabled={disabled}
+      loading={loading}
+      className={cn(drift, className)}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+      {...props}
+    >
+      {layered ? (
+        <span ref={contentRef} data-slot="magnetic-button-content" className={contentDrift}>
+          {children}
+        </span>
+      ) : (
+        children
+      )}
+    </Button>
+  );
+}