@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/goo-ball/goo-ball.js

@@ -0,0 +1,295 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { MotionConfig, useMotionValue, useMotionValueEvent, useSpring, useVelocity } from "motion/react";
+//#region src/components/goo-ball/goo-ball.tsx
+const CENTRE = {
+	x: 50,
+	y: 50
+};
+const STEP = 2;
+const BIG_STEP = 10;
+const gooBallVariants = cva("", {
+	variants: { fill: {
+		light: "fill-card",
+		dark: "fill-foreground"
+	} },
+	defaultVariants: { fill: "light" }
+});
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function subscribeToMotionPreference(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeToMotionPreference, () => window.matchMedia(REDUCED_MOTION).matches, () => false);
+}
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function clampValue(value) {
+	return {
+		x: clamp(value.x, 0, 100),
+		y: clamp(value.y, 0, 100)
+	};
+}
+/** Spring settings for the feel props. Exported for tests and tuning. */
+function gooBallSpring(give, grip) {
+	const g = clamp(give, 10, 100);
+	return {
+		stiffness: 750 - g * 5,
+		damping: 26 - g * .16,
+		mass: 1.6 - clamp(grip, 0, 100) * .012
+	};
+}
+/**
+* A decorative, draggable jelly ball. The handle is a 2D slider
+* (`role="slider"`, arrow keys nudge, Shift nudges further, Home centres).
+* Size the well with `className` (default 18.75rem x 12.5rem). `aria-label` /
+* `aria-labelledby` name the handle (default "Goo ball (decorative)").
+*/
+function GooBall({ className, size = 56, stretch = 36, give = 50, grip = 50, fill, stroke = false, value, defaultValue = CENTRE, onValueChange, disabled = false, "aria-label": ariaLabel = "Goo ball (decorative)", "aria-labelledby": ariaLabelledBy, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(() => clampValue(defaultValue));
+	const position = clampValue(value ?? uncontrolled);
+	const [held, setHeld] = useState(false);
+	const [well, setWell] = useState({
+		width: 0,
+		height: 0
+	});
+	const reduceMotion = usePrefersReducedMotion();
+	const dir = Direction.useDirection();
+	const filterId = `dowel-goo-ball-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const wellRef = useRef(null);
+	const rectRef = useRef(null);
+	const drag = useRef(null);
+	const targetX = useMotionValue(0);
+	const targetY = useMotionValue(0);
+	const spring = gooBallSpring(give, grip);
+	const springX = useSpring(targetX, spring);
+	const springY = useSpring(targetY, spring);
+	const velocityX = useVelocity(springX);
+	const velocityY = useVelocity(springY);
+	const maxX = Math.max(0, well.width - size);
+	const maxY = Math.max(0, well.height - size);
+	const goalX = maxX * position.x / 100;
+	const goalY = maxY * position.y / 100;
+	const draw = useCallback(() => {
+		const rect = rectRef.current;
+		if (!rect) return;
+		const x = reduceMotion ? goalX : springX.get();
+		const y = reduceMotion ? goalY : springY.get();
+		const overX = x < 0 ? x : x > maxX ? x - maxX : 0;
+		const overY = y < 0 ? y : y > maxY ? y - maxY : 0;
+		const squashX = Math.min(Math.abs(overX) / size, .3);
+		const squashY = Math.min(Math.abs(overY) / size, .3);
+		const cx = clamp(x, 0, maxX) + size / 2 + Math.sign(overX) * size * squashX / 2;
+		const cy = clamp(y, 0, maxY) + size / 2 + Math.sign(overY) * size * squashY / 2;
+		const wallX = 1 - squashX + squashY * .6;
+		const wallY = 1 - squashY + squashX * .6;
+		const vx = reduceMotion ? 0 : velocityX.get();
+		const vy = reduceMotion ? 0 : velocityY.get();
+		const speed = Math.hypot(vx, vy);
+		const along = 1 + clamp(stretch, 0, 70) / 200 * Math.min(1, speed / 1200);
+		const across = 1 - (along - 1) * .7;
+		const angle = Math.atan2(vy, vx) * 180 / Math.PI;
+		const r = (n) => (Math.abs(n) < 5e-4 ? 0 : n).toFixed(3);
+		rect.setAttribute("transform", `translate(${r(cx)} ${r(cy)}) scale(${r(wallX)} ${r(wallY)}) rotate(${r(angle)}) scale(${r(along)} ${r(across)}) rotate(${r(-angle)}) translate(${r(-size / 2)} ${r(-size / 2)})`);
+	}, [
+		goalX,
+		goalY,
+		maxX,
+		maxY,
+		reduceMotion,
+		size,
+		springX,
+		springY,
+		stretch,
+		velocityX,
+		velocityY
+	]);
+	useMotionValueEvent(springX, "change", draw);
+	useMotionValueEvent(springY, "change", draw);
+	useMotionValueEvent(velocityX, "change", draw);
+	useMotionValueEvent(velocityY, "change", draw);
+	useLayoutEffect(() => {
+		const element = wellRef.current;
+		if (!element) return;
+		const measure = () => {
+			const { width, height } = element.getBoundingClientRect();
+			setWell((last) => last.width === width && last.height === height ? last : {
+				width,
+				height
+			});
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	const placedFor = useRef("");
+	useLayoutEffect(() => {
+		targetX.set(goalX);
+		targetY.set(goalY);
+		const frame = `${String(well.width)}x${String(well.height)}@${String(size)}`;
+		if (placedFor.current !== frame || reduceMotion) {
+			springX.jump(goalX);
+			springY.jump(goalY);
+			placedFor.current = frame;
+		}
+		draw();
+	}, [
+		goalX,
+		goalY,
+		reduceMotion,
+		well,
+		size,
+		targetX,
+		targetY,
+		springX,
+		springY,
+		draw
+	]);
+	function commit(next) {
+		const clamped = clampValue(next);
+		if (clamped.x === position.x && clamped.y === position.y) return;
+		if (value === void 0) setUncontrolled(clamped);
+		onValueChange?.(clamped);
+	}
+	function isRtl(element) {
+		return dir === "rtl" || element.closest("[dir]")?.getAttribute("dir") === "rtl";
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		const step = event.shiftKey ? BIG_STEP : STEP;
+		const flip = isRtl(event.currentTarget) ? -1 : 1;
+		const moves = {
+			ArrowLeft: [-step * flip, 0],
+			ArrowRight: [step * flip, 0],
+			ArrowUp: [0, -step],
+			ArrowDown: [0, step]
+		};
+		if (event.key === "Home") {
+			event.preventDefault();
+			commit(CENTRE);
+			return;
+		}
+		const move = moves[event.key];
+		if (!move) return;
+		event.preventDefault();
+		commit({
+			x: position.x + move[0],
+			y: position.y + move[1]
+		});
+	}
+	function handlePointerDown(event) {
+		if (disabled || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.focus();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		drag.current = {
+			id: event.pointerId,
+			x: event.clientX,
+			y: event.clientY,
+			from: position
+		};
+		setHeld(true);
+	}
+	function handlePointerMove(event) {
+		const start = drag.current;
+		const element = wellRef.current;
+		if (!start || start.id !== event.pointerId || !element) return;
+		const box = element.getBoundingClientRect();
+		const travelX = box.width - size;
+		const travelY = box.height - size;
+		const flip = isRtl(event.currentTarget) ? -1 : 1;
+		commit({
+			x: travelX > 0 ? start.from.x + (event.clientX - start.x) * flip / travelX * 100 : 50,
+			y: travelY > 0 ? start.from.y + (event.clientY - start.y) / travelY * 100 : 50
+		});
+	}
+	function handlePointerEnd(event) {
+		if (drag.current?.id !== event.pointerId) return;
+		drag.current = null;
+		setHeld(false);
+	}
+	const across = Math.round(position.x);
+	const down = Math.round(position.y);
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: wellRef,
+			"data-slot": "goo-ball",
+			"data-held": held ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0,
+			className: cn("relative h-[12.5rem] w-[18.75rem] max-w-full select-none", className),
+			...props,
+			children: [/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
+				"data-slot": "goo-ball-goo",
+				className: "pointer-events-none absolute inset-0 size-full overflow-visible rtl:-scale-x-100",
+				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					x: "-50%",
+					y: "-50%",
+					width: "200%",
+					height: "200%",
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: Math.max(2, size * .08)
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17" }),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							operator: "atop"
+						})
+					]
+				}) }), /* @__PURE__ */ jsx("g", {
+					filter: `url(#${filterId})`,
+					children: /* @__PURE__ */ jsx("rect", {
+						ref: rectRef,
+						"data-slot": "goo-ball-blob",
+						width: size,
+						height: size,
+						rx: size / 2,
+						className: cn(gooBallVariants({ fill }), stroke && "stroke-border"),
+						strokeWidth: stroke ? 1 : void 0
+					})
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-roledescription": "draggable ball",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": across,
+				"aria-valuetext": `${String(across)}% across, ${String(down)}% down`,
+				"aria-disabled": disabled || void 0,
+				"data-slot": "goo-ball-handle",
+				className: cn("absolute touch-none rounded-full", disabled ? "cursor-not-allowed opacity-55" : held ? "cursor-grabbing" : "cursor-grab", focusRing),
+				style: {
+					width: size,
+					height: size,
+					insetInlineStart: `calc((100% - ${String(size)}px) * ${String(position.x / 100)})`,
+					top: `calc((100% - ${String(size)}px) * ${String(position.y / 100)})`
+				},
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerEnd,
+				onPointerCancel: handlePointerEnd
+			})]
+		})
+	});
+}
+//#endregion
+export { GooBall, gooBallSpring, gooBallVariants };
+
+//# sourceMappingURL=goo-ball.js.map

