@nice2dev/icons 1.3.8 → 1.3.10

package/dist/types/NiceIconValue.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type NiceIconResolver } from './iconStack';
+import type { NtdIconProps } from './types';
+/** `values` is the bound text here, not the SVG animation attribute of the same name. */
+export interface NiceIconValueProps extends Partial<Omit<NtdIconProps, 'children' | 'values'>> {
+    /**
+     * The icon as NiceIconPicker stores it, in any of its formats: a name (`'NtdStar'`), the code of a
+     * stack (`'Folder(Star@tr)'`), JSON or HTML.
+     */
+    value: string | null | undefined;
+    /** Resolves the icon names — a map of exports or a function. */
+    icons: NiceIconResolver;
+    /** Values for bound text of a stack. */
+    values?: Record<string, React.ReactNode>;
+    /** Drawn when the value holds no icon (default: nothing). */
+    fallback?: React.ReactNode;
+}
+/**
+ * NiceIconValue (1.3.10) — shows an icon as NiceIconPicker stored it, whatever the format: a name,
+ * the code of a stack, JSON or HTML. It draws the icon again from the data; stored markup is never
+ * injected, so a value from a database cannot run anything. The rest of the props go to the base
+ * icon.
+ */
+export declare function NiceIconValue({ value, icons, values, fallback, ...baseProps }: NiceIconValueProps): React.ReactElement | null;
+export declare namespace NiceIconValue {
+    var displayName: string;
+}
+export interface NiceIconHtmlProps extends Omit<NiceIconValueProps, 'value'> {
+    /** The icon's HTML as NiceIconPicker wrote it (or any other of its formats). */
+    html: string | null | undefined;
+}
+/**
+ * NiceIconHtml (1.3.9) — shows an icon kept as HTML.
+ *
+ * @deprecated Since 1.3.10 use `NiceIconValue`, which reads every format the picker writes.
+ */
+export declare function NiceIconHtml({ html, ...props }: NiceIconHtmlProps): React.ReactElement | null;
+export declare namespace NiceIconHtml {
+    var displayName: string;
+}

package/dist/types/client.d.ts

@@ -18,9 +18,15 @@
 export { AnimationController, InteractiveIcon, useAnimationSequence, createAnimationSequence, createHoverAnimation, createClickAnimation, createVisibilityAnimation, PRESET_SEQUENCES, PRESET_INTERACTIONS, } from './animationControls';
 export type { AnimationStep, AnimationSequenceConfig, AnimationPlaybackState, AnimationTrigger, InteractiveAnimationConfig, AnimationControllerHandle, AnimationControllerProps, InteractiveIconProps, } from './animationControls';
 export { NiceIconPicker } from './NiceIconPicker';
-export type { NiceIconPickerProps, NiceIconPickerHandle, IconPickerEntry } from './NiceIconPicker';
+export type { NiceIconPickerProps, NiceIconPickerHandle, IconPickerEntry, NiceIconPickerValueFormat, NiceIconPickerDisplayMode, } from './NiceIconPicker';
+export { NiceIconValue, NiceIconHtml } from './NiceIconValue';
+export type { NiceIconValueProps, NiceIconHtmlProps } from './NiceIconValue';
+export { formatIconValue, parseIconValue } from './iconValue';
+export type { FormatIconValueOptions } from './iconValue';
+export { parseIconHtml } from './iconHtml';
+export type { 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 { NtdIconMorph, NtdPathMorph, NtdMorphPair, useMorphState } from './NtdIconMorph';

package/dist/types/iconHtml.d.ts

@@ -0,0 +1,22 @@
+import type { NiceIconStackLayer } from './iconStack';
+/** What an icon's HTML was drawn from. */
+export interface NiceIconHtmlSource {
+    /** The base icon's export name, e.g. `'NtdStar'`. */
+    icon: string;
+    /** The whole stack — one layer for a plain icon. */
+    layers: NiceIconStackLayer[];
+}
+/**
+ * Reads back what an icon's HTML was drawn from — the base icon and the stack. `null` for anything
+ * else: empty, plain text or HTML the picker did not write.
+ */
+export declare function parseIconHtml(html: string | null | undefined): NiceIconHtmlSource | null;
+/** The data attributes that let the HTML of a stack be read back: the base, and the stack unless it is a plain icon. */
+export declare function iconHtmlAttributes(layers: readonly NiceIconStackLayer[]): Record<string, string>;
+/**
+ * Renames the ids inside an icon's markup (masks, gradients, clip paths) after the drawing itself.
+ * React's ids (`_r_3_`) are unique only within the page that drew them; pasted into another page they
+ * could hit an element of its own and borrow the wrong mask. Named after the drawing, two copies of
+ * one icon share ids that point at identical definitions.
+ */
+export declare function scopeIconHtmlIds(markup: string): string;

package/dist/types/iconStack.d.ts

@@ -59,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/iconValue.d.ts

@@ -0,0 +1,22 @@
+import { type NiceIconStackLayer } from './iconStack';
+type Shorten = (name: string) => string;
+export interface FormatIconValueOptions {
+    /**
+     * The name written for an icon in a stack. Default: without `Ntd` (`NtdStar` → `Star`). Pass your
+     * own when your icons hold names that differ only by `Ntd`; NiceIconPicker does.
+     */
+    shortName?: Shorten;
+}
+/**
+ * Writes an icon or a stack as short text (1.3.10): `'name'` — a plain icon's name, a stack's code
+ * (`Folder(Star@tr)`) — or `'json'` (`["Folder",["Star",{"a":"tr"}]]`). Empty for no layers.
+ * `parseIconValue` reads it back; the ids of the layers are not kept.
+ */
+export declare function formatIconValue(layers: readonly NiceIconStackLayer[], format?: 'name' | 'json', { shortName }?: FormatIconValueOptions): string;
+/**
+ * Reads an icon kept as text (1.3.10) — a name, the code (`Folder(Star@tr)`), JSON or the HTML of
+ * NiceIconPicker 1.3.9 — into stack layers (ids `'1'`, `'2'`… in document order). `null` for empty
+ * or unreadable text. Names stay as written: `renderIconStack` resolves `Star` to `NtdStar`.
+ */
+export declare function parseIconValue(value: string | null | undefined): NiceIconStackLayer[] | null;
+export {};

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

@@ -25,5 +25,6 @@ export declare const NtdLogIn: import("react").ForwardRefExoticComponent<import(
 export declare const NtdLogOut: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdLock: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdUnlock: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const NtdFrameCorners: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdGroup: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdUngroup: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,5 +1,5 @@
 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 { 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, NtdFrameCorners, 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, 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';

package/dist/types/index.d.ts

@@ -53,9 +53,15 @@ 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 { NiceIconValue, NiceIconHtml } from './NiceIconValue';
+export type { NiceIconValueProps, NiceIconHtmlProps } from './NiceIconValue';
+export { formatIconValue, parseIconValue } from './iconValue';
+export type { FormatIconValueOptions } from './iconValue';
+export { parseIconHtml } from './iconHtml';
+export type { 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/package.json

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