@nice2dev/icons 1.3.14 → 1.3.16

package/dist/esm/types.js

@@ -1,79 +1,58 @@
-/**
- * Default colors for semantic color variants.
- * These are used when CSS variables are not defined.
- */
 const SEMANTIC_COLOR_DEFAULTS = {
-    success: '#22c55e', // Green 500
-    warning: '#f59e0b', // Amber 500
-    error: '#ef4444', // Red 500
-    info: '#3b82f6', // Blue 500
-    muted: '#6b7280', // Gray 500
-    primary: '#6366f1', // Indigo 500
-    secondary: '#8b5cf6', // Violet 500
-    accent: '#ec4899', // Pink 500
+  success: "#22c55e",
+  // Green 500
+  warning: "#f59e0b",
+  // Amber 500
+  error: "#ef4444",
+  // Red 500
+  info: "#3b82f6",
+  // Blue 500
+  muted: "#6b7280",
+  // Gray 500
+  primary: "#6366f1",
+  // Indigo 500
+  secondary: "#8b5cf6",
+  // Violet 500
+  accent: "#ec4899"
+  // Pink 500
 };
-/**
- * CSS variable names for semantic colors.
- * Define these in your CSS to customize icon colors globally.
- *
- * @example
- * ```css
- * :root {
- *   --ntd-icon-success: #10b981;
- *   --ntd-icon-error: #dc2626;
- * }
- * ```
- */
 const SEMANTIC_COLOR_VARS = {
-    success: '--ntd-icon-success',
-    warning: '--ntd-icon-warning',
-    error: '--ntd-icon-error',
-    info: '--ntd-icon-info',
-    muted: '--ntd-icon-muted',
-    primary: '--ntd-icon-primary',
-    secondary: '--ntd-icon-secondary',
-    accent: '--ntd-icon-accent',
+  success: "--ntd-icon-success",
+  warning: "--ntd-icon-warning",
+  error: "--ntd-icon-error",
+  info: "--ntd-icon-info",
+  muted: "--ntd-icon-muted",
+  primary: "--ntd-icon-primary",
+  secondary: "--ntd-icon-secondary",
+  accent: "--ntd-icon-accent"
 };
-/** Gradient preset color stops. */
 const GRADIENT_PRESETS = {
-    sunset: ['#ff6b6b', '#feca57', '#ff9ff3'],
-    ocean: ['#0652DD', '#1B9CFC', '#38ada9'],
-    forest: ['#0a3d0a', '#1e8449', '#58D68D'],
-    fire: ['#e74c3c', '#f39c12', '#f1c40f'],
-    ice: ['#74b9ff', '#a29bfe', '#dfe6e9'],
-    neon: ['#6c5ce7', '#fd79a8', '#00cec9'],
-    gold: ['#f9ca24', '#f0932b', '#e17055'],
-    'purple-haze': ['#6c5ce7', '#a55eea', '#e056a0'],
-    aurora: ['#00b894', '#00cec9', '#0984e3', '#6c5ce7'],
-    midnight: ['#0c0c1d', '#1e3a5f', '#2c3e50'],
-    candy: ['#ff6b81', '#ffa502', '#2ed573'],
-    steel: ['#636e72', '#b2bec3', '#dfe6e9'],
+  sunset: ["#ff6b6b", "#feca57", "#ff9ff3"],
+  ocean: ["#0652DD", "#1B9CFC", "#38ada9"],
+  forest: ["#0a3d0a", "#1e8449", "#58D68D"],
+  fire: ["#e74c3c", "#f39c12", "#f1c40f"],
+  ice: ["#74b9ff", "#a29bfe", "#dfe6e9"],
+  neon: ["#6c5ce7", "#fd79a8", "#00cec9"],
+  gold: ["#f9ca24", "#f0932b", "#e17055"],
+  "purple-haze": ["#6c5ce7", "#a55eea", "#e056a0"],
+  aurora: ["#00b894", "#00cec9", "#0984e3", "#6c5ce7"],
+  midnight: ["#0c0c1d", "#1e3a5f", "#2c3e50"],
+  candy: ["#ff6b81", "#ffa502", "#2ed573"],
+  steel: ["#636e72", "#b2bec3", "#dfe6e9"]
 };
