@nice2dev/icons 1.3.14 → 1.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/NiceDesktopIconExporter.js +688 -599
  3. package/dist/cjs/NiceFaviconGenerator.js +603 -417
  4. package/dist/cjs/NiceIconPicker.js +788 -508
  5. package/dist/cjs/NiceIconPreview.js +246 -188
  6. package/dist/cjs/NiceIconSetCreator.js +683 -552
  7. package/dist/cjs/NiceIconStacker.js +547 -171
  8. package/dist/cjs/NiceIconValue.js +27 -35
  9. package/dist/cjs/NtdIconBadge.js +384 -360
  10. package/dist/cjs/NtdIconMorph.js +419 -354
  11. package/dist/cjs/NtdStateMorph.js +150 -147
  12. package/dist/cjs/advancedIconSearch.js +373 -510
  13. package/dist/cjs/animationControls.js +518 -642
  14. package/dist/cjs/client.js +12 -15
  15. package/dist/cjs/createIcon.js +349 -251
  16. package/dist/cjs/design-tokens.js +324 -390
  17. package/dist/cjs/figmaExport.js +162 -257
  18. package/dist/cjs/figmaSync.js +234 -316
  19. package/dist/cjs/headless-ui.js +240 -368
  20. package/dist/cjs/iconAnalytics.js +337 -393
  21. package/dist/cjs/iconHtml.js +64 -86
  22. package/dist/cjs/iconMetadata.js +392 -472
  23. package/dist/cjs/iconParts.js +120 -90
  24. package/dist/cjs/iconStack.js +136 -155
  25. package/dist/cjs/iconStyles.js +1609 -504
  26. package/dist/cjs/iconValue.js +359 -430
  27. package/dist/cjs/icons/accessibility.js +1119 -134
  28. package/dist/cjs/icons/actions.js +1290 -330
  29. package/dist/cjs/icons/ai.js +1424 -144
  30. package/dist/cjs/icons/brand.js +1344 -172
  31. package/dist/cjs/icons/business.js +903 -193
  32. package/dist/cjs/icons/devtech.js +1656 -227
  33. package/dist/cjs/icons/ecommerce.js +802 -111
  34. package/dist/cjs/icons/education.js +1345 -199
  35. package/dist/cjs/icons/files.js +1597 -328
  36. package/dist/cjs/icons/fintech.js +793 -104
  37. package/dist/cjs/icons/food.js +1507 -153
  38. package/dist/cjs/icons/fun.js +786 -109
  39. package/dist/cjs/icons/gaming.js +916 -170
  40. package/dist/cjs/icons/health.js +623 -112
  41. package/dist/cjs/icons/index.js +34 -35
  42. package/dist/cjs/icons/input.js +282 -83
  43. package/dist/cjs/icons/legal.js +1065 -122
  44. package/dist/cjs/icons/media.js +1061 -267
  45. package/dist/cjs/icons/navigation.js +387 -122
  46. package/dist/cjs/icons/omniverk.js +747 -90
  47. package/dist/cjs/icons/realestate.js +1520 -193
  48. package/dist/cjs/icons/saas.js +867 -98
  49. package/dist/cjs/icons/science.js +1465 -165
  50. package/dist/cjs/icons/shapes.js +1316 -308
  51. package/dist/cjs/icons/smarthome.js +786 -90
  52. package/dist/cjs/icons/social.js +591 -59
  53. package/dist/cjs/icons/sports.js +1225 -133
  54. package/dist/cjs/icons/sustainability.js +1211 -139
  55. package/dist/cjs/icons/travel.js +1470 -148
  56. package/dist/cjs/icons/ui.js +1508 -315
  57. package/dist/cjs/icons/weather.js +1160 -173
  58. package/dist/cjs/index.js +566 -566
  59. package/dist/cjs/lottieIntegration.js +261 -266
  60. package/dist/cjs/nicetodev-icons.css +1 -1
  61. package/dist/cjs/particleEffects.js +270 -251
  62. package/dist/cjs/resolver.js +229 -284
  63. package/dist/cjs/rsc.js +175 -193
  64. package/dist/cjs/sharpen.js +73 -130
  65. package/dist/cjs/smilAnimations.js +371 -165
  66. package/dist/cjs/stacking.js +87 -122
  67. package/dist/cjs/tailwind-plugin.js +280 -320
  68. package/dist/cjs/types.js +46 -72
  69. package/dist/cjs/utilities.js +163 -324
  70. package/dist/cjs/variantProps.js +12 -52
  71. package/dist/esm/NiceDesktopIconExporter.js +671 -598
  72. package/dist/esm/NiceFaviconGenerator.js +583 -416
  73. package/dist/esm/NiceIconPicker.js +789 -507
  74. package/dist/esm/NiceIconPreview.js +247 -187
  75. package/dist/esm/NiceIconSetCreator.js +685 -551
  76. package/dist/esm/NiceIconStacker.js +549 -170
  77. package/dist/esm/NiceIconValue.js +29 -34
  78. package/dist/esm/NtdIconBadge.js +388 -359
  79. package/dist/esm/NtdIconMorph.js +423 -353
  80. package/dist/esm/NtdStateMorph.js +152 -146
  81. package/dist/esm/advancedIconSearch.js +391 -509
  82. package/dist/esm/animationControls.js +527 -641
  83. package/dist/esm/client.js +48 -10
  84. package/dist/esm/createIcon.js +350 -250
  85. package/dist/esm/design-tokens.js +334 -387
  86. package/dist/esm/figmaExport.js +170 -256
  87. package/dist/esm/figmaSync.js +237 -315
  88. package/dist/esm/headless-ui.js +254 -365
  89. package/dist/esm/iconAnalytics.js +342 -392
  90. package/dist/esm/iconHtml.js +67 -85
  91. package/dist/esm/iconMetadata.js +404 -471
  92. package/dist/esm/iconParts.js +125 -89
  93. package/dist/esm/iconStack.js +145 -154
  94. package/dist/esm/iconStyles.js +1620 -503
  95. package/dist/esm/iconValue.js +361 -429
  96. package/dist/esm/icons/accessibility.js +1133 -133
  97. package/dist/esm/icons/actions.js +1320 -329
  98. package/dist/esm/icons/ai.js +1441 -143
  99. package/dist/esm/icons/brand.js +1351 -171
  100. package/dist/esm/icons/business.js +931 -201
  101. package/dist/esm/icons/devtech.js +1687 -226
  102. package/dist/esm/icons/ecommerce.js +816 -110
  103. package/dist/esm/icons/education.js +1364 -198
  104. package/dist/esm/icons/files.js +1628 -327
  105. package/dist/esm/icons/fintech.js +807 -103
  106. package/dist/esm/icons/food.js +1524 -152
  107. package/dist/esm/icons/fun.js +801 -108
  108. package/dist/esm/icons/gaming.js +933 -169
  109. package/dist/esm/icons/health.js +636 -111
  110. package/dist/esm/icons/index.js +596 -32
  111. package/dist/esm/icons/input.js +326 -82
  112. package/dist/esm/icons/legal.js +1079 -121
  113. package/dist/esm/icons/media.js +1086 -266
  114. package/dist/esm/icons/navigation.js +401 -121
  115. package/dist/esm/icons/omniverk.js +759 -89
  116. package/dist/esm/icons/realestate.js +1544 -198
  117. package/dist/esm/icons/saas.js +880 -97
  118. package/dist/esm/icons/science.js +1482 -164
  119. package/dist/esm/icons/shapes.js +1343 -307
  120. package/dist/esm/icons/smarthome.js +799 -89
  121. package/dist/esm/icons/social.js +599 -58
  122. package/dist/esm/icons/sports.js +1240 -132
  123. package/dist/esm/icons/sustainability.js +1226 -138
  124. package/dist/esm/icons/travel.js +1486 -147
  125. package/dist/esm/icons/ui.js +1540 -314
  126. package/dist/esm/icons/weather.js +1181 -172
  127. package/dist/esm/index.js +756 -58
  128. package/dist/esm/lottieIntegration.js +264 -265
  129. package/dist/esm/nicetodev-icons.css +1 -1
  130. package/dist/esm/particleEffects.js +271 -250
  131. package/dist/esm/resolver.js +231 -283
  132. package/dist/esm/rsc.js +182 -192
  133. package/dist/esm/sharpen.js +78 -129
  134. package/dist/esm/smilAnimations.js +376 -164
  135. package/dist/esm/stacking.js +99 -121
  136. package/dist/esm/tailwind-plugin.js +282 -319
  137. package/dist/esm/types.js +50 -71
  138. package/dist/esm/utilities.js +177 -321
  139. package/dist/esm/variantProps.js +23 -52
  140. package/dist/types/icons/index.d.ts +1 -1
  141. package/dist/types/icons/science.d.ts +9 -0
  142. package/package.json +15 -22
