@nice2dev/icons 1.3.13 → 1.3.15

package/dist/types/micro-interactions.d.ts

@@ -1,146 +0,0 @@
-/**
- * @file micro-interactions.tsx
- * @description Micro-interactions library for nice2dev icons
- *
- * Provides hover, click, focus, and visibility effects for icons.
- * 20+ presets for common UI interactions.
- *
- * @example
- * ```tsx
- * <NtdInteractiveIcon
- *   icon={NtdHeart}
- *   hoverEffect="lift"
- *   clickEffect="ripple"
- *   focusEffect="glow"
- * />
- * ```
- *
- * @version 1.0.0
- * @since 2026-03
- * @license MIT
- */
-import React from 'react';
-import type { NtdIconProps } from './types';
-/**
- * Type alias for icon components
- */
-export type IconComponent = React.ComponentType<NtdIconProps>;
-/**
- * Alias for compatibility
- */
-export type IconProps = NtdIconProps;
-/**
- * Hover effect types
- */
-export type HoverEffect = 'lift' | 'grow' | 'shrink' | 'rotate' | 'tilt' | 'shake' | 'bounce' | 'pulse' | 'glow' | 'swing' | 'float' | 'heartbeat' | 'flip' | 'wobble' | 'jello' | 'rubberband' | 'tada' | 'pop' | 'bloom' | 'neon' | 'none';
-/**
- * Click/Tap effect types
- */
-export type ClickEffect = 'ripple' | 'burst' | 'shrinkBounce' | 'flash' | 'shake' | 'spin' | 'confetti' | 'explode' | 'implode' | 'ring' | 'checkmark' | 'success' | 'error' | 'scale' | 'none';
-/**
- * Focus effect types
- */
-export type FocusEffect = 'glow' | 'ring' | 'outline' | 'shadow' | 'pulse' | 'highlight' | 'underline' | 'border' | 'none';
-/**
- * Visibility/scroll effect types
- */
-export type VisibleEffect = 'fadeIn' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'zoomIn' | 'flipIn' | 'bounceIn' | 'rotateIn' | 'none';
-/**
- * Effect timing configuration
- */
-export interface EffectTiming {
-    duration?: number;
-    delay?: number;
-    easing?: string;
-}
-/**
- * Glow color presets
- */
-export type GlowColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string;
-/**
- * Interactive icon props
- */
-export interface NtdInteractiveIconProps extends Omit<IconProps, 'ref'> {
-    /** The icon component to render */
-    icon: IconComponent;
-    /** Hover effect type */
-    hoverEffect?: HoverEffect;
-    /** Click/tap effect type */
-    clickEffect?: ClickEffect;
-    /** Focus effect type */
-    focusEffect?: FocusEffect;
-    /** Effect when element becomes visible (IntersectionObserver) */
-    visibleEffect?: VisibleEffect;
-    /** Custom timing for hover effect */
-    hoverTiming?: EffectTiming;
-    /** Custom timing for click effect */
-    clickTiming?: EffectTiming;
-    /** Custom timing for focus effect */
-    focusTiming?: EffectTiming;
-    /** Custom timing for visible effect */
-    visibleTiming?: EffectTiming;
-    /** Glow color for glow effects */
-    glowColor?: GlowColor;
-    /** Intensity of effects (0-1) */
-    intensity?: number;
-    /** Enable haptic feedback (if available) */
-    haptic?: boolean;
-    /** Sound effect URL */
-    soundUrl?: string;
-    /** Callback on click */
-    onClick?: (event: React.MouseEvent) => void;
-    /** Callback on hover start */
-    onHoverStart?: () => void;
-    /** Callback on hover end */
-    onHoverEnd?: () => void;
-    /** Callback when visible */
-    onVisible?: () => void;
-    /** Disable all interactions */
-    disabled?: boolean;
-    /** Additional wrapper className */
-    wrapperClassName?: string;
-    /** Inline wrapper styles */
-    wrapperStyle?: React.CSSProperties;
-}
-export declare const hoverEffectPresets: Record<Exclude<HoverEffect, 'none'>, React.CSSProperties>;
-export declare const clickEffectStyles: Record<Exclude<ClickEffect, 'none'>, string>;
-export declare const focusEffectStyles: Record<Exclude<FocusEffect, 'none'>, React.CSSProperties>;
-export declare const visibleEffectStyles: Record<Exclude<VisibleEffect, 'none'>, React.CSSProperties>;
-/**
- * Interactive icon wrapper with micro-interaction effects
- *
- * @example
- * ```tsx
- * <NtdInteractiveIcon
- *   icon={NtdHeart}
- *   hoverEffect="lift"
- *   clickEffect="ripple"
- *   focusEffect="glow"
- *   glowColor="error"
- * />
- * ```
- */
-export declare const NtdInteractiveIcon: React.ForwardRefExoticComponent<NtdInteractiveIconProps & React.RefAttributes<HTMLDivElement>>;
-/** Lift on hover + ripple on click */
-export declare const NtdLiftIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "hoverEffect" | "clickEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** Heart icon with heartbeat hover */
-export declare const NtdHeartbeatIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "hoverEffect" | "clickEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** Bounce on hover */
-export declare const NtdBounceIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "hoverEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** Neon glow effect */
-export declare const NtdNeonIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "hoverEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** Success feedback */
-export declare const NtdSuccessIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "glowColor" | "clickEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** Error feedback */
-export declare const NtdErrorIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "glowColor" | "clickEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** Animated on scroll */
-export declare const NtdScrollRevealIcon: React.ForwardRefExoticComponent<Omit<NtdInteractiveIconProps, "visibleEffect"> & React.RefAttributes<HTMLDivElement>>;
-/** All hover effect names */
-export declare const allHoverEffects: HoverEffect[];
-/** All click effect names */
-export declare const allClickEffects: ClickEffect[];
-/** All focus effect names */
-export declare const allFocusEffects: FocusEffect[];
-/** All visible effect names */
-export declare const allVisibleEffects: VisibleEffect[];
-export default NtdInteractiveIcon;

