@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/primitives/waapi/core/useFLIPAnimation.js

@@ -0,0 +1,99 @@
+import { EASINGS, TIMING } from "./animationConstants.js";
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/react-ui/primitives/waapi/core/useFLIPAnimation.ts
+const DEFAULT_DURATION = TIMING.FLIP_DURATION;
+const DEFAULT_EASING = EASINGS.SPRING_GENTLE;
+/**
+* Hook for executing FLIP (First-Last-Invert-Play) animations.
+* Uses spring easing for natural motion with slight overshoot.
+*
+* @returns FLIP animation API with animate, cancel, and status methods
+*
+* @example
+* ```tsx
+* const flip = useFLIPAnimation();
+*
+* // After calculating deltas:
+* await flip.animateAll(elements, deltas, {
+*   duration: 300,
+*   onComplete: (id) => console.log(`${id} completed`)
+* });
+* ```
+*/
+function useFLIPAnimation() {
+	const activeAnimationsRef = useRef(/* @__PURE__ */ new Map());
+	const animatingIdsRef = useRef(/* @__PURE__ */ new Set());
+	const animate = useCallback((element, delta, options) => {
+		const duration = options?.duration ?? DEFAULT_DURATION;
+		const easing = options?.easing ?? DEFAULT_EASING;
+		if (activeAnimationsRef.current.has(delta.id)) activeAnimationsRef.current.get(delta.id)?.cancel();
+		animatingIdsRef.current.add(delta.id);
+		options?.onStart?.(delta.id);
+		const animation = element.animate([{ transform: `translate3d(${delta.deltaX}px, ${delta.deltaY}px, 0)` }, { transform: "translate3d(0, 0, 0)" }], {
+			duration,
+			easing
+		});
+		activeAnimationsRef.current.set(delta.id, animation);
+		animation.onfinish = () => {
+			animatingIdsRef.current.delete(delta.id);
+			activeAnimationsRef.current.delete(delta.id);
+			options?.onComplete?.(delta.id);
+		};
+		animation.oncancel = () => {
+			animatingIdsRef.current.delete(delta.id);
+			activeAnimationsRef.current.delete(delta.id);
+		};
+		return animation;
+	}, []);
+	const animateAll = useCallback(async (elements, deltas, options) => {
+		const animations = [];
+		deltas.forEach((delta, id) => {
+			if (!delta.isSignificant) return;
+			const element = elements.get(id);
+			if (!element) return;
+			const anim = animate(element, delta, options);
+			animations.push(anim);
+		});
+		if (animations.length === 0) return;
+		await Promise.all(animations.map((anim) => anim.finished.catch(() => {})));
+	}, [animate]);
+	const cancel = useCallback((id) => {
+		const animation = activeAnimationsRef.current.get(id);
+		if (animation) {
+			animation.cancel();
+			activeAnimationsRef.current.delete(id);
+			animatingIdsRef.current.delete(id);
+		}
+	}, []);
+	const cancelAll = useCallback(() => {
+		activeAnimationsRef.current.forEach((animation) => animation.cancel());
+		activeAnimationsRef.current.clear();
+		animatingIdsRef.current.clear();
+	}, []);
+	const isAnimating = useCallback((id) => {
+		if (id) return animatingIdsRef.current.has(id);
+		return animatingIdsRef.current.size > 0;
+	}, []);
+	useEffect(() => {
+		return () => {
+			cancelAll();
+		};
+	}, [cancelAll]);
+	const api = useRef({
+		animate,
+		animateAll,
+		cancel,
+		cancelAll,
+		isAnimating
+	});
+	api.current.animate = animate;
+	api.current.animateAll = animateAll;
+	api.current.cancel = cancel;
+	api.current.cancelAll = cancelAll;
+	api.current.isAnimating = isAnimating;
+	return api.current;
+}
+
+//#endregion
+export { useFLIPAnimation };

package/dist/react-ui/primitives/waapi/core/usePositionCapture.d.ts

