@mks2508/mks-ui 0.5.2 → 0.5.7

package/dist/react-ui/ui/DynamicToggle/index.d.ts

@@ -1,29 +1,31 @@
-import type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps } from './DynamicToggle.types';
+import './DynamicToggle.css';
+import { dynamicToggleVariants } from './DynamicToggle.styles';
+import type { DynamicToggleContextType, IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps } from './DynamicToggle.types';
+declare const useDynamicToggle: () => DynamicToggleContextType;
 /**
- * Root container — pill-shaped toggle control.
- *
- * @param props - Component props
- * @returns React component
+ * Root container — pill-shaped toggle with expanding sub-options and group label.
  */
-declare function DynamicToggle({ slots, className, children, ...props }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function DynamicToggle({ variant, size, shape, slots, config, disabled, className, children, 'aria-label': ariaLabel, ...props }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicToggle {
+    var displayName: string;
+}
 /**
- * A single toggle option — renders a hidden radio + visible label.
- * Can be used at the top level or inside a DynamicToggleGroup.
- *
- * @param props - Component props
- * @returns React component
+ * A single toggle option — hidden radio + visible label.
  */
 declare function DynamicToggleOption({ value, children, className }: IDynamicToggleOptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicToggleOption {
+    var displayName: string;
+}
 /**
- * An expandable group of options. Shows `label` when collapsed,
- * expands to show sub-options when one is active.
- *
- * @param props - Component props
- * @returns React component
+ * Expandable group — registers with root on mount, renders sub-options.
+ * The group label is rendered by the root based on registered info.
  */
-declare function DynamicToggleGroup({ label, children, className }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
-export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup };
-export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, DynamicToggleContextType, } from './DynamicToggle.types';
-export type { DynamicToggleSlot } from './DynamicToggle.styles';
+declare function DynamicToggleGroup({ label, labelPosition, collapsedMode, children, className, }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DynamicToggleGroup {
+    var displayName: string;
+}
+export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup, useDynamicToggle, dynamicToggleVariants, };
+export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, IDynamicToggleConfig, DynamicToggleContextType, DynamicToggleCollapsedMode, DynamicToggleMorphMode, } from './DynamicToggle.types';
+export type { DynamicToggleSlot, DynamicToggleVariantProps } from './DynamicToggle.styles';
 export { dynamicToggleStyles } from './DynamicToggle.styles';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/DynamicToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAEV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAyD/B;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiDrB;AAMD;;;;;;GAMG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA0BrF;AAMD;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAqBnF;AAMD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAExB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAmCrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiGrB;kBA5GQ,aAAa;;;AAkHtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,aAAqB,EACrB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAhDQ,kBAAkB;;;AA2D3B,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/react-ui/ui/DynamicToggle/index.js

@@ -1,123 +1,137 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
+import { GooeyCanvas } from "../../primitives/waapi/Gooey/GooeyCanvas.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
-import { dynamicToggleStyles } from "./DynamicToggle.styles.js";
+import "./DynamicToggle.js";
+import { dynamicToggleStyles, dynamicToggleVariants } from "./DynamicToggle.styles.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/ui/DynamicToggle/index.tsx
 /**
-* DynamicToggle — CSS-animated toggle where one option expands into sub-options.
+* DynamicToggle — CSS-animated toggle with expanding sub-options and group label.
 *
-* Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
-* The indicator slides between options, and group options expand/collapse
-* with a clip-path reveal animation.
+* Pure CSS animation via `:has(:checked)` on hidden radio inputs.
+* When the group is active, a group label grows out of the pill.
+* Optional gooey morph via `config.morphMode` for organic junction.
+*
+* Supports exactly 1 `DynamicToggleOption` + 1 `DynamicToggleGroup` (with 2 sub-options).
 *
 * @module @mks2508/mks-ui/react/ui/DynamicToggle
 *
 * @example
 * ```tsx
-* <DynamicToggle value="tree" onValueChange={setVal}>
+* <DynamicToggle value="tree" onValueChange={setVal} size="sm" shape="pill">
 *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
-*   <DynamicToggleGroup label="Changes">
+*   <DynamicToggleGroup label="Changes" collapsedMode="title" labelPosition="top">
 *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
 *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
 *   </DynamicToggleGroup>
 * </DynamicToggle>
 * ```
 */
-const DT_CSS_ID = "mks-dynamic-toggle-css";
-/** Reads the CSS file content at build time via rolldown */
-const DT_CSS = `
-:root{--dt-duration:0.22s;--dt-ease:cubic-bezier(0.22,0.61,0.36,1);--dt-drop-off:0.45}
-[data-slot="dt-track"]{grid-template-columns:repeat(4,1fr)}
-[data-slot="dt-track"]>label:first-of-type,[data-slot="dt-group"]{grid-column:span 2}
-[data-slot="dt-indicator"]{transition:translate var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-indicator"]{translate:0 0}
-[data-slot="dt-track"]:not(:has(>input:checked)) [data-slot="dt-indicator"]{translate:100% 0}
-[data-slot="dt-track"]:has(>input:checked)>label{color:var(--card)}
-[data-slot="dt-track"]:not(:has(>input:checked))>label{color:var(--foreground);opacity:var(--dt-drop-off)}
-[data-slot="dt-group"]{container-type:size;grid-template-columns:1fr 1fr}
-[data-slot="dt-group-label"]{translate:-50% -80%;transition:translate var(--dt-duration) var(--dt-ease),scale var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-label"]{translate:-50% -250%;scale:0.85}
-[data-slot="dt-group-indicator"]{transition:translate var(--dt-duration) var(--dt-ease),clip-path var(--dt-duration) var(--dt-ease),background var(--dt-duration) var(--dt-ease);clip-path:inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round 100px);translate:-50% 0;background:var(--foreground)}
-[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"]{background:var(--card);clip-path:inset(0 0 0 0 round 100px)}
-[data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"]{translate:-100% 0}
-[data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"]{translate:0 0}
-[data-slot="dt-group"] label{color:var(--muted-foreground);transition:color var(--dt-duration) var(--dt-ease),opacity var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-group"] label span{transition:scale var(--dt-duration) var(--dt-ease)}
-[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-group"] label{color:var(--muted-foreground)}
-[data-slot="dt-group"]:has(input:checked) label{color:var(--muted-foreground);opacity:0.75}
-[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2){color:var(--foreground);opacity:1}
-[data-slot="dt-group"] label:nth-of-type(1) span{scale:0.75;transform-origin:150% 150%}
-[data-slot="dt-group"] label:nth-of-type(2) span{scale:0.75;transform-origin:-65% 150%}
-[data-slot="dt-group"]:has(input:checked) label span{scale:1}
-[data-slot="dt-radio"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
-`;
-function useDynamicToggleCSS() {
-	React$1.useEffect(() => {
-		if (typeof document === "undefined") return;
-		if (document.getElementById(DT_CSS_ID)) return;
-		const style = document.createElement("style");
-		style.id = DT_CSS_ID;
-		style.textContent = DT_CSS;
-		document.head.appendChild(style);
-	}, []);
-}
 const [DynamicToggleProvider, useDynamicToggle] = getStrictContext("DynamicToggleContext");
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
+const SIZE_HEIGHT_PX = {
+	sm: 30,
+	default: 38,
+	lg: 44
+};
+const SIZE_WIDTH_PX = {
+	sm: 210,
+	default: 260,
+	lg: 320
+};
+const SHAPE_RADIUS = {
+	pill: 9999,
+	rounded: 12,
+	square: 6
+};
 /**
-* Root container — pill-shaped toggle control.
-*
-* @param props - Component props
-* @returns React component
+* Root container — pill-shaped toggle with expanding sub-options and group label.
 */
-function DynamicToggle({ slots, className, children, ...props }) {
-	useDynamicToggleCSS();
+function DynamicToggle({ variant, size, shape, slots, config, disabled = false, className, children, "aria-label": ariaLabel, ...props }) {
 	const [value, setValue] = useControlledState({
 		value: props.value,
 		defaultValue: props.defaultValue ?? "",
 		onChange: props.onValueChange
 	});
 	const groupName = React$1.useId();
-	const groupActive = React$1.useMemo(() => {
-		const vals = [];
-		React$1.Children.forEach(children, (child) => {
-			if (React$1.isValidElement(child) && child.type === DynamicToggleGroup) React$1.Children.forEach(child.props.children, (gc) => {
-				if (React$1.isValidElement(gc) && gc.props.value) vals.push(gc.props.value);
-			});
-		});
-		return vals;
-	}, [children]).includes(value);
+	const [groupLabel, setGroupLabel] = React$1.useState("");
+	const [groupValues, setGroupValues] = React$1.useState([]);
+	const [groupPosition, setGroupPosition] = React$1.useState("top");
+	const [groupCollapsedMode, setGroupCollapsedMode] = React$1.useState("title");
+	const registerGroup = React$1.useCallback((label, values, position, collapsedMode) => {
+		setGroupLabel(label);
+		setGroupValues(values);
+		setGroupPosition(position);
+		setGroupCollapsedMode(collapsedMode);
+	}, []);
+	const groupActive = groupValues.includes(value);
+	const morphMode = config?.morphMode ?? "none";
+	const resolvedVariant = variant ?? "default";
+	const effectiveMorphMode = resolvedVariant === "ghost" || resolvedVariant === "outline" ? "none" : morphMode;
+	const showGroupLabel = (config?.labelAnimation ?? "morph") !== "none" && groupPosition !== "hidden" && groupLabel;
+	const heightPx = SIZE_HEIGHT_PX[size ?? "default"] ?? 32;
+	const style = {
+		...config?.duration && { "--dt-dur": `${config.duration}s` },
+		...config?.indicatorDuration && { "--dt-indicator-dur": `${config.indicatorDuration}s` },
+		...config?.indicatorEasing && { "--dt-indicator-ease": config.indicatorEasing }
+	};
+	const hasStyle = Object.keys(style).length > 0;
+	const groupLabelElement = showGroupLabel ? /* @__PURE__ */ jsx("div", {
+		"data-slot": "dt-group-label",
+		"data-position": groupPosition,
+		className: cn(dynamicToggleStyles.groupLabel, slots?.groupLabel),
+		children: /* @__PURE__ */ jsx("span", { children: groupLabel || "\xA0" })
+	}) : null;
 	return /* @__PURE__ */ jsx(DynamicToggleProvider, {
 		value: {
 			value,
 			setValue,
 			groupName,
-			groupActive
+			groupActive,
+			disabled,
+			registerGroup
 		},
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			"data-slot": "dt-root",
+			"data-morph": effectiveMorphMode !== "none" ? effectiveMorphMode : void 0,
+			"data-indicator": config?.forceTranslateIndicator ? "translate" : void 0,
 			"data-group-active": groupActive || void 0,
-			className: cn(dynamicToggleStyles.root, slots?.root, className),
-			children: /* @__PURE__ */ jsxs("div", {
-				"data-slot": "dt-track",
-				className: cn(dynamicToggleStyles.track, slots?.track),
-				children: [/* @__PURE__ */ jsx("div", {
-					"data-slot": "dt-indicator",
-					className: cn(dynamicToggleStyles.indicator, slots?.indicator)
-				}), children]
-			})
+			"data-disabled": disabled || void 0,
+			role: "radiogroup",
+			"aria-label": ariaLabel,
+			style: hasStyle ? style : void 0,
+			className: cn(dynamicToggleVariants({
+				variant,
+				size,
+				shape
+			}), slots?.root, className),
+			children: [
+				effectiveMorphMode === "filter" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(GooeyCanvas, {
+					height: heightPx,
+					width: SIZE_WIDTH_PX[size ?? "default"] ?? 260,
+					radius: SHAPE_RADIUS[shape ?? "pill"] ?? 9999,
+					expanded: groupActive
+				}), groupLabelElement] }),
+				effectiveMorphMode === "path" && groupLabelElement,
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "dt-track",
+					className: cn(dynamicToggleStyles.track, slots?.track),
+					children: [/* @__PURE__ */ jsx("div", {
+						"data-slot": "dt-indicator",
+						className: cn(dynamicToggleStyles.indicator, slots?.indicator)
+					}), children]
+				})
+			]
 		})
 	});
 }
 /**
-* A single toggle option — renders a hidden radio + visible label.
-* Can be used at the top level or inside a DynamicToggleGroup.
-*
-* @param props - Component props
-* @returns React component
+* A single toggle option — hidden radio + visible label.
 */
 function DynamicToggleOption({ value, children, className }) {
 	const ctx = useDynamicToggle();
@@ -130,40 +144,63 @@ function DynamicToggleOption({ value, children, className }) {
 		className: cn(dynamicToggleStyles.option, className),
 		children: /* @__PURE__ */ jsx("span", { children })
 	}), /* @__PURE__ */ jsx("input", {
-		"data-slot": "dt-radio",
+		className: "sr-only",
 		type: "radio",
 		name: ctx.groupName,
 		id,
 		value,
 		checked: isActive,
+		disabled: ctx.disabled,
 		onChange: () => ctx.setValue(value)
 	})] });
 }
 /**
-* An expandable group of options. Shows `label` when collapsed,
-* expands to show sub-options when one is active.
-*
-* @param props - Component props
-* @returns React component
+* Expandable group — registers with root on mount, renders sub-options.
+* The group label is rendered by the root based on registered info.
 */
