@nice2dev/icons 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @nice2dev/icons — Changelog
 
+## 1.2.1
+
+### Patch Changes
+
+- 8c82c30: 1.2.1 — the decisions that waited since 1.2.0, and the debts the CI gates were holding. One API
+  change, agreed: `NiceIconSuggestorAI` suggests Nice icons only. Two stylesheets to import if you use
+  the packages: `@nice2dev/social/style.css`, `@nice2dev/ui-science/style.css`. Upgrade notes:
+  `documentation/omniverk/OMNIVERK_UPGRADE_1.2.1.md`.
+
+  **Tree-shaking.** An import from a package no longer brings the whole package. Module-level
+  statements that may have a side effect — a `displayName` assigned after each component (now
+  `Object.assign` inside `/* @__PURE__ */`, or under a development check for plain functions),
+  unannotated `forwardRef` / `memo` / `createContext` / icon-factory calls, spreads, registries filled
+  at import, `<style>` tags injected at import, a direct `eval` in ui-math — are gone. One import from
+  each of 53 packages: 5066.5 kB → 1171.6 kB (`@nice2dev/ui` 1928.2 kB → 12.9 kB, icon packs 48–275 kB
+  → 1.6–2.6 kB). `defaultViewRegistry` has the Nice\* input controls from the start, each loading its
+  module on first render; sixteen controls add their styles to `<head>` on first render.
+
+  **Dead code.** 405 source files no entry point imported (never on npm) are deleted;
+  `NiceClipboardStack` (`@nice2dev/ui`) and `NiceSampleBrowser` (`@nice2dev/ui-audio`), finished and
+  documented, are exported.
+
+  **ui-mobile draws Nice icons.** New peer `@nice2dev/icons ^1.2.0`; `TabIcons`, `DrawerIcons`,
+  `HeaderIcons`, the `NiceSwipeActions` presets and the `NiceInfiniteScroll` states are `Ntd*` icons
+  instead of pasted `<svg>`, simple glyphs are CSS marks. `@nice2dev/icons` adds `NtdReply` and
+  `NtdInbox`; an icon no longer throws without `window.matchMedia`.
+
+  **`NiceIconSuggestorAI` (breaking, agreed).** `AIIconLibrary` is `'nice'`; `svgPath` and `unicode`
+  left `AISuggestedIcon`; the preview is a `<NiceIcon>`, "Copy SVG" is "Copy JSX".
+
+  **Peer ranges.** Every internal `@nice2dev/*` peer is `^1.2.0` (was as wide as `^1.0.20`), except
+  `@nice2dev/icons ^1.2.1` where a package draws an icon new in 1.2.1: ui-mobile (`NtdReply`,
+  `NtdInbox`), ui-audio (`NtdMicrophoneOff`) and ui-security (`NtdBackspace`). ui-security, licensing
+  (`^1.2.0`) and templates (`^1.2.0`) gain the `@nice2dev/icons` peer: their glyph icons (`⌫`, `←`,
+  `→`, `↑`, `↓`) are Nice icons now. `@nice2dev/icons` adds `NtdBackspace`.
+
+  **Class names inside components.** 834 class names in library stylesheets had no `nice-` prefix
+  (`.tab-button`, `.status-badge`, `.selected`, …) and styled every element of that name on the page.
+  They follow `nice-{block}__{element}--{modifier}` now — no change on screen. The class theme hooks
+  next to `[data-theme]` on seven controls (`dark` on the AI chart / data grid / code and HTML
+  editors / form builder, `light-theme` on `NiceMAM` and `NiceVideoAnnotator`) are `nice-dark` /
+  `nice-light`; `NiceLowPowerMode` marks `<html>` with `nice-lpm-no-animations` /
+  `nice-lpm-reduced-quality`; the `NiceVideoEditor` of `@nice2dev/ui-video` styles its elements under
+  `nice-video-studio`, so they no longer collide with the `NiceVideoEditor` of `@nice2dev/ui`.
+  Rules for classes nothing rendered are gone, among them the stylesheet of `NiceGanttChart`, which
+  left ui-erp in 1.0.10.
+
+  **Translations.** About 3,400 UI texts in 32 packages were hard-coded; they go through `t()` now,
+  with the English text unchanged and pl / de / fr / es / uk in `@nice2dev/i18n` (ui-diagrams,
+  ui-presentations and ui-math in their own dictionaries). In `@nice2dev/events` and
+  `@nice2dev/admin` that includes column headers, option labels and the statuses and roles they used
+  to print raw (`checked-in`, `no-show`) — English labels for those come from the dictionary. ui-3d and ui-graphics read the app's
+  global translator, as ui-audio does since 1.2.0 — their own provider overrides it. ui-audio's
+  controls used 631 keys the dictionary did not have (English in every language), and the radio
+  player showed raw keys (`search_stations`). Texts that were hard-coded **in Polish** — in
+  `NiceSidebarNav`, `NiceNetworkDiscoveryPanel`, the backup and smart-home controls,
+  `NiceSavedQueryPanel`, `NiceNotificationPreferences`, the ui-buildings panels, the ui-printing
+  template editor and the photo editor — default to English now; Polish is in the dictionary. English
+  plurals glued on (`result{s}`) are two keys. `presentationsTranslator(lang)` (ui-presentations)
+  translates outside its provider.
+
+  **List props are optional.** 170 list props (`items`, `columns`, `data`, …) in 15 packages that
+  were required without a default are optional, with a stable empty default; every one of those
+  controls mounts without data (tested). `NiceStockChart` without data no longer computes NaN
+  coordinates.
+
+  **Unstyled components get stylesheets.** 98 components rendered class names no stylesheet had —
+  admin panels, auth forms, events rounds and pickers, the ERP invoice / purchase order / VAT table /
+  HR dashboard, the radio player, `NiceInbox`, PWA prompts, `NiceViewRenderer`, shells, smart-home,
+  … The fixed layout that sat in inline style objects is in classes now, so an app can override it;
+  values that depend on data stay inline. **`@nice2dev/social` and `@nice2dev/ui-science` ship a
+  stylesheet — import `@nice2dev/social/style.css` / `@nice2dev/ui-science/style.css`.** ui-science's
+  `sideEffects` is `["*.css"]`. Colours, spacing and radii in every stylesheet come from theme tokens
+  (visible in dark themes: `NiceRecipe` difficulty badges, transcoder states, warehouse heat map).
+
+  **Icons only from Nice.** About 130 glyphs (`×`, `→`, `↑`) and 100 pasted `<svg>` used as icons
+  are Nice icons; 11 `<svg>` stay as the control's own graphic (logos, spinners, checkbox mark). `NiceIcon`
+  gains `pin`, `mic-off`, `log-out`, `chevrons-left`, `chevrons-right`, `zoom-in`, `zoom-out`,
+  `navigation`, `refresh-ccw`, `minimize` and `smartphone`; `@nice2dev/icons` gains
+  `NtdMicrophoneOff`. The `icon` fields of the module, menu, tab, mode, quick-action, scene and admin
+  widget DTOs, notification channels and view toolbar items are rendered through `NiceIcon` — they
+  used to be printed as text. `NiceRatings` `thumbs` draws shapes instead of emoji.
+
+  **Dialogs instead of `window.prompt` / `confirm` / `alert`.** New `useNiceDialogs()` — `prompt`,
+  `confirm` and `alert` as promises on `NicePromptDialog` / `NiceConfirmDialog` — and
+  `NiceConfirmDialog.showReject`. Seventeen controls asked through the browser's blocking dialogs and
+  use the library's now (`NiceFileManager`, `NiceHtmlEditor`, `NiceViewRenderer` action `confirm`, the 3D,
+  vector and pixel editors, …). Keys pressed in `NicePromptDialog` / `NiceConfirmDialog` no longer
+  reach the page's shortcuts (Escape still closes them), and `NicePromptDialog`'s backdrop covers the
+  whole viewport.
+
+  **Smaller fixes.** `NiceFileManager.items` is optional. `NiceMLStudio` status badges: `draft`,
+  `registered`, `archived`, `cancelled` get a neutral colour, deploying / stopped deployments theirs.
+  Component docs (`doc.json`) list only props the components have. `NiceMobileTabs`: tabs beyond
+  `maxTabs` open from "More" (it only logged). `NiceInventoryManager`: new `onCreatePurchaseOrder`;
+  without it the "Create PO" button is gone (it only logged). Keyboard: `NiceNavShell` tabs follow the
+  WAI-ARIA tabs pattern, clickable `NiceDeviceTile` / `NiceCardGroup` cards and animated icons with
+  `trigger="click"` are focusable. ui-math: `CalculatorService.evaluate` parses instead of running
+  `new Function` (`asin`, `sinh`, `ceil`, exponents and `angleUnit` were wrong); `ExpressionParser`
+  takes `functions`, `constants`, `ignoreCase` and `strict`, multiplies implicitly (`2x`) and reads `^`
+  right to left. `InvoiceLine.vatRate` and `VatRate.rate` are documented as fractions (0.23).
+  `AmqpServerBinding` is `Record<string, never>`.
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/NiceDesktopIconExporter.js

