@nice2dev/icons 1.0.0

package/dist/esm/smilAnimations.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+/**
+ * Default animation configurations.
+ */
+const DEFAULT_CONFIG = {
+    duration: 1,
+    repeatCount: 'indefinite',
+    easing: 'ease-in-out',
+    delay: 0,
+    fill: 'freeze',
+};
+/**
+ * Maps easing names to SMIL calcMode and keySplines.
+ */
+const EASING_MAP = {
+    linear: { calcMode: 'linear' },
+    ease: { calcMode: 'spline', keySplines: '0.25 0.1 0.25 1' },
+    'ease-in': { calcMode: 'spline', keySplines: '0.42 0 1 1' },
+    'ease-out': { calcMode: 'spline', keySplines: '0 0 0.58 1' },
+    'ease-in-out': { calcMode: 'spline', keySplines: '0.42 0 0.58 1' },
+};
+/**
+ * Generates SMIL animation elements for a given animation type.
+ *
+ * @param config - Animation configuration
+ * @param center - Center point for transforms (default: 12, 12 for 24x24 viewBox)
+ * @returns React elements to be placed inside an SVG `<g>` or at root level
+ */
+function generateSmilAnimation(config, center = { x: 12, y: 12 }) {
+    const { type, duration = DEFAULT_CONFIG.duration, repeatCount = DEFAULT_CONFIG.repeatCount, easing = DEFAULT_CONFIG.easing, delay = DEFAULT_CONFIG.delay, fill = DEFAULT_CONFIG.fill, targetColor, } = config;
+    const dur = `${duration}s`;
+    const begin = delay > 0 ? `${delay}s` : '0s';
+    const rep = repeatCount === 'indefinite' ? 'indefinite' : String(repeatCount);
+    const { calcMode, keySplines } = EASING_MAP[easing] || EASING_MAP.linear;
+    const baseProps = {
+        dur,
+        begin,
+        repeatCount: rep,
+        fill,
+        calcMode,
+        ...(keySplines && calcMode === 'spline' ? { keySplines, keyTimes: '0;1' } : {}),
+    };
+    switch (type) {
+        case 'spin':
+            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${center.x} ${center.y}`, to: `360 ${center.x} ${center.y}`, ...baseProps, calcMode: "linear" }));
+        case 'spin-reverse':
+            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `360 ${center.x} ${center.y}`, to: `0 ${center.x} ${center.y}`, ...baseProps, calcMode: "linear" }));
+        case 'pulse':
+            return (jsx("animate", { attributeName: "opacity", values: "1;0.4;1", keyTimes: "0;0.5;1", ...baseProps }));
+        case 'bounce':
+            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;0,-4;0,0", keyTimes: "0;0.5;1", ...baseProps }));
+        case 'shake':
+            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;-2,0;2,0;-2,0;2,0;0,0", keyTimes: "0;0.1;0.3;0.5;0.7;1", ...baseProps, keySplines: undefined, calcMode: "linear" }));
+        case 'float':
+            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;0,-3;0,0", keyTimes: "0;0.5;1", dur: `${duration * 2}s`, begin: begin, repeatCount: rep, fill: fill, calcMode: "spline", keySplines: "0.42 0 0.58 1;0.42 0 0.58 1" }));
+        case 'flip':
+            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: `0 ${center.x} ${center.y};180 ${center.x} ${center.y};360 ${center.x} ${center.y}`, keyTimes: "0;0.5;1", ...baseProps }));
+        case 'wiggle':
+            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: `0 ${center.x} ${center.y};-10 ${center.x} ${center.y};10 ${center.x} ${center.y};0 ${center.x} ${center.y}`, keyTimes: "0;0.25;0.75;1", ...baseProps }));
+        case 'swing':
+            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: `0 ${center.x} 0;15 ${center.x} 0;-10 ${center.x} 0;5 ${center.x} 0;0 ${center.x} 0`, keyTimes: "0;0.2;0.4;0.6;1", ...baseProps }));
+        case 'heartbeat':
+            return (jsx("animateTransform", { attributeName: "transform", type: "scale", values: "1;1.15;1;1.15;1", keyTimes: "0;0.14;0.28;0.42;1", ...baseProps, additive: "sum" }));
+        case 'scale-pulse':
+            return (jsx("animateTransform", { attributeName: "transform", type: "scale", values: "1;1.1;1", keyTimes: "0;0.5;1", ...baseProps, additive: "sum" }));
+        case 'grow':
+            return (jsx("animateTransform", { attributeName: "transform", type: "scale", from: "0", to: "1", ...baseProps, repeatCount: "1" }));
+        case 'shrink':
+            return (jsx("animateTransform", { attributeName: "transform", type: "scale", from: "1", to: "0", ...baseProps, repeatCount: "1" }));
+        case 'rubber':
+            return (jsx(Fragment, { children: jsx("animateTransform", { attributeName: "transform", type: "scale", values: "1,1;1.25,0.75;0.75,1.25;1.15,0.85;1,1", keyTimes: "0;0.3;0.5;0.7;1", ...baseProps, additive: "sum" }) }));
+        case 'pop':
+            return (jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0;1.2;1", keyTimes: "0;0.6;1", ...baseProps, repeatCount: "1", additive: "sum" }));
+        case 'fade':
+            return (jsx("animate", { attributeName: "opacity", values: "0;1;0", keyTimes: "0;0.5;1", ...baseProps }));
+        case 'blink':
+            return (jsx("animate", { attributeName: "opacity", values: "1;0;1", keyTimes: "0;0.5;1", dur: `${duration * 0.5}s`, begin: begin, repeatCount: rep, fill: fill, calcMode: "discrete" }));
+        case 'glow':
+            return (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", values: "0.6;1;0.6", keyTimes: "0;0.5;1", ...baseProps }), jsx("animate", { attributeName: "filter", values: "drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)", keyTimes: "0;0.5;1", ...baseProps })] }));
+        case 'slide-x':
+            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "-24,0;0,0;24,0", keyTimes: "0;0.5;1", ...baseProps }));
+        case 'slide-y':
+            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,-24;0,0;0,24", keyTimes: "0;0.5;1", ...baseProps }));
+        case 'orbit':
+            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${center.x} ${center.y}`, to: `360 ${center.x} ${center.y}`, ...baseProps, calcMode: "linear" }));
+        case 'wave':
+            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;0,-2;0,2;0,-2;0,0", keyTimes: "0;0.25;0.5;0.75;1", dur: `${duration * 0.5}s`, begin: begin, repeatCount: rep, fill: fill, calcMode: "spline", keySplines: "0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" }));
+        case 'draw':
+            return (jsxs(Fragment, { children: [jsx("animate", { attributeName: "stroke-dashoffset", from: "100", to: "0", ...baseProps }), jsx("set", { attributeName: "stroke-dasharray", to: "100" })] }));
+        case 'draw-reverse':
+            return (jsxs(Fragment, { children: [jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "100", ...baseProps }), jsx("set", { attributeName: "stroke-dasharray", to: "100" })] }));
+        case 'color-shift':
+            return (jsx("animate", { attributeName: "fill", values: `currentColor;${targetColor || '#ff6b6b'};currentColor`, keyTimes: "0;0.5;1", ...baseProps }));
+        default:
+            return null;
+    }
+}
+/**
+ * Wraps icon content in a `<g>` element with SMIL animations applied.
+ *
+ * @example
+ * ```tsx
+ * <svg viewBox="0 0 24 24">
+ *   <SmilAnimationWrapper animation="spin" duration={2}>
+ *     <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z" />
+ *   </SmilAnimationWrapper>
+ * </svg>
+ * ```
+ */
+function SmilAnimationWrapper({ animation, duration = 1, repeatCount = 'indefinite', easing = 'ease-in-out', delay = 0, center = { x: 12, y: 12 }, children, }) {
+    const animationElements = generateSmilAnimation({ type: animation, duration, repeatCount, easing, delay }, center);
+    // For scale animations, we need to translate to origin, scale, then translate back
+    const needsOriginTransform = [
+        'heartbeat',
+        'scale-pulse',
+        'grow',
+        'shrink',
+        'rubber',
+        'pop',
+    ].includes(animation);
+    if (needsOriginTransform) {
+        return (jsxs("g", { transform: `translate(${center.x}, ${center.y})`, children: [jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: children }), animationElements] }));
+    }
+    return (jsxs("g", { children: [children, animationElements] }));
+}
+/**
+ * Creates a SMIL animation definition that can be referenced by id.
+ * Useful for applying the same animation to multiple elements.
+ */
+function createSmilAnimationDef(id, config) {
+    return (jsx("defs", { children: jsx("g", { id: id, children: generateSmilAnimation(config) }) }));
+}
+/**
+ * Utility to check if SMIL animations are supported in the current environment.
+ */
+function isSmilSupported() {
+    if (typeof document === 'undefined')
+        return false;
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    return typeof svg.animate === 'function' || 'animateTransform' in document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
+}
+/**
+ * All available SMIL animation types as an array.
+ * Useful for documentation and UI components like NiceIconPicker.
+ */
+const SMIL_ANIMATION_TYPES = [
+    'spin',
+    'spin-reverse',
+    'pulse',
+    'bounce',
+    'shake',
+    'float',
+    'flip',
+    'wiggle',
+    'swing',
+    'heartbeat',
+    'scale-pulse',
+    'grow',
+    'shrink',
+    'rubber',
+    'pop',
+    'fade',
+    'blink',
+    'glow',
+    'slide-x',
+    'slide-y',
+    'orbit',
+    'wave',
+    'draw',
+    'draw-reverse',
+    'color-shift',
+];
+
+export { SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported };
+//# sourceMappingURL=smilAnimations.js.map

