@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/hooks/State/UseDataState.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-/** Possible values stored in a data-* attribute. */
-type DataStateValue = string | boolean | null;
-
-/**
- * Parse a DOM dataset attribute string into a typed value.
- *
- * @param value - Raw attribute string
- * @returns Parsed DataStateValue
- */
-function parseDatasetValue(value: string | null): DataStateValue {
-  if (value === null) return null;
-  if (value === '' || value === 'true') return true;
-  if (value === 'false') return false;
-  return value;
-}
-
-/**
- * Hook that observes a `data-*` attribute on a DOM element via MutationObserver
- * and returns the current value reactively.
- *
- * @param key - The data attribute key (without `data-` prefix)
- * @param forwardedRef - Optional forwarded ref to merge
- * @param onChange - Callback when value changes
- * @returns Tuple of [currentValue, localRef]
- *
- * @example
- * ```tsx
- * const [state, ref] = useDataState<HTMLDivElement>('state');
- * // Reacts to changes in `data-state` attribute on the element
- * ```
- */
-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/react-ui/hooks/index.ts

@@ -1,20 +0,0 @@
-/**
- * Custom React hooks barrel export.
- *
- * @module @mks2508/mks-ui/react/hooks
- */
-
-export { useAutoHeight } from './Animation/UseAutoHeight';
-export type { IAutoHeightOptions } from './Animation/UseAutoHeight';
-
-export { useControlledState } from './State/UseControlledState';
-export type { IControlledStateProps } from './State/UseControlledState';
-
-export { useDataState } from './State/UseDataState';
-export type { DataStateValue } from './State/UseDataState';
-
-export { useIsInView } from './DOM/UseIsInView';
-export type { IUseIsInViewOptions } from './DOM/UseIsInView';
-
-export { useListFormat } from './Formatting/UseListFormat';
-export type { IUseListFormatOptions, IListPart, ListFormatType, ListFormatStyle } from './Formatting/UseListFormat';

package/src/react-ui/icons/index.ts

@@ -1,12 +0,0 @@
-/**
- * Icons barrel export - Organized by registry.
- *
- * @module @mks2508/mks-ui/react/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/react'
-export * as HugeIcons from '@hugeicons/core-free-icons';

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

@@ -1,109 +0,0 @@
-"use client";
-
-import type { Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "@/react-ui/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/react-ui/icons/lucide-animated/arrow-down-to-line.tsx

@@ -1,51 +0,0 @@
-/**
- * ArrowDownToLine Icon.
- *
- * Simple SVG icon for follow cursor enabled.
- *
- * @module components/icons/arrow-down-to-line
- */
-
-'use client';
-
-import type { HTMLAttributes } from 'react';
-
-export interface IArrowDownToLineIconProps extends HTMLAttributes<SVGSVGElement> {
-  size?: number;
-}
-
-/**
- * ArrowDownToLine Icon component.
- *
- * Use for follow cursor enabled state (auto-scroll to bottom).
- *
- * @example
- * ```tsx
- * <ArrowDownToLineIcon className="w-4 h-4 text-primary" />
- * ```
- */
-export function ArrowDownToLineIcon({
-  className,
-  size = 24,
-  ...props
-}: IArrowDownToLineIconProps) {
-  return (
-    <svg
-      className={className}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M12 17V3" />
-      <path d="m6 11 6 6 6-6" />
-      <path d="M20 21H4" />
-    </svg>
-  );
-}

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

@@ -1,50 +0,0 @@
-/**
- * ArrowUp Icon.
- *
- * Simple SVG icon for follow cursor disabled.
- *
- * @module components/icons/arrow-up
- */
-
-'use client';
-
-import type { HTMLAttributes } from 'react';
-
-export interface IArrowUpIconProps extends HTMLAttributes<SVGSVGElement> {
-  size?: number;
-}
-
-/**
- * ArrowUp Icon component.
- *
- * Use for follow cursor disabled state (scroll locked).
- *
- * @example
- * ```tsx
- * <ArrowUpIcon className="w-4 h-4 text-muted-foreground" />
- * ```
- */
-export function ArrowUpIcon({
-  className,
-  size = 24,
-  ...props
-}: IArrowUpIconProps) {
-  return (
-    <svg
-      className={className}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M12 3v17" />
-      <path d="m6 11 6-6 6 6" />
-    </svg>
-  );
-}

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

@@ -1,124 +0,0 @@
-"use client";
-
-import { motion, useAnimation } from "motion/react";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "@/react-ui/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/react-ui/icons/lucide-animated/bell.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import type { Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "@/react-ui/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/react-ui/icons/lucide-animated/bot.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import { motion, useAnimation } from "motion/react";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "@/react-ui/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 };