@@ -632,14 +632,10 @@ const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = ''
         onExport === null || onExport === void 0 ? void 0 : onExport(icons);
     };
     const IconComponent = icon;
-    return (jsxRuntime.jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsxRuntime.jsx("h3", { children: "Preview" }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsxs("div", { className: `nice-desktop-icon-exporter ${className}`, children: [jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview", children: [jsxRuntime.jsx("h3", { children: "Preview" }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__preview-grid", children: [16, 32, 48, 64, 128, 256].map((size) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__preview-item", children: [jsxRuntime.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: jsxRuntime.jsx(IconComponent, { size: Math.min(size, 128) * (1 - config.padding * 2), fill: config.fillColor }) }), jsxRuntime.jsxs("span", { children: [size, "\u00D7", size] })] }, size))) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__config", children: [jsxRuntime.jsx("h3", { children: "Configuration" }), jsxRuntime.jsxs("label", { children: ["Icon Name:", jsxRuntime.jsx("input", { type: "text", value: config.name, onChange: (e) => setConfig((c) => ({ ...c, name: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: ["Fill Color:", jsxRuntime.jsx("input", { type: "color", value: config.fillColor, onChange: (e) => setConfig((c) => ({ ...c, fillColor: e.target.value })) })] }), jsxRuntime.jsxs("label", { children: ["Background:", jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor || '#ffffff', onChange: (e) => setConfig((c) => ({ ...c, backgroundColor: e.target.value })) }), jsxRuntime.jsx("button", { onClick: () => setConfig((c) => ({ ...c, backgroundColor: undefined })), children: "Transparent" })] }), jsxRuntime.jsxs("label", { children: ["Padding: ", Math.round(config.padding * 100), "%", jsxRuntime.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) })) })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__platforms", children: [jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeWindows, onChange: (e) => setConfig((c) => ({ ...c, includeWindows: e.target.checked })) }), "Windows (.ico)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeMacOS, onChange: (e) => setConfig((c) => ({ ...c, includeMacOS: e.target.checked })) }), "macOS (.iconset)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeLinux, onChange: (e) => setConfig((c) => ({ ...c, includeLinux: e.target.checked })) }), "Linux (hicolor)"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.includeRetina, onChange: (e) => setConfig((c) => ({ ...c, includeRetina: e.target.checked })) }), "HiDPI/Retina (@2x, @3x)"] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__sizes", children: [jsxRuntime.jsx("h4", { children: "Sizes:" }), DESKTOP_ICON_SIZES.map(({ size, label }) => (jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.sizes.includes(size), onChange: (e) => {
                                             setConfig((c) => ({
                                                 ...c,
@@ -647,7 +643,7 @@ const NiceDesktopIconExporter = ({ icon, initialConfig, onExport, className = ''
                                                     ? [...c.sizes, size].sort((a, b) => a - b)
                                                     : c.sizes.filter((s) => s !== size),
                                             }));
-                                        } }), label] }, size)))] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsxRuntime.jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsxRuntime.jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxRuntime.jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsxRuntime.jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename, style: { maxWidth: 64, maxHeight: 64 } }), jsxRuntime.jsx("span", { children: exportedIcon.filename }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
+                                        } }), label] }, size)))] })] }), jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__actions", children: [jsxRuntime.jsx("button", { onClick: handleExport, disabled: isExporting, children: isExporting ? `Exporting... ${Math.round(progress)}%` : 'Generate Icons' }), jsxRuntime.jsx("button", { onClick: downloadAll, disabled: isExporting || icons.length === 0, children: "Download All (ZIP)" })] }), icons.length > 0 && (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__results", children: [jsxRuntime.jsxs("h3", { children: ["Generated Icons (", icons.length, ")"] }), jsxRuntime.jsx("div", { className: "nice-desktop-icon-exporter__results-grid", children: icons.map((exportedIcon) => (jsxRuntime.jsxs("div", { className: "nice-desktop-icon-exporter__result-item", children: [jsxRuntime.jsx("img", { src: exportedIcon.dataUrl, alt: exportedIcon.filename }), jsxRuntime.jsx("span", { children: exportedIcon.filename }), jsxRuntime.jsx("button", { onClick: () => downloadSingle(exportedIcon), children: "Download" })] }, exportedIcon.filename))) })] }))] }));
 };
 
 exports.DESKTOP_ICON_SIZES = DESKTOP_ICON_SIZES;

