@nice2dev/icons 1.2.0 → 1.2.2

package/dist/esm/NiceDesktopIconExporter.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { useState, useMemo, useCallback } from 'react';
 
 /* ══════════════════════════════════════════════════════════════════════════════
@@ -624,28 +625,27 @@ Note: iconutil is only available on macOS.
  * ```
  */
 const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { config, setConfig, icons, isExporting, progress, exportAll, downloadAll, downloadSingle, } = useDesktopIconExporter(icon, initialConfig);
     const handleExport = async () => {
         await exportAll();
         onExport === null || onExport === void 0 ? void 0 : onExport(icons);
     };
     const IconComponent = icon;
-    return (jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsx("h3", { children: "Preview" }), jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsx("div", { style: {
+    return (jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsx("h3", { children: t('desktopIconExporter.preview', 'Preview') }), jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsx("div", { className: "nice-desktop-icon-exporter__preview-box", style: {
                                         width: Math.min(size, 128),
                                         height: Math.min(size, 128),
                                         backgroundColor: config.backgroundColor || '#f0f0f0',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        borderRadius: 4,
-                                    }, children: jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsx("h3", { children: "Configuration" }), jsxs("label", { children: ["Icon Name:", jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxs("label", { children: ["Fill Color:", jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxs("label", { children: ["Background:", jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: "Transparent" })] }), jsxs("label", { children: ["Padding: ", Math.round(config.padding * 100), "%", jsx("input", { type: "range", min: "0", max: "0.3", step: "0.01", value: config.padding, onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) })) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), "Windows (.ico)"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), "macOS (.iconset)"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), "Linux (hicolor)"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), "HiDPI/Retina (@2x, @3x)"] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsx("h4", { children: "Sizes:" }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
+                                    }, children: jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsx("h3", { children: t('desktopIconExporter.configuration', 'Configuration') }), jsxs("label", { children: [t('desktopIconExporter.iconName', 'Icon Name:'), jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxs("label", { children: [t('desktopIconExporter.fillColor', 'Fill Color:'), jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxs("label", { children: [t('desktopIconExporter.background', 'Background:'), jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: t('desktopIconExporter.transparent', 'Transparent') })] }), jsxs("label", { children: [t('desktopIconExporter.padding', 'Padding: {padding}%').replace('{padding}', String(Math.round(config.padding * 100))), jsx("input", { type: "range", min: "0", max: "0.3", step: "0.01", value: config.padding, onChange: (e) => setConfig((c) => ({ ...c, padding: parseFloat(e.target.value) })) })] }), jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), t('desktopIconExporter.windowsIco', 'Windows (.ico)')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), t('desktopIconExporter.macosIconset', 'macOS (.iconset)')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), t('desktopIconExporter.linuxHicolor', 'Linux (hicolor)')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), t('desktopIconExporter.hidpiRetina2x3x', 'HiDPI/Retina (@2x, @3x)')] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsx("h4", { children: t('desktopIconExporter.sizes', 'Sizes:') }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
                                             setConfig((c) => ({
                                                 ...c,
                                                 sizes: e.target.checked
                                                     ? [...c.sizes, size].sort((a, b) => a - b)
                                                     : c.sizes.filter((s) => s !== size),
                                             }));
-                                        } }), label] }, size)))] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename, style: { maxWidth: 64, maxHeight: 64 } }), jsx("span", { children: exportedIcon.filename }), jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
+                                        } }), label] }, size)))] })] }), jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting
+                            ? t('desktopIconExporter.exporting', 'Exporting... {progress}%').replace('{progress}', String(Math.round(progress)))
+                            : t('desktopIconExporter.generateIcons', 'Generate Icons') }), jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: t('desktopIconExporter.downloadAllZip', 'Download All (ZIP)') })] }), icons.length > 0 && (jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsx("h3", { children: t('desktopIconExporter.generatedIcons', 'Generated Icons ({icons})').replace('{icons}', String(icons.length)) }), jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }), jsx("span", { children: exportedIcon.filename }), jsx("button", { onClick: () => downloadSingle(exportedIcon), children: t('desktopIconExporter.download', 'Download') })] }, exportedIcon.filename))) })] }))] }));
 };
 
 export { DESKTOP_ICON_SIZES, LINUX_HICOLOR_DIRS, NiceDesktopIconExporter, RETINA_VARIANTS, useDesktopIconExporter };

package/dist/esm/NiceFaviconGenerator.js

@@ -1,5 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { useState, useCallback } from 'react';
+import { NtdDownload } from './icons/actions.js';
 
 /* ══════════════════════════════════════════════════════════════════════════════
    Constants
@@ -222,6 +224,7 @@ function useFaviconGenerator(icon, fill = '#1e1e1e', initialConfig) {
  * Favicon generator component for creating all favicon variants.
  */
 function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenerate, className = '', }) {
+    const { t } = useNiceTranslation();
     const { config, setConfig, assets, isGenerating, generate, downloadAll, downloadSingle, getManifestJson, getHtmlTags, } = useFaviconGenerator(icon, fill, manifestConfig);
     const [activeTab, setActiveTab] = useState('preview');
     const handleGenerate = async () => {
@@ -230,10 +233,12 @@ function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenera
             onGenerate(assets, getManifestJson());
         }
     };
