@nice2dev/icons 1.1.10 → 1.2.1

package/dist/cjs/particleEffects.js

@@ -174,7 +174,8 @@ function drawParticle(ctx, p) {
 /* ────────────────────────────────────────────────────────────────────────────
    COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
-const NtdParticleIcon = React.forwardRef(({ icon: Icon, particle, trigger = 'click', active, size = 'md', iconProps, className, style, onEffectEnd, }, ref) => {
+const NtdParticleIcon = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.forwardRef(({ icon: Icon, particle, trigger = 'click', active, size = 'md', iconProps, className, style, onEffectEnd, }, ref) => {
     var _a;
     const containerRef = React.useRef(null);
     const canvasRef = React.useRef(null);
@@ -263,7 +264,14 @@ const NtdParticleIcon = React.forwardRef(({ icon: Icon, particle, trigger = 'cli
             height: resolvedSize,
             cursor: trigger === 'click' || trigger === 'hover' ? 'pointer' : undefined,
             ...style,
-        }, onClick: trigger === 'click' ? emit : undefined, onMouseEnter: trigger === 'hover' ? emit : undefined, children: [jsxRuntime.jsx(Icon, { size: size, ...iconProps }), jsxRuntime.jsx("canvas", { ref: canvasRef, width: canvasSize, height: canvasSize, style: {
+        }, onClick: trigger === 'click' ? emit : undefined, onKeyDown: trigger === 'click'
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    emit();
+                }
+            }
+            : undefined, role: trigger === 'click' ? 'button' : undefined, tabIndex: trigger === 'click' ? 0 : undefined, onMouseEnter: trigger === 'hover' ? emit : undefined, children: [jsxRuntime.jsx(Icon, { size: size, ...iconProps }), jsxRuntime.jsx("canvas", { ref: canvasRef, width: canvasSize, height: canvasSize, style: {
                     position: 'absolute',
                     top: -canvasOffset,
                     left: -canvasOffset,
@@ -271,7 +279,6 @@ const NtdParticleIcon = React.forwardRef(({ icon: Icon, particle, trigger = 'cli
                     height: canvasSize,
                     pointerEvents: 'none',
                 } })] }));
-});
-NtdParticleIcon.displayName = 'NtdParticleIcon';
+}), { displayName: 'NtdParticleIcon' });
 
 exports.NtdParticleIcon = NtdParticleIcon;

package/dist/cjs/resolver.js

@@ -70,6 +70,7 @@ const NAME_MAP = {
     'zoom-out': 'NtdZoomOut',
     undo: 'NtdUndo',
     redo: 'NtdRedo',
+    reply: 'NtdReply',
     link: 'NtdLink',
     login: 'NtdLogIn',
     logout: 'NtdLogOut',
@@ -89,6 +90,7 @@ const NAME_MAP = {
     image: 'NtdImage',
     'link-2': 'NtdLink',
     mail: 'NtdMail',
+    inbox: 'NtdInbox',
     phone: 'NtdPhone',
     user: 'NtdUser',
     users: 'NtdUsers',
@@ -98,6 +100,7 @@ const NAME_MAP = {
     bell: 'NtdBell',
     grip: 'NtdGrid',
     tag: 'NtdTag',
+    backspace: 'NtdBackspace',
     bookmark: 'NtdBookmark',
     flag: 'NtdFlag',
     globe: 'NtdGlobe',
@@ -115,6 +118,7 @@ const NAME_MAP = {
     camera: 'NtdCamera',
     video: 'NtdVideo',
     microphone: 'NtdMicrophone',
+    'microphone-off': 'NtdMicrophoneOff',
     music: 'NtdMusic',
     palette: 'NtdPalette',
     // Misc

package/dist/cjs/rsc.js

@@ -49,7 +49,7 @@ function createIconRSC(options) {
         }
         // Resolve variant with fallback. `wireframe` always starts from `solid`
         // (the full construction) — it is re-drawn mechanically, not authored.
-        const isCutout = variant === 'cutout' || variant === 'flat';
+        const isCutout = variant === 'cutout';
         const pathRenderer = isCutout || variant === 'wireframe' ? paths.solid : ((_a = paths[variant]) !== null && _a !== void 0 ? _a : paths.solid);
         // Build render props
         const renderProps = {

package/dist/cjs/variantProps.js

@@ -4,8 +4,8 @@
  * @file variantProps.ts
  * @description Discriminated unions and strict prop validation per icon variant.
  *
- * Provides narrowed prop types for each icon variant (solid, outline, duotone, flat,
- * sharp, rounded, mini, 3d) with variant-specific required/optional props.
+ * Provides narrowed prop types for each icon variant (solid, outline, duotone, cutout,
+ * sharp, rounded, mini, 3d, vivid) with variant-specific required/optional props.
  *
  * @example
  * ```tsx
@@ -42,10 +42,6 @@ function isDuotoneProps(props) {
 function isCutoutProps(props) {
     return props.variant === 'cutout';
 }
-/** @deprecated Use `isCutoutProps` instead. Narrows to `FlatIconProps` when `variant === 'flat'`. */
-function isFlatProps(props) {
-    return props.variant === 'flat';
-}
 /** Narrows to `SharpIconProps` when `variant === 'sharp'`. */
 function isSharpProps(props) {
     return props.variant === 'sharp';
@@ -76,7 +72,6 @@ function toIconProps(props) {
 
 exports.isCutoutProps = isCutoutProps;
 exports.isDuotoneProps = isDuotoneProps;
-exports.isFlatProps = isFlatProps;
 exports.isMiniProps = isMiniProps;
 exports.isOutlineProps = isOutlineProps;
 exports.isRoundedProps = isRoundedProps;

package/dist/esm/NiceDesktopIconExporter.js

@@ -630,14 +630,10 @@ const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = ''
         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: "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) => {
                                             setConfig((c) => ({
                                                 ...c,
@@ -645,7 +641,7 @@ const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = ''
                                                     ? [...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 ? `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 }), jsx("span", { children: exportedIcon.filename }), jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
 };
 
 export { DESKTOP_ICON_SIZES, LINUX_HICOLOR_DIRS, NiceDesktopIconExporter, RETINA_VARIANTS, useDesktopIconExporter };

package/dist/esm/NiceFaviconGenerator.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
+import { NtdDownload } from './icons/actions.js';
 
 /* ══════════════════════════════════════════════════════════════════════════════
    Constants
@@ -233,7 +234,7 @@ function NiceFaviconGenerator({ icon, fill = '#1e1e1e', manifestConfig, onGenera
     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: {
                             ...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 ? '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, "aria-label": `Download ${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: "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))) })] })] })] }));
 }
 /* ══════════════════════════════════════════════════════════════════════════════
    Styles

package/dist/esm/NiceIconPicker.js

@@ -1,17 +1,18 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useMemo, useEffect } from 'react';
+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,7 +69,7 @@ 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 = '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) {
     var _a;
     const [isOpen, setIsOpen] = useState(false);
     const [search, setSearch] = useState('');
@@ -83,13 +84,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 ─── */
@@ -395,14 +390,14 @@ const NiceIconPicker = forwardRef(function NiceIconPicker({ icons, value = null,
         }
         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__'
+    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: "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 ? ' ntd-picker-tab--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__' ? ' ntd-picker-tab--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__' ? ' ntd-picker-tab--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 ? ' 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__'
                                     ? '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) => {
                                                 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));
+                                                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 ? '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" }))] })] }))] }));
 });
 

package/dist/esm/NiceIconSetCreator.js

@@ -1,34 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 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
@@ -366,7 +338,12 @@ 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: "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", { 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',

package/dist/esm/NtdIconBadge.js

@@ -185,7 +185,8 @@ 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 [isEntering, setIsEntering] = useState(false);
     const [countChanging, setCountChanging] = useState(false);
@@ -235,8 +236,7 @@ const NtdBadge = forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero =
                     backgroundColor: badgeColor,
                     color: textColor,
                 }, "aria-hidden": "true", children: variant !== 'dot' && displayCount }))] }));
