@nice2dev/icons 1.0.8 → 1.0.11

package/dist/types/headless-ui.d.ts

@@ -91,7 +91,7 @@ export declare const Slot: React.ForwardRefExoticComponent<Omit<SlotProps & Reco
  * </DropdownMenu.Trigger>
  * ```
  */
-export declare function forwardRefIcon(IconComponent: ComponentType<any>, displayName?: string): ForwardRefIcon;
+export declare function forwardRefIcon(IconComponent: ComponentType<IconProps>, displayName?: string): ForwardRefIcon;
 /**
  * shadcn/ui icon size presets matching their button sizes
  */
@@ -176,7 +176,7 @@ export declare const shadcnIconClasses: {
  * </DropdownMenu.Trigger>
  * ```
  */
-export declare function createRadixIcon(IconComponent: ComponentType<any>, defaultProps?: Partial<IconProps>): ForwardRefIcon;
+export declare function createRadixIcon(IconComponent: ComponentType<IconProps>, defaultProps?: Partial<IconProps>): ForwardRefIcon;
 /**
  * HOC that adds Radix UI state-based styling to icons.
  * Supports data-state attributes for open/closed states.
@@ -194,7 +194,7 @@ export declare function createRadixIcon(IconComponent: ComponentType<any>, defau
  * </Collapsible.Trigger>
  * ```
  */
-export declare function withRadixState(IconComponent: ComponentType<any>): ForwardRefIcon;
+export declare function withRadixState(IconComponent: ComponentType<IconProps>): ForwardRefIcon;
 /**
  * Transition presets for Headless UI Transition component with icons.
  */
