my-animated-components 1.4.2 → 1.4.4

package/dist/index.d.ts

@@ -601,6 +601,6 @@ interface ImageEditorProps {
     onCancel: () => void;
     className?: string;
 }
-declare const ImageEditor: React$1.FC<ImageEditorProps>;
+declare const Imageeditor: React$1.FC<ImageEditorProps>;
 
-export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, ImageEditor, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };
+export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, Imageeditor, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };

package/dist/index.js

@@ -1411,13 +1411,13 @@ const Text = ({ children, className = '', size = 'md', weight = 'normal', ...res
 };
 
 // Custom SVG Icons
-const CropIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const CropIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M6 2V6H2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M18 2V6H22", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M18 22V18H22", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M6 22V18H2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("rect", { x: "8", y: "8", width: "8", height: "8", stroke: "currentColor", strokeWidth: "2" })));
-const PaletteIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const PaletteIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2Z", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M20 12C21.1 12 22 12.9 22 14C22 15.1 21.1 16 20 16C18.9 16 18 15.1 18 14C18 12.9 18.9 12 20 12Z", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12Z", stroke: "currentColor", strokeWidth: "2" }),
@@ -1426,30 +1426,30 @@ const PaletteIcon = ({ size = 16, className = "" }) => (React.createElement("svg
     React.createElement("path", { d: "M17 7C18.1 7 19 7.9 19 9C19 10.1 18.1 11 17 11C15.9 11 15 10.1 15 9C15 7.9 15.9 7 17 7Z", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M7 17C8.1 17 9 17.9 9 19C9 20.1 8.1 21 7 21C5.9 21 5 20.1 5 19C5 17.9 5.9 17 7 17Z", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M17 17C18.1 17 19 17.9 19 19C19 20.1 18.1 21 17 21C15.9 21 15 20.1 15 19C15 17.9 15.9 17 17 17Z", stroke: "currentColor", strokeWidth: "2" })));