-});
-NtdBadge.displayName = 'NtdBadge';
+}), { displayName: 'NtdBadge' });
 /* ────────────────────────────────────────────────────────────────────────────
    NtdStatusDot COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
@@ -255,7 +255,8 @@ 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) => {
+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;
     useEffect(() => {
         injectStyles();
@@ -283,8 +284,7 @@ const NtdStatusDot = forwardRef(({ icon: Icon, status, statusColor, position = '
                     backgroundColor: resolvedColor,
                     color: resolvedColor,
                 }, "aria-hidden": "true" })] }));
-});
-NtdStatusDot.displayName = 'NtdStatusDot';
+}), { displayName: 'NtdStatusDot' });
 /* ────────────────────────────────────────────────────────────────────────────
    NtdIconOverlay COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
@@ -309,7 +309,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 +332,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 +354,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 +372,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 };

package/dist/esm/NtdIconMorph.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import { SIZE_MAP } from './types.js';
 import { NtdCheck, NtdMinus, NtdPlus } from './icons/actions.js';
 import { NtdPause, NtdPlay } from './icons/media.js';
 import { NtdClose, NtdChevronDown, NtdChevronUp, NtdMenu } from './icons/navigation.js';
 import { NtdMoon, NtdSun } from './icons/ui.js';
+import { SIZE_MAP } from './types.js';
 
 /* ────────────────────────────────────────────────────────────────────────────
    EASING FUNCTIONS
@@ -145,7 +145,8 @@ const morphStyles = `
  * />
  * ```
  */
