@nice2dev/icons 1.4.1 → 1.4.3

package/dist/cjs/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                */
 const types = require("./types.js");
 const createIcon = require("./createIcon.js");
+const stackedIcon = require("./stackedIcon.js");
 const smilAnimations = require("./smilAnimations.js");
 const NiceIconPicker = require("./NiceIconPicker.js");
 const NiceIconValue = require("./NiceIconValue.js");
@@ -34,7 +35,6 @@ const devtech = require("./icons/devtech.js");
 const saas = require("./icons/saas.js");
 const accessibility = require("./icons/accessibility.js");
 const files = require("./icons/files.js");
-const ui = require("./icons/ui.js");
 const fintech = require("./icons/fintech.js");
 const omniverk = require("./icons/omniverk.js");
 const weather = require("./icons/weather.js");
@@ -46,6 +46,7 @@ const social = require("./icons/social.js");
 const science = require("./icons/science.js");
 const legal = require("./icons/legal.js");
 const education = require("./icons/education.js");
+const ui = require("./icons/ui.js");
 const business = require("./icons/business.js");
 const sports = require("./icons/sports.js");
 const travel = require("./icons/travel.js");
@@ -59,11 +60,13 @@ const gaming = require("./icons/gaming.js");
 const smarthome = require("./icons/smarthome.js");
 const input = require("./icons/input.js");
 const brand = require("./icons/brand.js");
+const roman = require("./icons/roman.js");
 exports.GRADIENT_PRESETS = types.GRADIENT_PRESETS;
 exports.SEMANTIC_COLOR_DEFAULTS = types.SEMANTIC_COLOR_DEFAULTS;
 exports.SEMANTIC_COLOR_VARS = types.SEMANTIC_COLOR_VARS;
 exports.SIZE_MAP = types.SIZE_MAP;
 exports.createIcon = createIcon.createIcon;
+exports.stackedIcon = stackedIcon.stackedIcon;
 exports.NiceSmilAnimationWrapper = smilAnimations.SmilAnimationWrapper;
 exports.SMIL_ANIMATION_TYPES = smilAnimations.SMIL_ANIMATION_TYPES;
 exports.SmilAnimationWrapper = smilAnimations.SmilAnimationWrapper;
@@ -195,10 +198,8 @@ exports.NtdBrain = ai.NtdBrain;
 exports.NtdChatbot = ai.NtdChatbot;
 exports.NtdDataset = ai.NtdDataset;
 exports.NtdDeepLearning = ai.NtdDeepLearning;
-exports.NtdGradient = ai.NtdGradient;
 exports.NtdInference = ai.NtdInference;
 exports.NtdMagicWand = ai.NtdMagicWand;
-exports.NtdModel = ai.NtdModel;
 exports.NtdNeuralNetwork = ai.NtdNeuralNetwork;
 exports.NtdPrompt = ai.NtdPrompt;
 exports.NtdRobot = ai.NtdRobot;
@@ -279,7 +280,6 @@ exports.NtdCloud = files.NtdCloud;
 exports.NtdCloudDownload = files.NtdCloudDownload;
 exports.NtdCloudUpload = files.NtdCloudUpload;
 exports.NtdCode = files.NtdCode;
-exports.NtdCoffee = files.NtdCoffee;
 exports.NtdCpu = files.NtdCpu;
 exports.NtdCreditCard = files.NtdCreditCard;
 exports.NtdDatabase = files.NtdDatabase;
@@ -298,42 +298,10 @@ exports.NtdPieChart = files.NtdPieChart;
 exports.NtdShoppingCart = files.NtdShoppingCart;
 exports.NtdSmartphone = files.NtdSmartphone;
 exports.NtdTable = files.NtdTable;
+exports.NtdTablet = files.NtdTablet;
 exports.NtdTarget = files.NtdTarget;
 exports.NtdTerminal = files.NtdTerminal;
 exports.NtdTruck = files.NtdTruck;
