@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -0,0 +1,396 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import * as React$1 from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/Highlight/index.tsx
+const DEFAULT_BOUNDS_OFFSET = {
+	top: 0,
+	left: 0,
+	width: 0,
+	height: 0
+};
+const HighlightContext = React$1.createContext(void 0);
+/**
+* Hook to access the Highlight context.
+* Must be used within a Highlight provider.
+*
+* @returns The current highlight context
+*/
+function useHighlight() {
+	const context = React$1.useContext(HighlightContext);
+	if (!context) throw new Error("useHighlight must be used within a HighlightProvider");
+	return context;
+}
+/**
+* Highlight primitive — animated background indicator that follows the active item.
+* Supports two modes: "children" (layoutId-based per item) and "parent" (absolute positioned).
+*
+* This is an internal primitive used by Tabs, Menu, and similar components.
+*
+* @param mode - Tracking mode: 'children' or 'parent'
+* @param hover - Activate on hover instead of click
+* @param click - Activate on click (default: true)
+* @param transition - Motion transition config
+*
+* @example
+* ```tsx
+* <Highlight hover>
+*   <HighlightItem><button>Tab 1</button></HighlightItem>
+*   <HighlightItem><button>Tab 2</button></HighlightItem>
+* </Highlight>
+* ```
+*/
+function Highlight({ ref, ...props }) {
+	const { as: Component = "div", children, value, defaultValue, onValueChange, className, style, transition = {
+		type: "spring",
+		stiffness: 350,
+		damping: 35
+	}, hover = false, click = true, enabled = true, controlledItems, disabled = false, exitDelay = 200, mode = "children" } = props;
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const boundsOffset = props?.boundsOffset ?? DEFAULT_BOUNDS_OFFSET;
+	const boundsOffsetTop = boundsOffset.top ?? 0;
+	const boundsOffsetLeft = boundsOffset.left ?? 0;
+	const boundsOffsetWidth = boundsOffset.width ?? 0;
+	const boundsOffsetHeight = boundsOffset.height ?? 0;
+	const boundsOffsetRef = React$1.useRef({
+		top: boundsOffsetTop,
+		left: boundsOffsetLeft,
+		width: boundsOffsetWidth,
+		height: boundsOffsetHeight
+	});
+	React$1.useEffect(() => {
+		boundsOffsetRef.current = {
+			top: boundsOffsetTop,
+			left: boundsOffsetLeft,
+			width: boundsOffsetWidth,
+			height: boundsOffsetHeight
+		};
+	}, [
+		boundsOffsetTop,
+		boundsOffsetLeft,
+		boundsOffsetWidth,
+		boundsOffsetHeight
+	]);
+	const [activeValue, setActiveValue] = React$1.useState(value ?? defaultValue ?? null);
+	const [boundsState, setBoundsState] = React$1.useState(null);
+	const [activeClassNameState, setActiveClassNameState] = React$1.useState("");
+	const safeSetActiveValue = (id) => {
+		setActiveValue((prev) => {
+			if (prev !== id) {
+				onValueChange?.(id);
+				return id;
+			}
+			return prev;
+		});
+	};
+	const safeSetBoundsRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		safeSetBoundsRef.current = (bounds) => {
+			if (!localRef.current) return;
+			const containerRect = localRef.current.getBoundingClientRect();
+			const offset = boundsOffsetRef.current;
+			const newBounds = {
+				top: bounds.top - containerRect.top + offset.top,
+				left: bounds.left - containerRect.left + offset.left,
+				width: bounds.width + offset.width,
+				height: bounds.height + offset.height
+			};
+			setBoundsState((prev) => {
+				if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) return prev;
+				return newBounds;
+			});
+		};
+	});
+	const safeSetBounds = (bounds) => {
+		safeSetBoundsRef.current?.(bounds);
+	};
+	const clearBounds = React$1.useCallback(() => {
+		setBoundsState((prev) => prev === null ? prev : null);
+	}, []);
+	React$1.useEffect(() => {
+		if (value !== void 0) setActiveValue(value);
+		else if (defaultValue !== void 0) setActiveValue(defaultValue);
+	}, [value, defaultValue]);
+	const id = React$1.useId();
+	React$1.useEffect(() => {
+		if (mode !== "parent") return;
+		const container = localRef.current;
+		if (!container) return;
+		const onScroll = () => {
+			if (!activeValue) return;
+			const activeEl = container.querySelector(`[data-value="${activeValue}"][data-highlight="true"]`);
+			if (activeEl) safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+		};
+		container.addEventListener("scroll", onScroll, { passive: true });
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [mode, activeValue]);
+	const render = (children) => {
+		if (mode === "parent") return /* @__PURE__ */ jsxs(Component, {
+			ref: localRef,
+			"data-slot": "motion-highlight-container",
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className: props?.containerClassName,
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				mode: "wait",
+				children: boundsState && /* @__PURE__ */ jsx(motion.div, {
+					"data-slot": "motion-highlight",
+					animate: {
+						top: boundsState.top,
+						left: boundsState.left,
+						width: boundsState.width,
+						height: boundsState.height,
+						opacity: 1
+					},
+					initial: {
+						top: boundsState.top,
+						left: boundsState.left,
+						width: boundsState.width,
+						height: boundsState.height,
+						opacity: 0
+					},
+					exit: {
+						opacity: 0,
+						transition: {
+							...transition,
+							delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3
+						}
+					},
+					transition,
+					style: {
+						position: "absolute",
+						zIndex: 0,
+						...style
+					},
+					className: cn(className, activeClassNameState)
+				})
+			}), children]
+		});
+		return children;
+	};
+	return /* @__PURE__ */ jsx(HighlightContext.Provider, {
+		value: {
+			mode,
+			activeValue,
+			setActiveValue: safeSetActiveValue,
+			id,
+			hover,
+			click,
+			className,
+			style,
+			transition,
+			disabled,
+			enabled,
+			exitDelay,
+			setBounds: safeSetBounds,
+			clearBounds,
+			activeClassName: activeClassNameState,
+			setActiveClassName: setActiveClassNameState,
+			forceUpdateBounds: props?.forceUpdateBounds
+		},
+		children: enabled ? controlledItems ? render(children) : render(React$1.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, {
+			className: props?.itemsClassName,
+			children: child
+		}, index))) : children
+	});
+}
+function getNonOverridingDataAttributes(element, dataAttributes) {
+	return Object.keys(dataAttributes).reduce((acc, key) => {
+		if (element.props[key] === void 0) acc[key] = dataAttributes[key];
+		return acc;
+	}, {});
+}
+/**
+* HighlightItem — a single item within a Highlight container.
+* Tracks its own position and renders the animated highlight indicator.
+*
+* @param value - Unique identifier for this item
+* @param activeClassName - Additional class when this item is active
+* @param asChild - Use the child element directly instead of wrapping
+*
+* @example
+* ```tsx
+* <HighlightItem value="tab-1">
+*   <button>Tab 1</button>
+* </HighlightItem>
+* ```
+*/
+function HighlightItem({ ref, as, children, id, value, className, style, transition, disabled = false, activeClassName, exitDelay, asChild = false, forceUpdateBounds, ...props }) {
+	const itemId = React$1.useId();
+	const { activeValue, setActiveValue, mode, setBounds, clearBounds, hover, click, enabled, className: contextClassName, style: contextStyle, transition: contextTransition, id: contextId, disabled: contextDisabled, exitDelay: contextExitDelay, forceUpdateBounds: contextForceUpdateBounds, setActiveClassName } = useHighlight();
+	const Component = as ?? "div";
+	const element = children;
+	const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
+	const isActive = activeValue === childValue;
+	const isDisabled = disabled === void 0 ? contextDisabled : disabled;
+	const itemTransition = transition ?? contextTransition;
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const refCallback = React$1.useCallback((node) => {
+		localRef.current = node;
+	}, []);
+	React$1.useEffect(() => {
+		if (mode !== "parent") return;
+		let rafId;
+		let previousBounds = null;
+		const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
+		const updateBounds = () => {
+			if (!localRef.current) return;
+			const bounds = localRef.current.getBoundingClientRect();
+			if (shouldUpdateBounds) {
+				if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
+					rafId = requestAnimationFrame(updateBounds);
+					return;
+				}
+				previousBounds = bounds;
+				rafId = requestAnimationFrame(updateBounds);
+			}
+			setBounds(bounds);
+		};
+		if (isActive) {
+			updateBounds();
+			setActiveClassName(activeClassName ?? "");
+		} else if (!activeValue) clearBounds();
+		if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+	}, [
+		mode,
+		isActive,
+		activeValue,
+		setBounds,
+		clearBounds,
+		activeClassName,
+		setActiveClassName,
+		forceUpdateBounds,
+		contextForceUpdateBounds
+	]);
+	if (!React$1.isValidElement(children)) return children;
+	const dataAttributes = {
+		"data-active": isActive ? "true" : "false",
+		"aria-selected": isActive,
+		"data-disabled": isDisabled,
+		"data-value": childValue,
+		"data-highlight": true
+	};
+	const commonHandlers = hover ? {
+		onMouseEnter: (e) => {
+			setActiveValue(childValue);
+			element.props.onMouseEnter?.(e);
+		},
+		onMouseLeave: (e) => {
+			setActiveValue(null);
+			element.props.onMouseLeave?.(e);
+		}
+	} : click ? { onClick: (e) => {
+		setActiveValue(childValue);
+		element.props.onClick?.(e);
+	} } : {};
+	if (asChild) {
+		if (mode === "children") return React$1.cloneElement(element, {
+			key: childValue,
+			ref: refCallback,
+			className: cn("relative", element.props.className),
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item-container"
+			}),
+			...commonHandlers,
+			...props
+		}, /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: isActive && !isDisabled && /* @__PURE__ */ jsx(motion.div, {
+				layoutId: `transition-background-${contextId}`,
+				"data-slot": "motion-highlight",
+				style: {
+					position: "absolute",
+					zIndex: 0,
+					...contextStyle,
+					...style
+				},
+				className: cn(contextClassName, activeClassName),
+				transition: itemTransition,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: {
+					opacity: 0,
+					transition: {
+						...itemTransition,
+						delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
+					}
+				},
+				...dataAttributes
+			})
+		}), /* @__PURE__ */ jsx(Component, {
+			"data-slot": "motion-highlight-item",
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className,
+			...dataAttributes,
+			children
+		})] }));
+		return React$1.cloneElement(element, {
+			ref: refCallback,
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item"
+			}),
+			...commonHandlers
+		});
+	}
+	return enabled ? /* @__PURE__ */ jsxs(Component, {
+		ref: localRef,
+		"data-slot": "motion-highlight-item-container",
+		className: cn(mode === "children" && "relative", className),
+		...dataAttributes,
+		...props,
+		...commonHandlers,
+		children: [mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: isActive && !isDisabled && /* @__PURE__ */ jsx(motion.div, {
+				layoutId: `transition-background-${contextId}`,
+				"data-slot": "motion-highlight",
+				style: {
+					position: "absolute",
+					zIndex: 0,
+					...contextStyle,
+					...style
+				},
+				className: cn(contextClassName, activeClassName),
+				transition: itemTransition,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: {
+					opacity: 0,
+					transition: {
+						...itemTransition,
+						delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
+					}
+				},
+				...dataAttributes
+			})
+		}), React$1.cloneElement(element, {
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className: element.props.className,
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item"
+			})
+		})]
+	}, childValue) : children;
+}
+
+//#endregion
+export { Highlight, HighlightItem, useHighlight };

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type HTMLMotionProps } from 'motion/react';
+type AnyProps = Record<string, unknown>;
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<HTMLMotionProps<keyof HTMLElementTagNameMap>, 'ref'> & {
+    ref?: React.Ref<T>;
+};
+type WithAsChild<Base extends object> = (Base & {
+    asChild: true;
+    children: React.ReactElement;
+}) | (Base & {
+    asChild?: false | undefined;
+});
+/**
+ * Props for the Slot component.
+ *
+ * @example
+ * ```tsx
+ * <Slot asChild>
+ *   <button>Click me</button>
+ * </Slot>
+ * ```
+ */
+export interface ISlotProps<T extends HTMLElement = HTMLElement> extends DOMMotionProps<T> {
+    /** Child element to render with motion enhancements. */
+    children?: any;
+}
+type SlotProps<T extends HTMLElement = HTMLElement> = ISlotProps<T>;
+/**
+ * Slot component - Motion-enhanced composition primitive.
+ *
+ * Wraps a child element with motion capabilities using the asChild pattern.
+ * When the child is already a motion component, it's used directly.
+ * Otherwise, a motion wrapper is created with the child's element type.
+ *
+ * @param children - Child element to render with motion enhancements
+ * @param ref - Ref to the merged element
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Slot asChild>
+ *   <button>Click me</button>
+ * </Slot>
+ *
+ * // With motion props
+ * <Slot asChild>
+ *   <button onClick={handleClick}>Hover me</button>
+ * </Slot>
+ * ```
+ */
+export declare function Slot<T extends HTMLElement = HTMLElement>({ children, ref, ...props }: SlotProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export type { WithAsChild, DOMMotionProps, AnyProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/primitives/Slot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAI/E,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExC,KAAK,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,IAAI,CAC7D,eAAe,CAAC,MAAM,qBAAqB,CAAC,EAC5C,KAAK,CACN,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE3B,KAAK,WAAW,CAAC,IAAI,SAAS,MAAM,IAChC,CAAC,IAAI,GAAG;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,CAAC,GACxD,CAAC,IAAI,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7C;;;;;;;;;GASG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CAC7D,SAAQ,cAAc,CAAC,CAAC,CAAC;IACzB,wDAAwD;IAExD,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC;AAwCpE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EACxD,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,kDAuBd;AAED,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,65 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import * as React$1 from "react";
+import { isMotionComponent, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/Slot/index.tsx
+function mergeRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		});
+	};
+}
+function mergeProps(childProps, slotProps) {
+	const merged = {
+		...childProps,
+		...slotProps
+	};
+	if (childProps.className || slotProps.className) merged.className = cn(childProps.className, slotProps.className);
+	if (childProps.style || slotProps.style) merged.style = {
+		...childProps.style,
+		...slotProps.style
+	};
+	return merged;
+}
+/**
+* Slot component - Motion-enhanced composition primitive.
+*
+* Wraps a child element with motion capabilities using the asChild pattern.
+* When the child is already a motion component, it's used directly.
+* Otherwise, a motion wrapper is created with the child's element type.
+*
+* @param children - Child element to render with motion enhancements
+* @param ref - Ref to the merged element
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Slot asChild>
+*   <button>Click me</button>
+* </Slot>
+*
+* // With motion props
+* <Slot asChild>
+*   <button onClick={handleClick}>Hover me</button>
+* </Slot>
+* ```
+*/
+function Slot({ children, ref, ...props }) {
+	const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
+	const Base = React$1.useMemo(() => isAlreadyMotion ? children.type : motion.create(children.type), [isAlreadyMotion, children.type]);
+	if (!React$1.isValidElement(children)) return null;
+	const { ref: childRef, ...childProps } = children.props;
+	return /* @__PURE__ */ jsx(Base, {
+		...mergeProps(childProps, props),
+		ref: mergeRefs(childRef, ref)
+	});
+}
+
+//#endregion
+export { Slot };

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