@@ -1,98 +1,134 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { createIcon } from './createIcon.js';
3
-
4
- /**
5
- * The colour of a detail drawn in secondary on a filled shape (a floppy's label, a ribbon): the
6
- * secondary colour, but the accent colour in the cutout's mask — there secondary is cut out with
7
- * the shape and the detail would vanish, while the accent draws in the cut.
8
- */
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { createIcon } from "./createIcon.js";
9
3
  function detailColor({ variant, secondaryColor, accentColor }) {
10
- return variant === 'cutout' ? accentColor : secondaryColor;
4
+ return variant === "cutout" ? accentColor : secondaryColor;
11
5
  }
12
- /**
13
- * A duotone renderer with its two colours swapped, at full strength (1.3.8) — for a duotone that
14
- * drew its larger area in secondary (a pale body under a primary outline): the body turns
15
- * primary, the outline and the details secondary.
16
- */
17
6
  function swapDuotone(render) {
18
- return (props) => render({
19
- ...props,
20
- primaryColor: props.secondaryColor,
21
- secondaryColor: props.primaryColor,
22
- secondaryOpacity: 1,
23
- });
7
+ return (props) => render({
8
+ ...props,
9
+ primaryColor: props.secondaryColor,
10
+ secondaryColor: props.primaryColor,
11
+ secondaryOpacity: 1
12
+ });
24
13
  }