package/dist/cjs/NiceFaviconGenerator.js

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

package/dist/cjs/NiceIconPicker.js

@@ -2,18 +2,19 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var actions = require('./icons/actions.js');
+var files = require('./icons/files.js');
+var media = require('./icons/media.js');
+var navigation = require('./icons/navigation.js');
+var ui = require('./icons/ui.js');
 
 const MAX_HISTORY_ITEMS = 20;
-/* ─── Chevron SVG ─── */
-const Chevron = () => (jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }));
-/* ─── Search SVG ─── */
-const SearchIcon = () => (jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }), jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }));
-/* ─── Star SVG (favorites) ─── */
-const StarIcon = ({ filled }) => (jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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 = () => (jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })] }));
-/* ─── Check SVG (multi-select) ─── */
-const CheckIcon = () => (jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.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 = () => jsxRuntime.jsx(navigation.NtdChevronDown, { size: 12, variant: "outline" });
+const SearchIcon = () => jsxRuntime.jsx(actions.NtdSearch, { size: 14, variant: "outline" });
+const StarIcon = ({ filled }) => (jsxRuntime.jsx(ui.NtdStar, { size: 12, variant: filled ? 'solid' : 'outline' }));
+const ClockIcon = () => jsxRuntime.jsx(ui.NtdClock, { size: 12, variant: "outline" });
+const CheckIcon = () => jsxRuntime.jsx(actions.NtdCheck, { size: 10, variant: "outline" });
 /* ─── localStorage helpers ─── */
 function loadFromStorage(key, fallback) {
     if (typeof window === 'undefined') {
@@ -70,7 +71,7 @@ function saveToStorage(key, value) {
  * }
  * ```
  */
-const NiceIconPicker = React.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__ */ React.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] = React.useState(false);
     const [search, setSearch] = React.useState('');
@@ -85,13 +86,7 @@ const NiceIconPicker = React.forwardRef(function NiceIconPicker({ icons, value =
     const [history, setHistory] = React.useState(() => loadFromStorage(historyKey, []));
     // Multi-select state (internal when uncontrolled)
     const [internalValues, setInternalValues] = React.useState([]);
-    const selectedValues = multiSelect
-        ? values.length > 0
-            ? values
-            : internalValues
-        : value
-            ? [value]
-            : [];
+    const selectedValues = React.useMemo(() => (multiSelect ? (values.length > 0 ? values : internalValues) : value ? [value] : []), [multiSelect, values, internalValues, value]);
     const rootRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     /* ─── Favorites helpers ─── */
@@ -397,14 +392,14 @@ const NiceIconPicker = React.forwardRef(function NiceIconPicker({ icons, value =
         }
         return selectedEntry ? readableName(selectedEntry.name) : placeholder;
     }, [multiSelect, selectedEntries, selectedEntry, placeholder]);
-    return (jsxRuntime.jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' open' : ''}${disabled ? ' disabled' : ''}${multiSelect ? ' multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsxRuntime.jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsxRuntime.jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsxRuntime.jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }), jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }), jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }), jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })] })) }), jsxRuntime.jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsxRuntime.jsx("span", { className: "ntd-picker-trigger-chevron", children: jsxRuntime.jsx(Chevron, {}) })] }), isOpen && (jsxRuntime.jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxRuntime.jsxs("div", { className: "ntd-picker-search", children: [jsxRuntime.jsx("span", { className: "ntd-picker-search-icon", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: "All" }), showFavorites && (jsxRuntime.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: [jsxRuntime.jsx(StarIcon, { filled: true }), " Favorites", favorites.length > 0 && (jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxRuntime.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: [jsxRuntime.jsx(ClockIcon, {}), " Recent"] })), allCategories.map((cat) => (jsxRuntime.jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsxRuntime.jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxRuntime.jsxs("div", { className: "ntd-picker-empty", children: [jsxRuntime.jsx("div", { className: "ntd-picker-empty-icon", children: "\u2205" }), activeCategory === '__favorites__'
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsxRuntime.jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsxRuntime.jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsxRuntime.jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsxRuntime.jsx(files.NtdGrid, { size: 16, variant: "outline" })) }), jsxRuntime.jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsxRuntime.jsx("span", { className: "ntd-picker-trigger-chevron", children: jsxRuntime.jsx(Chevron, {}) })] }), isOpen && (jsxRuntime.jsxs("div", { className: "ntd-picker-dropdown", role: "listbox", children: [jsxRuntime.jsxs("div", { className: "ntd-picker-search", children: [jsxRuntime.jsx("span", { className: "ntd-picker-search-icon", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.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) && (jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", role: "tablist", children: [jsxRuntime.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 && (jsxRuntime.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: [jsxRuntime.jsx(StarIcon, { filled: true }), " Favorites", favorites.length > 0 && (jsxRuntime.jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxRuntime.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: [jsxRuntime.jsx(ClockIcon, {}), " Recent"] })), allCategories.map((cat) => (jsxRuntime.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)))] })), jsxRuntime.jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, children: filtered.length === 0 ? (jsxRuntime.jsxs("div", { className: "ntd-picker-empty", children: [jsxRuntime.jsx("div", { className: "ntd-picker-empty-icon", children: jsxRuntime.jsx(media.NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
                                     ? 'No favorites yet. Click the star icon to add.'
                                     : activeCategory === '__history__'
                                         ? 'No recent icons.'
                                         : 'No icons found'] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [virtualized && visibleRange.start > 0 && (jsxRuntime.jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxRuntime.jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsxRuntime.jsx("div", { className: "ntd-picker-category-label", children: category })), jsxRuntime.jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
                                                 const isSelected = selectedValues.includes(entry.name);
                                                 const isFavorite = favorites.includes(entry.name);
-                                                return (jsxRuntime.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: [jsxRuntime.jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsxRuntime.jsx("span", { className: "ntd-picker-cell-check", children: jsxRuntime.jsx(CheckIcon, {}) })), showFavorites && (jsxRuntime.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: jsxRuntime.jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
+                                                return (jsxRuntime.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: [jsxRuntime.jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsxRuntime.jsx("span", { className: "ntd-picker-cell-check", children: jsxRuntime.jsx(CheckIcon, {}) })), showFavorites && (jsxRuntime.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: jsxRuntime.jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
                                             }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsxRuntime.jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxRuntime.jsxs("div", { className: "ntd-picker-footer", children: [jsxRuntime.jsxs("span", { className: "ntd-picker-count", children: [filtered.length, " icon", filtered.length !== 1 ? 's' : '', multiSelect && selectedValues.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" \u2022 ", selectedValues.length, " selected"] })), maxSelections && multiSelect && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (max ", maxSelections, ")"] })] }), clearable && selectedValues.length > 0 && (jsxRuntime.jsxs("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: ["Clear", multiSelect ? ' all' : ' selection'] })), multiSelect && (jsxRuntime.jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: "Done" }))] })] }))] }));
 });
 

package/dist/cjs/NiceIconSetCreator.js

@@ -2,35 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-require('./icons/navigation.js');
 var actions = require('./icons/actions.js');
-require('./icons/ui.js');
-require('./icons/sustainability.js');
-require('./icons/accessibility.js');
-require('./icons/legal.js');
-require('./icons/media.js');
-require('./icons/files.js');
-require('./icons/fun.js');
-require('./icons/weather.js');
-require('./icons/shapes.js');
-require('./icons/business.js');
-require('./icons/social.js');
-require('./icons/devtech.js');
-require('./icons/ecommerce.js');
-require('./icons/fintech.js');
-require('./icons/saas.js');
-require('./icons/smarthome.js');
-require('./icons/health.js');
-require('./icons/brand.js');
-require('./icons/gaming.js');
-require('./icons/ai.js');
-require('./icons/education.js');
-require('./icons/science.js');
-require('./icons/realestate.js');
-require('./icons/food.js');
-require('./icons/travel.js');
-require('./icons/sports.js');
-require('./icons/omniverk.js');
 
 /* ══════════════════════════════════════════════════════════════════════════════
    Constants
@@ -368,7 +340,12 @@ function NiceIconSetCreator({ icons, initialSelection, defaultConfig, onSelectio
             URL.revokeObjectURL(url);
         });
     }, [creator]);
-    return (jsxRuntime.jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxRuntime.jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxRuntime.jsxs("div", { style: styles.content, children: [jsxRuntime.jsxs("div", { style: styles.configPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Description" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.fieldRow, children: [jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Version" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "License" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxRuntime.jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsxRuntime.jsx("option", { value: "esm", children: "ES Modules" }), jsxRuntime.jsx("option", { value: "cjs", children: "CommonJS" }), jsxRuntime.jsx("option", { value: "both", children: "Both" })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxGroup, children: [jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxRuntime.jsxs("div", { style: styles.exportActions, children: [jsxRuntime.jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsxRuntime.jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxRuntime.jsxs("div", { style: styles.selectionPanel, children: [jsxRuntime.jsxs("div", { style: styles.selectionHeader, children: [jsxRuntime.jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxRuntime.jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsxRuntime.jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsxRuntime.jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxRuntime.jsxs("div", { style: styles.selectionActions, children: [jsxRuntime.jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsxRuntime.jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsxRuntime.jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxRuntime.jsxs("div", { onClick: () => creator.toggleIcon(item.originalName), style: {
+    return (jsxRuntime.jsxs("div", { className: `nice-icon-set-creator ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.header, children: [jsxRuntime.jsx("h2", { style: styles.title, children: "Icon Set Creator" }), jsxRuntime.jsxs("div", { style: styles.stats, children: [creator.selectedCount, " / ", creator.items.length, " icons selected"] })] }), jsxRuntime.jsxs("div", { style: styles.content, children: [jsxRuntime.jsxs("div", { style: styles.configPanel, children: [jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: "Configuration" }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Set Name" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.name, onChange: (e) => creator.updateConfig({ name: e.target.value }), style: styles.input, placeholder: "MyIcons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Package Name" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.packageName, onChange: (e) => creator.updateConfig({ packageName: e.target.value }), style: styles.input, placeholder: "@myproject/icons" })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Description" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.description, onChange: (e) => creator.updateConfig({ description: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.fieldRow, children: [jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Version" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.version, onChange: (e) => creator.updateConfig({ version: e.target.value }), style: styles.input })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "License" }), jsxRuntime.jsx("input", { type: "text", value: creator.config.license, onChange: (e) => creator.updateConfig({ license: e.target.value }), style: styles.input })] })] }), jsxRuntime.jsxs("div", { style: styles.field, children: [jsxRuntime.jsx("label", { style: styles.fieldLabel, children: "Export Format" }), jsxRuntime.jsxs("select", { value: creator.config.format, onChange: (e) => creator.updateConfig({ format: e.target.value }), style: styles.select, children: [jsxRuntime.jsx("option", { value: "esm", children: "ES Modules" }), jsxRuntime.jsx("option", { value: "cjs", children: "CommonJS" }), jsxRuntime.jsx("option", { value: "both", children: "Both" })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxGroup, children: [jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.generateTypes, onChange: (e) => creator.updateConfig({ generateTypes: e.target.checked }) }), "Generate TypeScript types"] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.treeShaking, onChange: (e) => creator.updateConfig({ treeShaking: e.target.checked }) }), "Tree-shaking friendly"] }), jsxRuntime.jsxs("label", { style: styles.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: creator.config.includeMetadata, onChange: (e) => creator.updateConfig({ includeMetadata: e.target.checked }) }), "Include metadata"] })] }), jsxRuntime.jsxs("div", { style: styles.exportActions, children: [jsxRuntime.jsx("button", { onClick: handleExport, style: styles.primaryButton, children: "Preview Export" }), jsxRuntime.jsx("button", { onClick: handleDownloadZip, style: styles.secondaryButton, children: "Download Files" })] })] }), jsxRuntime.jsxs("div", { style: styles.selectionPanel, children: [jsxRuntime.jsxs("div", { style: styles.selectionHeader, children: [jsxRuntime.jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search icons...", style: styles.searchInput }), jsxRuntime.jsxs("select", { value: categoryFilter, onChange: (e) => setCategoryFilter(e.target.value), style: styles.categorySelect, children: [jsxRuntime.jsx("option", { value: "all", children: "All Categories" }), categories.map((cat) => (jsxRuntime.jsx("option", { value: cat, children: cat }, cat)))] })] }), jsxRuntime.jsxs("div", { style: styles.selectionActions, children: [jsxRuntime.jsx("button", { onClick: creator.selectAll, style: styles.smallButton, children: "Select All" }), jsxRuntime.jsx("button", { onClick: creator.deselectAll, style: styles.smallButton, children: "Deselect All" })] }), jsxRuntime.jsx("div", { style: styles.iconGrid, children: filteredItems.map((item) => (jsxRuntime.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/cjs/NtdIconBadge.js

@@ -187,7 +187,8 @@ function injectStyles() {
  * />
  * ```
  */
-const NtdBadge = React.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__ */ React.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] = React.useState(false);
     const [countChanging, setCountChanging] = React.useState(false);
@@ -237,8 +238,7 @@ const NtdBadge = React.forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZ
                     backgroundColor: badgeColor,
                     color: textColor,
                 }, "aria-hidden": "true", children: variant !== 'dot' && displayCount }))] }));
-});
-NtdBadge.displayName = 'NtdBadge';
+}), { displayName: 'NtdBadge' });
 /* ────────────────────────────────────────────────────────────────────────────
    NtdStatusDot COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
@@ -257,7 +257,8 @@ NtdBadge.displayName = 'NtdBadge';
  * <NtdStatusDot icon={NtdUser} status="away" position="bottom-right" />
  * ```
  */
-const NtdStatusDot = React.forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
+const NtdStatusDot = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
     var _a, _b;
     React.useEffect(() => {
         injectStyles();
@@ -285,8 +286,7 @@ const NtdStatusDot = React.forwardRef(({ icon: Icon, status, statusColor, positi
                     backgroundColor: resolvedColor,
                     color: resolvedColor,
                 }, "aria-hidden": "true" })] }));
-});
-NtdStatusDot.displayName = 'NtdStatusDot';
+}), { displayName: 'NtdStatusDot' });
 /* ────────────────────────────────────────────────────────────────────────────
    NtdIconOverlay COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
@@ -311,7 +311,8 @@ NtdStatusDot.displayName = 'NtdStatusDot';
  * />
  * ```
  */
-const NtdIconOverlay = React.forwardRef(({ icon: Icon, overlay, position = 'bottom-right', overlayScale = 0.5, overlayBg, circularBg = false, iconProps = {}, className, style, }, ref) => {
+const NtdIconOverlay = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.forwardRef(({ icon: Icon, overlay, position = 'bottom-right', overlayScale = 0.5, overlayBg, circularBg = false, iconProps = {}, className, style, }, ref) => {
     var _a, _b;
     React.useEffect(() => {
         injectStyles();
@@ -333,8 +334,7 @@ const NtdIconOverlay = React.forwardRef(({ icon: Icon, overlay, position = 'bott
                     height: overlaySize,
                     backgroundColor: overlayBg,
                 }, children: overlay })] }));
-});
-NtdIconOverlay.displayName = 'NtdIconOverlay';
+}), { displayName: 'NtdIconOverlay' });
 /**
  * Stack two icons for composite imagery.
  *
@@ -356,7 +356,8 @@ NtdIconOverlay.displayName = 'NtdIconOverlay';
  * />
  * ```
  */
