@nice2dev/icons 1.3.15 → 1.3.16

package/dist/esm/stacking.js

@@ -1,142 +1,120 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Children, cloneElement, isValidElement } from 'react';
-
-/**
- * Icons stacked by nesting (1.3.5): `<NtdSquare><NtdStar stackAlign="center">1</NtdStar></NtdSquare>`.
- * An icon draws its children inside its own `<svg>` — an icon child as a nested `<svg>` placed by
- * its `stackAlign` / `stackSize`, text centred on the icon, anything else as it is. So the stack
- * is one SVG: it exports and copies like any icon.
- */
-/** Set on every component createIcon makes, so a parent icon tells its icon children apart. */
-const NTD_ICON_MARK = 'ntdIcon';
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+const NTD_ICON_MARK = "ntdIcon";
 function isNtdIconElement(node) {
-    return (isValidElement(node) &&
-        typeof node.type !== 'string' &&
-        Boolean(node.type[NTD_ICON_MARK]));
+  return isValidElement(node) && typeof node.type !== "string" && Boolean(node.type[NTD_ICON_MARK]);
 }
-/** Set on every component createIcon makes, next to {@link NTD_ICON_MARK}: its {@link PerfectStack}. */
-const PERFECT_STACK = 'perfectStack';
-/** The spot icon component `icon` keeps for stacked icons; `undefined` when it is not an icon. */
+const PERFECT_STACK = "perfectStack";
 function perfectStackOf(icon) {
-    return icon && (typeof icon === 'object' || typeof icon === 'function')
-        ? icon[PERFECT_STACK]
-        : undefined;
+  return icon && (typeof icon === "object" || typeof icon === "function") ? icon[PERFECT_STACK] : void 0;
 }
-/** A child of the spot's default size and no turn, at the box centre — `'center'`. */
 const BOX_PERFECT_STACK = { rotation: 0, size: 0.6 };
-/** Variants drawn with lines; every other variant is a filled shape. */
-const LINE_VARIANTS = new Set(['outline', 'wireframe']);
+const LINE_VARIANTS = /* @__PURE__ */ new Set(["outline", "wireframe"]);
 function isFilledVariant(variant) {
-    return !LINE_VARIANTS.has(variant);
+  return !LINE_VARIANTS.has(variant);
 }
-/** Default share of the parent: centred children larger, edge and corner badges smaller. */
 function defaultStackSize(align) {
-    return align === 'center' ? 0.6 : 0.5;
+  return align === "center" ? 0.6 : 0.5;
 }
-/**
- * Top-left corner of a stacked icon `size` units big inside the 24-unit box. A `half-…` position is
- * halfway between the centre and the edge or corner it names (1.3.6).
- */
 function stackPlacement(align, size) {
-    const far = 24 - size;
-    const mid = far / 2;
-    const half = align.startsWith('half-');
-    const edge = half ? align.slice(5) : align;
-    const x = edge.endsWith('left') ? 0 : edge.endsWith('right') ? far : mid;
-    const y = edge.startsWith('top') ? 0 : edge.startsWith('bottom') ? far : mid;
-    return half ? [(x + mid) / 2, (y + mid) / 2] : [x, y];
+  const far = 24 - size;
+  const mid = far / 2;
+  const half = align.startsWith("half-");
+  const edge = half ? align.slice(5) : align;
+  const x = edge.endsWith("left") ? 0 : edge.endsWith("right") ? far : mid;
+  const y = edge.startsWith("top") ? 0 : edge.startsWith("bottom") ? far : mid;
+  return half ? [(x + mid) / 2, (y + mid) / 2] : [x, y];
 }
-/**
- * `at` moved by `percent` of the parent (`stackOffsetX` / `stackOffsetY`, 1.3.7), in the parent's
- * 24 units. Rounded to a thousandth, so the markup reads 7.2, not 7.199999999999999.
- */
 function stackOffset(at, percent) {
-    return percent ? Math.round(1000 * at + 240 * percent) / 1000 : at;
+  return percent ? Math.round(1e3 * at + 240 * percent) / 1e3 : at;
 }
-/** A corner badge — a full corner; `half-` corners sit inside the parent like its centre. */
 function isCornerBadge(align) {
-    return /^(top|bottom)-(left|right)$/.test(align);
+  return /^(top|bottom)-(left|right)$/.test(align);
 }
