@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/island/island.js

@@ -0,0 +1,94 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/island/island.tsx
+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" }
+});
+/** Maps a 0–1 bounce onto the overshoot of a cubic-bezier, clamped. */
+function islandEasing(bounce) {
+	return `cubic-bezier(0.34, ${(1 + Math.min(1, Math.max(0, bounce)) * .8).toFixed(2)}, 0.64, 1)`;
+}
+/** The content box's size, or null until it has been measured. */
+function useMeasuredSize(ref) {
+	const [size, setSize] = useState(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. */
+function Island({ className, style, view, views, bounce = .5, live = "off", tone, ...props }) {
+	const measureRef = useRef(null);
+	const size = useMeasuredSize(measureRef);
+	const [shown, setShown] = useState(view);
+	const [from, setFrom] = useState(view);
+	if (shown !== view) {
+		setFrom(shown);
+		setShown(view);
+	}
+	const amount = typeof bounce === "function" ? bounce(from, view) : bounce;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "island",
+		"data-view": view,
+		"aria-live": live === "off" ? void 0 : live,
+		"aria-atomic": live === "off" ? void 0 : true,
+		className: cn(islandVariants({ tone }), className),
+		style: {
+			width: size?.width,
+			height: size?.height,
+			transitionTimingFunction: islandEasing(amount),
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: "dowel-island",
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsx("div", {
+			ref: measureRef,
+			"data-slot": "island-measure",
+			className: "w-max shrink-0",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "island-content",
+				children: views[view]
+			}, view)
+		})]
+	});
+}
+//#endregion
+export { Island, islandEasing, islandVariants };
+
+//# sourceMappingURL=island.js.map

