@nice2dev/icons 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @nice2dev/icons — Changelog
 
+## 1.1.6
+
+No changes in this release.
+
 ## 1.1.5
 
 No changes in this release.

package/dist/cjs/NiceDesktopIconExporter.js

@@ -655,4 +655,3 @@ exports.LINUX_HICOLOR_DIRS = LINUX_HICOLOR_DIRS;
 exports.NiceDesktopIconExporter = NiceDesktopIconExporter;
 exports.RETINA_VARIANTS = RETINA_VARIANTS;
 exports.useDesktopIconExporter = useDesktopIconExporter;
-//# sourceMappingURL=NiceDesktopIconExporter.js.map

package/dist/cjs/NiceFaviconGenerator.js

@@ -426,4 +426,3 @@ const styles = {
 
 exports.NiceFaviconGenerator = NiceFaviconGenerator;
 exports.useFaviconGenerator = useFaviconGenerator;
-//# sourceMappingURL=NiceFaviconGenerator.js.map

package/dist/cjs/NiceIconEditor.js

@@ -455,4 +455,3 @@ const styles = {
 
 exports.NiceIconEditor = NiceIconEditor;
 exports.useIconEditor = useIconEditor;
-//# sourceMappingURL=NiceIconEditor.js.map

package/dist/cjs/NiceIconPicker.js

@@ -409,4 +409,3 @@ const NiceIconPicker = React.forwardRef(function NiceIconPicker({ icons, value =
 });
 
 exports.NiceIconPicker = NiceIconPicker;
-//# sourceMappingURL=NiceIconPicker.js.map

package/dist/cjs/NiceIconPreview.js

@@ -195,4 +195,3 @@ const styles = {
 };
 
 exports.NiceIconPreview = NiceIconPreview;
-//# sourceMappingURL=NiceIconPreview.js.map

package/dist/cjs/NiceIconSetCreator.js

@@ -565,4 +565,3 @@ const styles = {
 
 exports.NiceIconSetCreator = NiceIconSetCreator;
 exports.useIconSetCreator = useIconSetCreator;
-//# sourceMappingURL=NiceIconSetCreator.js.map

package/dist/cjs/NtdIconBadge.js

@@ -380,4 +380,3 @@ exports.NtdBadge = NtdBadge;
 exports.NtdIconOverlay = NtdIconOverlay;
 exports.NtdIconStack = NtdIconStack;
 exports.NtdStatusDot = NtdStatusDot;
-//# sourceMappingURL=NtdIconBadge.js.map

package/dist/cjs/NtdIconMorph.js

@@ -393,4 +393,3 @@ exports.NtdIconMorph = NtdIconMorph;
 exports.NtdMorphPair = NtdMorphPair;
 exports.NtdPathMorph = NtdPathMorph;
 exports.useMorphState = useMorphState;
-//# sourceMappingURL=NtdIconMorph.js.map

package/dist/cjs/NtdStateMorph.js

@@ -175,4 +175,3 @@ function useStateMorph(states, initialState, options) {
 
 exports.NtdStateMorph = NtdStateMorph;
 exports.useStateMorph = useStateMorph;
-//# sourceMappingURL=NtdStateMorph.js.map

package/dist/cjs/advancedIconSearch.js

@@ -576,4 +576,3 @@ exports.registerExtendedIcon = registerExtendedIcon;
 exports.toggleFavorite = toggleFavorite;
 exports.tokenizeQuery = tokenizeQuery;
 exports.useAdvancedIconSearch = useAdvancedIconSearch;
-//# sourceMappingURL=advancedIconSearch.js.map

package/dist/cjs/animationControls.js

@@ -690,4 +690,3 @@ exports.createClickAnimation = createClickAnimation;
 exports.createHoverAnimation = createHoverAnimation;
 exports.createVisibilityAnimation = createVisibilityAnimation;
 exports.useAnimationSequence = useAnimationSequence;
-//# sourceMappingURL=animationControls.js.map

package/dist/cjs/client.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var animationControls = require('./animationControls.js');
+var NiceIconPicker = require('./NiceIconPicker.js');
+var NtdIconMorph = require('./NtdIconMorph.js');
+var NtdIconBadge = require('./NtdIconBadge.js');
+var smilAnimations = require('./smilAnimations.js');
+
+
+
+exports.AnimationController = animationControls.AnimationController;
+exports.InteractiveIcon = animationControls.InteractiveIcon;
+exports.PRESET_INTERACTIONS = animationControls.PRESET_INTERACTIONS;
+exports.PRESET_SEQUENCES = animationControls.PRESET_SEQUENCES;
+exports.createAnimationSequence = animationControls.createAnimationSequence;
+exports.createClickAnimation = animationControls.createClickAnimation;
+exports.createHoverAnimation = animationControls.createHoverAnimation;
+exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
+exports.useAnimationSequence = animationControls.useAnimationSequence;
+exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
+exports.NtdIconMorph = NtdIconMorph.NtdIconMorph;
+exports.NtdMorphPair = NtdIconMorph.NtdMorphPair;
+exports.NtdPathMorph = NtdIconMorph.NtdPathMorph;
+exports.useMorphState = NtdIconMorph.useMorphState;
+exports.NtdBadge = NtdIconBadge.NtdBadge;
+exports.NtdIconOverlay = NtdIconBadge.NtdIconOverlay;
+exports.NtdIconStack = NtdIconBadge.NtdIconStack;
+exports.NtdStatusDot = NtdIconBadge.NtdStatusDot;
+exports.SMIL_ANIMATION_TYPES = smilAnimations.SMIL_ANIMATION_TYPES;
+exports.SmilAnimationWrapper = smilAnimations.SmilAnimationWrapper;
+exports.createSmilAnimationDef = smilAnimations.createSmilAnimationDef;
+exports.generateSmilAnimation = smilAnimations.generateSmilAnimation;
+exports.isSmilSupported = smilAnimations.isSmilSupported;

package/dist/cjs/createIcon.js

@@ -236,4 +236,3 @@ function createIcon(options) {
 }
 
 exports.createIcon = createIcon;
-//# sourceMappingURL=createIcon.js.map

package/dist/cjs/design-tokens.js

@@ -0,0 +1,459 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * @file design-tokens.ts
+ * @description Design Tokens Integration for @nice2dev/icons
+ *
+ * Provides Style Dictionary compatible design tokens for icon styling.
+ * Supports auto-generation from design systems and custom token sources.
+ *
+ * @example
+ * ```ts
+ * // Generate tokens for Style Dictionary
+ * import { generateIconTokens, createTokensConfig } from '@nice2dev/icons/design-tokens';
+ *
+ * const tokens = generateIconTokens({
+ *   prefix: 'ntd',
+ *   namespace: 'icon',
+ *   colorTokens: {
+ *     primary: '{color.brand.500}',
+ *     secondary: '{color.gray.400}',
+ *   },
+ * });
+ *
+ * // tokens.json output
+ * ```
+ *
+ * @version 1.0.0
+ * @since 2026-03
+ * @license MIT
+ */
+/* ────────────────────────────────────────────────────────────────────────────
+   DEFAULT TOKEN VALUES
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Default icon size tokens
+ */
+const DEFAULT_SIZE_TOKENS = {
+    xs: '0.75rem', // 12px
+    sm: '1rem', // 16px
+    md: '1.5rem', // 24px
+    lg: '2rem', // 32px
+    xl: '3rem', // 48px
+    '2xl': '4rem', // 64px
+};
+/**
+ * Default icon color tokens
+ */
+const DEFAULT_COLOR_TOKENS = {
+    primary: '#3b82f6', // Blue 500
+    secondary: '#64748b', // Slate 500
+    accent: '#8b5cf6', // Violet 500
+    success: '#22c55e', // Green 500
+    warning: '#f59e0b', // Amber 500
+    error: '#ef4444', // Red 500
+    info: '#06b6d4', // Cyan 500
+    muted: '#9ca3af', // Gray 400
+};
+/**
+ * Default stroke width tokens
+ */
+const DEFAULT_STROKE_TOKENS = {
+    thin: '1',
+    normal: '1.5',
+    medium: '2',
+    thick: '2.5',
+    bold: '3',
+};
+/**
+ * Default animation tokens
+ */
+const DEFAULT_ANIMATION_TOKENS = {
+    duration: {
+        instant: '0ms',
+        fast: '150ms',
+        normal: '300ms',
+        slow: '500ms',
+        slower: '1000ms',
+    },
+    easing: {
+        linear: 'linear',
+        easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+        easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+        easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    },
+};
+/* ────────────────────────────────────────────────────────────────────────────
+   TOKEN GENERATION
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Generates Style Dictionary compatible design tokens for icons.
+ *
+ * @param config - Token configuration
+ * @returns Token group object ready for Style Dictionary
+ *
+ * @example
+ * ```ts
+ * const tokens = generateIconTokens({
+ *   prefix: 'ntd',
+ *   colorTokens: {
+ *     primary: '{color.brand.500}',
+ *   },
+ * });
+ *
+ * // Output:
+ * // {
+ * //   ntd: {
+ * //     icon: {
+ * //       size: { md: { value: '1.5rem', type: 'dimension' } },
+ * //       color: { primary: { value: '{color.brand.500}', type: 'color' } },
+ * //     }
+ * //   }
+ * // }
+ * ```
+ */
+function generateIconTokens(config = {}) {
+    const { prefix = 'ntd', namespace = 'icon', colorTokens = {}, sizeTokens = {}, strokeTokens = {}, includeAnimations = true, includeVariants = true, } = config;
+    const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
+    const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
+    const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
+    const result = {
+        [prefix]: {
+            [namespace]: {
+                // Size tokens
+                size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value: typeof value === 'number' ? `${value}px` : value,
+                        type: 'dimension',
+                        description: `Icon size: ${key}`,
+                        $extensions: {
+                            'org.nice2dev.icons': {
+                                cssVariable: `--${prefix}-${namespace}-size-${key}`,
+                                tailwindClass: `${prefix}-${namespace}-${key}`,
+                            },
+                        },
+                    };
+                    return acc;
+                }, {}),
+                // Color tokens
+                color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value,
+                        type: 'color',
+                        description: `Icon color: ${key}`,
+                        $extensions: {
+                            'org.nice2dev.icons': {
+                                cssVariable: `--${prefix}-${namespace}-color-${key}`,
+                                tailwindClass: `${prefix}-${namespace}-${key}`,
+                            },
+                        },
+                    };
+                    return acc;
+                }, {}),
+                // Stroke tokens
+                stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value: String(value),
+                        type: 'number',
+                        description: `Icon stroke width: ${key}`,
+                        $extensions: {
+                            'org.nice2dev.icons': {
+                                cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
+                                tailwindClass: `${prefix}-${namespace}-stroke-${key}`,
+                            },
+                        },
+                    };
+                    return acc;
+                }, {}),
+                // Secondary opacity
+                opacity: {
+                    secondary: {
+                        value: '0.35',
+                        type: 'number',
+                        description: 'Secondary color opacity for duotone variant',
+                    },
+                },
+            },
+        },
+    };
+    // Add animation tokens
+    if (includeAnimations) {
+        result[prefix][namespace] = {
+            ...result[prefix][namespace],
+            animation: {
+                duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value,
+                        type: 'duration',
+                        description: `Animation duration: ${key}`,
+                    };
+                    return acc;
+                }, {}),
+                easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
+                    acc[key] = {
+                        value,
+                        type: 'cubicBezier',
+                        description: `Animation easing: ${key}`,
+                    };
+                    return acc;
+                }, {}),
+            },
+        };
+    }
+    // Add variant tokens
+    if (includeVariants) {
+        result[prefix][namespace] = {
+            ...result[prefix][namespace],
+            variant: {
+                solid: { value: 'solid', type: 'string', description: 'Filled icon variant' },
+                outline: { value: 'outline', type: 'string', description: 'Outlined icon variant' },
+                wireframe: {
+                    value: 'wireframe',
+                    type: 'string',
+                    description: 'Thin construction-line variant',
+                },
+                duotone: { value: 'duotone', type: 'string', description: 'Two-tone icon variant' },
+                cutout: {
+                    value: 'cutout',
+                    type: 'string',
+                    description: 'Knockout/cutout background variant',
+                },
+                sharp: { value: 'sharp', type: 'string', description: 'Sharp corners variant' },
+                rounded: { value: 'rounded', type: 'string', description: 'Rounded corners variant' },
+                mini: { value: 'mini', type: 'string', description: 'Compact small size variant' },
+                vivid: { value: 'vivid', type: 'string', description: 'Colorful multi-fill variant' },
+                '3d': { value: '3d', type: 'string', description: 'Extruded depth variant' },
+            },
+        };
+    }
+    return result;
+}
+/**
+ * Creates a Style Dictionary configuration for icon tokens.
+ *
+ * @param options - Configuration options
+ * @returns Style Dictionary config object
+ */
+function createStyleDictionaryConfig(options = {}) {
+    const { sourcePath = './tokens', outputPath = './dist/tokens', platforms = ['css', 'scss', 'js', 'json'], } = options;
+    const platformConfigs = {};
+    if (platforms.includes('css')) {
+        platformConfigs.css = {
+            transformGroup: 'css',
+            buildPath: `${outputPath}/css/`,
+            files: [
+                {
+                    destination: 'icon-tokens.css',
+                    format: 'css/variables',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    if (platforms.includes('scss')) {
+        platformConfigs.scss = {
+            transformGroup: 'scss',
+            buildPath: `${outputPath}/scss/`,
+            files: [
+                {
+                    destination: '_icon-tokens.scss',
+                    format: 'scss/variables',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    if (platforms.includes('js')) {
+        platformConfigs.js = {
+            transformGroup: 'js',
+            buildPath: `${outputPath}/js/`,
+            files: [
+                {
+                    destination: 'icon-tokens.js',
+                    format: 'javascript/module',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+                {
+                    destination: 'icon-tokens.d.ts',
+                    format: 'typescript/module-declarations',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    if (platforms.includes('json')) {
+        platformConfigs.json = {
+            transformGroup: 'js',
+            buildPath: `${outputPath}/json/`,
+            files: [
+                {
+                    destination: 'icon-tokens.json',
+                    format: 'json/nested',
+                    filter: { attributes: { category: 'ntd' } },
+                },
+            ],
+        };
+    }
+    return {
+        source: [`${sourcePath}/**/*.json`],
+        platforms: platformConfigs,
+    };
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   CSS GENERATION
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Generates CSS custom properties from icon tokens.
+ *
+ * @param tokens - Token group
+ * @param selector - CSS selector (default: ':root')
+ * @returns CSS string with custom properties
+ */
+function generateCSSVariables(tokens, selector = ':root') {
+    const variables = [];
+    function processTokens(obj, path = []) {
+        for (const [key, value] of Object.entries(obj)) {
+            const newPath = [...path, key];
+            if (typeof value === 'object' && value !== null) {
+                if ('value' in value && typeof value.value !== 'object') {
+                    // It's a token
+                    const token = value;
+                    const varName = `--${newPath.join('-')}`;
+                    variables.push(`  ${varName}: ${token.value};`);
+                }
+                else {
+                    // It's a nested group
+                    processTokens(value, newPath);
+                }
+            }
+        }
+    }
+    processTokens(tokens);
+    return `${selector} {\n${variables.join('\n')}\n}`;
+}
+/**
+ * Generates Tailwind CSS config from icon tokens.
+ *
+ * @param tokens - Token group
+ * @returns Tailwind config extend object
+ */
+function generateTailwindConfig(tokens) {
+    var _a;
+    const colors = {};
+    const spacing = {};
+    const strokeWidth = {};
+    function extractTokens(obj, type, prefix = '') {
+        for (const [key, value] of Object.entries(obj)) {
+            if (typeof value === 'object' && value !== null && 'value' in value) {
+                const token = value;
+                const tokenKey = prefix ? `${prefix}-${key}` : key;
+                if (token.type === 'color') {
+                    colors[tokenKey] = String(token.value);
+                }
+                else if (token.type === 'dimension') {
+                    spacing[tokenKey] = String(token.value);
+                }
+                else if (type === 'stroke') {
+                    strokeWidth[tokenKey] = String(token.value);
+                }
+            }
+            else if (typeof value === 'object' && value !== null) {
+                extractTokens(value, type, key);
+            }
+        }
+    }
+    // Navigate to the icon tokens
+    const iconTokens = (_a = tokens.ntd) === null || _a === void 0 ? void 0 : _a.icon;
+    if (iconTokens) {
+        if (iconTokens.color) {
+            extractTokens(iconTokens.color, 'color', 'icon');
+        }
+        if (iconTokens.size) {
+            extractTokens(iconTokens.size, 'size', 'icon');
+        }
+        if (iconTokens.stroke) {
+            extractTokens(iconTokens.stroke, 'stroke', 'icon');
+        }
+    }
+    return { colors, spacing, strokeWidth };
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   FIGMA TOKENS EXPORT
+───────────────────────────────────────────────────────────────────────────── */
+/**
+ * Converts icon tokens to Figma Tokens format.
+ * Compatible with the Figma Tokens plugin.
+ *
+ * @param tokens - Token group
+ * @returns Figma Tokens compatible object
+ */
+function toFigmaTokens(tokens) {
+    const figmaTokens = {};
+    function processTokens(obj, path = []) {
+        for (const [key, value] of Object.entries(obj)) {
+            const newPath = [...path, key];
+            if (typeof value === 'object' && value !== null) {
+                if ('value' in value && typeof value.value !== 'object') {
+                    const token = value;
+                    let currentObj = figmaTokens;
+                    for (let i = 0; i < newPath.length - 1; i++) {
+                        const part = newPath[i];
+                        if (!currentObj[part]) {
+                            currentObj[part] = {};
+                        }
+                        currentObj = currentObj[part];
+                    }
+                    currentObj[newPath[newPath.length - 1]] = {
+                        value: token.value,
+                        type: mapToFigmaType(token.type),
+                    };
+                }
+                else {
+                    processTokens(value, newPath);
+                }
+            }
+        }
+    }
+    processTokens(tokens);
+    return figmaTokens;
+}
+function mapToFigmaType(type) {
+    var _a;
+    const typeMap = {
+        color: 'color',
+        dimension: 'sizing',
+        number: 'number',
+        duration: 'other',
+        cubicBezier: 'other',
+        string: 'other',
+    };
+    return (_a = typeMap[type !== null && type !== void 0 ? type : 'other']) !== null && _a !== void 0 ? _a : 'other';
+}
+/* ────────────────────────────────────────────────────────────────────────────
+   EXPORTS
+───────────────────────────────────────────────────────────────────────────── */
+var designTokens = {
+    generateIconTokens,
+    createStyleDictionaryConfig,
+    generateCSSVariables,
+    generateTailwindConfig,
+    toFigmaTokens,
+    DEFAULT_SIZE_TOKENS,
+    DEFAULT_COLOR_TOKENS,
+    DEFAULT_STROKE_TOKENS,
+    DEFAULT_ANIMATION_TOKENS,
+};
+
+exports.DEFAULT_ANIMATION_TOKENS = DEFAULT_ANIMATION_TOKENS;
+exports.DEFAULT_COLOR_TOKENS = DEFAULT_COLOR_TOKENS;
+exports.DEFAULT_SIZE_TOKENS = DEFAULT_SIZE_TOKENS;
+exports.DEFAULT_STROKE_TOKENS = DEFAULT_STROKE_TOKENS;
+exports.createStyleDictionaryConfig = createStyleDictionaryConfig;
+exports.default = designTokens;
+exports.generateCSSVariables = generateCSSVariables;
+exports.generateIconTokens = generateIconTokens;
+exports.generateTailwindConfig = generateTailwindConfig;
+exports.toFigmaTokens = toFigmaTokens;

package/dist/cjs/figmaExport.js

@@ -296,4 +296,3 @@ exports.exportIconToDataUrl = exportIconToDataUrl;
 exports.exportIconToFigmaNode = exportIconToFigmaNode;
 exports.exportIconToSvgString = exportIconToSvgString;
 exports.generateFigmaPluginManifest = generateFigmaPluginManifest;
-//# sourceMappingURL=figmaExport.js.map

package/dist/cjs/figmaSync.js

@@ -340,4 +340,3 @@ class FigmaSyncManager {
 exports.FigmaSyncManager = FigmaSyncManager;
 exports.createFigmaSyncManager = createFigmaSyncManager;
 exports.diffIconSets = diffIconSets;
-//# sourceMappingURL=figmaSync.js.map