-exports.NtdAdmin = ui.NtdAdmin;
-exports.NtdBackspace = ui.NtdBackspace;
-exports.NtdBell = ui.NtdBell;
-exports.NtdBookmark = ui.NtdBookmark;
-exports.NtdCalendar = ui.NtdCalendar;
-exports.NtdClock = ui.NtdClock;
-exports.NtdCursor = ui.NtdCursor;
-exports.NtdError = ui.NtdError;
-exports.NtdEye = ui.NtdEye;
-exports.NtdEyeOff = ui.NtdEyeOff;
-exports.NtdFlag = ui.NtdFlag;
-exports.NtdGlobe = ui.NtdGlobe;
-exports.NtdHeart = ui.NtdHeart;
-exports.NtdHelp = ui.NtdHelp;
-exports.NtdHome = ui.NtdHome;
-exports.NtdHourglass = ui.NtdHourglass;
-exports.NtdInfo = ui.NtdInfo;
-exports.NtdMap = ui.NtdMap;
-exports.NtdMapPin = ui.NtdMapPin;
-exports.NtdMoon = ui.NtdMoon;
-exports.NtdPin = ui.NtdPin;
-exports.NtdShield = ui.NtdShield;
-exports.NtdStar = ui.NtdStar;
-exports.NtdSuccess = ui.NtdSuccess;
-exports.NtdSun = ui.NtdSun;
-exports.NtdTag = ui.NtdTag;
-exports.NtdThumbDown = ui.NtdThumbDown;
-exports.NtdThumbUp = ui.NtdThumbUp;
-exports.NtdUser = ui.NtdUser;
-exports.NtdUsers = ui.NtdUsers;
-exports.NtdWarning = ui.NtdWarning;
-exports.NtdWireframe = ui.NtdWireframe;
-exports.NtdWishlist = ui.NtdWishlist;
 exports.NtdAirdrop = fintech.NtdAirdrop;
 exports.NtdBitcoin = fintech.NtdBitcoin;
 exports.NtdBlockchain = fintech.NtdBlockchain;
@@ -341,7 +309,7 @@ exports.NtdCryptoWallet = fintech.NtdCryptoWallet;
 exports.NtdDeFi = fintech.NtdDeFi;
 exports.NtdEthereum = fintech.NtdEthereum;
 exports.NtdExchange = fintech.NtdExchange;
-exports.NtdGasFee = fintech.NtdGasFee;
+exports.NtdGasPump = fintech.NtdGasPump;
 exports.NtdLedger = fintech.NtdLedger;
 exports.NtdMining = fintech.NtdMining;
 exports.NtdNFT = fintech.NtdNFT;
@@ -421,11 +389,16 @@ exports.NtdMortgage = realestate.NtdMortgage;
 exports.NtdOfficeBuilding = realestate.NtdOfficeBuilding;
 exports.NtdPool = realestate.NtdPool;
 exports.NtdShelfRack = realestate.NtdShelfRack;
+exports.NtdShelfRackFull = realestate.NtdShelfRackFull;
+exports.NtdShelfRackHalf = realestate.NtdShelfRackHalf;
+exports.NtdShelfRackQuarter = realestate.NtdShelfRackQuarter;
+exports.NtdShelfRackThreeQuarters = realestate.NtdShelfRackThreeQuarters;
 exports.NtdSold = realestate.NtdSold;
 exports.NtdSquareMeters = realestate.NtdSquareMeters;
 exports.NtdVilla = realestate.NtdVilla;
 exports.NtdWarehouse = realestate.NtdWarehouse;
 exports.realestateIcons = realestate.realestateIcons;
+exports.shelfRackIconFor = realestate.shelfRackIconFor;
 exports.NtdApple = health.NtdApple;
 exports.NtdBandaid = health.NtdBandaid;
 exports.NtdCake = health.NtdCake;
@@ -463,7 +436,6 @@ exports.NtdThumbsDown = social.NtdThumbsDown;
 exports.NtdThumbsUp = social.NtdThumbsUp;
 exports.NtdAtom = science.NtdAtom;
 exports.NtdBeaker = science.NtdBeaker;
-exports.NtdDnaScience = science.NtdDna;
 exports.NtdExperiment = science.NtdExperiment;
 exports.NtdFlask = science.NtdFlask;
 exports.NtdHypothesis = science.NtdHypothesis;
@@ -482,7 +454,6 @@ exports.NtdTestTube = science.NtdTestTube;
 exports.scienceIcons = science.scienceIcons;
 exports.NtdAudit = legal.NtdAudit;
 exports.NtdCcpa = legal.NtdCcpa;
-exports.NtdCertified = legal.NtdCertified;
 exports.NtdCompliance = legal.NtdCompliance;
 exports.NtdContract = legal.NtdContract;
 exports.NtdCookieConsent = legal.NtdCookieConsent;
