ikoncomponents 1.5.8 → 1.5.10

package/dist/ikoncomponents/form-fields/otp-input/index.d.ts

@@ -0,0 +1,2 @@
+import { FormInputProps } from '../types';
+export declare function FormOtpInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/form-fields/otp-input/index.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form';
+import { InputOTP, InputOTPGroup, InputOTPSlot, } from "../../../shadcn/input-otp";
+export function FormOtpInput(_a) {
+    var { formControl, label, formDescription, extraFormComponent, name } = _a, inputProps = __rest(_a, ["formControl", "label", "formDescription", "extraFormComponent", "name"]);
+    return (_jsx(_Fragment, { children: _jsx(FormField, { control: formControl, name: name, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(InputOTP, Object.assign({ maxLength: 4 }, field, { children: _jsxs(InputOTPGroup, { children: [_jsx(InputOTPSlot, { index: 0 }), _jsx(InputOTPSlot, { index: 1 }), _jsx(InputOTPSlot, { index: 2 }), _jsx(InputOTPSlot, { index: 3 })] }) })) }), extraFormComponent && extraFormComponent(field.value), formDescription && _jsx(FormDescription, { children: formDescription }), _jsx(FormMessage, {})] })) }) }));
+}

package/dist/ikoncomponents/form-fields/phone-input/index.d.ts

@@ -0,0 +1 @@
+export declare function FormPhoneInput(): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/form-fields/phone-input/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FormPhoneInput() {
+    return (_jsx("div", { children: "FormPhoneInput" }));
+}

package/dist/ikoncomponents/form-fields/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import { FormTextareaProps } from '../types';
+export declare function FormTextarea({ formControl, name, label, formItemClass, formDescription, ...textAreaProps }: FormTextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/form-fields/textarea/index.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form';
+import { Textarea } from '../../../shadcn/textarea';
+export function FormTextarea(_a) {
+    var { formControl, name, label, formItemClass, formDescription } = _a, textAreaProps = __rest(_a, ["formControl", "name", "label", "formItemClass", "formDescription"]);
+    return (_jsx(_Fragment, { children: _jsx(FormField, { control: formControl, name: name, render: ({ field }) => (_jsxs(FormItem, { className: formItemClass, children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(Textarea, Object.assign({}, field, textAreaProps)) }), formDescription && _jsx(FormDescription, { children: formDescription }), _jsx(FormMessage, {})] })) }) }));
+}

package/dist/ikoncomponents/form-fields/types/index.d.ts

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
+import { Matcher } from "react-day-picker";
+export interface FormFieldProps {
+    formControl: any;
+    label?: string;
+    formItemClass?: string;
+    formDescription?: string;
+    extraFormComponent?: (value: string) => ReactNode;
+}
+export interface FormInputProps extends FormFieldProps, InputHTMLAttributes<HTMLInputElement> {
+    name: string;
+}
+export interface FormTextareaProps extends FormFieldProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
+    name: string;
+}
+export interface FormDateInputProps extends FormFieldProps {
+    name: string;
+    placeholder?: string;
+    dateFormat?: string;
+    calendarDateDisabled?: Matcher;
+    disabled?: boolean;
+}
+export interface FormComboboxInputProps extends FormFieldProps {
+    name: string;
+    placeholder?: string;
+    items: FormComboboxItemProps[];
+    onSelect?: (value: string | string[]) => void;
+    defaultValue?: [];
+    disabled?: ((...args: any) => boolean) | boolean;
+}
+export interface FormComboboxItemProps {
+    value: string;
+    label?: string | undefined;
+    extra?: any;
+    disabled?: ((...args: any) => boolean) | boolean;
+}

package/dist/ikoncomponents/form-fields/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/ikoncomponents/glowing-effect/index.d.ts

