@mks2508/mks-ui 0.2.1 → 0.3.1

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

@@ -0,0 +1,76 @@
+import type { ReactNode, RefObject } from 'react';
+/**
+ * Available morphing techniques.
+ */
+export type MorphTechnique = 'flip-clip-path' | 'css-grid' | 'view-transitions';
+/** Options for the FLIP + clip-path morphing technique */
+export interface IFLIPClipPathOptions {
+    duration?: number;
+    easing?: string;
+    clipPathStart?: string;
+    clipPathEnd?: string;
+}
+/** API returned by useFLIPClipPath */
+export interface IFLIPClipPathAPI {
+    isMorphing: boolean;
+    morph: (fromElement: HTMLElement, toElement: HTMLElement) => Promise<void>;
+    cancel: () => void;
+}
+/** Options for the CSS Grid expand/collapse technique */
+export interface ICSSGridMorphOptions {
+    duration?: number;
+    easing?: string;
+}
+/** API returned by useCSSGridMorph */
+export interface ICSSGridMorphAPI {
+    isExpanded: boolean;
+    expand: () => void;
+    collapse: () => void;
+    toggle: () => void;
+    containerRef: RefObject<HTMLElement | null>;
+}
+/** Options for the View Transitions API wrapper */
+export interface IViewTransitionsOptions {
+    name?: string;
+    types?: string[];
+}
+/** API returned by useViewTransitions */
+export interface IViewTransitionsAPI {
+    isSupported: boolean;
+    startTransition: (callback: () => void | Promise<void>) => Promise<void>;
+    setTypes: (types: string[]) => void;
+}
+/** Configuration for useMorph hook */
+export interface IUseMorphConfig {
+    technique?: MorphTechnique;
+    duration?: number;
+    easing?: string;
+    onMorphStart?: () => void;
+    onMorphEnd?: () => void;
+}
+/** Return type for useMorph hook */
+export interface IUseMorphReturn {
+    isMorphing: boolean;
+    technique: MorphTechnique;
+    isViewTransitionsSupported: boolean;
+    morph: (fromElement: HTMLElement, toElement: HTMLElement) => Promise<void>;
+    cancel: () => void;
+    flipClipPath: IFLIPClipPathAPI;
+    cssGrid: ICSSGridMorphAPI;
+    viewTransitions: IViewTransitionsAPI;
+}
+/** Props for Morph container component */
+export interface IMorphProps {
+    children: ReactNode;
+    technique?: MorphTechnique;
+    duration?: number;
+    easing?: string;
+    className?: string;
+    onMorphStart?: () => void;
+    onMorphEnd?: () => void;
+}
+/** Context value for Morph components */
+export interface IMorphContextValue {
+    morph: IUseMorphReturn;
+}
+//# sourceMappingURL=Morph.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Morph.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Morph/Morph.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,GAAG,kBAAkB,CAAC;AAMhF,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAMD,yDAAyD;AACzD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C;AAMD,mDAAmD;AACnD,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC;AAMD,sCAAsC;AACtC,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,0BAA0B,EAAE,OAAO,CAAC;IACpC,KAAK,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,EAAE,gBAAgB,CAAC;IAC/B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAMD,0CAA0C;AAC1C,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,yCAAyC;AACzC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,eAAe,CAAC;CACxB"}

package/dist/react-ui/primitives/waapi/Morph/MorphContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { IMorphContextValue } from './Morph.types';
+declare const MorphContext: React.Context<IMorphContextValue | null>;
+/**
+ * Hook to access morph context
+ *
+ * @throws Error if used outside of Morph provider
+ */
+export declare function useMorphContext(): IMorphContextValue;
+export { MorphContext };
+//# sourceMappingURL=MorphContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MorphContext.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Morph/MorphContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,YAAY,0CAAiD,CAAC;AAEpE;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,kBAAkB,CAMpD;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/Morph/MorphContext.js