25
- /**
26
- * `content` drawn only inside `shape` — for accent lines that read as a cut through a shape (a
27
- * pencil's band, a calendar's header line, an envelope's flap): clipped, they meet the shape's
28
- * edges flush in every variant, where their round caps used to stick out of it (and `sharp` /
29
- * `rounded` re-cap every stroke, so caps alone cannot do it).
30
- *
31
- * `uid` is the icon's `IconRenderProps.uid`; `name` tells the clips of one icon apart. Without a
32
- * `uid` — a renderer called outside createIcon — the content is drawn as it is.
33
- */
34
14
  function within(uid, name, shape, content) {
35
- if (!uid) {
36
- return content;
37
- }
38
- const id = `${uid}${name}`;
39
- return (jsxs(Fragment, { children: [jsx("clipPath", { id: id, children: shape }), jsx("g", { clipPath: `url(#${id})`, children: content })] }));
15
+ if (!uid) {
16
+ return content;
17
+ }
18
+ const id = `${uid}${name}`;
19
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
20
+ /* @__PURE__ */ jsx("clipPath", { id, children: shape }),
21
+ /* @__PURE__ */ jsx("g", { clipPath: `url(#${id})`, children: content })
22
+ ] });
40
23
  }
41
- const BELL = 'M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z';
42
- /** The clapper: a half disc r 3 under the bell (it was a thin arc). */
43
- const BELL_CLAPPER = 'M9 18.5h6a3 3 0 01-6 0z';
44
- const BELL_CLAPPER_LINE = 'M9 19a3 3 0 006 0';
45
- /** NtdBellRing's ring marks, either side of the crown. */
46
- const BELL_RINGS = 'M2 4l1.5 1.5M22 4l-1.5 1.5';
47
- /**
48
- * NtdBell and NtdBellRing, so the two share one bell; `ringing` adds the ring marks. Duotone and
49
- * vivid are fills only: the bell primary, the clapper secondary. The marks are primary on the solid
50
- * bell, secondary in duotone and in the accent colour in vivid.
51
- */
24
+ const BELL = "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z";
25
+ const BELL_CLAPPER = "M9 18.5h6a3 3 0 01-6 0z";
26
+ const BELL_CLAPPER_LINE = "M9 19a3 3 0 006 0";
27
+ const BELL_RINGS = "M2 4l1.5 1.5M22 4l-1.5 1.5";
52
28
  function bellIcon(displayName, ringing) {
53
- const parts = ({ primaryColor, strokeWidth }, detail, rings, ringsOpacity = 1) => (jsxs(Fragment, { children: [jsx("path", { d: BELL, fill: primaryColor }), jsx("path", { d: BELL_CLAPPER, fill: detail }), ringing && (jsx("path", { d: BELL_RINGS, stroke: rings, strokeWidth: strokeWidth, opacity: ringsOpacity }))] }));
54
- return createIcon({
55
- displayName,
56
- // stacked icons and text go into the bell's body, above the clapper (1.3.8)
57
- perfectStackX: 12,
58
- perfectStackY: 10.5,
59
- perfectStackSize: 0.4,
60
- paths: {
61
- solid: (props) => parts(props, props.primaryColor, props.primaryColor),
62
- outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${BELL}${BELL_CLAPPER_LINE}${ringing ? BELL_RINGS : ''}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
63
- duotone: (props) => parts(props, props.secondaryColor, props.secondaryColor),
64
- vivid: (props) => parts(props, props.secondaryColor, props.accentColor, props.accentOpacity),
65
- },
66
- });
29
+ const parts = ({ primaryColor, strokeWidth }, detail, rings, ringsOpacity = 1) => /* @__PURE__ */ jsxs(Fragment, { children: [
30
+ /* @__PURE__ */ jsx("path", { d: BELL, fill: primaryColor }),
31
+ /* @__PURE__ */ jsx("path", { d: BELL_CLAPPER, fill: detail }),
32
+ ringing && /* @__PURE__ */ jsx("path", { d: BELL_RINGS, stroke: rings, strokeWidth, opacity: ringsOpacity })
33
+ ] });
34
+ return createIcon({
35
+ displayName,
36
+ // stacked icons and text go into the bell's body, above the clapper (1.3.8)
37
+ perfectStackX: 12,
38
+ perfectStackY: 10.5,
39
+ perfectStackSize: 0.4,
40
+ paths: {
41
+ solid: (props) => parts(props, props.primaryColor, props.primaryColor),
42
+ outline: ({ primaryColor, strokeWidth }) => /* @__PURE__ */ jsx(
43
+ "path",
44
+ {
45
+ d: `${BELL}${BELL_CLAPPER_LINE}${ringing ? BELL_RINGS : ""}`,
46
+ stroke: primaryColor,
47
+ strokeWidth,
48
+ fill: "none"
49
+ }
50
+ ),
51
+ duotone: (props) => parts(props, props.secondaryColor, props.secondaryColor),
52
+ vivid: (props) => parts(props, props.secondaryColor, props.accentColor, props.accentOpacity)
53
+ }
54
+ });
67
55
  }
