@mks2508/mks-ui 0.5.4 → 0.5.7

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts

@@ -3,7 +3,6 @@
  *
  * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
  */
-import type { ReactNode } from 'react';
 /**
  * Props for the GooeyFilter SVG filter definition.
  *
@@ -39,8 +38,20 @@ export interface IGooeyFilterProps {
 export interface IGooeyCanvasProps {
     /** Blur radius override. If omitted, auto-calculated from `height`. */
     blur?: number;
-    /** Element height — used to auto-calculate blur (default: 32) */
+    /** Pill height in px (default: 32) */
     height?: number;
+    /** Pill width in px (default: 260) */
+    width?: number;
+    /** Border radius in px (default: 9999) */
+    radius?: number;
+    /** Fill color (default: 'var(--card)') */
+    fillColor?: string;
+    /** Bubble height in px when expanded (default: 40% of height) */
+    bubbleHeight?: number;
+    /** Bubble inset from edges as fraction 0-1 (default: 0.2) */
+    bubbleInset?: number;
+    /** Whether the bubble is expanded */
+    expanded?: boolean;
     /** Drop-shadow outline blur in px (default: 0.5) */
     outlineBlur?: number;
     /** Drop-shadow outline color (default: 'var(--border)') */
@@ -51,10 +62,16 @@ export interface IGooeyCanvasProps {
     alphaGain?: number;
     /** Alpha offset override */
     alphaOffset?: number;
+    /** Expand animation duration in ms (default: 550) */
+    expandDuration?: number;
+    /** Collapse animation duration in ms (default: 400) */
+    collapseDuration?: number;
+    /** Expand easing override (default: SPRING_GENTLE) */
+    expandEasing?: string;
+    /** Collapse easing override (default: EASE_OUT_CUBIC) */
+    collapseEasing?: string;
     /** Extra className on the filter container */
     className?: string;
-    /** Content to merge with the gooey filter */
-    children: ReactNode;
 }
 /**
  * Props for the MorphPath SVG path component.

package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}
+{"version":3,"file":"Gooey.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/Gooey.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,cAAc,CAAC;IACrE,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAMD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts

@@ -1,8 +1,8 @@
 import type { IGooeyCanvasProps } from './Gooey.types';
 /**
- * GooeyCanvas — container with gooey SVG filter applied.
+ * GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
  */