package/dist/types/microInteractions.d.ts

@@ -1,174 +0,0 @@
-/**
- * @file microInteractions.tsx
- * @description Micro-interactions library for icons
- *
- * Provides hover, click, and focus effects for icons with 20+ presets.
- *
- * @version 1.0.0
- * @since 2026-03
- * @license MIT
- */
-import React from 'react';
-import type { NtdIconProps } from './types';
-/** Hover effect presets */
-export type HoverEffect = 'lift' | 'grow' | 'shrink' | 'rotate' | 'spin' | 'wobble' | 'pulse' | 'bounce' | 'shake' | 'flip' | 'tilt-left' | 'tilt-right' | 'glow' | 'shadow' | 'color-shift' | 'invert' | 'blur-in' | 'none';
-/** Click effect presets */
-export type ClickEffect = 'ripple' | 'pop' | 'push' | 'rubber' | 'jello' | 'heartbeat' | 'flash' | 'tada' | 'squeeze' | 'none';
-/** Focus effect presets */
-export type FocusEffect = 'glow' | 'ring' | 'outline' | 'pulse' | 'highlight' | 'none';
-/** Props for NtdInteractiveIcon */
-export interface NtdInteractiveIconProps extends Omit<NtdIconProps, 'ref'> {
-    /** The icon component to render */
-    icon: React.ComponentType<NtdIconProps>;
-    /** Effect on hover */
-    hoverEffect?: HoverEffect;
-    /** Effect on click */
-    clickEffect?: ClickEffect;
-    /** Effect on focus */
-    focusEffect?: FocusEffect;
-    /** Duration of hover effect in ms */
-    hoverDuration?: number;
-    /** Duration of click effect in ms */
-    clickDuration?: number;
-    /** Custom hover styles */
-    hoverStyle?: React.CSSProperties;
-    /** Custom click styles */
-    clickStyle?: React.CSSProperties;
-    /** Easing function */
-    easing?: string;
-    /** Callback on hover start */
-    onHoverStart?: () => void;
-    /** Callback on hover end */
-    onHoverEnd?: () => void;
-    /** Callback on click animation complete */
-    onClickComplete?: () => void;
-    /** Disable all interactions */
-    disabled?: boolean;
-    /** Tabindex for focus */
-    tabIndex?: number;
-}
-/**
- * NtdInteractiveIcon - Icon with micro-interactions
- *
- * @example
- * ```tsx
- * <NtdInteractiveIcon
- *   icon={NtdHeart}
- *   hoverEffect="lift"
- *   clickEffect="pop"
- *   focusEffect="glow"
- * />
- * ```
- */
-export declare const NtdInteractiveIcon: React.ForwardRefExoticComponent<NtdInteractiveIconProps & React.RefAttributes<HTMLSpanElement>>;
-/** Preset interaction configurations */
-export declare const interactionPresets: {
-    /** Subtle lift on hover */
-    subtle: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Playful bouncy interactions */
-    playful: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Professional, minimal */
-    professional: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Fun, energetic */
-    energetic: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Material Design style */
-    material: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Elastic, rubbery feel */
-    elastic: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Attention-grabbing */
-    attention: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-    /** Notification/alert style */
-    alert: {
-        hoverEffect: HoverEffect;
-        clickEffect: ClickEffect;
-        focusEffect: FocusEffect;
-    };
-};
-export interface UseMicroInteractionOptions {
-    hoverEffect?: HoverEffect;
-    clickEffect?: ClickEffect;
-    focusEffect?: FocusEffect;
-    hoverDuration?: number;
-    clickDuration?: number;
-    disabled?: boolean;
-}
-export interface UseMicroInteractionReturn {
-    isHovered: boolean;
-    isClicking: boolean;
-    isFocused: boolean;
-    handlers: {
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-        onClick: () => void;
-        onFocus: () => void;
-        onBlur: () => void;
-    };
-    style: React.CSSProperties;
-}
-/**
- * Hook for adding micro-interactions to any element
- *
- * @example
- * ```tsx
- * const { handlers, style } = useMicroInteraction({
- *   hoverEffect: 'lift',
- *   clickEffect: 'pop',
- * });
- *
- * return <div {...handlers} style={style}>Content</div>;
- * ```
- */
-export declare function useMicroInteraction(options?: UseMicroInteractionOptions): UseMicroInteractionReturn;
-/** Props for quick effect wrappers */
-interface QuickEffectProps {
-    children: React.ReactNode;
-    duration?: number;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-/**
- * Quick hover lift effect wrapper
- */
-export declare function HoverLift({ children, duration, disabled, className, style, }: QuickEffectProps): React.JSX.Element;
-/**
- * Quick click pop effect wrapper
- */
-export declare function ClickPop({ children, duration, disabled, className, style, }: QuickEffectProps): React.JSX.Element;
-/**
- * Quick ripple effect wrapper
- */
-export declare function ClickRipple({ children, duration, disabled, className, style, }: QuickEffectProps): React.JSX.Element;
-/**
- * Quick focus glow effect wrapper
- */
-export declare function FocusGlow({ children, disabled, className, style }: QuickEffectProps): React.JSX.Element;
-export {};