@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react/icons/lucide-animated/settings.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import { motion, useAnimation } from "framer-motion";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "@/react/lib/utils";
-
-export interface SettingsIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface SettingsIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const SettingsIcon = forwardRef<SettingsIconHandle, SettingsIconProps>(
-  ({ 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}
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          transition={{ type: "spring", stiffness: 50, damping: 10 }}
-          variants={{
-            normal: {
-              rotate: 0,
-            },
-            animate: {
-              rotate: 180,
-            },
-          }}
-          viewBox="0 0 24 24"
-          width={size}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-          <circle cx="12" cy="12" r="3" />
-        </motion.svg>
-      </div>
-    );
-  }
-);
-
-SettingsIcon.displayName = "SettingsIcon";
-
-export { SettingsIcon };

package/src/react/icons/lucide-animated/trending-down.tsx

@@ -1,151 +0,0 @@
-"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/lib/utils";
-
-export interface TrendingDownIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface TrendingDownIconProps 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 TrendingDownIcon = forwardRef<
-  TrendingDownIconHandle,
-  TrendingDownIconProps
->(({ 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 17 13.5 8.5 8.5 13.5 2 7"
-          variants={PATH_VARIANTS}
-        />
-        <motion.polyline
-          animate={controls}
-          initial="normal"
-          points="16 17 22 17 22 11"
-          variants={ARROW_VARIANTS}
-        />
-      </motion.svg>
-    </div>
-  );
-});
-
-TrendingDownIcon.displayName = "TrendingDownIcon";
-
-export { TrendingDownIcon };

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

@@ -1,150 +0,0 @@
-"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/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/icons/lucide-animated/x.tsx

@@ -1,102 +0,0 @@
-"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/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/primitives/AutoHeight/index.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import {
-  motion,
-  type HTMLMotionProps,
-  type LegacyAnimationControls,
-  type TargetAndTransition,
-  type Transition,
-} from 'motion/react';
-
-import { useAutoHeight } from '@/react/hooks/Animation/UseAutoHeight';
-import { Slot, 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>
- * ```
- */
-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/primitives/CountingNumber/index.tsx

@@ -1,147 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useMotionValue, useSpring, type SpringOptions } from 'motion/react';
-
-import {
-  useIsInView,
-  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 />
- * ```
- */
-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 };