@@ -499,8 +470,6 @@ exports.NtdBook = education.NtdBook;
 exports.NtdBookBookmark = education.NtdBookBookmark;
 exports.NtdCalculatorEdu = education.NtdCalculator;
 exports.NtdCertificate = education.NtdCertificate;
-exports.NtdDiploma = education.NtdDiploma;
-exports.NtdExam = education.NtdExam;
 exports.NtdFlashcard = education.NtdFlashcard;
 exports.NtdGraduationCap = education.NtdGraduationCap;
 exports.NtdNotebook = education.NtdNotebook;
@@ -510,9 +479,46 @@ exports.NtdPen = education.NtdPen;
 exports.NtdPencil = education.NtdPencil;
 exports.NtdQuiz = education.NtdQuiz;
 exports.NtdSchool = education.NtdSchool;
+exports.NtdScroll = education.NtdScroll;
+exports.NtdScrollRolled = education.NtdScrollRolled;
 exports.NtdUniversity = education.NtdUniversity;
 exports.NtdWebinar = education.NtdWebinar;
 exports.educationIcons = education.educationIcons;
+exports.NtdBackspace = ui.NtdBackspace;
+exports.NtdBell = ui.NtdBell;
+exports.NtdBookmark = ui.NtdBookmark;
+exports.NtdCalendar = ui.NtdCalendar;
+exports.NtdCalendarDay = ui.NtdCalendarDay;
+exports.NtdCalendarWeek = ui.NtdCalendarWeek;
+exports.NtdClock = ui.NtdClock;
+exports.NtdCursor = ui.NtdCursor;
+exports.NtdError = ui.NtdError;
+exports.NtdEye = ui.NtdEye;
+exports.NtdEyeOff = ui.NtdEyeOff;
+exports.NtdFlag = ui.NtdFlag;
+exports.NtdGlobe = ui.NtdGlobe;
+exports.NtdHeart = ui.NtdHeart;
+exports.NtdHelp = ui.NtdHelp;
+exports.NtdHome = ui.NtdHome;
+exports.NtdHourglass = ui.NtdHourglass;
+exports.NtdInfo = ui.NtdInfo;
+exports.NtdMap = ui.NtdMap;
+exports.NtdMapPin = ui.NtdMapPin;
+exports.NtdMoon = ui.NtdMoon;
+exports.NtdPin = ui.NtdPin;
+exports.NtdShield = ui.NtdShield;
+exports.NtdStar = ui.NtdStar;
+exports.NtdSuccess = ui.NtdSuccess;
+exports.NtdSun = ui.NtdSun;
+exports.NtdTag = ui.NtdTag;
+exports.NtdThumbDown = ui.NtdThumbDown;
+exports.NtdThumbUp = ui.NtdThumbUp;
+exports.NtdUser = ui.NtdUser;
+exports.NtdUserTie = ui.NtdUserTie;
+exports.NtdUsers = ui.NtdUsers;
+exports.NtdWarning = ui.NtdWarning;
+exports.NtdWireframe = ui.NtdWireframe;
+exports.NtdWishlist = ui.NtdWishlist;
 exports.NtdBank = business.NtdBank;
 exports.NtdBarcode = business.NtdBarcode;
 exports.NtdBriefcase = business.NtdBriefcase;
@@ -525,6 +531,7 @@ exports.NtdDollar = business.NtdDollar;
 exports.NtdInvoice = business.NtdInvoice;
 exports.NtdInvoiceDoc = business.NtdInvoiceDoc;
 exports.NtdKanban = business.NtdKanban;
+exports.NtdMarket = business.NtdMarket;
 exports.NtdMilestone = business.NtdMilestone;
 exports.NtdPercent = business.NtdPercent;
 exports.NtdPiggyBank = business.NtdPiggyBank;
@@ -569,7 +576,7 @@ exports.NtdBeer = food.NtdBeer;
 exports.NtdBurger = food.NtdBurger;
 exports.NtdChefHat = food.NtdChefHat;
 exports.NtdCocktail = food.NtdCocktail;
-exports.NtdCoffeeFood = food.NtdCoffee;
+exports.NtdCoffee = food.NtdCoffee;
 exports.NtdCookingPan = food.NtdCookingPan;
 exports.NtdForkKnife = food.NtdForkKnife;
 exports.NtdHotdog = food.NtdHotdog;
