@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/tailwind-plugin.js

@@ -10,333 +10,296 @@
  * @license MIT
  */
 const defaultSizes = {
-    xs: '0.75rem',
-    sm: '1rem',
-    md: '1.5rem',
-    lg: '2rem',
-    xl: '3rem',
-    '2xl': '4rem',
+  xs: "0.75rem",
+  sm: "1rem",
+  md: "1.5rem",
+  lg: "2rem",
+  xl: "3rem",
+  "2xl": "4rem"
 };
-/**
- * Tailwind CSS Plugin for NiceToDev Icons
- *
- * @example
- * // tailwind.config.js
- * import { ntdIconPlugin } from '@nice2dev/icons/tailwind';
- *
- * export default {
- *   plugins: [
- *     ntdIconPlugin({
- *       prefix: 'ntd-icon',
- *       animations: true,
- *     }),
- *   ],
- * };
- *
- * @example
- * // Usage in components
- * <NtdHome className="ntd-icon-md text-blue-500 hover:ntd-icon-bounce" />
- * <NtdStar className="ntd-icon-lg ntd-icon-spin text-yellow-400" />
- */
 const ntdIconPlugin = (options = {}) => {
-    const { prefix = 'ntd-icon', sizes = defaultSizes, animations = true, variantUtilities = true, } = options;
-    return function ({ addUtilities, addComponents, theme, matchUtilities }) {
-        // ─────────────────────────────────────────────────────────────────────
-        // SIZE UTILITIES
-        // ─────────────────────────────────────────────────────────────────────
-        const sizeUtilities = {};
-        Object.entries(sizes).forEach(([key, value]) => {
-            sizeUtilities[`.${prefix}-${key}`] = {
-                width: value,
-                height: value,
-            };
-        });
-        addUtilities(sizeUtilities);
-        // Dynamic sizing using Tailwind's spacing scale
-        matchUtilities({
-            [`${prefix}-size`]: (value) => ({
-                width: value,
-                height: value,
-            }),
-        }, { values: theme('spacing') });
-        // ─────────────────────────────────────────────────────────────────────
-        // COLOR UTILITIES (for SVG icons)
-        // ─────────────────────────────────────────────────────────────────────
-        const colorUtilities = {
-            // Primary color (main icon color)
-            [`.${prefix}-current`]: {
-                color: 'currentColor',
-                '--ntd-primary-color': 'currentColor',
-            },
-            // For duotone: secondary color
-            [`.${prefix}-secondary-current`]: {
-                '--ntd-secondary-color': 'currentColor',
-            },
-            // Opacity for secondary color in duotone
-            [`.${prefix}-secondary-opacity-25`]: {
-                '--ntd-secondary-opacity': '0.25',
-            },
-            [`.${prefix}-secondary-opacity-50`]: {
-                '--ntd-secondary-opacity': '0.5',
-            },
-            [`.${prefix}-secondary-opacity-75`]: {
-                '--ntd-secondary-opacity': '0.75',
-            },
-        };
-        addUtilities(colorUtilities);
-        // Dynamic color matching using Tailwind's color palette
-        matchUtilities({
-            [`${prefix}-primary`]: (value) => ({
-                '--ntd-primary-color': value,
-            }),
-            [`${prefix}-secondary`]: (value) => ({
-                '--ntd-secondary-color': value,
-            }),
-        }, { values: flattenColorPalette(theme('colors')) });
-        // ─────────────────────────────────────────────────────────────────────
-        // STROKE WIDTH UTILITIES
-        // ─────────────────────────────────────────────────────────────────────
-        const strokeUtilities = {
-            [`.${prefix}-stroke-thin`]: {
-                '--ntd-stroke-width': '1',
-            },
-            [`.${prefix}-stroke-normal`]: {
-                '--ntd-stroke-width': '1.5',
-            },
-            [`.${prefix}-stroke-medium`]: {
-                '--ntd-stroke-width': '2',
-            },
-            [`.${prefix}-stroke-thick`]: {
-                '--ntd-stroke-width': '2.5',
-            },
-            [`.${prefix}-stroke-bold`]: {
-                '--ntd-stroke-width': '3',
-            },
-        };
-        addUtilities(strokeUtilities);
-        matchUtilities({
-            [`${prefix}-stroke`]: (value) => ({
-                '--ntd-stroke-width': value,
-            }),
-        }, { values: { '0.5': '0.5', '1': '1', '1.5': '1.5', '2': '2', '2.5': '2.5', '3': '3' } });
-        // ─────────────────────────────────────────────────────────────────────
-        // VARIANT UTILITIES
-        // ─────────────────────────────────────────────────────────────────────
-        if (variantUtilities) {
-            const variantClasses = {
-                [`.${prefix}-solid`]: {
-                    '--ntd-variant': 'solid',
-                },
-                [`.${prefix}-outline`]: {
-                    '--ntd-variant': 'outline',
-                },
-                [`.${prefix}-sharp`]: {
-                    '--ntd-variant': 'sharp',
-                },
-                [`.${prefix}-duotone`]: {
-                    '--ntd-variant': 'duotone',
-                },
-                [`.${prefix}-cutout`]: {
-                    '--ntd-variant': 'cutout',
-                },
-                [`.${prefix}-vivid`]: {
-                    '--ntd-variant': 'vivid',
-                },
-            };
-            addUtilities(variantClasses);
+  const {
+    prefix = "ntd-icon",
+    sizes = defaultSizes,
+    animations = true,
+    variantUtilities = true
+  } = options;
+  return function({ addUtilities, addComponents, theme, matchUtilities }) {
+    const sizeUtilities = {};
+    Object.entries(sizes).forEach(([key, value]) => {
+      sizeUtilities[`.${prefix}-${key}`] = {
+        width: value,
+        height: value
+      };
+    });
+    addUtilities(sizeUtilities);
+    matchUtilities(
+      {
+        [`${prefix}-size`]: (value) => ({
+          width: value,
+          height: value
+        })
+      },
+      { values: theme("spacing") }
+    );
+    const colorUtilities = {
+      // Primary color (main icon color)
+      [`.${prefix}-current`]: {
+        color: "currentColor",
+        "--ntd-primary-color": "currentColor"
+      },
+      // For duotone: secondary color
+      [`.${prefix}-secondary-current`]: {
+        "--ntd-secondary-color": "currentColor"
+      },
+      // Opacity for secondary color in duotone
+      [`.${prefix}-secondary-opacity-25`]: {
+        "--ntd-secondary-opacity": "0.25"
+      },
+      [`.${prefix}-secondary-opacity-50`]: {
+        "--ntd-secondary-opacity": "0.5"
+      },
+      [`.${prefix}-secondary-opacity-75`]: {
+        "--ntd-secondary-opacity": "0.75"
+      }
+    };
+    addUtilities(colorUtilities);
+    matchUtilities(
+      {
+        [`${prefix}-primary`]: (value) => ({
+          "--ntd-primary-color": value
+        }),
+        [`${prefix}-secondary`]: (value) => ({
+          "--ntd-secondary-color": value
+        })
+      },
+      { values: flattenColorPalette(theme("colors")) }
+    );
+    const strokeUtilities = {
+      [`.${prefix}-stroke-thin`]: {
+        "--ntd-stroke-width": "1"
+      },
+      [`.${prefix}-stroke-normal`]: {
+        "--ntd-stroke-width": "1.5"
+      },
+      [`.${prefix}-stroke-medium`]: {
+        "--ntd-stroke-width": "2"
+      },
+      [`.${prefix}-stroke-thick`]: {
+        "--ntd-stroke-width": "2.5"
+      },
+      [`.${prefix}-stroke-bold`]: {
+        "--ntd-stroke-width": "3"
+      }
+    };
+    addUtilities(strokeUtilities);
+    matchUtilities(
+      {
+        [`${prefix}-stroke`]: (value) => ({
+          "--ntd-stroke-width": value
+        })
+      },
+      { values: { "0.5": "0.5", "1": "1", "1.5": "1.5", "2": "2", "2.5": "2.5", "3": "3" } }
+    );
+    if (variantUtilities) {
+      const variantClasses = {
+        [`.${prefix}-solid`]: {
+          "--ntd-variant": "solid"
+        },
+        [`.${prefix}-outline`]: {
+          "--ntd-variant": "outline"
+        },
+        [`.${prefix}-sharp`]: {
+          "--ntd-variant": "sharp"
+        },
+        [`.${prefix}-duotone`]: {
+          "--ntd-variant": "duotone"
+        },
+        [`.${prefix}-cutout`]: {
+          "--ntd-variant": "cutout"
+        },
+        [`.${prefix}-vivid`]: {
+          "--ntd-variant": "vivid"
+        }
+      };
+      addUtilities(variantClasses);
+    }
+    if (animations) {
+      const animationUtilities = {
+        // Spin animation
+        [`.${prefix}-spin`]: {
+          animation: `${prefix}-spin 1s linear infinite`
+        },
+        [`.${prefix}-spin-slow`]: {
+          animation: `${prefix}-spin 2s linear infinite`
+        },
+        [`.${prefix}-spin-fast`]: {
+          animation: `${prefix}-spin 0.5s linear infinite`
+        },
+        // Pulse animation
+        [`.${prefix}-pulse`]: {
+          animation: `${prefix}-pulse 2s ease-in-out infinite`
+        },
+        // Bounce animation
+        [`.${prefix}-bounce`]: {
+          animation: `${prefix}-bounce 1s ease-in-out infinite`
+        },
+        // Shake animation (for errors/alerts)
+        [`.${prefix}-shake`]: {
+          animation: `${prefix}-shake 0.5s ease-in-out`
+        },
+        // Fade in
+        [`.${prefix}-fade-in`]: {
+          animation: `${prefix}-fade-in 0.3s ease-out`
+        },
+        // Scale up
+        [`.${prefix}-scale-in`]: {
+          animation: `${prefix}-scale-in 0.2s ease-out`
+        },
+        // Wiggle (for attention)
+        [`.${prefix}-wiggle`]: {
+          animation: `${prefix}-wiggle 0.5s ease-in-out`
+        },
+        // Float (subtle up/down)
+        [`.${prefix}-float`]: {
+          animation: `${prefix}-float 3s ease-in-out infinite`
+        },
+        // Glow effect
+        [`.${prefix}-glow`]: {
+          filter: "drop-shadow(0 0 8px currentColor)",
+          animation: `${prefix}-glow 2s ease-in-out infinite alternate`
+        }
+      };
+      addUtilities(animationUtilities);
+      addComponents({
+        [`@keyframes ${prefix}-spin`]: {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(360deg)" }
+        },
+        [`@keyframes ${prefix}-pulse`]: {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.5" }
+        },
+        [`@keyframes ${prefix}-bounce`]: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-25%)" }
+        },
+        [`@keyframes ${prefix}-shake`]: {
+          "0%, 100%": { transform: "translateX(0)" },
+          "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-4px)" },
+          "20%, 40%, 60%, 80%": { transform: "translateX(4px)" }
+        },
+        [`@keyframes ${prefix}-fade-in`]: {
+          from: { opacity: "0" },
+          to: { opacity: "1" }
+        },
+        [`@keyframes ${prefix}-scale-in`]: {
+          from: { transform: "scale(0.8)", opacity: "0" },
+          to: { transform: "scale(1)", opacity: "1" }
+        },
+        [`@keyframes ${prefix}-wiggle`]: {
+          "0%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(-5deg)" },
+          "75%": { transform: "rotate(5deg)" }
+        },
+        [`@keyframes ${prefix}-float`]: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-10%)" }
+        },
+        [`@keyframes ${prefix}-glow`]: {
+          from: { filter: "drop-shadow(0 0 4px currentColor)" },
+          to: { filter: "drop-shadow(0 0 12px currentColor)" }
         }
-        // ─────────────────────────────────────────────────────────────────────
-        // ANIMATION UTILITIES
-        // ─────────────────────────────────────────────────────────────────────
-        if (animations) {
-            const animationUtilities = {
-                // Spin animation
-                [`.${prefix}-spin`]: {
-                    animation: `${prefix}-spin 1s linear infinite`,
-                },
-                [`.${prefix}-spin-slow`]: {
-                    animation: `${prefix}-spin 2s linear infinite`,
-                },
-                [`.${prefix}-spin-fast`]: {
-                    animation: `${prefix}-spin 0.5s linear infinite`,
-                },
-                // Pulse animation
-                [`.${prefix}-pulse`]: {
-                    animation: `${prefix}-pulse 2s ease-in-out infinite`,
-                },
-                // Bounce animation
-                [`.${prefix}-bounce`]: {
-                    animation: `${prefix}-bounce 1s ease-in-out infinite`,
-                },
-                // Shake animation (for errors/alerts)
-                [`.${prefix}-shake`]: {
-                    animation: `${prefix}-shake 0.5s ease-in-out`,
-                },
-                // Fade in
-                [`.${prefix}-fade-in`]: {
-                    animation: `${prefix}-fade-in 0.3s ease-out`,
-                },
-                // Scale up
-                [`.${prefix}-scale-in`]: {
-                    animation: `${prefix}-scale-in 0.2s ease-out`,
-                },
-                // Wiggle (for attention)
-                [`.${prefix}-wiggle`]: {
-                    animation: `${prefix}-wiggle 0.5s ease-in-out`,
-                },
-                // Float (subtle up/down)
-                [`.${prefix}-float`]: {
-                    animation: `${prefix}-float 3s ease-in-out infinite`,
-                },
-                // Glow effect
-                [`.${prefix}-glow`]: {
-                    filter: 'drop-shadow(0 0 8px currentColor)',
-                    animation: `${prefix}-glow 2s ease-in-out infinite alternate`,
-                },
-            };
-            addUtilities(animationUtilities);
-            // Keyframes for animations
-            addComponents({
-                [`@keyframes ${prefix}-spin`]: {
-                    from: { transform: 'rotate(0deg)' },
-                    to: { transform: 'rotate(360deg)' },
-                },
-                [`@keyframes ${prefix}-pulse`]: {
-                    '0%, 100%': { opacity: '1' },
-                    '50%': { opacity: '0.5' },
-                },
-                [`@keyframes ${prefix}-bounce`]: {
-                    '0%, 100%': { transform: 'translateY(0)' },
-                    '50%': { transform: 'translateY(-25%)' },
-                },
-                [`@keyframes ${prefix}-shake`]: {
-                    '0%, 100%': { transform: 'translateX(0)' },
-                    '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-4px)' },
-                    '20%, 40%, 60%, 80%': { transform: 'translateX(4px)' },
-                },
-                [`@keyframes ${prefix}-fade-in`]: {
-                    from: { opacity: '0' },
-                    to: { opacity: '1' },
-                },
-                [`@keyframes ${prefix}-scale-in`]: {
-                    from: { transform: 'scale(0.8)', opacity: '0' },
-                    to: { transform: 'scale(1)', opacity: '1' },
-                },
-                [`@keyframes ${prefix}-wiggle`]: {
-                    '0%, 100%': { transform: 'rotate(0deg)' },
-                    '25%': { transform: 'rotate(-5deg)' },
-                    '75%': { transform: 'rotate(5deg)' },
-                },
-                [`@keyframes ${prefix}-float`]: {
-                    '0%, 100%': { transform: 'translateY(0)' },
-                    '50%': { transform: 'translateY(-10%)' },
-                },
-                [`@keyframes ${prefix}-glow`]: {
-                    from: { filter: 'drop-shadow(0 0 4px currentColor)' },
-                    to: { filter: 'drop-shadow(0 0 12px currentColor)' },
-                },
-            });
-            // Hover animations
-            const hoverAnimations = {
-                [`.hover\\:${prefix}-bounce:hover`]: {
-                    animation: `${prefix}-bounce 0.5s ease-in-out`,
-                },
-                [`.hover\\:${prefix}-shake:hover`]: {
-                    animation: `${prefix}-shake 0.5s ease-in-out`,
-                },
-                [`.hover\\:${prefix}-wiggle:hover`]: {
-                    animation: `${prefix}-wiggle 0.5s ease-in-out`,
-                },
-                [`.hover\\:${prefix}-scale:hover`]: {
-                    transform: 'scale(1.1)',
-                    transition: 'transform 0.2s ease-out',
-                },
-                [`.hover\\:${prefix}-glow:hover`]: {
-                    filter: 'drop-shadow(0 0 8px currentColor)',
-                },
-            };
-            addUtilities(hoverAnimations);
+      });
+      const hoverAnimations = {
+        [`.hover\\:${prefix}-bounce:hover`]: {
+          animation: `${prefix}-bounce 0.5s ease-in-out`
+        },
+        [`.hover\\:${prefix}-shake:hover`]: {
+          animation: `${prefix}-shake 0.5s ease-in-out`
+        },
+        [`.hover\\:${prefix}-wiggle:hover`]: {
+          animation: `${prefix}-wiggle 0.5s ease-in-out`
+        },
+        [`.hover\\:${prefix}-scale:hover`]: {
+          transform: "scale(1.1)",
+          transition: "transform 0.2s ease-out"
+        },
+        [`.hover\\:${prefix}-glow:hover`]: {
+          filter: "drop-shadow(0 0 8px currentColor)"
         }
-        // ─────────────────────────────────────────────────────────────────────
-        // TRANSITION UTILITIES
-        // ─────────────────────────────────────────────────────────────────────
-        const transitionUtilities = {
-            [`.${prefix}-transition`]: {
-                transition: 'all 0.2s ease-out',
-            },
-            [`.${prefix}-transition-fast`]: {
-                transition: 'all 0.1s ease-out',
-            },
-            [`.${prefix}-transition-slow`]: {
-                transition: 'all 0.3s ease-out',
-            },
-            [`.${prefix}-transition-colors`]: {
-                transition: 'color 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out',
-            },
-        };
-        addUtilities(transitionUtilities);
-        // ─────────────────────────────────────────────────────────────────────
-        // ACCESSIBILITY UTILITIES
-        // ─────────────────────────────────────────────────────────────────────
-        const a11yUtilities = {
-            // Reduced motion support
-            [`@media (prefers-reduced-motion: reduce)`]: {
-                [`.${prefix}-spin, .${prefix}-spin-slow, .${prefix}-spin-fast, .${prefix}-pulse, .${prefix}-bounce, .${prefix}-shake, .${prefix}-wiggle, .${prefix}-float, .${prefix}-glow`]: {
-                    animation: 'none !important',
-                },
-            },
-            // Focus visible outline
-            [`.${prefix}-focus-visible:focus-visible`]: {
-                outline: '2px solid currentColor',
-                outlineOffset: '2px',
-            },
-            // High contrast mode
-            [`@media (forced-colors: active)`]: {
-                [`.${prefix}-high-contrast`]: {
-                    forcedColorAdjust: 'auto',
-                },
-            },
-        };
-        addComponents(a11yUtilities);
+      };
+      addUtilities(hoverAnimations);
+    }
+    const transitionUtilities = {
+      [`.${prefix}-transition`]: {
+        transition: "all 0.2s ease-out"
+      },
+      [`.${prefix}-transition-fast`]: {
+        transition: "all 0.1s ease-out"
+      },
+      [`.${prefix}-transition-slow`]: {
+        transition: "all 0.3s ease-out"
+      },
+      [`.${prefix}-transition-colors`]: {
+        transition: "color 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out"
+      }
     };