-const SparklesIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const SparklesIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M9.5 1L11 4.5L14.5 6L11 7.5L9.5 11L8 7.5L4.5 6L8 4.5L9.5 1Z", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M17.5 8L18.5 10.5L21 11.5L18.5 12.5L17.5 15L16.5 12.5L14 11.5L16.5 10.5L17.5 8Z", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M5.5 13L6.5 15.5L9 16.5L6.5 17.5L5.5 20L4.5 17.5L2 16.5L4.5 15.5L5.5 13Z", stroke: "currentColor", strokeWidth: "2" })));
-const RotateIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const RotateIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M23 4V10H17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M1 20V14H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M3.51 9C4.01717 7.56678 4.87913 6.2854 6.01547 5.27542C7.1518 4.26543 8.52547 3.55976 10.0083 3.22426C11.4911 2.88875 13.0348 2.93434 14.4952 3.35677C15.9556 3.77921 17.2853 4.56471 18.36 5.64L23 10M1 14L5.64 18.36C6.71475 19.4353 8.04437 20.2208 9.50481 20.6432C10.9652 21.0657 12.5089 21.1113 13.9917 20.7757C15.4745 20.4402 16.8482 19.7346 17.9845 18.7246C19.1209 17.7146 19.9828 16.4332 20.49 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const FlipHorizontalIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const FlipHorizontalIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M3 12H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M12 3V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M7 7L3 12L7 17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M17 7L21 12L17 17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const FlipVerticalIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const FlipVerticalIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M12 3V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M3 12H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M7 7L12 3L17 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M7 17L12 21L17 17", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const ZoomInIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const ZoomInIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M21 21L16.65 16.65", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M11 8V14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M8 11H14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
-const SunIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const SunIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("circle", { cx: "12", cy: "12", r: "5", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M12 1V3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M12 21V23", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
@@ -1459,27 +1459,27 @@ const SunIcon = ({ size = 16, className = "" }) => (React.createElement("svg", {
     React.createElement("path", { d: "M21 12H23", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M4.22 19.78L5.64 18.36", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M18.36 5.64L19.78 4.22", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
-const ContrastIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const ContrastIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z", stroke: "currentColor", strokeWidth: "2" })));
-const DropletIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const DropletIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M12 22C16.4183 22 20 18.4183 20 14C20 8 12 2 12 2C12 2 4 8 4 14C4 18.4183 7.58172 22 12 22Z", stroke: "currentColor", strokeWidth: "2" })));
-const ApertureIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const ApertureIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
     React.createElement("path", { d: "M14.31 8L20.05 17.94", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M9.69 8L3.95 17.94", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M18.62 15L5.38 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
     React.createElement("path", { d: "M12 2V22", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
-const XIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const XIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const CheckIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const CheckIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const ChevronLeftIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const ChevronLeftIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const ChevronRightIcon = ({ size = 16, className = "" }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className },
+const ChevronRightIcon = ({ size = 16, className = "", style = {} }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, style: style },
     React.createElement("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
-const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
+const Imageeditor = ({ imageFile, onSave, onCancel, className = "" }) => {
     const canvasRef = React.useRef(null);
     const [activeTab, setActiveTab] = React.useState('crop');
     const [originalImage, setOriginalImage] = React.useState(null);
@@ -1529,10 +1529,9 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
         hue,
         cropArea
     }), [rotation, flipH, flipV, zoom, brightness, contrast, saturation, blur, hue, cropArea]);
-    const saveToHistory = React.useCallback((state) => {
-        const currentState = state || getCurrentState();
+    const saveToHistory = React.useCallback(() => {
         const newHistory = history.slice(0, historyIndex + 1);
-        newHistory.push(currentState);
+        newHistory.push(getCurrentState());
         setHistory(newHistory);
         setHistoryIndex(newHistory.length - 1);
     }, [history, historyIndex, getCurrentState]);
@@ -1550,7 +1549,7 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
             setHistoryIndex(historyIndex + 1);
         }
     }, [historyIndex, history]);
-    const applyState = React.useCallback((state) => {
+    const applyState = (state) => {
         setRotation(state.rotation);
         setFlipH(state.flipH);
         setFlipV(state.flipV);
@@ -1561,43 +1560,28 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
         setBlur(state.blur);
         setHue(state.hue);
         setCropArea(state.cropArea);
-    }, []);
-    // Initialize with first state
+    };
     React.useEffect(() => {
-        if (imageFile && !originalImage) {
+        if (imageFile) {
             const img = new Image();
             img.src = URL.createObjectURL(imageFile);
             img.onload = () => {
                 setOriginalImage(img);
-                const initialState = {
-                    rotation: 0,
-                    flipH: false,
-                    flipV: false,
-                    zoom: 1,
-                    brightness: 100,
-                    contrast: 100,
-                    saturation: 100,
-                    blur: 0,
-                    hue: 0,
-                    cropArea: { x: 0, y: 0, width: 100, height: 100 }
-                };
-                setHistory([initialState]);
-                setHistoryIndex(0);
                 drawCanvas(img);
+                saveToHistory();
             };
         }
-    }, [imageFile, originalImage]);
-    // Draw canvas when state changes
+    }, [imageFile]);
     React.useEffect(() => {
         if (originalImage) {
-            drawCanvas(originalImage, getCurrentState());
+            drawCanvas(originalImage);
         }
-    }, [rotation, flipH, flipV, zoom, brightness, contrast, saturation, blur, hue, originalImage, getCurrentState]);
-    const drawCanvas = (img, state) => {
+    }, [rotation, flipH, flipV, zoom, brightness, contrast, saturation, blur, hue]);
+    const drawCanvas = (img) => {
         const canvas = canvasRef.current;
         if (!canvas || !img)
             return;
-        const ctx = canvas.getContext("2d");
+        const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
         const maxWidth = 1200;
@@ -1678,24 +1662,15 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
         canvas.height = cropHeight;
         ctx.putImageData(imageData, 0, 0);
         setCropArea({ x: 0, y: 0, width: 100, height: 100 });
-        // Save new state after crop
-        const newState = {
-            ...getCurrentState(),
-            cropArea: { x: 0, y: 0, width: 100, height: 100 }
-        };
-        saveToHistory(newState);
+        saveToHistory();
     };
     const applyFilter = (filter) => {
-        const newState = {
-            ...getCurrentState(),
-            brightness: filter.values.brightness,
-            contrast: filter.values.contrast,
-            saturation: filter.values.saturation,
-            blur: filter.values.blur,
-            hue: filter.values.hue
-        };
-        applyState(newState);
-        saveToHistory(newState);
+        setBrightness(filter.values.brightness);
+        setContrast(filter.values.contrast);
+        setSaturation(filter.values.saturation);
+        setBlur(filter.values.blur);
+        setHue(filter.values.hue);
+        saveToHistory();
     };
     const handleSave = () => {
         const canvas = canvasRef.current;
@@ -1708,12 +1683,6 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
             }
         });
     };
-    const handleSliderChange = (setter, value) => {
-        setter(value);
-    };
-    const handleSliderChangeEnd = () => {
-        saveToHistory();
-    };
     const tabs = [
         { id: 'crop', label: 'Crop', icon: CropIcon },
         { id: 'adjust', label: 'Adjust', icon: PaletteIcon },
@@ -1724,7 +1693,7 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
         React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column' } },
             React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px', borderBottom: '1px solid #2a2a2a', backgroundColor: '#1a1a1a' } },
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' } },
-                    React.createElement(ApertureIcon, { className: "text-blue-500" }),
+                    React.createElement(ApertureIcon, { style: { width: 20, height: 20, color: '#3b82f6' } }),
                     React.createElement("h2", { style: { fontSize: '14px', fontWeight: 600, color: '#ffffff' } }, "Image Editor")),
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' } },
                     React.createElement("div", { style: { width: '1px', height: '20px', backgroundColor: '#2a2a2a', margin: '0 4px' } }),
@@ -1741,7 +1710,7 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                             alignItems: 'center',
                             gap: '6px'
                         }, onMouseEnter: (e) => e.currentTarget.style.opacity = '0.9', onMouseLeave: (e) => e.currentTarget.style.opacity = '1' },
-                        React.createElement(CheckIcon, null),
+                        React.createElement(CheckIcon, { style: { width: 14, height: 14 } }),
                         "Save"),
                     React.createElement("button", { onClick: onCancel, style: {
                             padding: '8px',
@@ -1751,7 +1720,7 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                             cursor: 'pointer',
                             color: '#e5e5e5'
                         }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.1)'; e.currentTarget.style.color = '#ef4444'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.color = '#e5e5e5'; }, title: "Cancel" },
-                        React.createElement(XIcon, null)))),
+                        React.createElement(XIcon, { style: { width: 16, height: 16 } })))),
             React.createElement("div", { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px', overflow: 'auto' } },
                 React.createElement("div", { style: { position: 'relative' } },
                     React.createElement("canvas", { ref: canvasRef, style: {
@@ -1790,7 +1759,7 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                     }, onMouseEnter: (e) => { if (activeTab !== tab.id)
                         e.currentTarget.style.backgroundColor = '#2a2a2a'; }, onMouseLeave: (e) => { if (activeTab !== tab.id)
                         e.currentTarget.style.backgroundColor = 'transparent'; } },
-                    React.createElement(tab.icon, null),
+                    React.createElement(tab.icon, { style: { width: 14, height: 14 } }),
                     tab.label)))))),
         React.createElement(framerMotion.AnimatePresence, null, isPanelOpen && (React.createElement(framerMotion.motion.div, { initial: { width: 0, opacity: 0 }, animate: { width: 280, opacity: 1 }, exit: { width: 0, opacity: 0 }, transition: { duration: 0.2 }, style: { borderLeft: '1px solid #2a2a2a', backgroundColor: '#1a1a1a', overflow: 'hidden' } },
             React.createElement("div", { style: { width: 280, height: '100%', overflowY: 'auto', padding: '16px' } },
@@ -1825,14 +1794,14 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                                 justifyContent: 'center',
                                 gap: '6px'
                             }, onMouseEnter: (e) => e.currentTarget.style.opacity = '0.9', onMouseLeave: (e) => e.currentTarget.style.opacity = '1' },
-                            React.createElement(CropIcon, null),
+                            React.createElement(CropIcon, { style: { width: 14, height: 14 } }),
                             "Apply Crop")))),