-function DynamicToggleGroup({ label, children, className }) {
+function DynamicToggleGroup({ label, labelPosition = "top", collapsedMode = "title", children, className }) {
+	const ctx = useDynamicToggle();
+	const optsText = React$1.useMemo(() => {
+		const labels = [];
+		React$1.Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child)) {
+				const p = child.props;
+				if (p.children) labels.push(String(p.children));
+			}
+		});
+		return labels.join(" · ");
+	}, [children]);
+	useIsomorphicLayoutEffect(() => {
+		const values = [];
+		React$1.Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child)) {
+				const p = child.props;
+				if (p.value) values.push(p.value);
+			}
+		});
+		ctx.registerGroup(label, values, labelPosition, collapsedMode);
+	}, [
+		label,
+		labelPosition,
+		collapsedMode,
+		children,
+		ctx.registerGroup
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "dt-group",
+		"data-collapsed": collapsedMode,
+		"data-label": label,
+		"data-opts": collapsedMode !== "title" ? optsText : void 0,
 		className: cn(dynamicToggleStyles.group, className),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"data-slot": "dt-group-label",
-				className: dynamicToggleStyles.groupLabel,
-				children: label
-			}),
-			/* @__PURE__ */ jsx("div", {
-				"data-slot": "dt-group-indicator",
-				className: dynamicToggleStyles.groupIndicator
-			}),
-			children
-		]
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "dt-group-indicator",
+			className: dynamicToggleStyles.groupIndicator
+		}), children]
 	});
 }