-const NtdIconMorph = forwardRef(({ from: FromIcon, to: ToIcon, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', variant = 'solid', primaryColor = 'currentColor', secondaryColor, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
+const NtdIconMorph = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ from: FromIcon, to: ToIcon, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', variant = 'solid', primaryColor = 'currentColor', secondaryColor, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
     // Internal state for self-managed triggers
     const [internalMorphed, setInternalMorphed] = useState(false);
@@ -237,9 +238,13 @@ const NtdIconMorph = forwardRef(({ from: FromIcon, to: ToIcon, morphed: controll
             height: resolvedSize,
             cursor: trigger !== 'none' ? 'pointer' : undefined,
             ...style,
-        }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, tabIndex: trigger === 'focus' ? 0 : undefined, role: trigger !== 'none' ? 'button' : undefined, "aria-label": ariaLabel, "aria-pressed": trigger !== 'none' ? morphed : undefined, children: [jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--inactive' : 'ntd-morph-icon--active'}`, style: transitionStyle, "aria-hidden": morphed, children: jsx(FromIcon, { ...iconProps }) }), jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--active' : 'ntd-morph-icon--inactive'}`, style: transitionStyle, "aria-hidden": !morphed, children: jsx(ToIcon, { ...iconProps }) })] }));
-});
-NtdIconMorph.displayName = 'NtdIconMorph';
+        }, onClick: handleClick, onKeyDown: (e) => {
+            if (trigger === 'click' && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                handleClick();
+            }
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, tabIndex: trigger === 'focus' || trigger === 'click' ? 0 : undefined, role: trigger !== 'none' ? 'button' : undefined, "aria-label": ariaLabel, "aria-pressed": trigger !== 'none' ? morphed : undefined, children: [jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--inactive' : 'ntd-morph-icon--active'}`, style: transitionStyle, "aria-hidden": morphed, children: jsx(FromIcon, { ...iconProps }) }), jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--active' : 'ntd-morph-icon--inactive'}`, style: transitionStyle, "aria-hidden": !morphed, children: jsx(ToIcon, { ...iconProps }) })] }));
+}), { displayName: 'NtdIconMorph' });
 /**
  * Path-based morphing using CSS transitions on SVG path data.
  * Requires browser support for CSS `d` property transitions (modern browsers).
@@ -254,7 +259,8 @@ NtdIconMorph.displayName = 'NtdIconMorph';
  * />
  * ```
  */
-const NtdPathMorph = forwardRef(({ pair, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', color = 'currentColor', strokeWidth = 2, filled = false, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
+const NtdPathMorph = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ pair, morphed: controlledMorphed, trigger = 'none', duration = 300, easing = 'ease-in-out', size = 'md', color = 'currentColor', strokeWidth = 2, filled = false, onMorphStart, onMorphEnd, className, style, 'aria-label': ariaLabel, }, ref) => {
     var _a, _b;
     const [internalMorphed, setInternalMorphed] = useState(false);
     const morphed = controlledMorphed !== null && controlledMorphed !== void 0 ? controlledMorphed : internalMorphed;
@@ -310,8 +316,12 @@ const NtdPathMorph = forwardRef(({ pair, morphed: controlledMorphed, trigger = '
         }, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: trigger !== 'none' ? 'button' : 'img', "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${pair} icon`, "aria-pressed": trigger !== 'none' ? morphed : undefined, children: jsx("path", { d: currentPath, fill: filled ? color : 'none', stroke: filled ? 'none' : color, strokeWidth: filled ? 0 : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style: {
                 transition: `d ${duration}ms ${resolvedEasing}, fill ${duration}ms ${resolvedEasing}, stroke ${duration}ms ${resolvedEasing}`,
             } }) }));