@@ -0,0 +1,14 @@
+interface GlowingEffectProps {
+    blur?: number;
+    inactiveZone?: number;
+    proximity?: number;
+    spread?: number;
+    variant?: "default" | "white";
+    glow?: boolean;
+    className?: string;
+    disabled?: boolean;
+    movementDuration?: number;
+    borderWidth?: number;
+}
+export declare const GlowingEffect: ({ blur, inactiveZone, proximity, spread, variant, glow, className, movementDuration, borderWidth, disabled, }: GlowingEffectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/glowing-effect/index.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { animate } from "motion/react";
+import { cn } from "../../utils/cn";
+export const GlowingEffect = (({ blur = 0, inactiveZone = 0.7, proximity = 0, spread = 20, variant = "default", glow = false, className, movementDuration = 2, borderWidth = 1, disabled = true, }) => {
+    const containerRef = useRef(null);
+    const lastPosition = useRef({ x: 0, y: 0 });
+    const animationFrameRef = useRef(0);
+    const handleMove = useCallback((e) => {
+        if (!containerRef.current)
+            return;
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(() => {
+            var _a, _b;
+            const element = containerRef.current;
+            if (!element)
+                return;
+            const { left, top, width, height } = element.getBoundingClientRect();
+            const mouseX = (_a = e === null || e === void 0 ? void 0 : e.x) !== null && _a !== void 0 ? _a : lastPosition.current.x;
+            const mouseY = (_b = e === null || e === void 0 ? void 0 : e.y) !== null && _b !== void 0 ? _b : lastPosition.current.y;
+            if (e) {
+                lastPosition.current = { x: mouseX, y: mouseY };
+            }
+            const center = [left + width * 0.5, top + height * 0.5];
+            const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]);
+            const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
+            if (distanceFromCenter < inactiveRadius) {
+                element.style.setProperty("--active", "0");
+                return;
+            }
+            const isActive = mouseX > left - proximity &&
+                mouseX < left + width + proximity &&
+                mouseY > top - proximity &&
+                mouseY < top + height + proximity;
+            element.style.setProperty("--active", isActive ? "1" : "0");
+            if (!isActive)
+                return;
+            const currentAngle = parseFloat(element.style.getPropertyValue("--start")) || 0;
+            const targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
+                Math.PI +
+                90;
+            const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
+            const newAngle = currentAngle + angleDiff;
+            animate(currentAngle, newAngle, {
+                duration: movementDuration,
+                ease: [0.16, 1, 0.3, 1],
+                onUpdate: (value) => {
+                    element.style.setProperty("--start", String(value));
+                },
+            });
+        });
+    }, [inactiveZone, proximity, movementDuration]);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const handleScroll = () => handleMove();
+        const handlePointerMove = (e) => handleMove(e);
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        document.body.addEventListener("pointermove", handlePointerMove, {
+            passive: true,
+        });
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            window.removeEventListener("scroll", handleScroll);
+            document.body.removeEventListener("pointermove", handlePointerMove);
+        };
+    }, [handleMove, disabled]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity", glow && "opacity-100", variant === "white" && "border-white", disabled && "!block") }), _jsx("div", { ref: containerRef, style: {
+                    "--blur": `${blur}px`,
+                    "--spread": spread,
+                    "--start": "0",
+                    "--active": "0",
+                    "--glowingeffect-border-width": `${borderWidth}px`,
+                    "--repeating-conic-gradient-times": "5",
+                    "--gradient": variant === "white"
+                        ? `repeating-conic-gradient(from 236.84deg at 50% 50%,var(--black),var(--black) calc(25% / var(--repeating-conic-gradient-times)))`
+                        : `linear-gradient(54.29deg, #00A5E9 22.93%, #A020F0 32.97%, #55C8FF 52.28%, #A020F0 73.13%, #071182 88.57%)`,
+                }, className: cn("pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity", glow && "opacity-100", blur > 0 && "blur-[var(--blur)] ", className, disabled && "!hidden"), children: _jsx("div", { className: cn("glow", "rounded-[inherit]", 'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]', "after:[border:var(--glowingeffect-border-width)_solid_transparent]", "after:[background:var(--gradient)] after:[background-attachment:fixed]", "after:opacity-[var(--active)] after:transition-opacity after:duration-300", "after:[mask-clip:padding-box,border-box]", "after:[mask-composite:intersect]", "after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]") }) })] }));
+});

package/dist/ikoncomponents/icon/index.d.ts

