@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,151 +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 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-ui/icons/lucide-animated/trending-up.tsx

@@ -1,150 +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 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/type.tsx

@@ -1,23 +0,0 @@
-/**
- * Type Icon
- *
- * Font/text/icon.
- */
-
-export function Type(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="4 7 4 4 20 4 20 7" />
-      <line x1="9" x2="15" y1="20" y2="20" />
-      <line x1="12" x2="12" y1="4" y2="20" />
-    </svg>
-  );
-}

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

@@ -1,23 +0,0 @@
-/**
- * Upload Icon
- *
- * Upload arrow icon.
- */
-
-export function Upload(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-      <polyline points="17 8 12 3 7 8" />
-      <line x1="12" x2="12" y1="3" y2="15" />
-    </svg>
-  );
-}

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

@@ -1,102 +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 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/index.ts

@@ -1,30 +0,0 @@
-/**
- * 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-ui/lib/get-strict-context.tsx

@@ -1,56 +0,0 @@
-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-ui/lib/icon-wrapper.tsx

@@ -1,70 +0,0 @@
-/**
- * Icon Wrapper Component.
- *
- * Ensures consistent sizing across different icon types.
- * Some icons use explicit size props, others use CSS classes.
- *
- * @module @mks2508/mks-ui/react/lib/icon-wrapper
- */
-
-'use client';
-
-import type { HTMLAttributes } from 'react';
-
-/**
- * Icons that use explicit size prop instead of CSS classes.
- * These icons have SVG elements with width/height attributes.
- */
-const SIZEABLE_ICONS = new Set([
-  'DownloadIcon',
-  'EyeIcon',
-  'EyeOffIcon',
-  'SearchIcon',
-  'XIcon',
-  'DeleteIcon',
-  'TerminalIcon',
-  'PlusIcon',
-]);
-
-/**
- * Icon wrapper props interface.
- */
-export interface IIconWrapperProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * The icon component to render.
-   * Accepts ComponentType, ForwardRefExoticComponent, or any renderable component.
-   * Broad type needed for React 19 compatibility across duplicate @types/react copies.
-   */
-  icon: React.ComponentType<any> | React.ExoticComponent<any>;
-  /** Size in pixels for icons that use size prop (default: 16) */
-  size?: number;
-}
-
-/**
- * Icon wrapper that ensures consistent sizing across different icon types.
- *
- * Some icons from the UI package use explicit size props (width/height on SVG),
- * while others use CSS classes (w-4 h-4). This wrapper detects the icon type
- * and applies the appropriate sizing method.
- *
- * @example
- * ```tsx
- * <IconWrapper icon={DownloadIcon} size={16} className="text-primary" />
- * <IconWrapper icon={KeyIcon} className="text-muted-foreground" />
- * ```
- */
-export function IconWrapper({
-  icon: Icon,
-  className,
-  size = 16,
-  ...props
-}: IIconWrapperProps) {
-  const iconName = (Icon as any).displayName || Icon.name || '';
-  const useSizeProp = SIZEABLE_ICONS.has(iconName);
-
-  if (useSizeProp) {
-    return <Icon size={size} className={className} {...props} />;
-  }
-
-  return <Icon className={className} {...props} />;
-}

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

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

package/src/react-ui/lib/utils.ts

@@ -1,24 +0,0 @@
-/**
- * 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));
-}