package/dist/esm/smilAnimations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smilAnimations.js","sources":["../../src/smilAnimations.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/esm/types.js

@@ -0,0 +1,44 @@
+/** Gradient preset color stops. */
+const GRADIENT_PRESETS = {
+    sunset: ['#ff6b6b', '#feca57', '#ff9ff3'],
+    ocean: ['#0652DD', '#1B9CFC', '#38ada9'],
+    forest: ['#0a3d0a', '#1e8449', '#58D68D'],
+    fire: ['#e74c3c', '#f39c12', '#f1c40f'],
+    ice: ['#74b9ff', '#a29bfe', '#dfe6e9'],
+    neon: ['#6c5ce7', '#fd79a8', '#00cec9'],
+    gold: ['#f9ca24', '#f0932b', '#e17055'],
+    'purple-haze': ['#6c5ce7', '#a55eea', '#e056a0'],
+    aurora: ['#00b894', '#00cec9', '#0984e3', '#6c5ce7'],
+    midnight: ['#0c0c1d', '#1e3a5f', '#2c3e50'],
+    candy: ['#ff6b81', '#ffa502', '#2ed573'],
+    steel: ['#636e72', '#b2bec3', '#dfe6e9'],
+};
+/**
+ * Map of named size presets to their pixel values.
+ *
+ * Used internally by {@link createIcon} to resolve `IconSize` strings to numbers.
+ *
+ * | Key    | Value |
+ * |--------|-------|
+ * | `xs`   | 12    |
+ * | `sm`   | 16    |
+ * | `md`   | 24    |
+ * | `lg`   | 32    |
+ * | `xl`   | 48    |
+ * | `2xl`  | 64    |
+ * | `xxl`  | 96    |
+ * | `xxxl` | 128   |
+ */
+const SIZE_MAP = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48,
+    '2xl': 64,
+    xxl: 96,
+    xxxl: 128,
+};
+
+export { GRADIENT_PRESETS, SIZE_MAP };
+//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../src/types.ts"],"sourcesContent":[null],"names":[],"mappings":"AA2LA;AACO,MAAM,gBAAgB,GAA8C;AACzE,IAAA,MAAM,EAAS,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,KAAK,EAAU,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,MAAM,EAAS,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,IAAI,EAAW,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,GAAG,EAAY,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,IAAI,EAAW,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,IAAI,EAAW,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,aAAa,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;IAChD,MAAM,EAAS,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAC3D,IAAA,QAAQ,EAAO,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,KAAK,EAAU,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAChD,IAAA,KAAK,EAAU,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;;AAgGlD;;;;;;;;;;;;;;;AAeG;AACI,MAAM,QAAQ,GAA2B;AAC9C,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,IAAI,EAAE,GAAG;;;;;"}