@@ -601,6 +608,7 @@ exports.NtdBluetooth = media.NtdBluetooth;
 exports.NtdBrush = media.NtdBrush;
 exports.NtdCamera = media.NtdCamera;
 exports.NtdChat = media.NtdChat;
+exports.NtdEyeDropper = media.NtdEyeDropper;
 exports.NtdImage = media.NtdImage;
 exports.NtdInbox = media.NtdInbox;
 exports.NtdMail = media.NtdMail;
@@ -667,6 +675,12 @@ exports.NtdZoomIn = actions.NtdZoomIn;
 exports.NtdZoomOut = actions.NtdZoomOut;
 exports.NtdCrown = fun.NtdCrown;
 exports.NtdDice = fun.NtdDice;
+exports.NtdDicePips1 = fun.NtdDicePips1;
+exports.NtdDicePips2 = fun.NtdDicePips2;
+exports.NtdDicePips3 = fun.NtdDicePips3;
+exports.NtdDicePips4 = fun.NtdDicePips4;
+exports.NtdDicePips5 = fun.NtdDicePips5;
+exports.NtdDicePips6 = fun.NtdDicePips6;
 exports.NtdDumpsterFire = fun.NtdDumpsterFire;
 exports.NtdGamepadOldschool = fun.NtdGamepadOldschool;
 exports.NtdGhost = fun.NtdGhost;
@@ -680,6 +694,7 @@ exports.NtdSmile = fun.NtdSmile;
 exports.NtdSmiley = fun.NtdSmiley;
 exports.NtdTrophy = fun.NtdTrophy;
 exports.NtdZap = fun.NtdZap;
+exports.dicePipsIconFor = fun.dicePipsIconFor;
 exports.NtdDiceGaming = gaming.NtdDice;
 exports.NtdDiscord = gaming.NtdDiscord;
 exports.NtdGamepad = gaming.NtdGamepad;
@@ -758,3 +773,12 @@ exports.NtdRemoteOk = input.NtdRemoteOk;
 exports.NtdNiceToDev = brand.NtdNiceToDev;
 exports.NtdOmniVerk = brand.NtdOmniVerk;
 exports.NtdOmniVerkAnimated = brand.NtdOmniVerkAnimated;
+exports.NtdRomanC = roman.NtdRomanC;
+exports.NtdRomanD = roman.NtdRomanD;
+exports.NtdRomanI = roman.NtdRomanI;
+exports.NtdRomanL = roman.NtdRomanL;
+exports.NtdRomanM = roman.NtdRomanM;
+exports.NtdRomanV = roman.NtdRomanV;
+exports.NtdRomanX = roman.NtdRomanX;
+exports.romanNumeralIcons = roman.romanNumeralIcons;
+exports.toRomanNumeral = roman.toRomanNumeral;

package/dist/cjs/stackedIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const stacking = require("./stacking.js");
+function stackedIcon(displayName, base, layers) {
+  const Base = base;
+  const Icon = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Base, { ref, ...props, children: [
+    layers,
+    children
+  ] }));
+  Icon.displayName = displayName;
+  const marks = Icon;
+  marks[stacking.NTD_ICON_MARK] = true;
+  marks[stacking.PERFECT_STACK] = stacking.perfectStackOf(base);
+  marks[stacking.SERIES_WIDTH] = stacking.seriesWidthOf(base);
+  return Icon;
+}
+exports.stackedIcon = stackedIcon;

package/dist/cjs/stacking.js

@@ -16,7 +16,7 @@ function isFilledVariant(variant) {
   return !LINE_VARIANTS.has(variant);
 }
 function defaultStackSize(align) {
-  return align === "center" ? 0.6 : 0.5;
+  return isSeriesAlign(align) ? 1 : align === "center" ? 0.6 : 0.5;
 }
 function stackPlacement(align, size) {
   const far = 24 - size;
@@ -46,12 +46,15 @@ function renderStackChildren(children, ctx) {
     return null;
   }
   const cutout = ctx.variant === "cutout";
-  const filled = isFilledVariant(ctx.variant);
+  const filled = isFilledVariant(ctx.variant) && (!ctx.perfect.filled || ctx.perfect.filled.includes(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) && isSeriesAlign(child.props.stackAlign)) {
+      return null;
+    }
     if (isNtdIconElement(child)) {
       const p = child.props;
       const align = p.stackAlign ?? "perfect";
@@ -106,15 +109,114 @@ function renderStackChildren(children, ctx) {
   ] });
   return cutout ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: CUTOUT_SHAPE, children: content }) : content;
 }