-/**
- * Map of named size presets to their pixel values.
- *
- * Used internally by {@link createIcon} to resolve `IconSize` strings to numbers.
- *
- * | Key    | Value |
- * |--------|-------|
- * | `xs`   | 12    |
- * | `sm`   | 16    |
- * | `md`   | 24    |
- * | `lg`   | 32    |
- * | `xl`   | 48    |
- * | `2xl`  | 64    |
- * | `xxl`  | 96    |
- * | `xxxl` | 128   |
- */
 const SIZE_MAP = {
-    xs: 12,
-    sm: 16,
-    md: 24,
-    lg: 32,
-    xl: 48,
-    '2xl': 64,
-    xxl: 96,
-    xxxl: 128,
+  xs: 12,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48,
+  "2xl": 64,
+  xxl: 96,
+  xxxl: 128
+};
+export {
+  GRADIENT_PRESETS,
+  SEMANTIC_COLOR_DEFAULTS,
+  SEMANTIC_COLOR_VARS,
+  SIZE_MAP
 };
-
-export { GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS, SEMANTIC_COLOR_VARS, SIZE_MAP };

package/dist/esm/utilities.js

@@ -1,5 +1,4 @@
-import { useEffect, useState, useCallback, createElement, useSyncExternalStore } from 'react';
-
+import { useEffect, useState, useCallback, createElement, useSyncExternalStore } from "react";
 /**
  * @file utilities.ts
  * @description Utility hooks and functions for @nice2dev/icons
@@ -28,359 +27,216 @@ import { useEffect, useState, useCallback, createElement, useSyncExternalStore }
  * @since 2026-03
  * @license MIT
  */
-/* ────────────────────────────────────────────────────────────────────────────
-   ICON REGISTRY
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Global icon cache for dynamic loading
- */
-const iconRegistry = new Map();
-/**
- * Registers an icon in the global registry
- */
+const iconRegistry = /* @__PURE__ */ new Map();
 function registerIcon(name, component) {
-    iconRegistry.set(name, {
-        component,
-        loadedAt: Date.now(),
-    });
+  iconRegistry.set(name, {
+    component,
+    loadedAt: Date.now()
+  });
 }
-/**
- * Gets an icon from the registry
- */
 function getIconFromRegistry(name) {
-    var _a;
-    return (_a = iconRegistry.get(name)) === null || _a === void 0 ? void 0 : _a.component;
+  return iconRegistry.get(name)?.component;
 }
-/**
- * Clears the icon registry
- */
 function clearIconRegistry() {
-    iconRegistry.clear();
+  iconRegistry.clear();
 }