@@ -0,0 +1,19 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/MorphContext.tsx
+const MorphContext = createContext(null);
+/**
+* Hook to access morph context
+*
+* @throws Error if used outside of Morph provider
+*/
+function useMorphContext() {
+	const context = useContext(MorphContext);
+	if (!context) throw new Error("useMorphContext must be used within a Morph component");
+	return context;
+}
+
+//#endregion
+export { MorphContext, useMorphContext };

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { IMorphProps, IMorphContextValue } from './Morph.types';
+/**
+ * Morph - Container component for morphable elements.
+ *
+ * Provides morphing capabilities to child components through context.
+ * Supports FLIP + clip-path, CSS Grid, and View Transitions techniques.
+ *
+ * @example
+ * ```tsx
+ * <Morph technique="flip-clip-path" duration={300}>
+ *   <button onClick={() => morph(fromRef.current, toRef.current)}>
+ *     Morph
+ *   </button>
+ * </Morph>
+ * ```
+ */
+export declare function Morph({ children, technique, duration, easing, className, onMorphStart, onMorphEnd }: IMorphProps): ReactNode;
+export declare namespace Morph {
+    var displayName: string;
+}
+export type { IMorphProps, IMorphContextValue };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Morph/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGrE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,SAA4B,EAC5B,QAAQ,EACR,MAAM,EACN,SAAc,EACd,YAAY,EACZ,UAAU,EACX,EAAE,WAAW,GAAG,SAAS,CAoBzB;yBA5Be,KAAK;;;AAgCrB,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "../../../lib/utils.js";
+import { MorphContext } from "./MorphContext.js";
+import { useMorph } from "./useMorph.js";
+import React, { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/Morph/index.tsx
+/**
+* Morph - Container component for morphable elements.
+*
+* Provides morphing capabilities to child components through context.
+* Supports FLIP + clip-path, CSS Grid, and View Transitions techniques.
+*
+* @example
+* ```tsx
+* <Morph technique="flip-clip-path" duration={300}>
+*   <button onClick={() => morph(fromRef.current, toRef.current)}>
+*     Morph
+*   </button>
+* </Morph>
+* ```
+*/
+function Morph({ children, technique = "flip-clip-path", duration, easing, className = "", onMorphStart, onMorphEnd }) {
+	const morph = useMorph({
+		technique,
+		duration,
+		easing,
+		onMorphStart,
+		onMorphEnd
+	});
+	const contextValue = useMemo(() => ({ morph }), [morph]);
+	return /* @__PURE__ */ jsx(MorphContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("morph-container", className),
+			children
+		})
+	});
+}
+Morph.displayName = "Morph";
+
+//#endregion
+export { Morph };

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

@@ -0,0 +1,12 @@
+/**
+ * Morph techniques.
+ *
+ * Individual morphing implementations that can be used
+ * standalone or composed through useMorph.
+ *
+ * @module primitives/waapi/Morph/techniques
+ */
+export { useFLIPClipPath } from './useFLIPClipPath';
+export { useCSSGridMorph } from './useCSSGridMorph';
+export { useViewTransitions } from './useViewTransitions';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.d.ts

