@mks2508/mks-ui 0.5.2 → 0.5.7

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

@@ -0,0 +1,182 @@
+//#region src/react-ui/primitives/waapi/Gooey/gooey-utils.ts
+/**
+* Gooey morphing utilities — pure functions for SVG filter and path generation.
+*
+* @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,
+	ALPHA_GAIN: 20,
+	ALPHA_OFFSET: -10,
+	PILL_HEIGHT: 34,
+	CURVE_FACTOR: 14,
+	MAX_CORNER_RADIUS: 16,
+	CORNER_RATIO: .45,
+	MIN_BODY_DELTA: 8
+};
+/**
+* Compute the optimal Gaussian blur for a gooey filter based on element height.
+*
+* @param height - Element height in pixels
+* @returns Blur stdDeviation value
+*/
+function computeBlur(height) {
+	return Math.round(height * GOOEY_DEFAULTS.BLUR_RATIO);
+}
+/**
+* Build the feColorMatrix `values` string.
+*
+* @param gain - Alpha multiplier (default: 20)
+* @param offset - Alpha offset (default: -10)
+* @returns Matrix values string for feColorMatrix
+*/
+function buildColorMatrixValues(gain = GOOEY_DEFAULTS.ALPHA_GAIN, offset = GOOEY_DEFAULTS.ALPHA_OFFSET) {
+	return `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${gain} ${offset}`;
+}
+/**
+* Build the CSS filter string with gooey + optional drop-shadow outline.
+*
+* @param filterId - SVG filter ID to reference
+* @param outlineBlur - Drop-shadow blur (px)
+* @param outlineColor - Drop-shadow color
+* @param outlineLayers - Number of stacked drop-shadows for thickness
+* @returns CSS filter property value
+*/
+function buildFilterString(filterId, outlineBlur = .5, outlineColor = "var(--border)", outlineLayers = 2) {
+	const goo = `url(#${filterId})`;
+	const shadow = `drop-shadow(0 0 ${outlineBlur}px ${outlineColor})`;
+	return `${goo} ${Array(outlineLayers).fill(shadow).join(" ")}`;
+}
+/**
+* Memoize a path generation function — caches last result to avoid
+* recomputing identical paths on consecutive animation frames.
+*
+* @param fn - Path generation function
+* @returns Memoized function
+*/
+function memoizePath(fn) {
+	let lastArgs = null;
+	let lastResult = "";
+	return (pw, bw, th, t, ph) => {
+		if (lastArgs && lastArgs[0] === pw && lastArgs[1] === bw && lastArgs[2] === th && lastArgs[3] === t && lastArgs[4] === ph) return lastResult;
+		lastResult = fn(pw, bw, th, t, ph);
+		lastArgs = [
+			pw,
+			bw,
+			th,
+			t,
+			ph
+		];
+		return lastResult;
+	};
+}
+/**
+* Generate an SVG path for a pill that morphs downward into a body blob.
+* Adapted from goey-toast's morphPathRaw.
+*
+* @param pw - Pill width
+* @param bw - Body width (expanded)
+* @param th - Total height (pill + body)
+* @param t - Transition progress 0 (pill only) → 1 (full blob)
+* @param ph - Pill height (default: PILL_HEIGHT)
+* @returns SVG path d-string
+*/
+function morphPathDown(pw, bw, th, t, ph = GOOEY_DEFAULTS.PILL_HEIGHT) {
+	const pr = ph / 2;
+	const pillW = Math.min(pw, bw);
+	const bodyH = ph + (th - ph) * t;
+	if (t <= 0 || bodyH - ph < GOOEY_DEFAULTS.MIN_BODY_DELTA) return [
+		`M 0,${pr}`,
+		`A ${pr},${pr} 0 0 1 ${pr},0`,
+		`H ${pillW - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW - pr},${ph}`,
+		`H ${pr}`,
+		`A ${pr},${pr} 0 0 1 0,${pr}`,
+		`Z`
+	].join(" ");
+	const curve = GOOEY_DEFAULTS.CURVE_FACTOR * t;
+	const cr = Math.min(GOOEY_DEFAULTS.MAX_CORNER_RADIUS, (bodyH - ph) * GOOEY_DEFAULTS.CORNER_RATIO);
+	const bodyW = pillW + (bw - pillW) * t;
+	const bodyTop = ph - curve;
+	const qEndX = Math.min(pillW + curve, bodyW - cr);
+	return [
+		`M 0,${pr}`,
+		`A ${pr},${pr} 0 0 1 ${pr},0`,
+		`H ${pillW - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+		`L ${pillW},${bodyTop}`,
+		`Q ${pillW},${bodyTop + curve} ${qEndX},${bodyTop + curve}`,
+		`H ${bodyW - cr}`,
+		`A ${cr},${cr} 0 0 1 ${bodyW},${bodyTop + curve + cr}`,
+		`L ${bodyW},${bodyH - cr}`,
+		`A ${cr},${cr} 0 0 1 ${bodyW - cr},${bodyH}`,
+		`H ${cr}`,
+		`A ${cr},${cr} 0 0 1 0,${bodyH - cr}`,
+		`Z`
+	].join(" ");
+}
+/**
+* Generate an SVG path for a pill that morphs UPWARD into a body blob.
+* Used for DynamicToggle's bubble-above-pill layout.
+*
+* @param pw - Pill width
+* @param bw - Body (bubble) width
+* @param th - Total height (bubble + pill)
+* @param t - Transition progress 0 (pill only) → 1 (full blob with bubble)
+* @param ph - Pill height
+* @returns SVG path d-string
+*/
+function morphPathUp(pw, bw, th, t, ph = GOOEY_DEFAULTS.PILL_HEIGHT) {
+	const pr = ph / 2;
+	const pillW = Math.min(pw, bw);
+	const bubbleH = (th - ph) * t;
+	if (t <= 0 || bubbleH < GOOEY_DEFAULTS.MIN_BODY_DELTA) {
+		const y0 = th - ph;
+		return [
+			`M 0,${y0 + pr}`,
+			`A ${pr},${pr} 0 0 1 ${pr},${y0}`,
+			`H ${pillW - pr}`,
+			`A ${pr},${pr} 0 0 1 ${pillW},${y0 + pr}`,
+			`A ${pr},${pr} 0 0 1 ${pillW - pr},${y0 + ph}`,
+			`H ${pr}`,
+			`A ${pr},${pr} 0 0 1 0,${y0 + pr}`,
+			`Z`
+		].join(" ");
+	}
+	const curve = GOOEY_DEFAULTS.CURVE_FACTOR * t;
+	const cr = Math.min(GOOEY_DEFAULTS.MAX_CORNER_RADIUS, bubbleH * GOOEY_DEFAULTS.CORNER_RATIO);
+	const bubbleW = pillW + (bw - pillW) * t;
+	const pillTop = th - ph;
+	const bubbleBottom = pillTop + curve;
+	const bubbleTop = pillTop - bubbleH + curve;
+	const qEndX = Math.min(pillW + curve, bubbleW - cr);
+	return [
+		`M 0,${pillTop + pr}`,
+		`A ${pr},${pr} 0 0 1 0,${pillTop + ph - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pr},${pillTop + ph}`,
+		`H ${pillW - pr}`,
+		`A ${pr},${pr} 0 0 1 ${pillW},${pillTop + ph - pr}`,
+		`L ${pillW},${bubbleBottom}`,
+		`Q ${pillW},${bubbleBottom - curve} ${qEndX},${bubbleBottom - curve}`,
+		`H ${bubbleW - cr}`,
+		`A ${cr},${cr} 0 0 0 ${bubbleW},${bubbleBottom - curve - cr}`,
+		`L ${bubbleW},${bubbleTop + cr}`,
+		`A ${cr},${cr} 0 0 0 ${bubbleW - cr},${bubbleTop}`,
+		`H ${cr}`,
+		`A ${cr},${cr} 0 0 0 0,${bubbleTop + cr}`,
+		`Z`
+	].join(" ");
+}
+/** Memoized versions for animation performance. */
+const morphPathDownMemo = memoizePath(morphPathDown);
+const morphPathUpMemo = memoizePath(morphPathUp);
+
+//#endregion
+export { GOOEY_DEFAULTS, GOOEY_TIMING, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp };

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

@@ -0,0 +1,28 @@
+/**
+ * Gooey — SVG-based morphing primitives for organic shape merging.
+ *
+ * Two techniques:
+ * - **Filter**: `GooeyCanvas` / `GooeyFilter` — SVG filter merges same-colored shapes
+ * - **Path**: `MorphPath` / `useMorphPath` — parametric SVG path with Bezier junctions
+ *
+ * @example
+ * ```tsx
+ * // Filter approach — automatic merge
+ * <GooeyCanvas height={40}>
+ *   <div className="bg-card rounded-full h-10 w-64" />
+ *   <div className="bg-card absolute bottom-full rounded-lg h-6 w-32" />
+ * </GooeyCanvas>
+ *
+ * // Path approach — precise control
+ * <svg><MorphPath pillWidth={260} bodyWidth={180} totalHeight={60} progress={0.5} fill="var(--card)" /></svg>
+ * ```
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+export { GooeyFilter } from './GooeyFilter';
+export { GooeyCanvas } from './GooeyCanvas';
+export { MorphPath } from './MorphPath';
+export { useMorphPath } from './useMorphPath';
+export { GOOEY_DEFAULTS, computeBlur, buildColorMatrixValues, buildFilterString, memoizePath, morphPathDown, morphPathUp, morphPathDownMemo, morphPathUpMemo, } from './gooey-utils';
+export type { IGooeyFilterProps, IGooeyCanvasProps, IMorphPathProps, IUseMorphPathOptions, } from './Gooey.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EACL,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,eAAe,GAChB,MAAM,eAAe,CAAC;AAGvB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,5 @@
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, memoizePath, morphPathDown, morphPathUp } from "./gooey-utils.js";
+import { GooeyFilter } from "./GooeyFilter.js";
+import { GooeyCanvas } from "./GooeyCanvas.js";
+import { useMorphPath } from "./useMorphPath.js";
+import { MorphPath } from "./MorphPath.js";

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

@@ -0,0 +1,7 @@
+import type { IUseMorphPathOptions } from './Gooey.types';
+/**
+ * Generate a parametric SVG morph path from dimensions and progress.
+ */
+declare function useMorphPath({ pillWidth, bodyWidth, totalHeight, progress, pillHeight, direction, }: IUseMorphPathOptions): string;
+export { useMorphPath };
+//# sourceMappingURL=useMorphPath.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMorphPath.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Gooey/useMorphPath.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D;;GAEG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAuC,EACvC,SAAkB,GACnB,EAAE,oBAAoB,GAAG,MAAM,CAK/B;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { GOOEY_DEFAULTS, morphPathDown, morphPathUp } from "./gooey-utils.js";
+import { useMemo } from "react";
+
+//#region src/react-ui/primitives/waapi/Gooey/useMorphPath.ts
+/**
+* useMorphPath — hook that generates a parametric SVG path d-string.
+*
+* Returns a memoized path for a pill shape morphing into a blob.
+* Use with `<path d={path} />` in an SVG element.
+*
+* @param opts - Dimensions and progress
+* @returns SVG path d-string
+*
+* @example
+* ```tsx
+* const path = useMorphPath({
+*   pillWidth: 260,
+*   bodyWidth: 180,
+*   totalHeight: 60,
+*   progress: expanded ? 1 : 0,
+*   direction: 'up',
+* });
+* return <svg><path d={path} fill="var(--card)" /></svg>;
+* ```
+*
+* @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+*/
+/**
+* Generate a parametric SVG morph path from dimensions and progress.
+*/
+function useMorphPath({ pillWidth, bodyWidth, totalHeight, progress, pillHeight = GOOEY_DEFAULTS.PILL_HEIGHT, direction = "down" }) {
+	return useMemo(() => {
+		return (direction === "up" ? morphPathUp : morphPathDown)(pillWidth, bodyWidth, totalHeight, progress, pillHeight);
+	}, [
+		pillWidth,
+		bodyWidth,
+		totalHeight,
+		progress,
+		pillHeight,
+		direction
+	]);
+}
+
+//#endregion
+export { useMorphPath };

package/dist/react-ui/primitives/waapi/index.d.ts

@@ -30,4 +30,6 @@ export { useMorphContext } from './Morph/MorphContext';
 export { useFLIPClipPath } from './Morph/techniques/useFLIPClipPath';
 export { useCSSGridMorph } from './Morph/techniques/useCSSGridMorph';
 export { useViewTransitions } from './Morph/techniques/useViewTransitions';
+export { GooeyFilter, GooeyCanvas, MorphPath, useMorphPath, GOOEY_DEFAULTS, computeBlur, buildColorMatrixValues, buildFilterString, morphPathDown, morphPathUp, } from './Gooey';
+export type { IGooeyFilterProps, IGooeyCanvasProps, IMorphPathProps, IUseMorphPathOptions, } from './Gooey';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/waapi/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAGlD,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,4BAA4B,EAC5B,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,cAAc,GACf,MAAM,QAAQ,CAAC;AAKhB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAC;AAK7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAK5G,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/waapi/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAOH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAGlD,YAAY,EACV,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,4BAA4B,EAC5B,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,cAAc,GACf,MAAM,QAAQ,CAAC;AAKhB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,cAAc,GACf,MAAM,qCAAqC,CAAC;AAK7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAK5G,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAM3E,OAAO,EACL,WAAW,EACX,WAAW,EACX,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/dist/react-ui/primitives/waapi/index.js

@@ -16,3 +16,9 @@ import { useCSSGridMorph } from "./Morph/techniques/useCSSGridMorph.js";
 import { useViewTransitions } from "./Morph/techniques/useViewTransitions.js";
 import { useMorph } from "./Morph/useMorph.js";
 import { Morph } from "./Morph/index.js";
+import { GOOEY_DEFAULTS, buildColorMatrixValues, buildFilterString, computeBlur, morphPathDown, morphPathUp } from "./Gooey/gooey-utils.js";
+import { GooeyFilter } from "./Gooey/GooeyFilter.js";
+import { GooeyCanvas } from "./Gooey/GooeyCanvas.js";
+import { useMorphPath } from "./Gooey/useMorphPath.js";
+import { MorphPath } from "./Gooey/MorphPath.js";
+import "./Gooey/index.js";

package/dist/react-ui/ui/DataCard/DataCard.styles.d.ts

@@ -1,17 +1,35 @@
+/**
+ * DataCard style slots + CVA variants.
+ *
+ * Glassmorphism card for dashboard metrics/stats.
+ * Uses semantic CSS variables — theme-adaptive.
+ *
+ * @module @mks2508/mks-ui/react/ui/DataCard
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardLabel title="Revenue" />
+ *   <DataCardValue number={45678} unit="$" />
+ * </DataCard>
+ * ```
+ */
 import type { StyleSlots } from '../../../core/types';
 /**
- * Visual regions for: DataCard component family.
- * Each slot maps to: customizable visual region.
+ * Visual slots for DataCard component family.
  */
-export type DataCardSlot = 'root' | 'bracket' | 'header' | 'value' | 'label' | 'toggle' | 'actions' | 'footer';
+export type DataCardSlot = 'root' | 'bracket' | 'value' | 'label' | 'toggle' | 'actions';
 /**
- * Base style slots for: DataCard.
- * Uses glassmorphism pattern from: Synthwave Dark design system.
+ * Base style slots for DataCard.
  */
 export declare const dataCardStyles: StyleSlots<DataCardSlot>;
 /**
- * CVA variants for: DataCard root.
- * Combines glassmorphism with Synthwave Dark color scheme.
+ * CVA variants for DataCard root.
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="compact" glass>...</DataCard>
+ * ```
  */
 export declare const dataCardVariants: (props?: ({
     size?: "default" | "compact" | "spacious" | null | undefined;
@@ -19,17 +37,9 @@ export declare const dataCardVariants: (props?: ({
     glass?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * CVA variants for bracket visibility animation.
+ * Bracket visibility animation CVA.
  */
 export declare const bracketVariants: (props?: ({
     animate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * State-specific styles for DataCard interactions.
- */
-export declare const dataCardStateStyles: {
-    hovered: string;
-    pressed: string;
-    disabled: string;
-};
 //# sourceMappingURL=DataCard.styles.d.ts.map

package/dist/react-ui/ui/DataCard/DataCard.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,CAAC;AAEb;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAgBnD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;8EAiF3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe;;8EAU1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;CAI/B,CAAC"}
+{"version":3,"file":"DataCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAOnD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB;;;;8EA2B3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe;;8EAU1B,CAAC"}

package/dist/react-ui/ui/DataCard/DataCard.styles.js

@@ -2,86 +2,56 @@ import { cva } from "class-variance-authority";
 
 //#region src/react-ui/ui/DataCard/DataCard.styles.ts
 /**
-* Base style slots for: DataCard.
-* Uses glassmorphism pattern from: Synthwave Dark design system.
+* DataCard style slots + CVA variants.
+*
+* Glassmorphism card for dashboard metrics/stats.
+* Uses semantic CSS variables — theme-adaptive.
+*
+* @module @mks2508/mks-ui/react/ui/DataCard
+*
+* @example
+* ```tsx
+* <DataCard variant="accent" size="default">
+*   <DataCardLabel title="Revenue" />
+*   <DataCardValue number={45678} unit="$" />
+* </DataCard>
+* ```
+*/
+/**
+* Base style slots for DataCard.
 */
 const dataCardStyles = {
 	root: "group/data-card relative isolate rounded-xl transition-all duration-300",
-	bracket: "absolute pointer-events-none transition-opacity duration-300",
-	header: "flex flex-col gap-1.5 px-5 pt-5 pb-2",
+	bracket: "absolute inset-0 pointer-events-none transition-opacity duration-300",
 	value: "flex items-baseline gap-1 tabular-nums tracking-tight",
 	label: "text-sm font-medium",
 	toggle: "flex items-center justify-between gap-3",
-	actions: "flex items-center gap-2",
-	footer: "mt-auto px-5 pb-4 pt-2"
+	actions: "flex items-center gap-2"
 };
 /**
-* CVA variants for: DataCard root.
-* Combines glassmorphism with Synthwave Dark color scheme.
+* CVA variants for DataCard root.
+*
+* @example
+* ```tsx
+* <DataCard variant="accent" size="compact" glass>...</DataCard>
+* ```
 */
 const dataCardVariants = cva(dataCardStyles.root, {
 	variants: {
 		size: {
-			compact: {
-				root: "p-3",
-				header: "gap-1 px-3 pt-3 pb-1.5",
-				footer: "px-3 pb-1.5 pt-1"
-			},
-			default: {
-				root: "p-4",
-				header: "gap-1.5 px-4 pt-4 pb-2",
-				footer: "px-4 pb-2 pt-2"
-			},
-			spacious: {
-				root: "p-6",
-				header: "gap-2 px-6 pt-6 pb-3",
-				footer: "px-6 pb-3 pt-2"
-			}
+			compact: "p-3",
+			default: "p-4",
+			spacious: "p-6"
 		},
 		variant: {
-			default: [
-				"bg-white/5",
-				"backdrop-blur-lg",
-				"border border-white/10",
-				"hover:bg-white/10",
-				"shadow-lg shadow-black/20"
-			].join(" "),
-			accent: [
-				"bg-cyan-500/10",
-				"backdrop-blur-lg",
-				"border border-cyan-400/30",
-				"hover:bg-cyan-500/20",
-				"shadow-cyan-500/20 shadow-lg"
-			].join(" "),
-			success: [
-				"bg-emerald-500/10",
-				"backdrop-blur-lg",
-				"border border-emerald-400/30",
-				"hover:bg-emerald-500/20",
-				"shadow-emerald-500/20 shadow-lg"
-			].join(" "),
-			warning: [
-				"bg-amber-500/10",
-				"backdrop-blur-lg",
-				"border border-amber-400/30",
-				"hover:bg-amber-500/20",
-				"shadow-amber-500/20 shadow-lg"
-			].join(" "),
-			destructive: [
-				"bg-red-500/10",
-				"backdrop-blur-lg",
-				"border border-red-400/30",
-				"hover:bg-red-500/20",
-				"shadow-red-500/20 shadow-lg"
-			].join(" ")
+			default: "bg-card/80 border border-border/50 shadow-lg shadow-black/10",
+			accent: "bg-accent/20 border border-accent/30 shadow-lg shadow-accent/10",
+			success: "bg-green-500/10 dark:bg-green-400/10 border border-green-500/30 dark:border-green-400/30 shadow-lg shadow-green-500/10",
+			warning: "bg-amber-500/10 dark:bg-amber-400/10 border border-amber-500/30 dark:border-amber-400/30 shadow-lg shadow-amber-500/10",
+			destructive: "bg-destructive/10 border border-destructive/30 shadow-lg shadow-destructive/10"
 		},
 		glass: {
-			true: [
-				"backdrop-blur-lg",
-				"bg-white/10",
-				"border border-white/20",
-				"shadow-xl"
-			].join(" "),
+			true: "backdrop-blur-lg",
 			false: ""
 		}
 	},
@@ -92,7 +62,7 @@ const dataCardVariants = cva(dataCardStyles.root, {
 	}
 });
 /**
-* CVA variants for bracket visibility animation.
+* Bracket visibility animation CVA.
 */
 const bracketVariants = cva(dataCardStyles.bracket, {
 	variants: { animate: {
@@ -101,14 +71,6 @@ const bracketVariants = cva(dataCardStyles.bracket, {
 	} },
 	defaultVariants: { animate: true }
 });
-/**
-* State-specific styles for DataCard interactions.
-*/
-const dataCardStateStyles = {
-	hovered: "scale-[1.02]",
-	pressed: "scale-[0.98]",
-	disabled: "opacity-50 pointer-events-none"
-};
 
 //#endregion
-export { dataCardStateStyles, dataCardStyles, dataCardVariants };
+export { dataCardStyles, dataCardVariants };