+DynamicToggle.displayName = "DynamicToggle";
+DynamicToggleOption.displayName = "DynamicToggleOption";
+DynamicToggleGroup.displayName = "DynamicToggleGroup";
 
 //#endregion
-export { DynamicToggle, DynamicToggleGroup, DynamicToggleOption };
+export { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle };

package/dist/react-ui/ui/Switch/index.js

@@ -85,7 +85,7 @@ function Switch$1({ name, defaultChecked, checked, onCheckedChange, nativeButton
 			defaultChecked,
 			checked,
 			onCheckedChange: setIsChecked,
-			nativeButton,
+			nativeButton: nativeButton ?? true,
 			disabled,
 			readOnly,
 			required,

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

@@ -39,5 +39,5 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScro
 import { dataCardStyles, dataCardVariants } from "./DataCard/DataCard.styles.js";
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./DataCard/index.js";
 import { TextFlow } from "./TextFlow/index.js";
-import { dynamicToggleStyles } from "./DynamicToggle/DynamicToggle.styles.js";
-import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption } from "./DynamicToggle/index.js";
+import { dynamicToggleStyles, dynamicToggleVariants } from "./DynamicToggle/DynamicToggle.styles.js";
+import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption, useDynamicToggle } from "./DynamicToggle/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.5.2",
+  "version": "0.5.7",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css",
+    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css && mkdir -p dist/react-ui/ui/DynamicToggle && cp src/react-ui/ui/DynamicToggle/DynamicToggle.css dist/react-ui/ui/DynamicToggle/DynamicToggle.css",
     "typecheck": "bunx tsc --noEmit",
     "lint": "bunx oxlint .",
     "preview": "vite preview",