-    return (jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.section, children: [jsx("h3", { style: styles.sectionTitle, children: "Manifest Configuration" }), jsxs("div", { style: styles.formGrid, children: [jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "App Name" }), jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Short Name" }), jsx("input", { type: "text", value: config.shortName, onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Theme Color" }), jsx("input", { type: "color", value: config.themeColor, onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Background Color" }), jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Display Mode" }), jsxs("select", { value: config.display, onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })), style: styles.input, children: [jsx("option", { value: "standalone", children: "Standalone" }), jsx("option", { value: "fullscreen", children: "Fullscreen" }), jsx("option", { value: "minimal-ui", children: "Minimal UI" }), jsx("option", { value: "browser", children: "Browser" })] })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: "Start URL" }), jsx("input", { type: "text", value: config.startUrl, onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })), style: styles.input })] })] })] }), jsxs("div", { style: styles.actions, children: [jsx("button", { onClick: handleGenerate, disabled: isGenerating, style: {
+    return (jsxs("div", { className: `nice-favicon-generator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.section, children: [jsx("h3", { style: styles.sectionTitle, children: t('faviconGenerator.manifestConfiguration', 'Manifest Configuration') }), jsxs("div", { style: styles.formGrid, children: [jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.appName', 'App Name') }), jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.shortName', 'Short Name') }), jsx("input", { type: "text", value: config.shortName, onChange: (e) => setConfig((c) => ({ ...c, shortName: e.target.value })), style: styles.input })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.themeColor', 'Theme Color') }), jsx("input", { type: "color", value: config.themeColor, onChange: (e) => setConfig((c) => ({ ...c, themeColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.backgroundColor', 'Background Color') }), jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })), style: styles.colorInput })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.displayMode', 'Display Mode') }), jsxs("select", { value: config.display, onChange: (e) => setConfig((c) => ({ ...c, display: e.target.value })), style: styles.input, children: [jsx("option", { value: "standalone", children: t('faviconGenerator.standalone', 'Standalone') }), jsx("option", { value: "fullscreen", children: t('faviconGenerator.fullscreen', 'Fullscreen') }), jsx("option", { value: "minimal-ui", children: t('faviconGenerator.minimalUi', 'Minimal UI') }), jsx("option", { value: "browser", children: t('faviconGenerator.browser', 'Browser') })] })] }), jsxs("div", { style: styles.formGroup, children: [jsx("label", { style: styles.label, children: t('faviconGenerator.startUrl', 'Start URL') }), jsx("input", { type: "text", value: config.startUrl, onChange: (e) => setConfig((c) => ({ ...c, startUrl: e.target.value })), style: styles.input })] })] })] }), jsxs("div", { style: styles.actions, children: [jsx("button", { onClick: handleGenerate, disabled: isGenerating, style: {
                             ...styles.button,
                             ...(isGenerating ? styles.buttonDisabled : styles.buttonPrimary),
-                        }, children: isGenerating ? 'Generating...' : 'Generate Favicons' }), assets.length > 0 && (jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: "Download All" }))] }), assets.length > 0 && (jsxs("div", { style: styles.section, children: [jsxs("div", { style: styles.tabs, children: [jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: "Preview" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: "HTML Tags" })] }), activeTab === 'preview' && (jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxs("div", { style: styles.assetCard, children: [jsx("div", { style: styles.assetPreview, children: jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxs("div", { style: styles.assetInfo, children: [jsx("span", { style: styles.assetName, children: asset.filename }), jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, children: "\u2193" })] }, asset.filename))) })), activeTab === 'manifest' && jsx("pre", { style: styles.codeBlock, children: getManifestJson() }), activeTab === 'html' && jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })] })), jsxs("div", { style: styles.reference, children: [jsx("h4", { style: styles.referenceTitle, children: "Favicon Sizes Reference" }), jsxs("table", { style: styles.table, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { style: styles.th, children: "File" }), jsx("th", { style: styles.th, children: "Size" }), jsx("th", { style: styles.th, children: "Purpose" })] }) }), jsx("tbody", { children: FAVICON_SIZES.map((f) => (jsxs("tr", { children: [jsxs("td", { style: styles.td, children: [f.name, ".", f.format] }), jsxs("td", { style: styles.td, children: [f.size, "x", f.size] }), jsx("td", { style: styles.td, children: f.purpose })] }, f.name))) })] })] })] }));
+                        }, children: isGenerating
+                            ? t('faviconGenerator.generating', 'Generating...')
+                            : t('faviconGenerator.generateFavicons', 'Generate Favicons') }), assets.length > 0 && (jsx("button", { onClick: downloadAll, style: { ...styles.button, ...styles.buttonSecondary }, children: t('faviconGenerator.downloadAll', 'Download All') }))] }), assets.length > 0 && (jsxs("div", { style: styles.section, children: [jsxs("div", { style: styles.tabs, children: [jsx("button", { style: { ...styles.tab, ...(activeTab === 'preview' ? styles.tabActive : {}) }, onClick: () => setActiveTab('preview'), children: t('faviconGenerator.preview', 'Preview') }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'manifest' ? styles.tabActive : {}) }, onClick: () => setActiveTab('manifest'), children: "manifest.json" }), jsx("button", { style: { ...styles.tab, ...(activeTab === 'html' ? styles.tabActive : {}) }, onClick: () => setActiveTab('html'), children: t('faviconGenerator.htmlTags', 'HTML Tags') })] }), activeTab === 'preview' && (jsx("div", { style: styles.assetGrid, children: assets.map((asset) => (jsxs("div", { style: styles.assetCard, children: [jsx("div", { style: styles.assetPreview, children: jsx("img", { src: asset.dataUrl, alt: asset.filename, style: { maxWidth: '64px', maxHeight: '64px' } }) }), jsxs("div", { style: styles.assetInfo, children: [jsx("span", { style: styles.assetName, children: asset.filename }), jsxs("span", { style: styles.assetSize, children: [asset.size, "x", asset.size] }), jsx("span", { style: styles.assetPurpose, children: asset.purpose })] }), jsx("button", { onClick: () => downloadSingle(asset), style: styles.downloadBtn, "aria-label": t('faviconGenerator.download', 'Download {filename}').replace('{filename}', String(asset.filename)), children: jsx(NtdDownload, { size: 14, variant: "outline" }) })] }, asset.filename))) })), activeTab === 'manifest' && jsx("pre", { style: styles.codeBlock, children: getManifestJson() }), activeTab === 'html' && jsx("pre", { style: styles.codeBlock, children: getHtmlTags() })] })), jsxs("div", { style: styles.reference, children: [jsx("h4", { style: styles.referenceTitle, children: t('faviconGenerator.faviconSizesReference', 'Favicon Sizes Reference') }), jsxs("table", { style: styles.table, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { style: styles.th, children: t('faviconGenerator.file', 'File') }), jsx("th", { style: styles.th, children: t('faviconGenerator.size', 'Size') }), jsx("th", { style: styles.th, children: t('faviconGenerator.purpose', 'Purpose') })] }) }), jsx("tbody", { children: FAVICON_SIZES.map((f) => (jsxs("tr", { children: [jsxs("td", { style: styles.td, children: [f.name, ".", f.format] }), jsxs("td", { style: styles.td, children: [f.size, "x", f.size] }), jsx("td", { style: styles.td, children: f.purpose })] }, f.name))) })] })] })] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/esm/NiceIconPicker.js

@@ -1,17 +1,19 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useMemo, useEffect } from 'react';
+import { useNiceTranslation } from '@nice2dev/ui-core';
+import { forwardRef, useState, useRef, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { NtdSearch, NtdCheck } from './icons/actions.js';
+import { NtdGrid } from './icons/files.js';
+import { NtdInbox } from './icons/media.js';
+import { NtdChevronDown } from './icons/navigation.js';
+import { NtdStar, NtdClock } from './icons/ui.js';
 
 const MAX_HISTORY_ITEMS = 20;
-/* ─── Chevron SVG ─── */
-const Chevron = () => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "6 9 12 15 18 9" }) }));
-/* ─── Search SVG ─── */
-const SearchIcon = () => (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "11", cy: "11", r: "8" }), jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }));
-/* ─── Star SVG (favorites) ─── */
-const StarIcon = ({ filled }) => (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }));
-/* ─── Clock SVG (history) ─── */
-const ClockIcon = () => (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12 6 12 12 16 14" })] }));
-/* ─── Check SVG (multi-select) ─── */
-const CheckIcon = () => (jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+/* ─── Small icons: the package's own (until 1.2.0 these were pasted SVGs) ─── */
+const Chevron = () => jsx(NtdChevronDown, { size: 12, variant: "outline" });
+const SearchIcon = () => jsx(NtdSearch, { size: 14, variant: "outline" });
+const StarIcon = ({ filled }) => (jsx(NtdStar, { size: 12, variant: filled ? 'solid' : 'outline' }));
+const ClockIcon = () => jsx(NtdClock, { size: 12, variant: "outline" });
+const CheckIcon = () => jsx(NtdCheck, { size: 10, variant: "outline" });
 /* ─── localStorage helpers ─── */
 function loadFromStorage(key, fallback) {
     if (typeof window === 'undefined') {
@@ -68,8 +70,9 @@ function saveToStorage(key, value) {
  * }
  * ```
  */
-const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder = 'Select icon…', variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
+const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder, variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
     var _a;
+    const { t } = useNiceTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [search, setSearch] = useState('');
     const [activeCategory, setActiveCategory] = useState(null);
@@ -83,13 +86,7 @@ const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null,
     const [history, setHistory] = useState(() => loadFromStorage(historyKey, []));
     // Multi-select state (internal when uncontrolled)
     const [internalValues, setInternalValues] = useState([]);
-    const selectedValues = multiSelect
-        ? values.length > 0
-            ? values
-            : internalValues
-        : value
-            ? [value]
-            : [];
+    const selectedValues = useMemo(() => (multiSelect ? (values.length > 0 ? values : internalValues) : value ? [value] : []), [multiSelect, values, internalValues, value]);
     const rootRef = useRef(null);
     const searchInputRef = useRef(null);
     /* ─── Favorites helpers ─── */
@@ -391,19 +388,27 @@ const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null,
             if (selectedEntries.length === 1) {
                 return readableName(selectedEntries[0].name);
             }
-            return `${selectedEntries.length} icons selected`;
+            return t('iconPicker.iconsSelected', '{count} icons selected').replace('{count}', String(selectedEntries.length));
         }
-        return selectedEntry ? readableName(selectedEntry.name) : placeholder;
-    }, [multiSelect, selectedEntries, selectedEntry, placeholder]);
-    return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' open' : ''}${disabled ? ' disabled' : ''}${multiSelect ? ' multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })] })) }), jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }), isOpen && (jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search icons\u2026", value: search, onChange: (e) => setSearch(e.target.value), "aria-label": "Search icons" })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: "All" }), showFavorites && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: "Favorites", children: [jsx(StarIcon, { filled: true }), " Favorites", favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: "Recently used", children: [jsx(ClockIcon, {}), " Recent"] })), allCategories.map((cat) => (jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: "\u2205" }), activeCategory === '__favorites__'
-                                    ? 'No favorites yet. Click the star icon to add.'
+        return selectedEntry
+            ? readableName(selectedEntry.name)
+            : (placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…'));
+    }, [multiSelect, selectedEntries, selectedEntry, placeholder, t]);
+    return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsx(NtdGrid, { size: 16, variant: "outline" })) }), jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }), isOpen && (jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), jsx("input", { ref: searchInputRef, type: "text", placeholder: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: t('iconPicker.all', 'All') }), showFavorites && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: t('iconPicker.favorites', 'Favorites'), children: [jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: jsx(NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
+                                    ? t('iconPicker.noFavoritesYetClickThe', 'No favorites yet. Click the star icon to add.')
                                     : activeCategory === '__history__'
-                                        ? 'No recent icons.'
-                                        : 'No icons found'] })) : (jsxs(Fragment, { children: [virtualized && visibleRange.start > 0 && (jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsx("div", { className: "ntd-picker-category-label", children: category })), jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
+                                        ? t('iconPicker.noRecentIcons', 'No recent icons.')
+                                        : t('iconPicker.noIconsFound', 'No icons found')] })) : (jsxs(Fragment, { children: [virtualized && visibleRange.start > 0 && (jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsx("div", { className: "ntd-picker-category-label", children: category })), jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
                                                 const isSelected = selectedValues.includes(entry.name);
                                                 const isFavorite = favorites.includes(entry.name);
-                                                return (jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' selected' : ''}${multiSelect ? ' multi-select' : ''}${enableDragAndDrop ? ' draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsx("span", { className: "ntd-picker-cell-check", children: jsx(CheckIcon, {}) })), showFavorites && (jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite ? 'Remove from favorites' : 'Add to favorites', children: jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
-                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxs("div", { className: "ntd-picker-footer", children: [jsxs("span", { className: "ntd-picker-count", children: [filtered.length, " icon", filtered.length !== 1 ? 's' : '', multiSelect && selectedValues.length > 0 && (jsxs(Fragment, { children: [" \u2022 ", selectedValues.length, " selected"] })), maxSelections && multiSelect && jsxs(Fragment, { children: [" (max ", maxSelections, ")"] })] }), clearable && selectedValues.length > 0 && (jsxs("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: ["Clear", multiSelect ? ' all' : ' selection'] })), multiSelect && (jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: "Done" }))] })] }))] }));
+                                                return (jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsx("span", { className: "ntd-picker-cell-check", children: jsx(CheckIcon, {}) })), showFavorites && (jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite
+                                                                ? t('iconPicker.removeFromFavorites', 'Remove from favorites')
+                                                                : t('iconPicker.addToFavorites', 'Add to favorites'), children: jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
+                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxs("div", { className: "ntd-picker-footer", children: [jsxs("span", { className: "ntd-picker-count", children: [(filtered.length === 1
+                                        ? t('iconPicker.iconCountOne', '{count} icon')
+                                        : t('iconPicker.iconCountMany', '{count} icons')).replace('{count}', String(filtered.length)), multiSelect && selectedValues.length > 0 && (jsxs(Fragment, { children: [' ', t('iconPicker.selected', '• {selectedValues} selected').replace('{selectedValues}', String(selectedValues.length))] })), maxSelections && multiSelect && (jsxs(Fragment, { children: [' ', t('iconPicker.max', '(max {maxSelections})').replace('{maxSelections}', String(maxSelections))] }))] }), clearable && selectedValues.length > 0 && (jsx("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: multiSelect
+                                    ? t('iconPicker.clearAll', 'Clear all')
+                                    : t('iconPicker.clearSelection', 'Clear selection') })), multiSelect && (jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: t('iconPicker.done', 'Done') }))] })] }))] }));
 });
 
 export { NiceIconPicker };

