@mks2508/mks-ui 0.1.3 → 0.2.0

package/dist/{lib → react/lib}/utils.js

@@ -1,11 +1,11 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-//#region src/lib/utils.ts
+//#region src/react/lib/utils.ts
 /**
-* Utility functions for UI components.
+* React-specific utility functions.
 *
-* @module @mks2508/mks-ui/lib/utils
+* @module @mks2508/mks-ui/react/lib/utils
 */
 /**
 * Merge class names with Tailwind CSS class deduplication.

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

@@ -0,0 +1,31 @@
+import * as React from '../../../react';
+import { type HTMLMotionProps, type LegacyAnimationControls, type TargetAndTransition, type Transition } from 'motion/react';
+import { type WithAsChild } from '../../../react/primitives/Slot';
+/** Props for the AutoHeight primitive component. */
+type IAutoHeightProps = WithAsChild<{
+    children: React.ReactNode;
+    /** Dependency list to trigger re-measurement. */
+    deps?: React.DependencyList;
+    /** Motion animate target. */
+    animate?: TargetAndTransition | LegacyAnimationControls;
+    /** Motion transition config. */
+    transition?: Transition;
+} & Omit<HTMLMotionProps<'div'>, 'animate'>>;
+/**
+ * AutoHeight primitive — animates height changes of dynamic content.
+ * Uses ResizeObserver internally to track content height and Motion for animation.
+ *
+ * @param deps - Dependency list to trigger re-measurement
+ * @param transition - Motion spring/tween transition config
+ * @param asChild - Render as child element using Slot pattern
+ *
+ * @example
+ * ```tsx
+ * <AutoHeight deps={[content]}>
+ *   <div>{content}</div>
+ * </AutoHeight>
+ * ```
+ */
+declare function AutoHeight({ children, deps, transition, style, animate, asChild, ...props }: IAutoHeightProps): import("react/jsx-runtime").JSX.Element;
+export { AutoHeight, type IAutoHeightProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/primitives/AutoHeight/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAQ,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEjE,oDAAoD;AACpD,KAAK,gBAAgB,GAAG,WAAW,CACjC;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iDAAiD;IACjD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC;IAC5B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,mBAAmB,GAAG,uBAAuB,CAAC;IACxD,gCAAgC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAC5C,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,IAAS,EACT,UAMC,EACD,KAAK,EACL,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAelB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { Slot } from "../Slot/index.js";
+import { useAutoHeight } from "../../hooks/Animation/UseAutoHeight.js";
+import "../../../react";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/primitives/AutoHeight/index.tsx
+/**
+* AutoHeight primitive — animates height changes of dynamic content.
+* Uses ResizeObserver internally to track content height and Motion for animation.
+*
+* @param deps - Dependency list to trigger re-measurement
+* @param transition - Motion spring/tween transition config
+* @param asChild - Render as child element using Slot pattern
+*
+* @example
+* ```tsx
+* <AutoHeight deps={[content]}>
+*   <div>{content}</div>
+* </AutoHeight>
+* ```
+*/
+function AutoHeight({ children, deps = [], transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 30,
+	bounce: 0,
+	restDelta: .01
+}, style, animate, asChild = false, ...props }) {
+	const { ref, height } = useAutoHeight(deps);
+	return /* @__PURE__ */ jsx(asChild ? Slot : motion.div, {
+		style: {
+			overflow: "hidden",
+			...style
+		},
+		animate: {
+			height,
+			...animate
+		},
+		transition,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			children
+		})
+	});
+}
+
+//#endregion
+export { AutoHeight };

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