@@ -0,0 +1,13 @@
+/**
+ * Primitives barrel export.
+ *
+ * Building blocks for components. Not meant to be used directly by consumers.
+ *
+ * @module @mks2508/mks-ui/react/primitives
+ */
+export * from './Slot';
+export * from './Highlight';
+export * from './AutoHeight';
+export * from './CountingNumber';
+export * from './waapi';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,22 @@
+import { Slot } from "./Slot/index.js";
+import { Highlight, HighlightItem, useHighlight } from "./Highlight/index.js";
+import { AutoHeight } from "./AutoHeight/index.js";
+import { CountingNumber } from "./CountingNumber/index.js";
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./waapi/core/animationConstants.js";
+import { useElementRegistry } from "./waapi/core/useElementRegistry.js";
+import { usePositionCapture } from "./waapi/core/usePositionCapture.js";
+import { useFLIPAnimation } from "./waapi/core/useFLIPAnimation.js";
+import { useAnimationOrchestrator } from "./waapi/core/useAnimationOrchestrator.js";
+import { SlidingNumber } from "./waapi/SlidingNumber/index.js";
+import { SlidingText } from "./waapi/SlidingText/index.js";
+import { useReorder } from "./waapi/Reorder/useReorder.js";
+import { ReorderRoot } from "./waapi/Reorder/index.js";
+import { useReorderPresence } from "./waapi/Reorder/useReorderPresence.js";
+import { calculateSeparatorCoordination, shouldShowSeparator } from "./waapi/Reorder/utils/separatorCoordination.js";
+import { useMorphContext } from "./waapi/Morph/MorphContext.js";
+import { useFLIPClipPath } from "./waapi/Morph/techniques/useFLIPClipPath.js";
+import { useCSSGridMorph } from "./waapi/Morph/techniques/useCSSGridMorph.js";
+import { useViewTransitions } from "./waapi/Morph/techniques/useViewTransitions.js";
+import { useMorph } from "./waapi/Morph/useMorph.js";
+import { Morph } from "./waapi/Morph/index.js";
+import "./waapi/index.js";

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 };