@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1,286 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs/tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/goo-tabs/goo-tabs.tsx
+const REDUCE = "(prefers-reduced-motion: reduce)";
+const STRETCH_EASE = "cubic-bezier(.32,.72,.24,1)";
+/** The tabs root: value, defaultValue, onValueChange, orientation, dir. */
+function GooTabs({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs, {
+		"data-slot": "goo-tabs",
+		className: cn("flex flex-col gap-3 data-[orientation=vertical]:flex-row", className),
+		...props
+	});
+}
+const gooTabsListVariants = cva("relative isolate gap-0.5 shadow-sm data-[orientation=vertical]:flex-col", {
+	variants: {
+		/** `default` is the card surface; `inverted` swaps it for the ink colour. */
+		tone: {
+			default: "bg-card text-foreground",
+			inverted: "bg-foreground text-background"
+		},
+		/** A 1px inset hairline around the bar. */
+		stroke: {
+			true: "ring-1 ring-border ring-inset",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		tone: "default",
+		stroke: false
+	}
+});
+/** The bar: a tablist hosting the indicator. */
+function GooTabsList({ className, style, children, dilate = 100, bounce = 50, speed = 50, corner = 26, hug = 6, goo = true, tone, stroke, ...props }) {
+	return /* @__PURE__ */ jsxs(TabsList, {
+		"data-slot": "goo-tabs-list",
+		className: cn(gooTabsListVariants({
+			tone,
+			stroke
+		}), className),
+		style: {
+			padding: hug,
+			borderRadius: corner,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(GooIndicator, {
+			dilate,
+			bounce,
+			speed,
+			corner,
+			goo
+		}), children]
+	});
+}
+const clamp = (value) => Math.min(Math.max(value, 0), 100);
+/** Stretch and settle durations, interpolated from the source's three stops. */
+function gooTabsTimings(speed) {
+	const s = clamp(speed);
+	return {
+		stretch: 304 - 2.28 * s,
+		settle: 672 - 5.04 * s
+	};
+}
+/** The pill over the old→new span, `dilate` of the way from the target. */
+function gooTabsStretch(from, to, dilate, vertical) {
+	const d = clamp(dilate) / 100;
+	const [pos, size] = vertical ? ["y", "h"] : ["x", "w"];
+	const spanStart = Math.min(from[pos], to[pos]);
+	const spanEnd = Math.max(from[pos] + from[size], to[pos] + to[size]);
+	const start = to[pos] + (spanStart - to[pos]) * d;
+	const end = to[pos] + to[size] + (spanEnd - to[pos] - to[size]) * d;
+	return {
+		...to,
+		[pos]: start,
+		[size]: end - start
+	};
+}
+/** The active tab's box relative to the list, from its offsets. */
+function measure(list) {
+	const active = list.querySelector("[role=\"tab\"][data-state=\"active\"]");
+	if (!active) return null;
+	if (active.offsetParent === list) return {
+		x: active.offsetLeft,
+		y: active.offsetTop,
+		w: active.offsetWidth,
+		h: active.offsetHeight
+	};
+	const from = list.getBoundingClientRect();
+	const to = active.getBoundingClientRect();
+	return {
+		x: to.left - from.left - list.clientLeft,
+		y: to.top - from.top - list.clientTop,
+		w: to.width,
+		h: to.height
+	};
+}
+const same = (a, b) => a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+function subscribe(onChange) {
+	const query = window.matchMedia(REDUCE);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+/** Whether the goo filter can run: supported, and motion not reduced. */
+function gooSnapshot() {
+	return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("filter", "url(#x)") && !window.matchMedia(REDUCE).matches;
+}
+const ms = (value) => `calc(${String(Math.round(value))}ms * var(--motion-scale))`;
+function GooIndicator({ dilate, bounce, speed, corner, goo }) {
+	const node = useRef(null);
+	const [state, setState] = useState(null);
+	const target = useRef(null);
+	const timers = useRef([]);
+	const feel = useRef({
+		dilate,
+		speed
+	});
+	const filterId = `dowel-goo-tabs-${useId().replace(/[^\w-]/g, "")}`;
+	const gooOn = useSyncExternalStore(subscribe, gooSnapshot, () => false) && goo;
+	useEffect(() => {
+		feel.current = {
+			dilate,
+			speed
+		};
+	}, [dilate, speed]);
+	const update = useCallback((animate) => {
+		const list = node.current?.parentElement;
+		if (!list) return;
+		const next = measure(list);
+		const previous = target.current;
+		if (!next || previous && same(previous, next)) return;
+		target.current = next;
+		for (const timer of timers.current) clearTimeout(timer);
+		timers.current = [];
+		if (!animate || !previous || window.matchMedia(REDUCE).matches) {
+			setState({
+				box: next,
+				phase: "idle"
+			});
+			return;
+		}
+		const vertical = list.getAttribute("aria-orientation") === "vertical";
+		const { stretch, settle } = gooTabsTimings(feel.current.speed);
+		setState({
+			box: gooTabsStretch(previous, next, feel.current.dilate, vertical),
+			phase: "stretch",
+			from: previous
+		});
+		timers.current.push(setTimeout(() => {
+			setState({
+				box: next,
+				phase: "settle",
+				from: previous
+			});
+			timers.current.push(setTimeout(() => setState({
+				box: next,
+				phase: "idle"
+			}), settle));
+		}, stretch * .82));
+	}, []);
+	useLayoutEffect(() => {
+		const list = node.current?.parentElement;
+		if (!list) return;
+		update(false);
+		const mutations = new MutationObserver(() => update(true));
+		mutations.observe(list, {
+			attributes: true,
+			attributeFilter: ["data-state"],
+			subtree: true
+		});
+		const resizes = new ResizeObserver(() => update(false));
+		resizes.observe(list);
+		for (const tab of list.querySelectorAll("[role=\"tab\"]")) resizes.observe(tab);
+		return () => {
+			mutations.disconnect();
+			resizes.disconnect();
+			for (const timer of timers.current) clearTimeout(timer);
+		};
+	}, [update]);
+	const { stretch, settle } = gooTabsTimings(speed);
+	const b = clamp(bounce) / 100;
+	const y1 = (k) => String(Math.round((1 + k * b) * 1e3) / 1e3);
+	const move = `cubic-bezier(.28,${y1(.56)},.36,1)`;
+	const size = `cubic-bezier(.24,${y1(.68)},.38,1)`;
+	const phase = state?.phase ?? "idle";
+	const transition = phase === "stretch" ? [
+		"transform",
+		"width",
+		"height"
+	].map((p) => `${p} ${ms(stretch)} ${STRETCH_EASE}`).join(",") : phase === "settle" ? `transform ${ms(settle)} ${move},width ${ms(settle)} ${size},height ${ms(settle)} ${size}` : "none";
+	const box = state?.box;
+	const blob = gooOn && state?.from && phase !== "idle" ? state.from : null;
+	return /* @__PURE__ */ jsxs("span", {
+		ref: node,
+		"aria-hidden": "true",
+		"data-slot": "goo-tabs-indicator",
+		"data-phase": phase,
+		"data-goo": gooOn ? "" : void 0,
+		className: cn("pointer-events-none absolute inset-0 -z-10 opacity-7", !box && "hidden"),
+		children: [gooOn ? /* @__PURE__ */ jsx("svg", {
+			className: "absolute size-0",
+			focusable: "false",
+			children: /* @__PURE__ */ jsxs("filter", {
+				id: filterId,
+				x: "-50%",
+				y: "-50%",
+				width: "200%",
+				height: "200%",
+				children: [
+					/* @__PURE__ */ jsx("feGaussianBlur", {
+						in: "SourceGraphic",
+						stdDeviation: "6",
+						result: "blur"
+					}),
+					/* @__PURE__ */ jsx("feColorMatrix", {
+						in: "blur",
+						type: "matrix",
+						values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9",
+						result: "goo"
+					}),
+					/* @__PURE__ */ jsx("feComposite", {
+						in: "SourceGraphic",
+						in2: "goo",
+						operator: "atop"
+					})
+				]
+			})
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			"data-slot": "goo-tabs-goo",
+			className: "absolute inset-0",
+			style: gooOn ? { filter: `url(#${filterId})` } : void 0,
+			children: [box ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "goo-tabs-pill",
+				className: "absolute bg-current",
+				style: {
+					top: 0,
+					left: 0,
+					width: box.w,
+					height: box.h,
+					borderRadius: corner,
+					transform: `translate3d(${String(box.x)}px,${String(box.y)}px,0)`,
+					transition
+				}
+			}) : null, blob ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "goo-tabs-blob",
+				className: "absolute rounded-full bg-current",
+				style: {
+					top: 0,
+					left: 0,
+					width: blob.w,
+					height: blob.h,
+					transform: `translate3d(${String(blob.x)}px,${String(blob.y)}px,0) scale(${phase === "stretch" ? 1 : 0})`,
+					transition: phase === "settle" ? `transform ${ms(settle * .7)} ease-in` : "none"
+				}
+			}) : null]
+		})]
+	});
+}
+/** An icon tab. Icon-only tabs must be named with aria-label (it warns in development). */
+function GooTabsTrigger({ className, children, ...props }) {
+	const named = Boolean(props["aria-label"] || props["aria-labelledby"] || typeof children === "string");
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || named) return;
+		console.warn("[GooTabsTrigger] An icon-only tab has no accessible name. Pass aria-label.");
+	}, [named]);
+	return /* @__PURE__ */ jsx(TabsTrigger, {
+		"data-slot": "goo-tabs-trigger",
+		className: cn("group/goo relative size-9.5 shrink-0 rounded-full px-0 text-current", focusRing, "hover:text-current data-[state=active]:bg-transparent data-[state=active]:text-current data-[state=active]:shadow-none", "[&_svg:not([class*='size-'])]:size-4.5", className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "goo-tabs-icon",
+			className: cn("inline-flex items-center justify-center gap-2 opacity-42", "transition-opacity duration-[calc(260ms*var(--motion-scale))] ease-[cubic-bezier(.32,.72,.24,1)]", "group-hover/goo:opacity-72 group-data-[state=active]/goo:opacity-100"),
+			children
+		})
+	});
+}
+/** A panel. Dowel's TabsContent, re-exported under this family's name. */
+const GooTabsContent = TabsContent;
+//#endregion
+export { GooTabs, GooTabsContent, GooTabsList, GooTabsTrigger, gooTabsListVariants, gooTabsStretch, gooTabsTimings };
+
+//# sourceMappingURL=goo-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"goo-tabs.js","names":[],"sources":["../../../src/components/goo-tabs/goo-tabs.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Icon bar (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  type TabsContentProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n} from \"@/components/tabs\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Dowel Tabs with a motion flourish: an icon bar whose pill stretches like a\n * caterpillar over the old and new tab, then snaps onto the new one with an\n * overshoot. A thin composition on Dowel's Tabs (Radix), so the tablist,\n * roving focus (RTL-aware), Home/End, automatic activation and aria-controls\n * are Radix's; this file adds only the styling and the indicator.\n *\n * The indicator is an aria-hidden layer of opaque shapes (the pill plus a\n * trailing blob) at 7% opacity as a whole, so overlapping shapes never darken\n * each other. With `goo`, an inline SVG filter (blur + alpha threshold +\n * composite) melts the pill and blob together. The filter sits on a box that\n * never transforms (only its children move), so Chromium rasterises it at the\n * right scale, and it never touches the icons. Without filter support, under\n * reduced motion, or with `goo={false}`, the same two-phase pill runs plain.\n */\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst STRETCH_EASE = \"cubic-bezier(.32,.72,.24,1)\";\n\nexport type GooTabsProps = ComponentPropsWithRef<typeof Tabs>;\n\n/** The tabs root: value, defaultValue, onValueChange, orientation, dir. */\nexport function GooTabs({ className, ...props }: GooTabsProps) {\n  return (\n    <Tabs\n      data-slot=\"goo-tabs\"\n      className={cn(\"flex flex-col gap-3 data-[orientation=vertical]:flex-row\", className)}\n      {...props}\n    />\n  );\n}\n\nconst gooTabsListVariants = cva(\n  \"relative isolate gap-0.5 shadow-sm data-[orientation=vertical]:flex-col\",\n  {\n    variants: {\n      /** `default` is the card surface; `inverted` swaps it for the ink colour. */\n      tone: {\n        default: \"bg-card text-foreground\",\n        inverted: \"bg-foreground text-background\",\n      },\n      /** A 1px inset hairline around the bar. */\n      stroke: {\n        true: \"ring-1 ring-border ring-inset\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { tone: \"default\", stroke: false },\n  },\n);\n\nexport interface GooTabsListProps\n  extends\n    Omit<TabsListProps, \"variant\" | \"indicator\">,\n    VariantProps<typeof gooTabsListVariants> {\n  /** 0–100: how far the stretch phase reaches toward the full old→new span. 0 slides. */\n  dilate?: number;\n  /** 0–100: overshoot of the settle phase. */\n  bounce?: number;\n  /** 0–100: stretch/settle take 304/672ms at 0, 190/420ms at 50, 76/168ms at 100. */\n  speed?: number;\n  /** Radius of the bar and the pill, in px. */\n  corner?: number;\n  /** Padding of the bar (the pill's inset), in px. */\n  hug?: number;\n  /** Melt the pill and its trailing blob together with an SVG goo filter. */\n  goo?: boolean;\n}\n\n/** The bar: a tablist hosting the indicator. */\nexport function GooTabsList({\n  className,\n  style,\n  children,\n  dilate = 100,\n  bounce = 50,\n  speed = 50,\n  corner = 26,\n  hug = 6,\n  goo = true,\n  tone,\n  stroke,\n  ...props\n}: GooTabsListProps) {\n  return (\n    <TabsList\n      data-slot=\"goo-tabs-list\"\n      className={cn(gooTabsListVariants({ tone, stroke }), className)}\n      style={{ padding: hug, borderRadius: corner, ...style }}\n      {...props}\n    >\n      <GooIndicator dilate={dilate} bounce={bounce} speed={speed} corner={corner} goo={goo} />\n      {children}\n    </TabsList>\n  );\n}\n\ntype Box = { x: number; y: number; w: number; h: number };\ntype Phase = \"idle\" | \"stretch\" | \"settle\";\ninterface IndicatorState {\n  box: Box;\n  phase: Phase;\n  /** The slot the pill left, where the trailing blob sits. */\n  from?: Box;\n}\n\nconst clamp = (value: number) => Math.min(Math.max(value, 0), 100);\n\n/** Stretch and settle durations, interpolated from the source's three stops. */\nexport function gooTabsTimings(speed: number) {\n  const s = clamp(speed);\n  return { stretch: 304 - 2.28 * s, settle: 672 - 5.04 * s };\n}\n\n/** The pill over the old→new span, `dilate` of the way from the target. */\nexport function gooTabsStretch(from: Box, to: Box, dilate: number, vertical: boolean): Box {\n  const d = clamp(dilate) / 100;\n  const [pos, size] = vertical ? ([\"y\", \"h\"] as const) : ([\"x\", \"w\"] as const);\n  const spanStart = Math.min(from[pos], to[pos]);\n  const spanEnd = Math.max(from[pos] + from[size], to[pos] + to[size]);\n  const start = to[pos] + (spanStart - to[pos]) * d;\n  const end = to[pos] + to[size] + (spanEnd - to[pos] - to[size]) * d;\n  return { ...to, [pos]: start, [size]: end - start };\n}\n\n/** The active tab's box relative to the list, from its offsets. */\nfunction measure(list: HTMLElement): Box | null {\n  const active = list.querySelector<HTMLElement>('[role=\"tab\"][data-state=\"active\"]');\n  if (!active) return null;\n  if (active.offsetParent === list) {\n    return {\n      x: active.offsetLeft,\n      y: active.offsetTop,\n      w: active.offsetWidth,\n      h: active.offsetHeight,\n    };\n  }\n  // A trigger wrapped in its own positioned element (a tooltip anchor, say).\n  const from = list.getBoundingClientRect();\n  const to = active.getBoundingClientRect();\n  return {\n    x: to.left - from.left - list.clientLeft,\n    y: to.top - from.top - list.clientTop,\n    w: to.width,\n    h: to.height,\n  };\n}\n\nconst same = (a: Box, b: Box) => a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;\n\nfunction subscribe(onChange: () => void) {\n  const query = window.matchMedia(REDUCE);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\n/** Whether the goo filter can run: supported, and motion not reduced. */\nfunction gooSnapshot() {\n  const supported =\n    typeof CSS !== \"undefined\" &&\n    typeof CSS.supports === \"function\" &&\n    CSS.supports(\"filter\", \"url(#x)\");\n  return supported && !window.matchMedia(REDUCE).matches;\n}\n\nconst ms = (value: number) => `calc(${String(Math.round(value))}ms * var(--motion-scale))`;\n\ninterface GooIndicatorProps {\n  dilate: number;\n  bounce: number;\n  speed: number;\n  corner: number;\n  goo: boolean;\n}\n\nfunction GooIndicator({ dilate, bounce, speed, corner, goo }: GooIndicatorProps) {\n  const node = useRef<HTMLSpanElement>(null);\n  const [state, setState] = useState<IndicatorState | null>(null);\n  const target = useRef<Box | null>(null);\n  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);\n  const feel = useRef({ dilate, speed });\n  const filterId = `dowel-goo-tabs-${useId().replace(/[^\\w-]/g, \"\")}`;\n  const gooOn = useSyncExternalStore(subscribe, gooSnapshot, () => false) && goo;\n\n  useEffect(() => {\n    feel.current = { dilate, speed };\n  }, [dilate, speed]);\n\n  const update = useCallback((animate: boolean) => {\n    const list = node.current?.parentElement;\n    if (!list) return;\n    const next = measure(list);\n    const previous = target.current;\n    if (!next || (previous && same(previous, next))) return;\n    target.current = next;\n    for (const timer of timers.current) clearTimeout(timer);\n    timers.current = [];\n    if (!animate || !previous || window.matchMedia(REDUCE).matches) {\n      setState({ box: next, phase: \"idle\" });\n      return;\n    }\n    const vertical = list.getAttribute(\"aria-orientation\") === \"vertical\";\n    const { stretch, settle } = gooTabsTimings(feel.current.speed);\n    setState({\n      box: gooTabsStretch(previous, next, feel.current.dilate, vertical),\n      phase: \"stretch\",\n      from: previous,\n    });\n    // The settle starts a little before the stretch finishes, as the source does.\n    timers.current.push(\n      setTimeout(() => {\n        setState({ box: next, phase: \"settle\", from: previous });\n        timers.current.push(setTimeout(() => setState({ box: next, phase: \"idle\" }), settle));\n      }, stretch * 0.82),\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    const list = node.current?.parentElement;\n    if (!list) return;\n    update(false);\n    const mutations = new MutationObserver(() => update(true));\n    mutations.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      subtree: true,\n    });\n    const resizes = new ResizeObserver(() => update(false));\n    resizes.observe(list);\n    for (const tab of list.querySelectorAll('[role=\"tab\"]')) resizes.observe(tab);\n    return () => {\n      mutations.disconnect();\n      resizes.disconnect();\n      for (const timer of timers.current) clearTimeout(timer);\n    };\n  }, [update]);\n\n  const { stretch, settle } = gooTabsTimings(speed);\n  const b = clamp(bounce) / 100;\n  const y1 = (k: number) => String(Math.round((1 + k * b) * 1000) / 1000);\n  const move = `cubic-bezier(.28,${y1(0.56)},.36,1)`;\n  const size = `cubic-bezier(.24,${y1(0.68)},.38,1)`;\n  const phase = state?.phase ?? \"idle\";\n  const transition =\n    phase === \"stretch\"\n      ? [\"transform\", \"width\", \"height\"]\n          .map((p) => `${p} ${ms(stretch)} ${STRETCH_EASE}`)\n          .join(\",\")\n      : phase === \"settle\"\n        ? `transform ${ms(settle)} ${move},width ${ms(settle)} ${size},height ${ms(settle)} ${size}`\n        : \"none\";\n  const box = state?.box;\n  const blob = gooOn && state?.from && phase !== \"idle\" ? state.from : null;\n\n  return (\n    <span\n      ref={node}\n      aria-hidden=\"true\"\n      data-slot=\"goo-tabs-indicator\"\n      data-phase={phase}\n      data-goo={gooOn ? \"\" : undefined}\n      className={cn(\"pointer-events-none absolute inset-0 -z-10 opacity-7\", !box && \"hidden\")}\n    >\n      {gooOn ? (\n        <svg className=\"absolute size-0\" focusable=\"false\">\n          <filter id={filterId} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              type=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9\"\n              result=\"goo\"\n            />\n            <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n          </filter>\n        </svg>\n      ) : null}\n      {/* The filtered box never moves; only its children do. */}\n      <span\n        data-slot=\"goo-tabs-goo\"\n        className=\"absolute inset-0\"\n        style={gooOn ? { filter: `url(#${filterId})` } : undefined}\n      >\n        {box ? (\n          <span\n            data-slot=\"goo-tabs-pill\"\n            className=\"absolute bg-current\"\n            // Physical top-left, because the offsets it moves by are physical.\n            style={{\n              top: 0,\n              left: 0,\n              width: box.w,\n              height: box.h,\n              borderRadius: corner,\n              transform: `translate3d(${String(box.x)}px,${String(box.y)}px,0)`,\n              transition,\n            }}\n          />\n        ) : null}\n        {blob ? (\n          <span\n            data-slot=\"goo-tabs-blob\"\n            className=\"absolute rounded-full bg-current\"\n            style={{\n              top: 0,\n              left: 0,\n              width: blob.w,\n              height: blob.h,\n              transform: `translate3d(${String(blob.x)}px,${String(blob.y)}px,0) scale(${phase === \"stretch\" ? 1 : 0})`,\n              transition: phase === \"settle\" ? `transform ${ms(settle * 0.7)} ease-in` : \"none\",\n            }}\n          />\n        ) : null}\n      </span>\n    </span>\n  );\n}\n\nexport type GooTabsTriggerProps = Omit<TabsTriggerProps, \"asChild\" | \"variant\">;\n\n/** An icon tab. Icon-only tabs must be named with aria-label (it warns in development). */\nexport function GooTabsTrigger({ className, children, ...props }: GooTabsTriggerProps) {\n  const named = Boolean(\n    props[\"aria-label\"] || props[\"aria-labelledby\"] || typeof children === \"string\",\n  );\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || named) return;\n    console.warn(\"[GooTabsTrigger] An icon-only tab has no accessible name. Pass aria-label.\");\n  }, [named]);\n\n  return (\n    <TabsTrigger\n      data-slot=\"goo-tabs-trigger\"\n      className={cn(\n        \"group/goo relative size-9.5 shrink-0 rounded-full px-0 text-current\",\n        focusRing,\n        \"hover:text-current data-[state=active]:bg-transparent data-[state=active]:text-current data-[state=active]:shadow-none\",\n        \"[&_svg:not([class*='size-'])]:size-4.5\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"goo-tabs-icon\"\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 opacity-42\",\n          \"transition-opacity duration-[calc(260ms*var(--motion-scale))] ease-[cubic-bezier(.32,.72,.24,1)]\",\n          \"group-hover/goo:opacity-72 group-data-[state=active]/goo:opacity-100\",\n        )}\n      >\n        {children}\n      </span>\n    </TabsTrigger>\n  );\n}\n\nexport type GooTabsContentProps = TabsContentProps;\n\n/** A panel. Dowel's TabsContent, re-exported under this family's name. */\nexport const GooTabsContent = TabsContent;\n\nexport { gooTabsListVariants };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { GooTabs, GooTabsContent, GooTabsContentProps, GooTabsList, GooTabsListProps, GooTabsProps, GooTabsTrigger, GooTabsTriggerProps, gooTabsListVariants } from "./goo-tabs.js";
+export { GooTabs, GooTabsContent, type GooTabsContentProps, GooTabsList, type GooTabsListProps, type GooTabsProps, GooTabsTrigger, type GooTabsTriggerProps, gooTabsListVariants };

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