package/src/css.d.ts

@@ -4,3 +4,4 @@ declare module '*.module.css' {
 }
 
 declare module '@xterm/xterm/css/xterm.css';
+declare module '*.css';

package/src/react-ui/primitives/waapi/Gooey/Gooey.types.ts

@@ -0,0 +1,141 @@
+/**
+ * Gooey morphing primitive types.
+ *
+ * @module @mks2508/mks-ui/react/primitives/waapi/Gooey
+ */
+
+import type { ReactNode } from 'react';
+
+// ---------------------------------------------------------------------------
+// GooeyFilter
+// ---------------------------------------------------------------------------
+
+/**
+ * Props for the GooeyFilter SVG filter definition.
+ *
+ * @example
+ * ```tsx
+ * <GooeyFilter id="my-goo" blur={8} />
+ * ```
+ */
+export interface IGooeyFilterProps {
+  /** Unique filter ID — referenced via `filter: url(#id)` */
+  id: string;
+  /** Gaussian blur stdDeviation (default: 8) */
+  blur?: number;
+  /** Alpha channel multiplier in feColorMatrix (default: 20) */
+  alphaGain?: number;
+  /** Alpha channel offset in feColorMatrix (default: -10) */
+  alphaOffset?: number;
+}
+
+// ---------------------------------------------------------------------------
+// GooeyCanvas
+// ---------------------------------------------------------------------------
+
+/**
+ * Props for the GooeyCanvas container.
+ *
+ * Wraps children with an SVG gooey filter. All same-colored children
+ * inside automatically merge visually into an organic blob.
+ *
+ * @example
+ * ```tsx
+ * <GooeyCanvas height={40}>
+ *   <div className="bg-card rounded-full h-10 w-64" />
+ *   <div className="bg-card absolute bottom-full w-32 h-6" />
+ * </GooeyCanvas>
+ * ```
+ */
+export interface IGooeyCanvasProps {
+  /** Blur radius override. If omitted, auto-calculated from `height`. */
+  blur?: number;
+  /** 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)') */
+  outlineColor?: string;
+  /** Number of stacked drop-shadows for outline thickness (default: 2) */
+  outlineLayers?: number;
+  /** Alpha gain override */
+  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;
+}
+
+// ---------------------------------------------------------------------------
+// MorphPath
+// ---------------------------------------------------------------------------
+
+/**
+ * Props for the MorphPath SVG path component.
+ *
+ * Renders a parametric `<path>` that morphs from a pill shape to a
+ * pill+body blob based on the `progress` value.
+ *
+ * @example
+ * ```tsx
+ * <svg>
+ *   <MorphPath pillWidth={260} bodyWidth={180} totalHeight={60} progress={0.5} fill="var(--card)" />
+ * </svg>
+ * ```
+ */
+export interface IMorphPathProps extends React.SVGProps<SVGPathElement> {
+  /** Pill width in px */
+  pillWidth: number;
+  /** Body (expanded area) width in px */
+  bodyWidth: number;
+  /** Total height (pill + body) in px */
+  totalHeight: number;
+  /** Morph progress: 0 = pill only, 1 = fully expanded */
+  progress: number;
+  /** Pill height (default: 34) */
+  pillHeight?: number;
+  /** Body expansion direction relative to pill */
+  direction?: 'down' | 'up';
+}
+
+// ---------------------------------------------------------------------------
+// useMorphPath
+// ---------------------------------------------------------------------------
+
+/**
+ * Options for the useMorphPath hook.
+ */
+export interface IUseMorphPathOptions {
+  /** Pill width in px */
+  pillWidth: number;
+  /** Body width in px */
+  bodyWidth: number;
+  /** Total height in px */
+  totalHeight: number;
+  /** Morph progress 0→1 */
+  progress: number;
+  /** Pill height (default: 34) */
+  pillHeight?: number;
+  /** Body direction */
+  direction?: 'down' | 'up';
+}