@@ -0,0 +1,24 @@
+import type { IPositionCaptureAPI, IPositionCaptureOptions } from './types';
+/**
+ * Hook for capturing element positions and calculating FLIP deltas.
+ * Extracted from the WAAPI animation system's position capture logic.
+ *
+ * @param getElements - Function that returns the current element map
+ * @param options - Optional configuration (e.g. minimum delta threshold)
+ * @returns Position capture API with capture, delta calculation, and cache
+ *
+ * @example
+ * ```tsx
+ * const registry = useElementRegistry();
+ * const positions = usePositionCapture(registry.getAll);
+ *
+ * // Before layout change:
+ * const before = positions.capture();
+ *
+ * // After layout change:
+ * const after = positions.capture();
+ * const deltas = positions.calculateDeltas(before, after);
+ * ```
+ */
+export declare function usePositionCapture(getElements: () => Map<string, HTMLElement>, options?: IPositionCaptureOptions): IPositionCaptureAPI;
+//# sourceMappingURL=usePositionCapture.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePositionCapture.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/core/usePositionCapture.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAc,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAIxF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,EAC3C,OAAO,CAAC,EAAE,uBAAuB,GAChC,mBAAmB,CA0ErB"}

package/dist/react-ui/primitives/waapi/core/usePositionCapture.js

@@ -0,0 +1,75 @@
+import { TIMING } from "./animationConstants.js";
+import { useCallback, useRef } from "react";
+
+//#region src/react-ui/primitives/waapi/core/usePositionCapture.ts
+const DEFAULT_MIN_DELTA_PX = TIMING.MIN_DELTA_PX;
+/**
+* Hook for capturing element positions and calculating FLIP deltas.
+* Extracted from the WAAPI animation system's position capture logic.
+*
+* @param getElements - Function that returns the current element map
+* @param options - Optional configuration (e.g. minimum delta threshold)
+* @returns Position capture API with capture, delta calculation, and cache
+*
+* @example
+* ```tsx
+* const registry = useElementRegistry();
+* const positions = usePositionCapture(registry.getAll);
+*
+* // Before layout change:
+* const before = positions.capture();
+*
+* // After layout change:
+* const after = positions.capture();
+* const deltas = positions.calculateDeltas(before, after);
+* ```
+*/
+function usePositionCapture(getElements, options) {
+	const lastCaptureRef = useRef(/* @__PURE__ */ new Map());
+	const minDeltaPx = options?.minDeltaPx ?? DEFAULT_MIN_DELTA_PX;
+	return {
+		capture: useCallback((excludeIds) => {
+			const positions = /* @__PURE__ */ new Map();
+			getElements().forEach((el, id) => {
+				if (excludeIds?.has(id)) return;
+				const rect = el.getBoundingClientRect();
+				if (rect.width > 0 && rect.height > 0) positions.set(id, rect);
+			});
+			lastCaptureRef.current = positions;
+			return positions;
+		}, [getElements]),
+		getPosition: useCallback((id) => {
+			return lastCaptureRef.current.get(id);
+		}, []),
+		calculateDeltas: useCallback((before, after) => {
+			const deltas = /* @__PURE__ */ new Map();
+			after.forEach((newRect, id) => {
+				const prevRect = before.get(id);
+				if (!prevRect) return;
+				const deltaX = prevRect.left - newRect.left;
+				const deltaY = prevRect.top - newRect.top;
+				const deltaWidth = prevRect.width - newRect.width;
+				const deltaHeight = prevRect.height - newRect.height;
+				const isSignificant = Math.abs(deltaX) >= minDeltaPx || Math.abs(deltaY) >= minDeltaPx || Math.abs(deltaWidth) >= minDeltaPx || Math.abs(deltaHeight) >= minDeltaPx;
+				deltas.set(id, {
+					id,
+					deltaX,
+					deltaY,
+					deltaWidth,
+					deltaHeight,
+					isSignificant
+				});
+			});
+			return deltas;
+		}, [minDeltaPx]),
+		getLastCapture: useCallback(() => {
+			return new Map(lastCaptureRef.current);
+		}, []),
+		clear: useCallback(() => {
+			lastCaptureRef.current.clear();
+		}, [])
+	};
+}
+
+//#endregion
+export { usePositionCapture };

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