-});
-NtdPathMorph.displayName = 'NtdPathMorph';
+}), { displayName: 'NtdPathMorph' });
+/* ────────────────────────────────────────────────────────────────────────────
+   PREDEFINED MORPH PAIR COMPONENT
+   Convenience wrapper for common morphing patterns
+───────────────────────────────────────────────────────────────────────────── */
+// Import icons lazily for predefined pairs
 const ICON_PAIRS = {
     'menu-close': { from: NtdMenu, to: NtdClose },
     'play-pause': { from: NtdPlay, to: NtdPause },
@@ -335,15 +345,15 @@ const ICON_PAIRS = {
  * <NtdMorphPair pair="sun-moon" trigger="click" />
  * ```
  */
-const NtdMorphPair = forwardRef(({ pair, ...props }, ref) => {
+const NtdMorphPair = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ pair, ...props }, ref) => {
     const iconPair = ICON_PAIRS[pair];
     if (!iconPair) {
         console.warn(`NtdMorphPair: Unknown pair "${pair}"`);
         return null;
     }
     return jsx(NtdIconMorph, { ref: ref, from: iconPair.from, to: iconPair.to, ...props });
-});
-NtdMorphPair.displayName = 'NtdMorphPair';
+}), { displayName: 'NtdMorphPair' });
 /**
  * Hook for managing morph state with animation awareness.
  *

package/dist/esm/NtdStateMorph.js

@@ -41,7 +41,8 @@ function interpolateSegments(from, to, t) {
 /* ────────────────────────────────────────────────────────────────────────────
    COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
-const NtdStateMorph = forwardRef(({ states, currentState, fills, strokes, strokeWidth = 2, duration = 300, easing: _easing = 'ease-in-out', size = 'md', viewBox = '0 0 24 24', className, style, 'aria-label': ariaLabel, onTransitionEnd, }, ref) => {
+const NtdStateMorph = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ forwardRef(({ states, currentState, fills, strokes, strokeWidth = 2, duration = 300, easing: _easing = 'ease-in-out', size = 'md', viewBox = '0 0 24 24', className, style, 'aria-label': ariaLabel, onTransitionEnd, }, ref) => {
     var _a;
     const svgRef = useRef(null);
     const animRef = useRef(0);
@@ -109,8 +110,7 @@ const NtdStateMorph = forwardRef(({ states, currentState, fills, strokes, stroke
         getSvgElement: () => svgRef.current,
     }));
     return (jsx("svg", { ref: svgRef, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, width: resolvedSize, height: resolvedSize, fill: "none", className: className, style: style, "aria-label": ariaLabel, role: ariaLabel ? 'img' : undefined, children: jsx("path", { d: currentPath, fill: currentFill, stroke: currentStroke, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
-});
-NtdStateMorph.displayName = 'NtdStateMorph';
+}), { displayName: 'NtdStateMorph' });
 /* ────────────────────────────────────────────────────────────────────────────
    COLOR INTERPOLATION
 ───────────────────────────────────────────────────────────────────────────── */

package/dist/esm/animationControls.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 /* ────────────────────────────────────────────────────────────────────────────
    2. HELPER FUNCTIONS
@@ -237,7 +237,7 @@ function useAnimationSequence(config) {
  * </AnimationController>
  * ```
  */
-const AnimationController = forwardRef(function AnimationController(props, ref) {
+const AnimationController = /* @__PURE__ */ forwardRef(function AnimationController(props, ref) {
     const { children, animation, autoPlay = false, playState: externalPlayState, onStart, onEnd, onStepChange, onPause, onResume, className, style, } = props;
     // Determine if sequence or single animation
     const isSequence = isSequenceConfig(animation);
@@ -422,7 +422,7 @@ const AnimationController = forwardRef(function AnimationController(props, ref)
  * </InteractiveIcon>
  * ```
  */
-const InteractiveIcon = forwardRef(function InteractiveIcon(props, ref) {
+const InteractiveIcon = /* @__PURE__ */ forwardRef(function InteractiveIcon(props, ref) {
     const { children, config, disabled = false, onInteractionStart, onInteractionEnd, className, style, } = props;
     const [isActive, setIsActive] = useState(false);
     const [isLeaving, setIsLeaving] = useState(false);
@@ -536,7 +536,14 @@ const InteractiveIcon = forwardRef(function InteractiveIcon(props, ref) {
             display: 'inline-flex',
             cursor: disabled ? 'default' : config.trigger === 'click' ? 'pointer' : undefined,
             ...style,
-        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, tabIndex: config.trigger === 'focus' ? 0 : undefined, role: config.trigger === 'click' ? 'button' : undefined, children: animatedChild }));
+        }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick, onKeyDown: handleClick
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleClick();
+                }
+            }
+            : undefined, onFocus: handleFocus, onBlur: handleBlur, tabIndex: config.trigger === 'focus' || config.trigger === 'click' ? 0 : undefined, role: config.trigger === 'click' ? 'button' : undefined, children: animatedChild }));
 });
 /* ────────────────────────────────────────────────────────────────────────────
    6. UTILITY FUNCTIONS