@dowel-ui/react 0.7.0 → 0.8.0

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

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/magnetic-select/meta.ts
+const meta = defineMeta({
+	name: "magnetic-select",
+	title: "Magnetic Select",
+	description: "A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["magnetic-select.tsx", "magnetic-select-spring.ts"],
+	a11y: "A role=\"radiogroup\" of native buttons with role=\"radio\" and aria-checked, named by each option's `label`; the group needs aria-label or aria-labelledby and warns in development without one. Roving tabindex: Tab reaches the selected chip (or the first), arrow keys move focus and select with wrap-around (Left/Right follow the reading direction in RTL), Home/End jump to the ends. Images and skins are decorative. The spring is a CSS transition, so under reduced motion every chip settles at its final pose immediately; cursor parallax is mouse-only."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/magnetic-select/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"magnetic-select\",\n  title: \"Magnetic Select\",\n  description:\n    \"A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"magnetic-select.tsx\", \"magnetic-select-spring.ts\"],\n  a11y:\n    'A role=\"radiogroup\" of native buttons with role=\"radio\" and aria-checked, named by each option\\'s `label`; the group ' +\n    \"needs aria-label or aria-labelledby and warns in development without one. Roving tabindex: Tab reaches the \" +\n    \"selected chip (or the first), arrow keys move focus and select with wrap-around (Left/Right follow the reading \" +\n    \"direction in RTL), Home/End jump to the ends. Images and skins are decorative. The spring is a CSS transition, \" +\n    \"so under reduced motion every chip settles at its final pose immediately; cursor parallax is mouse-only.\",\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,uBAAuB,2BAA2B;CAC1D,MACE;AAKJ,CAAC"}

package/dist/components/magnify-dock/index.d.ts

@@ -0,0 +1,2 @@
+import { MagnifyDock, MagnifyDockItem, MagnifyDockProps, magnifyDockVariants, magnifyFalloff } from "./magnify-dock.js";
+export { MagnifyDock, type MagnifyDockItem, type MagnifyDockProps, magnifyDockVariants, magnifyFalloff };

package/dist/components/magnify-dock/index.js

@@ -0,0 +1,2 @@
+import { MagnifyDock, magnifyDockVariants, magnifyFalloff } from "./magnify-dock.js";
+export { MagnifyDock, magnifyDockVariants, magnifyFalloff };

package/dist/components/magnify-dock/magnify-dock.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/magnify-dock/magnify-dock.d.ts
+/** Share of the effect at distance `d` from the lens: cos²(π·d / 2(reach+1)). */
+declare function magnifyFalloff(distance: number, reach: number): number;
+interface MagnifyDockItem {
+  value: string;
+  /** Names the item and fills its tooltip. */
+  label: string;
+  /** Decorative glyph, hidden from assistive technology. */
+  icon: ReactNode;
+  /** Renders a link instead of a button. */
+  href?: string;
+  disabled?: boolean;
+}
+declare const magnifyDockVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MagnifyDockProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "children">, VariantProps<typeof magnifyDockVariants> {
+  items: MagnifyDockItem[];
+  /** The active item (controlled). */
+  value?: string;
+  /** The active item at first (uncontrolled). */
+  defaultValue?: string;
+  /** Called when an item is activated. */
+  onValueChange?: (value: string) => void;
+  /** Scale of the lens item, 1–2. */
+  magnify?: number;
+  /** How far the lens item rises, 0–22 px. */
+  lift?: number;
+  /** How many neighbours on each side are affected, 0–4. */
+  reach?: number;
+  /** 1px inset hairline around the dock. */
+  stroke?: boolean;
+}
+/** A dock of icon buttons or links that magnify on hover and keyboard focus. */
+declare function MagnifyDock({ className, items, value, defaultValue, onValueChange, magnify, lift, reach, fill, stroke, onKeyDown, onPointerLeave, onBlur, onPointerDown, ...props }: MagnifyDockProps): import("react").JSX.Element;
+//#endregion
+export { MagnifyDock, MagnifyDockItem, MagnifyDockProps, magnifyDockVariants, magnifyFalloff };
+//# sourceMappingURL=magnify-dock.d.ts.map

package/dist/components/magnify-dock/magnify-dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnify-dock.d.ts","names":[],"sources":["../../../src/components/magnify-dock/magnify-dock.tsx"],"mappings":";;;;iBAuCgB,eAAe,kBAAkB;UAMhC;EACf;;EAEA;;EAEA,MAAM;;EAEN;EACA;;cAGI,sBAAmB;;6CAYxB;UAEgB,yBAEb,KAAK,4DACL,oBAAoB;EACtB,OAAO;;EAEP;;EAEA;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;;;iBAIc,cACd,WACA,OACA,OACA,cACA,eACA,SACA,MACA,OACA,MACA,QACA,WACA,gBACA,QACA,kBACG,SACF,mCAAgB,IAAA"}