@nice2dev/icons 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @nice2dev/icons — Changelog
 
+## 1.3.6
+
+### Patch Changes
+
+- 4bdd01c: NiceIconStacker builds stacks nested any number of levels deep:
+
+  - **Nesting:** a layer sits in its `parent` (a new optional field). A layer without one sits in
+    the base, as in 1.3.5.
+  - **Where icons go:** "Add" puts the current icon into the selected layer and then selects it, so
+    adding again nests one level deeper (`<NtdBitcoin><NtdStar><NtdSparkle>1</NtdSparkle></NtdStar></NtdBitcoin>`).
+    Select an outer layer to put icons side by side.
+  - **Display:**
+    - layers are indented by depth;
+    - text is the innermost level, offered under the deepest icons;
+    - the colours flip at every level.
+  - **Removing:** removing a layer moves what sat in it up into its parent.
+  - **Handle:** a ref handle (`NiceIconStackerHandle`: `add`, `clear`) lets a parent run "add" from a
+    button of its own.
+  - **Translations:** new keys `iconStacker.addInto` and `iconStacker.target`.
+  - **Smaller text:** the default size of stacked text is three quarters of the 1.3.5 size (9, 7.5,
+    6, 5 by length).
+  - **`stackRotation`:** turns a stacked icon about its own centre.
+  - **NiceIconStacker:** every layer can turn and take its own primary, secondary and accent colours
+    (with "auto" to follow its parent), and its text a size and colour of its own.
+  - **Bound text:**
+    - in the stacker, text can be bound to a value ("Bind to"): the code writes `{count}`, and the
+      text stays a sample;
+    - the new `NiceIconStack` draws a stack kept as data with live values (`values={{ count }}`).
+  - **`renderIconStack`** draws a stack as one icon tree.
+  - **`half-` positions:** `stackAlign` takes every position again with `half-` (`half-top`,
+    `half-top-right`, `half-bottom`, …). The icon sits halfway between the centre and that edge or
+    corner, inside the parent, so it is cut out like centred content (only full corners are
+    badges).
+
 ## 1.3.5
 
 ### Patch Changes

package/README.md

@@ -220,19 +220,36 @@ centred on the icon:
 </NtdFolder>
 
 <NtdCircle>42</NtdCircle>