+function isSeriesAlign(align) {
+  return typeof align === "string" && align.startsWith("next-");
+}
+const SERIES_WIDTH = "seriesWidth";
+function seriesWidthOf(icon) {
+  const w = icon && (typeof icon === "object" || typeof icon === "function") ? icon[SERIES_WIDTH] : void 0;
+  return typeof w === "number" && w > 0 ? w : 24;
+}
+function layoutStackSeries(children, parentWidth = 24) {
+  const series = React.Children.toArray(children).filter(
+    (c) => isNtdIconElement(c) && isSeriesAlign(c.props.stackAlign)
+  );
+  if (series.length === 0) {
+    return null;
+  }
+  const bearing = (24 - parentWidth) / 2;
+  let right = 12 + parentWidth / 2;
+  let left = 12 - parentWidth / 2;
+  let down = 24;
+  let up = 0;
+  const items = series.map((child) => {
+    const p = child.props;
+    const scale = p.stackSize ?? 1;
+    const size = thousandth(24 * scale);
+    const advance = thousandth(seriesWidthOf(child.type) * scale);
+    let x;
+    let y;
+    switch (p.stackAlign) {
+      case "next-left":
+        left -= advance;
+        x = left - (size - advance) / 2;
+        y = 12 - size / 2;
+        break;
+      case "next-up":
+        up -= size;
+        x = 12 - size / 2;
+        y = up;
+        break;
+      case "next-down":
+        x = 12 - size / 2;
+        y = down;
+        down += size;
+        break;
+      default:
+        x = right - (size - advance) / 2;
+        y = 12 - size / 2;
+        right += advance;
+    }
+    return {
+      child,
+      x: stackOffset(thousandth(x), p.stackOffsetX),
+      y: stackOffset(thousandth(y), p.stackOffsetY),
+      size
+    };
+  });
+  const across = series.some(
+    (c) => c.props.stackAlign === "next-left" || c.props.stackAlign === "next-right"
+  );
+  let minX = across ? left - bearing : 0;
+  let maxX = across ? right + bearing : 24;
+  let minY = up;
+  let maxY = down;
+  for (const { child, x, y, size } of items) {
+    if (child.props.stackAlign === "next-left" || child.props.stackAlign === "next-right") {
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y + size);
+    } else {
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x + size);
+    }
+  }
+  return {
+    items,
+    box: [thousandth(minX), thousandth(minY), thousandth(maxX - minX), thousandth(maxY - minY)]
+  };
+}
+function renderStackSeries(layout, ctx) {
+  return layout.items.map(({ child, x, y, size }, i) => {
+    const p = child.props;
+    const icon = React.cloneElement(child, {
+      key: child.key ?? `series-${i}`,
+      x,
+      y,
+      size,
+      variant: p.variant ?? ctx.variant,
+      primaryColor: p.primaryColor ?? ctx.primaryColor,
+      secondaryColor: p.secondaryColor ?? ctx.secondaryColor,
+      accentColor: p.accentColor ?? ctx.accentColor,
+      strokeWidth: p.strokeWidth ?? ctx.strokeWidth
+    });
+    const turn = p.stackRotation ? `rotate(${p.stackRotation} ${x + size / 2} ${y + size / 2})` : void 0;
+    return turn ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: turn, children: icon }, child.key ?? `series-${i}`) : icon;
+  });
+}
 exports.BOX_PERFECT_STACK = BOX_PERFECT_STACK;
 exports.NTD_ICON_MARK = NTD_ICON_MARK;
 exports.PERFECT_STACK = PERFECT_STACK;
+exports.SERIES_WIDTH = SERIES_WIDTH;
 exports.defaultStackSize = defaultStackSize;
 exports.defaultTextSize = defaultTextSize;
 exports.isCornerBadge = isCornerBadge;
 exports.isFilledVariant = isFilledVariant;
 exports.isNtdIconElement = isNtdIconElement;
+exports.isSeriesAlign = isSeriesAlign;
+exports.layoutStackSeries = layoutStackSeries;
 exports.perfectStackOf = perfectStackOf;
 exports.renderStackChildren = renderStackChildren;