+    addUtilities(transitionUtilities);
+    const a11yUtilities = {
+      // Reduced motion support
+      [`@media (prefers-reduced-motion: reduce)`]: {
+        [`.${prefix}-spin, .${prefix}-spin-slow, .${prefix}-spin-fast, .${prefix}-pulse, .${prefix}-bounce, .${prefix}-shake, .${prefix}-wiggle, .${prefix}-float, .${prefix}-glow`]: {
+          animation: "none !important"
+        }
+      },
+      // Focus visible outline
+      [`.${prefix}-focus-visible:focus-visible`]: {
+        outline: "2px solid currentColor",
+        outlineOffset: "2px"
+      },
+      // High contrast mode
+      [`@media (forced-colors: active)`]: {
+        [`.${prefix}-high-contrast`]: {
+          forcedColorAdjust: "auto"
+        }
+      }
+    };
+    addComponents(a11yUtilities);
+  };
 };
-/**
- * Helper to flatten color palette for matchUtilities
- */
 function flattenColorPalette(colors) {
-    const result = {};
-    function flatten(obj, prefix = '') {
-        for (const [key, value] of Object.entries(obj)) {
-            if (typeof value === 'string') {
-                result[prefix ? `${prefix}-${key}` : key] = value;
-            }
-            else if (typeof value === 'object' && value !== null) {
-                flatten(value, prefix ? `${prefix}-${key}` : key);
-            }
-        }
+  const result = {};
+  function flatten(obj, prefix = "") {
+    for (const [key, value] of Object.entries(obj)) {
+      if (typeof value === "string") {
+        result[prefix ? `${prefix}-${key}` : key] = value;
+      } else if (typeof value === "object" && value !== null) {
+        flatten(value, prefix ? `${prefix}-${key}` : key);
+      }
     }
-    flatten(colors);
-    return result;
+  }
+  flatten(colors);
+  return result;
 }
-/**
- * Preset for common icon configurations
- */
 const ntdIconPreset = {
-    theme: {
-        extend: {
-            colors: {
-                ntd: {
-                    primary: '#3B82F6',
-                    secondary: '#64748B',
-                    accent: '#8B5CF6',
-                    success: '#22C55E',
-                    warning: '#F59E0B',
-                    error: '#EF4444',
-                    info: '#06B6D4',
-                },
-            },
-        },
-    },
+  theme: {
+    extend: {
+      colors: {
+        ntd: {
+          primary: "#3B82F6",
+          secondary: "#64748B",
+          accent: "#8B5CF6",
+          success: "#22C55E",
+          warning: "#F59E0B",
+          error: "#EF4444",
+          info: "#06B6D4"
+        }
+      }
+    }
+  }
+};
+export {
+  ntdIconPlugin,
+  ntdIconPreset
 };
-
-export { ntdIconPlugin, ntdIconPreset };