@nice2dev/icons 1.3.13 → 1.3.14

package/dist/esm/NiceIconEditor.js

@@ -1,454 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo, useCallback, useState } from 'react';
-
-/* ══════════════════════════════════════════════════════════════════════════════
-   Constants
-   ══════════════════════════════════════════════════════════════════════════════ */
-const DEFAULT_COLORS = [
-    '#000000',
-    '#ffffff',
-    '#ef4444',
-    '#f97316',
-    '#eab308',
-    '#22c55e',
-    '#14b8a6',
-    '#3b82f6',
-    '#8b5cf6',
-    '#ec4899',
-    '#6b7280',
-    '#0ea5e9',
-];
-const DEFAULT_SIZES = [16, 20, 24, 32, 48, 64, 96, 128, 256];
-const BADGE_POSITIONS = [
-    { value: 'top-right', label: 'Top Right' },
-    { value: 'top-left', label: 'Top Left' },
-    { value: 'bottom-right', label: 'Bottom Right' },
-    { value: 'bottom-left', label: 'Bottom Left' },
-];
-const DEFAULT_STATE = {
-    fill: 'currentColor',
-    stroke: 'none',
-    strokeWidth: 0,
-    size: 64,
-    rotation: 0,
-    flipX: false,
-    flipY: false,
-    opacity: 1,
-};
-/* ══════════════════════════════════════════════════════════════════════════════
-   Utility Functions
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Gets badge position coordinates.
- */
-function getBadgeOffset(position, containerSize, badgeSize) {
-    const offset = badgeSize * 0.25;
-    switch (position) {
-        case 'top-right':
-            return { x: containerSize - badgeSize + offset, y: -offset };
-        case 'top-left':
-            return { x: -offset, y: -offset };
-        case 'bottom-right':
-            return { x: containerSize - badgeSize + offset, y: containerSize - badgeSize + offset };
-        case 'bottom-left':
-            return { x: -offset, y: containerSize - badgeSize + offset };
-    }
-}
-/**
- * Converts SVG to PNG data URL.
- */
-async function svgToPng(svgElement, size, backgroundColor) {
-    return new Promise((resolve, reject) => {
-        const canvas = document.createElement('canvas');
-        canvas.width = size;
-        canvas.height = size;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            reject(new Error('Failed to get canvas context'));
-            return;
-        }
-        // Background
-        if (backgroundColor) {
-            ctx.fillStyle = backgroundColor;
-            ctx.fillRect(0, 0, size, size);
-        }
-        // SVG to image
-        const svgData = new XMLSerializer().serializeToString(svgElement);
-        const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
-        const url = URL.createObjectURL(svgBlob);
-        const img = new Image();
-        img.onload = () => {
-            ctx.drawImage(img, 0, 0, size, size);
-            URL.revokeObjectURL(url);
-            resolve(canvas.toDataURL('image/png'));
-        };
-        img.onerror = () => {
-            URL.revokeObjectURL(url);
-            reject(new Error('Failed to load SVG'));
-        };
-        img.src = url;
-    });
-}
-/**
- * Converts SVG to ICO format (simplified - creates PNG with .ico header).
- */
-async function svgToIco(svgElement, sizes = [16, 32, 48]) {
-    // For a proper ICO, we would need to create the ICO binary format
-    // For simplicity, we'll create a PNG at the largest size
-    const largestSize = Math.max(...sizes);
-    const pngData = await svgToPng(svgElement, largestSize);
-    const response = await fetch(pngData);
-    return response.blob();
-}
-/**
- * Generates React component code from state.
- */
-function generateReactCode(iconName, state) {
-    const props = [];
-    if (state.fill !== 'currentColor') {
-        props.push(`fill="${state.fill}"`);
-    }
-    if (state.stroke !== 'none') {
-        props.push(`stroke="${state.stroke}"`);
-    }
-    if (state.strokeWidth > 0) {
-        props.push(`strokeWidth={${state.strokeWidth}}`);
-    }
-    if (state.size !== 24) {
-        props.push(`size={${state.size}}`);
-    }
-    if (state.rotation !== 0) {
-        props.push(`rotate={${state.rotation}}`);
-    }
-    if (state.flipX) {
-        props.push(`flipX`);
-    }
-    if (state.flipY) {
-        props.push(`flipY`);
-    }
-    if (state.opacity !== 1) {
-        props.push(`opacity={${state.opacity}}`);
-    }
-    const propsStr = props.length > 0 ? ` ${props.join(' ')}` : '';
-    return `<${iconName}${propsStr} />`;
-}
-/**
- * Hook for managing icon editor state.
- */
-function useIconEditor(options = {}) {
-    const [state, setState] = useState({
-        ...DEFAULT_STATE,
-        ...options.defaultState,
-    });
-    const updateState = useCallback((updates) => {
-        setState((prev) => {
-            var _a;
-            const next = { ...prev, ...updates };
-            (_a = options.onChange) === null || _a === void 0 ? void 0 : _a.call(options, next);
-            return next;
-        });
-    }, [options.onChange]);
-    return {
-        state,
-        setFill: useCallback((fill) => updateState({ fill }), [updateState]),
-        setStroke: useCallback((stroke) => updateState({ stroke }), [updateState]),
-        setStrokeWidth: useCallback((strokeWidth) => updateState({ strokeWidth }), [updateState]),
-        setSize: useCallback((size) => updateState({ size }), [updateState]),
-        setRotation: useCallback((rotation) => updateState({ rotation }), [updateState]),
-        setFlipX: useCallback((flipX) => updateState({ flipX }), [updateState]),
-        setFlipY: useCallback((flipY) => updateState({ flipY }), [updateState]),
-        setOpacity: useCallback((opacity) => updateState({ opacity }), [updateState]),
-        setBadge: useCallback((badge) => updateState({ badge }), [updateState]),
-        reset: useCallback(() => setState({ ...DEFAULT_STATE, ...options.defaultState }), [options.defaultState]),
-    };
-}
-/* ══════════════════════════════════════════════════════════════════════════════
-   Component
-   ══════════════════════════════════════════════════════════════════════════════ */
-/**
- * Icon editor component for modifying and exporting icons.
- */
-function NiceIconEditor({ icon: Icon, iconName = 'Icon', defaultState, onChange, onExport, badges = [], colorPresets = DEFAULT_COLORS, sizePresets = DEFAULT_SIZES, showAdvanced = true, className = '', }) {
-    const editor = useIconEditor({ defaultState, onChange });
-    const { state } = editor;
-    const previewRef = useRef(null);
-    // Transform style
-    const transformStyle = useMemo(() => {
-        const transforms = [];
-        if (state.rotation !== 0) {
-            transforms.push(`rotate(${state.rotation}deg)`);
-        }
-        if (state.flipX) {
-            transforms.push('scaleX(-1)');
-        }
-        if (state.flipY) {
-            transforms.push('scaleY(-1)');
-        }
-        return transforms.length > 0 ? transforms.join(' ') : undefined;
-    }, [state.rotation, state.flipX, state.flipY]);
-    // Export handler
-    const handleExport = useCallback(async (format, options = {}) => {
-        var _a;
-        const svgElement = (_a = previewRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
-        if (!svgElement) {
-            return;
-        }
-        let data;
-        switch (format) {
-            case 'svg':
-                data = new XMLSerializer().serializeToString(svgElement);
-                break;
-            case 'png':
-                data = await svgToPng(svgElement, options.size || state.size, options.backgroundColor);
-                break;
-            case 'base64':
-                data = await svgToPng(svgElement, options.size || state.size, options.backgroundColor);
-                break;
-            case 'react':
-                data = generateReactCode(iconName, state);
-                break;
-            case 'ico': {
-                const blob = await svgToIco(svgElement);
-                data = URL.createObjectURL(blob);
-                break;
-            }
-            default:
-                data = new XMLSerializer().serializeToString(svgElement);
-        }
-        onExport === null || onExport === void 0 ? void 0 : onExport(data, format);
-    }, [state, iconName, onExport]);
-    // Download handler
-    const handleDownload = useCallback(async (format) => {
-        var _a;
-        const svgElement = (_a = previewRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
-        if (!svgElement) {
-            return;
-        }
-        let blob;
-        let filename;
-        switch (format) {
-            case 'svg':
-                blob = new Blob([new XMLSerializer().serializeToString(svgElement)], {
-                    type: 'image/svg+xml',
-                });
-                filename = `${iconName}.svg`;
-                break;
-            case 'png': {
-                const pngData = await svgToPng(svgElement, state.size);
-                const response = await fetch(pngData);
-                blob = await response.blob();
-                filename = `${iconName}.png`;
-                break;
-            }
-            default:
-                return;
-        }
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }, [state.size, iconName]);
-    return (jsxs("div", { className: `nice-icon-editor ${className}`, style: styles.container, children: [jsxs("div", { style: styles.previewSection, children: [jsx("div", { ref: previewRef, style: {
-                            ...styles.preview,
-                            backgroundColor: state.fill === '#ffffff' ? '#1e1e1e' : '#f5f5f5',
-                        }, children: jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [jsx(Icon, { size: state.size, fill: state.fill, stroke: state.stroke, strokeWidth: state.strokeWidth, style: {
-                                        transform: transformStyle,
-                                        opacity: state.opacity,
-                                        transition: 'all 0.2s ease',
-                                    } }), state.badge && (jsx("div", { style: {
-                                        position: 'absolute',
-                                        ...getBadgeOffset(state.badge.position, state.size, state.badge.size),
-                                    }, children: jsx(state.badge.icon, { size: state.badge.size, fill: state.badge.fill }) }))] }) }), jsxs("div", { style: styles.sizeInfo, children: [state.size, "\u00D7", state.size, "px"] })] }), jsxs("div", { style: styles.controls, children: [jsx(ControlGroup, { label: "Fill Color", children: jsx(ColorPicker, { value: state.fill, onChange: editor.setFill, presets: colorPresets }) }), jsx(ControlGroup, { label: "Stroke", children: jsxs("div", { style: styles.row, children: [jsx(ColorPicker, { value: state.stroke, onChange: editor.setStroke, presets: ['none', ...colorPresets] }), jsx(RangeInput, { min: 0, max: 5, step: 0.5, value: state.strokeWidth, onChange: editor.setStrokeWidth, label: "Width" })] }) }), jsx(ControlGroup, { label: "Size", children: jsxs("div", { style: styles.row, children: [jsx("select", { value: state.size, onChange: (e) => editor.setSize(Number(e.target.value)), style: styles.select, children: sizePresets.map((s) => (jsxs("option", { value: s, children: [s, "px"] }, s))) }), jsx("input", { type: "number", value: state.size, onChange: (e) => editor.setSize(Number(e.target.value)), min: 8, max: 512, style: styles.numberInput })] }) }), showAdvanced && (jsxs(Fragment, { children: [jsxs(ControlGroup, { label: "Transform", children: [jsx(RangeInput, { min: 0, max: 360, value: state.rotation, onChange: editor.setRotation, label: `Rotate: ${state.rotation}°` }), jsxs("div", { style: styles.row, children: [jsx(ToggleButton, { active: state.flipX, onClick: () => editor.setFlipX(!state.flipX), label: "Flip X" }), jsx(ToggleButton, { active: state.flipY, onClick: () => editor.setFlipY(!state.flipY), label: "Flip Y" })] })] }), jsx(ControlGroup, { label: "Opacity", children: jsx(RangeInput, { min: 0, max: 1, step: 0.1, value: state.opacity, onChange: editor.setOpacity, label: `${Math.round(state.opacity * 100)}%` }) }), badges.length > 0 && (jsxs(ControlGroup, { label: "Badge", children: [jsxs("select", { value: state.badge ? 'badge' : 'none', onChange: (e) => {
-                                            if (e.target.value === 'none') {
-                                                editor.setBadge(undefined);
-                                            }
-                                            else {
-                                                const badgeIcon = badges.find((b) => b.name === e.target.value);
-                                                if (badgeIcon) {
-                                                    editor.setBadge({
-                                                        icon: badgeIcon.icon,
-                                                        position: 'top-right',
-                                                        size: Math.max(16, state.size * 0.4),
-                                                        fill: '#ef4444',
-                                                    });
-                                                }
-                                            }
-                                        }, style: styles.select, children: [jsx("option", { value: "none", children: "None" }), badges.map((b) => (jsx("option", { value: b.name, children: b.name }, b.name)))] }), state.badge && (jsx("select", { value: state.badge.position, onChange: (e) => {
-                                            if (state.badge) {
-                                                editor.setBadge({
-                                                    ...state.badge,
-                                                    position: e.target.value,
-                                                });
-                                            }
-                                        }, style: styles.select, children: BADGE_POSITIONS.map((p) => (jsx("option", { value: p.value, children: p.label }, p.value))) }))] }))] })), jsx(ControlGroup, { label: "Export", children: jsxs("div", { style: styles.exportButtons, children: [jsx("button", { onClick: () => handleDownload('svg'), style: styles.exportButton, children: "SVG" }), jsx("button", { onClick: () => handleDownload('png'), style: styles.exportButton, children: "PNG" }), jsx("button", { onClick: () => handleExport('react'), style: styles.exportButton, children: "React" })] }) }), jsx("button", { onClick: editor.reset, style: styles.resetButton, children: "Reset" })] })] }));
-}
-/* ══════════════════════════════════════════════════════════════════════════════
-   Sub-components
-   ══════════════════════════════════════════════════════════════════════════════ */
-function ControlGroup({ label, children }) {
-    return (jsxs("div", { style: styles.controlGroup, children: [jsx("label", { style: styles.label, children: label }), children] }));
-}
-function ColorPicker({ value, onChange, presets, }) {
-    return (jsxs("div", { style: styles.colorPicker, children: [jsx("input", { type: "color", value: value === 'none' || value === 'currentColor' ? '#000000' : value, onChange: (e) => onChange(e.target.value), style: styles.colorInput }), jsx("div", { style: styles.colorPresets, children: presets.map((color) => (jsx("button", { onClick: () => onChange(color), style: {
-                        ...styles.colorSwatch,
-                        backgroundColor: color === 'none' ? 'transparent' : color,
-                        border: value === color ? '2px solid #3b82f6' : '1px solid #ccc',
-                    }, title: color, children: color === 'none' && '×' }, color))) })] }));
-}
-function RangeInput({ min, max, step = 1, value, onChange, label, }) {
-    return (jsxs("div", { style: styles.rangeContainer, children: [label && jsx("span", { style: styles.rangeLabel, children: label }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange(Number(e.target.value)), style: styles.rangeInput })] }));
-}
-function ToggleButton({ active, onClick, label, }) {
-    return (jsx("button", { onClick: onClick, style: {
-            ...styles.toggleButton,
-            backgroundColor: active ? '#3b82f6' : '#e5e7eb',
-            color: active ? '#fff' : '#374151',
-        }, children: label }));
-}
-/* ══════════════════════════════════════════════════════════════════════════════
-   Styles
-   ══════════════════════════════════════════════════════════════════════════════ */
-const styles = {
-    container: {
-        display: 'flex',
-        gap: '24px',
-        padding: '16px',
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        fontSize: '14px',
-    },
-    previewSection: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '8px',
-    },
-    preview: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '32px',
-        borderRadius: '8px',
-        border: '1px solid #e5e7eb',
-        minWidth: '200px',
-        minHeight: '200px',
-    },
-    sizeInfo: {
-        fontSize: '12px',
-        color: '#6b7280',
-    },
-    controls: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '16px',
-        minWidth: '280px',
-    },
-    controlGroup: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-    },
-    label: {
-        fontWeight: 600,
-        color: '#374151',
-        fontSize: '12px',
-        textTransform: 'uppercase',
-        letterSpacing: '0.5px',
-    },
-    row: {
-        display: 'flex',
-        gap: '8px',
-        alignItems: 'center',
-    },
-    colorPicker: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-    },
-    colorInput: {
-        width: '100%',
-        height: '32px',
-        border: 'none',
-        borderRadius: '4px',
-        cursor: 'pointer',
-    },
-    colorPresets: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '4px',
-    },
-    colorSwatch: {
-        width: '24px',
-        height: '24px',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        fontSize: '14px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: '#999',
-    },
-    select: {
-        flex: 1,
-        padding: '6px 8px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        fontSize: '14px',
-    },
-    numberInput: {
-        width: '70px',
-        padding: '6px 8px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        fontSize: '14px',
-    },
-    rangeContainer: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '4px',
-    },
-    rangeLabel: {
-        fontSize: '12px',
-        color: '#6b7280',
-    },
-    rangeInput: {
-        width: '100%',
-    },
-    toggleButton: {
-        flex: 1,
-        padding: '8px 12px',
-        borderRadius: '4px',
-        border: 'none',
-        cursor: 'pointer',
-        fontWeight: 500,
-        transition: 'all 0.2s',
-    },
-    exportButtons: {
-        display: 'flex',
-        gap: '8px',
-    },
-    exportButton: {
-        flex: 1,
-        padding: '8px 12px',
-        borderRadius: '4px',
-        border: '1px solid #d1d5db',
-        backgroundColor: '#fff',
-        cursor: 'pointer',
-        fontWeight: 500,
-        transition: 'all 0.2s',
-    },
-    resetButton: {
-        padding: '8px 16px',
-        borderRadius: '4px',
-        border: '1px solid #ef4444',
-        backgroundColor: '#fff',
-        color: '#ef4444',
-        cursor: 'pointer',
-        fontWeight: 500,
-    },
-};
-
-export { NiceIconEditor, useIconEditor };