+exports.renderStackSeries = renderStackSeries;
+exports.seriesWidthOf = seriesWidthOf;
 exports.stackOffset = stackOffset;
 exports.stackPlacement = stackPlacement;

package/dist/esm/NiceIconStacker.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useNiceTranslation, useControllableState, useRovingFocus } from "@nice2dev/ui-core";
 import React, { forwardRef, useState, useRef, useCallback, useMemo, useImperativeHandle } from "react";
 import { NtdPlus, NtdTrash, NtdCheck, NtdCopy } from "./icons/actions.js";
-import { NtdClose } from "./icons/navigation.js";
+import { NtdClose, NtdArrowLeft, NtdArrowUp, NtdArrowDown, NtdArrowRight } from "./icons/navigation.js";
 import { niceIconStackCode, iconDisplayName, stackParentId, stackChildrenOf, isValidTextBinding, renderIconStack, addStackLayer, removeStackLayer } from "./iconStack.js";
 import { perfectStackOf, BOX_PERFECT_STACK, defaultStackSize, defaultTextSize } from "./stacking.js";
 /* empty css                    */
@@ -25,6 +25,12 @@ const PAD = [
   { align: "bottom", row: 5, col: 3 },
   { align: "bottom-right", row: 5, col: 5 }
 ];
+const SERIES = [
+  { align: "next-left", Arrow: NtdArrowLeft },
+  { align: "next-up", Arrow: NtdArrowUp },
+  { align: "next-down", Arrow: NtdArrowDown },
+  { align: "next-right", Arrow: NtdArrowRight }
+];
 function alignNames(t) {
   return {
     perfect: t("iconStacker.align.perfect", "Auto"),
@@ -50,7 +56,11 @@ function alignNames(t) {
     "half-bottom-right": t(
       "iconStacker.align.half-bottom-right",
       "Halfway to the bottom-right corner"
-    )
+    ),
+    "next-right": t("iconStacker.align.next-right", "Next, to the right"),
+    "next-left": t("iconStacker.align.next-left", "Next, to the left"),
+    "next-up": t("iconStacker.align.next-up", "Next, above"),
+    "next-down": t("iconStacker.align.next-down", "Next, below")
   };
 }
 const STAGE_SIZE = 64;
@@ -379,7 +389,31 @@ const NiceIconStacker = forwardRef(
                           onClick: () => update(edited.id, { align: a })
                         },
                         a
-                      )) })
+                      )) }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "nice-icon-stacker__pad-series",
+                          title: t(
+                            "iconStacker.align.seriesHint",
+                            "Beside the icon, in its colours and size"
+                          ),
+                          children: SERIES.map(({ align: a, Arrow }) => /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              role: "radio",
+                              "aria-checked": align === a,
+                              "aria-label": alignName(a),
+                              title: alignName(a),
+                              className: "nice-icon-stacker__pad-next",
+                              onClick: () => update(edited.id, { align: a }),
+                              children: /* @__PURE__ */ jsx(Arrow, { size: 14, primaryColor: "currentColor" })
+                            },
+                            a
+                          ))
+                        }
+                      )
                     ]
                   }
                 ),

package/dist/esm/createIcon.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useState, useSyncExternalStore } from "react";
+import { forwardRef, useId, useState, Children, useSyncExternalStore } from "react";
 import { durationScale, stillTree, motionTree, animationScale } from "./animationSpeed.js";
 import { useStillMotion } from "./reducedMotion.js";
 import { sharpenTree, roundTree, wireTree, MINI_SCALE } from "./sharpen.js";
 import { generateSmilAnimation } from "./smilAnimations.js";
