@nice2dev/icons 1.0.0 → 1.0.2

package/dist/types/microInteractions.d.ts

@@ -0,0 +1,174 @@
+/**
+ * @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): 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;
+/**
+ * Quick ripple effect wrapper
+ */
+export declare function ClickRipple({ children, duration, disabled, className, style }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Quick focus glow effect wrapper
+ */
+export declare function FocusGlow({ children, disabled, className, style }: QuickEffectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/particleEffects.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @file particleEffects.tsx
+ * @description Canvas-based particle effects triggered from icon interactions.
+ *
+ * - Confetti burst on success
+ * - Sparkles trailing
+ * - Smoke/dust on remove
+ * - Fully canvas-based for performance
+ *
+ * @example
+ * ```tsx
+ * // Confetti burst on click
+ * <NtdParticleIcon icon={NtdCheck} particle="confetti" trigger="click" size="lg" />
+ *
+ * // Sparkles trailing on hover
+ * <NtdParticleIcon icon={NtdStar} particle="sparkles" trigger="hover" />
+ *
+ * // Smoke on unmount/remove
+ * <NtdParticleIcon icon={NtdTrash} particle="smoke" trigger="click" />
+ * ```
+ */
+import React, { ComponentType } from 'react';
+import type { NtdIconProps, IconSize } from './types';
+/** Predefined particle effect presets. */
+export type ParticlePreset = 'confetti' | 'sparkles' | 'smoke' | 'dust' | 'firework' | 'hearts' | 'stars';
+/** Low-level particle configuration. */
+export interface ParticleConfig {
+    /** Number of particles to emit */
+    count: number;
+    /** Particle lifetime in ms */
+    lifetime: number;
+    /** Particle shapes */
+    shapes: ('circle' | 'rect' | 'triangle' | 'star')[];
+    /** Colors (randomly picked) */
+    colors: string[];
+    /** Min/max particle size in px */
+    sizeRange: [number, number];
+    /** Initial velocity range */
+    velocityRange: [number, number];
+    /** Gravity (px/s²). Positive = downward */
+    gravity: number;
+    /** Spread angle in degrees (360 = omnidirectional) */
+    spread: number;
+    /** Opacity decay (1 = fade out completely) */
+    fadeOut: number;
+    /** Rotation speed range (deg/frame) */
+    rotationRange: [number, number];
+}
+export interface NtdParticleIconProps {
+    /** Icon component to render */
+    icon: ComponentType<NtdIconProps>;
+    /** Particle effect preset or custom config */
+    particle: ParticlePreset | ParticleConfig;
+    /** When to trigger the effect */
+    trigger?: 'click' | 'hover' | 'mount' | 'manual';
+    /** Manual trigger (when trigger='manual') */
+    active?: boolean;
+    /** Icon size */
+    size?: IconSize;
+    /** Icon props to pass through */
+    iconProps?: Partial<NtdIconProps>;
+    /** Additional class */
+    className?: string;
+    /** Additional styles */
+    style?: React.CSSProperties;
+    /** Callback when effect completes */
+    onEffectEnd?: () => void;
+}
+export declare const NtdParticleIcon: React.ForwardRefExoticComponent<NtdParticleIconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/resolver.d.ts

@@ -0,0 +1,58 @@
+/**
+ * resolver.ts — Integration with @nice2dev/ui NiceIconProvider.
+ *
+ * Creates a resolver function that maps NiceIcon name strings
+ * to @nice2dev/icons React components.
+ *
+ * Usage:
+ * ```tsx
+ * import { NiceIconProvider } from '@nice2dev/ui';
+ * import { createNiceIconResolver } from '@nice2dev/icons';
+ *
+ * <NiceIconProvider resolver={createNiceIconResolver()}>
+ *   <App />
+ * </NiceIconProvider>
+ * ```
+ */
+import React from 'react';
+import type { NtdIconProps, IconVariant } from './types';
+export interface NiceIconResolverOptions {
+    /** Default icon variant (default: 'outline') */
+    variant?: IconVariant;
+    /** Default primary color (default: 'currentColor') */
+    primaryColor?: string;
+    /** Default secondary color for duotone (default: undefined) */
+    secondaryColor?: string;
+    /** Custom name mappings to extend or override defaults */
+    customMappings?: Record<string, string>;
+    /** Fallback component if icon name is not found */
+    fallback?: React.ComponentType<NtdIconProps>;
+}
+/**
+ * Creates a resolver function compatible with NiceIconProvider from @nice2dev/ui.
+ *
+ * @example
+ * ```tsx
+ * import { NiceIconProvider } from '@nice2dev/ui';
+ * import { createNiceIconResolver } from '@nice2dev/icons';
+ *
+ * // Basic usage
+ * <NiceIconProvider resolver={createNiceIconResolver()}>
+ *   <NiceIcon name="home" size="lg" />
+ * </NiceIconProvider>
+ *
+ * // With options
+ * <NiceIconProvider resolver={createNiceIconResolver({
+ *   variant: 'duotone',
+ *   primaryColor: '#3b82f6',
+ *   secondaryColor: '#e0e7ff',
+ * })}>
+ *   <App />
+ * </NiceIconProvider>
+ * ```
+ */
+export declare function createNiceIconResolver(options?: NiceIconResolverOptions): (name: string, size: number) => React.ReactNode | undefined;
+/**
+ * Get a list of all available icon names that can be resolved.
+ */
+export declare function getResolverIconNames(): string[];

package/dist/types/rsc.d.ts

@@ -0,0 +1,159 @@
+/**
+ * @file rsc.tsx
+ * @description React Server Components compatible exports
+ *
+ * This module provides server-renderable icon components that work
+ * without client-side JavaScript. For interactive features (animations,
+ * color scheme detection), use the main exports with "use client".
+ *
+ * @example
+ * ```tsx
+ * // In a Server Component
+ * import { NtdHomeRSC } from '@nice2dev/icons/rsc';
+ *
+ * export default function Page() {
+ *   return <NtdHomeRSC size="md" variant="solid" primaryColor="#3b82f6" />;
+ * }
+ * ```
+ *
+ * @version 1.0.0
+ * @since 2026-03
+ * @license MIT
+ */
+import type { IconVariant, GradientPreset, SemanticColor } from './types';
+import { SIZE_MAP, GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS } from './types';
+/**
+ * Props for RSC-compatible icons (subset of full NtdIconProps).
+ * Excludes client-only features like animations and color scheme detection.
+ */
+export interface NtdIconRSCProps {
+    /** Icon size preset or custom pixel value */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    /** Icon rendering variant */
+    variant?: IconVariant;
+    /** Primary icon color */
+    primaryColor?: string;
+    /** Secondary color (for duotone/flat variants) */
+    secondaryColor?: string;
+    /** Accent color (for complex icons) */
+    accentColor?: string;
+    /** Secondary opacity for duotone variant */
+    secondaryOpacity?: number;
+    /** Stroke width for outline variant */
+    strokeWidth?: number;
+    /** Gradient preset name */
+    gradient?: GradientPreset;
+    /** Gradient direction (angle in degrees) */
+    gradientDirection?: number;
+    /** Semantic color preset */
+    color?: SemanticColor;
+    /** CSS transform: rotate */
+    rotate?: number;
+    /** CSS transform: flipX */
+    flipX?: boolean;
+    /** CSS transform: flipY */
+    flipY?: boolean;
+    /** CSS transform: scale */
+    scale?: number;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Accessibility: aria-label */
+    'aria-label'?: string;
+    /** Accessibility: aria-hidden */
+    'aria-hidden'?: boolean;
+    /** Title for accessibility */
+    title?: string;
+    /** Role attribute */
+    role?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * Icon render props passed to path renderers
+ */
+export interface IconRenderPropsRSC {
+    primaryColor: string;
+    secondaryColor: string;
+    accentColor: string;
+    secondaryOpacity: number;
+    strokeWidth: number;
+}
+/**
+ * Path renderer function type
+ */
+export type IconPathRendererRSC = (props: IconRenderPropsRSC) => React.ReactNode;
+/**
+ * Options for createIconRSC factory
+ */
+export interface CreateIconRSCOptions {
+    displayName: string;
+    viewBox?: string;
+    paths: {
+        solid: IconPathRendererRSC;
+        outline: IconPathRendererRSC;
+        duotone: IconPathRendererRSC;
+        flat: IconPathRendererRSC;
+        sharp?: IconPathRendererRSC;
+        rounded?: IconPathRendererRSC;
+        mini?: IconPathRendererRSC;
+        '3d'?: IconPathRendererRSC;
+    };
+}
+/**
+ * Creates a React Server Component compatible icon.
+ *
+ * Unlike the standard `createIcon`, this version:
+ * - Does NOT use React hooks (useId, useSyncExternalStore, etc.)
+ * - Does NOT support animations
+ * - Does NOT support automatic dark/light mode detection
+ * - IS fully streamable and SSR-safe
+ *
+ * @param options - Icon configuration
+ * @returns A React function component (not using forwardRef)
+ *
+ * @example
+ * ```tsx
+ * export const NtdHomeRSC = createIconRSC({
+ *   displayName: 'NtdHomeRSC',
+ *   paths: {
+ *     solid: ({ primaryColor }) => <path d="..." fill={primaryColor} />,
+ *     outline: ({ primaryColor, strokeWidth }) => <path d="..." stroke={primaryColor} />,
+ *     duotone: ({ primaryColor, secondaryColor }) => <path d="..." />,
+ *     flat: ({ primaryColor, secondaryColor }) => <path d="..." />,
+ *   },
+ * });
+ * ```
+ */
+export declare function createIconRSC(options: CreateIconRSCOptions): {
+    (props: NtdIconRSCProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Renders an icon to a static SVG string (for streaming/SSR).
+ * Useful for generating static assets or email templates.
+ */
+export declare function renderIconToString(Icon: ReturnType<typeof createIconRSC>, props?: NtdIconRSCProps): string;
+/**
+ * Type guard to check if a component is an RSC-compatible icon
+ */
+export declare function isRSCIcon(component: unknown): component is ReturnType<typeof createIconRSC>;
+/**
+ * Creates an RSC version from an existing icon's path config.
+ * This allows creating RSC-compatible versions from standard icons.
+ *
+ * @example
+ * ```tsx
+ * import { NtdHome } from '@nice2dev/icons';
+ * import { wrapAsRSC } from '@nice2dev/icons/rsc';
+ *
+ * // Note: This requires access to the original path config
+ * const NtdHomeRSC = wrapAsRSC(NtdHome);
+ * ```
+ */
+export declare function wrapAsRSC<T extends {
+    displayName?: string;
+}>(originalPaths: CreateIconRSCOptions['paths'], displayName: string): ReturnType<typeof createIconRSC>;
+export { SIZE_MAP, GRADIENT_PRESETS, SEMANTIC_COLOR_DEFAULTS };
+export type { IconVariant, GradientPreset, SemanticColor } from './types';

package/dist/types/tailwind-plugin.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @file tailwind-plugin.ts
+ * @description Tailwind CSS Plugin for @nice2dev/icons
+ *
+ * Enables Tailwind CSS utility classes directly on NiceToDev icons:
+ * <NtdHome className="text-blue-500 w-6 h-6 hover:text-blue-700" />
+ *
+ * @version 1.0.0
+ * @since 2026-03
+ * @license MIT
+ */
+type PluginAPI = {
+    addUtilities: (utilities: Record<string, Record<string, string | number>>) => void;
+    addComponents: (components: Record<string, unknown>) => void;
+    theme: (path: string) => Record<string, string>;
+    matchUtilities: (utilities: Record<string, (value: string) => Record<string, string>>, options: {
+        values: Record<string, string>;
+    }) => void;
+};
+export interface NtdTailwindPluginOptions {
+    /**
+     * Prefix for icon-specific utilities
+     * @default 'ntd-icon'
+     */
+    prefix?: string;
+    /**
+     * Custom icon sizes
+     * @default { xs: '0.75rem', sm: '1rem', md: '1.5rem', lg: '2rem', xl: '3rem', '2xl': '4rem' }
+     */
+    sizes?: Record<string, string>;
+    /**
+     * Enable animation utilities
+     * @default true
+     */
+    animations?: boolean;
+    /**
+     * Enable variant-specific utilities (solid, outline, duotone, flat)
+     * @default true
+     */
+    variantUtilities?: boolean;
+}
+/**
+ * Tailwind CSS Plugin for NiceToDev Icons
+ *
+ * @example
+ * // tailwind.config.js
+ * import { ntdIconPlugin } from '@nice2dev/icons/tailwind';
+ *
+ * export default {
+ *   plugins: [
+ *     ntdIconPlugin({
+ *       prefix: 'ntd-icon',
+ *       animations: true,
+ *     }),
+ *   ],
+ * };
+ *
+ * @example
+ * // Usage in components
+ * <NtdHome className="ntd-icon-md text-blue-500 hover:ntd-icon-bounce" />
+ * <NtdStar className="ntd-icon-lg ntd-icon-spin text-yellow-400" />
+ */
+export declare const ntdIconPlugin: (options?: NtdTailwindPluginOptions) => ({ addUtilities, addComponents, theme, matchUtilities }: PluginAPI) => void;
+/**
+ * Plugin configuration for extending Tailwind theme
+ */
+export declare const ntdIconPluginConfig: {
+    theme: {
+        extend: {
+            spacing: {
+                'icon-xs': string;
+                'icon-sm': string;
+                'icon-md': string;
+                'icon-lg': string;
+                'icon-xl': string;
+            };
+        };
+    };
+};
+/**
+ * Preset for common icon configurations
+ */
+export declare const ntdIconPreset: {
+    theme: {
+        extend: {
+            colors: {
+                ntd: {
+                    primary: string;
+                    secondary: string;
+                    accent: string;
+                    success: string;
+                    warning: string;
+                    error: string;
+                    info: string;
+                };
+            };
+        };
+    };
+};
+export default ntdIconPlugin;

package/dist/types/types.d.ts

@@ -74,6 +74,38 @@ export type GradientPreset = 'sunset' | 'ocean' | 'forest' | 'fire' | 'ice' | 'n
 export type GradientType = 'linear' | 'radial';
 /** Gradient animation style. */
 export type GradientAnimation = 'shift' | 'spin' | 'pulse';
+/**
+ * Semantic color variant for contextual icons.
+ *
+ * Each maps to a CSS variable (e.g., `--ntd-icon-success`) with sensible defaults.
+ *
+ * @example
+ * ```tsx
+ * <NtdCheck color="success" />   // Green checkmark
+ * <NtdWarning color="warning" /> // Amber warning
+ * <NtdError color="error" />     // Red error
+ * <NtdInfo color="info" />       // Blue info
+ * ```
+ */
+export type SemanticColor = 'success' | 'warning' | 'error' | 'info' | 'muted' | 'primary' | 'secondary' | 'accent';
+/**
+ * Default colors for semantic color variants.
+ * These are used when CSS variables are not defined.
+ */
+export declare const SEMANTIC_COLOR_DEFAULTS: Record<SemanticColor, string>;
+/**
+ * CSS variable names for semantic colors.
+ * Define these in your CSS to customize icon colors globally.
+ *
+ * @example
+ * ```css
+ * :root {
+ *   --ntd-icon-success: #10b981;
+ *   --ntd-icon-error: #dc2626;
+ * }
+ * ```
+ */
+export declare const SEMANTIC_COLOR_VARS: Record<SemanticColor, string>;
 /** Gradient preset color stops. */
 export declare const GRADIENT_PRESETS: Record<GradientPreset, readonly string[]>;
 /**
@@ -99,6 +131,39 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     size?: IconSize;
     /** Rendering variant */
     variant?: IconVariant;
+    /**
+     * Semantic color for the icon.
+     * Uses CSS variables with fallback to defaults.
+     * Overrides `primaryColor` when specified.
+     *
+     * @example
+     * ```tsx
+     * <NtdCheck color="success" />   // Green
+     * <NtdWarning color="warning" /> // Amber
+     * <NtdError color="error" />     // Red
+     * ```
+     */
+    color?: SemanticColor;
+    /**
+     * Color to use in light mode (when `prefers-color-scheme: light`).
+     * Must be used together with `darkColor` for automatic switching.
+     *
+     * @example
+     * ```tsx
+     * <NtdHome lightColor="#1f2937" darkColor="#f9fafb" />
+     * ```
+     */
+    lightColor?: string;
+    /**
+     * Color to use in dark mode (when `prefers-color-scheme: dark`).
+     * Must be used together with `lightColor` for automatic switching.
+     *
+     * @example
+     * ```tsx
+     * <NtdHome lightColor="#1f2937" darkColor="#f9fafb" />
+     * ```
+     */
+    darkColor?: string;
     /** Primary (main) color */
     primaryColor?: string;
     /** Secondary color — used in duotone variant */
@@ -139,6 +204,41 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
     gradientAngle?: number;
     /** Animate the gradient. */
     gradientAnimation?: GradientAnimation;
+    /**
+     * Rotate the icon by specified degrees.
+     * @example `rotate={90}` — rotate 90° clockwise
+     * @example `rotate={-45}` — rotate 45° counter-clockwise
+     */
+    rotate?: number;
+    /**
+     * Flip the icon horizontally (mirror on Y axis).
+     * @example `flipX` — mirrors the icon left-to-right
+     */
+    flipX?: boolean;
+    /**
+     * Flip the icon vertically (mirror on X axis).
+     * @example `flipY` — mirrors the icon top-to-bottom
+     */
+    flipY?: boolean;
+    /**
+     * Scale the icon by a factor.
+     * @example `scale={1.5}` — 150% size
+     * @example `scale={0.75}` — 75% size
+     */
+    scale?: number;
+    /**
+     * Animate transform changes with CSS transition.
+     * Can be `true` for default (0.3s ease), or a custom CSS transition value.
+     * @example `transition` — default animation
+     * @example `transition="0.5s cubic-bezier(0.4, 0, 0.2, 1)"` — custom
+     */
+    transition?: boolean | string;
+    /**
+     * Transform origin for rotate/scale/flip operations.
+     * @default 'center center'
+     * @example `transformOrigin="top left"`
+     */
+    transformOrigin?: string;
     /** Accessible title for screen readers */
     title?: string;
 }