@@ -0,0 +1,38 @@
+import type { ICSSGridMorphOptions, ICSSGridMorphAPI } from '../Morph.types';
+/**
+ * Hook for CSS Grid-based expand/collapse animations.
+ *
+ * Uses the `grid-template-rows: 0fr/1fr` technique for smooth height
+ * animations without needing to know the content height in advance.
+ *
+ * CSS required on container:
+ * ```css
+ * .morph-container {
+ *   display: grid;
+ *   grid-template-rows: 0fr;
+ *   transition: grid-template-rows 300ms ease;
+ * }
+ * .morph-container.expanded {
+ *   grid-template-rows: 1fr;
+ * }
+ * .morph-content {
+ *   overflow: hidden;
+ * }
+ * ```
+ *
+ * @param options - Duration and easing overrides
+ * @returns Grid morph API with expand, collapse, toggle, and container ref
+ *
+ * @example
+ * ```tsx
+ * const { isExpanded, toggle, containerRef } = useCSSGridMorph();
+ *
+ * return (
+ *   <div ref={containerRef} className={isExpanded ? 'expanded' : ''}>
+ *     <div className="morph-content">Collapsible content</div>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useCSSGridMorph(options?: ICSSGridMorphOptions): ICSSGridMorphAPI;
+//# sourceMappingURL=useCSSGridMorph.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSGridMorph.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,gBAAgB,CA6ChF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.js

@@ -0,0 +1,78 @@
+import { EASINGS, TIMING } from "../../core/animationConstants.js";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.ts
+const DEFAULT_DURATION = TIMING.FLIP_DURATION;
+const DEFAULT_EASING = EASINGS.MATERIAL_STANDARD;
+/**
+* Hook for CSS Grid-based expand/collapse animations.
+*
+* Uses the `grid-template-rows: 0fr/1fr` technique for smooth height
+* animations without needing to know the content height in advance.
+*
+* CSS required on container:
+* ```css
+* .morph-container {
+*   display: grid;
+*   grid-template-rows: 0fr;
+*   transition: grid-template-rows 300ms ease;
+* }
+* .morph-container.expanded {
+*   grid-template-rows: 1fr;
+* }
+* .morph-content {
+*   overflow: hidden;
+* }
+* ```
+*
+* @param options - Duration and easing overrides
+* @returns Grid morph API with expand, collapse, toggle, and container ref
+*
+* @example
+* ```tsx
+* const { isExpanded, toggle, containerRef } = useCSSGridMorph();
+*
+* return (
+*   <div ref={containerRef} className={isExpanded ? 'expanded' : ''}>
+*     <div className="morph-content">Collapsible content</div>
+*   </div>
+* );
+* ```
+*/
+function useCSSGridMorph(options) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const containerRef = useRef(null);
+	const optionsRef = useRef(options);
+	const duration = optionsRef.current?.duration ?? DEFAULT_DURATION;
+	const easing = optionsRef.current?.easing ?? DEFAULT_EASING;
+	const applyTransition = useCallback(() => {
+		if (containerRef.current) containerRef.current.style.transition = `grid-template-rows ${duration}ms ${easing}`;
+	}, [duration, easing]);
+	const expand = useCallback(() => {
+		applyTransition();
+		if (containerRef.current) containerRef.current.style.gridTemplateRows = "1fr";
+		setIsExpanded(true);
+	}, [applyTransition]);
+	const collapse = useCallback(() => {
+		applyTransition();
+		if (containerRef.current) containerRef.current.style.gridTemplateRows = "0fr";
+		setIsExpanded(false);
+	}, [applyTransition]);
+	return {
+		isExpanded,
+		expand,
+		collapse,
+		toggle: useCallback(() => {
+			if (isExpanded) collapse();
+			else expand();
+		}, [
+			isExpanded,
+			expand,
+			collapse
+		]),
+		containerRef
+	};
+}
+
+//#endregion
+export { useCSSGridMorph };

package/dist/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.d.ts

@@ -0,0 +1,23 @@
+import type { IFLIPClipPathOptions, IFLIPClipPathAPI } from '../Morph.types';
+/**
+ * Hook for FLIP + clip-path morphing technique.
+ *
+ * Combines:
+ * 1. FLIP for position/size transitions
+ * 2. clip-path for shape morphing
+ * 3. Opacity crossfade for smooth visual transition
+ *
+ * @param options - Duration, easing, and clip-path overrides
+ * @returns API with morph trigger, cancel, and morphing state
+ *
+ * @example
+ * ```tsx
+ * const { isMorphing, morph, cancel } = useFLIPClipPath({ duration: 300 });
+ *
+ * const handleMorph = async () => {
+ *   await morph(fromRef.current, toRef.current);
+ * };
+ * ```
+ */
+export declare function useFLIPClipPath(options?: IFLIPClipPathOptions): IFLIPClipPathAPI;
+//# sourceMappingURL=useFLIPClipPath.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFLIPClipPath.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAK7E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,gBAAgB,CAsIhF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.js