-import { BOX_PERFECT_STACK, renderStackChildren, NTD_ICON_MARK, PERFECT_STACK } from "./stacking.js";
+import { BOX_PERFECT_STACK, isNtdIconElement, isSeriesAlign, renderStackChildren, layoutStackSeries, renderStackSeries, NTD_ICON_MARK, PERFECT_STACK, SERIES_WIDTH } from "./stacking.js";
 import { SIZE_MAP, SEMANTIC_COLOR_VARS, SEMANTIC_COLOR_DEFAULTS, GRADIENT_PRESETS } from "./types.js";
 const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 function getColorScheme() {
@@ -180,8 +180,10 @@ function createIcon(options) {
     x: options.perfectStackX ?? textCenter[0],
     y: options.perfectStackY ?? textCenter[1],
     rotation: options.perfectStackRotation ?? BOX_PERFECT_STACK.rotation,
-    size: options.perfectStackSize ?? BOX_PERFECT_STACK.size
+    size: options.perfectStackSize ?? BOX_PERFECT_STACK.size,
+    filled: options.perfectStackFilled
   };
+  const seriesWidth = options.seriesWidth ?? 24;
   const Icon = forwardRef(
     ({
       size = "md",
@@ -262,7 +264,11 @@ function createIcon(options) {
         strokeWidth: effectiveStrokeWidth,
         strokeLinecap,
         strokeLinejoin,
-        uid
+        uid,
+        // content stacked inside (not a series beside it) — renderers may leave details out (1.4.3)
+        stacked: Children.toArray(children).some(
+          (c) => !(isNtdIconElement(c) && isSeriesAlign(c.props.stackAlign))
+        )
       };
       const renderer = variant === "wireframe" ? paths.solid : variant === "duotone" && !paths.duotone ? solidDuotone : paths[variant] ?? (variant === "sharp" ? paths.solid : void 0) ?? (variant === "rounded" ? paths.solid : void 0) ?? (variant === "mini" ? paths.solid : void 0) ?? (variant === "3d" ? paths.solid : void 0) ?? (variant === "vivid" ? paths.solid : void 0) ?? paths.solid;
       const is3d = variant === "3d";
@@ -332,6 +338,17 @@ function createIcon(options) {
         paced,
         stacked
       ] }) : paced;
+      const series = viewBox === "0 0 24 24" ? layoutStackSeries(children, seriesWidth) : null;
+      const seriesLayer = series ? renderStackSeries(series, {
+        variant,
+        primaryColor: effectivePrimary,
+        secondaryColor: resolvedSecondary,
+        accentColor: resolvedAccent,
+        strokeWidth
+      }) : null;
+      const svgViewBox = series ? series.box.join(" ") : viewBox;
+      const svgWidth = series ? Math.round(1e3 * (resolvedSize * series.box[2] / 24)) / 1e3 : resolvedSize;
+      const svgHeight = series ? Math.round(1e3 * (resolvedSize * series.box[3] / 24)) / 1e3 : resolvedSize;
       const iconContent = variant === "mini" ? /* @__PURE__ */ jsx(
         "g",
         {
@@ -344,9 +361,9 @@ function createIcon(options) {
         {
           ref,
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox,
-          width: resolvedSize,
-          height: resolvedSize,
+          viewBox: svgViewBox,
+          width: svgWidth,
+          height: svgHeight,
           fill: "none",
           strokeLinecap,
           strokeLinejoin,
@@ -400,7 +417,8 @@ function createIcon(options) {
             ) : /* @__PURE__ */ jsxs("g", { filter: is3d ? `url(#${filterId})` : void 0, children: [
               iconContent,
               smilAnimationElements
-            ] }) : is3d ? /* @__PURE__ */ jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent
+            ] }) : is3d ? /* @__PURE__ */ jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent,
+            seriesLayer
           ]
         },
         `${playKey ?? ""}:${replays}`
@@ -410,6 +428,7 @@ function createIcon(options) {
   Icon.displayName = displayName;
   Icon[NTD_ICON_MARK] = true;
   Icon[PERFECT_STACK] = perfect;
+  Icon[SERIES_WIDTH] = seriesWidth;
   return Icon;
 }
 export {

package/dist/esm/iconParts.js

@@ -21,9 +21,8 @@ function within(uid, name, shape, content) {
     /* @__PURE__ */ jsx("g", { clipPath: `url(#${id})`, children: content })
   ] });
 }
-const CUTLERY_FORK = "M1 3H1.6V7H2.2V3H2.8V7H3.4V3H4V7.2C4 8.4 3.4 9.1 3 9.3V20.5A0.5 0.5 0 0 1 2 20.5V9.3C1.6 9.1 1 8.4 1 7.2Z";
-const CUTLERY_KNIFE = "M20.2 3C22.4 4.2 23 8.2 22.6 12.6H21.9V20.4A0.75 0.75 0 0 1 20.4 20.4V12.6H20.2Z";
-const CUTLERY_FORK_LINES = "M1.3 3V6.8C1.3 8.2 2.5 8.9 2.5 9.4M3.7 3V6.8C3.7 8.2 2.5 8.9 2.5 9.4M2.5 3V20.6";
+const CUTLERY_FORK = "M0.4 3H0.9V7H1.37V3H1.87V7H2.33V3H2.83V7H3.3V3H3.8V7.3C3.8 8.6 3.1 9.3 2.7 9.6V20.4A0.6 0.6 0 0 1 1.5 20.4V9.6C1.1 9.3 0.4 8.6 0.4 7.3Z";
+const CUTLERY_KNIFE = "M21 3C23.3 4.2 24 8.2 23.6 12.6H22.7V20.35A0.85 0.85 0 0 1 21 20.35Z";
 const BELL = "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z";
 const BELL_CLAPPER = "M9 18.5h6a3 3 0 01-6 0z";
 const BELL_CLAPPER_LINE = "M9 19a3 3 0 006 0";