-declare function GooeyCanvas({ blur, height, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, className, children, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
+declare function GooeyCanvas({ blur, height, width, radius, fillColor, bubbleHeight: bubbleHeightProp, bubbleInset, expanded, outlineBlur, outlineColor, outlineLayers, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className, }: IGooeyCanvasProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GooeyCanvas {
     var displayName: string;
 }

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,iBAAiB,2CA+BnB;kBAzCQ,WAAW;;;AA6CpB,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"GooeyCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAW,EACX,KAAW,EACX,MAAa,EACb,SAAyB,EACzB,YAAY,EAAE,gBAAgB,EAC9B,WAAiB,EACjB,QAAgB,EAChB,WAAiB,EACjB,YAA8B,EAC9B,aAAiB,EACjB,SAAS,EACT,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CAuKnB;kBA1LQ,WAAW;;;AA8LpB,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js

@@ -1,57 +1,188 @@
 'use client';
 
 import { cn } from "../../../lib/utils.js";
-import { buildFilterString, computeBlur } from "./gooey-utils.js";
-import { GooeyFilter } from "./GooeyFilter.js";
+import { EASINGS, getResponsiveDuration } from "../core/animationConstants.js";
+import { GOOEY_TIMING, computeBlur } from "./gooey-utils.js";
 import * as React$1 from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx
 /**
-* GooeyCanvas — container that applies gooey SVG filter to children.
+* GooeyCanvas — SVG-based gooey filter with animated pill + bubble rects.
 *
-* Renders a GooeyFilter + a wrapper div with `filter: url(#id)`.
-* All same-colored children inside merge organically. Optional drop-shadow
-* outline traces the merged shape's edge.
+* Uses SVG `<rect>` elements inside a filtered container. The bubble rect
+* animates via WAAPI for smooth cross-browser rendering.
 *
-* Blur auto-scales with height: `blur = Math.round(height * 0.15)`.
-*
-* @example
-* ```tsx
-* <div style={{ position: 'relative' }}>
-*   <GooeyCanvas height={40}>
-*     <div className="absolute inset-0 bg-card rounded-full" />
-*     <div className="absolute bottom-full bg-card w-32 h-6 rounded-lg" />
-*   </GooeyCanvas>
-*   <div className="relative z-10">Content on top (not filtered)</div>
-* </div>
-* ```
+* Key patterns (derived from Sileo):
+* - Filter applied to canvas div, SVG content inside (not HTML children)
+* - `transform: translateZ(0)` + `contain: layout style` on canvas
+* - No DOM mutation during/after animation — `fill: 'forwards'` only
+* - Readiness gate: 1-frame rAF delay before first animation (Sileo pattern)
 *
 * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
 */
 /**
-* GooeyCanvas — container with gooey SVG filter applied.
+* GooeyCanvas — SVG rects + gooey filter, WAAPI-animated bubble.
 */
-function GooeyCanvas({ blur, height = 32, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, className, children }) {
+function GooeyCanvas({ blur, height = 32, width = 260, radius = 9999, fillColor = "var(--card)", bubbleHeight: bubbleHeightProp, bubbleInset = .2, expanded = false, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2, alphaGain, alphaOffset, expandDuration, collapseDuration, expandEasing, collapseEasing, className }) {
 	const filterId = React$1.useId().replace(/:/g, "") + "-goo";
 	const computedBlur = blur ?? computeBlur(height);
-	const filterStyle = React$1.useMemo(() => ({ filter: buildFilterString(filterId, outlineBlur, outlineColor, outlineLayers) }), [
-		filterId,
+	const bubbleRectRef = React$1.useRef(null);
+	const animRef = React$1.useRef(null);
+	const [ready, setReady] = React$1.useState(false);
+	const lastValues = React$1.useRef({
+		y: -1,
+		h: -1
+	});
+	const pad = 2;
+	const effectiveR = Math.min(radius, height / 2);
+	const bubbleH = bubbleHeightProp ?? Math.round(height * .4);
+	const insetPx = width * bubbleInset;
+	const bubbleW = width - 2 * insetPx;
+	const bubbleR = Math.min(effectiveR * .6, bubbleH * .45, 12);
+	const totalH = height + bubbleH;
+	const filterUrl = React$1.useMemo(() => `url(#${filterId})`, [filterId]);
+	const outlineShadow = React$1.useMemo(() => {
+		const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+		return Array(outlineLayers).fill(shadow).join(" ");
+	}, [
 		outlineBlur,
 		outlineColor,
 		outlineLayers
 	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GooeyFilter, {
-		id: filterId,
-		blur: computedBlur,
-		alphaGain,
-		alphaOffset
-	}), /* @__PURE__ */ jsx("div", {
+	const canvasStyle = React$1.useMemo(() => ({
+		filter: `${filterUrl} ${outlineShadow}`,
+		transform: "translateZ(0)",
+		contain: "layout style"
+	}), [filterUrl, outlineShadow]);
+	React$1.useEffect(() => {
+		const rect = bubbleRectRef.current;
+		if (!rect) return;
+		lastValues.current = {
+			y: expanded ? 0 : bubbleH,
+			h: expanded ? bubbleH : 0
+		};
+		if (expanded) rect.animate([{
+			y: "0px",
+			height: `${bubbleH}px`
+		}], {
+			duration: 0,
+			fill: "forwards"
+		});
+		const raf = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(raf);
+	}, []);
+	React$1.useEffect(() => {
+		const rect = bubbleRectRef.current;
+		if (!rect || !ready) return;
+		const isExpanding = expanded;
+		const duration = getResponsiveDuration(isExpanding ? expandDuration ?? GOOEY_TIMING.EXPAND_DURATION : collapseDuration ?? GOOEY_TIMING.COLLAPSE_DURATION);
+		const easing = isExpanding ? expandEasing ?? EASINGS.SPRING_GENTLE : collapseEasing ?? EASINGS.EASE_OUT_CUBIC;
+		const toY = isExpanding ? 0 : bubbleH;
+		const toH = isExpanding ? bubbleH : 0;
+		const fromY = lastValues.current.y;
+		const fromH = lastValues.current.h;
+		lastValues.current = {
+			y: toY,
+			h: toH
+		};
+		if (duration === 0) {
+			if (animRef.current) animRef.current.cancel();
+			rect.animate([{
+				y: `${toY}px`,
+				height: `${toH}px`
+			}], {
+				duration: 0,
+				fill: "forwards"
+			});
+			return;
+		}
+		if (animRef.current) animRef.current.cancel();
+		animRef.current = rect.animate([{
+			y: `${fromY}px`,
+			height: `${fromH}px`
+		}, {
+			y: `${toY}px`,
+			height: `${toH}px`
+		}], {
+			duration,
+			easing,
+			fill: "forwards"
+		});
+	}, [
+		ready,
+		expanded,
+		bubbleH,
+		expandDuration,
+		collapseDuration,
+		expandEasing,
+		collapseEasing
+	]);
+	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "gooey-canvas",
-		style: filterStyle,
+		style: canvasStyle,
 		className: cn("absolute inset-0 rounded-[inherit] pointer-events-none z-0 overflow-visible", className),
-		children
-	})] });
+		children: /* @__PURE__ */ jsxs("svg", {
+			"data-slot": "gooey-svg",
+			width,
+			height: totalH,
+			viewBox: `0 0 ${width} ${totalH}`,
+			style: {
+				position: "absolute",
+				top: -bubbleH,
+				left: 0,
+				overflow: "visible"
+			},
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					x: "-20%",
+					y: "-20%",
+					width: "140%",
+					height: "140%",
+					colorInterpolationFilters: "sRGB",
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: computedBlur,
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", {
+							in: "blur",
+							mode: "matrix",
+							values: `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${alphaGain ?? 20} ${alphaOffset ?? -10}`,
+							result: "goo"
+						}),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							in2: "goo",
+							operator: "atop"
+						})
+					]
+				}) }),
+				/* @__PURE__ */ jsx("rect", {
+					x: pad,
+					y: bubbleH,
+					width: width - pad * 2,
+					height: height - pad * 2,
+					rx: effectiveR,
+					ry: effectiveR,
+					fill: fillColor
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					ref: bubbleRectRef,
+					x: insetPx,
+					y: bubbleH,
+					width: bubbleW,
+					height: 0,
+					rx: bubbleR,
+					ry: bubbleR,
+					fill: fillColor
+				})
+			]
+		})
+	});
 }
 GooeyCanvas.displayName = "GooeyCanvas";
 

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts

