@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react/primitives/CountingNumber/index.js

@@ -1,97 +0,0 @@
-'use client';
-
-import { useIsInView } from "../../hooks/DOM/UseIsInView.js";
-import * as React from "../../../react";
-import { useMotionValue, useSpring } from "motion/react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/react/primitives/CountingNumber/index.tsx
-/**
-* CountingNumber primitive — animates a number from one value to another
-* using spring physics. Supports decimal places, padding, and in-view triggers.
-*
-* @param number - Target number to animate to
-* @param fromNumber - Starting number (default: 0)
-* @param transition - Spring physics options
-* @param inView - Only animate when in viewport
-*
-* @example
-* ```tsx
-* <CountingNumber number={1234} transition={{ stiffness: 90, damping: 50 }} />
-* ```
-*
-* @example
-* ```tsx
-* <CountingNumber number={99.99} decimalPlaces={2} decimalSeparator="," inView inViewOnce />
-* ```
-*/
-function CountingNumber({ ref, number, fromNumber = 0, padStart = false, inView = false, inViewMargin = "0px", inViewOnce = true, decimalSeparator = ".", transition = {
-	stiffness: 90,
-	damping: 50
-}, decimalPlaces = 0, delay = 0, initiallyStable = false, ...props }) {
-	const { ref: localRef, isInView } = useIsInView(ref, {
-		inView,
-		inViewOnce,
-		inViewMargin
-	});
-	const numberStr = number.toString();
-	const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr.split(".")[1]?.length ?? 0 : 0;
-	const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
-	const springVal = useSpring(motionVal, transition);
-	React.useEffect(() => {
-		const timeoutId = setTimeout(() => {
-			if (isInView) motionVal.set(number);
-		}, delay);
-		return () => clearTimeout(timeoutId);
-	}, [
-		isInView,
-		number,
-		motionVal,
-		delay
-	]);
-	React.useEffect(() => {
-		const unsubscribe = springVal.on("change", (latest) => {
-			if (localRef.current) {
-				let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();
-				if (decimals > 0) formatted = formatted.replace(".", decimalSeparator);
-				if (padStart) {
-					const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-					const [intPart, fracPart] = formatted.split(decimalSeparator);
-					const paddedInt = intPart?.padStart(finalIntLength, "0") ?? "";
-					formatted = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
-				}
-				localRef.current.textContent = formatted;
-			}
-		});
-		return () => unsubscribe();
-	}, [
-		springVal,
-		decimals,
-		padStart,
-		number,
-		decimalSeparator,
-		localRef
-	]);
-	const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-	const formatValue = (val) => {
-		let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
-		if (decimals > 0) out = out.replace(".", decimalSeparator);
-		if (padStart) {
-			const [intPart, fracPart] = out.split(decimalSeparator);
-			const paddedInt = (intPart ?? "").padStart(finalIntLength, "0");
-			out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
-		}
-		return out;
-	};
-	const zeroText = padStart ? "0".padStart(finalIntLength, "0") + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "") : "0" + (decimals > 0 ? decimalSeparator + "0".repeat(decimals) : "");
-	const initialText = initiallyStable ? formatValue(number) : zeroText;
-	return /* @__PURE__ */ jsx("span", {
-		ref: localRef,
-		"data-slot": "counting-number",
-		...props,
-		children: initialText
-	});
-}
-
-//#endregion
-export { CountingNumber };

package/dist/react/primitives/Highlight/Highlight.types.d.ts.map

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

package/dist/react/primitives/Highlight/index.d.ts