package/dist/components/island/island.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"island.js","names":[],"sources":["../../../src/components/island/island.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Dynamic Island (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A pill that reshapes itself around whatever it is showing: an idle glyph,\n * an incoming call, a timer, a player. The source drove this with motion's\n * `layout` spring; here the pill's size is measured (ResizeObserver) and the\n * width/height change is a CSS transition on an overshooting curve, which is\n * the same bounce without a JavaScript animation loop. Any change of size\n * animates — a new view *or* content growing inside the current one — because\n * the measurement does not care why the content changed.\n *\n * The incoming view blurs and scales in through a hoisted keyframe. Both stop\n * under reduced motion: the pill simply is its new size.\n */\n\nconst STYLES = `\n@keyframes dowel-island-enter {\n  from { opacity: 0; scale: 0.9; filter: blur(5px); }\n  to { opacity: 1; scale: 1; filter: blur(0); }\n}\n[data-slot=\"island-content\"] {\n  animation: dowel-island-enter calc(300ms * var(--motion-scale)) var(--ease-out-quint)\n    calc(50ms * var(--motion-scale)) both;\n}\n`;\n\nconst islandVariants = cva(\n  cn(\n    \"relative inline-flex min-w-[6.25rem] items-center justify-center overflow-hidden rounded-[2rem]\",\n    \"transition-[width,height] duration-[var(--duration-slow)]\",\n  ),\n  {\n    variants: {\n      tone: {\n        /** The source's black pill: the inverse of the page. */\n        inverted: \"bg-foreground text-background\",\n        card: \"border border-border bg-card text-card-foreground shadow-md\",\n        primary: \"bg-primary text-primary-foreground\",\n      },\n    },\n    defaultVariants: {\n      tone: \"inverted\",\n    },\n  },\n);\n\nexport type IslandBounce = number | ((from: string, to: string) => number);\n\nexport interface IslandProps<V extends string = string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"children\">, VariantProps<typeof islandVariants> {\n  /** The view currently shown — a key of `views`. */\n  view: V;\n  /** Content for each view, e.g. `{ compact: …, expanded: … }`. */\n  views: Record<V, ReactNode>;\n  /**\n   * How far the pill overshoots its new size, 0 (none) to 1. A function gets\n   * the previous and next view, so each transition can have its own feel.\n   */\n  bounce?: IslandBounce;\n  /**\n   * Announce each new view to screen readers. Off by default: an island that\n   * announces every idle tick trains people to ignore it.\n   */\n  live?: \"off\" | \"polite\" | \"assertive\";\n}\n\n/** Maps a 0–1 bounce onto the overshoot of a cubic-bezier, clamped. */\nexport function islandEasing(bounce: number): string {\n  const overshoot = 1 + Math.min(1, Math.max(0, bounce)) * 0.8;\n  return `cubic-bezier(0.34, ${overshoot.toFixed(2)}, 0.64, 1)`;\n}\n\n/** The content box's size, or null until it has been measured. */\nfunction useMeasuredSize(ref: RefObject<HTMLElement | null>) {\n  const [size, setSize] = useState<{ width: number; height: number } | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const measure = () => {\n      const width = element.offsetWidth;\n      const height = element.offsetHeight;\n      if (!width || !height) return;\n      setSize((previous) =>\n        previous?.width === width && previous.height === height ? previous : { width, height },\n      );\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return size;\n}\n\n/** A pill that morphs between views, resizing around its content. */\nexport function Island<V extends string>({\n  className,\n  style,\n  view,\n  views,\n  bounce = 0.5,\n  live = \"off\",\n  tone,\n  ...props\n}: IslandProps<V>) {\n  const measureRef = useRef<HTMLDivElement>(null);\n  const size = useMeasuredSize(measureRef);\n\n  // The view we are coming from, captured when `view` changes, so a bounce\n  // function can tell one transition from another.\n  const [shown, setShown] = useState<V>(view);\n  const [from, setFrom] = useState<V>(view);\n  if (shown !== view) {\n    setFrom(shown);\n    setShown(view);\n  }\n\n  const amount = typeof bounce === \"function\" ? bounce(from, view) : bounce;\n\n  return (\n    <div\n      data-slot=\"island\"\n      data-view={view}\n      aria-live={live === \"off\" ? undefined : live}\n      aria-atomic={live === \"off\" ? undefined : true}\n      className={cn(islandVariants({ tone }), className)}\n      style={{\n        width: size?.width,\n        height: size?.height,\n        transitionTimingFunction: islandEasing(amount),\n        ...style,\n      }}\n      {...props}\n    >\n      <style href=\"dowel-island\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div ref={measureRef} data-slot=\"island-measure\" className=\"w-max shrink-0\">\n        <div key={view} data-slot=\"island-content\">\n          {views[view]}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport { islandVariants };\n"],"mappings":";;;;;;AA4BA,MAAM,SAAS;;;;;;;;;;AAWf,MAAM,iBAAiB,IACrB,GACE,mGACA,2DACF,GACA;CACE,UAAU,EACR,MAAM;;EAEJ,UAAU;EACV,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,WACR;AACF,CACF;;AAuBA,SAAgB,aAAa,QAAwB;CAEnD,OAAO,uBADW,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC,IAAI,GAAA,CAClB,QAAQ,CAAC,EAAE;AACpD;;AAGA,SAAS,gBAAgB,KAAoC;CAC3D,MAAM,CAAC,MAAM,WAAW,SAAmD,IAAI;CAE/E,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,MAAM,gBAAgB;GACpB,MAAM,QAAQ,QAAQ;GACtB,MAAM,SAAS,QAAQ;GACvB,IAAI,CAAC,SAAS,CAAC,QAAQ;GACvB,SAAS,aACP,UAAU,UAAU,SAAS,SAAS,WAAW,SAAS,WAAW;IAAE;IAAO;GAAO,CACvF;EACF;EACA,QAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;AACT;;AAGA,SAAgB,OAAyB,EACvC,WACA,OACA,MACA,OACA,SAAS,IACT,OAAO,OACP,MACA,GAAG,SACc;CACjB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,OAAO,gBAAgB,UAAU;CAIvC,MAAM,CAAC,OAAO,YAAY,SAAY,IAAI;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAY,IAAI;CACxC,IAAI,UAAU,MAAM;EAClB,QAAQ,KAAK;EACb,SAAS,IAAI;CACf;CAEA,MAAM,SAAS,OAAO,WAAW,aAAa,OAAO,MAAM,IAAI,IAAI;CAEnE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,aAAW,SAAS,QAAQ,KAAA,IAAY;EACxC,eAAa,SAAS,QAAQ,KAAA,IAAY;EAC1C,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EACjD,OAAO;GACL,OAAO,MAAM;GACb,QAAQ,MAAM;GACd,0BAA0B,aAAa,MAAM;GAC7C,GAAG;EACL;EACA,GAAI;EAZN,UAAA,CAcE,oBAAC,SAAD;GAAO,MAAK;GAAe,YAAW;GACnC,UAAA;EACI,CAAA,GACP,oBAAC,OAAD;GAAK,KAAK;GAAY,aAAU;GAAiB,WAAU;GACzD,UAAA,oBAAC,OAAD;IAAgB,aAAU;IACvB,UAAA,MAAM;GACJ,GAFK,IAEL;EACF,CAAA,CACF;;AAET"}

