@nice2dev/icons 1.3.13 → 1.3.14

package/dist/cjs/NiceIconEditor.js

@@ -1,457 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('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] = React.useState({
-        ...DEFAULT_STATE,
-        ...options.defaultState,
-    });
-    const updateState = React.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: React.useCallback((fill) => updateState({ fill }), [updateState]),
-        setStroke: React.useCallback((stroke) => updateState({ stroke }), [updateState]),
-        setStrokeWidth: React.useCallback((strokeWidth) => updateState({ strokeWidth }), [updateState]),
-        setSize: React.useCallback((size) => updateState({ size }), [updateState]),
-        setRotation: React.useCallback((rotation) => updateState({ rotation }), [updateState]),
-        setFlipX: React.useCallback((flipX) => updateState({ flipX }), [updateState]),
-        setFlipY: React.useCallback((flipY) => updateState({ flipY }), [updateState]),
-        setOpacity: React.useCallback((opacity) => updateState({ opacity }), [updateState]),
-        setBadge: React.useCallback((badge) => updateState({ badge }), [updateState]),
-        reset: React.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 = React.useRef(null);
-    // Transform style
-    const transformStyle = React.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 = React.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 = React.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 (jsxRuntime.jsxs("div", { className: `nice-icon-editor ${className}`, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.previewSection, children: [jsxRuntime.jsx("div", { ref: previewRef, style: {
-                            ...styles.preview,
-                            backgroundColor: state.fill === '#ffffff' ? '#1e1e1e' : '#f5f5f5',
-                        }, children: jsxRuntime.jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { style: {
-                                        position: 'absolute',
-                                        ...getBadgeOffset(state.badge.position, state.size, state.badge.size),
-                                    }, children: jsxRuntime.jsx(state.badge.icon, { size: state.badge.size, fill: state.badge.fill }) }))] }) }), jsxRuntime.jsxs("div", { style: styles.sizeInfo, children: [state.size, "\u00D7", state.size, "px"] })] }), jsxRuntime.jsxs("div", { style: styles.controls, children: [jsxRuntime.jsx(ControlGroup, { label: "Fill Color", children: jsxRuntime.jsx(ColorPicker, { value: state.fill, onChange: editor.setFill, presets: colorPresets }) }), jsxRuntime.jsx(ControlGroup, { label: "Stroke", children: jsxRuntime.jsxs("div", { style: styles.row, children: [jsxRuntime.jsx(ColorPicker, { value: state.stroke, onChange: editor.setStroke, presets: ['none', ...colorPresets] }), jsxRuntime.jsx(RangeInput, { min: 0, max: 5, step: 0.5, value: state.strokeWidth, onChange: editor.setStrokeWidth, label: "Width" })] }) }), jsxRuntime.jsx(ControlGroup, { label: "Size", children: jsxRuntime.jsxs("div", { style: styles.row, children: [jsxRuntime.jsx("select", { value: state.size, onChange: (e) => editor.setSize(Number(e.target.value)), style: styles.select, children: sizePresets.map((s) => (jsxRuntime.jsxs("option", { value: s, children: [s, "px"] }, s))) }), jsxRuntime.jsx("input", { type: "number", value: state.size, onChange: (e) => editor.setSize(Number(e.target.value)), min: 8, max: 512, style: styles.numberInput })] }) }), showAdvanced && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ControlGroup, { label: "Transform", children: [jsxRuntime.jsx(RangeInput, { min: 0, max: 360, value: state.rotation, onChange: editor.setRotation, label: `Rotate: ${state.rotation}°` }), jsxRuntime.jsxs("div", { style: styles.row, children: [jsxRuntime.jsx(ToggleButton, { active: state.flipX, onClick: () => editor.setFlipX(!state.flipX), label: "Flip X" }), jsxRuntime.jsx(ToggleButton, { active: state.flipY, onClick: () => editor.setFlipY(!state.flipY), label: "Flip Y" })] })] }), jsxRuntime.jsx(ControlGroup, { label: "Opacity", children: jsxRuntime.jsx(RangeInput, { min: 0, max: 1, step: 0.1, value: state.opacity, onChange: editor.setOpacity, label: `${Math.round(state.opacity * 100)}%` }) }), badges.length > 0 && (jsxRuntime.jsxs(ControlGroup, { label: "Badge", children: [jsxRuntime.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: [jsxRuntime.jsx("option", { value: "none", children: "None" }), badges.map((b) => (jsxRuntime.jsx("option", { value: b.name, children: b.name }, b.name)))] }), state.badge && (jsxRuntime.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) => (jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))) }))] }))] })), jsxRuntime.jsx(ControlGroup, { label: "Export", children: jsxRuntime.jsxs("div", { style: styles.exportButtons, children: [jsxRuntime.jsx("button", { onClick: () => handleDownload('svg'), style: styles.exportButton, children: "SVG" }), jsxRuntime.jsx("button", { onClick: () => handleDownload('png'), style: styles.exportButton, children: "PNG" }), jsxRuntime.jsx("button", { onClick: () => handleExport('react'), style: styles.exportButton, children: "React" })] }) }), jsxRuntime.jsx("button", { onClick: editor.reset, style: styles.resetButton, children: "Reset" })] })] }));
-}
-/* ══════════════════════════════════════════════════════════════════════════════
-   Sub-components
-   ══════════════════════════════════════════════════════════════════════════════ */
-function ControlGroup({ label, children }) {
-    return (jsxRuntime.jsxs("div", { style: styles.controlGroup, children: [jsxRuntime.jsx("label", { style: styles.label, children: label }), children] }));
-}
-function ColorPicker({ value, onChange, presets, }) {
-    return (jsxRuntime.jsxs("div", { style: styles.colorPicker, children: [jsxRuntime.jsx("input", { type: "color", value: value === 'none' || value === 'currentColor' ? '#000000' : value, onChange: (e) => onChange(e.target.value), style: styles.colorInput }), jsxRuntime.jsx("div", { style: styles.colorPresets, children: presets.map((color) => (jsxRuntime.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 (jsxRuntime.jsxs("div", { style: styles.rangeContainer, children: [label && jsxRuntime.jsx("span", { style: styles.rangeLabel, children: label }), jsxRuntime.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 (jsxRuntime.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,
-    },
-};
-
-exports.NiceIconEditor = NiceIconEditor;
-exports.useIconEditor = useIconEditor;