@@ -0,0 +1,33 @@
+/**
+ * WAAPI Animation Primitives
+ *
+ * Lightweight, performant React animation components built on the Web Animations API (WAAPI).
+ *
+ * @example
+ * ```tsx
+ * import { SlidingNumber, SlidingText, Reorder, Morph } from '@mks2508/mks-ui/react/primitives/waapi';
+ * ```
+ */
+export { TIMING, TRANSFORMS, EFFECTS, EASINGS, RESPONSIVE_CONFIGS, ANIMATION_CONFIGS, ANIMATION_DEFAULTS, PRESETS, getResponsiveDuration, getResponsiveStagger, } from './core';
+export { useElementRegistry } from './core';
+export { usePositionCapture } from './core';
+export { useFLIPAnimation } from './core';
+export { useAnimationOrchestrator } from './core';
+export type { IFLIPDelta, IAnimationTiming, IPositionRect, IElementRegistryAPI, IElementRegistryCallbacks, IPositionCaptureAPI, IPositionCaptureOptions, IFLIPAnimationAPI, IFLIPAnimationOptions, IExitOptions, IEnterOptions, IAnimationOrchestratorConfig, IAnimationOrchestratorAPI, IOrchestratorState, IAnimationEvent, FLIPBehavior, ExitPositionStrategy, AnimationPhase, } from './core';
+export { SlidingNumber } from './SlidingNumber';
+export type { ISlidingNumberProps, IFormatOptions, } from './SlidingNumber/SlidingNumber.types';
+export { SlidingText } from './SlidingText';
+export type { ISlidingTextProps } from './SlidingText/SlidingText.types';
+export { Reorder } from './Reorder';
+export type { IReorderProps, ReorderLayout, DurationConfig, StaggerConfig, IUseReorderReturn, IUseReorderConfig, IReorderItemState, IReorderContextValue, IUseReorderPresenceConfig, IUseReorderPresenceReturn, } from './Reorder/Reorder.types';
+export { useReorder } from './Reorder/useReorder';
+export { useReorderPresence } from './Reorder/useReorderPresence';
+export { calculateSeparatorCoordination, shouldShowSeparator } from './Reorder/utils/separatorCoordination';
+export { Morph } from './Morph';
+export type { IMorphProps, IMorphContextValue, IUseMorphConfig, IUseMorphReturn, MorphTechnique, IFLIPClipPathOptions, IFLIPClipPathAPI, ICSSGridMorphOptions, ICSSGridMorphAPI, IViewTransitionsOptions, IViewTransitionsAPI, } from './Morph/Morph.types';
+export { useMorph } from './Morph/useMorph';
+export { useMorphContext } from './Morph/MorphContext';
+export { useFLIPClipPath } from './Morph/techniques/useFLIPClipPath';
+export { useCSSGridMorph } from './Morph/techniques/useCSSGridMorph';
+export { useViewTransitions } from './Morph/techniques/useViewTransitions';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./core/animationConstants.js";
+import { useElementRegistry } from "./core/useElementRegistry.js";
+import { usePositionCapture } from "./core/usePositionCapture.js";
+import { useFLIPAnimation } from "./core/useFLIPAnimation.js";
+import { useAnimationOrchestrator } from "./core/useAnimationOrchestrator.js";
+import "./core/index.js";
+import { SlidingNumber } from "./SlidingNumber/index.js";
+import { SlidingText } from "./SlidingText/index.js";
+import { useReorder } from "./Reorder/useReorder.js";
+import { ReorderRoot } from "./Reorder/index.js";
+import { useReorderPresence } from "./Reorder/useReorderPresence.js";
+import { calculateSeparatorCoordination, shouldShowSeparator } from "./Reorder/utils/separatorCoordination.js";
+import { useMorphContext } from "./Morph/MorphContext.js";
+import { useFLIPClipPath } from "./Morph/techniques/useFLIPClipPath.js";
+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";

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,EAAE,UAAU,CAAC,aAAa,CAOrD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB;;8EAgB5B,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,54 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/Accordion/Accordion.styles.ts
+/**
+* Style slots and CVA variants for the Accordion component.
+*
+* Defines the visual regions (slots) and variant-based styling
+* using Class Variance Authority (CVA).
+*
+* @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
+*/
+/**
+* Default Tailwind classes for each visual region of the Accordion.
+*
+* @example
+* ```typescript
+* import { AccordionStyles } from '@mks2508/mks-ui';
+*
+* // Access individual slot defaults
+* console.log(AccordionStyles.root);   // base root classes
+* console.log(AccordionStyles.trigger); // base trigger classes
+* ```
+*/
+const AccordionStyles = {
+	root: "flex flex-col",
+	item: "border-b border-border",
+	header: "flex",
+	trigger: "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-panel-open]>svg]:rotate-180",
+	panel: "overflow-hidden text-sm"
+};
+/**
+* CVA variants for the Accordion root element.
+*
+* Provides `default` and `bordered` visual variants that control
+* the overall appearance of the accordion container.
+*
+* @example
+* ```typescript
+* import { accordionVariants } from '@mks2508/mks-ui';
+*
+* // Get class string for bordered variant
+* const classes = accordionVariants({ variant: 'bordered' });
+* ```
+*/
+const accordionVariants = cva(AccordionStyles.root, {
+	variants: { variant: {
+		default: "",
+		bordered: "rounded-lg border border-border"
+	} },
+	defaultVariants: { variant: "default" }
+});
+
+//#endregion
+export { AccordionStyles, accordionVariants };

