@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react-ui/icons/lucide-animated/trending-up.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface TrendingUpIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface TrendingUpIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  animate: {
+    x: 0,
+    y: 0,
+    translateX: [0, 2, 0],
+    translateY: [0, -2, 0],
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const ARROW_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [0.5, 0],
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const TrendingUpIcon = forwardRef<TrendingUpIconHandle, TrendingUpIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={SVG_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.polyline
+            animate={controls}
+            initial="normal"
+            points="22 7 13.5 15.5 8.5 10.5 2 17"
+            variants={PATH_VARIANTS}
+          />
+          <motion.polyline
+            animate={controls}
+            initial="normal"
+            points="16 7 22 7 22 13"
+            variants={ARROW_VARIANTS}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+TrendingUpIcon.displayName = "TrendingUpIcon";
+
+export { TrendingUpIcon };

package/src/react-ui/icons/lucide-animated/x.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface XIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+export interface XIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+  },
+};
+
+const XIcon = forwardRef<XIconHandle, XIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M18 6 6 18"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m6 6 12 12"
+            transition={{ delay: 0.2 }}
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+XIcon.displayName = "XIcon";
+
+export { XIcon };

package/src/react-ui/primitives/AutoHeight/index.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import {
+  motion,
+  type HTMLMotionProps,
+  type LegacyAnimationControls,
+  type TargetAndTransition,
+  type Transition,
+} from 'motion/react';
+
+import { useAutoHeight } from '@/react-ui/hooks/Animation/UseAutoHeight';
+import { Slot, type WithAsChild } from '@/react-ui/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>
+ * ```
+ */
+function AutoHeight({
+  children,
+  deps = [],
+  transition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    bounce: 0,
+    restDelta: 0.01,
+  },
+  style,
+  animate,
+  asChild = false,
+  ...props
+}: IAutoHeightProps) {
+  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);
+
+  const Comp = asChild ? Slot : motion.div;
+
+  return (
+    <Comp
+      style={{ overflow: 'hidden', ...style }}
+      animate={{ height, ...animate }}
+      transition={transition}
+      {...props}
+    >
+      <div ref={ref}>{children}</div>
+    </Comp>
+  );
+}
+
+export { AutoHeight, type IAutoHeightProps };

package/src/react-ui/primitives/CountingNumber/index.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import * as React from 'react';
+import { useMotionValue, useSpring, type SpringOptions } from 'motion/react';
+
+import {
+  useIsInView,
+  type IUseIsInViewOptions,
+} from '@/react-ui/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 />
+ * ```
+ */
+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
+}: ICountingNumberProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLElement>,
+    {
+      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: number) => {
+    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 (
+    <span ref={localRef} data-slot="counting-number" {...props}>
+      {initialText}
+    </span>
+  );
+}
+
+export { CountingNumber, type ICountingNumberProps };