+
+<NtdBitcoin>
+  <NtdStar>
+    <NtdSparkle>1</NtdSparkle>
+  </NtdStar>
+</NtdBitcoin>
 ```
 
+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`.
+  `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.
 - **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
     in primary.
   - A corner badge keeps the parent's colours and sits on an accent-coloured gap.
-- **Text:** `textColor` and `textSize` override the text's colour and size.
+- **`stackRotation`:** turns a stacked icon about its own centre, in degrees clockwise. Its
+  contents and text turn with it.
+- **Text:** the default size is 9, 7.5, 6 or 5 in the 24-unit box (by length). `textColor` and
+  `textSize` override the text's colour and size.
+- **Data:** `NiceIconStack` draws a stack kept as data (NiceIconStacker's layers), its bound text
+  filled from `values`. This works with live numbers, for example
+  `<NiceIconStack layers={stack} icons={icons} values={{ count }} />`.
 - **Builder:** `NiceIconStacker` builds a stack interactively and writes the JSX
-  (`niceIconStackCode`).
+  (`niceIconStackCode`). Each icon you add goes into the selected layer, which is the newest one,
+  so adding nests deeper. Select an outer layer to put icons side by side. Text is the innermost
+  level.
 
 ---
 

package/dist/cjs/NiceIconStacker.js

@@ -4,6 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var actions = require('./icons/actions.js');
+var navigation = require('./icons/navigation.js');
+var iconStack = require('./iconStack.js');
 var stacking = require('./stacking.js');
 
 const ALIGNS = [
@@ -16,46 +18,82 @@ const ALIGNS = [
     'top-right',
     'bottom-left',
     'bottom-right',
+    'half-top',
+    'half-bottom',
+    'half-left',
+    'half-right',
+    'half-top-left',
+    'half-top-right',
+    'half-bottom-left',
+    'half-bottom-right',
 ];
 const PREVIEW_SIZES = [96, 48, 24];
 const NO_LAYERS = [];
-/** The stack as JSX, the base wrapping its layers. */
-function niceIconStackCode(layers) {
-    const [base, ...rest] = layers;
+/** What a colour field shows while the colour is unset (follows the parent). */
+const AUTO_SWATCH = '#808080';
+/** The layers in tree order (each followed by what sits in it), with their depth. */
+function walk(layers) {
+    const out = [];
+    const visit = (layer, depth) => {
+        out.push({ layer, depth });
+        for (const child of iconStack.stackChildrenOf(layers, layer.id)) {
+            visit(child, depth + 1);
+        }
+    };
+    if (layers[0]) {
+        visit(layers[0], 0);
+    }
+    return out;
+}
+/** Removes a layer; what sat in it moves up into its parent (a removed base hands over to its first child). */
+function removeLayer(layers, id) {
+    const base = layers[0];
     if (!base) {
-        return '';
+        return [];
     }
-    const baseAttrs = base.variant ? ` variant="${base.variant}"` : '';
-    if (rest.length === 0) {
-        return base.text
-            ? `<${base.icon}${baseAttrs}>${base.text}</${base.icon}>`
-            : `<${base.icon}${baseAttrs} />`;
+    if (id !== base.id) {
+        const gone = layers.find((l) => l.id === id);
+        const up = gone ? iconStack.stackParentId(layers, gone) : undefined;
+        return layers
+            .filter((l) => l.id !== id)
+            .map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
     }
-    const lines = rest.map((l) => {
-        var _a;
-        const attrs = [
-            `stackAlign="${(_a = l.align) !== null && _a !== void 0 ? _a : 'center'}"`,
-            l.size !== undefined ? `stackSize={${l.size}}` : '',
-            l.variant && l.variant !== base.variant ? `variant="${l.variant}"` : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return l.text ? `  <${l.icon} ${attrs}>${l.text}</${l.icon}>` : `  <${l.icon} ${attrs} />`;
-    });
+    const [heir, ...siblings] = iconStack.stackChildrenOf(layers, base.id);
+    if (!heir) {
+        return [];
+    }
+    const newBase = {
+        ...heir,
+        parent: undefined,
+        align: undefined,
+        size: undefined,
+        rotation: undefined,
+    };
     return [
-        `<${base.icon}${baseAttrs}>`,
-        ...(base.text ? [`  ${base.text}`] : []),
-        ...lines,
-        `</${base.icon}>`,
-    ].join('\n');
+        newBase,
+        ...layers
+            .filter((l) => l.id !== base.id && l.id !== heir.id)
+            .map((l) => siblings.includes(l)
+            ? { ...l, parent: heir.id }
+            : l.parent === heir.id
+                ? { ...l, parent: undefined }
+                : l),
+    ];
+}
+/** A colour of the layer's own, or "auto" — following its parent — until one is picked. */
+function ColorField({ label, value, onChange, autoLabel, resetLabel }) {
+    return (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__color", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("input", { type: "color", value: value !== null && value !== void 0 ? value : AUTO_SWATCH, onChange: (e) => onChange(e.target.value) })] }), value ? (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => onChange(undefined), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) })) : (jsxRuntime.jsx("small", { className: "nice-icon-stacker__auto", children: autoLabel }))] }));
 }
 /**
  * NiceIconStacker (1.3.5) — builds an icon stack: the base icon and the icons stacked in it, each
- * with its position, size and text, shown live at three sizes and as the JSX that draws it. Icons
- * come in through `current` (the "add" button) and leave one by one or all at once.
+ * with its position, size, turn and colours, nested any number of levels deep (1.3.6) with text
+ * innermost — its size, colour and the value it is bound to — shown live at three sizes and as the
+ * JSX that draws it. The "add" button puts `current` into the selected layer and selects it, so
+ * adding again goes one level deeper; select an outer layer to add side by side. Layers leave one
+ * by one or all at once. `NiceIconStack` draws a stack built here from data.
  */
-function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className, }) {
-    var _a;
+const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersChange, current, previewProps, className }, ref) {
+    var _a, _b, _c, _d;
     const { t } = uiCore.useNiceTranslation();
     const [layers, setLayers] = uiCore.useControllableState({
         value: layersProp,
@@ -65,25 +103,45 @@ function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersCha
         componentName: 'NiceIconStacker',
     });
     const nextId = React.useRef(0);
+    const targetGroup = React.useId();
     const [copied, setCopied] = React.useState(false);
+    // The layer the next icon goes into — the newest by default, so adding nests deeper.
+    const [selected, setSelected] = React.useState(undefined);
+    const base = layers[0];
+    const target = (_b = (_a = layers.find((l) => l.id === selected)) !== null && _a !== void 0 ? _a : layers[layers.length - 1]) !== null && _b !== void 0 ? _b : undefined;
     const resolve = React.useCallback((name) => (typeof icons === 'function' ? icons(name) : icons[name]), [icons]);
-    const [base, ...rest] = layers;
-    const code = React.useMemo(() => niceIconStackCode(layers), [layers]);
+    const tree = React.useMemo(() => walk(layers), [layers]);
+    const code = React.useMemo(() => iconStack.niceIconStackCode(layers), [layers]);
     const update = (id, patch) => setLayers((prev) => prev.map((l) => (l.id === id ? { ...l, ...patch } : l)));
     const add = () => {
         if (!current) {
             return;
         }
         nextId.current += 1;
-        const layer = {
-            id: `${current.icon}-${nextId.current}`,
-            icon: current.icon,
-            variant: current.variant,
-        };
-        setLayers((prev) => [...prev, layer]);
+        const id = `${current.icon}-${Date.now().toString(36)}-${nextId.current}`;
+        setLayers((prev) => {
+            const into = prev.find((l) => l.id === (target === null || target === void 0 ? void 0 : target.id));
+            const layer = {
+                id,
+                icon: current.icon,
+                variant: current.variant,
+                ...(into && into !== prev[0] ? { parent: into.id } : {}),
+            };
+            return [...prev, layer];
+        });
+        setSelected(id);
+    };
+    const remove = (id) => {
+        setLayers((prev) => removeLayer(prev, id));
+        if (selected === id) {
+            setSelected(undefined);
+        }
+    };
+    const clear = () => {
+        setLayers(NO_LAYERS);
+        setSelected(undefined);
     };
-    const remove = (id) => setLayers((prev) => prev.filter((l) => l.id !== id));
-    const clear = () => setLayers(NO_LAYERS);
+    React.useImperativeHandle(ref, () => ({ add, clear }));
     const copy = () => {
         var _a;
         void ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(code).then(() => {
@@ -91,30 +149,36 @@ function NiceIconStacker({ icons, layers: layersProp, defaultLayers, onLayersCha
             window.setTimeout(() => setCopied(false), 1500);
         }));
     };
-    const renderStack = (size) => {
-        var _a;
-        const Base = base ? resolve(base.icon) : undefined;
-        if (!base || !Base) {
-            return null;
-        }
-        return (jsxRuntime.jsxs(Base, { ...previewProps, variant: (_a = base.variant) !== null && _a !== void 0 ? _a : previewProps === null || previewProps === void 0 ? void 0 : previewProps.variant, size: size, title: base.icon, children: [base.text, rest.map((l) => {
-                    var _a;
-                    const Layer = resolve(l.icon);
-                    return Layer ? (jsxRuntime.jsx(Layer, { stackAlign: (_a = l.align) !== null && _a !== void 0 ? _a : 'center', stackSize: l.size, variant: l.variant !== base.variant ? l.variant : undefined, children: l.text }, l.id)) : null;
-                })] }));
-    };
-    return (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxRuntime.jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), ' ', t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', (_a = current === null || current === void 0 ? void 0 : current.icon) !== null && _a !== void 0 ? _a : '')] }), jsxRuntime.jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsxRuntime.jsx(actions.NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), layers.length === 0 ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__body", children: [jsxRuntime.jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [renderStack(s), jsxRuntime.jsxs("small", { children: [s, "px"] })] }, s))) }), jsxRuntime.jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: layers.map((l, i) => {
-                            var _a, _b, _c;
+    const autoLabel = t('iconStacker.auto', 'auto');
+    const resetLabel = t('iconStacker.reset', 'Back to auto');
+    const addLabel = base && target
+        ? t('iconStacker.addInto', 'Add {icon} into {target}')
+            .replace('{icon}', (_c = current === null || current === void 0 ? void 0 : current.icon) !== null && _c !== void 0 ? _c : '')
+            .replace('{target}', target.icon)
+        : t('iconStacker.add', 'Add {icon} to the stack').replace('{icon}', (_d = current === null || current === void 0 ? void 0 : current.icon) !== null && _d !== void 0 ? _d : '');
+    return (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxRuntime.jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), " ", addLabel] }), jsxRuntime.jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsxRuntime.jsx(actions.NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), !base ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__body", children: [jsxRuntime.jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [iconStack.renderIconStack(layers, icons, {
+                                    baseProps: { ...previewProps, size: s, title: base.icon },
+                                }), jsxRuntime.jsxs("small", { children: [s, "px"] })] }, s))) }), jsxRuntime.jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h;
                             const Icon = resolve(l.icon);
-                            const isBase = i === 0;
+                            const isBase = l === base;
                             const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'center';
                             const share = (_b = l.size) !== null && _b !== void 0 ? _b : stacking.defaultStackSize(align);
-                            return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", children: [jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_c = l.text) !== null && _c !== void 0 ? _c : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": t('iconStacker.remove', 'Remove {icon}').replace('{icon}', l.icon), title: t('iconStacker.remove', 'Remove {icon}').replace('{icon}', l.icon), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }, l.id));
-                        }) }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied ? t('iconStacker.copied', 'Copied') : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
-}
+                            const innermost = iconStack.stackChildrenOf(layers, l.id).length === 0;
+                            const textSize = (_c = l.textSize) !== null && _c !== void 0 ? _c : stacking.defaultTextSize(((_d = l.text) !== null && _d !== void 0 ? _d : '').length || 1);
+                            const bindingInvalid = !!l.textBinding && !iconStack.isValidTextBinding(l.textBinding);
+                            const depthStyle = {
+                                ['--nice-icon-stacker-depth']: String(depth),
+                            };
+                            const label = (key, fallback) => t(key, fallback).replace('{icon}', l.icon);
+                            return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsxRuntime.jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: (_e = l.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => update(l.id, { rotation: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_f = l.rotation) !== null && _f !== void 0 ? _f : 0, "\u00B0"] })] })), jsxRuntime.jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__text", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_g = l.text) !== null && _g !== void 0 ? _g : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsxRuntime.jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsxRuntime.jsx("output", { children: textSize }), l.textSize !== undefined && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) }))] }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsxRuntime.jsx("input", { type: "text", value: (_h = l.textBinding) !== null && _h !== void 0 ? _h : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
+                        }) }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied
+                                        ? t('iconStacker.copied', 'Copied')
+                                        : t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
+});
 if (process.env.NODE_ENV !== 'production') {
     NiceIconStacker.displayName = 'NiceIconStacker';
 }
 
+exports.niceIconStackCode = iconStack.niceIconStackCode;
 exports.NiceIconStacker = NiceIconStacker;
-exports.niceIconStackCode = niceIconStackCode;

package/dist/cjs/client.js

@@ -3,6 +3,7 @@
 var animationControls = require('./animationControls.js');
 var NiceIconPicker = require('./NiceIconPicker.js');
 var NiceIconStacker = require('./NiceIconStacker.js');
+var iconStack = require('./iconStack.js');
 var NtdIconMorph = require('./NtdIconMorph.js');
 var NtdIconBadge = require('./NtdIconBadge.js');
 var smilAnimations = require('./smilAnimations.js');
@@ -20,7 +21,10 @@ exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
 exports.useAnimationSequence = animationControls.useAnimationSequence;
 exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
 exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
-exports.niceIconStackCode = NiceIconStacker.niceIconStackCode;
+exports.NiceIconStack = iconStack.NiceIconStack;
+exports.isValidTextBinding = iconStack.isValidTextBinding;
+exports.niceIconStackCode = iconStack.niceIconStackCode;
+exports.renderIconStack = iconStack.renderIconStack;
 exports.NtdIconMorph = NtdIconMorph.NtdIconMorph;
 exports.NtdMorphPair = NtdIconMorph.NtdMorphPair;
 exports.NtdPathMorph = NtdIconMorph.NtdPathMorph;

package/dist/cjs/createIcon.js

@@ -120,7 +120,7 @@ function createIcon(options) {
     // Transform props
     rotate, flipX, flipY, scale, transition, transformOrigin = 'center center', 
     // stacking (1.3.5): the parent icon reads a child's own align / size from its props
-    children, stackAlign: _stackAlign, stackSize: _stackSize, textColor, textSize, title, className, style, ...rest }, ref) => {
+    children, stackAlign: _stackAlign, stackSize: _stackSize, stackRotation: _stackRotation, textColor, textSize, title, className, style, ...rest }, ref) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const resolvedSize = typeof size === 'number' ? size : ((_a = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
         const gradId = React.useId();

package/dist/cjs/iconStack.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+/** A name `textBinding` can take: a JavaScript identifier. */
+function isValidTextBinding(name) {
+    return !!name && /^[A-Za-z_$][\w$]*$/.test(name);
+}
+/** The id of the layer `layer` sits in, `undefined` for the base. */
+function stackParentId(layers, layer) {
+    var _a, _b;
+    return layer === layers[0] ? undefined : ((_a = layer.parent) !== null && _a !== void 0 ? _a : (_b = layers[0]) === null || _b === void 0 ? void 0 : _b.id);
+}
+/** The layers that sit directly in layer `id`, in order. */
+function stackChildrenOf(layers, id) {
+    return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
+}
+const COLOR_PROPS = ['primaryColor', 'secondaryColor', 'accentColor', 'textColor'];
+/** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
+function niceIconStackCode(layers) {
+    const base = layers[0];
+    if (!base) {
+        return '';
+    }
+    const bound = layers.filter((l) => isValidTextBinding(l.textBinding));
+    const write = (layer, parent, indent) => {
+        var _a;
+        const attrs = [
+            parent ? `stackAlign="${(_a = layer.align) !== null && _a !== void 0 ? _a : 'center'}"` : '',
+            parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
+            parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
+            layer.variant && layer.variant !== (parent === null || parent === void 0 ? void 0 : parent.variant) ? `variant="${layer.variant}"` : '',
+            ...COLOR_PROPS.map((p) => (layer[p] ? `${p}="${layer[p]}"` : '')),
+            layer.textSize !== undefined ? `textSize={${layer.textSize}}` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const open = `${layer.icon}${attrs ? ` ${attrs}` : ''}`;
+        const text = isValidTextBinding(layer.textBinding) ? `{${layer.textBinding}}` : layer.text;
+        const inner = stackChildrenOf(layers, layer.id);
+        if (inner.length === 0) {
+            return text ? `${indent}<${open}>${text}</${layer.icon}>` : `${indent}<${open} />`;
+        }
+        return [
+            `${indent}<${open}>`,
+            ...(text ? [`${indent}  ${text}`] : []),
+            ...inner.map((child) => write(child, layer, `${indent}  `)),
+            `${indent}</${layer.icon}>`,
+        ].join('\n');
+    };
+    const notes = bound.map((l) => `// {${l.textBinding}}: bound text${l.text ? `, e.g. "${l.text}"` : ''}`);
+    return [...notes, write(base, undefined, '')].join('\n');
+}
+/**
+ * The stack drawn as icons — the base wrapping the layers that sit in it, text innermost (1.3.6).
+ * One SVG, as nesting the icons by hand would give.
+ */
+function renderIconStack(layers, icons, { baseProps, values } = {}) {
+    const resolve = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
+    const draw = (layer, parent) => {
+        var _a, _b;
+        const Icon = resolve(layer.icon);
+        if (!Icon) {
+            return null;
+        }
+        const bound = isValidTextBinding(layer.textBinding) ? values === null || values === void 0 ? void 0 : values[layer.textBinding] : undefined;
+        const text = bound !== null && bound !== void 0 ? bound : layer.text;
+        const own = {
+            primaryColor: layer.primaryColor,
+            secondaryColor: layer.secondaryColor,
+            accentColor: layer.accentColor,
+            textColor: layer.textColor,
+            textSize: layer.textSize,
+        };
+        const inner = stackChildrenOf(layers, layer.id).map((child) => draw(child, layer));
+        if (!parent) {
+            const props = { ...baseProps };
+            for (const [k, v] of Object.entries(own)) {
+                if (v !== undefined) {
+                    props[k] = v;
+                }
+            }
+            return (React.createElement(Icon, { ...props, key: layer.id, variant: (_a = layer.variant) !== null && _a !== void 0 ? _a : baseProps === null || baseProps === void 0 ? void 0 : baseProps.variant },
+                inner,
+                text));
+        }
+        return (React.createElement(Icon, { ...own, key: layer.id, stackAlign: (_b = layer.align) !== null && _b !== void 0 ? _b : 'center', stackSize: layer.size, stackRotation: layer.rotation, variant: layer.variant !== parent.variant ? layer.variant : undefined },
+            inner,
+            text));
+    };
+    return layers[0] ? draw(layers[0], undefined) : null;
+}
+/**
+ * NiceIconStack (1.3.6) — draws a stack kept as data (NiceIconStacker's layers) as one icon, its
+ * bound text filled from `values`: `<NiceIconStack layers={stack} icons={icons} values={{ count }} />`.
+ * The rest of the props go to the base icon.
+ */
+function NiceIconStack({ layers, icons, values, ...baseProps }) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderIconStack(layers, icons, { baseProps, values }) });
+}
+if (process.env.NODE_ENV !== 'production') {
+    NiceIconStack.displayName = 'NiceIconStack';
+}
+
+exports.NiceIconStack = NiceIconStack;
+exports.isValidTextBinding = isValidTextBinding;
+exports.niceIconStackCode = niceIconStackCode;
+exports.renderIconStack = renderIconStack;
+exports.stackChildrenOf = stackChildrenOf;
+exports.stackParentId = stackParentId;

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var createIcon = require('./createIcon.js');
 var smilAnimations = require('./smilAnimations.js');
 var NiceIconPicker = require('./NiceIconPicker.js');
 var NiceIconStacker = require('./NiceIconStacker.js');
+var iconStack = require('./iconStack.js');
 var animationControls = require('./animationControls.js');
 var figmaExport = require('./figmaExport.js');
 var navigation = require('./icons/navigation.js');
@@ -70,7 +71,10 @@ exports.generateSmilAnimation = smilAnimations.generateSmilAnimation;
 exports.isSmilSupported = smilAnimations.isSmilSupported;
 exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
 exports.NiceIconStacker = NiceIconStacker.NiceIconStacker;
-exports.niceIconStackCode = NiceIconStacker.niceIconStackCode;
+exports.NiceIconStack = iconStack.NiceIconStack;
+exports.isValidTextBinding = iconStack.isValidTextBinding;
+exports.niceIconStackCode = iconStack.niceIconStackCode;
+exports.renderIconStack = iconStack.renderIconStack;
 exports.AnimationController = animationControls.AnimationController;
 exports.InteractiveIcon = animationControls.InteractiveIcon;
 exports.NiceAnimationController = animationControls.AnimationController;