package/dist/esm/NiceIconPreview.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { useState, useMemo } from 'react';
 
 /* ══════════════════════════════════════════════════════════════════════════════
@@ -64,6 +65,7 @@ const animationCSS = `
  * Icon preview component with multiple modes and sizes.
  */
 function NiceIconPreview({ icon: Icon, iconName = 'Icon', mode = 'both', layout = 'grid', sizes = DEFAULT_SIZES, showAnimation = true, animations = DEFAULT_ANIMATIONS, fill, className = '', }) {
+    const { t } = useNiceTranslation();
     const [selectedAnimation, setSelectedAnimation] = useState(null);
     // Inject animation styles
     const styleSheet = useMemo(() => jsx("style", { dangerouslySetInnerHTML: { __html: animationCSS } }), []);
@@ -75,7 +77,7 @@ function NiceIconPreview({ icon: Icon, iconName = 'Icon', mode = 'both', layout
                 background: BACKGROUND_COLORS[bgMode],
             }, children: jsx(Icon, { size: size, fill: iconFill, className: selectedAnimation || undefined }) }));
     };
-    return (jsxs("div", { className: `nice-icon-preview ${className}`, style: styles.container, children: [styleSheet, jsxs("div", { style: styles.header, children: [jsx("h3", { style: styles.title, children: iconName }), showAnimation && (jsxs("div", { style: styles.animationControls, children: [jsx("span", { style: styles.animationLabel, children: "Animation:" }), jsxs("select", { value: selectedAnimation || '', onChange: (e) => setSelectedAnimation(e.target.value || null), style: styles.select, children: [jsx("option", { value: "", children: "None" }), animations.map((a) => (jsx("option", { value: a.className, children: a.name }, a.className)))] })] }))] }), layout === 'grid' && (jsxs("div", { style: styles.gridContainer, children: [(mode === 'light' || mode === 'both') && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: "Light Mode" }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'light', fill), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), (mode === 'dark' || mode === 'both') && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: "Dark Mode" }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'dark', fill), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), mode === 'gradient' && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: "Gradient Background" }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'gradient', '#ffffff'), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] }))] })), layout === 'list' && (jsx("div", { style: styles.listContainer, children: sizes.map((s) => (jsxs("div", { style: styles.listRow, children: [jsx("span", { style: styles.listLabel, children: s.label }), renderIcon(s.size, 'light', fill), renderIcon(s.size, 'dark', fill)] }, s.size))) })), layout === 'comparison' && (jsxs("div", { style: styles.comparisonContainer, children: [jsxs("div", { style: styles.comparisonSide, children: [jsx("h4", { style: styles.sectionTitle, children: "Light" }), jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.light }, children: jsx(Icon, { size: 96, fill: fill || '#1e1e1e', className: selectedAnimation || undefined }) })] }), jsxs("div", { style: styles.comparisonSide, children: [jsx("h4", { style: styles.sectionTitle, children: "Dark" }), jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.dark }, children: jsx(Icon, { size: 96, fill: fill || '#ffffff', className: selectedAnimation || undefined }) })] })] }))] }));
+    return (jsxs("div", { className: `nice-icon-preview ${className}`, style: styles.container, children: [styleSheet, jsxs("div", { style: styles.header, children: [jsx("h3", { style: styles.title, children: iconName }), showAnimation && (jsxs("div", { style: styles.animationControls, children: [jsx("span", { style: styles.animationLabel, children: t('iconPreview.animation', 'Animation:') }), jsxs("select", { value: selectedAnimation || '', onChange: (e) => setSelectedAnimation(e.target.value || null), style: styles.select, children: [jsx("option", { value: "", children: t('iconPreview.none', 'None') }), animations.map((a) => (jsx("option", { value: a.className, children: a.name }, a.className)))] })] }))] }), layout === 'grid' && (jsxs("div", { style: styles.gridContainer, children: [(mode === 'light' || mode === 'both') && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.lightMode', 'Light Mode') }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'light', fill), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), (mode === 'dark' || mode === 'both') && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.darkMode', 'Dark Mode') }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'dark', fill), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] })), mode === 'gradient' && (jsxs("div", { style: styles.section, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.gradientBackground', 'Gradient Background') }), jsx("div", { style: styles.sizeGrid, children: sizes.map((s) => (jsxs("div", { style: styles.sizeItem, children: [renderIcon(s.size, 'gradient', '#ffffff'), jsx("span", { style: styles.sizeLabel, children: s.label })] }, s.size))) })] }))] })), layout === 'list' && (jsx("div", { style: styles.listContainer, children: sizes.map((s) => (jsxs("div", { style: styles.listRow, children: [jsx("span", { style: styles.listLabel, children: s.label }), renderIcon(s.size, 'light', fill), renderIcon(s.size, 'dark', fill)] }, s.size))) })), layout === 'comparison' && (jsxs("div", { style: styles.comparisonContainer, children: [jsxs("div", { style: styles.comparisonSide, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.light', 'Light') }), jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.light }, children: jsx(Icon, { size: 96, fill: fill || '#1e1e1e', className: selectedAnimation || undefined }) })] }), jsxs("div", { style: styles.comparisonSide, children: [jsx("h4", { style: styles.sectionTitle, children: t('iconPreview.dark', 'Dark') }), jsx("div", { style: { ...styles.comparisonBox, background: BACKGROUND_COLORS.dark }, children: jsx(Icon, { size: 96, fill: fill || '#ffffff', className: selectedAnimation || undefined }) })] })] }))] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/esm/NiceIconSetCreator.js

@@ -1,34 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { useState, useMemo, useCallback } from 'react';
-import './icons/navigation.js';
 import { NtdCheck } from './icons/actions.js';
-import './icons/ui.js';
-import './icons/sustainability.js';
-import './icons/accessibility.js';
-import './icons/legal.js';
-import './icons/media.js';
-import './icons/files.js';
-import './icons/fun.js';
-import './icons/weather.js';
-import './icons/shapes.js';
-import './icons/business.js';
-import './icons/social.js';
-import './icons/devtech.js';
-import './icons/ecommerce.js';
-import './icons/fintech.js';
-import './icons/saas.js';
-import './icons/smarthome.js';
-import './icons/health.js';
-import './icons/brand.js';
-import './icons/gaming.js';
-import './icons/ai.js';
-import './icons/education.js';
-import './icons/science.js';
-import './icons/realestate.js';
-import './icons/food.js';
-import './icons/travel.js';
-import './icons/sports.js';
-import './icons/omniverk.js';
 
 /* ══════════════════════════════════════════════════════════════════════════════
    Constants
@@ -36,6 +9,7 @@ import './icons/omniverk.js';
 const DEFAULT_CONFIG = {
     name: 'MyIcons',
     packageName: '@myproject/icons',
+    // audit-allow: i18n — the generated package.json's default description, not UI copy
     description: 'Custom icon set',
     version: '1.0.0',
     author: '',
@@ -313,6 +287,7 @@ function useIconSetCreator(options) {
  * Icon Set Creator component for building custom icon packages.
  */
 function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectionChange: _onSelectionChange, onExport, className = '', }) {
+    const { t } = useNiceTranslation();
     const creator = useIconSetCreator({ icons, initialSelection, defaultConfig });
     const [searchQuery, setSearchQuery] = useState('');
     const [categoryFilter, setCategoryFilter] = useState('all');
@@ -366,11 +341,18 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
             URL.revokeObjectURL(url);
         });
     }, [creator]);