@@ -0,0 +1,140 @@
+import { EASINGS, TIMING } from "../../core/animationConstants.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.ts
+const DEFAULT_DURATION = TIMING.FLIP_DURATION;
+const DEFAULT_EASING = EASINGS.EASE_OUT_CUBIC;
+/**
+* Hook for FLIP + clip-path morphing technique.
+*
+* Combines:
+* 1. FLIP for position/size transitions
+* 2. clip-path for shape morphing
+* 3. Opacity crossfade for smooth visual transition
+*
+* @param options - Duration, easing, and clip-path overrides
+* @returns API with morph trigger, cancel, and morphing state
+*
+* @example
+* ```tsx
+* const { isMorphing, morph, cancel } = useFLIPClipPath({ duration: 300 });
+*
+* const handleMorph = async () => {
+*   await morph(fromRef.current, toRef.current);
+* };
+* ```
+*/
+function useFLIPClipPath(options) {
+	const [isMorphing, setIsMorphing] = useState(false);
+	const activeAnimationsRef = useRef([]);
+	const optionsRef = useRef(options);
+	useEffect(() => {
+		optionsRef.current = options;
+	}, [options]);
+	const cancel = useCallback(() => {
+		activeAnimationsRef.current.forEach((anim) => anim.cancel());
+		activeAnimationsRef.current = [];
+		setIsMorphing(false);
+	}, []);
+	const morph = useCallback(async (fromElement, toElement) => {
+		if (isMorphing) cancel();
+		setIsMorphing(true);
+		const duration = optionsRef.current?.duration ?? DEFAULT_DURATION;
+		const easing = optionsRef.current?.easing ?? DEFAULT_EASING;
+		const fromRect = fromElement.getBoundingClientRect();
+		const toRect = toElement.getBoundingClientRect();
+		const deltaX = fromRect.left - toRect.left;
+		const deltaY = fromRect.top - toRect.top;
+		const scaleX = fromRect.width / toRect.width;
+		const scaleY = fromRect.height / toRect.height;
+		const fromBorderRadius = getComputedStyle(fromElement).borderRadius;
+		const toBorderRadius = getComputedStyle(toElement).borderRadius;
+		const fromClipPath = optionsRef.current?.clipPathStart || borderRadiusToInset(fromBorderRadius, fromRect);
+		const toClipPath = optionsRef.current?.clipPathEnd || borderRadiusToInset(toBorderRadius, toRect);
+		const originalFromStyles = {
+			position: fromElement.style.position,
+			opacity: fromElement.style.opacity,
+			pointerEvents: fromElement.style.pointerEvents
+		};
+		const originalToStyles = {
+			position: toElement.style.position,
+			opacity: toElement.style.opacity,
+			transform: toElement.style.transform,
+			clipPath: toElement.style.clipPath
+		};
+		fromElement.style.position = "absolute";
+		fromElement.style.pointerEvents = "none";
+		toElement.style.position = "relative";
+		toElement.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
+		toElement.style.clipPath = fromClipPath;
+		toElement.style.opacity = "0";
+		const fromFadeOut = fromElement.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: duration * .5,
+			easing,
+			fill: "forwards"
+		});
+		const toFadeIn = toElement.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: duration * .5,
+			delay: duration * .25,
+			easing,
+			fill: "forwards"
+		});
+		const toTransform = toElement.animate([{
+			transform: `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`,
+			clipPath: fromClipPath
+		}, {
+			transform: "translate(0, 0) scale(1, 1)",
+			clipPath: toClipPath
+		}], {
+			duration,
+			easing,
+			fill: "forwards"
+		});
+		activeAnimationsRef.current = [
+			fromFadeOut,
+			toFadeIn,
+			toTransform
+		];
+		try {
+			await Promise.all([
+				fromFadeOut.finished,
+				toFadeIn.finished,
+				toTransform.finished
+			]);
+		} catch {
+			Object.assign(fromElement.style, originalFromStyles);
+			Object.assign(toElement.style, originalToStyles);
+			setIsMorphing(false);
+			return;
+		}
+		Object.assign(fromElement.style, originalFromStyles);
+		toElement.style.transform = "";
+		toElement.style.clipPath = "";
+		toElement.style.opacity = "1";
+		activeAnimationsRef.current = [];
+		setIsMorphing(false);
+	}, [isMorphing, cancel]);
+	useEffect(() => {
+		return () => {
+			cancel();
+		};
+	}, [cancel]);
+	return {
+		isMorphing,
+		morph,
+		cancel
+	};
+}
+/**
+* Convert a CSS border-radius value to an inset() clip-path with rounded corners.
+* @param borderRadius - CSS border-radius string
+* @param rect - Bounding rect of the element
+* @returns inset() clip-path string
+*/
+function borderRadiusToInset(borderRadius, rect) {
+	const radius = parseFloat(borderRadius) || 0;
+	return `inset(0 round ${radius / rect.width * 100}% ${radius / rect.height * 100}%)`;
+}
+
+//#endregion
+export { useFLIPClipPath };

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.d.ts