68
- /** The page of every paper icon: 16 × 20, its top-right corner folded over 8. */
69
- const PAPER = 'M12 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V10z';
70
- const PAPER_FOLD = 'M12 2v6a2 2 0 002 2h6z';
71
- const PAPER_FOLD_LINE = 'M12 2v8h8';
72
- const PAPER_SHARP = 'M12 2H4v20h16V10z';
73
- const PAPER_FOLD_SHARP = 'M12 2v8h8z';
74
- /**
75
- * A paper icon — NtdFile, and every document drawn on the same page (NtdFileText, NtdInvoice,
76
- * NtdContract, …), so their pages and folds match. The fold is secondary when the page is filled;
77
- * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7–17),
78
- * drawn in the accent colour on a filled page (secondary in duotone) and in primary on a stroked one.
79
- */
80
- function paperIcon(displayName, text = '') {
81
- return createIcon({
82
- displayName,
83
- // stacked icons and text go onto the page below the fold (1.3.8), the same on every paper
84
- perfectStackX: 12,
85
- perfectStackY: 14,
86
- perfectStackSize: 0.5,
87
- paths: {
88
- solid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: primaryColor }), jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
89
- // square at every corner, the fold included — the derived `sharp` keeps a path's arcs round
90
- sharp: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER_SHARP, fill: primaryColor }), jsx("path", { d: PAPER_FOLD_SHARP, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: accentColor, strokeOpacity: accentOpacity, strokeWidth: "1.5", fill: "none" }))] })),
91
- outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${PAPER}${PAPER_FOLD_LINE}${text}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
92
- // duotone (1.3.8): createIcon's default — the solid page, its writing in secondary like the fold
93
- vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: PAPER, fill: primaryColor }), jsx("path", { d: PAPER, fill: "white", opacity: "0.1" }), jsx("path", { d: PAPER_FOLD, fill: secondaryColor }), text && (jsx("path", { d: text, stroke: "white", strokeOpacity: "0.9", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }))] })),
94
- },
95
- });
56
+ const PAPER = "M12 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V10z";
57
+ const PAPER_FOLD = "M12 2v6a2 2 0 002 2h6z";
58
+ const PAPER_FOLD_LINE = "M12 2v8h8";
59
+ const PAPER_SHARP = "M12 2H4v20h16V10z";
60
+ const PAPER_FOLD_SHARP = "M12 2v8h8z";
61
+ function paperIcon(displayName, text = "") {
62
+ return createIcon({
63
+ displayName,
64
+ // stacked icons and text go onto the page below the fold (1.3.8), the same on every paper
65
+ perfectStackX: 12,
66
+ perfectStackY: 14,
67
+ perfectStackSize: 0.5,
68
+ paths: {
69
+ solid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => /* @__PURE__ */ jsxs(Fragment, { children: [
70
+ /* @__PURE__ */ jsx("path", { d: PAPER, fill: primaryColor }),
71
+ /* @__PURE__ */ jsx("path", { d: PAPER_FOLD, fill: secondaryColor }),
72
+ text && /* @__PURE__ */ jsx(
73
+ "path",
74
+ {
75
+ d: text,
76
+ stroke: accentColor,
77
+ strokeOpacity: accentOpacity,
78
+ strokeWidth: "1.5",
79
+ strokeLinecap: "round",
80
+ fill: "none"
81
+ }
82
+ )
83
+ ] }),
84
+ // square at every corner, the fold included — the derived `sharp` keeps a path's arcs round
85
+ sharp: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => /* @__PURE__ */ jsxs(Fragment, { children: [
86
+ /* @__PURE__ */ jsx("path", { d: PAPER_SHARP, fill: primaryColor }),
87
+ /* @__PURE__ */ jsx("path", { d: PAPER_FOLD_SHARP, fill: secondaryColor }),
88
+ text && /* @__PURE__ */ jsx(
89
+ "path",
90
+ {
91
+ d: text,
92
+ stroke: accentColor,
93
+ strokeOpacity: accentOpacity,
94
+ strokeWidth: "1.5",
95
+ fill: "none"
96
+ }
97
+ )
98
+ ] }),
99
+ outline: ({ primaryColor, strokeWidth }) => /* @__PURE__ */ jsx(
100
+ "path",
101
+ {
102
+ d: `${PAPER}${PAPER_FOLD_LINE}${text}`,
103
+ stroke: primaryColor,
104
+ strokeWidth,
105
+ fill: "none"
106
+ }
107
+ ),
108
+ // duotone (1.3.8): createIcon's default — the solid page, its writing in secondary like the fold
109
+ vivid: ({ primaryColor, secondaryColor }) => /* @__PURE__ */ jsxs(Fragment, { children: [
110
+ /* @__PURE__ */ jsx("path", { d: PAPER, fill: primaryColor }),
111
+ /* @__PURE__ */ jsx("path", { d: PAPER, fill: "white", opacity: "0.1" }),
112
+ /* @__PURE__ */ jsx("path", { d: PAPER_FOLD, fill: secondaryColor }),
113
+ text && /* @__PURE__ */ jsx(
114
+ "path",
115
+ {
116
+ d: text,
117
+ stroke: "white",
118
+ strokeOpacity: "0.9",
119
+ strokeWidth: "1.5",
120
+ strokeLinecap: "round",
121
+ fill: "none"
122
+ }
123
+ )
124
+ ] })
125
+ }
126
+ });
96
127
  }