package/dist/components/goo-ball/goo-ball.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goo-ball.js","names":[],"sources":["../../../src/components/goo-ball/goo-ball.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Dragging ball (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  MotionConfig,\n  useMotionValue,\n  useMotionValueEvent,\n  useSpring,\n  useVelocity,\n} from \"motion/react\";\nimport { Direction } from \"radix-ui\";\nimport {\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A jelly ball in an invisible well. Drag it (or nudge it with the arrow keys)\n * and the blob drawn under the handle chases it on a spring, stretching along\n * its velocity and squashing flat against the walls.\n *\n * This is continuous pointer-following physics, which is one of the places\n * `motion` is allowed (ADR 0014): the stretch is read from the spring's own\n * velocity, which no CSS transition knows. The handle itself moves 1:1 and is\n * the real control — a 2D slider — so the goo is decoration drawn behind it\n * (aria-hidden). Under reduced motion the spring is skipped: the ball sits at\n * the handle, round, with no stretch or wobble.\n */\n\nexport interface GooBallValue {\n  /** Percent of travel from the inline-start wall (0-100). */\n  x: number;\n  /** Percent of travel from the top wall (0-100). */\n  y: number;\n}\n\nconst CENTRE: GooBallValue = { x: 50, y: 50 };\nconst STEP = 2;\nconst BIG_STEP = 10;\n\nconst gooBallVariants = cva(\"\", {\n  variants: {\n    fill: {\n      light: \"fill-card\",\n      dark: \"fill-foreground\",\n    },\n  },\n  defaultVariants: { fill: \"light\" },\n});\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribeToMotionPreference(onChange: () => void) {\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\nfunction usePrefersReducedMotion() {\n  return useSyncExternalStore(\n    subscribeToMotionPreference,\n    () => window.matchMedia(REDUCED_MOTION).matches,\n    () => false,\n  );\n}\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction clampValue(value: GooBallValue): GooBallValue {\n  return { x: clamp(value.x, 0, 100), y: clamp(value.y, 0, 100) };\n}\n\n/** Spring settings for the feel props. Exported for tests and tuning. */\nexport function gooBallSpring(give: number, grip: number) {\n  const g = clamp(give, 10, 100);\n  return {\n    stiffness: 750 - g * 5,\n    damping: 26 - g * 0.16,\n    mass: 1.6 - clamp(grip, 0, 100) * 0.012,\n  };\n}\n\nexport interface GooBallProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof gooBallVariants> {\n  /** Ball diameter in px (bencho: 32-84). */\n  size?: number;\n  /** How far the blob deforms with speed, 0-70. 0 keeps it a rigid circle. */\n  stretch?: number;\n  /** Spring softness, 10-100: how slow and wobbly the settle is. */\n  give?: number;\n  /** How tightly the blob tracks the handle, 0-100. Lower lags more. */\n  grip?: number;\n  /** Adds a 1px hairline ring in the border colour. */\n  stroke?: boolean;\n  /** Position in percent of travel (controlled). */\n  value?: GooBallValue;\n  /** Starting position (uncontrolled). Defaults to the centre. */\n  defaultValue?: GooBallValue;\n  /** Called with the new position as the ball is dragged or nudged. */\n  onValueChange?: (value: GooBallValue) => void;\n  /** Stops dragging and keyboard nudging. */\n  disabled?: boolean;\n}\n\n/**\n * A decorative, draggable jelly ball. The handle is a 2D slider\n * (`role=\"slider\"`, arrow keys nudge, Shift nudges further, Home centres).\n * Size the well with `className` (default 18.75rem x 12.5rem). `aria-label` /\n * `aria-labelledby` name the handle (default \"Goo ball (decorative)\").\n */\nexport function GooBall({\n  className,\n  size = 56,\n  stretch = 36,\n  give = 50,\n  grip = 50,\n  fill,\n  stroke = false,\n  value,\n  defaultValue = CENTRE,\n  onValueChange,\n  disabled = false,\n  \"aria-label\": ariaLabel = \"Goo ball (decorative)\",\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: GooBallProps) {\n  const [uncontrolled, setUncontrolled] = useState(() => clampValue(defaultValue));\n  const position = clampValue(value ?? uncontrolled);\n  const [held, setHeld] = useState(false);\n  const [well, setWell] = useState({ width: 0, height: 0 });\n  const reduceMotion = usePrefersReducedMotion();\n  const dir = Direction.useDirection();\n  const filterId = `dowel-goo-ball-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const wellRef = useRef<HTMLDivElement>(null);\n  const rectRef = useRef<SVGRectElement>(null);\n  const drag = useRef<{ id: number; x: number; y: number; from: GooBallValue } | null>(null);\n\n  const targetX = useMotionValue(0);\n  const targetY = useMotionValue(0);\n  const spring = gooBallSpring(give, grip);\n  const springX = useSpring(targetX, spring);\n  const springY = useSpring(targetY, spring);\n  const velocityX = useVelocity(springX);\n  const velocityY = useVelocity(springY);\n\n  const maxX = Math.max(0, well.width - size);\n  const maxY = Math.max(0, well.height - size);\n  const goalX = (maxX * position.x) / 100;\n  const goalY = (maxY * position.y) / 100;\n\n  const draw = useCallback(() => {\n    const rect = rectRef.current;\n    if (!rect) return;\n    const x = reduceMotion ? goalX : springX.get();\n    const y = reduceMotion ? goalY : springY.get();\n    // Past a wall the blob flattens against it instead of passing through.\n    const overX = x < 0 ? x : x > maxX ? x - maxX : 0;\n    const overY = y < 0 ? y : y > maxY ? y - maxY : 0;\n    const squashX = Math.min(Math.abs(overX) / size, 0.3);\n    const squashY = Math.min(Math.abs(overY) / size, 0.3);\n    const cx = clamp(x, 0, maxX) + size / 2 + (Math.sign(overX) * size * squashX) / 2;\n    const cy = clamp(y, 0, maxY) + size / 2 + (Math.sign(overY) * size * squashY) / 2;\n    const wallX = 1 - squashX + squashY * 0.6;\n    const wallY = 1 - squashY + squashX * 0.6;\n    // Along the velocity it stretches; across it thins.\n    const vx = reduceMotion ? 0 : velocityX.get();\n    const vy = reduceMotion ? 0 : velocityY.get();\n    const speed = Math.hypot(vx, vy);\n    const along = 1 + (clamp(stretch, 0, 70) / 200) * Math.min(1, speed / 1200);\n    const across = 1 - (along - 1) * 0.7;\n    const angle = (Math.atan2(vy, vx) * 180) / Math.PI;\n    const r = (n: number) => (Math.abs(n) < 5e-4 ? 0 : n).toFixed(3);\n    rect.setAttribute(\n      \"transform\",\n      `translate(${r(cx)} ${r(cy)}) scale(${r(wallX)} ${r(wallY)}) rotate(${r(angle)}) ` +\n        `scale(${r(along)} ${r(across)}) rotate(${r(-angle)}) translate(${r(-size / 2)} ${r(-size / 2)})`,\n    );\n  }, [\n    goalX,\n    goalY,\n    maxX,\n    maxY,\n    reduceMotion,\n    size,\n    springX,\n    springY,\n    stretch,\n    velocityX,\n    velocityY,\n  ]);\n\n  useMotionValueEvent(springX, \"change\", draw);\n  useMotionValueEvent(springY, \"change\", draw);\n  useMotionValueEvent(velocityX, \"change\", draw);\n  useMotionValueEvent(velocityY, \"change\", draw);\n\n  // Measure the well so the goo, drawn in px, lands under the handle.\n  useLayoutEffect(() => {\n    const element = wellRef.current;\n    if (!element) return;\n    const measure = () => {\n      const { width, height } = element.getBoundingClientRect();\n      setWell((last) =>\n        last.width === width && last.height === height ? last : { width, height },\n      );\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  // The first placement, a resize and reduced motion all jump; a move springs.\n  const placedFor = useRef(\"\");\n  useLayoutEffect(() => {\n    targetX.set(goalX);\n    targetY.set(goalY);\n    const frame = `${String(well.width)}x${String(well.height)}@${String(size)}`;\n    if (placedFor.current !== frame || reduceMotion) {\n      springX.jump(goalX);\n      springY.jump(goalY);\n      placedFor.current = frame;\n    }\n    draw();\n  }, [goalX, goalY, reduceMotion, well, size, targetX, targetY, springX, springY, draw]);\n\n  function commit(next: GooBallValue) {\n    const clamped = clampValue(next);\n    if (clamped.x === position.x && clamped.y === position.y) return;\n    if (value === undefined) setUncontrolled(clamped);\n    onValueChange?.(clamped);\n  }\n\n  function isRtl(element: Element) {\n    return dir === \"rtl\" || element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLSpanElement>) {\n    if (disabled) return;\n    const step = event.shiftKey ? BIG_STEP : STEP;\n    const flip = isRtl(event.currentTarget) ? -1 : 1;\n    const moves: Record<string, [number, number]> = {\n      ArrowLeft: [-step * flip, 0],\n      ArrowRight: [step * flip, 0],\n      ArrowUp: [0, -step],\n      ArrowDown: [0, step],\n    };\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(CENTRE);\n      return;\n    }\n    const move = moves[event.key];\n    if (!move) return;\n    event.preventDefault();\n    commit({ x: position.x + move[0], y: position.y + move[1] });\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLSpanElement>) {\n    if (disabled || event.button !== 0) return;\n    event.preventDefault();\n    event.currentTarget.focus();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, from: position };\n    setHeld(true);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLSpanElement>) {\n    const start = drag.current;\n    const element = wellRef.current;\n    if (!start || start.id !== event.pointerId || !element) return;\n    const box = element.getBoundingClientRect();\n    const travelX = box.width - size;\n    const travelY = box.height - size;\n    const flip = isRtl(event.currentTarget) ? -1 : 1;\n    commit({\n      x: travelX > 0 ? start.from.x + (((event.clientX - start.x) * flip) / travelX) * 100 : 50,\n      y: travelY > 0 ? start.from.y + ((event.clientY - start.y) / travelY) * 100 : 50,\n    });\n  }\n\n  function handlePointerEnd(event: PointerEvent<HTMLSpanElement>) {\n    if (drag.current?.id !== event.pointerId) return;\n    drag.current = null;\n    setHeld(false);\n  }\n\n  const across = Math.round(position.x);\n  const down = Math.round(position.y);\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <div\n        ref={wellRef}\n        data-slot=\"goo-ball\"\n        data-held={held ? \"\" : undefined}\n        data-disabled={disabled ? \"\" : undefined}\n        className={cn(\"relative h-[12.5rem] w-[18.75rem] max-w-full select-none\", className)}\n        {...props}\n      >\n        <svg\n          aria-hidden=\"true\"\n          data-slot=\"goo-ball-goo\"\n          className=\"pointer-events-none absolute inset-0 size-full overflow-visible rtl:-scale-x-100\"\n        >\n          <defs>\n            <filter id={filterId} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n              <feGaussianBlur in=\"SourceGraphic\" stdDeviation={Math.max(2, size * 0.08)} />\n              <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17\" />\n              <feComposite in=\"SourceGraphic\" operator=\"atop\" />\n            </filter>\n          </defs>\n          <g filter={`url(#${filterId})`}>\n            <rect\n              ref={rectRef}\n              data-slot=\"goo-ball-blob\"\n              width={size}\n              height={size}\n              rx={size / 2}\n              className={cn(gooBallVariants({ fill }), stroke && \"stroke-border\")}\n              strokeWidth={stroke ? 1 : undefined}\n            />\n          </g>\n        </svg>\n        <span\n          role=\"slider\"\n          tabIndex={disabled ? -1 : 0}\n          aria-label={ariaLabelledBy ? undefined : ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-roledescription=\"draggable ball\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={across}\n          aria-valuetext={`${String(across)}% across, ${String(down)}% down`}\n          aria-disabled={disabled || undefined}\n          data-slot=\"goo-ball-handle\"\n          className={cn(\n            \"absolute touch-none rounded-full\",\n            disabled\n              ? \"cursor-not-allowed opacity-55\"\n              : held\n                ? \"cursor-grabbing\"\n                : \"cursor-grab\",\n            focusRing,\n          )}\n          style={{\n            width: size,\n            height: size,\n            insetInlineStart: `calc((100% - ${String(size)}px) * ${String(position.x / 100)})`,\n            top: `calc((100% - ${String(size)}px) * ${String(position.y / 100)})`,\n          }}\n          onKeyDown={handleKeyDown}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerEnd}\n          onPointerCancel={handlePointerEnd}\n        />\n      </div>\n    </MotionConfig>\n  );\n}\n\nexport { gooBallVariants };\n"],"mappings":"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"}