-                    activeTab === 'adjust' && (React.createElement(framerMotion.motion.div, { key: "adjust", initial: { opacity: 0, x: 10 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -10 }, style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
-                        React.createElement(SliderControl, { icon: React.createElement(SunIcon, { className: "text-yellow-500" }), label: "Brightness", value: brightness, onChange: (value) => handleSliderChange(setBrightness, value), onChangeEnd: handleSliderChangeEnd, min: 0, max: 200, unit: "%" }),
-                        React.createElement(SliderControl, { icon: React.createElement(ContrastIcon, { className: "text-purple-500" }), label: "Contrast", value: contrast, onChange: (value) => handleSliderChange(setContrast, value), onChangeEnd: handleSliderChangeEnd, min: 0, max: 200, unit: "%" }),
-                        React.createElement(SliderControl, { icon: React.createElement(DropletIcon, { className: "text-blue-500" }), label: "Saturation", value: saturation, onChange: (value) => handleSliderChange(setSaturation, value), onChangeEnd: handleSliderChangeEnd, min: 0, max: 200, unit: "%" }),
-                        React.createElement(SliderControl, { icon: React.createElement(ApertureIcon, { className: "text-gray-500" }), label: "Blur", value: blur, onChange: (value) => handleSliderChange(setBlur, value), onChangeEnd: handleSliderChangeEnd, min: 0, max: 10, step: 0.1, unit: "px" }),
-                        React.createElement(SliderControl, { icon: React.createElement(PaletteIcon, { className: "text-pink-500" }), label: "Hue", value: hue, onChange: (value) => handleSliderChange(setHue, value), onChangeEnd: handleSliderChangeEnd, min: -180, max: 180, unit: "\u00B0" }))),
+                    activeTab === 'adjust' && (React.createElement(framerMotion.motion.div, { key: "adjust", initial: { opacity: 0, x: 10 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -10 }, className: "space-y-3" },
+                        React.createElement(SliderControl, { icon: React.createElement(SunIcon, { className: "text-yellow-500" }), label: "Brightness", value: brightness, onChange: setBrightness, onChangeEnd: saveToHistory, min: 0, max: 200, unit: "%" }),
+                        React.createElement(SliderControl, { icon: React.createElement(ContrastIcon, { className: "text-purple-500" }), label: "Contrast", value: contrast, onChange: setContrast, onChangeEnd: saveToHistory, min: 0, max: 200, unit: "%" }),
+                        React.createElement(SliderControl, { icon: React.createElement(DropletIcon, { className: "text-blue-500" }), label: "Saturation", value: saturation, onChange: setSaturation, onChangeEnd: saveToHistory, min: 0, max: 200, unit: "%" }),
+                        React.createElement(SliderControl, { icon: React.createElement(ApertureIcon, { className: "text-gray-500" }), label: "Blur", value: blur, onChange: setBlur, onChangeEnd: saveToHistory, min: 0, max: 10, step: 0.1, unit: "px" }),
+                        React.createElement(SliderControl, { icon: React.createElement(PaletteIcon, { className: "text-pink-500" }), label: "Hue", value: hue, onChange: setHue, onChangeEnd: saveToHistory, min: -180, max: 180, unit: "\u00B0" }))),
                     activeTab === 'filters' && (React.createElement(framerMotion.motion.div, { key: "filters", initial: { opacity: 0, x: 10 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -10 }, style: { display: 'flex', flexDirection: 'column', gap: '6px' } }, filters.map(filter => (React.createElement("button", { key: filter.id, onClick: () => applyFilter(filter), style: {
                             width: '100%',
                             textAlign: 'left',
@@ -1846,12 +1815,9 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                             fontWeight: 500
                         }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = '#3a3a3a', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = '#2a2a2a' }, filter.name))))),
                     activeTab === 'transform' && (React.createElement(framerMotion.motion.div, { key: "transform", initial: { opacity: 0, x: 10 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -10 }, style: { display: 'flex', flexDirection: 'column', gap: '12px' } },
-                        React.createElement(SliderControl, { icon: React.createElement(RotateIcon, null), label: "Rotation", value: rotation, onChange: (value) => handleSliderChange(setRotation, value), onChangeEnd: handleSliderChangeEnd, min: 0, max: 360, unit: "\u00B0" }),
+                        React.createElement(SliderControl, { icon: React.createElement(RotateIcon, null), label: "Rotation", value: rotation, onChange: setRotation, onChangeEnd: saveToHistory, min: 0, max: 360, unit: "\u00B0" }),
                         React.createElement("div", { style: { display: 'flex', gap: '8px' } },
-                            React.createElement("button", { onClick: () => {
-                                    setFlipH(!flipH);
-                                    handleSliderChangeEnd();
-                                }, style: {
+                            React.createElement("button", { onClick: () => { setFlipH(!flipH); saveToHistory(); }, style: {
                                     flex: 1,
                                     padding: '8px 12px',
                                     borderRadius: '8px',
@@ -1868,12 +1834,9 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                                 }, onMouseEnter: (e) => { if (!flipH)
                                     e.currentTarget.style.backgroundColor = '#3a3a3a'; }, onMouseLeave: (e) => { if (!flipH)
                                     e.currentTarget.style.backgroundColor = '#2a2a2a'; } },
-                                React.createElement(FlipHorizontalIcon, null),
+                                React.createElement(FlipHorizontalIcon, { style: { width: 14, height: 14 } }),
                                 "Flip H"),
-                            React.createElement("button", { onClick: () => {
-                                    setFlipV(!flipV);
-                                    handleSliderChangeEnd();
-                                }, style: {
+                            React.createElement("button", { onClick: () => { setFlipV(!flipV); saveToHistory(); }, style: {
                                     flex: 1,
                                     padding: '8px 12px',
                                     borderRadius: '8px',
@@ -1890,9 +1853,9 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                                 }, onMouseEnter: (e) => { if (!flipV)
                                     e.currentTarget.style.backgroundColor = '#3a3a3a'; }, onMouseLeave: (e) => { if (!flipV)
                                     e.currentTarget.style.backgroundColor = '#2a2a2a'; } },
-                                React.createElement(FlipVerticalIcon, null),
+                                React.createElement(FlipVerticalIcon, { style: { width: 14, height: 14 } }),
                                 "Flip V")),
-                        React.createElement(SliderControl, { icon: React.createElement(ZoomInIcon, null), label: "Zoom", value: zoom, onChange: (value) => handleSliderChange(setZoom, value), onChangeEnd: handleSliderChangeEnd, min: 0.5, max: 3, step: 0.1, unit: "x" })))))))),
+                        React.createElement(SliderControl, { icon: React.createElement(ZoomInIcon, null), label: "Zoom", value: zoom, onChange: setZoom, onChangeEnd: saveToHistory, min: 0.5, max: 3, step: 0.1, unit: "x" })))))))),
         React.createElement("button", { onClick: () => setIsPanelOpen(!isPanelOpen), style: {
                 position: 'absolute',
                 right: isPanelOpen ? '280px' : '0',
@@ -1905,7 +1868,7 @@ const ImageEditor = ({ imageFile, onSave, onCancel, className = "" }) => {
                 padding: '4px',
                 cursor: 'pointer',
                 color: '#e5e5e5'
-            }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = '#2a2a2a', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = '#1a1a1a' }, isPanelOpen ? React.createElement(ChevronRightIcon, null) : React.createElement(ChevronLeftIcon, null))), document.body);
+            }, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = '#2a2a2a', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = '#1a1a1a' }, isPanelOpen ? React.createElement(ChevronRightIcon, { style: { width: 16, height: 16 } }) : React.createElement(ChevronLeftIcon, { style: { width: 16, height: 16 } }))), document.body);
 };
 const SliderControl = ({ icon, label, value, onChange, onChangeEnd, min, max, step = 1, unit }) => {
     return (React.createElement("div", null,
@@ -1967,7 +1930,7 @@ exports.Flex = Flex;
 exports.Grid = Grid;
 exports.Heading = Heading;
 exports.IconButton = IconButton;
-exports.ImageEditor = ImageEditor;
+exports.Imageeditor = Imageeditor;
 exports.Input = Input;
 exports.List = List;
 exports.ListItem = ListItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-animated-components",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "type": "module",
   "description": "",
   "main": "dist/index.js",

package/readme.md

@@ -94,6 +94,7 @@ function MyComponent() {
 - Text
 - Textarea
 - Tooltip
+- Imageeditor
 
 ## Customization