97
-
98
- export { bellIcon, detailColor, paperIcon, swapDuotone, within };
128
+ export {
129
+ bellIcon,
130
+ detailColor,
131
+ paperIcon,
132
+ swapDuotone,
133
+ within
134
+ };
@@ -1,176 +1,167 @@
1
- import { jsx, Fragment } from 'react/jsx-runtime';
2
- import { createElement } from 'react';
3
-
4
- /** A name `textBinding` can take: a JavaScript identifier. */
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
+ import { createElement } from "react";
5
3
  function isValidTextBinding(name) {
6
- return !!name && /^[A-Za-z_$][\w$]*$/.test(name);
4
+ return !!name && /^[A-Za-z_$][\w$]*$/.test(name);
7
5
  }
8
- /** The id of the layer `layer` sits in, `undefined` for the base. */
9
6
  function stackParentId(layers, layer) {
10
- var _a, _b;
11
- return layer === layers[0] ? undefined : ((_a = layer.parent) !== null && _a !== void 0 ? _a : (_b = layers[0]) === null || _b === void 0 ? void 0 : _b.id);
7
+ return layer === layers[0] ? void 0 : layer.parent ?? layers[0]?.id;
12
8
  }
13
- /** The layers that sit directly in layer `id`, in order. */
14
9
  function stackChildrenOf(layers, id) {
15
- return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
10
+ return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
16
11
  }
17
- /** An icon's name as people read it: the export name without `Ntd` — `NtdAlertBell` → `AlertBell`. */
18
12
  function iconDisplayName(name) {
19
- return name.replace(/^Ntd(?=[A-Z0-9])/, '');
13
+ return name.replace(/^Ntd(?=[A-Z0-9])/, "");
20
14
  }
21
- /** A short id no layer of the stack has yet: `'1'`, `'2'`… (1.3.9 — it was the icon name and a timestamp). */
22
15
  function nextStackLayerId(layers) {
23
- const taken = new Set(layers.map((l) => l.id));
24
- let n = layers.length + 1;
25
- while (taken.has(String(n))) {
26
- n += 1;
27
- }
28
- return String(n);
16
+ const taken = new Set(layers.map((l) => l.id));
17
+ let n = layers.length + 1;
18
+ while (taken.has(String(n))) {
19
+ n += 1;
20
+ }
21
+ return String(n);
29
22
  }
