@nice2dev/icons 1.0.31 → 1.1.6

package/dist/esm/utilities.js

@@ -0,0 +1,384 @@
+import { useEffect, useState, useCallback, createElement, useSyncExternalStore } from 'react';
+
+/**
+ * @file utilities.ts
+ * @description Utility hooks and functions for @nice2dev/icons
+ *
+ * Provides:
+ * - useIcon hook for dynamic icon loading
+ * - useReducedMotion hook for accessibility
+ * - preloadIcons for performance optimization
+ * - Icon type guards and helpers
+ *
+ * @example
+ * ```tsx
+ * import { useIcon, useReducedMotion, preloadIcons } from '@nice2dev/icons/utilities';
+ *
+ * // Dynamic icon loading
+ * const { Icon, isLoading } = useIcon('NtdHome');
+ *
+ * // Respect user preference for reduced motion
+ * const prefersReducedMotion = useReducedMotion();
+ *
+ * // Preload icons for better performance
+ * await preloadIcons(['NtdHome', 'NtdSearch', 'NtdUser']);
+ * ```
+ *
+ * @version 1.0.0
+ * @since 2026-03
+ * @license MIT
+ */
+/* ────────────────────────────────────────────────────────────────────────────
+   ICON REGISTRY
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Global icon cache for dynamic loading
+ */
+const iconRegistry = new Map();
+/**
+ * Registers an icon in the global registry
+ */
+function registerIcon(name, component) {
+    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;
+}
+/**
+ * Clears the icon registry
+ */
+function clearIconRegistry() {
+    iconRegistry.clear();
+}
+/**
+ * Gets all registered icon names
+ */
+function getRegisteredIconNames() {
+    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;
+        }
+        // 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;
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   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);
+}
+/**
+ * Gets current reduced motion preference.
+ */
+function getReducedMotionSnapshot() {
+    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;
+}
+/**
+ * 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);
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   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);
+            }
+        }
+    }
+    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;
+    };
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   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,
+    };
+}
+/**
+ * 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',
+        };
+    }
+    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');
+}
+/**
+ * Checks if an icon name is valid.
+ */
+function isValidIconName(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);
+    useEffect(() => {
+        const loadIcons = async () => {
+            setIsLoading(true);
+            const names = configs.map((c) => c.name);
+            const loadedIcons = await preloadIcons(names);
+            setIcons(loadedIcons);
+            setIsLoading(false);
+        };
+        loadIcons();
+    }, [configs.map((c) => c.name).join(',')]);
+    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,
+    };
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   EXPORTS
+───────────────────────────────────────────────────────────────────────────── */
+var 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 };

package/dist/esm/variantProps.js

@@ -73,4 +73,3 @@ function toIconProps(props) {
 }
 
 export { isCutoutProps, isDuotoneProps, isFlatProps, isMiniProps, isOutlineProps, isRoundedProps, isSharpProps, isSolidProps, isThreeDProps, isVividProps, toIconProps };
-//# sourceMappingURL=variantProps.js.map

