@nice2dev/icons 1.2.2 → 1.3.0

package/README.md

@@ -81,12 +81,7 @@ function App() {
       <NtdSearch size="md" animation="pulse" />
 
       {/* Duotone heart with custom colors */}
-      <NtdHeart
-        variant="duotone"
-        primaryColor="#e74c3c"
-        secondaryColor="#fca5a5"
-        animation="heartbeat"
-      />
+      <NtdHeart variant="duotone" primaryColor="#e74c3c" secondaryColor="#fca5a5" animation="heartbeat" />
     </>
   );
 }
@@ -100,29 +95,29 @@ function App() {
 
 Every icon component accepts these props (extends `SVGProps<SVGSVGElement>`):
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `IconSize` | `'md'` | Named preset or pixel number |
-| `variant` | `IconVariant` | `'solid'` | Rendering variant |
-| `primaryColor` | `string` | `'currentColor'` | Main icon color |
-| `secondaryColor` | `string` | `primaryColor` | Secondary color (duotone background) |
-| `accentColor` | `string` | `'#ffffff'` | Accent color for detail elements |
-| `primaryOpacity` | `number` | `1` | Opacity of primary elements (0–1) |
-| `secondaryOpacity` | `number` | `0.4` | Opacity of secondary elements (0–1) |
-| `accentOpacity` | `number` | `1` | Opacity of accent elements (0–1) |
-| `strokeWidth` | `number` | `2` | Base stroke width for outline/duotone |
-| `strokeLinecap` | `'round' \| 'square' \| 'butt'` | `'round'` | Stroke line cap style |
-| `strokeLinejoin` | `'round' \| 'miter' \| 'bevel'` | `'round'` | Stroke line join style |
-| `animation` | `IconAnimation` | `undefined` | CSS animation name |
-| `animationDuration` | `string` | CSS default | Duration override (e.g. `'0.5s'`) |
-| `gradient` | `GradientPreset` | `undefined` | Apply a gradient fill preset |
-| `gradientType` | `'linear' \| 'radial'` | `'linear'` | Gradient shape |
-| `gradientAngle` | `number` | `135` | Angle for linear gradients (degrees) |
-| `gradientAnimation` | `'shift' \| 'spin' \| 'pulse'` | `undefined` | Animate the gradient |
-| `title` | `string` | `undefined` | Accessible title for screen readers |
-| `className` | `string` | `undefined` | Custom CSS class |
-| `style` | `CSSProperties` | `undefined` | Inline styles |
-| `ref` | `Ref<SVGSVGElement>` | — | Forward ref to the `<svg>` element |
+| Prop                | Type                            | Default          | Description                           |
+| ------------------- | ------------------------------- | ---------------- | ------------------------------------- |
+| `size`              | `IconSize`                      | `'md'`           | Named preset or pixel number          |
+| `variant`           | `IconVariant`                   | `'solid'`        | Rendering variant                     |
+| `primaryColor`      | `string`                        | `'currentColor'` | Main icon color                       |
+| `secondaryColor`    | `string`                        | `primaryColor`   | Secondary color (duotone background)  |
+| `accentColor`       | `string`                        | `'#ffffff'`      | Accent color for detail elements      |
+| `primaryOpacity`    | `number`                        | `1`              | Opacity of primary elements (0–1)   |
+| `secondaryOpacity`  | `number`                        | `0.4`            | Opacity of secondary elements (0–1) |
+| `accentOpacity`     | `number`                        | `1`              | Opacity of accent elements (0–1)    |
+| `strokeWidth`       | `number`                        | `2`              | Base stroke width for outline/duotone |
+| `strokeLinecap`     | `'round' \| 'square' \| 'butt'` | `'round'`        | Stroke line cap style                 |
+| `strokeLinejoin`    | `'round' \| 'miter' \| 'bevel'` | `'round'`        | Stroke line join style                |
+| `animation`         | `IconAnimation`                 | `undefined`      | CSS animation name                    |
+| `animationDuration` | `string`                        | CSS default      | Duration override (e.g. `'0.5s'`)     |
+| `gradient`          | `GradientPreset`                | `undefined`      | Apply a gradient fill preset          |
+| `gradientType`      | `'linear' \| 'radial'`          | `'linear'`       | Gradient shape                        |
+| `gradientAngle`     | `number`                        | `135`            | Angle for linear gradients (degrees)  |
+| `gradientAnimation` | `'shift' \| 'spin' \| 'pulse'`  | `undefined`      | Animate the gradient                  |
+| `title`             | `string`                        | `undefined`      | Accessible title for screen readers   |
+| `className`         | `string`                        | `undefined`      | Custom CSS class                      |
+| `style`             | `CSSProperties`                 | `undefined`      | Inline styles                         |
+| `ref`               | `Ref<SVGSVGElement>`            | —              | Forward ref to the `<svg>` element    |
 
 Plus all standard `SVGProps<SVGSVGElement>` attributes (`onClick`, `id`, `data-*`, etc.).
 
@@ -135,7 +130,7 @@ type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'xxl' | 'xxxl' | numb
 ```
 
 | Preset | Pixels |
-|--------|--------|
+| ------ | ------ |
 | `xs`   | 12     |
 | `sm`   | 16     |
 | `md`   | 24     |
@@ -157,12 +152,12 @@ The pixel map is exported as `SIZE_MAP: Record<string, number>`.
 type IconVariant = 'solid' | 'outline' | 'duotone' | 'flat';
 ```
 
-| Variant | Description |
-|---------|-------------|
-| `solid` | Filled shapes using `fill` |
-| `outline` | Stroked paths with `fill="none"` |
-| `duotone` | Background shape at `secondaryOpacity` + foreground stroke |
-| `flat` | Colored badge background (`secondaryColor`, rounded rect) with solid content on top |
+| Variant   | Description                                                                         |
+| --------- | ----------------------------------------------------------------------------------- |
+| `solid`   | Filled shapes using `fill`                                                          |
+| `outline` | Stroked paths with `fill="none"`                                                    |
+| `duotone` | Background shape at `secondaryOpacity` + foreground stroke                          |
+| `flat`    | Colored badge background (`secondaryColor`, rounded rect) with solid content on top |
 
 ```tsx
 <NtdHome variant="outline" primaryColor="#000" strokeWidth={1.5} />
@@ -175,10 +170,10 @@ type IconVariant = 'solid' | 'outline' | 'duotone' | 'flat';
 ```tsx
 <NtdHeart
   variant="duotone"
-  primaryColor="#e74c3c"      // foreground stroke
-  secondaryColor="#fca5a5"    // background fill
-  secondaryOpacity={0.3}      // background opacity
-  accentColor="#fff"           // small details
+  primaryColor="#e74c3c" // foreground stroke
+  secondaryColor="#fca5a5" // background fill
+  secondaryOpacity={0.3} // background opacity
+  accentColor="#fff" // small details
 />
 ```
 
@@ -209,36 +204,36 @@ Apply gradient fills using the `gradient` prop with one of 12 built-in presets:
 ```tsx
 <NtdHeart gradient="sunset" />
 <NtdStar gradient="ocean" gradientType="radial" />
-<NtdZap gradient="neon" gradientAnimation="spin" />
+<NtdLightning gradient="neon" gradientAnimation="spin" />
 <NtdGlobe gradient="aurora" gradientAngle={45} />
 ```
 
 #### Available Presets (`GradientPreset`)
 
-| Preset | Colors |
-|--------|--------|
-| `sunset` | `#ff6b6b` → `#feca57` → `#ff9ff3` |
-| `ocean` | `#0652DD` → `#1B9CFC` → `#38ada9` |
-| `forest` | `#0a3d0a` → `#1e8449` → `#58D68D` |
-| `fire` | `#e74c3c` → `#f39c12` → `#f1c40f` |
-| `ice` | `#74b9ff` → `#a29bfe` → `#dfe6e9` |
-| `neon` | `#6c5ce7` → `#fd79a8` → `#00cec9` |
-| `gold` | `#f9ca24` → `#f0932b` → `#e17055` |
-| `purple-haze` | `#6c5ce7` → `#a55eea` → `#e056a0` |
-| `aurora` | `#00b894` → `#00cec9` → `#0984e3` → `#6c5ce7` |
-| `midnight` | `#0c0c1d` → `#1e3a5f` → `#2c3e50` |
-| `candy` | `#ff6b81` → `#ffa502` → `#2ed573` |
-| `steel` | `#636e72` → `#b2bec3` → `#dfe6e9` |
+| Preset        | Colors                                              |
+| ------------- | --------------------------------------------------- |
+| `sunset`      | `#ff6b6b` → `#feca57` → `#ff9ff3`               |
+| `ocean`       | `#0652DD` → `#1B9CFC` → `#38ada9`               |
+| `forest`      | `#0a3d0a` → `#1e8449` → `#58D68D`               |
+| `fire`        | `#e74c3c` → `#f39c12` → `#f1c40f`               |
+| `ice`         | `#74b9ff` → `#a29bfe` → `#dfe6e9`               |
+| `neon`        | `#6c5ce7` → `#fd79a8` → `#00cec9`               |
+| `gold`        | `#f9ca24` → `#f0932b` → `#e17055`               |
+| `purple-haze` | `#6c5ce7` → `#a55eea` → `#e056a0`               |
+| `aurora`      | `#00b894` → `#00cec9` → `#0984e3` → `#6c5ce7` |
+| `midnight`    | `#0c0c1d` → `#1e3a5f` → `#2c3e50`               |
+| `candy`       | `#ff6b81` → `#ffa502` → `#2ed573`               |
+| `steel`       | `#636e72` → `#b2bec3` → `#dfe6e9`               |
 
 Color stops are exported as `GRADIENT_PRESETS: Record<GradientPreset, readonly string[]>`.
 
 #### Gradient Animations (`GradientAnimation`)
 
-| Animation | Effect |
-|-----------|--------|
-| `shift` | Slides gradient colors horizontally |
-| `spin` | Rotates the gradient around the icon center |
-| `pulse` | Pulsates between stop colors |
+| Animation | Effect                                      |
+| --------- | ------------------------------------------- |
+| `shift`   | Slides gradient colors horizontally         |
+| `spin`    | Rotates the gradient around the icon center |
+| `pulse`   | Pulsates between stop colors                |
 
 Animations use SVG SMIL (`<animate>` / `<animateTransform>`) — no JavaScript runtime, works in all modern browsers.
 
@@ -265,9 +260,9 @@ import { NiceIconPicker, type IconPickerEntry } from '@nice2dev/icons';
 import { NtdHome, NtdSearch, NtdHeart } from '@nice2dev/icons';
 
 const icons: IconPickerEntry[] = [
-  { name: 'NtdHome',   Component: NtdHome,   category: 'UI' },
-  { name: 'NtdSearch', Component: NtdSearch,  category: 'Actions' },
-  { name: 'NtdHeart',  Component: NtdHeart,   category: 'UI' },
+  { name: 'NtdHome', Component: NtdHome, category: 'UI' },
+  { name: 'NtdSearch', Component: NtdSearch, category: 'Actions' },
+  { name: 'NtdHeart', Component: NtdHeart, category: 'UI' },
 ];
 
 function App() {
@@ -298,26 +293,26 @@ interface IconPickerEntry {
 
 ### NiceIconPickerProps
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icons` | `IconPickerEntry[]` | **required** | Full icon registry |
-| `value` | `string \| null` | `null` | Currently selected icon name |
-| `onChange` | `(name: string \| null, entry: IconPickerEntry \| null) => void` | — | Selection callback |
-| `placeholder` | `string` | `'Select icon…'` | Placeholder text |
-| `variant` | `IconVariant` | `'solid'` | Variant for grid preview |
-| `gridIconSize` | `IconSize \| number` | `'md'` | Icon size in the grid |
-| `triggerIconSize` | `IconSize \| number` | `'sm'` | Icon size in trigger button |
-| `categories` | `string[]` | auto-detected | Ordered category tab names |
-| `className` | `string` | — | Additional CSS class |
-| `disabled` | `boolean` | `false` | Disable the picker |
-| `clearable` | `boolean` | `true` | Show "Clear selection" button |
+| Prop              | Type                                                             | Default            | Description                   |
+| ----------------- | ---------------------------------------------------------------- | ------------------ | ----------------------------- |
+| `icons`           | `IconPickerEntry[]`                                              | **required**       | Full icon registry            |
+| `value`           | `string \| null`                                                 | `null`             | Currently selected icon name  |
+| `onChange`        | `(name: string \| null, entry: IconPickerEntry \| null) => void` | —                | Selection callback            |
+| `placeholder`     | `string`                                                         | `'Select icon…'` | Placeholder text              |
+| `variant`         | `IconVariant`                                                    | `'solid'`          | Variant for grid preview      |
+| `gridIconSize`    | `IconSize \| number`                                             | `'md'`             | Icon size in the grid         |
+| `triggerIconSize` | `IconSize \| number`                                             | `'sm'`             | Icon size in trigger button   |
+| `categories`      | `string[]`                                                       | auto-detected      | Ordered category tab names    |
+| `className`       | `string`                                                         | —                | Additional CSS class          |
+| `disabled`        | `boolean`                                                        | `false`            | Disable the picker            |
+| `clearable`       | `boolean`                                                        | `true`             | Show "Clear selection" button |
 
 ### NiceIconPickerHandle (imperative ref)
 
 ```tsx
 const ref = useRef<NiceIconPickerHandle>(null);
-ref.current?.open();   // programmatically open
-ref.current?.close();  // programmatically close
+ref.current?.open(); // programmatically open
+ref.current?.close(); // programmatically close
 ref.current?.toggle(); // toggle open/closed
 ```
 
@@ -340,11 +335,9 @@ import { createIcon } from '@nice2dev/icons';
 
 export const NtdMyIcon = createIcon({
   displayName: 'NtdMyIcon',
-  viewBox: '0 0 24 24',   // optional, defaults to '0 0 24 24'
+  viewBox: '0 0 24 24', // optional, defaults to '0 0 24 24'
   paths: {
-    solid: ({ primaryColor }) => (
-      <path d="M12 2l10 20H2z" fill={primaryColor} />
-    ),
+    solid: ({ primaryColor }) => <path d="M12 2l10 20H2z" fill={primaryColor} />,
     outline: ({ primaryColor, strokeWidth }) => (
       <path d="M12 2l10 20H2z" stroke={primaryColor} strokeWidth={strokeWidth} fill="none" />
     ),
@@ -364,19 +357,19 @@ export const NtdMyIcon = createIcon({
 });
 
 // Usage — exactly like any built-in icon:
-<NtdMyIcon size="lg" variant="duotone" primaryColor="#8b5cf6" animation="pulse" />
+<NtdMyIcon size="lg" variant="duotone" primaryColor="#8b5cf6" animation="pulse" />;
 ```
 
 ### CreateIconOptions
 
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `displayName` | `string` | **required** | React display name |
-| `viewBox` | `string` | `'0 0 24 24'` | SVG viewBox |
-| `paths.solid` | `IconPathRenderer` | **required** | Solid variant renderer |
-| `paths.outline` | `IconPathRenderer` | **required** | Outline variant renderer |
-| `paths.duotone` | `IconPathRenderer` | **required** | Duotone variant renderer |
-| `paths.flat` | `IconPathRenderer` | **required** | Flat (badge) variant renderer |
+| Field           | Type               | Default       | Description                   |
+| --------------- | ------------------ | ------------- | ----------------------------- |
+| `displayName`   | `string`           | **required**  | React display name            |
+| `viewBox`       | `string`           | `'0 0 24 24'` | SVG viewBox                   |
+| `paths.solid`   | `IconPathRenderer` | **required**  | Solid variant renderer        |
+| `paths.outline` | `IconPathRenderer` | **required**  | Outline variant renderer      |
+| `paths.duotone` | `IconPathRenderer` | **required**  | Duotone variant renderer      |
+| `paths.flat`    | `IconPathRenderer` | **required**  | Flat (badge) variant renderer |
 
 ### IconPathRenderer
 
@@ -388,69 +381,85 @@ type IconPathRenderer = (props: IconRenderProps) => React.ReactNode;
 
 Properties passed to every path renderer (pre-resolved from user props):
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `variant` | `IconVariant` | Active variant |
-| `primaryColor` | `string` | Resolved primary color |
-| `secondaryColor` | `string` | Resolved secondary color |
-| `accentColor` | `string` | Resolved accent color |
-| `primaryOpacity` | `number` | Primary opacity |
-| `secondaryOpacity` | `number` | Secondary opacity |
-| `accentOpacity` | `number` | Accent opacity |
-| `strokeWidth` | `number` | Stroke width |
-| `strokeLinecap` | `'round' \| 'square' \| 'butt'` | Stroke line cap |
-| `strokeLinejoin` | `'round' \| 'miter' \| 'bevel'` | Stroke line join |
+| Prop               | Type                            | Description              |
+| ------------------ | ------------------------------- | ------------------------ |
+| `variant`          | `IconVariant`                   | Active variant           |
+| `primaryColor`     | `string`                        | Resolved primary color   |
+| `secondaryColor`   | `string`                        | Resolved secondary color |
+| `accentColor`      | `string`                        | Resolved accent color    |
+| `primaryOpacity`   | `number`                        | Primary opacity          |
+| `secondaryOpacity` | `number`                        | Secondary opacity        |
+| `accentOpacity`    | `number`                        | Accent opacity           |
+| `strokeWidth`      | `number`                        | Stroke width             |
+| `strokeLinecap`    | `'round' \| 'square' \| 'butt'` | Stroke line cap          |
+| `strokeLinejoin`   | `'round' \| 'miter' \| 'bevel'` | Stroke line join         |
 
 ---
 
 ## Full Icon Catalog
 
 ### Navigation (14 icons)
+
 `NtdArrowUp` · `NtdArrowDown` · `NtdArrowLeft` · `NtdArrowRight` · `NtdChevronUp` · `NtdChevronDown` · `NtdChevronLeft` · `NtdChevronRight` · `NtdMenu` · `NtdClose` · `NtdMoreHorizontal` · `NtdMoreVertical` · `NtdExternalLink` · `NtdRefresh`
 
 ### Actions (25 icons)
+
 `NtdSearch` · `NtdEdit` · `NtdTrash` · `NtdSave` · `NtdDownload` · `NtdUpload` · `NtdShare` · `NtdCopy` · `NtdClipboard` · `NtdPlus` · `NtdMinus` · `NtdCheck` · `NtdFilter` · `NtdSort` · `NtdPrint` · `NtdZoomIn` · `NtdZoomOut` · `NtdUndo` · `NtdRedo` · `NtdLink` · `NtdSettings` · `NtdLogIn` · `NtdLogOut` · `NtdLock` · `NtdUnlock`
 
 ### UI & Status (26 icons)
+
 `NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdSun` · `NtdMoon`
 
 ### Media & Communication (19 icons)
+
 `NtdPlay` · `NtdPause` · `NtdStop` · `NtdSkipForward` · `NtdSkipBack` · `NtdVolume` · `NtdVolumeMute` · `NtdImage` · `NtdCamera` · `NtdVideo` · `NtdMicrophone` · `NtdMusic` · `NtdMail` · `NtdPhone` · `NtdChat` · `NtdSend` · `NtdNotification` · `NtdWifi` · `NtdBluetooth`
 
-### Files & Misc (31 icons)
-`NtdFile` · `NtdFileText` · `NtdFolder` · `NtdFolderOpen` · `NtdArchive` · `NtdDatabase` · `NtdCloud` · `NtdCloudUpload` · `NtdCloudDownload` · `NtdTerminal` · `NtdCode` · `NtdGit` · `NtdPackage` · `NtdLayers` · `NtdGrid` · `NtdList` · `NtdTable` · `NtdSmartphone` · `NtdMonitor` · `NtdCpu` · `NtdZap` · `NtdKey` · `NtdAward` · `NtdCoffee` · `NtdCart` · `NtdCreditCard` · `NtdPieChart` · `NtdBarChart` · `NtdActivity` · `NtdTarget` · `NtdTruck`
+### Files & Misc (30 icons)
+
+`NtdFile` · `NtdFileText` · `NtdFolder` · `NtdFolderOpen` · `NtdArchive` · `NtdDatabase` · `NtdCloud` · `NtdCloudUpload` · `NtdCloudDownload` · `NtdTerminal` · `NtdCode` · `NtdGit` · `NtdPackage` · `NtdLayers` · `NtdGrid` · `NtdList` · `NtdTable` · `NtdSmartphone` · `NtdMonitor` · `NtdCpu` · `NtdKey` · `NtdAward` · `NtdCoffee` · `NtdCart` · `NtdCreditCard` · `NtdPieChart` · `NtdBarChart` · `NtdActivity` · `NtdTarget` · `NtdTruck`
 
 ### Fun & Emoji (13 icons)
-`NtdDumpsterFire` · `NtdRocket` · `NtdGamepad` · `NtdPuzzle` · `NtdPartyPopper` · `NtdTrophy` · `NtdCrown` · `NtdDice` · `NtdSmiley` · `NtdSad` · `NtdSkull` · `NtdGhost` · `NtdLightning`
+
+`NtdDumpsterFire` · `NtdRocket` · `NtdGamepadOldschool` · `NtdPuzzle` · `NtdPartyPopper` · `NtdTrophy` · `NtdCrown` · `NtdDice` · `NtdSmile` · `NtdSad` · `NtdSkull` · `NtdGhost` · `NtdLightning`
 
 ### Weather & Nature (20 icons)
+
 `NtdSunrise` · `NtdSunset` · `NtdRain` · `NtdSnow` · `NtdThunderstorm` · `NtdWind` · `NtdDroplet` · `NtdThermometer` · `NtdUmbrella` · `NtdLeaf` · `NtdFlower` · `NtdTree` · `NtdMountain` · `NtdWave` · `NtdFire` · `NtdSnowflake` · `NtdCompass` · `NtdAnchor` · `NtdFeather` · `NtdBug`
 
 ### Arrows & Shapes (22 icons)
+
 `NtdArrowUpCircle` · `NtdArrowDownCircle` · `NtdArrowLeftCircle` · `NtdArrowRightCircle` · `NtdSquare` · `NtdCircle` · `NtdTriangle` · `NtdHexagon` · `NtdOctagon` · `NtdDiamond` · `NtdPentagon` · `NtdCross` · `NtdStar4` · `NtdCornerUpLeft` · `NtdCornerUpRight` · `NtdCornerDownLeft` · `NtdCornerDownRight` · `NtdMaximize` · `NtdMinimize` · `NtdMove` · `NtdRepeat` · `NtdShuffle`
 
 ### Business & Finance (16 icons)
+
 `NtdBriefcase` · `NtdDollar` · `NtdWallet` · `NtdReceipt` · `NtdBank` · `NtdTrendUp` · `NtdTrendDown` · `NtdPercent` · `NtdInvoice` · `NtdStore` · `NtdBarcode` · `NtdCalculator` · `NtdPresentation` · `NtdClipboardCheck` · `NtdPiggyBank` · `NtdCoins`
 
 ### Social & Communication (8 icons)
+
 `NtdAtSign` · `NtdPhoneOff` · `NtdBubble` · `NtdThumbsUp` · `NtdThumbsDown` · `NtdBellRing` · `NtdMegaphone` · `NtdQrCode`
 
 ### Dev & Tech (9 icons)
+
 `NtdBrackets` · `NtdServer` · `NtdGitBranch` · `NtdGitCommit` · `NtdGitMerge` · `NtdBattery` · `NtdSlash` · `NtdHash` · `NtdBugDev`
 
 ### Food & Health (13 icons)
+
 `NtdApple` · `NtdPizza` · `NtdGlass` · `NtdHeartPulse` · `NtdPill` · `NtdSyringe` · `NtdStethoscope` · `NtdWeight` · `NtdBandaid` · `NtdCake` · `NtdEgg` · `NtdHamburger` · `NtdDna`
 
 ### Brand & Logo (14 icons)
+
 `NtdNiceToDev` · `NtdNiceMonogram` · `NtdNiceOrbit` · `NtdNiceSpark` · `NtdNiceShield` · `NtdNiceBadge` · `NtdNiceCore` · `NtdNiceCrest` · `NtdNiceHelix` · `NtdNicePortal` · `NtdNicePulseMark` · `NtdNiceFlagship` · `NtdOmniVerk` · `NtdOmniVerkLogo`
 
 ### Brand Studio (25 icons)
+
 `NtdStudioGrid` · `NtdStudioBlueprint` · `NtdStudioCursor` · `NtdStudioPrototype` · `NtdStudioComponent` · `NtdStudioToken` · `NtdStudioPalette` · `NtdStudioBrush` · `NtdStudioPenTool` · `NtdStudioLayerStack` · `NtdStudioSpline` · `NtdStudioNodes` · `NtdStudioFlow` · `NtdStudioRelease` · `NtdStudioRocketMark` · `NtdStudioAIBrain` · `NtdStudioNeural` · `NtdStudioChipmark` · `NtdStudioTerminalMark` · `NtdStudioForge` · `NtdStudioWireframe` · `NtdStudioPersona` · `NtdStudioBenchmark` · `NtdStudioStudio` · `NtdStudioBeacon`
 
 ### Brand Lockups (4 icons)
+
 `NtdNiceLockupHorizontal` · `NtdNiceLockupStacked` · `NtdNiceWordmark` · `NtdNiceSymbolWordmark`
 
 ### Brand Enterprise (18 icons)
+
 `NtdEnterpriseRoadmap` · `NtdEnterpriseBacklog` · `NtdEnterpriseKanban` · `NtdEnterpriseSprint` · `NtdEnterpriseMilestone` · `NtdEnterprisePipeline` · `NtdEnterpriseDeploy` · `NtdEnterpriseMonitor` · `NtdEnterpriseAlert` · `NtdEnterpriseSla` · `NtdEnterpriseKpi` · `NtdEnterpriseRevenue` · `NtdEnterpriseRisk` · `NtdEnterpriseCompliance` · `NtdEnterpriseGateway` · `NtdEnterpriseDataMesh` · `NtdEnterpriseFeatureFlag` · `NtdEnterpriseWorkspace`
 
 ---
@@ -458,27 +467,35 @@ Properties passed to every path renderer (pre-resolved from user props):
 ## Full Animation Catalog
 
 ### Core Transforms (13)
+
 `spin` · `spin-reverse` · `pulse` · `bounce` · `shake` · `float` · `flip` · `glow` · `wiggle` · `rubber` · `swing` · `tada` · `heartbeat`
 
 ### Entrance Animations (22)
+
 `fade-in` · `slide-up` · `slide-down` · `slide-left` · `slide-right` · `drop` · `rise` · `roll-in` · `materialize` · `vortex` · `meteor` · `scale-in` · `signature` · `draw-sequence` · `stroke-order` · `glow-trace` · `seal-stamp` · `reveal` · `typewriter` · `unfold` · `assemble` · `draw` · `draw-from-dot`
 
 ### Exit Animations (3)
+
 `scale-out` · `fold` · `dissolve`
 
 ### Organic / Natural (10)
+
 `breathe` · `drift` · `orbit` · `sway` · `tilt` · `rock` · `pendulum` · `levitate` · `flap` · `skate`
 
 ### Energetic / Impact (10)
+
 `jello` · `pop` · `squeeze` · `crush` · `stretch` · `stomp` · `snap` · `twist` · `dash` · `surge`
 
 ### Effects / Digital (8)
+
 `flash` · `blink` · `flicker` · `vibrate` · `tremble` · `glitch` · `neon` · `earthquake`
 
 ### Complex Transforms (7)
+
 `wobble` · `spiral` · `warp` · `morph` · `zoom-pulse` · `ripple` · `radar`
 
 ### Dramatic (6)
+
 `ping` · `implode` · `explode` · `scatter` · `rotate-x` · `draw-loop`
 
 ---
@@ -539,6 +556,7 @@ npm run build-storybook  # static build to storybook-static/
 ```
 
 Stories cover:
+
 - **Components/Icon** — all props, variants, sizes, colors, animations
 - **Components/NiceIconPicker** — controlled picker, disabled, outline variant
 - **Components/Animations** — full gallery of 65+ animations
@@ -569,11 +587,13 @@ dist/
 ```
 
 Entry points in `package.json`:
+
 - `main` → `dist/cjs/index.js`
 - `module` → `dist/esm/index.js`
 - `types` → `dist/types/index.d.ts`
 
 ---
+
 ## React Server Components (RSC)
 
 Use icons in Server Components without "use client":
@@ -585,7 +605,7 @@ import { createIconRSC } from '@nice2dev/icons/rsc';
 // Create RSC-compatible icon
 const HomeIcon = createIconRSC({
   displayName: 'HomeIcon',
-  paths: { /* ... */ }
+  paths: {/* ... */},
 });
 
 export default function Page() {
@@ -595,11 +615,11 @@ export default function Page() {
 
 ### RSC vs Client Exports
 
-| Import Path | Use Case |
-|-------------|----------|
-| `@nice2dev/icons` | Standard usage (includes animations, color scheme detection) |
-| `@nice2dev/icons/rsc` | Server Components (no hooks, streaming-friendly) |
-| `@nice2dev/icons/client` | Client-only features ("use client" directive) |
+| Import Path              | Use Case                                                     |
+| ------------------------ | ------------------------------------------------------------ |
+| `@nice2dev/icons`        | Standard usage (includes animations, color scheme detection) |
+| `@nice2dev/icons/rsc`    | Server Components (no hooks, streaming-friendly)             |
+| `@nice2dev/icons/client` | Client-only features ("use client" directive)                |
 
 ### RSC Utilities
 
@@ -662,11 +682,11 @@ const figmaTokens = toFigmaTokens(tokens);
 
 ### Default Token Values
 
-| Category | Tokens |
-|----------|--------|
-| Sizes | `xs` (12px), `sm` (16px), `md` (24px), `lg` (32px), `xl` (48px), `2xl` (64px) |
-| Colors | `primary`, `secondary`, `accent`, `success`, `warning`, `error`, `info`, `muted` |
-| Strokes | `thin` (1), `normal` (1.5), `medium` (2), `thick` (2.5), `bold` (3) |
+| Category | Tokens                                                                           |
+| -------- | -------------------------------------------------------------------------------- |
+| Sizes    | `xs` (12px), `sm` (16px), `md` (24px), `lg` (32px), `xl` (48px), `2xl` (64px)    |
+| Colors   | `primary`, `secondary`, `accent`, `success`, `warning`, `error`, `info`, `muted` |
+| Strokes  | `thin` (1), `normal` (1.5), `medium` (2), `thick` (2.5), `bold` (3)              |
 
 ---
 
@@ -676,12 +696,7 @@ Seamless integration with Radix UI, Headless UI, and shadcn/ui:
 
 ```tsx
 import { NtdSettings, NtdChevronDown } from '@nice2dev/icons';
-import {
-  forwardRefIcon,
-  createRadixIcon,
-  withRadixState,
-  shadcnIconClasses,
-} from '@nice2dev/icons/headless-ui';
+import { forwardRefIcon, createRadixIcon, withRadixState, shadcnIconClasses } from '@nice2dev/icons/headless-ui';
 
 // Create ref-compatible icon for Radix asChild pattern
 const SettingsIcon = forwardRefIcon(NtdSettings);
@@ -698,7 +713,7 @@ const ChevronIcon = withRadixState(NtdChevronDown);
 <Button>
   <SettingsIcon className={shadcnIconClasses.buttonLeft} />
   Settings
-</Button>
+</Button>;
 ```
 
 ### shadcn/ui Class Presets
@@ -715,7 +730,7 @@ shadcnIconClasses = {
   dropdown: 'mr-2 h-4 w-4',
   spinner: 'h-4 w-4 animate-spin',
   // ...
-}
+};
 ```
 
 ### Dynamic Class Generation
@@ -747,29 +762,25 @@ import {
   createAccessibleIconProps,
   isIconComponent,
   isValidIconName,
-  useBatchIcons
+  useBatchIcons,
 } from '@nice2dev/icons/utilities';
 
 // Dynamic icon loading with suspense support
 function DynamicIcon({ name }: { name: string }) {
   const { icon: Icon, loading, error } = useIcon(name);
-  
+
   if (loading) return <span>Loading...</span>;
   if (error) return <span>Icon not found</span>;
   if (!Icon) return null;
-  
+
   return <Icon className="w-6 h-6" />;
 }
 
 // Respect user's reduced motion preference
 function AnimatedIcon() {
   const prefersReducedMotion = useReducedMotion();
-  
-  return (
-    <NtdSpinner 
-      className={prefersReducedMotion ? '' : 'animate-spin'} 
-    />
-  );
+
+  return <NtdSpinner className={prefersReducedMotion ? '' : 'animate-spin'} />;
 }
 
 // Preload icons for better performance
@@ -821,6 +832,7 @@ npx @nice2dev/icons info NtdHeart
 ```
 
 ---
+
 ## License
 
 MIT © NiceToDev

package/dist/cjs/NiceIconPicker.js

@@ -74,6 +74,8 @@ function saveToStorage(key, value) {
  */
 const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder, variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
     var _a;
+    const tablistRef = React.useRef(null);
+    uiCore.useRovingFocus(tablistRef, { orientation: 'horizontal', wrap: true, activateOnMove: true });
     const { t } = uiCore.useNiceTranslation();
     const [isOpen, setIsOpen] = React.useState(false);
     const [search, setSearch] = React.useState('');
@@ -225,30 +227,26 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
         document.addEventListener('mousedown', onClickOutside);
         return () => document.removeEventListener('mousedown', onClickOutside);
     }, [isOpen]);
-    /* ─── Focus search on open ─── */
+    /* ─── Reset on close ─── */
     React.useEffect(() => {
-        if (isOpen) {
-            requestAnimationFrame(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-        }
-        else {
+        if (!isOpen) {
             setSearch('');
             setActiveCategory(null);
             setVisibleRange({ start: 0, end: virtualizedItemCount });
         }
     }, [isOpen, virtualizedItemCount]);
-    /* ─── Keyboard ─── */
-    React.useEffect(() => {
-        if (!isOpen) {
-            return;
-        }
-        function onKeyDown(e) {
-            if (e.key === 'Escape') {
-                setIsOpen(false);
-            }
-        }
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [isOpen]);
+    /* ─── Keyboard and pad (1.3.0) ─── */
+    // The panel is a dialog on the overlay stack: focus on the search field when it opens, Escape
+    // / B close only it (a document listener before) and focus returns to the trigger. The icon
+    // grid is an APG listbox moving in two dimensions — the cells were reachable by Tab only.
+    const dropdownRef = React.useRef(null);
+    uiCore.useOverlayFocus(dropdownRef, {
+        open: isOpen,
+        modal: false,
+        initialFocus: searchInputRef,
+        onClose: () => setIsOpen(false),
+    });
+    uiCore.useRovingFocus(gridWrapRef, { orientation: 'grid', itemSelector: '.ntd-picker-cell' });
     /* ─── Virtualization scroll handler ─── */
     React.useEffect(() => {
         if (!virtualized || !isOpen || !gridWrapRef.current) {
@@ -396,7 +394,7 @@ const NiceIconPicker = /* @__PURE__ */ React.forwardRef(function NiceIconPicker(
             ? readableName(selectedEntry.name)
             : (placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…'));
     }, [multiSelect, selectedEntries, selectedEntry, placeholder, t]);
-    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: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (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: t('iconPicker.all', '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: t('iconPicker.favorites', 'Favorites'), children: [jsxRuntime.jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', '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: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsxRuntime.jsx(ClockIcon, {}), " ", t('iconPicker.recent', '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__'
+    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", { ref: dropdownRef, className: "ntd-picker-dropdown", role: "dialog", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), 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: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxRuntime.jsxs("div", { className: "ntd-picker-tabs", ref: tablistRef, 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: t('iconPicker.all', '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: t('iconPicker.favorites', 'Favorites'), children: [jsxRuntime.jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', '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: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsxRuntime.jsx(ClockIcon, {}), " ", t('iconPicker.recent', '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, role: "listbox", "aria-label": t('iconPicker.icons', 'Icons'), "aria-multiselectable": multiSelect || undefined, 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__'
                                     ? t('iconPicker.noFavoritesYetClickThe', 'No favorites yet. Click the star icon to add.')
                                     : activeCategory === '__history__'
                                         ? t('iconPicker.noRecentIcons', 'No recent icons.')