package/dist/components/goo-ball/index.d.ts

@@ -0,0 +1,2 @@
+import { GooBall, GooBallProps, GooBallValue, gooBallSpring, gooBallVariants } from "./goo-ball.js";
+export { GooBall, type GooBallProps, type GooBallValue, gooBallSpring, gooBallVariants };

package/dist/components/goo-ball/index.js

@@ -0,0 +1,2 @@
+import { GooBall, gooBallSpring, gooBallVariants } from "./goo-ball.js";
+export { GooBall, gooBallSpring, gooBallVariants };

package/dist/components/goo-ball/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/goo-ball/meta.ts
+const meta = defineMeta({
+	name: "goo-ball",
+	title: "Goo Ball",
+	description: "A decorative jelly ball you drag around a well: it stretches along its velocity and squashes against the walls.",
+	category: "effects",
+	status: "beta",
+	dependencies: [
+		"class-variance-authority",
+		"motion",
+		"radix-ui"
+	],
+	registryDependencies: [],
+	files: ["goo-ball.tsx"],
+	a11y: "The handle is a 2D slider (role=\"slider\", aria-roledescription \"draggable ball\") labelled as decorative by default (\"Goo ball (decorative)\"), with aria-valuetext \"<x>% across, <y>% down\". Arrow keys nudge it 2% (Shift: 10%), mirrored in right-to-left layouts; Home centres it; it has the shared focus ring. The gooey blob is an aria-hidden SVG drawn behind the handle. Under reduced motion the spring is skipped: the ball sits exactly at the handle with no stretch or wobble."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/goo-ball/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/goo-ball/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"goo-ball\",\n  title: \"Goo Ball\",\n  description:\n    \"A decorative jelly ball you drag around a well: it stretches along its velocity and squashes against the walls.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"goo-ball.tsx\"],\n  a11y:\n    'The handle is a 2D slider (role=\"slider\", aria-roledescription \"draggable ball\") labelled as decorative by ' +\n    'default (\"Goo ball (decorative)\"), with aria-valuetext \"<x>% across, <y>% down\". Arrow keys nudge it 2% ' +\n    \"(Shift: 10%), mirrored in right-to-left layouts; Home centres it; it has the shared focus ring. The gooey \" +\n    \"blob is an aria-hidden SVG drawn behind the handle. Under reduced motion the spring is skipped: the ball \" +\n    \"sits exactly at the handle with no stretch or wobble.\",\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,cAAc;CACtB,MACE;AAKJ,CAAC"}

package/dist/components/goo-tabs/goo-tabs.d.ts

@@ -0,0 +1,37 @@
+import { Tabs, TabsContent, TabsContentProps, TabsListProps, TabsTriggerProps } from "../tabs/tabs.js";
+import "../tabs/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/goo-tabs/goo-tabs.d.ts
+type GooTabsProps = ComponentPropsWithRef<typeof Tabs>;
+/** The tabs root: value, defaultValue, onValueChange, orientation, dir. */
+declare function GooTabs({ className, ...props }: GooTabsProps): import("react").JSX.Element;
+declare const gooTabsListVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GooTabsListProps extends Omit<TabsListProps, "variant" | "indicator">, VariantProps<typeof gooTabsListVariants> {
+  /** 0–100: how far the stretch phase reaches toward the full old→new span. 0 slides. */
+  dilate?: number;
+  /** 0–100: overshoot of the settle phase. */
+  bounce?: number;
+  /** 0–100: stretch/settle take 304/672ms at 0, 190/420ms at 50, 76/168ms at 100. */
+  speed?: number;
+  /** Radius of the bar and the pill, in px. */
+  corner?: number;
+  /** Padding of the bar (the pill's inset), in px. */
+  hug?: number;
+  /** Melt the pill and its trailing blob together with an SVG goo filter. */
+  goo?: boolean;
+}
+/** The bar: a tablist hosting the indicator. */
+declare function GooTabsList({ className, style, children, dilate, bounce, speed, corner, hug, goo, tone, stroke, ...props }: GooTabsListProps): import("react").JSX.Element;
+type GooTabsTriggerProps = Omit<TabsTriggerProps, "asChild" | "variant">;
+/** An icon tab. Icon-only tabs must be named with aria-label (it warns in development). */
+declare function GooTabsTrigger({ className, children, ...props }: GooTabsTriggerProps): import("react").JSX.Element;
+type GooTabsContentProps = TabsContentProps;
+/** A panel. Dowel's TabsContent, re-exported under this family's name. */
+declare const GooTabsContent: typeof TabsContent;
+//#endregion
+export { GooTabs, GooTabsContent, GooTabsContentProps, GooTabsList, GooTabsListProps, GooTabsProps, GooTabsTrigger, GooTabsTriggerProps, gooTabsListVariants };
+//# sourceMappingURL=goo-tabs.d.ts.map

package/dist/components/goo-tabs/goo-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"goo-tabs.d.ts","names":[],"sources":["../../../src/components/goo-tabs/goo-tabs.tsx"],"mappings":";;;;;KA8CY,eAAe,6BAA6B;;iBAGxC,UAAU,cAAc,SAAS,+BAAY,IAAA;cAUvD,sBAAmB;;;6CAiBxB;UAEgB,yBAEb,KAAK,yCACL,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAIc,cACd,WACA,OACA,UACA,QACA,QACA,OACA,QACA,KACA,KACA,MACA,WACG,SACF,mCAAgB,IAAA;KA2OP,sBAAsB,KAAK;;iBAGvB,iBAAiB,WAAW,aAAa,SAAS,sCAAmB,IAAA;KAmCzE,sBAAsB;;cAGrB,uBAAc"}