package/dist/react-ui/ui/Accordion/Accordion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAMhE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAM7E;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,wCAAwC;IACxC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;IACrC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,uDAAuD;IACvD,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAMF;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,EACpD,WAAW,CACZ,EACD,qBAAqB;IACvB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,gCAAgC;IAChC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IAC5D,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,MAAM,CAAC;IAC9D,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC/D,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,oBACf,SAAQ,IAAI,CACR,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC,EACrF,MAAM,eAAe,CAAC,KAAK,CAAC,CAC7B,EACD,eAAe,CAAC,KAAK,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Accordion/index.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAEV,wBAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAS3B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAMrE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,eAAe,2CAmBjB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAmBzE;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAQvB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,cAAc,CAAC,EACtB,UAAkD,EAClD,gBAAgB,EAChB,YAAoB,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAgEtB;AAMD,OAAO,EACL,SAAS,EACT,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,gBAAgB,GACjB,CAAC;AAGF,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,266 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { AccordionStyles, accordionVariants } from "./Accordion.styles.js";
+import * as React$1 from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+
+//#region src/react-ui/ui/Accordion/index.tsx
+/**
+* Accordion component with animated expand/collapse panels.
+*
+* Built on top of Base UI's Accordion primitive with Motion (Framer Motion)
+* animations. Supports controlled and uncontrolled modes, multiple expanded
+* items, and the StyleSlots pattern for granular style overrides.
+*
+* @module @mks2508/mks-ui/react/ui/Accordion
+*
+* @example
+* ```tsx
+* import {
+*   Accordion,
+*   AccordionItem,
+*   AccordionHeader,
+*   AccordionTrigger,
+*   AccordionPanel,
+* } from '@mks2508/mks-ui';
+*
+* function FAQ() {
+*   return (
+*     <Accordion variant="bordered" defaultValue={['q1']}>
+*       <AccordionItem value="q1">
+*         <AccordionHeader>
+*           <AccordionTrigger>What is mks-ui?</AccordionTrigger>
+*         </AccordionHeader>
+*         <AccordionPanel>
+*           A modern React component library with animations.
+*         </AccordionPanel>
+*       </AccordionItem>
+*     </Accordion>
+*   );
+* }
+* ```
+*/
+const [AccordionProvider, useAccordion] = getStrictContext("AccordionContext");
+const [AccordionItemProvider, useAccordionItem] = getStrictContext("AccordionItemContext");
+/**
+* Root Accordion container. Manages which items are expanded and
+* provides context to child components.
+*
+* Supports both controlled (`value` + `onValueChange`) and uncontrolled
+* (`defaultValue`) usage patterns.
+*
+* @param props - {@link IAccordionProps}
+* @returns The rendered accordion container
+*
+* @example
+* ```tsx
+* // Uncontrolled with default expansion
+* <Accordion defaultValue={['item-1']}>
+*   <AccordionItem value="item-1">...</AccordionItem>
+*   <AccordionItem value="item-2">...</AccordionItem>
+* </Accordion>
+*
+* // Controlled
+* const [value, setValue] = useState<string[]>(['item-1']);
+* <Accordion value={value} onValueChange={setValue} variant="bordered">
+*   ...
+* </Accordion>
+* ```
+*/
+function Accordion$1({ variant, className, slots, config: _config, ...props }) {
+	const [value, setValue] = useControlledState({
+		value: props?.value,
+		defaultValue: props?.defaultValue,
+		onChange: props?.onValueChange
+	});
+	return /* @__PURE__ */ jsx(AccordionProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			"data-slot": "accordion",
+			className: cn(accordionVariants({ variant }), slots?.root, className),
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+/**
+* Individual collapsible section within an Accordion.
+* Tracks its own open/closed state derived from the parent context.
+*
+* @param props - {@link IAccordionItemProps}
+* @returns The rendered accordion item
+*
+* @example
+* ```tsx
+* <AccordionItem value="section-1" className="border-primary/20">
+*   <AccordionHeader>
+*     <AccordionTrigger>Section Title</AccordionTrigger>
+*   </AccordionHeader>
+*   <AccordionPanel>Section content</AccordionPanel>
+* </AccordionItem>
+* ```
+*/
+function AccordionItem({ slots, className, ...props }) {
+	const { value } = useAccordion();
+	const [isOpen, setIsOpen] = React$1.useState(value?.includes(props?.value) ?? false);
+	React$1.useEffect(() => {
+		setIsOpen(value?.includes(props?.value) ?? false);
+	}, [value, props?.value]);
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Item, {
+			"data-slot": "accordion-item",
+			className: cn(AccordionStyles.item, slots?.item, className),
+			...props
+		})
+	});
+}
+/**
+* Header wrapper for an accordion trigger. Provides semantic structure
+* and consistent spacing around the trigger element.
+*
+* @param props - {@link IAccordionHeaderProps}
+* @returns The rendered accordion header
+*
+* @example
+* ```tsx
+* <AccordionHeader className="bg-muted/10">
+*   <AccordionTrigger>Section Title</AccordionTrigger>
+* </AccordionHeader>
+* ```
+*/
+function AccordionHeader({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		"data-slot": "accordion-header",
+		className: cn(AccordionStyles.header, slots?.header, className),
+		...props
+	});
+}
+/**
+* Clickable trigger that toggles the associated AccordionPanel.
+* Rendered as a button for accessibility.
+*
+* @param props - {@link IAccordionTriggerProps}
+* @returns The rendered accordion trigger
+*
+* @example
+* ```tsx
+* <AccordionTrigger className="text-foreground hover:text-primary">
+*   Click to expand
+* </AccordionTrigger>
+* ```
+*/
+function AccordionTrigger({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		"data-slot": "accordion-trigger",
+		className: cn(AccordionStyles.trigger, slots?.trigger, className),
+		...props
+	});
+}
+/**
+* Animated collapsible panel that shows/hides content with a smooth
+* height transition powered by Motion (Framer Motion).
+*
+* Uses a mask-image technique for a polished reveal/hide effect.
+* When `keepRendered` is `true`, the panel stays in the DOM even when
+* collapsed (useful for preserving form state).
+*
+* @param props - {@link IAccordionPanelProps}
+* @returns The rendered animated accordion panel
+*
+* @example
+* ```tsx
+* // Standard panel (unmounts on collapse)
+* <AccordionPanel>
+*   <p>Content revealed on expand</p>
+* </AccordionPanel>
+*
+* // Persistent panel (stays mounted)
+* <AccordionPanel keepRendered transition={{ duration: 0.5 }}>
+*   <form>...</form>
+* </AccordionPanel>
+* ```
+*/
+function AccordionPanel({ transition = {
+	duration: .35,
+	ease: "easeInOut"
+}, hiddenUntilFound, keepRendered = false, slots, className, ...props }) {
+	const { isOpen } = useAccordionItem();
+	const maskStyle = {
+		maskImage: "linear-gradient(black var(--mask-stop), transparent var(--mask-stop))",
+		WebkitMaskImage: "linear-gradient(black var(--mask-stop), transparent var(--mask-stop))",
+		overflow: "hidden"
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: keepRendered ? /* @__PURE__ */ jsx(Accordion.Panel, {
+		hidden: false,
+		hiddenUntilFound,
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "accordion-panel",
+			className: cn(AccordionStyles.panel, slots?.panel, className),
+			initial: {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			animate: isOpen ? {
+				height: "auto",
+				opacity: 1,
+				"--mask-stop": "100%",
+				y: 0
+			} : {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			transition,
+			style: maskStyle,
+			...props
+		}, "accordion-panel")
+	}) : isOpen && /* @__PURE__ */ jsx(Accordion.Panel, {
+		hidden: false,
+		hiddenUntilFound,
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "accordion-panel",
+			className: cn(AccordionStyles.panel, slots?.panel, className),
+			initial: {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			animate: {
+				height: "auto",
+				opacity: 1,
+				"--mask-stop": "100%",
+				y: 0
+			},
+			exit: {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			transition,
+			style: maskStyle,
+			...props
+		}, "accordion-panel")
+	}) });
+}
+
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem };

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/AlertDialog/AlertDialog.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAAU,CAAC,eAAe,CASzD,CAAC"}

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

