@dowel-ui/react 0.5.0 → 0.8.0

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 };

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

@@ -0,0 +1,21 @@
+//#region src/components/magnetic-select/magnetic-select-spring.ts
+function springEasing(bounce, samples = 48) {
+	const zeta = 1 - Math.min(Math.max(bounce, 0), 1) * .7;
+	const omega = Math.log(1e3) / zeta;
+	const points = [];
+	for (let i = 0; i <= samples; i += 1) {
+		const t = i / samples;
+		let x;
+		if (zeta >= .999) x = 1 - Math.exp(-omega * t) * (1 + omega * t);
+		else {
+			const wd = omega * Math.sqrt(1 - zeta * zeta);
+			x = 1 - Math.exp(-zeta * omega * t) * (Math.cos(wd * t) + zeta * omega / wd * Math.sin(wd * t));
+		}
+		points.push(i === samples ? "1" : String(Math.round(x * 1e3) / 1e3));
+	}
+	return `linear(${points.join(", ")})`;
+}
+//#endregion
+export { springEasing };
+
+//# sourceMappingURL=magnetic-select-spring.js.map

package/dist/components/magnetic-select/magnetic-select-spring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-select-spring.js","names":[],"sources":["../../../src/components/magnetic-select/magnetic-select-spring.ts"],"sourcesContent":["/*\n * A damped spring expressed as a CSS `linear()` easing, so a state-driven\n * spring (overshoot, settle) runs as a plain CSS transition: no animation\n * library, and the global reduced-motion rule and --motion-scale still apply.\n *\n * `bounce` 0..1 (0 = critically damped, no overshoot; 1 = very lively).\n * Returns the easing string. Pair it with a duration from the caller.\n * Browsers without linear() drop the declaration, so set it through a CSS\n * variable consumed inside `@supports (transition-timing-function: linear(0, 1))`\n * in the hoisted stylesheet, with a cubic-bezier fallback in the class list.\n */\nexport function springEasing(bounce: number, samples = 48): string {\n  const b = Math.min(Math.max(bounce, 0), 1);\n  const zeta = 1 - b * 0.7; // damping ratio 1 → 0.3\n  // Choose ω so the envelope has decayed to ~0.1% at t = 1.\n  const omega = Math.log(1000) / zeta;\n  const points: string[] = [];\n  for (let i = 0; i <= samples; i += 1) {\n    const t = i / samples;\n    let x: number;\n    if (zeta >= 0.999) {\n      x = 1 - Math.exp(-omega * t) * (1 + omega * t);\n    } else {\n      const wd = omega * Math.sqrt(1 - zeta * zeta);\n      x =\n        1 -\n        Math.exp(-zeta * omega * t) *\n          (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));\n    }\n    points.push(i === samples ? \"1\" : String(Math.round(x * 1000) / 1000));\n  }\n  return `linear(${points.join(\", \")})`;\n}\n"],"mappings":";AAWA,SAAgB,aAAa,QAAgB,UAAU,IAAY;CAEjE,MAAM,OAAO,IADH,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,CACvB,IAAI;CAErB,MAAM,QAAQ,KAAK,IAAI,GAAI,IAAI;CAC/B,MAAM,SAAmB,CAAC;CAC1B,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,KAAK,GAAG;EACpC,MAAM,IAAI,IAAI;EACd,IAAI;EACJ,IAAI,QAAQ,MACV,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ;OACvC;GACL,MAAM,KAAK,QAAQ,KAAK,KAAK,IAAI,OAAO,IAAI;GAC5C,IACE,IACA,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC,KACvB,KAAK,IAAI,KAAK,CAAC,IAAM,OAAO,QAAS,KAAM,KAAK,IAAI,KAAK,CAAC;EACjE;EACA,OAAO,KAAK,MAAM,UAAU,MAAM,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI,CAAC;CACvE;CACA,OAAO,UAAU,OAAO,KAAK,IAAI,EAAE;AACrC"}

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

@@ -0,0 +1,44 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/magnetic-select/magnetic-select.d.ts
+/** The skin: the visible disc inside each chip. */
+declare const magneticSelectVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+  selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MagneticSelectOption {
+  value: string;
+  /** Accessible name of the chip. Chips have no visible text of their own. */
+  label: string;
+  /** Image shown on the chip while it is selected (object-cover). Decorative. */
+  image?: string;
+  /** Content drawn on the chip in every state — an icon, initials, a swatch. */
+  content?: ReactNode;
+}
+interface MagneticSelectProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, Omit<VariantProps<typeof magneticSelectVariants>, "selected"> {
+  /** Up to 19 options: a centre, a ring of six and a ring of twelve. Three form a triangle. */
+  options: MagneticSelectOption[];
+  /** Controlled selected value. */
+  value?: string;
+  /** Initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the newly selected value. */
+  onValueChange?: (value: string) => void;
+  /** Magnet strength, 0–100: selected scale, push distance and tilt. */
+  pull?: number;
+  /** Overshoot, 0–100. 0 settles with no overshoot. */
+  bounce?: number;
+  /** Spring softness, 0–100. Above 50 the chips take longer to settle. */
+  give?: number;
+  /** Chip diameter in px. */
+  chipSize?: number;
+  /** Renders a hidden input so the value submits with a form. */
+  name?: string;
+  /** Disables every chip. */
+  disabled?: boolean;
+}
+/** A honeycomb radiogroup whose chosen chip magnetically pushes the rest apart. */
+declare function MagneticSelect({ ref, className, style, options, value: valueProp, defaultValue, onValueChange, pull, bounce, give, chipSize, stroke, name, disabled, onPointerMove, onPointerLeave, ...props }: MagneticSelectProps): import("react").JSX.Element;
+//#endregion
+export { MagneticSelect, MagneticSelectOption, MagneticSelectProps, magneticSelectVariants };
+//# sourceMappingURL=magnetic-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-select.d.ts","names":[],"sources":["../../../src/components/magnetic-select/magnetic-select.tsx"],"mappings":";;;;cA8CM,yBAAsB;;;6CAwB3B;UAEgB;EACf;;EAEA;;EAEA;;EAEA,UAAU;;UAGK,4BAEb,KAAK,yEACL,KAAK,oBAAoB;;EAE3B,SAAS;;EAET;;EAEA;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAsFc,iBACd,KACA,WACA,OACA,SACA,OAAO,WACP,cACA,eACA,MACA,QACA,MACA,UACA,QACA,MACA,UACA,eACA,mBACG,SACF,sCAAmB,IAAA"}

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

@@ -0,0 +1,330 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { springEasing } from "./magnetic-select-spring.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/magnetic-select/magnetic-select.tsx
+const PREFIX = "dowel-magnetic-select";
+const STYLES = `
+@supports (transition-timing-function: linear(0, 1)) {
+  [data-slot="magnetic-select-item"], [data-slot="magnetic-select-body"] {
+    transition-timing-function: var(--magnetic-select-spring);
+  }
+}
+`;
+/** The skin: the visible disc inside each chip. */
+const magneticSelectVariants = cva(cn("relative block size-full overflow-hidden rounded-full bg-card", "translate-x-[var(--lx,0px)] translate-y-[var(--ly,0px)]", "transition-[translate,background-color] duration-[calc(260ms*var(--motion-scale))] ease-[var(--ease-out-quint)]"), {
+	variants: {
+		/** An inset hairline ring on every skin — the workbench "Stroke" switch. */
+		stroke: {
+			true: "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:ring-1 after:ring-border after:content-[''] after:ring-inset",
+			false: ""
+		},
+		selected: {
+			true: "",
+			false: "group-hover/chip:bg-[color-mix(in_oklab,var(--color-foreground)_11%,var(--color-card))]"
+		}
+	},
+	defaultVariants: {
+		stroke: false,
+		selected: false
+	}
+});
+const AXIAL = [
+	{
+		q: 1,
+		r: 0
+	},
+	{
+		q: 1,
+		r: -1
+	},
+	{
+		q: 0,
+		r: -1
+	},
+	{
+		q: -1,
+		r: 0
+	},
+	{
+		q: -1,
+		r: 1
+	},
+	{
+		q: 0,
+		r: 1
+	}
+];
+/** Hex cells for `count` chips in reading order: a spiral from the centre, or a triangle for three. */
+function magneticSelectCells(count) {
+	let cells;
+	if (count === 3) cells = [
+		{
+			q: 0,
+			r: 0
+		},
+		{
+			q: -1,
+			r: 1
+		},
+		{
+			q: 0,
+			r: 1
+		}
+	];
+	else {
+		cells = [{
+			q: 0,
+			r: 0
+		}];
+		for (let ring = 1; cells.length < count; ring += 1) {
+			let cell = {
+				q: AXIAL[4].q * ring,
+				r: AXIAL[4].r * ring
+			};
+			for (const step of AXIAL) for (let i = 0; i < ring; i += 1) {
+				cells.push(cell);
+				cell = {
+					q: cell.q + step.q,
+					r: cell.r + step.r
+				};
+			}
+		}
+		cells = cells.slice(0, count);
+	}
+	return cells.sort((a, b) => a.r - b.r || a.q + a.r / 2 - (b.q + b.r / 2));
+}
+function hexDistance(a, b) {
+	const dq = a.q - b.q;
+	const dr = a.r - b.r;
+	return (Math.abs(dq) + Math.abs(dr) + Math.abs(dq + dr)) / 2;
+}
+const unit = (value) => Math.min(Math.max(value, 0), 100) / 100;
+const round = (value) => Math.round(value * 100) / 100;
+/** Where each chip rests when `selected` is chosen, in px along the inline axis. */
+function poses(cells, selected, pull, pitch) {
+	const p = unit(pull);
+	const push = 6.5 + 13.5 * p;
+	const tilt = 5 * p;
+	const row = pitch * Math.sqrt(3) / 2;
+	const at = (cell) => ({
+		x: pitch * (cell.q + cell.r / 2),
+		y: row * cell.r
+	});
+	const origin = selected >= 0 ? at(cells[selected]) : void 0;
+	return cells.map((cell, index) => {
+		if (!origin) return {
+			x: 0,
+			y: 0,
+			rotate: 0,
+			scale: 1
+		};
+		if (index === selected) return {
+			x: 0,
+			y: 0,
+			rotate: 0,
+			scale: round(1.16 + .22 * p)
+		};
+		const hops = hexDistance(cell, cells[selected]);
+		const here = at(cell);
+		const dx = here.x - origin.x;
+		const dy = here.y - origin.y;
+		const length = Math.hypot(dx, dy);
+		const ux = dx / length;
+		const falloff = hops === 1 ? 1 : .9;
+		return {
+			x: round(ux * push * falloff),
+			y: round(dy / length * push * falloff),
+			rotate: round(ux * tilt * (hops === 1 ? 1 : .7)),
+			scale: round(1 - (hops === 1 ? .05 + .075 * p : .04 + .055 * p))
+		};
+	});
+}
+/** Whether the element sits in right-to-left text. */
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl" || getComputedStyle(element).direction === "rtl";
+}
+/** A honeycomb radiogroup whose chosen chip magnetically pushes the rest apart. */
+function MagneticSelect({ ref, className, style, options, value: valueProp, defaultValue, onValueChange, pull = 55, bounce = 55, give = 50, chipSize = 44, stroke = false, name, disabled = false, onPointerMove, onPointerLeave, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const value = valueProp !== void 0 ? valueProp : uncontrolled;
+	const chips = useRef([]);
+	const root = useRef(null);
+	const items = options.slice(0, 19);
+	const cells = magneticSelectCells(items.length);
+	const selected = items.findIndex((option) => option.value === value);
+	const pitch = chipSize + 1;
+	const layout = poses(cells, selected, pull, pitch);
+	const ariaLabel = props["aria-label"];
+	const ariaLabelledBy = props["aria-labelledby"];
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || ariaLabel || ariaLabelledBy) return;
+		console.warn("[MagneticSelect] The radiogroup has no name. Pass aria-label or aria-labelledby.");
+	}, [ariaLabel, ariaLabelledBy]);
+	const row = pitch * Math.sqrt(3) / 2;
+	const centres = cells.map((cell) => ({
+		x: pitch * (cell.q + cell.r / 2),
+		y: row * cell.r
+	}));
+	const margin = chipSize * 26 / 44;
+	const minX = Math.min(...centres.map((c) => c.x), 0);
+	const minY = Math.min(...centres.map((c) => c.y), 0);
+	const width = Math.max(...centres.map((c) => c.x), 0) - minX + chipSize + margin * 2;
+	const height = Math.max(...centres.map((c) => c.y), 0) - minY + chipSize + margin * 2;
+	const looseness = Math.max(give - 50, 0) / 50;
+	const duration = Math.round(290 + 510 * Math.min(looseness, 1));
+	const easing = springEasing(unit(bounce) + .15 * Math.min(looseness, 1));
+	function select(index) {
+		const option = items[index];
+		if (!option || option.value === value) return;
+		if (valueProp === void 0) setUncontrolled(option.value);
+		onValueChange?.(option.value);
+	}
+	function handleKeyDown(event, index) {
+		const last = items.length - 1;
+		const rtl = isRtl(event.currentTarget);
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = index + 1;
+				break;
+			case "ArrowUp":
+				next = index - 1;
+				break;
+			case "ArrowRight":
+				next = rtl ? index - 1 : index + 1;
+				break;
+			case "ArrowLeft":
+				next = rtl ? index + 1 : index - 1;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = last;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		if (next > last) next = 0;
+		if (next < 0) next = last;
+		chips.current[next]?.focus();
+		select(next);
+	}
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		const element = root.current;
+		if (!element || event.pointerType !== "mouse") return;
+		const box = element.getBoundingClientRect();
+		const reach = (value, size) => `${String(round(Math.max(-1, Math.min(1, value / (size / 2 || 1))) * 2.5))}px`;
+		element.style.setProperty("--lx", reach(event.clientX - box.left - box.width / 2, box.width));
+		element.style.setProperty("--ly", reach(event.clientY - box.top - box.height / 2, box.height));
+	}
+	function handlePointerLeave(event) {
+		onPointerLeave?.(event);
+		root.current?.style.removeProperty("--lx");
+		root.current?.style.removeProperty("--ly");
+	}
+	const rootStyle = {
+		width: `${String(round(width))}px`,
+		height: `${String(round(height))}px`,
+		"--magnetic-select-spring": easing,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		/* @__PURE__ */ jsx("div", {
+			ref: (node) => {
+				root.current = node;
+				if (typeof ref === "function") ref(node);
+				else if (ref) ref.current = node;
+			},
+			role: "radiogroup",
+			"aria-disabled": disabled || void 0,
+			"data-slot": "magnetic-select",
+			className: cn("relative shrink-0 [--magnetic-select-dir:1] rtl:[--magnetic-select-dir:-1]", className),
+			style: rootStyle,
+			onPointerMove: handlePointerMove,
+			onPointerLeave: handlePointerLeave,
+			...props,
+			children: items.map((option, index) => {
+				const pose = layout[index];
+				const checked = index === selected;
+				const centre = centres[index];
+				const tabbable = selected >= 0 ? checked : index === 0;
+				const itemStyle = {
+					width: chipSize,
+					height: chipSize,
+					insetInlineStart: round(centre.x - minX + margin),
+					top: round(centre.y - minY + margin),
+					translate: `calc(var(--magnetic-select-dir) * ${String(pose.x)}px) ${String(pose.y)}px`,
+					rotate: `calc(var(--magnetic-select-dir) * ${String(pose.rotate)}deg)`,
+					scale: `1 ${String(pose.scale)}`,
+					transitionDuration: `calc(${String(duration)}ms * var(--motion-scale))`,
+					zIndex: checked ? 1 : void 0
+				};
+				return /* @__PURE__ */ jsx("button", {
+					ref: (node) => {
+						chips.current[index] = node;
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": checked,
+					"aria-label": option.label,
+					tabIndex: tabbable ? 0 : -1,
+					disabled,
+					"data-slot": "magnetic-select-item",
+					"data-state": checked ? "checked" : "unchecked",
+					className: cn("group/chip absolute rounded-full", "transition-[translate,rotate,scale] ease-[var(--ease-overshoot)]", "disabled:pointer-events-none disabled:opacity-55", focusRing),
+					style: itemStyle,
+					onClick: () => {
+						select(index);
+					},
+					onKeyDown: (event) => {
+						handleKeyDown(event, index);
+					},
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": "magnetic-select-body",
+						"aria-hidden": "true",
+						className: "block size-full transition-[scale] ease-[var(--ease-overshoot)]",
+						style: {
+							scale: `${String(pose.scale)} 1`,
+							transitionDuration: `calc(${String(Math.round(duration * .8))}ms * var(--motion-scale))`
+						},
+						children: /* @__PURE__ */ jsxs("span", {
+							"data-slot": "magnetic-select-skin",
+							className: magneticSelectVariants({
+								stroke,
+								selected: checked
+							}),
+							children: [/* @__PURE__ */ jsx("span", {
+								"data-slot": "magnetic-select-fill",
+								className: cn("absolute inset-0 transition-opacity duration-[calc(240ms*var(--motion-scale))]", option.image ? "bg-cover bg-center" : "bg-[radial-gradient(circle_at_30%_25%,var(--color-info),var(--color-primary)_55%,var(--color-success))]", checked ? "opacity-100" : "opacity-0"),
+								style: option.image ? { backgroundImage: `url(${JSON.stringify(option.image)})` } : void 0
+							}), option.content != null ? /* @__PURE__ */ jsx("span", {
+								className: "absolute inset-0 grid place-items-center",
+								children: option.content
+							}) : null]
+						})
+					})
+				}, option.value);
+			})
+		}),
+		name !== void 0 ? /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value ?? ""
+		}) : null
+	] });
+}
+//#endregion
+export { MagneticSelect, magneticSelectVariants };
+
+//# sourceMappingURL=magnetic-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"magnetic-select.js","names":[],"sources":["../../../src/components/magnetic-select/magnetic-select.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Magnetic select (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { springEasing } from \"./magnetic-select-spring\";\n\n/*\n * A radiogroup of round chips packed in a honeycomb. Choosing one grows it and\n * shoves the rest radially away, a little smaller and tilted, like marbles\n * pushed apart by a magnet.\n *\n * The source drives this with a JavaScript spring. Nothing here carries\n * gesture velocity, so it is a CSS transition instead: the spring becomes a\n * `linear()` easing (see magnetic-select-spring.ts), durations run through\n * --motion-scale, and the reduced-motion blanket settles every chip at once.\n *\n * Geometry is laid out from the inline start, so the honeycomb mirrors in RTL\n * on its own. Transforms are physical, so every horizontal offset and tilt is\n * multiplied by --magnetic-select-dir, which the `rtl:` variant flips to -1.\n */\n\nconst PREFIX = \"dowel-magnetic-select\";\n\nconst STYLES = `\n@supports (transition-timing-function: linear(0, 1)) {\n  [data-slot=\"magnetic-select-item\"], [data-slot=\"magnetic-select-body\"] {\n    transition-timing-function: var(--magnetic-select-spring);\n  }\n}\n`;\n\n/** The skin: the visible disc inside each chip. */\nconst magneticSelectVariants = cva(\n  cn(\n    \"relative block size-full overflow-hidden rounded-full bg-card\",\n    \"translate-x-[var(--lx,0px)] translate-y-[var(--ly,0px)]\",\n    \"transition-[translate,background-color] duration-[calc(260ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n  ),\n  {\n    variants: {\n      /** An inset hairline ring on every skin — the workbench \"Stroke\" switch. */\n      stroke: {\n        true: \"after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:ring-1 after:ring-border after:content-[''] after:ring-inset\",\n        false: \"\",\n      },\n      selected: {\n        true: \"\",\n        false:\n          \"group-hover/chip:bg-[color-mix(in_oklab,var(--color-foreground)_11%,var(--color-card))]\",\n      },\n    },\n    defaultVariants: {\n      stroke: false,\n      selected: false,\n    },\n  },\n);\n\nexport interface MagneticSelectOption {\n  value: string;\n  /** Accessible name of the chip. Chips have no visible text of their own. */\n  label: string;\n  /** Image shown on the chip while it is selected (object-cover). Decorative. */\n  image?: string;\n  /** Content drawn on the chip in every state — an icon, initials, a swatch. */\n  content?: ReactNode;\n}\n\nexport interface MagneticSelectProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    Omit<VariantProps<typeof magneticSelectVariants>, \"selected\"> {\n  /** Up to 19 options: a centre, a ring of six and a ring of twelve. Three form a triangle. */\n  options: MagneticSelectOption[];\n  /** Controlled selected value. */\n  value?: string;\n  /** Initial value when uncontrolled. */\n  defaultValue?: string;\n  /** Called with the newly selected value. */\n  onValueChange?: (value: string) => void;\n  /** Magnet strength, 0–100: selected scale, push distance and tilt. */\n  pull?: number;\n  /** Overshoot, 0–100. 0 settles with no overshoot. */\n  bounce?: number;\n  /** Spring softness, 0–100. Above 50 the chips take longer to settle. */\n  give?: number;\n  /** Chip diameter in px. */\n  chipSize?: number;\n  /** Renders a hidden input so the value submits with a form. */\n  name?: string;\n  /** Disables every chip. */\n  disabled?: boolean;\n}\n\ntype Cell = { q: number; r: number };\n\nconst AXIAL: Cell[] = [\n  { q: 1, r: 0 },\n  { q: 1, r: -1 },\n  { q: 0, r: -1 },\n  { q: -1, r: 0 },\n  { q: -1, r: 1 },\n  { q: 0, r: 1 },\n];\n\n/** Hex cells for `count` chips in reading order: a spiral from the centre, or a triangle for three. */\nfunction magneticSelectCells(count: number): Cell[] {\n  let cells: Cell[];\n  if (count === 3) {\n    cells = [\n      { q: 0, r: 0 },\n      { q: -1, r: 1 },\n      { q: 0, r: 1 },\n    ];\n  } else {\n    cells = [{ q: 0, r: 0 }];\n    for (let ring = 1; cells.length < count; ring += 1) {\n      let cell = { q: AXIAL[4]!.q * ring, r: AXIAL[4]!.r * ring };\n      for (const step of AXIAL) {\n        for (let i = 0; i < ring; i += 1) {\n          cells.push(cell);\n          cell = { q: cell.q + step.q, r: cell.r + step.r };\n        }\n      }\n    }\n    cells = cells.slice(0, count);\n  }\n  return cells.sort((a, b) => a.r - b.r || a.q + a.r / 2 - (b.q + b.r / 2));\n}\n\nfunction hexDistance(a: Cell, b: Cell): number {\n  const dq = a.q - b.q;\n  const dr = a.r - b.r;\n  return (Math.abs(dq) + Math.abs(dr) + Math.abs(dq + dr)) / 2;\n}\n\nconst unit = (value: number) => Math.min(Math.max(value, 0), 100) / 100;\nconst round = (value: number) => Math.round(value * 100) / 100;\n\ntype Pose = { x: number; y: number; rotate: number; scale: number };\n\n/** Where each chip rests when `selected` is chosen, in px along the inline axis. */\nfunction poses(cells: Cell[], selected: number, pull: number, pitch: number): Pose[] {\n  const p = unit(pull);\n  const push = 6.5 + 13.5 * p;\n  const tilt = 5 * p;\n  const row = (pitch * Math.sqrt(3)) / 2;\n  const at = (cell: Cell) => ({ x: pitch * (cell.q + cell.r / 2), y: row * cell.r });\n  const origin = selected >= 0 ? at(cells[selected]!) : undefined;\n  return cells.map((cell, index) => {\n    if (!origin) return { x: 0, y: 0, rotate: 0, scale: 1 };\n    if (index === selected) return { x: 0, y: 0, rotate: 0, scale: round(1.16 + 0.22 * p) };\n    const hops = hexDistance(cell, cells[selected]!);\n    const here = at(cell);\n    const dx = here.x - origin.x;\n    const dy = here.y - origin.y;\n    const length = Math.hypot(dx, dy);\n    const ux = dx / length;\n    const falloff = hops === 1 ? 1 : 0.9;\n    return {\n      x: round(ux * push * falloff),\n      y: round((dy / length) * push * falloff),\n      rotate: round(ux * tilt * (hops === 1 ? 1 : 0.7)),\n      scale: round(1 - (hops === 1 ? 0.05 + 0.075 * p : 0.04 + 0.055 * p)),\n    };\n  });\n}\n\n/** Whether the element sits in right-to-left text. */\nfunction isRtl(element: HTMLElement): boolean {\n  return (\n    element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\" ||\n    getComputedStyle(element).direction === \"rtl\"\n  );\n}\n\n/** A honeycomb radiogroup whose chosen chip magnetically pushes the rest apart. */\nexport function MagneticSelect({\n  ref,\n  className,\n  style,\n  options,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  pull = 55,\n  bounce = 55,\n  give = 50,\n  chipSize = 44,\n  stroke = false,\n  name,\n  disabled = false,\n  onPointerMove,\n  onPointerLeave,\n  ...props\n}: MagneticSelectProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const value = valueProp !== undefined ? valueProp : uncontrolled;\n  const chips = useRef<(HTMLButtonElement | null)[]>([]);\n  const root = useRef<HTMLDivElement | null>(null);\n\n  const items = options.slice(0, 19);\n  const cells = magneticSelectCells(items.length);\n  const selected = items.findIndex((option) => option.value === value);\n  const pitch = chipSize + 1;\n  const layout = poses(cells, selected, pull, pitch);\n\n  const ariaLabel = props[\"aria-label\"];\n  const ariaLabelledBy = props[\"aria-labelledby\"];\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || ariaLabel || ariaLabelledBy) return;\n    console.warn(\n      \"[MagneticSelect] The radiogroup has no name. Pass aria-label or aria-labelledby.\",\n    );\n  }, [ariaLabel, ariaLabelledBy]);\n\n  // Hex centres, shifted so the top-start chip sits one margin in.\n  const row = (pitch * Math.sqrt(3)) / 2;\n  const centres = cells.map((cell) => ({ x: pitch * (cell.q + cell.r / 2), y: row * cell.r }));\n  const margin = (chipSize * 26) / 44;\n  const minX = Math.min(...centres.map((c) => c.x), 0);\n  const minY = Math.min(...centres.map((c) => c.y), 0);\n  const width = Math.max(...centres.map((c) => c.x), 0) - minX + chipSize + margin * 2;\n  const height = Math.max(...centres.map((c) => c.y), 0) - minY + chipSize + margin * 2;\n\n  // Give ≤ 50 settles in ~290ms; beyond that it loosens to ~800ms with a touch more wobble.\n  const looseness = Math.max(give - 50, 0) / 50;\n  const duration = Math.round(290 + 510 * Math.min(looseness, 1));\n  const easing = springEasing(unit(bounce) + 0.15 * Math.min(looseness, 1));\n\n  function select(index: number) {\n    const option = items[index];\n    if (!option || option.value === value) return;\n    if (valueProp === undefined) setUncontrolled(option.value);\n    onValueChange?.(option.value);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, index: number) {\n    const last = items.length - 1;\n    const rtl = isRtl(event.currentTarget);\n    let next: number | undefined;\n    switch (event.key) {\n      case \"ArrowDown\":\n        next = index + 1;\n        break;\n      case \"ArrowUp\":\n        next = index - 1;\n        break;\n      case \"ArrowRight\":\n        next = rtl ? index - 1 : index + 1;\n        break;\n      case \"ArrowLeft\":\n        next = rtl ? index + 1 : index - 1;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = last;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    if (next > last) next = 0;\n    if (next < 0) next = last;\n    chips.current[next]?.focus();\n    select(next);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    onPointerMove?.(event);\n    const element = root.current;\n    if (!element || event.pointerType !== \"mouse\") return;\n    const box = element.getBoundingClientRect();\n    const reach = (value: number, size: number) =>\n      `${String(round(Math.max(-1, Math.min(1, value / (size / 2 || 1))) * 2.5))}px`;\n    element.style.setProperty(\n      \"--lx\",\n      reach(event.clientX - box.left - box.width / 2, box.width),\n    );\n    element.style.setProperty(\n      \"--ly\",\n      reach(event.clientY - box.top - box.height / 2, box.height),\n    );\n  }\n\n  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {\n    onPointerLeave?.(event);\n    root.current?.style.removeProperty(\"--lx\");\n    root.current?.style.removeProperty(\"--ly\");\n  }\n\n  const rootStyle: CSSProperties & Record<`--${string}`, string> = {\n    width: `${String(round(width))}px`,\n    height: `${String(round(height))}px`,\n    \"--magnetic-select-spring\": easing,\n    ...style,\n  };\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        ref={(node) => {\n          root.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        role=\"radiogroup\"\n        aria-disabled={disabled || undefined}\n        data-slot=\"magnetic-select\"\n        className={cn(\n          \"relative shrink-0 [--magnetic-select-dir:1] rtl:[--magnetic-select-dir:-1]\",\n          className,\n        )}\n        style={rootStyle}\n        onPointerMove={handlePointerMove}\n        onPointerLeave={handlePointerLeave}\n        {...props}\n      >\n        {items.map((option, index) => {\n          const pose = layout[index]!;\n          const checked = index === selected;\n          const centre = centres[index]!;\n          const tabbable = selected >= 0 ? checked : index === 0;\n          const itemStyle: CSSProperties = {\n            width: chipSize,\n            height: chipSize,\n            insetInlineStart: round(centre.x - minX + margin),\n            top: round(centre.y - minY + margin),\n            translate: `calc(var(--magnetic-select-dir) * ${String(pose.x)}px) ${String(pose.y)}px`,\n            rotate: `calc(var(--magnetic-select-dir) * ${String(pose.rotate)}deg)`,\n            scale: `1 ${String(pose.scale)}`,\n            transitionDuration: `calc(${String(duration)}ms * var(--motion-scale))`,\n            zIndex: checked ? 1 : undefined,\n          };\n          return (\n            <button\n              key={option.value}\n              ref={(node) => {\n                chips.current[index] = node;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={checked}\n              aria-label={option.label}\n              tabIndex={tabbable ? 0 : -1}\n              disabled={disabled}\n              data-slot=\"magnetic-select-item\"\n              data-state={checked ? \"checked\" : \"unchecked\"}\n              className={cn(\n                \"group/chip absolute rounded-full\",\n                \"transition-[translate,rotate,scale] ease-[var(--ease-overshoot)]\",\n                \"disabled:pointer-events-none disabled:opacity-55\",\n                focusRing,\n              )}\n              style={itemStyle}\n              onClick={() => {\n                select(index);\n              }}\n              onKeyDown={(event) => {\n                handleKeyDown(event, index);\n              }}\n            >\n              <span\n                data-slot=\"magnetic-select-body\"\n                aria-hidden=\"true\"\n                className=\"block size-full transition-[scale] ease-[var(--ease-overshoot)]\"\n                style={{\n                  scale: `${String(pose.scale)} 1`,\n                  transitionDuration: `calc(${String(Math.round(duration * 0.8))}ms * var(--motion-scale))`,\n                }}\n              >\n                <span\n                  data-slot=\"magnetic-select-skin\"\n                  className={magneticSelectVariants({ stroke, selected: checked })}\n                >\n                  <span\n                    data-slot=\"magnetic-select-fill\"\n                    className={cn(\n                      \"absolute inset-0 transition-opacity duration-[calc(240ms*var(--motion-scale))]\",\n                      option.image\n                        ? \"bg-cover bg-center\"\n                        : \"bg-[radial-gradient(circle_at_30%_25%,var(--color-info),var(--color-primary)_55%,var(--color-success))]\",\n                      checked ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                    style={\n                      option.image\n                        ? { backgroundImage: `url(${JSON.stringify(option.image)})` }\n                        : undefined\n                    }\n                  />\n                  {option.content != null ? (\n                    <span className=\"absolute inset-0 grid place-items-center\">\n                      {option.content}\n                    </span>\n                  ) : null}\n                </span>\n              </span>\n            </button>\n          );\n        })}\n      </div>\n      {name !== undefined ? <input type=\"hidden\" name={name} value={value ?? \"\"} /> : null}\n    </>\n  );\n}\n\nexport { magneticSelectVariants };\n"],"mappings":"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"}