package/dist/types/NiceIconEditor.d.ts

@@ -1,97 +0,0 @@
-/**
- * @file NiceIconEditor.tsx
- * @module @nice2dev/icons
- * @description PRO-28.4 — Icon Editor Component
- *
- * Simple editor for modifying existing icons:
- * - Change colors (fill, stroke)
- * - Combine icons (badge/overlay)
- * - Scale / transform
- * - Export to multiple formats
- */
-import React, { type ComponentType } from 'react';
-import type { NtdIconProps } from './types';
-export interface IconEditorState {
-    /** Primary fill color */
-    fill: string;
-    /** Stroke color */
-    stroke: string;
-    /** Stroke width */
-    strokeWidth: number;
-    /** Size in pixels */
-    size: number;
-    /** Rotation in degrees */
-    rotation: number;
-    /** Horizontal flip */
-    flipX: boolean;
-    /** Vertical flip */
-    flipY: boolean;
-    /** Opacity (0-1) */
-    opacity: number;
-    /** Badge/overlay icon */
-    badge?: {
-        icon: ComponentType<NtdIconProps>;
-        position: BadgePosition;
-        size: number;
-        fill: string;
-    };
-}
-export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-export type ExportFormat = 'svg' | 'png' | 'ico' | 'base64' | 'react';
-export interface ExportOptions {
-    format: ExportFormat;
-    size?: number;
-    backgroundColor?: string;
-    padding?: number;
-}
-export interface NiceIconEditorProps {
-    /** Icon to edit */
-    icon: ComponentType<NtdIconProps>;
-    /** Icon name */
-    iconName?: string;
-    /** Initial editor state */
-    defaultState?: Partial<IconEditorState>;
-    /** Called when state changes */
-    onChange?: (state: IconEditorState) => void;
-    /** Called on export */
-    onExport?: (data: string, format: ExportFormat) => void;
-    /** Available badges */
-    badges?: {
-        icon: ComponentType<NtdIconProps>;
-        name: string;
-    }[];
-    /** Custom color presets */
-    colorPresets?: string[];
-    /** Custom size presets */
-    sizePresets?: number[];
-    /** Show advanced controls */
-    showAdvanced?: boolean;
-    /** Custom class */
-    className?: string;
-}
-export interface UseIconEditorOptions {
-    defaultState?: Partial<IconEditorState>;
-    onChange?: (state: IconEditorState) => void;
-}
-export interface UseIconEditorReturn {
-    state: IconEditorState;
-    setFill: (color: string) => void;
-    setStroke: (color: string) => void;
-    setStrokeWidth: (width: number) => void;
-    setSize: (size: number) => void;
-    setRotation: (degrees: number) => void;
-    setFlipX: (flip: boolean) => void;
-    setFlipY: (flip: boolean) => void;
-    setOpacity: (opacity: number) => void;
-    setBadge: (badge: IconEditorState['badge']) => void;
-    reset: () => void;
-}
-/**
- * Hook for managing icon editor state.
- */
-export declare function useIconEditor(options?: UseIconEditorOptions): UseIconEditorReturn;
-/**
- * Icon editor component for modifying and exporting icons.
- */
-export declare function NiceIconEditor({ icon: Icon, iconName, defaultState, onChange, onExport, badges, colorPresets, sizePresets, showAdvanced, className, }: NiceIconEditorProps): React.ReactElement;
-export default NiceIconEditor;

package/dist/types/NiceVectorEditor.d.ts

@@ -1,75 +0,0 @@
-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>>;