-/**
- * Font size of text children by length: one character 9, two 7.5, three 6, more 5 (1.3.6 — three
- * quarters of the first sizes, so a number sits inside a star or a circle with room round it).
- * In a spot smaller or larger than the default 0.6 (`perfectStackSize`, 1.3.8) it scales with it.
- */
 function defaultTextSize(length, spot = BOX_PERFECT_STACK.size) {
-    const size = length <= 1 ? 9 : length === 2 ? 7.5 : length === 3 ? 6 : 5;
-    return spot === BOX_PERFECT_STACK.size
-        ? size
-        : Math.round((10 * size * spot) / BOX_PERFECT_STACK.size) / 10;
+  const size = length <= 1 ? 9 : length === 2 ? 7.5 : length === 3 ? 6 : 5;
+  return spot === BOX_PERFECT_STACK.size ? size : Math.round(10 * size * spot / BOX_PERFECT_STACK.size) / 10;
 }
-/** `n` rounded to a thousandth — 7.2 in the markup, not 7.199999999999999. */
-const thousandth = (n) => Math.round(1000 * n) / 1000;
-/** The cutout variant draws its shape at 80% in the tile; its stack follows the shape. */
-const CUTOUT_SHAPE = 'translate(12 12) scale(0.8) translate(-12 -12)';
-/** The gap kept round a corner badge, in the parent's units. */
+const thousandth = (n) => Math.round(1e3 * n) / 1e3;
+const CUTOUT_SHAPE = "translate(12 12) scale(0.8) translate(-12 -12)";
 const BADGE_GAP = 1;