30
- /**
31
- * Puts an icon on the stack (1.3.9): into layer `into` (the base when absent or unknown), or as the
32
- * base of an empty stack. Returns the new layers and the new layer's id.
33
- */
34
23
  function addStackLayer(layers, icon, into) {
35
- const id = nextStackLayerId(layers);
36
- const parent = layers.find((l) => l.id === into);
37
- const layer = {
38
- id,
39
- icon: icon.icon,
40
- ...(icon.variant ? { variant: icon.variant } : {}),
41
- ...(parent && parent !== layers[0] ? { parent: parent.id } : {}),
42
- };
43
- return { layers: [...layers, layer], id };
24
+ const id = nextStackLayerId(layers);
25
+ const parent = layers.find((l) => l.id === into);
26
+ const layer = {
27
+ id,
28
+ icon: icon.icon,
29
+ ...icon.variant ? { variant: icon.variant } : {},
30
+ ...parent && parent !== layers[0] ? { parent: parent.id } : {}
31
+ };
32
+ return { layers: [...layers, layer], id };
44
33
  }
45
- /**
46
- * Takes a layer off the stack (1.3.9; NiceIconStacker's own until then): what sat in it moves up
47
- * into its parent, and a removed base hands over to its first child.
48
- */
49
34
  function removeStackLayer(layers, id) {
50
- const base = layers[0];
51
- if (!base) {
52
- return [];
53
- }
54
- if (id !== base.id) {
55
- const gone = layers.find((l) => l.id === id);
56
- const up = gone ? stackParentId(layers, gone) : undefined;
57
- return layers
58
- .filter((l) => l.id !== id)
59
- .map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
60
- }
61
- const [heir, ...siblings] = stackChildrenOf(layers, base.id);
62
- if (!heir) {
63
- return [];
64
- }
65
- const newBase = {
66
- ...heir,
67
- parent: undefined,
68
- align: undefined,
69
- size: undefined,
70
- rotation: undefined,
71
- offsetX: undefined,
72
- offsetY: undefined,
73
- };
74
- return [
75
- newBase,
76
- ...layers
77
- .filter((l) => l.id !== base.id && l.id !== heir.id)
78
- .map((l) => siblings.includes(l)
79
- ? { ...l, parent: heir.id }
80
- : l.parent === heir.id
81
- ? { ...l, parent: undefined }
82
- : l),
83
- ];
35
+ const base = layers[0];
36
+ if (!base) {
37
+ return [];
38
+ }
39
+ if (id !== base.id) {
40
+ const gone = layers.find((l) => l.id === id);
41
+ const up = gone ? stackParentId(layers, gone) : void 0;
42
+ return layers.filter((l) => l.id !== id).map((l) => l.parent === id ? { ...l, parent: up === base.id ? void 0 : up } : l);
43
+ }
44
+ const [heir, ...siblings] = stackChildrenOf(layers, base.id);
45
+ if (!heir) {
46
+ return [];
47
+ }
48
+ const newBase = {
49
+ ...heir,
50
+ parent: void 0,
51
+ align: void 0,
52
+ size: void 0,
53
+ rotation: void 0,
54
+ offsetX: void 0,
55
+ offsetY: void 0
56
+ };
57
+ return [
58
+ newBase,
59
+ ...layers.filter((l) => l.id !== base.id && l.id !== heir.id).map(
60
+ (l) => siblings.includes(l) ? { ...l, parent: heir.id } : l.parent === heir.id ? { ...l, parent: void 0 } : l
61
+ )
62
+ ];
84
63
  }
