@nice2dev/icons 1.4.1 → 1.4.3

package/dist/types/stacking.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode } from 'react';
-import type { IconStackAlign, IconVariant, NtdIconProps } from './types';
+import type { IconStackAlign, IconStackSeriesAlign, IconVariant, NtdIconProps } from './types';
 /**
  * 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
@@ -19,6 +19,8 @@ export interface PerfectStack {
     y: number;
     rotation: number;
     size: number;
+    /** The variants in which the spot lies on a fill (`perfectStackFilled`, 1.4.3); unset — all filled ones. */
+    filled?: readonly IconVariant[];
 }
 /** Set on every component createIcon makes, next to {@link NTD_ICON_MARK}: its {@link PerfectStack}. */
 export declare const PERFECT_STACK = "perfectStack";
@@ -72,3 +74,48 @@ export interface StackContext {
  *   larger than itself — a gap cut into the parent where they overlap, unseen beyond it.
  */
 export declare function renderStackChildren(children: ReactNode, ctx: StackContext): ReactNode;
+/** A `next-…` position: the child stands beside its parent, not inside it. */
+export declare function isSeriesAlign(align: IconStackAlign | undefined): align is IconStackSeriesAlign;
+/**
+ * Set on every component createIcon makes: the width of its glyph across, in the 24-unit box
+ * (`createIcon`'s `seriesWidth`, default 24) — how much room it takes in a left / right series,
+ * like a letter's advance in a font, so `I` sits close to `X`.
+ */
+export declare const SERIES_WIDTH = "seriesWidth";
+/** The glyph width icon component `icon` declares for series; 24 when it declares none. */
+export declare function seriesWidthOf(icon: unknown): number;
+/** One child of a series, placed in the parent's units (its own 24-unit box at `x`, `y`). */
+export interface StackSeriesItem {
+    child: ReactElement<NtdIconProps>;
+    x: number;
+    y: number;
+    size: number;
+}
+/** Where a series' children go and the box that holds the parent and all of them. */
+export interface StackSeriesLayout {
+    items: StackSeriesItem[];
+    /** `[minX, minY, width, height]` in the parent's units — the root SVG's new viewBox. */
+    box: [number, number, number, number];
+}
+/**
+ * Lays out the `next-…` children of an icon whose glyph is `parentWidth` units across (its
+ * `seriesWidth`). Each direction keeps its own cursor and the children follow in order: across,
+ * each takes its glyph width (`seriesWidth` × `stackSize`) and is centred on the parent's middle
+ * line; up and down, each takes its full height. The box keeps the parent's side bearing at both
+ * outer ends, so a series of narrow glyphs is as tight as it looks. `null` without a series.
+ */
+export declare function layoutStackSeries(children: ReactNode, parentWidth?: number): StackSeriesLayout | null;
+/** The parent's look a series child takes, unless it sets its own. */
+export interface StackSeriesContext {
+    variant: IconVariant;
+    primaryColor: string;
+    secondaryColor: string;
+    accentColor: string;
+    strokeWidth: number;
+}
+/**
+ * The series children, each as a nested SVG at its place, in the parent's variant and colours
+ * (nothing inverted, nothing shrunk — "the same icon, the next one along", R43). Drawn outside the
+ * parent's mini / cutout / 3D groups: each child draws its own.
+ */
+export declare function renderStackSeries(layout: StackSeriesLayout, ctx: StackSeriesContext): ReactNode;

package/dist/types/types.d.ts

@@ -301,7 +301,8 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
      * the parent icon keeps for what is stacked in it (a pin's head, along a tag; 1.3.8), the
      * centre when it keeps none; `'center'` is the middle of the box. `half-…` positions sit
      * halfway from the centre to that edge or corner (1.3.6). Text children
-     * (`<NtdStar>1</NtdStar>`) go to the icon's own spot too.
+     * (`<NtdStar>1</NtdStar>`) go to the icon's own spot too. `next-…` (1.4.3) puts the child
+     * beside the icon instead — a series, see {@link IconStackSeriesAlign}.
      */
     stackAlign?: IconStackAlign;
     /**
@@ -343,7 +344,15 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
  * (1.3.5), halfway from the centre to one (`half-…`, 1.3.6), or the spot the parent keeps for
  * stacked icons (`perfect`, the default, 1.3.8).
  */
-export type IconStackAlign = 'perfect' | 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | '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';
+export type IconStackAlign = 'perfect' | 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | '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' | IconStackSeriesAlign;
+/**
+ * A series (1.4.3): the child stands next to the icon instead of inside it — to its right, left,
+ * above or below, in the icon's own colours, variant and size (`stackSize` 1 by default), one after
+ * another in the order given. The icon's SVG grows to hold them, so `<NtdRomanX><NtdRomanI
+ * stackAlign="next-right" /><NtdRomanV stackAlign="next-right" /></NtdRomanX>` is one SVG reading
+ * XIV. An icon that declares a narrower glyph (`createIcon`'s `seriesWidth`) takes less room across.
+ */
+export type IconStackSeriesAlign = 'next-right' | 'next-left' | 'next-up' | 'next-down';
 /**
  * Props received by icon path renderer functions inside {@link CreateIconOptions.paths}.
  *
@@ -371,6 +380,12 @@ export interface IconRenderProps {
      * renderer runs outside createIcon; the content is then drawn unclipped.
      */
     uid?: string;
+    /**
+     * Something is stacked inside the icon — an icon child or text (1.4.3). A renderer leaves out
+     * details the stacked content would land on (a calendar's date cells under a day number).
+     * A series beside the icon does not count. Absent outside createIcon.
+     */
+    stacked?: boolean;
 }
 /**
  * Map of named size presets to their pixel values.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/icons",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Beautiful, lightweight, multi-color SVG icon library for React with animations",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -109,7 +109,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.1",
-    "@nice2dev/ui-core": "^1.4.1",
+    "@nice2dev/ui-core": "^1.4.3",
     "@storybook/addon-a11y": "^10.6.6",
     "@storybook/addon-docs": "^10.6.6",
     "@storybook/react-vite": "^10.6.6",