@@ -3,6 +3,13 @@
  *
  * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
  */
+/** Gooey animation timing constants. */
+export declare const GOOEY_TIMING: {
+    /** Expand duration in ms — spring-like with room for overshoot */
+    readonly EXPAND_DURATION: 550;
+    /** Collapse duration in ms — snappier settle, no overshoot */
+    readonly COLLAPSE_DURATION: 400;
+};
 /** Default gooey filter parameters. */
 export declare const GOOEY_DEFAULTS: {
     /** Blur = height * BLUR_RATIO */

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gooey-utils.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/gooey-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,uCAAuC;AACvC,eAAO,MAAM,cAAc;IACzB,iCAAiC;;IAEjC,6CAA6C;;IAE7C,yCAAyC;;IAEzC,+BAA+B;;IAE/B,sDAAsD;;IAEtD,kCAAkC;;IAElC,yCAAyC;;IAEzC,wDAAwD;;CAEhD,CAAC;AAMX;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,GAAE,MAAkC,EACxC,MAAM,GAAE,MAAoC,GAC3C,MAAM,CAER;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,MAAY,EACzB,YAAY,GAAE,MAAwB,EACtC,aAAa,GAAE,MAAU,GACxB,MAAM,CAKR;AAMD,KAAK,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAW9C;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAwCR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAsDR;AAED,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,QAA2B,CAAC"}
+{"version":3,"file":"gooey-utils.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/gooey-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,wCAAwC;AACxC,eAAO,MAAM,YAAY;IACvB,kEAAkE;;IAElE,8DAA8D;;CAEtD,CAAC;AAEX,uCAAuC;AACvC,eAAO,MAAM,cAAc;IACzB,iCAAiC;;IAEjC,6CAA6C;;IAE7C,yCAAyC;;IAEzC,+BAA+B;;IAE/B,sDAAsD;;IAEtD,kCAAkC;;IAElC,yCAAyC;;IAEzC,wDAAwD;;CAEhD,CAAC;AAMX;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,GAAE,MAAkC,EACxC,MAAM,GAAE,MAAoC,GAC3C,MAAM,CAER;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,WAAW,GAAE,MAAY,EACzB,YAAY,GAAE,MAAwB,EACtC,aAAa,GAAE,MAAU,GACxB,MAAM,CAKR;AAMD,KAAK,MAAM,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAW9C;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAwCR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,EACT,EAAE,GAAE,MAAmC,GACtC,MAAM,CAsDR;AAED,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,QAA2B,CAAC"}

package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.js

@@ -4,6 +4,11 @@
 *
 * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
 */
+/** Gooey animation timing constants. */
+const GOOEY_TIMING = {
+	EXPAND_DURATION: 550,
+	COLLAPSE_DURATION: 400
+};
 /** Default gooey filter parameters. */
 const GOOEY_DEFAULTS = {
 	BLUR_RATIO: .15,
@@ -174,4 +179,4 @@ const morphPathDownMemo = memoizePath(morphPathDown);
 const morphPathUpMemo = memoizePath(morphPathUp);
 
 //#endregion
-export { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp };
+export { GOOEY_DEFAULTS, GOOEY_TIMING, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp };

package/dist/react-ui/ui/DynamicToggle/{DynamicToggle-Cm6-VceQ.css → DynamicToggle-DOR3Ld-k.css}

@@ -12,6 +12,8 @@
   --dt-dur: 0.22s;
   --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
   --dt-fade: 0.45;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* ── Track: explicit row prevents h-full items from overflowing container ── */
@@ -24,18 +26,9 @@
   grid-column: span 2;
 }
 
-/* ── Main indicator slide ── */
-[data-slot="dt-root"] [data-slot="dt-indicator"] {
-  transition: translate var(--dt-dur) var(--dt-ease);
-  translate: 100% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-  translate: 0 0;
-}
-
 /* ── Primary option text ── */
 [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
-  color: var(--card);
+  color: var(--accent-foreground);
   z-index: 2;
 }
 [data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
@@ -49,31 +42,109 @@
   overflow: hidden;
 }
 
-/* ── Group indicator: clip-path reveal ── */
-[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-  pointer-events: none;
+/* ══════════════════════════════════════════════════════════
+ * INDICATOR POSITIONING
+ *
+ * Modern: CSS Anchor Positioning — indicator follows active option
+ * Fallback: translate-based positioning for older browsers
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── Anchor-based indicator (requires full anchor API) ── */
+@supports (anchor-scope: all) {
+  /* Scope anchors per toggle instance */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) {
+    anchor-scope: --dt-active;
+  }
+
+  /* Active option becomes the anchor via native :checked */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+
+  /* Single unified indicator: morphs from full-width to half-width */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
+    position-anchor: --dt-active;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    translate: none;
+    width: auto;
+    transition:
+      top var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease),
+      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
+      left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+
+  /* Hide the group indicator — unified indicator handles everything */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
+@supports not (anchor-scope: all) {
+  /* Unified indicator: left/right transition morphs width + position */
+  [data-slot="dt-root"] [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 0;
+    width: auto;
+    translate: none;
+    transition:
+      left var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  /* Top-level checked: indicator covers left half */
+  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+    left: 0;
+    right: 50%;
+  }
+  /* Group option 1 checked: indicator at 3rd quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 25%;
+  }
+  /* Group option 2 checked: indicator at 4th quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+    left: 75%;
+    right: 0;
+  }
+  /* Hide group indicator — unified indicator handles everything */
+  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 0;
+  width: auto;
+  translate: none;
   transition:
-    translate var(--dt-dur) var(--dt-ease),
-    clip-path var(--dt-dur) var(--dt-ease),
-    background var(--dt-dur) var(--dt-ease);
-  clip-path: inset(
-    73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px)
-    round var(--dt-radius, 9999px)
-  );
-  translate: -50% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group-indicator"] {
-  background: transparent;
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
-  background: var(--card);
-  clip-path: inset(0 0 0 0 round var(--dt-radius, 9999px));
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"] {
-  translate: -100% 0;
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 25%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+  left: 75%;
+  right: 0;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
+  display: none;
 }
 
 /* ══════════════════════════════════════════════════════════
@@ -233,6 +304,8 @@
   background: var(--card);
   border: 1px solid var(--border);
   z-index: 3;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 [data-slot="dt-group-label"] > span {
   overflow: hidden;
@@ -301,4 +374,3 @@
   position: relative;
   z-index: 1;
 }
-