package/dist/types/NiceIconPicker.d.ts

@@ -0,0 +1,149 @@
+import React from 'react';
+import type { NtdIconProps, IconVariant, IconSize } from './types';
+import './NiceIconPicker.css';
+/**
+ * Describes a single icon entry for use with {@link NiceIconPicker}.
+ *
+ * @example
+ * ```ts
+ * const entry: IconPickerEntry = {
+ *   name: 'NtdHome',
+ *   Component: NtdHome,
+ *   category: 'Navigation',
+ * };
+ * ```
+ */
+export interface IconPickerEntry {
+    /** Unique icon name (e.g. `'NtdHome'`). Used as the selection value. */
+    name: string;
+    /** The React icon component created by {@link createIcon}. */
+    Component: React.ForwardRefExoticComponent<NtdIconProps & React.RefAttributes<SVGSVGElement>>;
+    /** Category label for grouping (e.g. `'Navigation'`). */
+    category: string;
+}
+/**
+ * Props for the {@link NiceIconPicker} component.
+ *
+ * @example
+ * ```tsx
+ * <NiceIconPicker
+ *   icons={allIcons}
+ *   value={selectedIcon}
+ *   onChange={(name) => setSelectedIcon(name)}
+ *   variant="solid"
+ *   placeholder="Choose an icon..."
+ *   clearable
+ * />
+ * ```
+ */
+export interface NiceIconPickerProps {
+    /** Full icon registry — array of { name, Component, category } */
+    icons: IconPickerEntry[];
+    /** Currently selected icon name (controlled) — single selection mode */
+    value?: string | null;
+    /** Currently selected icon names (controlled) — multi-select mode */
+    values?: string[];
+    /** Callback when an icon is selected (single mode) */
+    onChange?: (name: string | null, entry: IconPickerEntry | null) => void;
+    /** Callback when icons are selected (multi-select mode) */
+    onChangeMulti?: (names: string[], entries: IconPickerEntry[]) => void;
+    /** Enable multi-select mode */
+    multiSelect?: boolean;
+    /** Maximum number of icons that can be selected in multi-select mode */
+    maxSelections?: number;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Icon variant for preview rendering */
+    variant?: IconVariant;
+    /** Icon size for grid preview */
+    gridIconSize?: IconSize | number;
+    /** Icon size in the trigger button */
+    triggerIconSize?: IconSize | number;
+    /** Ordered list of category names to show as tabs. Defaults to auto-detected */
+    categories?: string[];
+    /** Additional className for root element */
+    className?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Allow clearing selection */
+    clearable?: boolean;
+    /** Enable virtualization for large icon sets (recommended for 500+ icons) */
+    virtualized?: boolean;
+    /** Number of items to render in viewport when virtualized (default: 100) */
+    virtualizedItemCount?: number;
+    /** Show recently used icons section */
+    showHistory?: boolean;
+    /** Show favorites section with localStorage persistence */
+    showFavorites?: boolean;
+    /** Custom localStorage key prefix for favorites/history (default: 'ntd-icon-picker') */
+    storageKeyPrefix?: string;
+    /** Enable drag & drop of icons to other applications */
+    enableDragAndDrop?: boolean;
+    /** Callback when drag starts */
+    onDragStart?: (entry: IconPickerEntry, event: React.DragEvent) => void;
+    /** Callback when drag ends */
+    onDragEnd?: (entry: IconPickerEntry, event: React.DragEvent) => void;
+}
+/**
+ * Imperative handle exposed via `React.forwardRef` on {@link NiceIconPicker}.
+ *
+ * Allows parent components to programmatically open, close, or toggle the picker dropdown,
+ * as well as manage favorites and history.
+ *
+ * @example
+ * ```tsx
+ * const pickerRef = useRef<NiceIconPickerHandle>(null);
+ * // ...
+ * <button onClick={() => pickerRef.current?.open()}>Open picker</button>
+ * <NiceIconPicker ref={pickerRef} icons={icons} />
+ * ```
+ */
+export interface NiceIconPickerHandle {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Get list of favorite icon names */
+    getFavorites: () => string[];
+    /** Add an icon to favorites */
+    addFavorite: (name: string) => void;
+    /** Remove an icon from favorites */
+    removeFavorite: (name: string) => void;
+    /** Toggle favorite status */
+    toggleFavorite: (name: string) => void;
+    /** Clear all favorites */
+    clearFavorites: () => void;
+    /** Get recent icon history */
+    getHistory: () => string[];
+    /** Clear history */
+    clearHistory: () => void;
+}
+/**
+ * A fully-featured icon picker dropdown component.
+ *
+ * Provides a trigger button that opens a searchable, categorized icon grid.
+ * Supports controlled selection, keyboard navigation (Escape to close),
+ * click-outside dismissal, and an imperative handle for programmatic control.
+ *
+ * **Styling:** Uses CSS variables for theming (see `NiceIconPicker.css`).
+ * Override `--ntd-picker-bg`, `--ntd-picker-accent`, etc. on a parent element.
+ *
+ * @example
+ * ```tsx
+ * import { NiceIconPicker } from '@nicetodev/icons';
+ *
+ * function IconSelectField({ icons }) {
+ *   const [selected, setSelected] = useState<string | null>(null);
+ *
+ *   return (
+ *     <NiceIconPicker
+ *       icons={icons}
+ *       value={selected}
+ *       onChange={(name) => setSelected(name)}
+ *       variant="solid"
+ *       placeholder="Pick icon..."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const NiceIconPicker: React.ForwardRefExoticComponent<NiceIconPickerProps & React.RefAttributes<NiceIconPickerHandle>>;

package/dist/types/NiceVectorEditor.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { IconVariant, IconAnimation } from './types';
+import './NiceVectorEditor.css';
+/** Universal library entry — works with NiceToDev icons or any custom components. */
+export interface VectorLibraryEntry {
+    name: string;
+    category?: string;
+    Component: React.ComponentType<Record<string, unknown>>;
+}
+/** Available drawing / interaction tools. */
+export type VectorTool = 'select' | 'rect' | 'circle' | 'line' | 'text' | 'pan';
+/** Supported layer element types. */
+export type VectorLayerType = 'rect' | 'circle' | 'line' | 'text' | 'icon';
+/** A single layer in the vector editor canvas. */
+export interface VectorEditorLayer {
+    id: string;
+    name: string;
+    type: VectorLayerType;
+    visible: boolean;
+    locked: boolean;
+    fill: string;
+    fillOpacity: number;
+    stroke: string;
+    strokeOpacity: number;
+    strokeWidth: number;
+    opacity: number;
+    blendMode: NonNullable<React.CSSProperties['mixBlendMode']>;
+    rotate: number;
+    scaleX: number;
+    scaleY: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx: number;
+    cx: number;
+    cy: number;
+    r: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    text: string;
+    fontSize: number;
+    fontFamily: string;
+    iconName: string;
+    iconSize: number;
+    iconVariant: IconVariant;
+    iconPrimaryColor: string;
+    iconSecondaryColor: string;
+    iconAccentColor: string;
+    iconAnimation: IconAnimation | 'none';
+}
+/** Props for the {@link NiceVectorEditor} component. */
+export interface NiceVectorEditorProps {
+    /** Browsable library items (icons, shapes, images). */
+    library?: VectorLibraryEntry[];
+    /** Canvas width in SVG units. @defaultValue 800 */
+    width?: number;
+    /** Canvas height in SVG units. @defaultValue 600 */
+    height?: number;
+    /** Layers to load on mount. */
+    initialLayers?: VectorEditorLayer[];
+    /** Fires whenever layers change. */
+    onChange?: (layers: VectorEditorLayer[]) => void;
+    /** Additional CSS class on the root element. */
+    className?: string;
+}
+/** Imperative handle exposed via `ref`. */
+export interface NiceVectorEditorHandle {
+    getLayers(): VectorEditorLayer[];
+    exportSvg(): string;
+    exportJson(): string;
+}
+export declare const NiceVectorEditor: React.ForwardRefExoticComponent<NiceVectorEditorProps & React.RefAttributes<NiceVectorEditorHandle>>;