-    return (jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.header, children: [jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxs("div", { style: styles.content, children: [jsxs("div", { style: styles.configPanel, children: [jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Description" }), jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.fieldRow, children: [jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Version" }), jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "License" }), jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsx("option", { value: "esm", children: "ES Modules" }), jsx("option", { value: "cjs", children: "CommonJS" }), jsx("option", { value: "both", children: "Both" })] })] }), jsxs("div", { style: styles.checkboxGroup, children: [jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxs("div", { style: styles.exportActions, children: [jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxs("div", { style: styles.selectionPanel, children: [jsxs("div", { style: styles.selectionHeader, children: [jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxs("div", { style: styles.selectionActions, children: [jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxs("div", { onClick: () => creator.toggleIcon(item.originalName), style: {
+    return (jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxs("div", { style: styles.header, children: [jsx("h2", { style: styles.title, children: t('iconSetCreator.iconSetCreator', 'Icon Set Creator') }), jsx("div", { style: styles.stats, children: t('iconSetCreator.iconsSelected', '{selectedCount} / {items} icons selected')
+                            .replace('{selectedCount}', String(creator.selectedCount))
+                            .replace('{items}', String(creator.items.length)) })] }), jsxs("div", { style: styles.content, children: [jsxs("div", { style: styles.configPanel, children: [jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.configuration', 'Configuration') }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.setName', 'Set Name') }), jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.packageName', 'Package Name') }), jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.description', 'Description') }), jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.fieldRow, children: [jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.version', 'Version') }), jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.license', 'License') }), jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxs("div", { style: styles.field, children: [jsx("label", { style: styles.fieldLabel, children: t('iconSetCreator.exportFormat', 'Export Format') }), jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsx("option", { value: "esm", children: t('iconSetCreator.esModules', 'ES Modules') }), jsx("option", { value: "cjs", children: "CommonJS" }), jsx("option", { value: "both", children: t('iconSetCreator.both', 'Both') })] })] }), jsxs("div", { style: styles.checkboxGroup, children: [jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), t('iconSetCreator.generateTypescriptTypes', 'Generate TypeScript types')] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), t('iconSetCreator.treeShakingFriendly', 'Tree-shaking friendly')] }), jsxs("label", { style: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), t('iconSetCreator.includeMetadata', 'Include metadata')] })] }), jsxs("div", { style: styles.exportActions, children: [jsx("button", { onClick: handleExport, style: styles.primaryButton, children: t('iconSetCreator.previewExport', 'Preview Export') }), jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: t('iconSetCreator.downloadFiles', 'Download Files') })] })] }), jsxs("div", { style: styles.selectionPanel, children: [jsxs("div", { style: styles.selectionHeader, children: [jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t('iconSetCreator.searchIcons', 'Search icons...'), style: styles.searchInput }), jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsx("option", { value: "all", children: t('iconSetCreator.allCategories', 'All Categories') }), categories.map((cat) => (jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxs("div", { style: styles.selectionActions, children: [jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: t('iconSetCreator.selectAll', 'Select All') }), jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: t('iconSetCreator.deselectAll', 'Deselect All') })] }), jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxs("div", { role: "checkbox", "aria-checked": item.included, "aria-label": item.customName, tabIndex: 0, onClick: () => creator.toggleIcon(item.originalName), onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            creator.toggleIcon(item.originalName);
+                                        }
+                                    }, style: {
                                         ...styles.iconItem,
                                         borderColor: item.included ? '#3b82f6' : '#e5e7eb',
                                         backgroundColor: item.included ? '#eff6ff' : '#fff',
-                                    }, children: [jsx(item.icon, { size: 32 }), jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsx("span", { style: styles.checkmark, children: jsx(NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxs("div", { style: styles.previewPanel, children: [jsx("h3", { style: styles.sectionTitle, children: "Export Preview" }), previewOutput.map((file) => (jsxs("div", { style: styles.filePreview, children: [jsx("div", { style: styles.fileName, children: file.filename }), jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
+                                    }, children: [jsx(item.icon, { size: 32 }), jsx("span", { style: styles.iconName, children: item.customName }), item.included && (jsx("span", { style: styles.checkmark, children: jsx(NtdCheck, { size: 14 }) }))] }, item.originalName))) })] }), previewOutput && (jsxs("div", { style: styles.previewPanel, children: [jsx("h3", { style: styles.sectionTitle, children: t('iconSetCreator.exportPreview', 'Export Preview') }), previewOutput.map((file) => (jsxs("div", { style: styles.filePreview, children: [jsx("div", { style: styles.fileName, children: file.filename }), jsxs("pre", { style: styles.codePreview, children: [file.content.slice(0, 1000), file.content.length > 1000 && '...'] })] }, file.filename)))] }))] })] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/esm/NtdIconBadge.js

@@ -1,7 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useNiceTranslation } from '@nice2dev/ui-core';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { SIZE_MAP } from './types.js';
 
