@nice2dev/icons 1.3.7 → 1.3.9

package/dist/types/iconParts.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { createIcon } from './createIcon';
+import { createIcon, type IconPathRenderer } from './createIcon';
 import type { IconRenderProps } from './types';
 /**
  * The colour of a detail drawn in secondary on a filled shape (a floppy's label, a ribbon): the
@@ -7,6 +7,12 @@ import type { IconRenderProps } from './types';
  * the shape and the detail would vanish, while the accent draws in the cut.
  */
 export declare function detailColor({ variant, secondaryColor, accentColor }: IconRenderProps): string;
+/**
+ * A duotone renderer with its two colours swapped, at full strength (1.3.8) — for a duotone that
+ * drew its larger area in secondary (a pale body under a primary outline): the body turns
+ * primary, the outline and the details secondary.
+ */
+export declare function swapDuotone(render: IconPathRenderer): IconPathRenderer;
 /**
  * `content` drawn only inside `shape` — for accent lines that read as a cut through a shape (a
  * pencil's band, a calendar's header line, an envelope's flap): clipped, they meet the shape's
@@ -27,6 +33,6 @@ export declare function bellIcon(displayName: string, ringing: boolean): ReturnT
  * A paper icon — NtdFile, and every document drawn on the same page (NtdFileText, NtdInvoice,
  * NtdContract, …), so their pages and folds match. The fold is secondary when the page is filled;
  * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7–17),
- * drawn in the accent colour on a filled page and in primary on a stroked one.
+ * drawn in the accent colour on a filled page (secondary in duotone) and in primary on a stroked one.
  */
 export declare function paperIcon(displayName: string, text?: string): ReturnType<typeof createIcon>;

package/dist/types/iconStack.d.ts