package/dist/esm/variantProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"variantProps.js","sources":["../../src/variantProps.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAkIH;;AAEgF;AAEhF;AACM,SAAU,YAAY,CAAC,KAAuB,EAAA;AAClD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO;AAClC;AAEA;AACM,SAAU,cAAc,CAAC,KAAuB,EAAA;AACpD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS;AACpC;AAEA;AACM,SAAU,cAAc,CAAC,KAAuB,EAAA;AACpD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS;AACpC;AAEA;AACM,SAAU,aAAa,CAAC,KAAuB,EAAA;AACnD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ;AACnC;AAEA;AACM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM;AACjC;AAEA;AACM,SAAU,YAAY,CAAC,KAAuB,EAAA;AAClD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO;AAClC;AAEA;AACM,SAAU,cAAc,CAAC,KAAuB,EAAA;AACpD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS;AACpC;AAEA;AACM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM;AACjC;AAEA;AACM,SAAU,aAAa,CAAC,KAAuB,EAAA;AACnD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,IAAI;AAC/B;AAEA;AACM,SAAU,YAAY,CAAC,KAAuB,EAAA;AAClD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO;AAClC;AAEA;;;AAGG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,OAAO,KAAqB;AAC9B;;;;"}
+{"version":3,"file":"variantProps.js","sources":["../../src/variantProps.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAkIH;;AAEgF;AAEhF;AACM,SAAU,YAAY,CAAC,KAAuB,EAAA;AAClD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO;AAClC;AAEA;AACM,SAAU,cAAc,CAAC,KAAuB,EAAA;AACpD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS;AACpC;AAEA;AACM,SAAU,cAAc,CAAC,KAAuB,EAAA;AACpD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS;AACpC;AAEA;AACM,SAAU,aAAa,CAAC,KAAuB,EAAA;AACnD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,QAAQ;AACnC;AAEA;AACM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM;AACjC;AAEA;AACM,SAAU,YAAY,CAAC,KAAuB,EAAA;AAClD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO;AAClC;AAEA;AACM,SAAU,cAAc,CAAC,KAAuB,EAAA;AACpD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS;AACpC;AAEA;AACM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM;AACjC;AAEA;AACM,SAAU,aAAa,CAAC,KAAuB,EAAA;AACnD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,IAAI;AAC/B;AAEA;AACM,SAAU,YAAY,CAAC,KAAuB,EAAA;AAClD,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,OAAO;AAClC;AAEA;;;AAGG;AACG,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,OAAO,KAAqB;AAC9B;;"}

package/dist/types/animationControls.d.ts

@@ -95,7 +95,7 @@ export interface AnimationControllerHandle {
  */
 export interface AnimationControllerProps {
     /** Child element to animate (icon component) */
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     /** Single animation or sequence config */
     animation: AnimationType | AnimationSequenceConfig;
     /** Auto-play on mount (default: false) */
@@ -122,7 +122,7 @@ export interface AnimationControllerProps {
  */
 export interface InteractiveIconProps {
     /** Child icon element */
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     /** Interactive animation config */
     config: InteractiveAnimationConfig;
     /** Disable interactions */

package/dist/types/client.d.ts

@@ -19,9 +19,9 @@ export { AnimationController, InteractiveIcon, useAnimationSequence, createAnima
 export type { AnimationStep, AnimationSequenceConfig, AnimationPlaybackState, AnimationTrigger, InteractiveAnimationConfig, AnimationControllerHandle, AnimationControllerProps, InteractiveIconProps, } from './animationControls';
 export { NiceIconPicker } from './NiceIconPicker';
 export type { NiceIconPickerProps, NiceIconPickerHandle, IconPickerEntry } from './NiceIconPicker';
-export { NtdIconMorph, NtdPathMorph, NtdMorphPair, useMorphState, } from './NtdIconMorph';
+export { NtdIconMorph, NtdPathMorph, NtdMorphPair, useMorphState } from './NtdIconMorph';
 export type { NtdIconMorphProps, NtdPathMorphProps, NtdMorphPairProps, MorphTrigger, } from './NtdIconMorph';
-export { NtdBadge, NtdStatusDot, NtdIconOverlay, NtdIconStack, } from './NtdIconBadge';
+export { NtdBadge, NtdStatusDot, NtdIconOverlay, NtdIconStack } from './NtdIconBadge';
 export type { NtdBadgeProps, NtdStatusDotProps, NtdIconOverlayProps, NtdIconStackProps, BadgePosition, StatusType, } from './NtdIconBadge';
 export { generateSmilAnimation, SmilAnimationWrapper, createSmilAnimationDef, isSmilSupported, SMIL_ANIMATION_TYPES, } from './smilAnimations';
 export type { SmilAnimationType, SmilAnimationConfig, SmilAnimationWrapperProps, } from './smilAnimations';

package/dist/types/icons/weather.d.ts

@@ -4,6 +4,13 @@ export declare const NtdRain: import("react").ForwardRefExoticComponent<import("
 export declare const NtdSnow: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdThunderstorm: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdWind: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * Teardrop with a pinched waist: the sides leave the tip almost vertically and
+ * only flare out low down (control points stay near the axis until y≈8), so the
+ * silhouette reads oval rather than "a circle with a spike". The bulb is an
+ * ellipse (rx 5.6 / ry 6.2), taller than it is wide — the previous r=8 circular
+ * arc was what made it look round and fat.
+ */
 export declare const NtdDroplet: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdThermometer: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdUmbrella: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/types/sharpen.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+/**
+ * Scale factor of the `mini` variant, about the icon centre. Shared by the
+ * client (`createIcon`) and RSC (`rsc`) renderers so the two stay identical.
+ *
+ * Thinning the stroke — what `mini` did on its own — is invisible on a filled
+ * shape, which left `mini` indistinguishable from `solid` for most of the set.
+ */
+export declare const MINI_SCALE = 0.875;
+/**
+ * Turns a rendered `solid` tree into its `sharp` equivalent: square line caps,
+ * mitered joins and zeroed corner radii, applied recursively.
+ *
+ * The `sharp` variant has no per-icon path data — it reuses `paths.solid` — so
+ * without this pass it would be pixel-identical to `solid` for every fill-based
+ * icon. Overriding rather than defaulting matters: some icons hardcode their
+ * own `strokeLinecap` / `strokeLinejoin`, and those must not survive here.
+ *
+ * Intrinsic (string-typed) elements only — fragments are traversed but never
+ * receive SVG attributes.
+ */
+export declare function sharpenTree(node: ReactNode): ReactNode;
+/**
+ * The mirror of {@link sharpenTree}: round line caps and joins, and `<rect>`
+ * corners rounded to {@link ROUND_RADIUS_RATIO} of the shorter side.
+ *
+ * `rounded` reuses `paths.solid` exactly like `sharp` does, so without this pass
+ * it is indistinguishable from `solid`. Same override-don't-default rule — icons
+ * that hardcode square caps have to lose them here.
+ *
+ * A rect whose `width`/`height` cannot be read keeps whatever radius it had:
+ * guessing a radius without knowing the box would deform the shape. Rectangles
+ * drawn as `<path>` are out of reach either way — the same limitation
+ * `sharpenTree` documents above.
+ */
+export declare function roundTree(node: ReactNode): ReactNode;
+/**
+ * Stroke width of the `wireframe` variant — a thin, uniform construction line,
+ * deliberately independent of the caller's `strokeWidth` so a wireframe grid
+ * draws at one consistent weight.
+ */
+export declare const WIREFRAME_STROKE = 1;
+/**
+ * Turns a rendered tree into its `wireframe` equivalent: every shape becomes an
+ * unfilled thin outline in the primary colour, keeping the interior construction
+ * that `outline` drops (creases, inner discs, duotone underlays).
+ *
+ * Fed from `paths.solid`, because that layer carries the whole construction —
+ * `outline` is the silhouette only. Per-shape `opacity` is cleared as well, so a
+ * faint duotone wash does not survive as a ghost line.
+ */
+export declare function wireTree(node: ReactNode, color: string): ReactNode;

package/dist/types/types.d.ts

@@ -26,6 +26,7 @@ export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'xxl' | 'xxxl'
  *
  * - `'solid'` — Filled icon shapes.
  * - `'outline'` — Stroked paths only, no fill.
+ * - `'wireframe'` — Thin uniform construction lines: every shape, including interior detail `outline` drops.
  * - `'duotone'` — Two-tone rendering with a filled background layer at reduced opacity.
  * - `'cutout'` — Knockout/cutout: colored background shape with icon silhouette cut out.
  * - `'flat'` — Deprecated alias for `'cutout'`.
@@ -45,7 +46,7 @@ export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'xxl' | 'xxxl'
  * <NtdHeart variant="vivid" primaryColor="#e74c3c" secondaryColor="#f472b6" /> // Colorful
  * ```
  */
-export type IconVariant = 'solid' | 'outline' | 'duotone' | 'cutout' | 'flat' | 'sharp' | 'rounded' | 'mini' | '3d' | 'vivid';
+export type IconVariant = 'solid' | 'outline' | 'wireframe' | 'duotone' | 'cutout' | 'flat' | 'sharp' | 'rounded' | 'mini' | '3d' | 'vivid';
 /**
  * Shape of the background for the `'cutout'` variant.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/icons",
-  "version": "1.0.31",
+  "version": "1.1.6",
   "description": "Beautiful, lightweight, multi-color SVG icon library for React with animations",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -52,7 +52,7 @@
       "import": "./dist/esm/utilities.js",
       "require": "./dist/cjs/utilities.js"
     },
-    "./styles.css": "./dist/animations.css"
+    "./styles.css": "./dist/esm/nicetodev-icons.css"
   },
   "bin": {
     "ntd-icons": "./bin/ntd-icons.mjs"
@@ -106,34 +106,34 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@rollup/plugin-commonjs": "^28.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.0.0",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/addon-vitest": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@chromatic-com/storybook": "^5.3.1",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
     "jsdom": "^29.0.0",
-    "playwright": "^1.58.2",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "rollup": "^4.24.0",
+    "playwright": "^1.62.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "rollup": "^4.63.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^10.2.19",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.0",
-    "vite": "^6.0.0",
-    "vitest": "^4.1.0",
-    "chromatic": "^11.25.0",
+    "storybook": "^10.6.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vitest": "^4.1.11",
+    "chromatic": "^18.7.2",
     "conventional-changelog-cli": "^5.0.0",
-    "conventional-changelog-angular": "^8.0.0"
+    "conventional-changelog-angular": "^9.4.0"
   }
 }