+/** The status in words for the accessible name — English defaults of `ntdIconBadge.statusValue.*`. */
+const STATUS_WORDS = {
+    online: 'online',
+    offline: 'offline',
+    busy: 'busy',
+    away: 'away',
+    dnd: 'do not disturb',
+    invisible: 'invisible',
+};
 /* ────────────────────────────────────────────────────────────────────────────
    CONSTANTS
 ───────────────────────────────────────────────────────────────────────────── */
@@ -185,8 +195,10 @@ function injectStyles() {
  * />
  * ```
  */
-const NtdBadge = forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero = false, position = 'top-right', variant = 'standard', badgeColor = '#ef4444', textColor = '#ffffff', animated = true, pulse = false, iconProps = {}, className, style, 'aria-label': ariaLabel, }, ref) => {
+const NtdBadge = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero = false, position = 'top-right', variant = 'standard', badgeColor = '#ef4444', textColor = '#ffffff', animated = true, pulse = false, iconProps = {}, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
+    const { t } = useNiceTranslation();
     const [isEntering, setIsEntering] = useState(false);
     const [countChanging, setCountChanging] = useState(false);
     const prevCountRef = useRef(count);
@@ -210,6 +222,7 @@ const NtdBadge = forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero =
             const timer = setTimeout(() => setIsEntering(false), 300);
             return () => clearTimeout(timer);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- the enter animation plays once, when the badge mounts
     }, []);
     const shouldShowBadge = count > 0 || showZero;
     const displayCount = count > maxCount ? `${maxCount}+` : count.toString();
@@ -230,13 +243,14 @@ const NtdBadge = forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero =
             width: resolvedSize,
             height: resolvedSize,
             ...style,
-        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge ? `${count} notifications` : undefined), children: [jsx(Icon, { ...iconProps }), shouldShowBadge && (jsx("span", { className: badgeClasses, style: {
+        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge
+            ? t('ntdIconBadge.notifications', '{count} notifications').replace('{count}', String(count))
+            : undefined), children: [jsx(Icon, { ...iconProps }), shouldShowBadge && (jsx("span", { className: badgeClasses, style: {
                     ...POSITION_STYLES[position],
                     backgroundColor: badgeColor,
                     color: textColor,
                 }, "aria-hidden": "true", children: variant !== 'dot' && displayCount }))] }));
-});
-NtdBadge.displayName = 'NtdBadge';
+}), { displayName: 'NtdBadge' });
 /* ────────────────────────────────────────────────────────────────────────────
    NtdStatusDot COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
@@ -255,8 +269,10 @@ NtdBadge.displayName = 'NtdBadge';
  * <NtdStatusDot icon={NtdUser} status="away" position="bottom-right" />
  * ```
  */
-const NtdStatusDot = forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
-    var _a, _b;
+const NtdStatusDot = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
+    var _a, _b, _c;
+    const { t } = useNiceTranslation();
     useEffect(() => {
         injectStyles();
     }, []);
@@ -276,15 +292,14 @@ const NtdStatusDot = forwardRef(({ icon: Icon, status, statusColor, position = '
             width: resolvedIconSize,
             height: resolvedIconSize,
             ...style,
-        }, role: "status", "aria-label": `Status: ${status}`, children: [jsx(Icon, { ...iconProps }), jsx("span", { className: dotClasses, style: {
+        }, role: "status", "aria-label": t('ntdIconBadge.status', 'Status: {status}').replace('{status}', t('ntdIconBadge.statusValue.' + status, (_c = STATUS_WORDS[status]) !== null && _c !== void 0 ? _c : status)), children: [jsx(Icon, { ...iconProps }), jsx("span", { className: dotClasses, style: {
                     ...POSITION_STYLES[position],
                     width: resolvedDotSize,
                     height: resolvedDotSize,
                     backgroundColor: resolvedColor,
                     color: resolvedColor,
                 }, "aria-hidden": "true" })] }));
-});
-NtdStatusDot.displayName = 'NtdStatusDot';
+}), { displayName: 'NtdStatusDot' });
 /* ────────────────────────────────────────────────────────────────────────────
    NtdIconOverlay COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
@@ -309,7 +324,8 @@ NtdStatusDot.displayName = 'NtdStatusDot';
  * />
  * ```
  */