-const NtdIconStack = React.forwardRef(({ base: BaseIcon, overlay: OverlayIcon, baseProps = {}, overlayProps = {}, position = 'bottom-right', overlayScale = 0.6, size, className, style, }, ref) => {
+const NtdIconStack = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.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'
@@ -373,8 +374,7 @@ const NtdIconStack = React.forwardRef(({ base: BaseIcon, overlay: OverlayIcon, b
         }, children: [jsxRuntime.jsx(BaseIcon, { ...baseProps, size: resolvedSize }), jsxRuntime.jsx("div", { className: "ntd-icon-overlay", style: {
                     ...POSITION_STYLES[position],
                 }, children: jsxRuntime.jsx(OverlayIcon, { ...overlayProps, size: overlaySize }) })] }));
-});
-NtdIconStack.displayName = 'NtdIconStack';
+}), { displayName: 'NtdIconStack' });
 
 exports.NtdBadge = NtdBadge;
 exports.NtdIconOverlay = NtdIconOverlay;

package/dist/cjs/NtdIconMorph.js

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var types = require('./types.js');
 var actions = require('./icons/actions.js');
 var media = require('./icons/media.js');
 var navigation = require('./icons/navigation.js');
 var ui = require('./icons/ui.js');
+var types = require('./types.js');
 
 /* ────────────────────────────────────────────────────────────────────────────
    EASING FUNCTIONS
@@ -147,7 +147,8 @@ const morphStyles = `
  * />
  * ```
  */