@@ -243,7 +243,7 @@ export declare const headlessTransitions: {
  * @param transition - Transition preset name
  * @returns Icon component with transition classes
  */
-export declare function createHeadlessIcon(IconComponent: ComponentType<any>, transition?: keyof typeof headlessTransitions): ComponentType<IconProps & {
+export declare function createHeadlessIcon(IconComponent: ComponentType<IconProps>, transition?: keyof typeof headlessTransitions): ComponentType<IconProps & {
     show?: boolean;
 }>;
 /**

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

@@ -15,7 +15,7 @@ export declare const NtdTrophy: import("react").ForwardRefExoticComponent<import
 export declare const NtdLeaderboard: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdHealthBar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdXpBar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
-export declare const NtdAchievement: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const NtdStar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdTwitch: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdYoutubeLive: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const NtdDiscord: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
@@ -31,7 +31,7 @@ export declare const gamingIcons: {
     NtdLeaderboard: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
     NtdHealthBar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
     NtdXpBar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
-    NtdAchievement: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    NtdStar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
     NtdTwitch: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
     NtdYoutubeLive: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
     NtdDiscord: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -18,7 +18,7 @@ export { NtdDashboard, NtdAnalytics, NtdIntegration, NtdAPI, NtdWebhook, NtdMetr
 export { NtdSmartBulb, NtdThermostat, NtdSmartCamera, NtdDoorbell, NtdMotionSensor, NtdSmartLock, NtdSmartHub, NtdVoiceAssistant, NtdSmartPlug, NtdTemperatureSensor, NtdSmartSwitch, NtdRouter, NtdSmartSpeaker, } from './smarthome';
 export { NtdApple, NtdPizza, NtdGlass, NtdHeartPulse, NtdPill, NtdSyringe, NtdStethoscope, NtdWeight, NtdBandaid, NtdCake, NtdEgg, NtdHamburger, NtdDna, } from './health';
 export { NtdNiceToDev, NtdOmniVerk, NtdOmniVerkLogo, NtdOmniVerkSpinner, NtdOmniVerkBadge, NtdOmniVerkWatermark, NtdOmniVerkAnimated, } from './brand';
-export { NtdGamepad as NtdGamepadController, NtdJoystick, NtdVrHeadset, NtdTrophy as NtdTrophyGaming, NtdLeaderboard, NtdHealthBar, NtdXpBar, NtdAchievement, NtdTwitch, NtdYoutubeLive, NtdDiscord, NtdDice as NtdDiceGaming, NtdSword, NtdShield as NtdShieldGaming, NtdPotion, gamingIcons, } from './gaming';
+export { NtdGamepad as NtdGamepadController, NtdJoystick, NtdVrHeadset, NtdTrophy as NtdTrophyGaming, NtdLeaderboard, NtdHealthBar, NtdXpBar, NtdStar as NtdStarGaming, NtdTwitch, NtdYoutubeLive, NtdDiscord, NtdDice as NtdDiceGaming, NtdSword, NtdShield as NtdShieldGaming, NtdPotion, gamingIcons, } from './gaming';
 export { NtdNeuralNetwork, NtdBrain, NtdDeepLearning, NtdChatbot, NtdRobot, NtdVoiceAssistant as NtdAIAssistant, NtdTensor, NtdGradient, NtdDataset, NtdModel, NtdTraining, NtdInference, NtdSparkle, NtdMagicWand, NtdPrompt, aiIcons, } from './ai';
 export { NtdGraduationCap, NtdDiploma, NtdSchool, NtdUniversity, NtdBook, NtdOpenBook, NtdNotebook, NtdPencil, NtdPen, NtdOnlineCourse, NtdWebinar, NtdCertificate, NtdQuiz, NtdExam, NtdFlashcard, NtdBackpack, NtdCalculator as NtdCalculatorEdu, educationIcons, } from './education';
 export { NtdBeaker, NtdFlask, NtdTestTube, NtdPetriDish, NtdMicroscope, NtdDna as NtdDnaScience, NtdAtom, NtdMolecule, NtdPeriodictable, NtdMagnet, NtdTelescope, NtdPlanet, NtdRocket as NtdRocketScience, NtdResearch, NtdHypothesis, NtdExperiment, scienceIcons, } from './science';

package/dist/types/index.d.ts

@@ -53,7 +53,7 @@
  * @module @nicetodev/icons
  */
 import './animations.css';
-export type { IconSize, IconVariant, IconAnimation, GradientPreset, GradientType, GradientAnimation, SemanticColor, NtdIconProps, IconRenderProps, } from './types';
+export type { IconSize, IconVariant, IconAnimation, CutoutShape, GradientPreset, GradientType, GradientAnimation, SemanticColor, NtdIconProps, IconRenderProps, } from './types';
 export { SIZE_MAP, GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS, SEMANTIC_COLOR_VARS } from './types';
 export { createIcon } from './createIcon';
 export { generateSmilAnimation, SmilAnimationWrapper as NiceSmilAnimationWrapper, SmilAnimationWrapper, createSmilAnimationDef, isSmilSupported, SMIL_ANIMATION_TYPES, } from './smilAnimations';
@@ -89,8 +89,8 @@ export { createNiceIconResolver, getResolverIconNames } from './resolver';
 export type { NiceIconResolverOptions } from './resolver';
 export { ntdIconPlugin, ntdIconPreset } from './tailwind-plugin';
 export type { NtdTailwindPluginOptions } from './tailwind-plugin';
-export { isSolidProps, isOutlineProps, isDuotoneProps, isFlatProps, isSharpProps, isRoundedProps, isMiniProps, isThreeDProps, toIconProps, } from './variantProps';
-export type { VariantIconProps, SolidIconProps, OutlineIconProps, DuotoneIconProps, FlatIconProps, SharpIconProps, RoundedIconProps, MiniIconProps, ThreeDIconProps, } from './variantProps';
+export { isSolidProps, isOutlineProps, isDuotoneProps, isCutoutProps, isFlatProps, isSharpProps, isRoundedProps, isMiniProps, isThreeDProps, isVividProps, toIconProps, } from './variantProps';
+export type { VariantIconProps, SolidIconProps, OutlineIconProps, DuotoneIconProps, CutoutIconProps, FlatIconProps, SharpIconProps, RoundedIconProps, MiniIconProps, ThreeDIconProps, VividIconProps, } from './variantProps';
 export { NtdStateMorph, useStateMorph } from './NtdStateMorph';
 export type { NtdStateMorphProps, MorphStateMap, StateMorphHandle } from './NtdStateMorph';
 export { NtdLottieIcon, lottieToIcon, exportToLottie } from './lottieIntegration';

package/dist/types/microInteractions.d.ts

@@ -158,15 +158,15 @@ interface QuickEffectProps {
 /**
  * Quick hover lift effect wrapper
  */
-export declare function HoverLift({ children, duration, disabled, className, style }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
+export declare function HoverLift({ children, duration, disabled, className, style, }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Quick click pop effect wrapper
  */
-export declare function ClickPop({ children, duration, disabled, className, style }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClickPop({ children, duration, disabled, className, style, }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Quick ripple effect wrapper
  */
-export declare function ClickRipple({ children, duration, disabled, className, style }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClickRipple({ children, duration, disabled, className, style, }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Quick focus glow effect wrapper
  */

package/dist/types/rsc.d.ts

@@ -20,7 +20,7 @@
  * @since 2026-03
  * @license MIT
  */
-import type { IconVariant, GradientPreset, SemanticColor } from './types';
+import type { IconVariant, GradientPreset, SemanticColor, CutoutShape } from './types';
 import { SIZE_MAP, GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS } from './types';
 /**
  * Props for RSC-compatible icons (subset of full NtdIconProps).
@@ -31,6 +31,8 @@ export interface NtdIconRSCProps {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
     /** Icon rendering variant */
     variant?: IconVariant;
+    /** Background shape for cutout variant. @defaultValue 'rounded-square' */
+    cutoutShape?: CutoutShape;
     /** Primary icon color */
     primaryColor?: string;
     /** Secondary color (for duotone/flat variants) */
@@ -94,11 +96,14 @@ export interface CreateIconRSCOptions {
         solid: IconPathRendererRSC;
         outline: IconPathRendererRSC;
         duotone: IconPathRendererRSC;
-        flat: IconPathRendererRSC;
+        /** @deprecated Use cutout variant instead. */
+        flat?: IconPathRendererRSC;
+        cutout?: IconPathRendererRSC;
         sharp?: IconPathRendererRSC;
         rounded?: IconPathRendererRSC;
         mini?: IconPathRendererRSC;
         '3d'?: IconPathRendererRSC;
+        vivid?: IconPathRendererRSC;
     };
 }
 /**
@@ -121,7 +126,6 @@ export interface CreateIconRSCOptions {
  *     solid: ({ primaryColor }) => <path d="..." fill={primaryColor} />,
  *     outline: ({ primaryColor, strokeWidth }) => <path d="..." stroke={primaryColor} />,
  *     duotone: ({ primaryColor, secondaryColor }) => <path d="..." />,
- *     flat: ({ primaryColor, secondaryColor }) => <path d="..." />,
  *   },
  * });
  * ```

package/dist/types/types.d.ts

@@ -27,21 +27,44 @@ export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'xxl' | 'xxxl'
  * - `'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.
+ * - `'cutout'` — Knockout/cutout: colored background shape with icon silhouette cut out.
+ * - `'flat'` — Deprecated alias for `'cutout'`.
  * - `'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.
+ * - `'vivid'` — Colorful multi-fill rendering using primaryColor & secondaryColor as dominant hues.
  *
  * @example
  * ```tsx
  * <NtdHeart variant="duotone" primaryColor="#e74c3c" secondaryColor="#fca5a5" />
+ * <NtdHome variant="cutout" cutoutShape="circle" />
  * <NtdHome variant="sharp" /> // Sharp corners
  * <NtdStar variant="rounded" /> // Extra rounded
  * <NtdBox variant="3d" /> // 3D effect with shadows
+ * <NtdHeart variant="vivid" primaryColor="#e74c3c" secondaryColor="#f472b6" /> // Colorful
  * ```
  */
-export type IconVariant = 'solid' | 'outline' | 'duotone' | 'flat' | 'sharp' | 'rounded' | 'mini' | '3d';
+export type IconVariant = 'solid' | 'outline' | 'duotone' | 'cutout' | 'flat' | 'sharp' | 'rounded' | 'mini' | '3d' | 'vivid';
+/**
+ * Shape of the background for the `'cutout'` variant.
+ *
+ * - `'rounded-square'` — Rounded-corner rectangle (default).
+ * - `'circle'` — Circular background.
+ * - `'square'` — Sharp-corner square.
+ * - `'hexagon'` — Hexagonal background.
+ * - `'diamond'` — Rotated square (diamond).
+ * - `'shield'` — Shield / badge shape.
+ * - `'squircle'` — iOS-style super-ellipse.
+ *
+ * @example
+ * ```tsx
+ * <NtdHome variant="cutout" cutoutShape="circle" />
+ * <NtdStar variant="cutout" cutoutShape="hexagon" />
+ * <NtdHeart variant="cutout" cutoutShape="shield" />
+ * ```
+ */
+export type CutoutShape = 'rounded-square' | 'circle' | 'square' | 'hexagon' | 'diamond' | 'shield' | 'squircle';
 /**
  * All supported CSS animation names.
  *
@@ -131,6 +154,8 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     size?: IconSize;
     /** Rendering variant */
     variant?: IconVariant;
+    /** Background shape for the cutout variant. @defaultValue `'rounded-square'` */
+    cutoutShape?: CutoutShape;
     /**
      * Semantic color for the icon.
      * Uses CSS variables with fallback to defaults.

package/dist/types/variantProps.d.ts

@@ -21,7 +21,7 @@
  * }
  * ```
  */
-import type { NtdIconProps, IconSize, IconAnimation, GradientPreset, SemanticColor } from './types';
+import type { NtdIconProps, IconSize, IconAnimation, GradientPreset, SemanticColor, CutoutShape } from './types';
 interface SharedIconProps {
     size?: IconSize;
     color?: SemanticColor;
@@ -55,10 +55,17 @@ export interface DuotoneIconProps extends SharedIconProps {
     secondaryOpacity?: number;
     strokeWidth?: number;
 }
-/** Props for `variant="flat"` — badge-style with background color. */
+/** Props for `variant="cutout"` — knockout/cutout with configurable background shape. */
+export interface CutoutIconProps extends SharedIconProps {
+    variant: 'cutout';
+    secondaryColor?: string;
+    cutoutShape?: CutoutShape;
+}
+/** @deprecated Use `CutoutIconProps` with `variant="cutout"` instead. */
 export interface FlatIconProps extends SharedIconProps {
     variant: 'flat';
     secondaryColor?: string;
+    cutoutShape?: CutoutShape;
 }
 /** Props for `variant="sharp"` — solid with sharp corners. */
 export interface SharpIconProps extends SharedIconProps {
@@ -78,6 +85,12 @@ export interface ThreeDIconProps extends SharedIconProps {
     accentColor?: string;
     accentOpacity?: number;
 }
+/** Props for `variant="vivid"` — colorful multi-fill rendering. */
+export interface VividIconProps extends SharedIconProps {
+    variant: 'vivid';
+    secondaryColor?: string;
+    accentColor?: string;
+}
 /**
  * Discriminated union of all variant-specific prop types.
  *
@@ -97,14 +110,16 @@ export interface ThreeDIconProps extends SharedIconProps {
  * }
  * ```
  */
-export type VariantIconProps = SolidIconProps | OutlineIconProps | DuotoneIconProps | FlatIconProps | SharpIconProps | RoundedIconProps | MiniIconProps | ThreeDIconProps;
+export type VariantIconProps = SolidIconProps | OutlineIconProps | DuotoneIconProps | CutoutIconProps | FlatIconProps | SharpIconProps | RoundedIconProps | MiniIconProps | ThreeDIconProps | VividIconProps;
 /** Narrows to `SolidIconProps` when `variant === 'solid'`. */
 export declare function isSolidProps(props: VariantIconProps): props is SolidIconProps;
 /** Narrows to `OutlineIconProps` when `variant === 'outline'`. */
 export declare function isOutlineProps(props: VariantIconProps): props is OutlineIconProps;
 /** Narrows to `DuotoneIconProps` when `variant === 'duotone'`. */
 export declare function isDuotoneProps(props: VariantIconProps): props is DuotoneIconProps;
-/** Narrows to `FlatIconProps` when `variant === 'flat'`. */
+/** Narrows to `CutoutIconProps` when `variant === 'cutout'`. */
+export declare function isCutoutProps(props: VariantIconProps): props is CutoutIconProps;
+/** @deprecated Use `isCutoutProps` instead. Narrows to `FlatIconProps` when `variant === 'flat'`. */
 export declare function isFlatProps(props: VariantIconProps): props is FlatIconProps;
 /** Narrows to `SharpIconProps` when `variant === 'sharp'`. */
 export declare function isSharpProps(props: VariantIconProps): props is SharpIconProps;
@@ -114,6 +129,8 @@ export declare function isRoundedProps(props: VariantIconProps): props is Rounde
 export declare function isMiniProps(props: VariantIconProps): props is MiniIconProps;
 /** Narrows to `ThreeDIconProps` when `variant === '3d'`. */
 export declare function isThreeDProps(props: VariantIconProps): props is ThreeDIconProps;
+/** Narrows to `VividIconProps` when `variant === 'vivid'`. */
+export declare function isVividProps(props: VariantIconProps): props is VividIconProps;
 /**
  * Converts a discriminated `VariantIconProps` into the general `NtdIconProps`.
  * Useful when passing narrowed props to actual icon components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/icons",
-  "version": "1.0.8",
+  "version": "1.0.11",
   "description": "Beautiful, lightweight, multi-color SVG icon library for React with animations",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -79,7 +79,7 @@
     "demo": "vite demo",
     "demo:build": "vite build demo",
     "lint": "eslint src/",
-    "test": "vitest run --config vitest.config.ts",
+    "test": "vitest run --config vitest.config.ts --passWithNoTests",
     "test:watch": "vitest --config vitest.config.ts",
     "test:coverage": "vitest run --config vitest.config.ts --coverage",
     "prepublishOnly": "npm run build",
@@ -89,7 +89,7 @@
     "test:visual:ci": "npx chromatic --auto-accept-changes=main",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "changelog:first": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
-    "version": "1.0.8"
+    "version": "1.0.9"
   },
   "keywords": [
     "icons",