-const NtdIconOverlay = forwardRef(({ icon: Icon, overlay, position = 'bottom-right', overlayScale = 0.5, overlayBg, circularBg = false, iconProps = {}, className, style, }, ref) => {
+const NtdIconOverlay = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ icon: Icon, overlay, position = 'bottom-right', overlayScale = 0.5, overlayBg, circularBg = false, iconProps = {}, className, style, }, ref) => {
     var _a, _b;
     useEffect(() => {
         injectStyles();
@@ -331,8 +347,7 @@ const NtdIconOverlay = forwardRef(({ icon: Icon, overlay, position = 'bottom-rig
                     height: overlaySize,
                     backgroundColor: overlayBg,
                 }, children: overlay })] }));
-});
-NtdIconOverlay.displayName = 'NtdIconOverlay';
+}), { displayName: 'NtdIconOverlay' });
 /**
  * Stack two icons for composite imagery.
  *
@@ -354,7 +369,8 @@ NtdIconOverlay.displayName = 'NtdIconOverlay';
  * />
  * ```
  */
-const NtdIconStack = forwardRef(({ base: BaseIcon, overlay: OverlayIcon, baseProps = {}, overlayProps = {}, position = 'bottom-right', overlayScale = 0.6, size, className, style, }, ref) => {
+const NtdIconStack = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ base: BaseIcon, overlay: OverlayIcon, baseProps = {}, overlayProps = {}, position = 'bottom-right', overlayScale = 0.6, size, className, style, }, ref) => {
     var _a, _b, _c;
     const resolvedSize = size
         ? typeof size === 'number'
@@ -371,7 +387,6 @@ const NtdIconStack = forwardRef(({ base: BaseIcon, overlay: OverlayIcon, basePro
         }, children: [jsx(BaseIcon, { ...baseProps, size: resolvedSize }), jsx("div", { className: "ntd-icon-overlay", style: {
                     ...POSITION_STYLES[position],
                 }, children: jsx(OverlayIcon, { ...overlayProps, size: overlaySize }) })] }));
-});
-NtdIconStack.displayName = 'NtdIconStack';
+}), { displayName: 'NtdIconStack' });
 
 export { NtdBadge, NtdIconOverlay, NtdIconStack, NtdStatusDot };