-const NtdIconMorph = React.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__ */ React.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] = React.useState(false);
@@ -239,9 +240,13 @@ const NtdIconMorph = React.forwardRef(({ from: FromIcon, to: ToIcon, morphed: co
             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: [jsxRuntime.jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--inactive' : 'ntd-morph-icon--active'}`, style: transitionStyle, "aria-hidden": morphed, children: jsxRuntime.jsx(FromIcon, { ...iconProps }) }), jsxRuntime.jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--active' : 'ntd-morph-icon--inactive'}`, style: transitionStyle, "aria-hidden": !morphed, children: jsxRuntime.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: [jsxRuntime.jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--inactive' : 'ntd-morph-icon--active'}`, style: transitionStyle, "aria-hidden": morphed, children: jsxRuntime.jsx(FromIcon, { ...iconProps }) }), jsxRuntime.jsx("div", { className: `ntd-morph-icon ${morphed ? 'ntd-morph-icon--active' : 'ntd-morph-icon--inactive'}`, style: transitionStyle, "aria-hidden": !morphed, children: jsxRuntime.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).
@@ -256,7 +261,8 @@ NtdIconMorph.displayName = 'NtdIconMorph';
  * />
  * ```
  */
-const NtdPathMorph = React.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__ */ React.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] = React.useState(false);
     const morphed = controlledMorphed !== null && controlledMorphed !== void 0 ? controlledMorphed : internalMorphed;
@@ -312,8 +318,12 @@ const NtdPathMorph = React.forwardRef(({ pair, morphed: controlledMorphed, trigg
         }, 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: jsxRuntime.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: navigation.NtdMenu, to: navigation.NtdClose },
     'play-pause': { from: media.NtdPlay, to: media.NtdPause },
@@ -337,15 +347,15 @@ const ICON_PAIRS = {
  * <NtdMorphPair pair="sun-moon" trigger="click" />
  * ```
  */
-const NtdMorphPair = React.forwardRef(({ pair, ...props }, ref) => {
+const NtdMorphPair = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.forwardRef(({ pair, ...props }, ref) => {
     const iconPair = ICON_PAIRS[pair];
     if (!iconPair) {
         console.warn(`NtdMorphPair: Unknown pair "${pair}"`);
         return null;
     }
     return jsxRuntime.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/cjs/NtdStateMorph.js

@@ -43,7 +43,8 @@ function interpolateSegments(from, to, t) {
 /* ────────────────────────────────────────────────────────────────────────────
    COMPONENT
 ───────────────────────────────────────────────────────────────────────────── */
-const NtdStateMorph = React.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__ */ React.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 = React.useRef(null);
     const animRef = React.useRef(0);
@@ -111,8 +112,7 @@ const NtdStateMorph = React.forwardRef(({ states, currentState, fills, strokes,
         getSvgElement: () => svgRef.current,
     }));
     return (jsxRuntime.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: jsxRuntime.jsx("path", { d: currentPath, fill: currentFill, stroke: currentStroke, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
-});
-NtdStateMorph.displayName = 'NtdStateMorph';
+}), { displayName: 'NtdStateMorph' });
 /* ────────────────────────────────────────────────────────────────────────────
    COLOR INTERPOLATION
 ───────────────────────────────────────────────────────────────────────────── */

package/dist/cjs/animationControls.js

@@ -239,7 +239,7 @@ function useAnimationSequence(config) {
  * </AnimationController>
  * ```
  */
-const AnimationController = React.forwardRef(function AnimationController(props, ref) {
+const AnimationController = /* @__PURE__ */ React.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);
@@ -424,7 +424,7 @@ const AnimationController = React.forwardRef(function AnimationController(props,
  * </InteractiveIcon>
  * ```
  */
-const InteractiveIcon = React.forwardRef(function InteractiveIcon(props, ref) {
+const InteractiveIcon = /* @__PURE__ */ React.forwardRef(function InteractiveIcon(props, ref) {
     const { children, config, disabled = false, onInteractionStart, onInteractionEnd, className, style, } = props;
     const [isActive, setIsActive] = React.useState(false);
     const [isLeaving, setIsLeaving] = React.useState(false);
@@ -538,7 +538,14 @@ const InteractiveIcon = React.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

package/dist/cjs/createIcon.js

@@ -7,14 +7,17 @@ var smilAnimations = require('./smilAnimations.js');
 var types = require('./types.js');
 
 /* ── Dark mode detection hook ───────────────────────── */
+// No `matchMedia` (jsdom without a polyfill, some embedded webviews): light, and nothing to
+// subscribe to — an icon must not throw where a page renders.
+const hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
 function getColorScheme() {
-    if (typeof window === 'undefined') {
+    if (!hasMatchMedia()) {
         return 'light';
     }
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 function subscribeColorScheme(callback) {
-    if (typeof window === 'undefined') {
+    if (!hasMatchMedia()) {
         return () => { };
     }
     const mq = window.matchMedia('(prefers-color-scheme: dark)');