@nice2dev/icons 1.1.5 → 1.1.7

package/dist/esm/rsc.js

@@ -0,0 +1,201 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { sharpenTree, roundTree, wireTree, MINI_SCALE } from './sharpen.js';
+import { SIZE_MAP, SEMANTIC_COLOR_DEFAULTS, GRADIENT_PRESETS } from './types.js';
+
+/* ────────────────────────────────────────────────────────────────────────────
+   RSC-COMPATIBLE ICON FACTORY
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Creates a React Server Component compatible icon.
+ *
+ * Unlike the standard `createIcon`, this version:
+ * - Does NOT use React hooks (useId, useSyncExternalStore, etc.)
+ * - Does NOT support animations
+ * - Does NOT support automatic dark/light mode detection
+ * - IS fully streamable and SSR-safe
+ *
+ * @param options - Icon configuration
+ * @returns A React function component (not using forwardRef)
+ *
+ * @example
+ * ```tsx
+ * export const NtdHomeRSC = createIconRSC({
+ *   displayName: 'NtdHomeRSC',
+ *   paths: {
+ *     solid: ({ primaryColor }) => <path d="..." fill={primaryColor} />,
+ *     outline: ({ primaryColor, strokeWidth }) => <path d="..." stroke={primaryColor} />,
+ *     duotone: ({ primaryColor, secondaryColor }) => <path d="..." />,
+ *   },
+ * });
+ * ```
+ */
+function createIconRSC(options) {
+    const { displayName, viewBox = '0 0 24 24', paths } = options;
+    function IconRSC(props) {
+        var _a;
+        const { size = 'md', variant = 'solid', cutoutShape = 'rounded-square', primaryColor: primaryColorProp, secondaryColor: secondaryColorProp, accentColor: accentColorProp, secondaryOpacity = 0.35, strokeWidth = 1.5, gradient, gradientDirection = 135, color, rotate, flipX, flipY, scale, className, style, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, title, role = ariaLabel ? 'img' : 'presentation', 'data-testid': testId, } = props;
+        // Resolve size
+        const resolvedSize = typeof size === 'number' ? size : SIZE_MAP[size] || SIZE_MAP.md;
+        // Resolve colors with semantic color support
+        let primaryColor = primaryColorProp !== null && primaryColorProp !== void 0 ? primaryColorProp : 'currentColor';
+        const secondaryColor = secondaryColorProp !== null && secondaryColorProp !== void 0 ? secondaryColorProp : 'currentColor';
+        const accentColor = accentColorProp !== null && accentColorProp !== void 0 ? accentColorProp : primaryColor;
+        if (color && SEMANTIC_COLOR_DEFAULTS[color]) {
+            if (!primaryColorProp) {
+                primaryColor = SEMANTIC_COLOR_DEFAULTS[color];
+            }
+        }
+        // Resolve variant with fallback. `wireframe` always starts from `solid`
+        // (the full construction) — it is re-drawn mechanically, not authored.
+        const isCutout = variant === 'cutout' || variant === 'flat';
+        const pathRenderer = isCutout || variant === 'wireframe' ? paths.solid : ((_a = paths[variant]) !== null && _a !== void 0 ? _a : paths.solid);
+        // Build render props
+        const renderProps = {
+            primaryColor,
+            secondaryColor,
+            accentColor,
+            secondaryOpacity,
+            strokeWidth,
+        };
+        // Build transforms
+        const transforms = [];
+        if (rotate) {
+            transforms.push(`rotate(${rotate}deg)`);
+        }
+        if (flipX) {
+            transforms.push('scaleX(-1)');
+        }
+        if (flipY) {
+            transforms.push('scaleY(-1)');
+        }
+        if (scale && scale !== 1) {
+            transforms.push(`scale(${scale})`);
+        }
+        // Build gradient defs if needed
+        let gradientDefs = null;
+        let gradientId = null;
+        if (gradient && GRADIENT_PRESETS[gradient]) {
+            const colors = GRADIENT_PRESETS[gradient];
+            // Generate a deterministic ID based on displayName and gradient
+            gradientId = `${displayName}-${gradient}-grad`;
+            const x1 = Math.round(50 - 50 * Math.cos((gradientDirection * Math.PI) / 180));
+            const y1 = Math.round(50 - 50 * Math.sin((gradientDirection * Math.PI) / 180));
+            const x2 = Math.round(50 + 50 * Math.cos((gradientDirection * Math.PI) / 180));
+            const y2 = Math.round(50 + 50 * Math.sin((gradientDirection * Math.PI) / 180));
+            gradientDefs = (jsx("defs", { children: jsx("linearGradient", { id: gradientId, x1: `${x1}%`, y1: `${y1}%`, x2: `${x2}%`, y2: `${y2}%`, children: colors.map((color, i) => (jsx("stop", { offset: `${(i / (colors.length - 1)) * 100}%`, stopColor: color }, i))) }) }));
+            // Override primary color with gradient reference
+            renderProps.primaryColor = `url(#${gradientId})`;
+        }
+        // Final styles
+        const finalStyle = {
+            width: resolvedSize,
+            height: resolvedSize,
+            ...style,
+            ...(transforms.length > 0 && { transform: transforms.join(' ') }),
+        };
+        // Cutout mask ID (deterministic for SSR)
+        const cutoutMaskId = isCutout ? `${displayName}-cutout-mask` : null;
+        // Cutout shape renderer
+        const cutoutBg = isCutout
+            ? (() => {
+                const fill = renderProps.primaryColor !== 'currentColor'
+                    ? renderProps.secondaryColor
+                    : renderProps.primaryColor;
+                const mask = `url(#${cutoutMaskId})`;
+                switch (cutoutShape) {
+                    case 'circle':
+                        return jsx("circle", { cx: "12", cy: "12", r: "11", fill: fill, mask: mask });
+                    case 'square':
+                        return jsx("rect", { x: "1", y: "1", width: "22", height: "22", fill: fill, mask: mask });
+                    case 'hexagon':
+                        return (jsx("polygon", { points: "12,1 22.39,6.5 22.39,17.5 12,23 1.61,17.5 1.61,6.5", fill: fill, mask: mask }));
+                    case 'diamond':
+                        return jsx("polygon", { points: "12,1 23,12 12,23 1,12", fill: fill, mask: mask });
+                    case 'shield':
+                        return (jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5L12 1z", fill: fill, mask: mask }));
+                    case 'squircle':
+                        return (jsx("path", { d: "M12 1C5.5 1 1 5.5 1 8.5v7C1 18.5 5.5 23 12 23s11-4.5 11-7.5v-7C23 5.5 18.5 1 12 1z", fill: fill, mask: mask }));
+                    default:
+                        return jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "4", fill: fill, mask: mask });
+                }
+            })()
+            : null;
+        // Mirrors the client renderer in createIcon.tsx: `sharp` / `rounded` /
+        // `wireframe` / `mini` all reuse `paths.solid`, so each needs its own pass
+        // to be distinguishable.
+        const rendered = isCutout
+            ? cutoutBg
+            : variant === 'sharp'
+                ? sharpenTree(pathRenderer(renderProps))
+                : variant === 'rounded'
+                    ? roundTree(pathRenderer(renderProps))
+                    : variant === 'wireframe'
+                        ? wireTree(pathRenderer(renderProps), renderProps.primaryColor)
+                        : pathRenderer(renderProps);
+        const iconContent = variant === 'mini' ? (jsx("g", { transform: `translate(12 12) scale(${MINI_SCALE}) translate(-12 -12)`, children: rendered })) : (rendered);
+        return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", className: className, style: finalStyle, role: role, "aria-label": ariaLabel, "aria-hidden": ariaHidden !== null && ariaHidden !== void 0 ? ariaHidden : !ariaLabel, "data-testid": testId, children: [title && jsx("title", { children: title }), gradientDefs, isCutout && (jsx("defs", { children: jsxs("mask", { id: cutoutMaskId, children: [jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }), jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
+                                    ...renderProps,
+                                    primaryColor: 'black',
+                                    secondaryColor: 'black',
+                                    accentColor: 'black',
+                                }) })] }) })), iconContent] }));
+    }
+    IconRSC.displayName = displayName;
+    return IconRSC;
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   STREAMING-FRIENDLY UTILITIES
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Renders an icon to a static SVG string (for streaming/SSR).
+ * Useful for generating static assets or email templates.
+ */
+function renderIconToString(Icon, props = {}) {
+    var _a;
+    try {
+        // Import react-dom/server for SSR rendering
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const { renderToStaticMarkup } = require('react-dom/server');
+        const element = Icon(props);
+        return renderToStaticMarkup(element);
+    }
+    catch (_b) {
+        // Fallback: construct SVG manually
+        const { size = 'md', primaryColor = 'currentColor', variant: _variant = 'solid', className = '', } = props;
+        const sizeValue = (_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : (typeof size === 'number' ? size : 24);
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${sizeValue}" height="${sizeValue}" class="${className}" fill="${primaryColor}"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="${primaryColor}"></path></svg>`;
+    }
+}
+/**
+ * Type guard to check if a component is an RSC-compatible icon
+ */
+function isRSCIcon(component) {
+    return (typeof component === 'function' &&
+        'displayName' in component &&
+        typeof component.displayName === 'string' &&
+        component.displayName.endsWith('RSC'));
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   RSC ICON WRAPPER
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Creates an RSC version from an existing icon's path config.
+ * This allows creating RSC-compatible versions from standard icons.
+ *
+ * @example
+ * ```tsx
+ * import { NtdHome } from '@nice2dev/icons';
+ * import { wrapAsRSC } from '@nice2dev/icons/rsc';
+ *
+ * // Note: This requires access to the original path config
+ * const NtdHomeRSC = wrapAsRSC(NtdHome);
+ * ```
+ */
+function wrapAsRSC(originalPaths, displayName) {
+    return createIconRSC({
+        displayName: `${displayName}RSC`,
+        paths: originalPaths,
+    });
+}
+
+export { GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS, SIZE_MAP, createIconRSC, isRSCIcon, renderIconToString, wrapAsRSC };

package/dist/esm/sharpen.js

@@ -139,4 +139,3 @@ function wireTree(node, color) {
 }
 
 export { MINI_SCALE, WIREFRAME_STROKE, roundTree, sharpenTree, wireTree };
-//# sourceMappingURL=sharpen.js.map

package/dist/esm/smilAnimations.js

@@ -175,4 +175,3 @@ const SMIL_ANIMATION_TYPES = [
 ];
 
 export { SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported };
-//# sourceMappingURL=smilAnimations.js.map

package/dist/esm/tailwind-plugin.js

@@ -340,4 +340,3 @@ const ntdIconPreset = {
 };
 
 export { ntdIconPlugin, ntdIconPreset };
-//# sourceMappingURL=tailwind-plugin.js.map

package/dist/esm/types.js

@@ -77,4 +77,3 @@ const SIZE_MAP = {
 };
 
 export { GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS, SEMANTIC_COLOR_VARS, SIZE_MAP };
-//# sourceMappingURL=types.js.map

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/types/headless-ui.d.ts

@@ -107,11 +107,11 @@ export declare const SHADCN_ICON_SIZES: {
 export declare const SHADCN_COLOR_TOKENS: {
     readonly foreground: "hsl(var(--foreground))";
     readonly mutedForeground: "hsl(var(--muted-foreground))";
-    readonly primary: "hsl(var(--primary))";
+    readonly primary: "hsl(var(--nice-color-primary))";
     readonly primaryForeground: "hsl(var(--primary-foreground))";
     readonly secondary: "hsl(var(--secondary))";
     readonly secondaryForeground: "hsl(var(--secondary-foreground))";
-    readonly accent: "hsl(var(--accent))";
+    readonly accent: "hsl(var(--nice-color-accent))";
     readonly accentForeground: "hsl(var(--accent-foreground))";
     readonly destructive: "hsl(var(--destructive))";
     readonly destructiveForeground: "hsl(var(--destructive-foreground))";
@@ -337,11 +337,11 @@ declare const _default: {
     SHADCN_COLOR_TOKENS: {
         readonly foreground: "hsl(var(--foreground))";
         readonly mutedForeground: "hsl(var(--muted-foreground))";
-        readonly primary: "hsl(var(--primary))";
+        readonly primary: "hsl(var(--nice-color-primary))";
         readonly primaryForeground: "hsl(var(--primary-foreground))";
         readonly secondary: "hsl(var(--secondary))";
         readonly secondaryForeground: "hsl(var(--secondary-foreground))";
-        readonly accent: "hsl(var(--accent))";
+        readonly accent: "hsl(var(--nice-color-accent))";
         readonly accentForeground: "hsl(var(--accent-foreground))";
         readonly destructive: "hsl(var(--destructive))";
         readonly destructiveForeground: "hsl(var(--destructive-foreground))";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/icons",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "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"