-/**
- * Gets all registered icon names
- */
 function getRegisteredIconNames() {
-    return Array.from(iconRegistry.keys());
+  return Array.from(iconRegistry.keys());
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   USE ICON HOOK
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Hook for dynamically loading icons by name.
- *
- * @param iconName - Name of the icon to load (e.g., 'NtdHome')
- * @param options - Loading options
- * @returns Icon component, loading state, and error
- *
- * @example
- * ```tsx
- * function DynamicIcon({ name }: { name: string }) {
- *   const { Icon, isLoading, error } = useIcon(name);
- *
- *   if (isLoading) return <Spinner />;
- *   if (error || !Icon) return <FallbackIcon />;
- *
- *   return <Icon size="md" />;
- * }
- * ```
- */
 function useIcon(iconName, options = {}) {
-    const { fallback, cache = true } = options;
-    const [state, setState] = useState({
-        Icon: iconName ? getIconFromRegistry(iconName) || null : null,
-        isLoading: false,
-        error: null,
-    });
-    useEffect(() => {
-        if (!iconName) {
-            setState({ Icon: null, isLoading: false, error: null });
-            return;
-        }
-        // Check cache first
-        const cached = getIconFromRegistry(iconName);
-        if (cached) {
-            setState({ Icon: cached, isLoading: false, error: null });
-            return;
+  const { fallback, cache = true } = options;
+  const [state, setState] = useState({
+    Icon: iconName ? getIconFromRegistry(iconName) || null : null,
+    isLoading: false,
+    error: null
+  });
+  useEffect(() => {
+    if (!iconName) {
+      setState({ Icon: null, isLoading: false, error: null });
+      return;
+    }
+    const cached = getIconFromRegistry(iconName);
+    if (cached) {
+      setState({ Icon: cached, isLoading: false, error: null });
+      return;
+    }
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    const loadIcon = async () => {
+      try {
+        const module = await import("./icons/index.js");
+        const IconComponent = module[iconName];
+        if (IconComponent) {
+          if (cache) {
+            registerIcon(iconName, IconComponent);
+          }
+          setState({ Icon: IconComponent, isLoading: false, error: null });
+        } else {
+          throw new Error(`Icon "${iconName}" not found`);
         }
-        // Start loading
-        setState((prev) => ({ ...prev, isLoading: true, error: null }));
-        // Dynamic import (assumes icons are exported individually)
-        const loadIcon = async () => {
-            try {
-                // Try to import from the icons module
-                const module = await import('./icons/index.js');
-                const IconComponent = module[iconName];
-                if (IconComponent) {
-                    if (cache) {
-                        registerIcon(iconName, IconComponent);
-                    }
-                    setState({ Icon: IconComponent, isLoading: false, error: null });
-                }
-                else {
-                    throw new Error(`Icon "${iconName}" not found`);
-                }
-            }
-            catch (err) {
-                setState({
-                    Icon: fallback || null,
-                    isLoading: false,
-                    error: err instanceof Error ? err : new Error('Failed to load icon'),
-                });
-            }
-        };
-        loadIcon();
-    }, [iconName, cache, fallback]);
-    return state;
+      } catch (err) {
+        setState({
+          Icon: fallback || null,
+          isLoading: false,
+          error: err instanceof Error ? err : new Error("Failed to load icon")
+        });
+      }
+    };
+    loadIcon();
+  }, [iconName, cache, fallback]);
+  return state;
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   USE REDUCED MOTION
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Subscribes to prefers-reduced-motion media query.
- */
 function subscribeToReducedMotion(callback) {
-    if (typeof window === 'undefined') {
-        return () => { };
-    }
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-    const handler = () => callback();
-    mediaQuery.addEventListener('change', handler);
-    return () => mediaQuery.removeEventListener('change', handler);
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const handler = () => callback();
+  mediaQuery.addEventListener("change", handler);
+  return () => mediaQuery.removeEventListener("change", handler);
 }
-/**
- * Gets current reduced motion preference.
- */
 function getReducedMotionSnapshot() {
-    if (typeof window === 'undefined') {
-        return false;
-    }
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-/**
- * Server snapshot for SSR (assumes no reduced motion preference).
- */
 function getReducedMotionServerSnapshot() {
-    return false;
+  return false;
 }
-/**
- * Hook that returns true if user prefers reduced motion.
- * Uses useSyncExternalStore for SSR compatibility.
- *
- * @returns Whether the user prefers reduced motion
- *
- * @example
- * ```tsx
- * function AnimatedIcon() {
- *   const prefersReducedMotion = useReducedMotion();
- *
- *   return (
- *     <NtdHeart
- *       animation={prefersReducedMotion ? undefined : 'pulse'}
- *     />
- *   );
- * }
- * ```
- */
 function useReducedMotion() {
-    return useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
+  return useSyncExternalStore(
+    subscribeToReducedMotion,
+    getReducedMotionSnapshot,
+    getReducedMotionServerSnapshot
+  );
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   PRELOAD ICONS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Preloads icons into the registry for instant access.
- *
- * @param iconNames - Array of icon names to preload
- * @returns Promise that resolves when all icons are loaded
- *
- * @example
- * ```tsx
- * // Preload critical icons at app startup
- * useEffect(() => {
- *   preloadIcons(['NtdHome', 'NtdSearch', 'NtdUser', 'NtdMenu']);
- * }, []);
- * ```
- */
 async function preloadIcons(iconNames) {
-    const results = new Map();
-    try {
-        const module = await import('./icons/index.js');
-        for (const name of iconNames) {
-            const IconComponent = module[name];
-            if (IconComponent) {
-                registerIcon(name, IconComponent);
-                results.set(name, IconComponent);
-            }
-        }
+  const results = /* @__PURE__ */ new Map();
+  try {
+    const module = await import("./icons/index.js");
+    for (const name of iconNames) {
+      const IconComponent = module[name];
+      if (IconComponent) {
+        registerIcon(name, IconComponent);
+        results.set(name, IconComponent);
+      }
     }
-    catch (error) {
-        console.warn('Failed to preload icons:', error);
-    }
-    return results;
+  } catch (error) {
+    console.warn("Failed to preload icons:", error);
+  }
+  return results;
 }
-/**
- * Creates a preloader component that preloads icons on mount.
- *
- * @param iconNames - Icons to preload
- * @returns React component that preloads icons
- *
- * @example
- * ```tsx
- * const IconPreloader = createIconPreloader(['NtdHome', 'NtdSearch']);
- *
- * function App() {
- *   return (
- *     <>
- *       <IconPreloader />
- *       <MainContent />
- *     </>
- *   );
- * }
- * ```
- */
 function createIconPreloader(iconNames) {
-    return function IconPreloader() {
-        useEffect(() => {
-            preloadIcons(iconNames);
-        }, []);
-        return null;
-    };
+  return function IconPreloader() {
+    useEffect(() => {
+      preloadIcons(iconNames);
+    }, []);
+    return null;
+  };
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   ICON PROPS HELPERS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Creates props with animation disabled if user prefers reduced motion.
- *
- * @param props - Original icon props
- * @param prefersReducedMotion - Whether user prefers reduced motion
- * @returns Props with animation conditionally disabled
- */
 function withReducedMotionProps(props, prefersReducedMotion) {
-    if (!prefersReducedMotion) {
-        return props;
-    }
-    return {
-        ...props,
-        animation: undefined,
-        animationDuration: undefined,
-        gradientAnimation: undefined,
-    };
+  if (!prefersReducedMotion) {
+    return props;
+  }
+  return {
+    ...props,
+    animation: void 0,
+    animationDuration: void 0,
+    gradientAnimation: void 0
+  };
 }
-/**
- * Creates accessible icon props based on context.
- *
- * @param options - Accessibility options
- * @returns Icon props for accessibility
- */
 function createAccessibleIconProps(options) {
-    const { label, isDecorative = !label, role } = options;
-    if (isDecorative) {
-        return {
-            'aria-hidden': true,
-            role: 'presentation',
-        };
-    }
+  const { label, isDecorative = !label, role } = options;
+  if (isDecorative) {
     return {
-        'aria-label': label,
-        role: role || 'img',
-        title: label,
+      "aria-hidden": true,
+      role: "presentation"
     };
+  }
+  return {
+    "aria-label": label,
+    role: role || "img",
+    title: label
+  };
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   ICON TYPE GUARDS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Checks if a value is a valid icon component.
- * Handles both regular components and forwardRef components.
- */
 function isIconComponent(value) {
-    if (value == null) {
-        return false;
-    }
-    // ForwardRef components are objects with $$typeof, regular components are functions
-    const isValidComponent = typeof value === 'function' || (typeof value === 'object' && '$$typeof' in value);
-    if (!isValidComponent) {
-        return false;
-    }
-    const displayName = value.displayName;
-    return typeof displayName === 'string' && displayName.startsWith('Ntd');
+  if (value == null) {
+    return false;
+  }
+  const isValidComponent = typeof value === "function" || typeof value === "object" && "$$typeof" in value;
+  if (!isValidComponent) {
+    return false;
+  }
+  const displayName = value.displayName;
+  return typeof displayName === "string" && displayName.startsWith("Ntd");
 }
-/**
- * Checks if an icon name is valid.
- */
 function isValidIconName(name) {
-    return /^Ntd[A-Z][a-zA-Z0-9]*$/.test(name);
+  return /^Ntd[A-Z][a-zA-Z0-9]*$/.test(name);
 }
-/**
- * Creates a function that renders multiple icons efficiently.
- *
- * @param configs - Array of icon configurations
- * @returns Function that renders all configured icons
- *
- * @example
- * ```tsx
- * const renderNavIcons = createBatchIconRenderer([
- *   { name: 'NtdHome', props: { size: 'md' } },
- *   { name: 'NtdSearch', props: { size: 'md' } },
- *   { name: 'NtdUser', props: { size: 'md' } },
- * ]);
- *
- * // In component
- * const icons = renderNavIcons();
- * ```
- */
 function useBatchIcons(configs) {
-    const [icons, setIcons] = useState(new Map());
-    const [isLoading, setIsLoading] = useState(true);
-    // the names, not the array: a new array of the same icons must not reload them
-    const namesKey = configs.map((c) => c.name).join(',');
-    useEffect(() => {
-        const loadIcons = async () => {
-            setIsLoading(true);
-            const names = namesKey ? namesKey.split(',') : [];
-            const loadedIcons = await preloadIcons(names);
-            setIcons(loadedIcons);
-            setIsLoading(false);
-        };
-        loadIcons();
-    }, [namesKey]);
-    const renderIcon = useCallback((name, additionalProps) => {
-        const Icon = icons.get(name);
-        const config = configs.find((c) => c.name === name);
-        if (!Icon) {
-            return null;
-        }
-        const mergedProps = {
-            ...config === null || config === void 0 ? void 0 : config.props,
-            ...additionalProps,
-        };
-        return createElement(Icon, mergedProps);
-    }, [icons, configs]);
-    return {
-        renderIcon,
-        isLoading,
-        icons,
+  const [icons, setIcons] = useState(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = useState(true);
+  const namesKey = configs.map((c) => c.name).join(",");
+  useEffect(() => {
+    const loadIcons = async () => {
+      setIsLoading(true);
+      const names = namesKey ? namesKey.split(",") : [];
+      const loadedIcons = await preloadIcons(names);
+      setIcons(loadedIcons);
+      setIsLoading(false);
     };
-}
-/* ────────────────────────────────────────────────────────────────────────────
-   EXPORTS
-───────────────────────────────────────────────────────────────────────────── */
-var utilities = {
-    useIcon,
-    useReducedMotion,
-    preloadIcons,
-    createIconPreloader,
-    registerIcon,
-    getIconFromRegistry,
-    clearIconRegistry,
-    getRegisteredIconNames,
-    withReducedMotionProps,
-    createAccessibleIconProps,
-    isIconComponent,
-    isValidIconName,
-    useBatchIcons,
+    loadIcons();
+  }, [namesKey]);
+  const renderIcon = useCallback(
+    (name, additionalProps) => {
+      const Icon = icons.get(name);
+      const config = configs.find((c) => c.name === name);
+      if (!Icon) {
+        return null;
+      }
+      const mergedProps = {
+        ...config?.props,
+        ...additionalProps
+      };
+      return createElement(Icon, mergedProps);
+    },
+    [icons, configs]
+  );
+  return {
+    renderIcon,
+    isLoading,
+    icons
+  };
+}
+const utilities = {
+  useIcon,
+  useReducedMotion,
+  preloadIcons,
+  createIconPreloader,
+  registerIcon,
+  getIconFromRegistry,
+  clearIconRegistry,
+  getRegisteredIconNames,
+  withReducedMotionProps,
+  createAccessibleIconProps,
+  isIconComponent,
+  isValidIconName,
+  useBatchIcons
+};
+export {
+  clearIconRegistry,
+  createAccessibleIconProps,
+  createIconPreloader,
+  utilities as default,
+  getIconFromRegistry,
+  getRegisteredIconNames,
+  isIconComponent,
+  isValidIconName,
+  preloadIcons,
+  registerIcon,
+  useBatchIcons,
+  useIcon,
+  useReducedMotion,
+  withReducedMotionProps
 };
-
-export { clearIconRegistry, createAccessibleIconProps, createIconPreloader, utilities as default, getIconFromRegistry, getRegisteredIconNames, isIconComponent, isValidIconName, preloadIcons, registerIcon, useBatchIcons, useIcon, useReducedMotion, withReducedMotionProps };