@@ -0,0 +1,28 @@
+import type { IViewTransitionsOptions, IViewTransitionsAPI } from '../Morph.types';
+/**
+ * Hook for the View Transitions API.
+ *
+ * Provides a wrapper around the native View Transitions API
+ * with automatic feature detection and fallback handling.
+ *
+ * Browser support:
+ * - Chrome 111+
+ * - Firefox 144+
+ * - Safari latest
+ *
+ * @param options - Optional view transition name and types
+ * @returns View Transitions API with support detection and transition trigger
+ *
+ * @example
+ * ```tsx
+ * const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+ *
+ * const handleTransition = async () => {
+ *   await startTransition(() => {
+ *     setActiveImage(nextImage);
+ *   });
+ * };
+ * ```
+ */
+export declare function useViewTransitions(options?: IViewTransitionsOptions): IViewTransitionsAPI;
+//# sourceMappingURL=useViewTransitions.d.ts.map

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewTransitions.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,mBAAmB,CAyDzF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.js

@@ -0,0 +1,77 @@
+import { useCallback, useMemo, useRef } from "react";
+
+//#region src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts
+/**
+* Hook for the View Transitions API.
+*
+* Provides a wrapper around the native View Transitions API
+* with automatic feature detection and fallback handling.
+*
+* Browser support:
+* - Chrome 111+
+* - Firefox 144+
+* - Safari latest
+*
+* @param options - Optional view transition name and types
+* @returns View Transitions API with support detection and transition trigger
+*
+* @example
+* ```tsx
+* const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+*
+* const handleTransition = async () => {
+*   await startTransition(() => {
+*     setActiveImage(nextImage);
+*   });
+* };
+* ```
+*/
+function useViewTransitions(options) {
+	const optionsRef = useRef(options);
+	const typesRef = useRef(options?.types || []);
+	const isSupported = useMemo(() => {
+		if (typeof document === "undefined") return false;
+		return "startViewTransition" in document;
+	}, []);
+	const setTypes = useCallback((types) => {
+		typesRef.current = types;
+	}, []);
+	return {
+		isSupported,
+		startTransition: useCallback(async (callback) => {
+			if (!document.startViewTransition) {
+				await callback();
+				return;
+			}
+			const viewTransitionName = optionsRef.current?.name;
+			const setupStyles = () => {
+				if (viewTransitionName) {
+					const styleEl = document.createElement("style");
+					styleEl.id = `view-transition-${viewTransitionName}`;
+					styleEl.textContent = `
+          ::view-transition-old(${viewTransitionName}),
+          ::view-transition-new(${viewTransitionName}) {
+            animation-duration: 300ms;
+            animation-timing-function: ease-out;
+          }
+        `;
+					document.head.appendChild(styleEl);
+					return () => {
+						styleEl.remove();
+					};
+				}
+				return () => {};
+			};
+			const cleanup = setupStyles();
+			try {
+				await document.startViewTransition(callback).finished;
+			} finally {
+				cleanup();
+			}
+		}, []),
+		setTypes
+	};
+}
+
+//#endregion
+export { useViewTransitions };

package/dist/react-ui/primitives/waapi/Morph/useMorph.d.ts

@@ -0,0 +1,27 @@
+import type { IUseMorphReturn, IUseMorphConfig } from './Morph.types';
+/**
+ * Unified hook for morphing animations.
+ *
+ * Provides access to multiple morphing techniques:
+ * - FLIP + clip-path (default): Best for element-to-element transitions
+ * - CSS Grid: Best for expand/collapse animations
+ * - View Transitions: Best for page/route transitions (requires browser support)
+ *
+ * Falls back to FLIP + clip-path when View Transitions API is unsupported.
+ *
+ * @param options - Technique selection, timing, and callbacks
+ * @returns Unified morph API with access to individual techniques
+ *
+ * @example
+ * ```tsx
+ * const morph = useMorph({ technique: 'flip-clip-path' });
+ *
+ * // Unified API:
+ * await morph.morph(fromElement, toElement);
+ *
+ * // Or individual techniques:
+ * morph.cssGrid.toggle();
+ * ```
+ */
+export declare function useMorph(options?: IUseMorphConfig): IUseMorphReturn;
+//# sourceMappingURL=useMorph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMorph.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/Morph/useMorph.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAkB,MAAM,eAAe,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,eAAe,CAqEnE"}