@nice2dev/icons 1.3.7 → 1.3.9

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.9
+
+### Patch Changes
+
+- f5f6251: **NiceIconPicker: a bindable value, stored as HTML, with icons stacked in its panel; a tidier NiceIconStacker.**
+
+  NiceIconPicker:
+
+  - Binds both ways: `value` / `defaultValue` + `onChange` (and `values` / `defaultValues` in
+    multi-select). Without a value it keeps its own selection — before, an uncontrolled picker showed
+    nothing after a pick.
+  - `valueFormat="html"`: the value is the icon drawn as an `<svg>` (1em, `currentColor`) to store in a
+    database, with what it was drawn from in `data-ntd-*` attributes, so the picker reads it back. The
+    ids inside are named after the drawing, so the markup can sit in another page. `parseIconHtml(html)`
+    reads it; `NiceIconHtml` draws it in React from the data, never injecting the markup.
+  - `stackable`: an "Overlays" tab in the panel with the NiceIconStacker — icons put on the chosen one,
+    nested, placed, sized, with text and colours; the stack goes into the same HTML (the default format
+    then). Swapping the icon keeps its stack.
+  - `displayMode`: the trigger shows the icon alone or the icon and its name; `optionDisplayMode` lists
+    the panel's icons alone or with names. Names show without `Ntd` everywhere (grid, search, names
+    read aloud), or as the entry's new `label`.
+  - `name` (a hidden input for forms), `aria-label` (the field's label, the icon's name after it), `id`,
+    `testId`, `iconProps` (what the icons are drawn with; the accent now follows the page background,
+    so cut-outs and stacked icons show in a dark theme).
+  - The panel opens above the trigger when there is more room there and never grows past what the
+    window and clipping ancestors leave visible.
+  - Fixed: the favourites star was a button inside the icon's button (invalid HTML, a console error);
+    with several icons selected the trigger shows their count (it showed the first icon); Escape while
+    picking an icon to stack goes back to the stack.
+
+  NiceIconStacker:
+
+  - Laid out to fit the picker's panel and less technical: the stack drawn large and small, the layers
+    as a list (select one to edit it — new icons go into it; Delete removes it), and under it the
+    selected layer only — its position on a pad shaped like its parent instead of a list of
+    `half-top-left`-style values, its size and text; turn, nudge, colours (swatches) and binding fold
+    under "More", the JSX code under "JSX code". Names show without `Ntd`.
+  - `onAddClick(target)` (the add button asks the host for the icon), the handle's `add(icon?)`,
+    `iconLabel`, `showCode`, `keepBase`.
+  - `addStackLayer` / `removeStackLayer` / `iconDisplayName` exported; new layers get short ids (`'1'`,
+    `'2'`…).
+
+  Behaviour changes: `values` passed as a constant `[]` no longer falls back to the picker's own
+  selection (a frozen controlled value, as with any controlled prop); the stacker's DOM is new (tests
+  that queried its `select` or radios need updating).
+
+## 1.3.8
+
+### Patch Changes
+
+- f389149: Duotone draws the larger area in primary. 373 of the 541 core icons drew their body in pale
+  secondary under a primary outline.
+
+  - Icons with details now draw duotone as the solid, with those details in full secondary
+    (`paths.duotone` may be left out; `createIcon` derives it that way).
+  - Icons without details, and the fills-only splits whose larger part was secondary (Download,
+    Upload, User, Dollar, PieChart, Undo / Redo, Wifi, …), have their colours swapped through the
+    new `swapDuotone` helper: body primary, outline and details secondary.
+  - NtdSearch / NtdZoomIn / NtdZoomOut fill the lens in primary under a secondary handle and glyph.
+  - NtdForge got a duotone of its own.
+
+  A duotone without a `secondaryColor` now reads as one colour where it used to rely on
+  `secondaryOpacity`; pass a secondary colour for two tones.
+
+- a947882: Icon feedback round 39:
+
+  - NtdBriefcase: the handle is 1.5 × the stroke width on the filled cases.
+  - NtdCode: twice the stroke width in every variant but outline (vivid had a fixed 2.2), with sharp
+    points. Duotone is vivid's split: right bracket primary, left secondary.
+  - NtdMoreHorizontal / NtdMoreVertical: in vivid, the outer dots are primary and the middle one
+    secondary. The last dot was a fixed `#3B82F6`, and the white sheen is gone.
+  - NtdTrash: the lid is flat with its ends bent down, as round as the bin's bottom corners.
+
+- cbee657: Core container icons keep a spot for stacked icons and text. Each spot was measured as the largest
+  circle inside the icon's silhouette, then checked by eye: NtdBell / NtdBellRing (the body above
+  the clapper), NtdBookmark, NtdBubble, NtdChat, NtdCalendar, NtdCamera, NtdClipboard, NtdCloud,
+  NtdCoffee, NtdDroplet, NtdEgg, NtdFile and every paper icon (the page below the fold), NtdFolder /
+  NtdFolderOpen, NtdMonitor, NtdAward, NtdTrophy, NtdLock, NtdBriefcase, NtdBattery, NtdBackspace,
+  NtdDiamond, NtdPentagon, NtdPlay, NtdVideo, NtdFlag, NtdGhost, NtdWishlist and the gaming
+  NtdShield / NtdStar / NtdTrophy.
+- 8eca993: Icons keep a spot for what is stacked in them. `createIcon` takes `perfectStackX` /
+  `perfectStackY` (the spot's centre in the 24-unit box), `perfectStackRotation` and
+  `perfectStackSize`. A child without a `stackAlign` goes there (the new default `'perfect'`), and
+  so does text, turned with it and scaled to it. Without them, the spot is the icon's `textCenter`,
+  else the box centre. `stackAlign="center"` is still the middle of the box. NtdPin keeps its head,
+  NtdTag the stretch past its hole, turned 45° along the tag. NtdPin no longer has the dot; the pin
+  with the dot is the new `NtdMapPin` (`'map-pin'` in the resolver). NiceIconStacker offers
+  `perfect` first, shows the spot's size and turn as the layer's defaults, and writes `stackAlign`
+  only for another position.
+
 ## 1.3.7
 
 ### Patch Changes

package/README.md

@@ -207,12 +207,13 @@ See [Full Animation Catalog](#full-animation-catalog) for the complete list.
 
 ### Stacking icons
 
-Nest icons to stack them in one SVG. A child icon sits where its `stackAlign` says, and text is
-centred on the icon:
+Nest icons to stack them in one SVG. A child icon sits where its `stackAlign` says. Without one, it
+goes to the spot its parent keeps for stacked icons (a pin's head, along a tag), or the centre if
+the parent keeps none. Text goes to that spot too:
 
 ```tsx
 <NtdSquare variant="solid">
-  <NtdStar stackAlign="center">1</NtdStar>
+  <NtdStar>1</NtdStar>
 </NtdSquare>
 
 <NtdFolder>
@@ -221,6 +222,12 @@ centred on the icon:
 
 <NtdCircle>42</NtdCircle>
 
+<NtdPin>
+  <NtdStar />
+</NtdPin>
+
+<NtdTag>SALE</NtdTag>
+
 <NtdBitcoin>
   <NtdStar>
     <NtdSparkle>1</NtdSparkle>
@@ -230,10 +237,19 @@ centred on the icon:
 
 Stacks nest any number of levels deep, with the colours flipping at every level.
 
-- **`stackAlign`:** `center` (default), `top`, `bottom`, `left`, `right`, `top-left`,
-  `top-right`, `bottom-left`, `bottom-right`, plus each of them with `half-` (`half-top`,
-  `half-bottom-right`, …), halfway from the centre to that edge or corner.
-- **`stackSize`:** the child's share of its parent. Default `0.6` centred, `0.5` elsewhere.
+- **`stackAlign`:** `perfect` (default: the parent's own spot), `center` (the middle of the box),
+  `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, plus
+  each of them with `half-` (`half-top`, `half-bottom-right`, …), halfway from the centre to that
+  edge or corner.
+- **The parent's own spot:** an icon declares it with `createIcon`'s `perfectStackX` /
+  `perfectStackY` (its centre in the 24-unit box), `perfectStackRotation` (degrees clockwise) and
+  `perfectStackSize` (a child's share). For example, `NtdPin` keeps its head (12, 10, half the
+  pin) and `NtdTag` the stretch past its hole, turned 45° along the tag. Without them, the spot is
+  the icon's `textCenter`, else the centre. A child there takes the spot's size and turn, unless
+  it sets its own `stackSize` / `stackRotation`; text there turns with it and scales to its size.
+  `NtdMapPin` is the pin with the dot in its head (`NtdPin` had it until 1.3.8).
+- **`stackSize`:** the child's share of its parent. Default: the spot's size at `perfect`, `0.6`
+  centred, `0.5` elsewhere.
 - **Colours** follow the parent unless the child sets its own:
   - In the centre or at an edge, a filled parent cuts the content out. The child takes the
     parent's accent and its text the parent's primary. On `outline` / `wireframe` everything stays
@@ -421,14 +437,15 @@ export const NtdMyIcon = createIcon({
 
 ### 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` | solid, details in secondary       | Duotone variant renderer: the larger part primary (1.3.8) |
+| `perfectStackX` / `perfectStackY` / `perfectStackRotation` / `perfectStackSize` | `number`           | `textCenter` / box centre, 0, 0.6 | The spot stacked icons and text go to (1.3.8)             |
+| `paths.flat`                                                                    | `IconPathRenderer` | **required**                      | Flat (badge) variant renderer                             |
 
 ### IconPathRenderer
 
@@ -467,7 +484,7 @@ Properties passed to every path renderer (pre-resolved from user props):
 
 ### UI & Status (27 icons)
 
-`NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdHourglass` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdSun` · `NtdMoon`
+`NtdHome` · `NtdUser` · `NtdUsers` · `NtdHeart` · `NtdStar` · `NtdBell` · `NtdEye` · `NtdEyeOff` · `NtdInfo` · `NtdWarning` · `NtdError` · `NtdSuccess` · `NtdHelp` · `NtdClock` · `NtdHourglass` · `NtdCalendar` · `NtdTag` · `NtdBookmark` · `NtdFlag` · `NtdThumbUp` · `NtdThumbDown` · `NtdShield` · `NtdGlobe` · `NtdMap` · `NtdPin` · `NtdMapPin` · `NtdSun` · `NtdMoon`
 
 ### Media & Communication (19 icons)