-/**
- * The children of an icon, drawn into it. A child without a `stackAlign` goes to the spot the icon
- * keeps for it (`ctx.perfect`: its centre, size and turn), and so does text. Colours given on a
- * child win; otherwise:
- * - content inside — at that spot, centred, at an edge or halfway out — is cut out of a filled parent: an icon child takes
- *   the parent's accent as its primary (and the parent's primary as its accent, so its own text
- *   and details read), text the accent; on `outline` / `wireframe` it stays in the parent's
- *   colours; in a cutout it takes the tile's colour, drawn solid in the cut;
- * - a corner badge keeps the parent's colours and sits on a disc of the accent colour a little
- *   larger than itself — a gap cut into the parent where they overlap, unseen beyond it.
- */
 function renderStackChildren(children, ctx) {
-    var _a, _b;
-    const items = Children.toArray(children);
-    if (items.length === 0) {
-        return null;
+  const items = Children.toArray(children);
+  if (items.length === 0) {
+    return null;
+  }
+  const cutout = ctx.variant === "cutout";
+  const filled = isFilledVariant(ctx.variant);
+  const insidePrimary = cutout ? ctx.tileColor : filled ? ctx.accentColor : ctx.primaryColor;
+  const insideAccent = filled && !cutout ? ctx.primaryColor : ctx.accentColor;
+  const text = items.filter((c) => typeof c === "string" || typeof c === "number").join("");
+  const { perfect } = ctx;
+  const layers = items.map((child, i) => {
+    if (isNtdIconElement(child)) {
+      const p = child.props;
+      const align = p.stackAlign ?? "perfect";
+      const atSpot = align === "perfect";
+      const size = thousandth(
+        24 * (p.stackSize ?? (atSpot ? perfect.size : defaultStackSize(align)))
+      );
+      const [alignX, alignY] = atSpot ? [thousandth(perfect.x - size / 2), thousandth(perfect.y - size / 2)] : stackPlacement(align, size);
+      const x = stackOffset(alignX, p.stackOffsetX);
+      const y = stackOffset(alignY, p.stackOffsetY);
+      const badge = isCornerBadge(align);
+      const icon = cloneElement(child, {
+        x,
+        y,
+        size,
+        variant: p.variant ?? (cutout ? "solid" : ctx.variant),
+        primaryColor: p.primaryColor ?? (badge ? ctx.primaryColor : insidePrimary),
+        accentColor: p.accentColor ?? (badge ? ctx.accentColor : insideAccent),
+        strokeWidth: p.strokeWidth ?? ctx.strokeWidth
+      });
+      const cx = x + size / 2;
+      const cy = y + size / 2;
+      const rotation = p.stackRotation ?? (atSpot ? perfect.rotation : 0);
+      const turn = rotation ? `rotate(${rotation} ${cx} ${cy})` : void 0;
+      if (!badge && !turn) {
+        return icon;
+      }
+      return /* @__PURE__ */ jsxs("g", { transform: turn, children: [
+        badge && /* @__PURE__ */ jsx("circle", { cx, cy, r: size / 2 + BADGE_GAP, fill: ctx.accentColor }),
+        icon
+      ] }, child.key ?? i);
     }
-    const cutout = ctx.variant === 'cutout';
-    const filled = isFilledVariant(ctx.variant);
-    const insidePrimary = cutout ? ctx.tileColor : filled ? ctx.accentColor : ctx.primaryColor;
-    const insideAccent = filled && !cutout ? ctx.primaryColor : ctx.accentColor;
-    const text = items
-        .filter((c) => typeof c === 'string' || typeof c === 'number')
-        .join('');
-    const { perfect } = ctx;
-    const layers = items.map((child, i) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (isNtdIconElement(child)) {
-            const p = child.props;
-            const align = (_a = p.stackAlign) !== null && _a !== void 0 ? _a : 'perfect';
-            // the parent's own spot (1.3.8): its centre, size and turn, unless the child sets them
-            const atSpot = align === 'perfect';
-            const size = thousandth(24 * ((_b = p.stackSize) !== null && _b !== void 0 ? _b : (atSpot ? perfect.size : defaultStackSize(align))));
-            const [alignX, alignY] = atSpot
-                ? [thousandth(perfect.x - size / 2), thousandth(perfect.y - size / 2)]
-                : stackPlacement(align, size);
-            // nudged from the aligned spot (1.3.7) — a share of the parent, so it scales with it
-            const x = stackOffset(alignX, p.stackOffsetX);
-            const y = stackOffset(alignY, p.stackOffsetY);
-            const badge = isCornerBadge(align);
-            const icon = cloneElement(child, {
-                x,
-                y,
-                size,
-                variant: (_c = p.variant) !== null && _c !== void 0 ? _c : (cutout ? 'solid' : ctx.variant),
-                primaryColor: (_d = p.primaryColor) !== null && _d !== void 0 ? _d : (badge ? ctx.primaryColor : insidePrimary),
-                accentColor: (_e = p.accentColor) !== null && _e !== void 0 ? _e : (badge ? ctx.accentColor : insideAccent),
-                strokeWidth: (_f = p.strokeWidth) !== null && _f !== void 0 ? _f : ctx.strokeWidth,
-            });
-            const cx = x + size / 2;
-            const cy = y + size / 2;
-            // turned about its own centre (1.3.6) — through a group: a nested <svg> takes no transform
-            const rotation = (_g = p.stackRotation) !== null && _g !== void 0 ? _g : (atSpot ? perfect.rotation : 0);
-            const turn = rotation ? `rotate(${rotation} ${cx} ${cy})` : undefined;
-            if (!badge && !turn) {
-                return icon;
-            }
-            return (jsxs("g", { transform: turn, children: [badge && jsx("circle", { cx: cx, cy: cy, r: size / 2 + BADGE_GAP, fill: ctx.accentColor }), icon] }, (_h = child.key) !== null && _h !== void 0 ? _h : i));
-        }
-        return isValidElement(child) ? child : null;
-    });
-    const content = (jsxs(Fragment, { children: [layers, text && (jsx("text", { x: perfect.x, y: perfect.y, transform: perfect.rotation ? `rotate(${perfect.rotation} ${perfect.x} ${perfect.y})` : undefined, textAnchor: "middle", dominantBaseline: "central", fontSize: (_a = ctx.textSize) !== null && _a !== void 0 ? _a : defaultTextSize(text.length, perfect.size), fontWeight: 700, fill: (_b = ctx.textColor) !== null && _b !== void 0 ? _b : insidePrimary, stroke: "none", children: text }))] }));
-    return cutout ? jsx("g", { transform: CUTOUT_SHAPE, children: content }) : content;
+    return isValidElement(child) ? child : null;
+  });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    layers,
+    text && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: perfect.x,
+        y: perfect.y,
+        transform: perfect.rotation ? `rotate(${perfect.rotation} ${perfect.x} ${perfect.y})` : void 0,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fontSize: ctx.textSize ?? defaultTextSize(text.length, perfect.size),
+        fontWeight: 700,
+        fill: ctx.textColor ?? insidePrimary,
+        stroke: "none",
+        children: text
+      }
+    )
+  ] });
+  return cutout ? /* @__PURE__ */ jsx("g", { transform: CUTOUT_SHAPE, children: content }) : content;
 }
-
-export { BOX_PERFECT_STACK, NTD_ICON_MARK, PERFECT_STACK, defaultStackSize, defaultTextSize, isCornerBadge, isFilledVariant, isNtdIconElement, perfectStackOf, renderStackChildren, stackOffset, stackPlacement };
+export {
+  BOX_PERFECT_STACK,
+  NTD_ICON_MARK,
+  PERFECT_STACK,
+  defaultStackSize,
+  defaultTextSize,
+  isCornerBadge,
+  isFilledVariant,
+  isNtdIconElement,
+  perfectStackOf,
+  renderStackChildren,
+  stackOffset,
+  stackPlacement
+};