package/dist/components/island/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/island/meta.ts
+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."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/island/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"island\",\n  title: \"Island\",\n  description:\n    \"A pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"island.tsx\"],\n  a11y:\n    \"The island is a container: the controls inside a view (play, skip, answer) are ordinary buttons and must be \" +\n    'named by the consumer. Pass `live=\"polite\"` to announce each new view — it is off by default, since an ' +\n    \"island that announces every change is noise. The resize and the incoming view's blur stop under reduced \" +\n    \"motion; the pill takes its new size immediately.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAIJ,CAAC"}

package/dist/components/liquid-toggle/index.d.ts

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

package/dist/components/liquid-toggle/index.js

@@ -0,0 +1,2 @@
+import { LiquidToggle, liquidToggleVariants } from "./liquid-toggle.js";
+export { LiquidToggle, liquidToggleVariants };

package/dist/components/liquid-toggle/liquid-toggle.d.ts

@@ -0,0 +1,19 @@
+import { Switch } from "radix-ui";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/liquid-toggle/liquid-toggle.d.ts
+declare const liquidToggleVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface LiquidToggleProps extends Omit<ComponentPropsWithRef<typeof Switch.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;
+}
+/** A droplet switch: the knob stretches with its speed and can be dragged across. */
+declare function LiquidToggle({ className, size, stroke, speed, stretch, checked: checkedProp, defaultChecked, onCheckedChange, disabled, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClick, ...props }: LiquidToggleProps): import("react").JSX.Element;
+//#endregion
+export { LiquidToggle, LiquidToggleProps, liquidToggleVariants };
+//# sourceMappingURL=liquid-toggle.d.ts.map

package/dist/components/liquid-toggle/liquid-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-toggle.d.ts","names":[],"sources":["../../../src/components/liquid-toggle/liquid-toggle.tsx"],"mappings":";;;;cA4CM,uBAAoB;;;6CAsBzB;UAEgB,0BAEb,KAAK,6BAA6B,OAAgB,oBAClD,oBAAoB;;EAEtB;;EAEA;;;iBAOc,eACd,WACA,MACA,QACA,OACA,SACA,SAAS,aACT,gBACA,iBACA,UACA,eACA,eACA,aACA,iBACA,YACG,SACF,oCAAiB,IAAA"}

package/dist/components/liquid-toggle/liquid-toggle.js

@@ -0,0 +1,175 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Switch } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+import { MotionConfig, animate, motion, useMotionValue, useReducedMotion, useTransform, useVelocity } from "motion/react";
+//#region src/components/liquid-toggle/liquid-toggle.tsx
+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
+	}
+});
+/** 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. */
+function LiquidToggle({ className, size, stroke, speed = 50, stretch = 36, checked: checkedProp, defaultChecked = false, onCheckedChange, disabled, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClick, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+	const checked = checkedProp ?? uncontrolled;
+	const reduced = useReducedMotion() ?? false;
+	const knobRef = useRef(null);
+	const drag = useRef(null);
+	const suppressClick = useRef(false);
+	const position = useMotionValue(checked ? 1 : 0);
+	const velocity = useVelocity(position);
+	const gain = stretch / 36 * .016;
+	const limit = 1 + stretch / 100 * .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) * .85;
+	function settle(target) {
+		if (reduced) {
+			position.jump(target);
+			return;
+		}
+		animate(position, target, {
+			type: "spring",
+			stiffness,
+			damping,
+			velocity: position.getVelocity()
+		});
+	}
+	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) {
+		if (checkedProp === void 0) setUncontrolled(next);
+		onCheckedChange?.(next);
+	}
+	/** Pixels of travel between the two sides, measured from the rendered track. */
+	function travel(track, rtl) {
+		const knob = knobRef.current;
+		if (!knob) return 0;
+		const width = track.clientWidth;
+		const inset = rtl ? width - knob.offsetLeft - knob.offsetWidth : knob.offsetLeft;
+		return width - knob.offsetWidth - 2 * inset;
+	}
+	function handlePointerDown(event) {
+		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) {
+		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, cancelled) {
+		const current = drag.current;
+		if (!current || current.id !== event.pointerId) return;
+		drag.current = null;
+		if (!current.moved) return;
+		suppressClick.current = !cancelled;
+		const next = position.get() >= .5;
+		if (next === checked) settle(next ? 1 : 0);
+		else setChecked(next);
+	}
+	function handleClick(event) {
+		onClick?.(event);
+		if (suppressClick.current) {
+			suppressClick.current = false;
+			event.preventDefault();
+		}
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			"data-slot": "liquid-toggle",
+			checked,
+			onCheckedChange: setChecked,
+			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,
+			children: /* @__PURE__ */ jsx(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
+				}
+			})
+		})
+	});
+}
+//#endregion
+export { LiquidToggle, liquidToggleVariants };
+
+//# sourceMappingURL=liquid-toggle.js.map

