@mks2508/mks-ui 0.1.4 → 0.2.0

package/src/hooks/use-controlled-state.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-interface CommonControlledStateProps<T> {
-  value?: T;
-  defaultValue?: T;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useControlledState<T, Rest extends any[] = []>(
-  props: CommonControlledStateProps<T> & {
-    onChange?: (value: T, ...args: Rest) => void;
-  },
-): readonly [T, (next: T, ...args: Rest) => void] {
-  const { value, defaultValue, onChange } = props;
-
-  const [state, setInternalState] = React.useState<T>(
-    value !== undefined ? value : (defaultValue as T),
-  );
-
-  React.useEffect(() => {
-    if (value !== undefined) setInternalState(value);
-  }, [value]);
-
-  const setState = React.useCallback(
-    (next: T, ...args: Rest) => {
-      setInternalState(next);
-      onChange?.(next, ...args);
-    },
-    [onChange],
-  );
-
-  return [state, setState] as const;
-}

package/src/hooks/use-data-state.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-type DataStateValue = string | boolean | null;
-
-function parseDatasetValue(value: string | null): DataStateValue {
-  if (value === null) return null;
-  if (value === '' || value === 'true') return true;
-  if (value === 'false') return false;
-  return value;
-}
-
-function useDataState<T extends HTMLElement = HTMLElement>(
-  key: string,
-  forwardedRef?: React.Ref<T | null>,
-  onChange?: (value: DataStateValue) => void,
-): [DataStateValue, React.RefObject<T | null>] {
-  const localRef = React.useRef<T | null>(null);
-  React.useImperativeHandle(forwardedRef, () => localRef.current as T);
-
-  const getSnapshot = (): DataStateValue => {
-    const el = localRef.current;
-    return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
-  };
-
-  const subscribe = (callback: () => void) => {
-    const el = localRef.current;
-    if (!el) return () => {};
-    const observer = new MutationObserver((records) => {
-      for (const record of records) {
-        if (record.attributeName === `data-${key}`) {
-          callback();
-          break;
-        }
-      }
-    });
-    observer.observe(el, {
-      attributes: true,
-      attributeFilter: [`data-${key}`],
-    });
-    return () => observer.disconnect();
-  };
-
-  const value = React.useSyncExternalStore(subscribe, getSnapshot);
-
-  React.useEffect(() => {
-    if (onChange) onChange(value);
-  }, [value, onChange]);
-
-  return [value, localRef];
-}
-
-export { useDataState, type DataStateValue };

package/src/hooks/use-is-in-view.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { useInView, type UseInViewOptions } from 'motion/react';
-
-interface UseIsInViewOptions {
-  inView?: boolean;
-  inViewOnce?: boolean;
-  inViewMargin?: UseInViewOptions['margin'];
-}
-
-function useIsInView<T extends HTMLElement = HTMLElement>(
-  ref: React.Ref<T>,
-  options: UseIsInViewOptions = {},
-) {
-  const { inView, inViewOnce = false, inViewMargin = '0px' } = options;
-  const localRef = React.useRef<T>(null);
-  React.useImperativeHandle(ref, () => localRef.current as T);
-  const inViewResult = useInView(localRef, {
-    once: inViewOnce,
-    margin: inViewMargin,
-  });
-  const isInView = !inView || inViewResult;
-  return { ref: localRef, isInView };
-}
-
-export { useIsInView, type UseIsInViewOptions };

package/src/icons/index.ts

@@ -1,12 +0,0 @@
-/**
- * Icons barrel export - Organized by registry
- *
- * @module @mks2508/mks-ui/components/icons
- */
-
-// Lucide animated icons (preferred for animated icons)
-export * from './lucide-animated';
-
-// HugeIcons - re-exported as namespace to avoid naming conflicts
-// Use: import { HugeIcons } from '@mks2508/mks-ui/icons'
-export * as HugeIcons from "@hugeicons/core-free-icons";

package/src/icons/lucide-animated/activity.tsx

@@ -1,109 +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 "@/lib/utils";
-
-export interface ActivityIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const VARIANTS: Variants = {
-  normal: {
-    opacity: 1,
-    pathLength: 1,
-    pathOffset: 0,
-    transition: {
-      duration: 0.4,
-      opacity: { duration: 0.1 },
-    },
-  },
-  animate: {
-    opacity: [0, 1],
-    pathLength: [0, 1],
-    pathOffset: [1, 0],
-    transition: {
-      duration: 0.6,
-      ease: "linear",
-      opacity: { duration: 0.1 },
-    },
-  },
-};
-
-const ActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(
-  ({ 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="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
-            initial="normal"
-            variants={VARIANTS}
-          />
-        </svg>
-      </div>
-    );
-  }
-);
-
-ActivityIcon.displayName = "ActivityIcon";
-
-export { ActivityIcon };

package/src/icons/lucide-animated/bell-electric.tsx

@@ -1,124 +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 "@/lib/utils";
-
-export interface BellElectricIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface BellElectricIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const BellElectricIcon = forwardRef<
-  BellElectricIconHandle,
-  BellElectricIconProps
->(({ 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"
-        style={{ transformBox: "fill-box", transformOrigin: "50% 50%" }}
-        transition={{ duration: 0.9 }}
-        variants={{
-          normal: { rotate: 0, translateX: 0, translateY: 0 },
-          animate: {
-            rotate: [0, -12, 12, -8, 8, 0],
-            translateX: [0, -1.5, 1.5, -1, 1, 0],
-            translateY: [0, -1, 1, -0.5, 0.5, 0],
-          },
-        }}
-        viewBox="0 0 24 24"
-        width={size}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M18.518 17.347A7 7 0 0 1 14 19" />
-        <motion.path
-          animate={controls}
-          d="M18.8 4A11 11 0 0 1 20 9"
-          style={{ transformBox: "fill-box", originX: "50%", originY: "50%" }}
-          transition={{ duration: 0.9 }}
-          variants={{
-            normal: { translateX: 0, translateY: 0, rotate: 0 },
-            animate: {
-              translateX: [0, -0.8, 0.8, -0.6, 0.6, 0],
-              translateY: [0, -0.5, 0.5, -0.3, 0.3, 0],
-              rotate: [0, -6, 6, -4, 4, 0],
-            },
-          }}
-        />
-        <motion.path
-          animate={controls}
-          d="M9 9h.01"
-          style={{ transformBox: "fill-box", originX: "50%", originY: "50%" }}
-          transition={{ duration: 0.75 }}
-          variants={{
-            normal: { translateX: 0, translateY: 0, rotate: 0, scale: 1 },
-            animate: {
-              translateX: [0, -1.6, 1.6, -1.2, 1.2, 0],
-              translateY: [0, -1.2, 1.2, -0.8, 0.8, 0],
-              rotate: [0, -10, 10, -7, 7, 0],
-              scale: [1, 1.08, 0.95, 1.06, 0.98, 1],
-            },
-          }}
-        />
-        <circle cx="9" cy="9" r="7" />
-        <rect height="6" rx="2" width="10" x="4" y="16" />
-        <circle cx="20" cy="16" r="2" />
-      </motion.svg>
-    </div>
-  );
-});
-
-BellElectricIcon.displayName = "BellElectricIcon";
-
-export { BellElectricIcon };

package/src/icons/lucide-animated/bell.tsx

@@ -1,93 +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 "@/lib/utils";
-
-export interface BellIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface BellIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const SVG_VARIANTS: Variants = {
-  normal: { rotate: 0 },
-  animate: { rotate: [0, -10, 10, -10, 0] },
-};
-
-const BellIcon = forwardRef<BellIconHandle, BellIconProps>(
-  ({ 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={{
-            duration: 0.5,
-            ease: "easeInOut",
-          }}
-          variants={SVG_VARIANTS}
-          viewBox="0 0 24 24"
-          width={size}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-        </motion.svg>
-      </div>
-    );
-  }
-);
-
-BellIcon.displayName = "BellIcon";
-
-export { BellIcon };

package/src/icons/lucide-animated/bot.tsx

@@ -1,122 +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 "@/lib/utils";
-
-export interface BotIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-export interface BotIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const BotIcon = forwardRef<BotIconHandle, BotIconProps>(
-  ({ 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"
-        >
-          <path d="M12 8V4H8" />
-          <rect height="12" rx="2" width="16" x="4" y="8" />
-          <path d="M2 14h2" />
-          <path d="M20 14h2" />
-
-          <motion.line
-            animate={controls}
-            initial="normal"
-            variants={{
-              normal: { y1: 13, y2: 15 },
-              animate: {
-                y1: [13, 14, 13],
-                y2: [15, 14, 15],
-                transition: {
-                  duration: 0.5,
-                  ease: "easeInOut",
-                  delay: 0.2,
-                },
-              },
-            }}
-            x1={15}
-            x2={15}
-          />
-
-          <motion.line
-            animate={controls}
-            initial="normal"
-            variants={{
-              normal: { y1: 13, y2: 15 },
-              animate: {
-                y1: [13, 14, 13],
-                y2: [15, 14, 15],
-                transition: {
-                  duration: 0.5,
-                  ease: "easeInOut",
-                  delay: 0.2,
-                },
-              },
-            }}
-            x1={9}
-            x2={9}
-          />
-        </svg>
-      </div>
-    );
-  }
-);
-
-BotIcon.displayName = "Bot";
-
-export { BotIcon };

package/src/icons/lucide-animated/box.tsx

@@ -1,117 +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 "@/lib/utils";
-
-export interface BoxIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface BoxIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const PATH_VARIANTS: Variants = {
-  normal: {
-    opacity: 1,
-    pathLength: 1,
-    transition: {
-      duration: 0.3,
-      opacity: { duration: 0.1 },
-    },
-  },
-  animate: {
-    opacity: [0, 1],
-    pathLength: [0, 1],
-    transition: {
-      duration: 0.4,
-      opacity: { duration: 0.1 },
-    },
-  },
-};
-
-const BoxIcon = forwardRef<BoxIconHandle, BoxIconProps>(
-  ({ 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="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
-            initial="normal"
-            variants={PATH_VARIANTS}
-          />
-          <motion.path
-            animate={controls}
-            d="m3.3 7 8.7 5 8.7-5"
-            initial="normal"
-            variants={PATH_VARIANTS}
-          />
-          <motion.path
-            animate={controls}
-            d="M12 22V12"
-            initial="normal"
-            variants={PATH_VARIANTS}
-          />
-        </svg>
-      </div>
-    );
-  }
-);
-
-BoxIcon.displayName = "BoxIcon";
-
-export { BoxIcon };