@@ -0,0 +1,8 @@
+export interface IconProps {
+    name: string;
+    size?: number | string;
+    color?: string;
+    className?: string;
+    strokeWidth?: number;
+}
+export declare function Icon({ name, ...props }: IconProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ikoncomponents/icon/index.js

@@ -0,0 +1,23 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LucideIcons from 'lucide-react';
+export function Icon(_a) {
+    var { name } = _a, props = __rest(_a, ["name"]);
+    const IconComponent = LucideIcons[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found in lucide-react`);
+        return null;
+    }
+    return _jsx(IconComponent, Object.assign({}, props));
+}

package/dist/ikoncomponents/image-cropper-upload/components/newCropper.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "cropperjs/dist/cropper.css";
+export interface CropperImgProps {
+    imageSrc: string | undefined;
+    onCroppedImage: (imageUrl: string) => void;
+    aspectRatio: number;
+    rotationAngle: number;
+    zoomLevel: number;
+    moveDirection: {
+        x: number;
+        y: number;
+    };
+    currentState: string;
+}
+export declare const NewCropperImg: React.FC<CropperImgProps>;

package/{templates/default/ikoncomponents/image-cropper-upload/components/newCropper.tsx → dist/ikoncomponents/image-cropper-upload/components/newCropper.js}

@@ -1,117 +1,85 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import Cropper, { ReactCropperElement } from "react-cropper";
-import "cropperjs/dist/cropper.css";
-
-export interface CropperImgProps {
-    imageSrc: string | undefined; // imageSrc can be a string (image URL or base64) or undefined
-    onCroppedImage: (imageUrl: string) => void; // Callback function from parent to pass cropped image
-    aspectRatio: number;
-    rotationAngle: number; // Rotation angle passed from the parent
-    zoomLevel: number; // Add zoomLevel prop
-    moveDirection: { x: number; y: number }; // Movement props
-    currentState: string
-}
-
-export const NewCropperImg: React.FC<CropperImgProps> = ({ imageSrc, onCroppedImage, aspectRatio, rotationAngle, zoomLevel, moveDirection, currentState }) => {
-    const cropperRef = useRef<ReactCropperElement>(null);
-
-    const onCrop = () => {
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            cropper.setDragMode('move');
-            const croppedCanvas = cropper.getCroppedCanvas();
-            const croppedImageUrl = croppedCanvas.toDataURL(); // Data URL for preview
-            onCroppedImage(croppedImageUrl);
-        } else {
-            console.log("Cropper instance is not available.");
-        }
-    };
-
-    useEffect(() => {
-        // Rotate the image whenever the rotation angle changes
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            cropper.rotate(rotationAngle); // Apply the rotation to the image
-        }
-
-    }, [rotationAngle]); // Effect will run whenever rotationAngle changes
-
-    useEffect(() => {
-        // Zoom the image whenever the zoom level changes
-        const cropper = cropperRef.current?.cropper;
-
-        if (cropper) {
-            const cropBoxData = cropper.getCropBoxData();
-            if (cropBoxData.width) {
-                console.log('Inside cropper scale')
-                cropper.scale(zoomLevel); // Apply the zoom level
-            }
-            // Apply zoom directly without using getZoom method
-        }
-    }, [zoomLevel]); // Effect will run whenever zoomLevel changes
-
-    // Move the image based on the moveDirection prop
-    useEffect(() => {
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            // Make sure moveDirection is available before calling move
-            const cropBoxData = cropper.getCropBoxData();
-            if (cropBoxData.width) {
-                const { x, y } = moveDirection;
-                if (typeof x === "number" && typeof y === "number") {
-                    cropper.move(x, y); // Move the image
-                }
-            }
-
-        }
-    }, [moveDirection]); // This effect runs whenever moveDirection changes
-
-    useEffect(() => {
-        const cropper = cropperRef.current?.cropper;
-        if (cropper) {
-            cropper.setAspectRatio(aspectRatio); // Dynamically set the aspect ratio
-            if (aspectRatio === 1) {
-                // Get the displayed (canvas) dimensions of the image
-                const canvasData = cropper.getCanvasData();
-                const canvasWidth = canvasData.width;  // Displayed width of the image
-                const canvasHeight = canvasData.height; // Displayed height of the image
-                const canvasLeft = canvasData.left;  // Left offset of the image within the container
-                const canvasTop = canvasData.top;    // Top offset of the image within the container
-
-                // Define the desired crop box dimensions
-                const cropBoxWidth = 200;  // Desired crop box width
-                const cropBoxHeight = 100; // Desired crop box height
-
-                // Calculate the center position for the crop box
-                const left = canvasLeft + (canvasWidth - cropBoxWidth) / 2;
-                const top = canvasTop + (canvasHeight - cropBoxHeight) / 2;
-
-                // Set the crop box data
-                cropper.setCropBoxData({
-                    left: left,
-                    top: top,
-                    width: cropBoxWidth,
-                    height: cropBoxHeight,
-                });
-            }
-
-        }
-
-    }, [aspectRatio]); // Trigger this effect whenever aspectRatio changes
-
-    return (
-        <Cropper
-            src={imageSrc}
-            style={{ height: "100%", width: "100%", objectFit: "contain" }}
-            guides={true} // Show guides for cropping
-            crop={onCrop} // Callback to capture the cropped area
-            ref={cropperRef}
-            dragMode='move'
-            movable={true}
-            zoomable={true} // Allow zooming of the image
-            scalable={true} // Prevent scaling of the crop box
-            cropBoxMovable={true} // Allow the crop box to be moved inside the image
-            cropBoxResizable={false} // Disable resizing the crop box
-        />
-    );
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+export const NewCropperImg = ({ imageSrc, onCroppedImage, aspectRatio, rotationAngle, zoomLevel, moveDirection, currentState }) => {
+    const cropperRef = useRef(null);
+    const onCrop = () => {
+        var _a;
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            cropper.setDragMode('move');
+            const croppedCanvas = cropper.getCroppedCanvas();
+            const croppedImageUrl = croppedCanvas.toDataURL(); // Data URL for preview
+            onCroppedImage(croppedImageUrl);
+        }
+        else {
+            console.log("Cropper instance is not available.");
+        }
+    };
+    useEffect(() => {
+        var _a;
+        // Rotate the image whenever the rotation angle changes
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            cropper.rotate(rotationAngle); // Apply the rotation to the image
+        }
+    }, [rotationAngle]); // Effect will run whenever rotationAngle changes
+    useEffect(() => {
+        var _a;
+        // Zoom the image whenever the zoom level changes
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            const cropBoxData = cropper.getCropBoxData();
+            if (cropBoxData.width) {
+                console.log('Inside cropper scale');
+                cropper.scale(zoomLevel); // Apply the zoom level
+            }
+            // Apply zoom directly without using getZoom method
+        }
+    }, [zoomLevel]); // Effect will run whenever zoomLevel changes
+    // Move the image based on the moveDirection prop
+    useEffect(() => {
+        var _a;
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            // Make sure moveDirection is available before calling move
+            const cropBoxData = cropper.getCropBoxData();
+            if (cropBoxData.width) {
+                const { x, y } = moveDirection;
+                if (typeof x === "number" && typeof y === "number") {
+                    cropper.move(x, y); // Move the image
+                }
+            }
+        }
+    }, [moveDirection]); // This effect runs whenever moveDirection changes
+    useEffect(() => {
+        var _a;
+        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
+        if (cropper) {
+            cropper.setAspectRatio(aspectRatio); // Dynamically set the aspect ratio
+            if (aspectRatio === 1) {
+                // Get the displayed (canvas) dimensions of the image
+                const canvasData = cropper.getCanvasData();
+                const canvasWidth = canvasData.width; // Displayed width of the image
+                const canvasHeight = canvasData.height; // Displayed height of the image
+                const canvasLeft = canvasData.left; // Left offset of the image within the container
+                const canvasTop = canvasData.top; // Top offset of the image within the container
+                // Define the desired crop box dimensions
+                const cropBoxWidth = 200; // Desired crop box width
+                const cropBoxHeight = 100; // Desired crop box height
+                // Calculate the center position for the crop box
+                const left = canvasLeft + (canvasWidth - cropBoxWidth) / 2;
+                const top = canvasTop + (canvasHeight - cropBoxHeight) / 2;
+                // Set the crop box data
+                cropper.setCropBoxData({
+                    left: left,
+                    top: top,
+                    width: cropBoxWidth,
+                    height: cropBoxHeight,
+                });
+            }
+        }
+    }, [aspectRatio]); // Trigger this effect whenever aspectRatio changes
+    return (_jsx(Cropper, { src: imageSrc, style: { height: "100%", width: "100%", objectFit: "contain" }, guides: true, crop: onCrop, ref: cropperRef, dragMode: 'move', movable: true, zoomable: true, scalable: true, cropBoxMovable: true, cropBoxResizable: false }));
+};

package/dist/ikoncomponents/image-cropper-upload/components/newImageUploadForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ImageFormProps {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    onImageSubmit: (data: string | null) => void;
+}
+export declare const NewImageForm: React.NamedExoticComponent<ImageFormProps>;

package/dist/ikoncomponents/image-cropper-upload/components/newImageUploadForm.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, memo } from "react";
+import { ZoomIn, ZoomOut, RotateCw, RotateCcw, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, ImageIcon, FileImage, Square, Upload, } from "lucide-react";
+import { Label } from "../../../shadcn/label";
+import { Input } from "../../../shadcn/input";
+import { Button } from "../../../shadcn/button";
+import { NewCropperImg } from "./newCropper";
+import Image from "next/image";
+const NewImageFormComponent = ({ open, setOpen, onImageSubmit, }) => {
+    const [imageSrc, setImageSrc] = useState(null);
+    const [croppedImage, setCroppedImage] = useState(null);
+    const [prevImages, setPrevImages] = useState({
+        first: null,
+        second: null,
+        third: null,
+    });
+    const [aspectRatio, setAspectRatio] = useState(4 / 3);
+    const [activeState, setActiveState] = useState("first");
+    const [rotationAngle, setRotationAngle] = useState(0);
+    const [scale, setScale] = useState(1);
+    const [moveDirection, setMoveDirection] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [fileName, setFileName] = useState("");
+    const handleImageSubmit = () => {
+        console.log("Image Submit Button is pressed");
+        console.log(prevImages);
+        onImageSubmit(prevImages.third);
+        setOpen(false);
+    };
+    const rotateImage = (angle) => {
+        setRotationAngle((prevAngle) => prevAngle + angle);
+    };
+    const handleMoveUp = () => {
+        setMoveDirection({ x: 0, y: -5 });
+    };
+    const handleMoveDown = () => {
+        setMoveDirection({ x: 0, y: 5 });
+    };
+    const handleMoveLeft = () => {
+        setMoveDirection({ x: -5, y: 0 });
+    };
+    const handleMoveRight = () => {
+        setMoveDirection({ x: 5, y: 0 });
+    };
+    // Handle zoom in
+    const zoomIn = () => {
+        setScale((prevScale) => {
+            const newScale = prevScale + 0.2;
+            if (newScale <= 2) {
+                // Ensure scale does not exceed the max value
+                return newScale;
+            }
+            return prevScale;
+        });
+    };
+    // Handle zoom out
+    const zoomOut = () => {
+        setScale((prevScale) => {
+            const newScale = prevScale - 0.2;
+            if (newScale >= 0.2) {
+                // Ensure scale does not go below the min value
+                return newScale;
+            }
+            return prevScale;
+        });
+    };
+    const handleAspectRatioChange = (ratio, stateName) => {
+        setAspectRatio(ratio);
+        setActiveState(stateName);
+    };
+    const handleFileChange = (file) => {
+        if (file.type.startsWith("image/")) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setImageSrc(reader.result);
+                setFileName((prev) => prev || file.name);
+            };
+            reader.readAsDataURL(file);
+        }
+        else {
+            alert("Please drop a valid image file.");
+        }
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        handleFileChange(event.dataTransfer.files[0]);
+    };
+    const getImagePreview = (state) => {
+        const imgSource = croppedImage && activeState === state ? croppedImage : prevImages[state];
+        // const imgSource = prevImages[state];
+        return imgSource ? (_jsx("div", { className: `
+            ${state === "first"
+                ? "relative w-3/5 h-[200px] bg-slate-400"
+                : state === "second"
+                    ? "relative w-1/2 h-[220px] bg-slate-400"
+                    : "relative w-1/3 h-[120px] bg-slate-400"}`, children: _jsx(Image, { src: imgSource || "", alt: `Preview ${state}`, layout: "fill", objectFit: "70vh" }) })) : (_jsx("div", { className: `
+            ${state === "first"
+                ? "relative w-3/5 h-[200px] bg-slate-400"
+                : state === "second"
+                    ? "relative w-1/2 h-[220px] bg-slate-400"
+                    : "relative w-1/3 h-[120px] bg-slate-400"}` }));
+    };
+    useEffect(() => {
+        if (croppedImage) {
+            if (prevImages.first === null ||
+                prevImages.second === null ||
+                prevImages.third === null) {
+                setPrevImages({
+                    first: croppedImage,
+                    second: croppedImage,
+                    third: croppedImage,
+                });
+            }
+            else {
+                setPrevImages((prev) => (Object.assign(Object.assign({}, prev), { [activeState]: croppedImage })));
+            }
+        }
+    }, [croppedImage]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsxs("div", { className: "flex-1", children: [_jsx(Label, { htmlFor: "imageName", children: "Image Name" }), _jsx(Input, { id: "imageName", placeholder: "Enter image name", value: fileName, onChange: (e) => setFileName(e.target.value) })] }), _jsxs("div", { className: "self-end", children: [_jsx(Button, { variant: "outline", onClick: () => { var _a; return (_a = document.getElementById("inputImage1")) === null || _a === void 0 ? void 0 : _a.click(); }, children: _jsx(Upload, {}) }), _jsx(Input, { id: "inputImage1", type: "file", accept: "image/png, image/jpeg", className: "hidden", onChange: (e) => {
+                                    var _a;
+                                    const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                    if (file && file.type.startsWith("image/")) {
+                                        const reader = new FileReader();
+                                        reader.onloadend = () => {
+                                            setImageSrc(reader.result);
+                                            setFileName((prevFileName) => prevFileName || file.name);
+                                        };
+                                        reader.readAsDataURL(file);
+                                        setPrevImages({
+                                            first: null,
+                                            second: null,
+                                            third: null,
+                                        });
+                                    }
+                                } })] }), _jsxs("div", { className: "flex-1", children: [_jsx(Label, { htmlFor: "imageDesc", children: "Image Description" }), _jsx(Input, { id: "imageDesc", placeholder: "Describe your image" })] })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx("div", { className: "w-3/5 flex justify-center items-center border-2 border-dashed border-gray-400 bg-gray-100", style: { height: "70vh" }, onDrop: handleDrop, onDragOver: (e) => e.preventDefault(), children: imageSrc ? (_jsx(NewCropperImg, { imageSrc: imageSrc, onCroppedImage: setCroppedImage, aspectRatio: aspectRatio, rotationAngle: rotationAngle, zoomLevel: scale, moveDirection: moveDirection, currentState: activeState })) : (_jsxs("div", { className: "text-center", children: [_jsx(Label, { htmlFor: "inputImage", children: "Drag and drop an image here" }), _jsxs("div", { className: "mt-4", children: [_jsx(Button, { variant: "outline", onClick: () => { var _a; return (_a = document.getElementById("inputImage")) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Upload Image" }), _jsx(Input, { id: "inputImage", type: "file", accept: "image/png, image/jpeg", className: "hidden", onChange: (e) => {
+                                                var _a;
+                                                const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                                if (file) {
+                                                    handleFileChange(file);
+                                                }
+                                            } })] })] })) }), _jsxs("div", { className: "w-2/5 flex flex-col gap-2", children: [_jsx("h3", { children: "Landscape" }), getImagePreview("first"), _jsx("h3", { children: "Potrait" }), getImagePreview("second"), _jsx("h3", { children: "Icon" }), getImagePreview("third")] })] }), _jsxs("div", { className: "flex flex-row gap-1", children: [_jsxs("div", { className: "w-3/5 flex flex-row justify-between", children: [_jsxs("div", { children: [_jsx(Button, { variant: "outline", onClick: () => handleAspectRatioChange(4 / 3, "first"), children: _jsx(ImageIcon, {}) }), _jsx(Button, { variant: "outline", onClick: () => handleAspectRatioChange(3 / 4, "second"), children: _jsx(FileImage, {}) }), _jsx(Button, { variant: "outline", onClick: () => handleAspectRatioChange(1 / 1, "third"), children: _jsx(Square, {}) })] }), _jsxs("div", { children: [_jsx(Button, { onClick: () => rotateImage(90), variant: "outline", children: _jsx(RotateCw, {}) }), _jsx(Button, { onClick: () => rotateImage(-90), variant: "outline", children: _jsx(RotateCcw, {}) })] }), _jsxs("div", { children: [_jsx(Button, { onClick: () => zoomIn(), variant: "outline", children: _jsx(ZoomIn, {}) }), _jsx(Button, { onClick: () => zoomOut(), variant: "outline", children: _jsx(ZoomOut, {}) })] }), _jsxs("div", { children: [_jsx(Button, { onClick: handleMoveUp, variant: "outline", children: _jsx(ArrowUp, {}) }), _jsx(Button, { onClick: handleMoveDown, variant: "outline", children: _jsx(ArrowDown, {}) }), _jsx(Button, { onClick: handleMoveLeft, variant: "outline", children: _jsx(ArrowLeft, {}) }), _jsx(Button, { onClick: handleMoveRight, variant: "outline", children: _jsx(ArrowRight, {}) })] })] }), _jsx("div", { className: "w-2/5 flex flex-row-reverse", children: _jsx(Button, { onClick: handleImageSubmit, children: "Save" }) })] })] }));
+};
+export const NewImageForm = memo(NewImageFormComponent);

package/dist/ikoncomponents/image-cropper-upload/cropper-form/index.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    onNewFileUpload?: (...args: any) => void;
+}
+declare function CropperFormComponent({ onNewFileUpload }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const CropperForm: import("react").MemoExoticComponent<typeof CropperFormComponent>;
+export {};