package/dist/components/liquid-toggle/liquid-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-toggle.js","names":["SwitchPrimitive"],"sources":["../../../src/components/liquid-toggle/liquid-toggle.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Liquid toggle (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  useReducedMotion,\n  useTransform,\n  useVelocity,\n  type MotionStyle,\n} from \"motion/react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A switch whose knob behaves like a droplet: it stretches along its travel\n * and squashes across it in proportion to its speed.\n *\n * Built on the Radix switch primitive, like Dowel's Switch, so it has the\n * switch role, Space/Enter, a native click, and a hidden input inside forms.\n * Dowel's Switch cannot take this knob — its thumb is fixed — so this composes\n * the same primitive instead.\n *\n * `motion` is used for one thing CSS cannot do: the knob can be dragged, and on\n * release its spring has to carry the drag's velocity, and the squash is read\n * off that velocity every frame. The knob's position is a single 0–1 value\n * written to a CSS variable; logical `start` and an RTL-negated translate make\n * \"on\" the inline end in both directions. Under reduced motion the knob jumps\n * and never deforms.\n */\n\nconst liquidToggleVariants = cva(\n  cn(\n    \"relative inline-flex shrink-0 touch-none items-center rounded-full select-none\",\n    \"bg-card data-[state=checked]:bg-foreground\",\n    \"transition-[background-color,box-shadow] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    focusRing,\n  ),\n  {\n    variants: {\n      size: {\n        sm: \"h-6 w-11 [--liquid-toggle-inset:0.1875rem] [--liquid-toggle-knob:1.125rem] [--liquid-toggle-travel:1.25rem]\",\n        md: \"h-[2.875rem] w-[5.75rem] [--liquid-toggle-inset:0.3125rem] [--liquid-toggle-knob:2.25rem] [--liquid-toggle-travel:2.875rem]\",\n      },\n      /** A hairline ring on the track — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)] data-[state=checked]:shadow-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { size: \"md\", stroke: true },\n  },\n);\n\nexport interface LiquidToggleProps\n  extends\n    Omit<ComponentPropsWithRef<typeof SwitchPrimitive.Root>, \"children\">,\n    VariantProps<typeof liquidToggleVariants> {\n  /** Spring stiffness, 0–100: how quickly the knob crosses. */\n  speed?: number;\n  /** Velocity squash and stretch, 0–100. 0 keeps the knob a rigid circle. */\n  stretch?: number;\n}\n\n/** Pixels the pointer must travel before a press becomes a drag. */\nconst DRAG_SLOP = 3;\n\n/** A droplet switch: the knob stretches with its speed and can be dragged across. */\nexport function LiquidToggle({\n  className,\n  size,\n  stroke,\n  speed = 50,\n  stretch = 36,\n  checked: checkedProp,\n  defaultChecked = false,\n  onCheckedChange,\n  disabled,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onClick,\n  ...props\n}: LiquidToggleProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const checked = checkedProp ?? uncontrolled;\n  const reduced = useReducedMotion() ?? false;\n  const knobRef = useRef<HTMLSpanElement | null>(null);\n  const drag = useRef<{ id: number; x: number; from: number; moved: boolean } | null>(null);\n  const suppressClick = useRef(false);\n\n  const position = useMotionValue(checked ? 1 : 0);\n  const velocity = useVelocity(position);\n  const gain = (stretch / 36) * 0.016;\n  const limit = 1 + (stretch / 100) * 0.4;\n  const scaleX = useTransform(velocity, (v) =>\n    reduced ? 1 : Math.min(limit, 1 + Math.abs(v) * gain),\n  );\n  const scaleY = useTransform(scaleX, (x) => 2 - x);\n\n  const stiffness = 150 + speed * 4;\n  const damping = 2 * Math.sqrt(stiffness) * 0.85;\n\n  function settle(target: number) {\n    if (reduced) {\n      position.jump(target);\n      return;\n    }\n    void animate(position, target, {\n      type: \"spring\",\n      stiffness,\n      damping,\n      velocity: position.getVelocity(),\n    });\n  }\n\n  // Any change of state — click, key, drag release or the controlled prop —\n  // springs the knob to its side, carrying whatever velocity it already has.\n  useEffect(() => {\n    if (drag.current) return;\n    const target = checked ? 1 : 0;\n    if (position.get() === target) return;\n    if (reduced) {\n      position.jump(target);\n      return;\n    }\n    const controls = animate(position, target, {\n      type: \"spring\",\n      stiffness,\n      damping,\n      velocity: position.getVelocity(),\n    });\n    return () => {\n      controls.stop();\n    };\n  }, [checked, reduced, stiffness, damping, position]);\n\n  function setChecked(next: boolean) {\n    if (checkedProp === undefined) setUncontrolled(next);\n    onCheckedChange?.(next);\n  }\n\n  /** Pixels of travel between the two sides, measured from the rendered track. */\n  function travel(track: HTMLElement, rtl: boolean): number {\n    const knob = knobRef.current;\n    if (!knob) return 0;\n    const width = track.clientWidth;\n    // offsetLeft ignores the translate, so it is the resting inset.\n    const inset = rtl ? width - knob.offsetLeft - knob.offsetWidth : knob.offsetLeft;\n    return width - knob.offsetWidth - 2 * inset;\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLButtonElement>) {\n    onPointerDown?.(event);\n    if (disabled || event.button !== 0) return;\n    drag.current = {\n      id: event.pointerId,\n      x: event.clientX,\n      from: position.get(),\n      moved: false,\n    };\n    event.currentTarget.setPointerCapture(event.pointerId);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLButtonElement>) {\n    onPointerMove?.(event);\n    const current = drag.current;\n    if (!current || current.id !== event.pointerId) return;\n    const dx = event.clientX - current.x;\n    if (!current.moved && Math.abs(dx) < DRAG_SLOP) return;\n    current.moved = true;\n    const rtl = getComputedStyle(event.currentTarget).direction === \"rtl\";\n    const distance = travel(event.currentTarget, rtl);\n    if (distance <= 0) return;\n    const next = current.from + (rtl ? -dx : dx) / distance;\n    position.set(Math.min(1, Math.max(0, next)));\n  }\n\n  function release(event: PointerEvent<HTMLButtonElement>, cancelled: boolean) {\n    const current = drag.current;\n    if (!current || current.id !== event.pointerId) return;\n    drag.current = null;\n    if (!current.moved) return;\n    // A drag is not a tap: the click that follows pointerup must not toggle.\n    suppressClick.current = !cancelled;\n    const next = position.get() >= 0.5;\n    if (next === checked) settle(next ? 1 : 0);\n    else setChecked(next);\n  }\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (suppressClick.current) {\n      suppressClick.current = false;\n      event.preventDefault();\n    }\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <SwitchPrimitive.Root\n        data-slot=\"liquid-toggle\"\n        checked={checked}\n        onCheckedChange={setChecked}\n        disabled={disabled}\n        className={cn(liquidToggleVariants({ size, stroke }), className)}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={(event) => {\n          onPointerUp?.(event);\n          release(event, false);\n        }}\n        onPointerCancel={(event) => {\n          onPointerCancel?.(event);\n          release(event, true);\n        }}\n        onClick={handleClick}\n        {...props}\n      >\n        <motion.span\n          ref={knobRef}\n          aria-hidden=\"true\"\n          data-slot=\"liquid-toggle-knob\"\n          data-state={checked ? \"checked\" : \"unchecked\"}\n          className={cn(\n            \"pointer-events-none absolute start-[var(--liquid-toggle-inset)] top-1/2 size-[var(--liquid-toggle-knob)] rounded-full\",\n            \"translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel))] -translate-y-1/2\",\n            \"rtl:translate-x-[calc(var(--liquid-toggle-p)*var(--liquid-toggle-travel)*-1)]\",\n            \"bg-[color-mix(in_oklab,var(--color-foreground)_19%,var(--color-card))] data-[state=checked]:bg-card\",\n            \"transition-[background-color] duration-[var(--duration-slow)]\",\n          )}\n          style={{ scaleX, scaleY, ...({ \"--liquid-toggle-p\": position } as MotionStyle) }}\n        />\n      </SwitchPrimitive.Root>\n    </MotionConfig>\n  );\n}\n\nexport { liquidToggleVariants };\n"],"mappings":";;;;;;;;;AA4CA,MAAM,uBAAuB,IAC3B,GACE,kFACA,8CACA,yGACA,mDACA,SACF,GACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;;EAEA,QAAQ;GACN,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CACF;;AAaA,MAAM,YAAY;;AAGlB,SAAgB,aAAa,EAC3B,WACA,MACA,QACA,QAAQ,IACR,UAAU,IACV,SAAS,aACT,iBAAiB,OACjB,iBACA,UACA,eACA,eACA,aACA,iBACA,SACA,GAAG,SACiB;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc;CAC/D,MAAM,UAAU,eAAe;CAC/B,MAAM,UAAU,iBAAiB,KAAK;CACtC,MAAM,UAAU,OAA+B,IAAI;CACnD,MAAM,OAAO,OAAuE,IAAI;CACxF,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,WAAW,eAAe,UAAU,IAAI,CAAC;CAC/C,MAAM,WAAW,YAAY,QAAQ;CACrC,MAAM,OAAQ,UAAU,KAAM;CAC9B,MAAM,QAAQ,IAAK,UAAU,MAAO;CACpC,MAAM,SAAS,aAAa,WAAW,MACrC,UAAU,IAAI,KAAK,IAAI,OAAO,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,CACtD;CACA,MAAM,SAAS,aAAa,SAAS,MAAM,IAAI,CAAC;CAEhD,MAAM,YAAY,MAAM,QAAQ;CAChC,MAAM,UAAU,IAAI,KAAK,KAAK,SAAS,IAAI;CAE3C,SAAS,OAAO,QAAgB;EAC9B,IAAI,SAAS;GACX,SAAS,KAAK,MAAM;GACpB;EACF;EACA,QAAa,UAAU,QAAQ;GAC7B,MAAM;GACN;GACA;GACA,UAAU,SAAS,YAAY;EACjC,CAAC;CACH;CAIA,gBAAgB;EACd,IAAI,KAAK,SAAS;EAClB,MAAM,SAAS,UAAU,IAAI;EAC7B,IAAI,SAAS,IAAI,MAAM,QAAQ;EAC/B,IAAI,SAAS;GACX,SAAS,KAAK,MAAM;GACpB;EACF;EACA,MAAM,WAAW,QAAQ,UAAU,QAAQ;GACzC,MAAM;GACN;GACA;GACA,UAAU,SAAS,YAAY;EACjC,CAAC;EACD,aAAa;GACX,SAAS,KAAK;EAChB;CACF,GAAG;EAAC;EAAS;EAAS;EAAW;EAAS;CAAQ,CAAC;CAEnD,SAAS,WAAW,MAAe;EACjC,IAAI,gBAAgB,KAAA,GAAW,gBAAgB,IAAI;EACnD,kBAAkB,IAAI;CACxB;;CAGA,SAAS,OAAO,OAAoB,KAAsB;EACxD,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM,OAAO;EAClB,MAAM,QAAQ,MAAM;EAEpB,MAAM,QAAQ,MAAM,QAAQ,KAAK,aAAa,KAAK,cAAc,KAAK;EACtE,OAAO,QAAQ,KAAK,cAAc,IAAI;CACxC;CAEA,SAAS,kBAAkB,OAAwC;EACjE,gBAAgB,KAAK;EACrB,IAAI,YAAY,MAAM,WAAW,GAAG;EACpC,KAAK,UAAU;GACb,IAAI,MAAM;GACV,GAAG,MAAM;GACT,MAAM,SAAS,IAAI;GACnB,OAAO;EACT;EACA,MAAM,cAAc,kBAAkB,MAAM,SAAS;CACvD;CAEA,SAAS,kBAAkB,OAAwC;EACjE,gBAAgB,KAAK;EACrB,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,WAAW,QAAQ,OAAO,MAAM,WAAW;EAChD,MAAM,KAAK,MAAM,UAAU,QAAQ;EACnC,IAAI,CAAC,QAAQ,SAAS,KAAK,IAAI,EAAE,IAAI,WAAW;EAChD,QAAQ,QAAQ;EAChB,MAAM,MAAM,iBAAiB,MAAM,aAAa,CAAC,CAAC,cAAc;EAChE,MAAM,WAAW,OAAO,MAAM,eAAe,GAAG;EAChD,IAAI,YAAY,GAAG;EACnB,MAAM,OAAO,QAAQ,QAAQ,MAAM,CAAC,KAAK,MAAM;EAC/C,SAAS,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,CAAC,CAAC;CAC7C;CAEA,SAAS,QAAQ,OAAwC,WAAoB;EAC3E,MAAM,UAAU,KAAK;EACrB,IAAI,CAAC,WAAW,QAAQ,OAAO,MAAM,WAAW;EAChD,KAAK,UAAU;EACf,IAAI,CAAC,QAAQ,OAAO;EAEpB,cAAc,UAAU,CAAC;EACzB,MAAM,OAAO,SAAS,IAAI,KAAK;EAC/B,IAAI,SAAS,SAAS,OAAO,OAAO,IAAI,CAAC;OACpC,WAAW,IAAI;CACtB;CAEA,SAAS,YAAY,OAAsC;EACzD,UAAU,KAAK;EACf,IAAI,cAAc,SAAS;GACzB,cAAc,UAAU;GACxB,MAAM,eAAe;EACvB;CACF;CAEA,OACE,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAACA,OAAgB,MAAjB;GACE,aAAU;GACD;GACT,iBAAiB;GACP;GACV,WAAW,GAAG,qBAAqB;IAAE;IAAM;GAAO,CAAC,GAAG,SAAS;GAC/D,eAAe;GACf,eAAe;GACf,cAAc,UAAU;IACtB,cAAc,KAAK;IACnB,QAAQ,OAAO,KAAK;GACtB;GACA,kBAAkB,UAAU;IAC1B,kBAAkB,KAAK;IACvB,QAAQ,OAAO,IAAI;GACrB;GACA,SAAS;GACT,GAAI;GAEJ,UAAA,oBAAC,OAAO,MAAR;IACE,KAAK;IACL,eAAY;IACZ,aAAU;IACV,cAAY,UAAU,YAAY;IAClC,WAAW,GACT,yHACA,2FACA,iFACA,uGACA,+DACF;IACA,OAAO;KAAE;KAAQ;KAAc,qBAAqB;IAA2B;GAChF,CAAA;EACmB,CAAA;CACV,CAAA;AAElB"}