@@ -0,0 +1,2 @@
+import { GooTabs, GooTabsContent, GooTabsList, GooTabsTrigger, gooTabsListVariants } from "./goo-tabs.js";
+export { GooTabs, GooTabsContent, GooTabsList, GooTabsTrigger, gooTabsListVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/goo-tabs/meta.ts
+const meta = defineMeta({
+	name: "goo-tabs",
+	title: "Goo Tabs",
+	description: "Dowel Tabs with a motion flourish: an icon bar whose pill stretches over the old and new tab, then snaps onto the new one, melted together by an SVG goo filter.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["tabs"],
+	files: ["goo-tabs.tsx"],
+	a11y: "A thin composition on Dowel's Tabs (Radix): role=\"tablist\" (name it with aria-label) with one tab stop, arrow keys along the orientation that follow the reading direction, Home/End, wrap-around and automatic activation; tabs carry aria-selected and aria-controls, and panels are focusable. Icon-only tabs must be named with aria-label and warn in development when they are not; icons are decoration. The pill, trailing blob and goo filter are one aria-hidden layer that ignores the pointer, and the filter never applies to the icons. Under reduced motion (or without SVG filter support, or with goo={false}) the goo is dropped and the pill moves straight to the new tab."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/goo-tabs/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"goo-tabs\",\n  title: \"Goo Tabs\",\n  description:\n    \"Dowel Tabs with a motion flourish: an icon bar whose pill stretches over the old and new tab, then snaps onto the new one, melted together by an SVG goo filter.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"tabs\"],\n  files: [\"goo-tabs.tsx\"],\n  a11y:\n    'A thin composition on Dowel\\'s Tabs (Radix): role=\"tablist\" (name it with aria-label) with one tab stop, arrow keys ' +\n    \"along the orientation that follow the reading direction, Home/End, wrap-around and automatic activation; tabs carry \" +\n    \"aria-selected and aria-controls, and panels are focusable. Icon-only tabs must be named with aria-label and warn in \" +\n    \"development when they are not; icons are decoration. The pill, trailing blob and goo filter are one aria-hidden layer \" +\n    \"that ignores the pointer, and the filter never applies to the icons. Under reduced motion (or without SVG filter \" +\n    \"support, or with goo={false}) the goo is dropped and the pill moves straight to the new tab.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,MAAM;CAC7B,OAAO,CAAC,cAAc;CACtB,MACE;AAMJ,CAAC"}

package/dist/components/gooey-popover/gooey-popover.d.ts

@@ -0,0 +1,32 @@
+import { PopoverContentProps } from "../popover/popover.js";
+import "../popover/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/gooey-popover/gooey-popover.d.ts
+declare const gooeyPopoverVariants: (props?: ({
+  tone?: "primary" | "inverted" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface GooeyPopoverProps extends Omit<PopoverContentProps, "children" | "content">, VariantProps<typeof gooeyPopoverVariants> {
+  /** The popover's content. */
+  children: ReactNode;
+  /** The trigger's icon. A plus by default. */
+  trigger?: ReactNode;
+  /** The trigger's accessible name — it is icon-only. Also names the content by default. */
+  triggerLabel: string;
+  /** The trigger's diameter in pixels. */
+  triggerSize?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The content's width. Numbers are pixels. */
+  contentWidth?: number | string;
+  /** Length of the morph in milliseconds; the rest of the sequence scales with it. */
+  duration?: number;
+  /** Classes for the trigger button. */
+  triggerClassName?: string;
+}
+/** A popover that pours out of its round trigger through an SVG goo filter. */
+declare function GooeyPopover({ ref, className, style, children, trigger, triggerLabel, triggerSize, open: openProp, defaultOpen, onOpenChange, contentWidth, duration, side, sideOffset, tone, triggerClassName, ...props }: GooeyPopoverProps): import("react").JSX.Element;
+//#endregion
+export { GooeyPopover, GooeyPopoverProps, gooeyPopoverVariants };
+//# sourceMappingURL=gooey-popover.d.ts.map

package/dist/components/gooey-popover/gooey-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gooey-popover.d.ts","names":[],"sources":["../../../src/components/gooey-popover/gooey-popover.tsx"],"mappings":";;;;;cAgGM,uBAAoB;;6CAYxB;UAEe,0BAEb,KAAK,8CACL,oBAAoB;;EAEtB,UAAU;;EAEV,UAAU;;EAEV;;EAEA;EACA;EACA;EACA,gBAAgB;;EAEhB;;EAEA;;EAEA;;;iBAiCc,eACd,KACA,WACA,OACA,UACA,SACA,cACA,aACA,MAAM,UACN,aACA,cACA,cACA,UACA,MACA,YACA,MACA,qBACG,SACF,oCAAiB,IAAA"}

package/dist/components/gooey-popover/gooey-popover.js

@@ -0,0 +1,257 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/gooey-popover/gooey-popover.tsx
+const STYLES = `
+@keyframes dowel-gooey-popover-grow {
+  from {
+    left: calc(var(--gooey-x, var(--gooey-gx)) - var(--gooey-size) / 2);
+    top: calc(var(--gooey-y, var(--gooey-gy)) - var(--gooey-size) / 2);
+    width: var(--gooey-size); height: var(--gooey-size); border-radius: calc(var(--gooey-size) / 2);
+  }
+  to { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--gooey-radius); }
+}
+@keyframes dowel-gooey-popover-shrink {
+  from { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--gooey-radius); opacity: 1; }
+  70% { opacity: 1; }
+  to {
+    left: calc(var(--gooey-x, var(--gooey-gx)) - var(--gooey-size) / 2);
+    top: calc(var(--gooey-y, var(--gooey-gy)) - var(--gooey-size) / 2);
+    width: var(--gooey-size); height: var(--gooey-size); border-radius: calc(var(--gooey-size) / 2);
+    opacity: 0;
+  }
+}
+@keyframes dowel-gooey-popover-reveal {
+  from { opacity: 0; translate: 0 1rem; }
+  to { opacity: 1; translate: 0 0; }
+}
+@keyframes dowel-gooey-popover-conceal {
+  from { opacity: 1; translate: 0 0; }
+  to { opacity: 0; translate: 0 0.5rem; }
+}
+@keyframes dowel-gooey-popover-hold {
+  from { opacity: 1; }
+  to { opacity: 1; }
+}
+[data-slot="gooey-popover-content"][data-state="open"] { animation: none; }
+[data-slot="gooey-popover-content"][data-state="closed"] {
+  animation: dowel-gooey-popover-hold calc(var(--gooey-speed) * 1.2 * var(--motion-scale)) linear both;
+}
+[data-slot="gooey-popover-content"][data-state="open"] [data-slot="gooey-popover-shape"] {
+  animation: dowel-gooey-popover-grow calc(var(--gooey-speed) * var(--motion-scale))
+    var(--ease-in-out-quint) both;
+}
+[data-slot="gooey-popover-content"][data-state="closed"] [data-slot="gooey-popover-shape"] {
+  animation: dowel-gooey-popover-shrink calc(var(--gooey-speed) * var(--motion-scale))
+    var(--ease-in-quint) calc(var(--gooey-speed) * 0.2 * var(--motion-scale)) both;
+}
+[data-slot="gooey-popover-content"][data-state="open"] [data-slot="gooey-popover-body"] {
+  animation: dowel-gooey-popover-reveal calc(var(--gooey-speed) * 0.75 * var(--motion-scale))
+    var(--ease-out-quint) calc(var(--gooey-speed) * 0.575 * var(--motion-scale)) both;
+}
+[data-slot="gooey-popover-content"][data-state="closed"] [data-slot="gooey-popover-body"] {
+  animation: dowel-gooey-popover-conceal calc(var(--gooey-speed) * 0.4 * var(--motion-scale))
+    var(--ease-in-quint) both;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="gooey-popover-goo"], [data-slot="gooey-popover-ghost"] { display: none; }
+}
+`;
+const gooeyPopoverVariants = cva("", {
+	variants: { tone: {
+		/** The source's near-black blob on a light page, inverted in dark mode. */
+		inverted: "bg-foreground text-background",
+		primary: "bg-primary text-primary-foreground",
+		card: "bg-card text-card-foreground"
+	} },
+	defaultVariants: { tone: "inverted" }
+});
+const PLUS = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	width: 20,
+	height: 20,
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+});
+/** Where the trigger's centre sits relative to the content, before measuring. */
+function guess(side, offset) {
+	switch (side) {
+		case "bottom": return {
+			x: "50%",
+			y: `${String(-offset)}px`
+		};
+		case "left": return {
+			x: `calc(100% + ${String(offset)}px)`,
+			y: "50%"
+		};
+		case "right": return {
+			x: `${String(-offset)}px`,
+			y: "50%"
+		};
+		default: return {
+			x: "50%",
+			y: `calc(100% + ${String(offset)}px)`
+		};
+	}
+}
+/** A popover that pours out of its round trigger through an SVG goo filter. */
+function GooeyPopover({ ref, className, style, children, trigger = PLUS, triggerLabel, triggerSize = 44, open: openProp, defaultOpen = false, onOpenChange, contentWidth = 240, duration = 250, side = "top", sideOffset = 24, tone, triggerClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = openProp ?? uncontrolled;
+	const triggerRef = useRef(null);
+	const contentRef = useRef(null);
+	const filterId = `dowel-goo-${useId().replace(/:/g, "")}`;
+	const setOpen = (next) => {
+		if (openProp === void 0) setUncontrolled(next);
+		onOpenChange?.(next);
+	};
+	const setContentRef = useCallback((node) => {
+		contentRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useLayoutEffect(() => {
+		if (!open) return;
+		let frames = 0;
+		let handle = 0;
+		const measure = () => {
+			const content = contentRef.current;
+			const button = triggerRef.current;
+			if (content && button) {
+				const c = content.getBoundingClientRect();
+				const t = button.getBoundingClientRect();
+				content.style.setProperty("--gooey-x", `${String(t.left + t.width / 2 - c.left)}px`);
+				content.style.setProperty("--gooey-y", `${String(t.top + t.height / 2 - c.top)}px`);
+			}
+			if (++frames < 4) handle = requestAnimationFrame(measure);
+		};
+		measure();
+		return () => cancelAnimationFrame(handle);
+	}, [open]);
+	const tones = gooeyPopoverVariants({ tone });
+	const initial = guess(side, sideOffset + triggerSize / 2);
+	const atTrigger = {
+		left: `calc(var(--gooey-x, var(--gooey-gx)) - ${String(triggerSize / 2)}px)`,
+		top: `calc(var(--gooey-y, var(--gooey-gy)) - ${String(triggerSize / 2)}px)`,
+		width: triggerSize,
+		height: triggerSize
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-gooey-popover",
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					ref: triggerRef,
+					type: "button",
+					"aria-label": triggerLabel,
+					"data-slot": "gooey-popover-trigger",
+					className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full transition-[scale] duration-[var(--duration-fast)] active:scale-95", tones, focusRing, triggerClassName),
+					style: {
+						width: triggerSize,
+						height: triggerSize
+					},
+					children: trigger
+				})
+			}),
+			/* @__PURE__ */ jsxs(PopoverContent, {
+				ref: setContentRef,
+				side,
+				sideOffset,
+				"aria-label": props["aria-labelledby"] ? void 0 : triggerLabel,
+				...props,
+				"data-slot": "gooey-popover-content",
+				className: cn("relative w-auto overflow-visible rounded-none border-0 bg-transparent p-0 shadow-none", className),
+				style: {
+					width: contentWidth,
+					"--gooey-size": `${String(triggerSize)}px`,
+					"--gooey-speed": `${String(duration)}ms`,
+					"--gooey-gx": initial.x,
+					"--gooey-gy": initial.y,
+					...style
+				},
+				children: [
+					/* @__PURE__ */ jsx("svg", {
+						"aria-hidden": "true",
+						className: "absolute size-0",
+						children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+							id: filterId,
+							x: "-100%",
+							y: "-100%",
+							width: "300%",
+							height: "300%",
+							children: [
+								/* @__PURE__ */ jsx("feGaussianBlur", {
+									in: "SourceGraphic",
+									stdDeviation: "10",
+									result: "blur"
+								}),
+								/* @__PURE__ */ jsx("feColorMatrix", {
+									in: "blur",
+									type: "matrix",
+									values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -10",
+									result: "goo"
+								}),
+								/* @__PURE__ */ jsx("feComposite", {
+									in: "SourceGraphic",
+									in2: "goo",
+									operator: "atop"
+								})
+							]
+						}) })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"aria-hidden": "true",
+						"data-slot": "gooey-popover-goo",
+						className: "pointer-events-none absolute inset-0",
+						style: { filter: `url(#${filterId})` },
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("absolute rounded-full", tones),
+							style: atTrigger
+						}), /* @__PURE__ */ jsx("div", {
+							"data-slot": "gooey-popover-shape",
+							className: cn("absolute", tones),
+							style: { "--gooey-radius": "0px" }
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						"data-slot": "gooey-popover-shape",
+						className: cn("pointer-events-none absolute", tones),
+						style: { "--gooey-radius": "1.125rem" }
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": "true",
+						"data-slot": "gooey-popover-ghost",
+						className: cn("pointer-events-none absolute flex items-center justify-center rounded-full", tones),
+						style: atTrigger,
+						children: trigger
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "gooey-popover-body",
+						className: cn("relative p-4", tones, "bg-transparent"),
+						children
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { GooeyPopover, gooeyPopoverVariants };
+
+//# sourceMappingURL=gooey-popover.js.map