@@ -1,48 +0,0 @@
-import * as React from '../../../react';
-import type { HighlightContextType, IHighlightProps, IHighlightItemProps } from './Highlight.types';
-/**
- * Hook to access the Highlight context.
- * Must be used within a Highlight provider.
- *
- * @returns The current highlight context
- */
-declare function useHighlight<T extends string>(): HighlightContextType<T>;
-/**
- * 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>
- * ```
- */
-declare function Highlight<T extends React.ElementType = 'div'>({ ref, ...props }: IHighlightProps<T>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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>
- * ```
- */
-declare function HighlightItem<T extends React.ElementType>({ ref, as, children, id, value, className, style, transition, disabled, activeClassName, exitDelay, asChild, forceUpdateBounds, ...props }: IHighlightItemProps<T>): any;
-export { Highlight, HighlightItem, useHighlight, };
-export type { IHighlightProps, IHighlightItemProps, Bounds, HighlightMode, HighlightContextType, } from './Highlight.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/react/primitives/Highlight/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/primitives/Highlight/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAEV,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EAGpB,MAAM,mBAAmB,CAAC;AAc3B;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,KAAK,oBAAoB,CAAC,CAAC,CAAC,CAMjE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,EACtD,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,CAAC,CAAC,2CAwNpB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,EAClD,GAAG,EACH,EAAE,EACF,QAAQ,EACR,EAAE,EACF,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,eAAe,EACf,SAAS,EACT,OAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,CAAC,CAAC,OA2OxB;AAED,OAAO,EACL,SAAS,EACT,aAAa,EACb,YAAY,GACb,CAAC;AAGF,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,MAAM,EACN,aAAa,EACb,oBAAoB,GACrB,MAAM,mBAAmB,CAAC"}

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

@@ -1,396 +0,0 @@
-'use client';
-
-import { cn } from "../../lib/utils.js";
-import * as React from "../../../react";
-import { AnimatePresence, motion } from "motion/react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/react/primitives/Highlight/index.tsx
-const DEFAULT_BOUNDS_OFFSET = {
-	top: 0,
-	left: 0,
-	width: 0,
-	height: 0
-};
-const HighlightContext = React.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.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.useRef(null);
-	React.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.useRef({
-		top: boundsOffsetTop,
-		left: boundsOffsetLeft,
-		width: boundsOffsetWidth,
-		height: boundsOffsetHeight
-	});
-	React.useEffect(() => {
-		boundsOffsetRef.current = {
-			top: boundsOffsetTop,
-			left: boundsOffsetLeft,
-			width: boundsOffsetWidth,
-			height: boundsOffsetHeight
-		};
-	}, [
-		boundsOffsetTop,
-		boundsOffsetLeft,
-		boundsOffsetWidth,
-		boundsOffsetHeight
-	]);
-	const [activeValue, setActiveValue] = React.useState(value ?? defaultValue ?? null);
-	const [boundsState, setBoundsState] = React.useState(null);
-	const [activeClassNameState, setActiveClassNameState] = React.useState("");
-	const safeSetActiveValue = (id) => {
-		setActiveValue((prev) => {
-			if (prev !== id) {
-				onValueChange?.(id);
-				return id;
-			}
-			return prev;
-		});
-	};
-	const safeSetBoundsRef = React.useRef(void 0);
-	React.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.useCallback(() => {
-		setBoundsState((prev) => prev === null ? prev : null);
-	}, []);
-	React.useEffect(() => {
-		if (value !== void 0) setActiveValue(value);
-		else if (defaultValue !== void 0) setActiveValue(defaultValue);
-	}, [value, defaultValue]);
-	const id = React.useId();
-	React.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.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.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.useRef(null);
-	React.useImperativeHandle(ref, () => localRef.current);
-	const refCallback = React.useCallback((node) => {
-		localRef.current = node;
-	}, []);
-	React.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.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.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.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.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/primitives/Slot/index.d.ts

@@ -1,53 +0,0 @@
-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/primitives/Slot/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/primitives/Slot/index.js

@@ -1,65 +0,0 @@
-'use client';
-
-import { cn } from "../../lib/utils.js";
-import * as React from "../../../react";
-import { isMotionComponent, motion } from "motion/react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/react/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.useMemo(() => isAlreadyMotion ? children.type : motion.create(children.type), [isAlreadyMotion, children.type]);
-	if (!React.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/primitives/index.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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';
-//# sourceMappingURL=index.d.ts.map