85
- const COLOR_PROPS = ['primaryColor', 'secondaryColor', 'accentColor', 'textColor'];
86
- /** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
64
+ const COLOR_PROPS = ["primaryColor", "secondaryColor", "accentColor", "textColor"];
87
65
  function niceIconStackCode(layers) {
88
- const base = layers[0];
89
- if (!base) {
90
- return '';
66
+ const base = layers[0];
67
+ if (!base) {
68
+ return "";
69
+ }
70
+ const bound = layers.filter((l) => isValidTextBinding(l.textBinding));
71
+ const write = (layer, parent, indent) => {
72
+ const attrs = [
73
+ // the parent's own spot is the default (1.3.8), so only another position is written
74
+ parent && layer.align && layer.align !== "perfect" ? `stackAlign="${layer.align}"` : "",
75
+ parent && layer.size !== void 0 ? `stackSize={${layer.size}}` : "",
76
+ parent && layer.rotation !== void 0 ? `stackRotation={${layer.rotation}}` : "",
77
+ parent && layer.offsetX ? `stackOffsetX={${layer.offsetX}}` : "",
78
+ parent && layer.offsetY ? `stackOffsetY={${layer.offsetY}}` : "",
79
+ layer.variant && layer.variant !== parent?.variant ? `variant="${layer.variant}"` : "",
80
+ ...COLOR_PROPS.map((p) => layer[p] ? `${p}="${layer[p]}"` : ""),
81
+ layer.textSize !== void 0 ? `textSize={${layer.textSize}}` : ""
82
+ ].filter(Boolean).join(" ");
83
+ const open = `${layer.icon}${attrs ? ` ${attrs}` : ""}`;
84
+ const text = isValidTextBinding(layer.textBinding) ? `{${layer.textBinding}}` : layer.text;
85
+ const inner = stackChildrenOf(layers, layer.id);
86
+ if (inner.length === 0) {
87
+ return text ? `${indent}<${open}>${text}</${layer.icon}>` : `${indent}<${open} />`;
91
88
  }
92
- const bound = layers.filter((l) => isValidTextBinding(l.textBinding));
93
- const write = (layer, parent, indent) => {
94
- const attrs = [
95
- // the parent's own spot is the default (1.3.8), so only another position is written
96
- parent && layer.align && layer.align !== 'perfect' ? `stackAlign="${layer.align}"` : '',
97
- parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
98
- parent && layer.rotation !== undefined ? `stackRotation={${layer.rotation}}` : '',
99
- parent && layer.offsetX ? `stackOffsetX={${layer.offsetX}}` : '',
100
- parent && layer.offsetY ? `stackOffsetY={${layer.offsetY}}` : '',
101
- layer.variant && layer.variant !== (parent === null || parent === void 0 ? void 0 : parent.variant) ? `variant="${layer.variant}"` : '',
102
- ...COLOR_PROPS.map((p) => (layer[p] ? `${p}="${layer[p]}"` : '')),
103
- layer.textSize !== undefined ? `textSize={${layer.textSize}}` : '',
104
- ]
105
- .filter(Boolean)
106
- .join(' ');
107
- const open = `${layer.icon}${attrs ? ` ${attrs}` : ''}`;
108
- const text = isValidTextBinding(layer.textBinding) ? `{${layer.textBinding}}` : layer.text;
109
- const inner = stackChildrenOf(layers, layer.id);
110
- if (inner.length === 0) {
111
- return text ? `${indent}<${open}>${text}</${layer.icon}>` : `${indent}<${open} />`;
112
- }
113
- return [
114
- `${indent}<${open}>`,
115
- ...(text ? [`${indent} ${text}`] : []),
116
- ...inner.map((child) => write(child, layer, `${indent} `)),
117
- `${indent}</${layer.icon}>`,
118
- ].join('\n');
119
- };
120
- const notes = bound.map((l) => `// {${l.textBinding}}: bound text${l.text ? `, e.g. "${l.text}"` : ''}`);
121
- return [...notes, write(base, undefined, '')].join('\n');
89
+ return [
90
+ `${indent}<${open}>`,
91
+ ...text ? [`${indent} ${text}`] : [],
92
+ ...inner.map((child) => write(child, layer, `${indent} `)),
93
+ `${indent}</${layer.icon}>`
94
+ ].join("\n");
95
+ };
96
+ const notes = bound.map(
97
+ (l) => `// {${l.textBinding}}: bound text${l.text ? `, e.g. "${l.text}"` : ""}`
98
+ );
99
+ return [...notes, write(base, void 0, "")].join("\n");
122
100
  }
123
- /**
124
- * The stack drawn as icons — the base wrapping the layers that sit in it, text innermost (1.3.6).
125
- * One SVG, as nesting the icons by hand would give.
126
- */
127
101
  function renderIconStack(layers, icons, { baseProps, values } = {}) {
128
- const lookup = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
129
- // a stack kept as text names its icons without `Ntd` (1.3.10)
130
- const resolve = (name) => { var _a; return (_a = lookup(name)) !== null && _a !== void 0 ? _a : lookup(`Ntd${name}`); };
131
- const draw = (layer, parent) => {
132
- var _a;
133
- const Icon = resolve(layer.icon);
134
- if (!Icon) {
135
- return null;
136
- }
137
- const bound = isValidTextBinding(layer.textBinding) ? values === null || values === void 0 ? void 0 : values[layer.textBinding] : undefined;
138
- const text = bound !== null && bound !== void 0 ? bound : layer.text;
139
- const own = {
140
- primaryColor: layer.primaryColor,
141
- secondaryColor: layer.secondaryColor,
142
- accentColor: layer.accentColor,
143
- textColor: layer.textColor,
144
- textSize: layer.textSize,
145
- };
146
- const inner = stackChildrenOf(layers, layer.id).map((child) => draw(child, layer));
147
- if (!parent) {
148
- const props = { ...baseProps };
149
- for (const [k, v] of Object.entries(own)) {
150
- if (v !== undefined) {
151
- props[k] = v;
152
- }
153
- }
154
- return (createElement(Icon, { ...props, key: layer.id, variant: (_a = layer.variant) !== null && _a !== void 0 ? _a : baseProps === null || baseProps === void 0 ? void 0 : baseProps.variant },
155
- inner,
156
- text));
157
- }
158
- return (createElement(Icon, { ...own, key: layer.id, stackAlign: layer.align, stackSize: layer.size, stackRotation: layer.rotation, stackOffsetX: layer.offsetX, stackOffsetY: layer.offsetY, variant: layer.variant !== parent.variant ? layer.variant : undefined },
159
- inner,
160
- text));
102
+ const lookup = (name) => typeof icons === "function" ? icons(name) : icons[name];
103
+ const resolve = (name) => lookup(name) ?? lookup(`Ntd${name}`);
104
+ const draw = (layer, parent) => {
105
+ const Icon = resolve(layer.icon);
106
+ if (!Icon) {
107
+ return null;
108
+ }
109
+ const bound = isValidTextBinding(layer.textBinding) ? values?.[layer.textBinding] : void 0;
110
+ const text = bound ?? layer.text;
111
+ const own = {
112
+ primaryColor: layer.primaryColor,
113
+ secondaryColor: layer.secondaryColor,
114
+ accentColor: layer.accentColor,
115
+ textColor: layer.textColor,
116
+ textSize: layer.textSize
161
117
  };
162
- return layers[0] ? draw(layers[0], undefined) : null;
118
+ const inner = stackChildrenOf(layers, layer.id).map((child) => draw(child, layer));
119
+ if (!parent) {
120
+ const props = { ...baseProps };
121
+ for (const [k, v] of Object.entries(own)) {
122
+ if (v !== void 0) {
123
+ props[k] = v;
124
+ }
125
+ }
126
+ return /* @__PURE__ */ createElement(Icon, { ...props, key: layer.id, variant: layer.variant ?? baseProps?.variant }, inner, text);
127
+ }
128
+ return /* @__PURE__ */ createElement(
129
+ Icon,
130
+ {
131
+ ...own,
132
+ key: layer.id,
133
+ stackAlign: layer.align,
134
+ stackSize: layer.size,
135
+ stackRotation: layer.rotation,
136
+ stackOffsetX: layer.offsetX,
137
+ stackOffsetY: layer.offsetY,
138
+ variant: layer.variant !== parent.variant ? layer.variant : void 0
139
+ },
140
+ inner,
141
+ text
142
+ );
143
+ };
144
+ return layers[0] ? draw(layers[0], void 0) : null;
163
145
  }
164
- /**
165
- * NiceIconStack (1.3.6) — draws a stack kept as data (NiceIconStacker's layers) as one icon, its
166
- * bound text filled from `values`: `<NiceIconStack layers={stack} icons={icons} values={{ count }} />`.
167
- * The rest of the props go to the base icon.
168
- */
169
- function NiceIconStack({ layers, icons, values, ...baseProps }) {
170
- return jsx(Fragment, { children: renderIconStack(layers, icons, { baseProps, values }) });
146
+ function NiceIconStack({
147
+ layers,
148
+ icons,
149
+ values,
150
+ ...baseProps
151
+ }) {
152
+ return /* @__PURE__ */ jsx(Fragment, { children: renderIconStack(layers, icons, { baseProps, values }) });
171
153
  }
172
- if (process.env.NODE_ENV !== 'production') {
173
- NiceIconStack.displayName = 'NiceIconStack';
154
+ if (process.env.NODE_ENV !== "production") {
155
+ NiceIconStack.displayName = "NiceIconStack";
174
156
  }
175
-
176
- export { NiceIconStack, addStackLayer, iconDisplayName, isValidTextBinding, niceIconStackCode, removeStackLayer, renderIconStack, stackChildrenOf, stackParentId };
157
+ export {
158
+ NiceIconStack,
159
+ addStackLayer,
160
+ iconDisplayName,
161
+ isValidTextBinding,
162
+ niceIconStackCode,
163
+ removeStackLayer,
164
+ renderIconStack,
165
+ stackChildrenOf,
166
+ stackParentId
167
+ };