@@ -0,0 +1,29 @@
+//#region src/react-ui/ui/AlertDialog/AlertDialog.styles.ts
+/**
+* Default Tailwind classes for each visual region of the AlertDialog.
+*
+* These classes are applied as base styles and can be overridden
+* via the `slots` prop on individual sub-components.
+*
+* @example
+* ```typescript
+* import { AlertDialogStyles } from '@mks2508/mks-ui';
+*
+* // Access individual slot defaults
+* console.log(AlertDialogStyles.backdrop); // backdrop base classes
+* console.log(AlertDialogStyles.popup);    // popup container classes
+* ```
+*/
+const AlertDialogStyles = {
+	root: "",
+	backdrop: "fixed inset-0 z-50 bg-black/80",
+	popup: "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg",
+	header: "flex flex-col space-y-2 text-center sm:text-left",
+	footer: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+	title: "text-lg font-semibold",
+	description: "text-sm text-muted-foreground",
+	close: ""
+};
+
+//#endregion
+export { AlertDialogStyles };

package/dist/react-ui/ui/AlertDialog/AlertDialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/AlertDialog/AlertDialog.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/AlertDialog/index.tsx"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EACV,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,qBAAqB,CAAC;AAM7B,QAAA,MAA4B,cAAc,8BACsB,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAgBnB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EAAE,MAAM,EACb,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAO1B;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,iBAAiB,CAAC,KAAK,EAAE,uBAAuB,2CAcxD;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,UAAiD,EACjD,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAqB3B;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAA4D,EAC5D,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAoCxB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAMD;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAY9B;AAMD,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,cAAc,GACf,CAAC;AAGF,YAAY,EACV,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,4BAA4B,EAC5B,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}