@mks2508/mks-ui 0.1.4 → 0.2.0

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

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

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

@@ -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/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

@@ -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/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/index.ts

@@ -0,0 +1,30 @@
+/**
+ * React components, hooks, icons, and utilities barrel export.
+ *
+ * @module @mks2508/mks-ui/react
+ *
+ * @example
+ * ```tsx
+ * import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui/react';
+ * import { useAutoHeight, useControlledState } from '@mks2508/mks-ui/react';
+ * import { cn } from '@mks2508/mks-ui/react';
+ * ```
+ */
+
+// Primitives (internal building blocks, re-exported for advanced use)
+export * from './primitives';
+
+// UI components (primary public API)
+export * from './ui';
+
+// Complex components (CSS modules, advanced patterns)
+export * from './components';
+
+// Custom hooks
+export * from './hooks';
+
+// Icons
+export * from './icons';
+
+// Utilities
+export * from './lib';

package/src/react/lib/get-strict-context.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+/**
+ * Creates a strict context pair — a Provider and a hook that throws
+ * if used outside the Provider.
+ *
+ * @param name - Display name for error messages
+ * @returns A tuple of [Provider, useSafeContext]
+ *
+ * @example
+ * ```tsx
+ * const [ThemeProvider, useTheme] = getStrictContext<IThemeContext>('ThemeProvider');
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider value={{ mode: 'dark' }}>
+ *       <MyComponent />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+  ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => React.JSX.Element,
+  () => T,
+] {
+  const Context = React.createContext<T | undefined>(undefined);
+
+  const Provider = ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => <Context.Provider value={value}>{children}</Context.Provider>;
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context);
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);
+    }
+    return ctx;
+  };
+
+  return [Provider, useSafeContext] as const;
+}
+
+export { getStrictContext };

package/src/react/lib/index.ts

@@ -0,0 +1,8 @@
+/**
+ * React-specific utility functions barrel export.
+ *
+ * @module @mks2508/mks-ui/react/lib
+ */
+
+export { cn } from './utils';
+export { getStrictContext } from './get-strict-context';

package/src/react/lib/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * React-specific utility functions.
+ *
+ * @module @mks2508/mks-ui/react/lib/utils
+ */
+
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge class names with Tailwind CSS class deduplication.
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged and deduplicated class string
+ *
+ * @example
+ * ```typescript
+ * cn('px-2 py-1', 'px-4') // 'py-1 px-4'
+ * cn('bg-red-500', condition && 'bg-blue-500')
+ * ```
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/react/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/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 };