@nice2dev/icons 1.0.0

package/dist/types/types.d.ts

@@ -0,0 +1,179 @@
+import { SVGProps } from 'react';
+import type { SmilAnimationType } from './smilAnimations';
+/**
+ * Named icon size preset or a custom pixel value.
+ *
+ * | Preset | Pixels |
+ * |--------|--------|
+ * | `'xs'` | 12     |
+ * | `'sm'` | 16     |
+ * | `'md'` | 24     |
+ * | `'lg'` | 32     |
+ * | `'xl'` | 48     |
+ * | `'2xl'`| 64     |
+ * | `'xxl'`| 96     |
+ * | `'xxxl'`| 128   |
+ *
+ * @example
+ * ```tsx
+ * <NtdHome size="lg" />      // 32px
+ * <NtdHome size={40} />      // 40px
+ * ```
+ */
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'xxl' | 'xxxl' | number;
+/**
+ * Icon rendering variant.
+ *
+ * - `'solid'` — Filled icon shapes.
+ * - `'outline'` — Stroked paths only, no fill.
+ * - `'duotone'` — Two-tone rendering with a filled background layer at reduced opacity.
+ * - `'flat'` — Badge-style: colored rounded-rect background with solid content on top.
+ * - `'sharp'` — Solid variant with sharp corners (no rounded edges).
+ * - `'rounded'` — Solid variant with extra-rounded corners.
+ * - `'mini'` — Compact variant optimized for small sizes (12-16px).
+ * - `'3d'` — Pseudo-3D with highlights and shadows for depth effect.
+ *
+ * @example
+ * ```tsx
+ * <NtdHeart variant="duotone" primaryColor="#e74c3c" secondaryColor="#fca5a5" />
+ * <NtdHome variant="sharp" /> // Sharp corners
+ * <NtdStar variant="rounded" /> // Extra rounded
+ * <NtdBox variant="3d" /> // 3D effect with shadows
+ * ```
+ */
+export type IconVariant = 'solid' | 'outline' | 'duotone' | 'flat' | 'sharp' | 'rounded' | 'mini' | '3d';
+/**
+ * All supported CSS animation names.
+ *
+ * Each value maps to a `.ntd-anim-{name}` CSS class defined in `animations.css`.
+ *
+ * **Categories:**
+ * - **Core transforms:** spin, pulse, bounce, shake, float, flip, glow, wiggle, etc.
+ * - **Entrances (one-shot):** fade-in, slide-up, drop, rise, roll-in, vortex, meteor, etc.
+ * - **Exits (one-shot):** scale-out, fold, dissolve.
+ * - **Organic / natural:** breathe, drift, orbit, sway, tilt, pendulum, levitate, etc.
+ * - **Energetic / impact:** jello, pop, squeeze, crush, stomp, snap, dash, surge.
+ * - **Effects / digital:** flash, blink, glitch, neon, earthquake, vibrate.
+ * - **Complex transforms:** wobble, spiral, warp, morph, zoom-pulse, ripple, radar.
+ * - **Dramatic:** ping, implode, explode, scatter, rotate-x, draw-loop.
+ *
+ * @example
+ * ```tsx
+ * <NtdSearch animation="bounce" />
+ * <NtdBell animation="shake" animationDuration="0.5s" />
+ * ```
+ */
+export type IconAnimation = 'spin' | 'spin-reverse' | 'pulse' | 'bounce' | 'shake' | 'float' | 'flip' | 'glow' | 'wiggle' | 'rubber' | 'swing' | 'tada' | 'heartbeat' | 'fade-in' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'drop' | 'rise' | 'roll-in' | 'materialize' | 'vortex' | 'meteor' | 'scale-in' | 'signature' | 'draw-sequence' | 'stroke-order' | 'glow-trace' | 'seal-stamp' | 'reveal' | 'typewriter' | 'unfold' | 'assemble' | 'draw' | 'draw-from-dot' | 'scale-out' | 'fold' | 'dissolve' | 'breathe' | 'drift' | 'orbit' | 'sway' | 'tilt' | 'rock' | 'pendulum' | 'levitate' | 'flap' | 'skate' | 'jello' | 'pop' | 'squeeze' | 'crush' | 'stretch' | 'stomp' | 'snap' | 'twist' | 'dash' | 'surge' | 'flash' | 'blink' | 'flicker' | 'vibrate' | 'tremble' | 'glitch' | 'neon' | 'earthquake' | 'wobble' | 'spiral' | 'warp' | 'morph' | 'zoom-pulse' | 'ripple' | 'radar' | 'ping' | 'implode' | 'explode' | 'scatter' | 'rotate-x' | 'draw-loop';
+/**
+ * Named gradient presets.
+ *
+ * Each maps to a set of color stops defined in `GRADIENT_PRESETS`.
+ */
+export type GradientPreset = 'sunset' | 'ocean' | 'forest' | 'fire' | 'ice' | 'neon' | 'gold' | 'purple-haze' | 'aurora' | 'midnight' | 'candy' | 'steel';
+/** Gradient shape (linear direction or radial). */
+export type GradientType = 'linear' | 'radial';
+/** Gradient animation style. */
+export type GradientAnimation = 'shift' | 'spin' | 'pulse';
+/** Gradient preset color stops. */
+export declare const GRADIENT_PRESETS: Record<GradientPreset, readonly string[]>;
+/**
+ * Common props accepted by every NiceToDev icon component.
+ *
+ * Extends standard SVG element attributes, adding icon-specific controls
+ * for size, variant, multi-color support, animation, and accessibility.
+ *
+ * @example
+ * ```tsx
+ * <NtdHome
+ *   size="lg"
+ *   variant="duotone"
+ *   primaryColor="#3b82f6"
+ *   secondaryColor="#93c5fd"
+ *   animation="bounce"
+ *   title="Home"
+ * />
+ * ```
+ */
+export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    /** Icon size — named preset or pixel number */
+    size?: IconSize;
+    /** Rendering variant */
+    variant?: IconVariant;
+    /** Primary (main) color */
+    primaryColor?: string;
+    /** Secondary color — used in duotone variant */
+    secondaryColor?: string;
+    /** Accent color — for small detail elements */
+    accentColor?: string;
+    /** Opacity for primary elements (0-1) */
+    primaryOpacity?: number;
+    /** Opacity for secondary elements in duotone variant (0-1) */
+    secondaryOpacity?: number;
+    /** Opacity for accent/detail elements (0-1) */
+    accentOpacity?: number;
+    /** Base stroke width for outline / duotone icons (default 2) */
+    strokeWidth?: number;
+    /** Stroke line cap style (default 'round') */
+    strokeLinecap?: 'round' | 'square' | 'butt';
+    /** Stroke line join style (default 'round') */
+    strokeLinejoin?: 'round' | 'miter' | 'bevel';
+    /** CSS animation to apply */
+    animation?: IconAnimation;
+    /** Animation duration override (CSS value) */
+    animationDuration?: string;
+    /** SMIL animation to apply (SVG-native, no CSS required) */
+    smilAnimation?: SmilAnimationType;
+    /** SMIL animation duration in seconds (default: 1) */
+    smilDuration?: number;
+    /** SMIL animation repeat count ('indefinite' for infinite) */
+    smilRepeatCount?: number | 'indefinite';
+    /** SMIL animation easing */
+    smilEasing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    /** SMIL animation start delay in seconds */
+    smilDelay?: number;
+    /** Apply a gradient fill preset to the primary color. */
+    gradient?: GradientPreset;
+    /** Gradient shape — linear or radial (default `'linear'`). */
+    gradientType?: GradientType;
+    /** Gradient angle in degrees for linear gradients (default `135`). */
+    gradientAngle?: number;
+    /** Animate the gradient. */
+    gradientAnimation?: GradientAnimation;
+    /** Accessible title for screen readers */
+    title?: string;
+}
+/**
+ * Props received by icon path renderer functions inside {@link CreateIconOptions.paths}.
+ *
+ * Each property is pre-resolved from the user-facing {@link NtdIconProps}
+ * so renderers can focus purely on SVG path construction.
+ */
+export interface IconRenderProps {
+    variant: IconVariant;
+    primaryColor: string;
+    secondaryColor: string;
+    accentColor: string;
+    primaryOpacity: number;
+    secondaryOpacity: number;
+    accentOpacity: number;
+    strokeWidth: number;
+    strokeLinecap: 'round' | 'square' | 'butt';
+    strokeLinejoin: 'round' | 'miter' | 'bevel';
+}
+/**
+ * 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   |
+ */
+export declare const SIZE_MAP: Record<string, number>;

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@nice2dev/icons",
+  "version": "1.0.0",
+  "description": "Beautiful, lightweight, multi-color SVG icon library for React with animations",
+  "author": "NiceToDev <contact@nicetodev.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/NiceToDev/NiceToDev.UI#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NiceToDev/NiceToDev.UI.git",
+    "directory": "nice2dev-icons"
+  },
+  "bugs": {
+    "url": "https://github.com/NiceToDev/NiceToDev.UI/issues"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "LICENSE",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npm run build:types && rollup -c",
+    "build:types": "tsc -p tsconfig.types.json",
+    "dev": "rollup -c -w",
+    "demo": "vite demo",
+    "demo:build": "vite build demo",
+    "lint": "eslint src/",
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --config vitest.config.ts",
+    "test:coverage": "vitest run --config vitest.config.ts --coverage",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "icons",
+    "react",
+    "svg",
+    "typescript",
+    "multi-color",
+    "animated",
+    "duotone",
+    "nicetodev"
+  ],
+  "author": "NiceToDev",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-vitest": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "jsdom": "^29.0.0",
+    "playwright": "^1.58.2",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^10.2.19",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vitest": "^4.1.0"
+  }
+}