@@ -15,11 +15,20 @@ export interface NiceIconStackLayer {
     variant?: IconVariant;
     /** Id of the layer this one sits in (1.3.6). Absent: the base. */
     parent?: string;
-    /** Where the layer sits in its parent (not the base). Default `'center'`. */
+    /**
+     * Where the layer sits in its parent (not the base). Default `'perfect'` — the spot the parent
+     * keeps for stacked icons, its centre when it keeps none (1.3.8; it was `'center'`).
+     */
     align?: IconStackAlign;
-    /** Share of its parent (not the base). Default by `align`: 0.6 centred, 0.5 elsewhere. */
+    /**
+     * Share of its parent (not the base). Default by `align`: the parent's spot size at `'perfect'`
+     * (0.6 when it keeps none), 0.6 centred, 0.5 elsewhere.
+     */
     size?: number;
-    /** Turn about its own centre, degrees clockwise (not the base, 1.3.6). */
+    /**
+     * Turn about its own centre, degrees clockwise (not the base, 1.3.6). Default: the turn the
+     * parent keeps at its spot when the layer sits there (1.3.8), else none.
+     */
     rotation?: number;
     /**
      * Nudge from where `align` puts it, in percent of its parent: right / down (not the base,
@@ -50,6 +59,24 @@ export declare function isValidTextBinding(name: string | undefined): name is st
 export declare function stackParentId(layers: readonly NiceIconStackLayer[], layer: NiceIconStackLayer): string | undefined;
 /** The layers that sit directly in layer `id`, in order. */
 export declare function stackChildrenOf(layers: readonly NiceIconStackLayer[], id: string): NiceIconStackLayer[];
+/** An icon's name as people read it: the export name without `Ntd` — `NtdAlertBell` → `AlertBell`. */
+export declare function iconDisplayName(name: string): string;
+/**
+ * Puts an icon on the stack (1.3.9): into layer `into` (the base when absent or unknown), or as the
+ * base of an empty stack. Returns the new layers and the new layer's id.
+ */
+export declare function addStackLayer(layers: readonly NiceIconStackLayer[], icon: {
+    icon: string;
+    variant?: IconVariant;
+}, into?: string): {
+    layers: NiceIconStackLayer[];
+    id: string;
+};
+/**
+ * Takes a layer off the stack (1.3.9; NiceIconStacker's own until then): what sat in it moves up
+ * into its parent, and a removed base hands over to its first child.
+ */
+export declare function removeStackLayer(layers: readonly NiceIconStackLayer[], id: string): NiceIconStackLayer[];
 /** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
 export declare function niceIconStackCode(layers: readonly NiceIconStackLayer[]): string;
 export interface RenderIconStackOptions {

package/dist/types/icons/index.d.ts

@@ -1,6 +1,6 @@
 export { NtdArrowUp, NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdChevronUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdMenu, NtdClose, NtdMoreHorizontal, NtdMoreVertical, NtdExternalLink, NtdRefresh, } from './navigation';
 export { NtdSearch, NtdEdit, NtdEditDetail, NtdTrash, NtdSave, NtdDownload, NtdUpload, NtdShare, NtdCopy, NtdClipboard, NtdPlus, NtdMinus, NtdCheck, NtdFilter, NtdSort, NtdPrint, NtdZoomIn, NtdZoomOut, NtdUndo, NtdRedo, NtdReply, NtdLink, NtdSettings, NtdLogIn, NtdLogOut, NtdLock, NtdUnlock, NtdGroup, NtdUngroup, } from './actions';
-export { NtdHome, NtdUser, NtdAdmin, NtdUsers, NtdHeart, NtdStar, NtdBell, NtdEye, NtdEyeOff, NtdInfo, NtdWarning, NtdError, NtdSuccess, NtdHelp, NtdClock, NtdHourglass, NtdCalendar, NtdTag, NtdBackspace, NtdBookmark, NtdFlag, NtdThumbUp, NtdThumbDown, NtdShield, NtdGlobe, NtdMap, NtdPin, NtdSun, NtdMoon, NtdCursor, NtdWireframe, } from './ui';
+export { NtdHome, NtdUser, NtdAdmin, NtdUsers, NtdHeart, NtdStar, NtdBell, NtdEye, NtdEyeOff, NtdInfo, NtdWarning, NtdError, NtdSuccess, NtdHelp, NtdClock, NtdHourglass, NtdCalendar, NtdTag, NtdBackspace, NtdBookmark, NtdFlag, NtdThumbUp, NtdThumbDown, NtdShield, NtdGlobe, NtdMap, NtdPin, NtdMapPin, NtdSun, NtdMoon, NtdCursor, NtdWireframe, } from './ui';
 export { NtdRecycle, NtdCompost, NtdTrashSort, NtdSolarPanel, NtdWindTurbine, NtdEvCharger, NtdCarbonFootprint, NtdCo2, NtdNetZero, NtdEcoFriendly, NtdOrganic, NtdBiodegradable, NtdPlantTree, NtdWildlife, sustainabilityIcons, } from './sustainability';
 export { NtdAccessibility, NtdWheelchair, NtdBlind, NtdDeaf, NtdSignLanguage, NtdBraille, NtdAudioDescription, NtdClosedCaptions, NtdDyslexia, NtdEasyRead, NtdScreenReader, NtdHearingAid, NtdAssistiveTech, accessibilityIcons, } from './accessibility';
 export { NtdContract, NtdLegalDocument, NtdTermsOfService, NtdPrivacyPolicy, NtdGdpr, NtdCcpa, NtdCookieConsent, NtdCopyright, NtdTrademark, NtdPatent, NtdCompliance, NtdCertified, NtdAudit, legalIcons, } from './legal';

package/dist/types/icons/ui.d.ts

@@ -26,6 +26,7 @@ export declare const NtdShield: import("react").ForwardRefExoticComponent<import
 export declare const NtdGlobe: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdMap: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdPin: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const NtdMapPin: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdSun: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdMoon: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdCursor: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/types/index.d.ts

@@ -53,9 +53,11 @@ export { createIcon } from './createIcon';
 export { generateSmilAnimation, SmilAnimationWrapper as NiceSmilAnimationWrapper, SmilAnimationWrapper, createSmilAnimationDef, isSmilSupported, SMIL_ANIMATION_TYPES, } from './smilAnimations';
 export type { SmilAnimationType, SmilAnimationConfig, SmilAnimationWrapperProps, } from './smilAnimations';
 export { NiceIconPicker } from './NiceIconPicker';
-export type { NiceIconPickerProps, NiceIconPickerHandle, IconPickerEntry } from './NiceIconPicker';
+export type { NiceIconPickerProps, NiceIconPickerHandle, IconPickerEntry, NiceIconPickerValueFormat, NiceIconPickerDisplayMode, } from './NiceIconPicker';
+export { NiceIconHtml, parseIconHtml } from './iconHtml';
+export type { NiceIconHtmlProps, NiceIconHtmlSource } from './iconHtml';
 export { NiceIconStacker } from './NiceIconStacker';
-export { NiceIconStack, niceIconStackCode, renderIconStack, isValidTextBinding } from './iconStack';
+export { NiceIconStack, niceIconStackCode, renderIconStack, isValidTextBinding, addStackLayer, removeStackLayer, iconDisplayName, } from './iconStack';
 export type { NiceIconStackProps, NiceIconResolver, RenderIconStackOptions } from './iconStack';
 export type { NiceIconStackerProps, NiceIconStackerHandle, NiceIconStackLayer, } from './NiceIconStacker';
 export { AnimationController as NiceAnimationController, AnimationController, InteractiveIcon as NiceInteractiveIcon, InteractiveIcon, useAnimationSequence, createAnimationSequence, createHoverAnimation, createClickAnimation, createVisibilityAnimation, PRESET_SEQUENCES, PRESET_INTERACTIONS, } from './animationControls';

package/dist/types/stacking.d.ts

@@ -9,6 +9,23 @@ import type { IconStackAlign, IconVariant, NtdIconProps } from './types';
 /** Set on every component createIcon makes, so a parent icon tells its icon children apart. */
 export declare const NTD_ICON_MARK = "ntdIcon";
 export declare function isNtdIconElement(node: ReactNode): node is ReactElement<NtdIconProps>;
+/**
+ * The spot an icon keeps for what is stacked in it (1.3.8) — where a child without a `stackAlign`
+ * goes, and its text: the centre `x`, `y` in the 24-unit box, the turn there (degrees, clockwise)
+ * and the share of the icon a child takes. `createIcon`'s `perfectStack*` options.
+ */
+export interface PerfectStack {
+    x: number;
+    y: number;
+    rotation: number;
+    size: number;
+}
+/** Set on every component createIcon makes, next to {@link NTD_ICON_MARK}: its {@link PerfectStack}. */
+export declare const PERFECT_STACK = "perfectStack";
+/** The spot icon component `icon` keeps for stacked icons; `undefined` when it is not an icon. */
+export declare function perfectStackOf(icon: unknown): PerfectStack | undefined;
+/** A child of the spot's default size and no turn, at the box centre — `'center'`. */
+export declare const BOX_PERFECT_STACK: PerfectStack;
 export declare function isFilledVariant(variant: IconVariant): boolean;
 /** Default share of the parent: centred children larger, edge and corner badges smaller. */
 export declare function defaultStackSize(align: IconStackAlign): number;
@@ -27,8 +44,9 @@ export declare function isCornerBadge(align: IconStackAlign): boolean;
 /**
  * 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.
  */
-export declare function defaultTextSize(length: number): number;
+export declare function defaultTextSize(length: number, spot?: number): number;
 export interface StackContext {
     variant: IconVariant;
     /** The parent's primary as drawn (a gradient's `url(#…)` included). */
@@ -37,14 +55,16 @@ export interface StackContext {
     /** The cutout variant's tile colour — what fills the cut shape's surroundings. */
     tileColor: string;
     strokeWidth: number;
-    /** Where text is centred — the icon's visual centre. */
-    textCenter: readonly [number, number];
+    /** The spot the icon keeps for stacked icons and text (1.3.8). */
+    perfect: PerfectStack;
     textColor?: string;
     textSize?: number;
 }
 /**
- * The children of an icon, drawn into it. Colours given on a child win; otherwise:
- * - content inside — centred, at an edge or halfway out — is cut out of a filled parent: an icon child takes
+ * 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;

package/dist/types/types.d.ts

@@ -271,14 +271,16 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     transformOrigin?: string;
     /**
      * Where this icon sits when it is a child of another icon (1.3.5):
-     * `<NtdSquare><NtdStar stackAlign="top-right" /></NtdSquare>`. Default `'center'`; `half-…`
-     * positions sit halfway from the centre to that edge or corner (1.3.6). Text children
-     * (`<NtdStar>1</NtdStar>`) are centred on the icon.
+     * `<NtdSquare><NtdStar stackAlign="top-right" /></NtdSquare>`. Default `'perfect'` — the spot
+     * 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.
      */
     stackAlign?: IconStackAlign;
     /**
      * This icon's size as a share of the icon it is stacked in (1.3.5). Default `0.6` centred, `0.5`
-     * at an edge or a corner.
+     * at an edge or a corner, and at the parent's own spot the size it keeps for it (1.3.8).
      */
     stackSize?: number;
     /**
@@ -293,7 +295,8 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     textSize?: number;
     /**
      * Turns this icon, when stacked in another, about its own centre — degrees, clockwise (1.3.6).
-     * Its own contents and text turn with it.
+     * Its own contents and text turn with it. At the parent's own spot it defaults to the turn the
+     * parent keeps there (along a tag, 1.3.8); a value given here replaces it.
      */
     stackRotation?: number;
     /**
@@ -311,9 +314,10 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
 }
 /**
  * Where a stacked icon sits inside the icon it is a child of — the centre, an edge or a corner
- * (1.3.5), or halfway from the centre to one (`half-…`, 1.3.6).
+ * (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 = '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';
 /**
  * Props received by icon path renderer functions inside {@link CreateIconOptions.paths}.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/icons",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "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.3.7",
+    "@nice2dev/ui-core": "^1.3.9",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",