@@ -0,0 +1,44 @@
+import * as React from '../../../react';
+import { type SpringOptions } from 'motion/react';
+import { type IUseIsInViewOptions } from '../../../react/hooks/DOM/UseIsInView';
+/** Props for the CountingNumber primitive. */
+type ICountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
+    /** Target number to animate to. */
+    number: number;
+    /** Starting number (default: 0). */
+    fromNumber?: number;
+    /** Pad integer part with leading zeros. */
+    padStart?: boolean;
+    /** Decimal separator character. */
+    decimalSeparator?: string;
+    /** Number of decimal places to show. */
+    decimalPlaces?: number;
+    /** Spring transition options. */
+    transition?: SpringOptions;
+    /** Delay in ms before animation starts. */
+    delay?: number;
+    /** Start at target number instead of fromNumber. */
+    initiallyStable?: boolean;
+} & IUseIsInViewOptions;
+/**
+ * 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 />
+ * ```
+ */
+declare function CountingNumber({ ref, number, fromNumber, padStart, inView, inViewMargin, inViewOnce, decimalSeparator, transition, decimalPlaces, delay, initiallyStable, ...props }: ICountingNumberProps): import("react/jsx-runtime").JSX.Element;
+export { CountingNumber, type ICountingNumberProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/primitives/CountingNumber/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7E,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,+BAA+B,CAAC;AAEvC,8CAA8C;AAC9C,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,GAAG,mBAAmB,CAAC;AAExB;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,EACH,MAAM,EACN,UAAc,EACd,QAAgB,EAChB,MAAc,EACd,YAAoB,EACpB,UAAiB,EACjB,gBAAsB,EACtB,UAA2C,EAC3C,aAAiB,EACjB,KAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAiFtB;AAED,OAAO,EAAE,cAAc,EAAE,KAAK,oBAAoB,EAAE,CAAC"}

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

@@ -0,0 +1,97 @@
+'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

@@ -0,0 +1,113 @@
+import type { Transition } from 'motion/react';
+/** Mode for highlight tracking. */
+export type HighlightMode = 'children' | 'parent';
+/** Bounding rectangle offsets. */
+export type Bounds = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+/** Internal context type for Highlight state. */
+export type HighlightContextType<T extends string> = {
+    as?: keyof HTMLElementTagNameMap;
+    mode: HighlightMode;
+    activeValue: T | null;
+    setActiveValue: (value: T | null) => void;
+    setBounds: (bounds: DOMRect) => void;
+    clearBounds: () => void;
+    id: string;
+    hover: boolean;
+    click: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    activeClassName?: string;
+    setActiveClassName: (className: string) => void;
+    transition?: Transition;
+    disabled?: boolean;
+    enabled?: boolean;
+    exitDelay?: number;
+    forceUpdateBounds?: boolean;
+};
+/** Base props shared by all Highlight variants. */
+export type BaseHighlightProps<T extends React.ElementType = 'div'> = {
+    as?: T;
+    ref?: React.Ref<HTMLDivElement>;
+    mode?: HighlightMode;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    transition?: Transition;
+    hover?: boolean;
+    click?: boolean;
+    disabled?: boolean;
+    enabled?: boolean;
+    exitDelay?: number;
+};
+/** Props specific to parent mode. */
+export type ParentModeHighlightProps = {
+    boundsOffset?: Partial<Bounds>;
+    containerClassName?: string;
+    forceUpdateBounds?: boolean;
+};
+/** Controlled parent mode highlight props. */
+export type ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & ParentModeHighlightProps & {
+    mode: 'parent';
+    controlledItems: true;
+    children: React.ReactNode;
+};
+/** Controlled children mode highlight props. */
+export type ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & {
+    mode?: 'children' | undefined;
+    controlledItems: true;
+    children: React.ReactNode;
+};
+/** Uncontrolled parent mode highlight props. */
+export type UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & ParentModeHighlightProps & {
+    mode: 'parent';
+    controlledItems?: false;
+    itemsClassName?: string;
+    children: React.ReactElement | React.ReactElement[];
+};
+/** Uncontrolled children mode highlight props. */
+export type UncontrolledChildrenModeHighlightProps<T extends React.ElementType = 'div'> = BaseHighlightProps<T> & {
+    mode?: 'children';
+    controlledItems?: false;
+    itemsClassName?: string;
+    children: React.ReactElement | React.ReactElement[];
+};
+/**
+ * Props for the Highlight component.
+ * Discriminated union supporting controlled/uncontrolled + children/parent modes.
+ */
+export type IHighlightProps<T extends React.ElementType = 'div'> = ControlledParentModeHighlightProps<T> | ControlledChildrenModeHighlightProps<T> | UncontrolledParentModeHighlightProps<T> | UncontrolledChildrenModeHighlightProps<T>;
+/** Extended child props used internally by HighlightItem. */
+export type ExtendedChildProps = React.ComponentProps<'div'> & {
+    id?: string;
+    ref?: React.Ref<HTMLElement>;
+    'data-active'?: string;
+    'data-value'?: string;
+    'data-disabled'?: boolean;
+    'data-highlight'?: boolean;
+    'data-slot'?: string;
+};
+/**
+ * Props for a HighlightItem within a Highlight container.
+ */
+export type IHighlightItemProps<T extends React.ElementType = 'div'> = React.ComponentProps<T> & {
+    as?: T;
+    children: React.ReactElement;
+    id?: string;
+    value?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    transition?: Transition;
+    activeClassName?: string;
+    disabled?: boolean;
+    exitDelay?: number;
+    asChild?: boolean;
+    forceUpdateBounds?: boolean;
+};
+//# sourceMappingURL=Highlight.types.d.ts.map

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

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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1 @@
+{"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/{components/animate-ui/primitives/effects/highlight.js → react/primitives/Highlight/index.js}

@@ -1,11 +1,11 @@
 'use client';
 
-import { cn } from "../../../../lib/utils.js";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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/components/animate-ui/primitives/effects/highlight.tsx
+//#region src/react/primitives/Highlight/index.tsx
 const DEFAULT_BOUNDS_OFFSET = {
 	top: 0,
 	left: 0,
@@ -13,11 +13,36 @@ const DEFAULT_BOUNDS_OFFSET = {
 	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",
@@ -182,6 +207,21 @@ function getNonOverridingDataAttributes(element, dataAttributes) {
 		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();
@@ -353,4 +393,4 @@ function HighlightItem({ ref, as, children, id, value, className, style, transit
 }
 
 //#endregion
-export { Highlight, HighlightItem };
+export { Highlight, HighlightItem, useHighlight };

package/dist/react/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/primitives/Slot/index.d.ts.map

@@ -0,0 +1 @@
+{"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/{components/animate-ui/primitives/animate/slot.js → react/primitives/Slot/index.js}

@@ -1,11 +1,11 @@
 'use client';
 
-import { cn } from "../../../../lib/utils.js";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+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/components/animate-ui/primitives/animate/slot.tsx
+//#region src/react/primitives/Slot/index.tsx
 function mergeRefs(...refs) {
 	return (node) => {
 		refs.forEach((ref) => {
@@ -27,6 +27,29 @@ function mergeProps(childProps, slotProps) {
 	};
 	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]);

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

@@ -0,0 +1,12 @@
+/**
+ * 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

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

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

package/dist/react/primitives/index.js

@@ -0,0 +1,4 @@
+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";