package/dist/components/liquid-toggle/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/liquid-toggle/meta.ts
+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."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/liquid-toggle/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/liquid-toggle/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"liquid-toggle\",\n  title: \"Liquid Toggle\",\n  description:\n    \"A switch whose knob squashes like a droplet as it travels, and can be dragged across.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"liquid-toggle.tsx\"],\n  a11y:\n    'Built on the Radix switch primitive: role=\"switch\" with aria-checked, toggled by click, Space or Enter, ' +\n    \"with a visible focus ring (missing in the source) and a hidden input inside forms. It has no visible \" +\n    \"label, so name it with aria-label or a <label>. Dragging the knob is a pointer convenience; releasing \" +\n    \"a drag never also counts as a click. Under reduced motion the knob jumps and never deforms.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc;EAAC;EAA4B;EAAU;CAAU;CAC/D,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAIJ,CAAC"}

package/dist/components/magnetic-button/index.d.ts

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

package/dist/components/magnetic-button/index.js

@@ -0,0 +1,2 @@
+import { MagneticButton } from "./magnetic-button.js";
+export { MagneticButton };

package/dist/components/magnetic-button/magnetic-button.d.ts

@@ -0,0 +1,32 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+//#region src/components/magnetic-button/magnetic-button.d.ts
+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.
+ */
+declare function MagneticButton({ className, strength, contentStrength, radius, asChild, disabled, loading, children, ref, onPointerMove, onPointerLeave, ...props }: MagneticButtonProps): import("react").JSX.Element;
+//#endregion
+export { MagneticButton, MagneticButtonProps };
+//# sourceMappingURL=magnetic-button.d.ts.map