@@ -61,6 +60,7 @@ const PAPER_FOLD = "M12 2v6a2 2 0 002 2h6z";
 const PAPER_FOLD_LINE = "M12 2v8h8";
 const PAPER_SHARP = "M12 2H4v20h16V10z";
 const PAPER_FOLD_SHARP = "M12 2v8h8z";
+const PAPER_FOLD_EDGE = "M12 2v6a2 2 0 002 2h6";
 function paperIcon(displayName, text = "") {
   return createIcon({
     displayName,
@@ -69,9 +69,20 @@ function paperIcon(displayName, text = "") {
     perfectStackY: 14,
     perfectStackSize: 0.5,
     paths: {
-      solid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: PAPER, fill: primaryColor }),
-        /* @__PURE__ */ jsx("path", { d: PAPER_FOLD, fill: secondaryColor }),
+        /* @__PURE__ */ jsx("path", { d: PAPER_FOLD, fill: primaryColor }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: PAPER_FOLD_EDGE,
+            stroke: accentColor,
+            strokeOpacity: accentOpacity,
+            strokeWidth,
+            strokeLinecap: "butt",
+            fill: "none"
+          }
+        ),
         text && /* @__PURE__ */ jsx(
           "path",
           {
@@ -85,9 +96,21 @@ function paperIcon(displayName, text = "") {
         )
       ] }),
       // square at every corner, the fold included — the derived `sharp` keeps a path's arcs round
-      sharp: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      sharp: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: PAPER_SHARP, fill: primaryColor }),
-        /* @__PURE__ */ jsx("path", { d: PAPER_FOLD_SHARP, fill: secondaryColor }),
+        /* @__PURE__ */ jsx("path", { d: PAPER_FOLD_SHARP, fill: primaryColor }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: PAPER_FOLD_LINE,
+            stroke: accentColor,
+            strokeOpacity: accentOpacity,
+            strokeWidth,
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter",
+            fill: "none"
+          }
+        ),
         text && /* @__PURE__ */ jsx(
           "path",
           {
@@ -109,16 +132,15 @@ function paperIcon(displayName, text = "") {
         }
       ),
       // duotone (1.3.8): createIcon's default — the solid page, its writing in secondary like the fold
-      vivid: ({ primaryColor, secondaryColor }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: PAPER, fill: primaryColor }),
-        /* @__PURE__ */ jsx("path", { d: PAPER, fill: "white", opacity: "0.1" }),
         /* @__PURE__ */ jsx("path", { d: PAPER_FOLD, fill: secondaryColor }),
         text && /* @__PURE__ */ jsx(
           "path",
           {
             d: text,
-            stroke: "white",
-            strokeOpacity: "0.9",
+            stroke: accentColor,
+            strokeOpacity: accentOpacity,
             strokeWidth: "1.5",
             strokeLinecap: "round",
             fill: "none"
@@ -130,7 +152,6 @@ function paperIcon(displayName, text = "") {
 }
 export {
   CUTLERY_FORK,
-  CUTLERY_FORK_LINES,
   CUTLERY_KNIFE,
   bellIcon,
   detailColor,

package/dist/esm/iconValue.js

@@ -29,7 +29,12 @@ const ALIGN_CODE = {
   "half-top-left": "htl",
   "half-top-right": "htr",
   "half-bottom-left": "hbl",
-  "half-bottom-right": "hbr"
+  "half-bottom-right": "hbr",
+  // a series beside the icon (1.4.3)
+  "next-right": "nr",
+  "next-left": "nl",
+  "next-up": "nu",
+  "next-down": "nd"
 };
 function reverse(codes) {
   const map = /* @__PURE__ */ new Map();