package/dist/components/magnetic-button/magnetic-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-button.d.ts","names":[],"sources":["../../../src/components/magnetic-button/magnetic-button.tsx"],"mappings":";;;UAsDiB,4BAA4B;;;;;EAK3C;;;;;;EAMA;;;;;;EAMA;;;;;;;;iBASc,iBACd,WACA,UACA,iBACA,QACA,SACA,UACA,SACA,UACA,KACA,eACA,mBACG,SACF,sCAAmB,IAAA"}

package/dist/components/magnetic-button/magnetic-button.js

@@ -0,0 +1,138 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/components/magnetic-button/magnetic-button.tsx
+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) {
+	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(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+function translate(x, y) {
+	return x === 0 && y === 0 ? "" : `translate3d(${String(x)}px, ${String(y)}px, 0)`;
+}
+/**
+* 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.
+*/
+function MagneticButton({ className, strength = .35, contentStrength, radius = 0, asChild = false, disabled, loading, children, ref, onPointerMove, onPointerLeave, ...props }) {
+	const buttonRef = useRef(null);
+	const contentRef = useRef(null);
+	const offset = useRef({
+		x: 0,
+		y: 0
+	});
+	const layered = contentStrength !== void 0 && !asChild;
+	const inert = Boolean(disabled) || Boolean(loading) || strength === 0;
+	const setRef = useCallback((node) => {
+		buttonRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	const place = useCallback((x, y, following) => {
+		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 !== void 0 && 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, clientY, pointerType) => {
+		const element = buttonRef.current;
+		if (!element || inert || !motionAllowed(pointerType)) {
+			release();
+			return;
+		}
+		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
+	]);
+	useEffect(() => {
+		if (radius <= 0) return;
+		const onMove = (event) => {
+			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
+	]);
+	useEffect(() => {
+		if (inert) release();
+	}, [inert, release]);
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		if (radius <= 0) pull(event.clientX, event.clientY, event.pointerType);
+	}
+	function handlePointerLeave(event) {
+		onPointerLeave?.(event);
+		if (radius <= 0) release();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		ref: setRef,
+		"data-slot": "magnetic-button",
+		"data-magnetic": "rest",
+		asChild,
+		disabled,
+		loading,
+		className: cn(drift, className),
+		onPointerMove: handlePointerMove,
+		onPointerLeave: handlePointerLeave,
+		...props,
+		children: layered ? /* @__PURE__ */ jsx("span", {
+			ref: contentRef,
+			"data-slot": "magnetic-button-content",
+			className: contentDrift,
+			children
+		}) : children
+	});
+}
+//#endregion
+export { MagneticButton };
+
+//# sourceMappingURL=magnetic-button.js.map

package/dist/components/magnetic-button/magnetic-button.js.map

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

package/dist/components/magnetic-button/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/magnetic-button/meta.ts
+const meta = defineMeta({
+	name: "magnetic-button",
+	title: "Magnetic Button",
+	description: "A button that drifts toward the pointer — optionally with its label leaning further — and springs back when it leaves.",
+	category: "form",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: ["button"],
+	files: ["magnetic-button.tsx"],
+	a11y: "The drift is decoration on an ordinary Button: name, role and keyboard behaviour are unchanged. It never runs for touch or coarse pointers, or under prefers-reduced-motion, and a disabled or loading button stays put. The `radius` option listens on the window rather than widening the hit area, so it never steals clicks from neighbouring controls."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/magnetic-button/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/magnetic-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"magnetic-button\",\n  title: \"Magnetic Button\",\n  description:\n    \"A button that drifts toward the pointer — optionally with its label leaning further — and springs back when it leaves.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"button\"],\n  files: [\"magnetic-button.tsx\"],\n  a11y:\n    \"The drift is decoration on an ordinary Button: name, role and keyboard behaviour are \" +\n    \"unchanged. It never runs for touch or coarse pointers, or under prefers-reduced-motion, \" +\n    \"and a disabled or loading button stays put. The `radius` option listens on the window \" +\n    \"rather than widening the hit area, so it never steals clicks from neighbouring controls.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAIJ,CAAC"}

package/dist/components/magnetic-select/index.d.ts

@@ -0,0 +1,2 @@
+import { MagneticSelect, MagneticSelectOption, MagneticSelectProps, magneticSelectVariants } from "./magnetic-select.js";
+export { MagneticSelect, type MagneticSelectOption, type MagneticSelectProps, magneticSelectVariants };

package/dist/components/magnetic-select/index.js

@@ -0,0 +1,2 @@
+import { MagneticSelect, magneticSelectVariants } from "./magnetic-select.js";
+export { MagneticSelect, magneticSelectVariants };