ikoncomponents 1.2.0 → 1.2.2

package/dist/ikoncomponents/activity-sheet/index.d.ts

@@ -0,0 +1,11 @@
+export type ActivityLogProps = {
+    id: string;
+    activity: string;
+    updatedBy: string;
+    updatedOn: string;
+    source: string;
+    parentId: string;
+};
+export declare function ActivitySheet({ activityLogs }: {
+    activityLogs?: ActivityLogProps[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/activity-sheet/index.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignJustify } from "lucide-react";
+import { Tabs } from "../tabs";
+import { NoDataComponent } from "../no-data";
+import { UploadTab } from "../upload-tab";
+import { SheetComponent } from "../sheet";
+export function ActivitySheet({ activityLogs = [] }) {
+    const tabArray = [
+        {
+            tabName: "Activity",
+            tabId: "tab-activity",
+            default: true,
+            tabContent: _jsx("div", { className: "overflow-auto flex flex-col gap-2 h-full", children: activityLogs.length > 0 ? (activityLogs.map((log) => (_jsxs("div", { className: "border-b text-sm pb-2", children: [_jsx("p", { className: "font-medium pb-1", children: log.activity }), _jsxs("p", { className: "text-gray-500 pb-1", children: ["Updated On:", " ", _jsx("span", { className: "text-gray-700", children: new Date(log.updatedOn).toLocaleString() })] }), _jsxs("p", { className: "text-gray-500 pb-1", children: ["Updated By: ", _jsx("span", { className: "text-gray-700", children: log.updatedBy })] })] }, log.id)))) : (_jsx(NoDataComponent, { text: "No Activity Logs Available" })) })
+        }, {
+            tabName: "File Upload",
+            tabId: "tab-upload",
+            default: false,
+            tabContent: _jsx(UploadTab, {})
+        }
+    ];
+    return (_jsx(SheetComponent, { buttonText: "", buttonIcon: _jsx(AlignJustify, {}), sheetTitle: "", sheetContent: _jsx(Tabs, { tabArray: tabArray, tabListClass: '' }), closeButton: true }));
+}

package/dist/ikoncomponents/big-calendar/big-calender-event/index.d.ts

@@ -0,0 +1,5 @@
+import { BigCalendarEventProps, ExtraParamsEvent } from "../type";
+export default function BigCalenderEvent({ event, extraParamsEvent }: {
+    event: BigCalendarEventProps;
+    extraParamsEvent?: ExtraParamsEvent;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/big-calendar/big-calender-event/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye, SquarePen } from "lucide-react";
+import { TooltipComponent as Tooltip } from "../../tooltip";
+// Custom event component
+export default function BigCalenderEvent({ event, extraParamsEvent }) {
+    return (_jsxs("div", { className: "custom-event flex flex-row justify-between", children: [_jsx("span", { className: "truncate", children: event.title }), _jsxs("span", { className: "flex flex-row gap-1", children: [((extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.isEditableAll) || event.isEditable) &&
+                        _jsx(Tooltip, { tooltipContent: "Edit", children: _jsx("button", { className: "event-edit-button", onClick: (e) => {
+                                    var _a;
+                                    e.stopPropagation(); // Prevent triggering other event handlers
+                                    (_a = extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.onEditEventClick) === null || _a === void 0 ? void 0 : _a.call(extraParamsEvent, event);
+                                }, children: _jsx(SquarePen, { size: 16 }) }) }), _jsx(Tooltip, { tooltipContent: "View", children: _jsx("button", { className: "event-view-button", onClick: (e) => {
+                                var _a;
+                                e.stopPropagation(); // Prevent triggering other event handlers
+                                (_a = extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.onViewEventClick) === null || _a === void 0 ? void 0 : _a.call(extraParamsEvent, event);
+                            }, children: _jsx(Eye, { size: 16 }) }) })] })] }));
+}

package/dist/ikoncomponents/big-calendar/big-calender-toolbar/index.d.ts

@@ -0,0 +1,2 @@
+import { BigCalenderToolbarProps } from "../type";
+export default function BigCalenderToolbar({ onNavigate, onView, label, extraTools, view }: BigCalenderToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/big-calendar/big-calender-toolbar/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Views } from "react-big-calendar";
+import { Fragment, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "../../../shadcn/toggle-group";
+// Custom toolbar component
+export default function BigCalenderToolbar({ onNavigate, onView, label, extraTools, view }) {
+    const [calViewsValue, setValue] = useState(view === Views.DAY ? "DAY" : view === Views.WEEK ? "WEEK" : "MONTH");
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center mb-3", children: [_jsxs(ToggleGroup, { type: "single", variant: 'outline', onValueChange: (value) => {
+                        switch (value) {
+                            case "PREV":
+                                onNavigate("PREV");
+                                break;
+                            case "NEXT":
+                                onNavigate("NEXT");
+                                break;
+                            case "TODAY":
+                                onNavigate("TODAY");
+                                break;
+                            default:
+                                break;
+                        }
+                    }, children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "PREV", children: _jsx(ChevronLeft, { size: 16 }) }), _jsx(ToggleGroupItem, { className: 'rounded-none border-x-0', value: "NEXT", children: _jsx(ChevronRight, { size: 16 }) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none', value: "TODAY", children: "Today" })] }), _jsx("span", { className: "rbc-toolbar-label", children: label }), _jsxs("div", { className: "flex flex-row gap-2", children: [extraTools === null || extraTools === void 0 ? void 0 : extraTools.map((tool, index) => _jsx(Fragment, { children: tool }, index)), _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: calViewsValue, onValueChange: (value) => {
+                                setValue(value);
+                                switch (value) {
+                                    case "DAY":
+                                        onView(Views.DAY);
+                                        break;
+                                    case "WEEK":
+                                        onView(Views.WEEK);
+                                        break;
+                                    case "MONTH":
+                                        onView(Views.MONTH);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            }, children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "DAY", children: "Day" }), _jsx(ToggleGroupItem, { className: 'rounded-none border-x-0', value: "WEEK", children: "Week" }), _jsx(ToggleGroupItem, { className: 'rounded-s-none', value: "MONTH", children: "Month" })] })] })] }) }));
+}

package/dist/ikoncomponents/big-calendar/index.d.ts

@@ -0,0 +1,4 @@
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import "./index.css";
+import { BigCalendarProps } from "./type";
+export declare function BigCalendar({ events, extraParamsEvent, extraTools }: BigCalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/big-calendar/index.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { format, getDay, parse, startOfWeek } from "date-fns";
+import { Calendar, dateFnsLocalizer, Views } from "react-big-calendar";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import { useState } from "react";
+import "./index.css";
+import BigCalenderToolbar from "./big-calender-toolbar";
+import BigCalenderEvent from "./big-calender-event";
+// Localization settings
+const locales = {
+    "en-US": require("date-fns/locale/en-US"),
+};
+const localizer = dateFnsLocalizer({
+    format,
+    parse,
+    startOfWeek,
+    getDay,
+    locales,
+});
+export function BigCalendar({ events, extraParamsEvent, extraTools }) {
+    const [view, setView] = useState((extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.defaultView) === "day" ? Views.DAY :
+        (extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.defaultView) === "week" ? Views.WEEK :
+            (extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.defaultView) === "month" ? Views.MONTH :
+                (extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.defaultView) === "work week" ? Views.WORK_WEEK :
+                    (extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.defaultView) === "agenda" ? Views.AGENDA : Views.MONTH);
+    const [date, setDate] = useState(new Date());
+    return (_jsx(Calendar, { localizer: localizer, events: events || [], startAccessor: "start", endAccessor: "end", views: [Views.DAY, Views.WEEK, Views.MONTH], view: view, onView: (view) => setView(view), date: date, onNavigate: (date) => setDate(date), components: {
+            event: (props) => _jsx(BigCalenderEvent, { event: props.event, extraParamsEvent: extraParamsEvent }),
+            toolbar: (props) => _jsx(BigCalenderToolbar, Object.assign({}, props, { extraTools: extraTools, view: view })),
+        }, style: {
+            height: (extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.height) || "100%",
+            margin: (extraParamsEvent === null || extraParamsEvent === void 0 ? void 0 : extraParamsEvent.margin) || "0px",
+        } }));
+}

package/dist/ikoncomponents/big-calendar/type.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export interface BigCalendarProps {
+    events: BigCalendarEventProps[];
+    extraParamsEvent?: ExtraParamsEvent;
+    extraTools?: ReactNode[];
+    onDateClick?: (date: Date) => void;
+}
+export interface ExtraParamsEvent {
+    defaultView?: string;
+    isEditableAll?: boolean;
+    isViewable?: boolean;
+    onEditEventClick?: (event: BigCalendarEventProps) => void;
+    onViewEventClick?: (event: BigCalendarEventProps) => void;
+    height?: string;
+    margin?: string;
+}
+export interface BigCalendarEventProps extends Event {
+    title?: string;
+    isEditable?: boolean;
+    isViewable?: boolean;
+    start: Date;
+    end: Date;
+    onEventClick?: (event: any) => void;
+}
+export interface BigCalenderToolbarProps {
+    onNavigate: (view: any) => void;
+    onView: (view: any) => void;
+    label: string;
+    extraTools?: ReactNode[];
+    view: "month" | "week" | "work_week" | "day" | "agenda";
+}

package/dist/ikoncomponents/big-calendar/type.js

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

package/dist/ikoncomponents/form-fields/combobox-input-value/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useController } from "react-hook-form";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "../../../shadcn/form";

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/dist/ikoncomponents/image-cropper-upload/components/newCropper.js

@@ -0,0 +1,85 @@
+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 {};

package/dist/ikoncomponents/image-cropper-upload/cropper-form/index.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from '../../../shadcn/input';
+import { Label } from '../../../shadcn/label';
+import { ToggleGroup, ToggleGroupItem } from '../../../shadcn/toggle-group';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, FileImage, ImageIcon, RotateCcw, RotateCw, Square, ZoomIn, ZoomOut } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { ImageCropper } from '../image-cropper';
+import Image from 'next/image';
+import { AspectRatio } from '../../../shadcn/aspect-ratio';
+import { TextButton } from '../../buttons';
+import { toast } from 'sonner';
+import { FileInput } from '../../file-input';
+import { useImageCropper } from '..';
+const stateWiseAspectRatio = {
+    landscape: 4 / 3,
+    potrait: 3 / 4,
+    icon: 1 / 1
+};
+function CropperFormComponent({ onNewFileUpload }) {
+    const { originalImage, setOriginalImage, aspectRatioWiseImages, setAspectRatioWiseImages } = useImageCropper();
+    const [croppedImage, setCroppedImage] = useState(null);
+    const [activeState, setActiveState] = useState();
+    const [rotationAngle, setRotationAngle] = useState(0);
+    const [scale, setScale] = useState(1);
+    const [moveDirection, setMoveDirection] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [imageSrc, setImageSrc] = useState(null);
+    const handleDrop = (event) => {
+        event.preventDefault();
+        handleFileChange(event.dataTransfer.files[0]);
+    };
+    const handleFileChange = (file) => {
+        var _a;
+        if (typeof file === "string") {
+            setImageSrc(file);
+        }
+        else {
+            if ((_a = file === null || file === void 0 ? void 0 : file.type) === null || _a === void 0 ? void 0 : _a.startsWith("image/")) {
+                onNewFileUpload === null || onNewFileUpload === void 0 ? void 0 : onNewFileUpload();
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    setImageSrc(reader.result);
+                    setActiveState(undefined);
+                };
+                reader.readAsDataURL(file);
+                setOriginalImage(Object.assign(Object.assign({}, originalImage), { image: file, name: file.name }));
+            }
+            else {
+                toast.error("Please select a valid image file.");
+            }
+        }
+    };
+    useEffect(() => {
+        if (originalImage.image) {
+            handleFileChange(originalImage.image);
+        }
+    }, [originalImage.image]);
+    const getImagePreview = (state) => {
+        const imgSource = croppedImage && activeState === state ? croppedImage : aspectRatioWiseImages[state];
+        return (_jsxs(_Fragment, { children: [_jsx("h3", { className: 'mb-3', children: state }), _jsx(AspectRatio, { ratio: stateWiseAspectRatio[state], className: 'bg-muted', children: imgSource &&
+                        _jsx(Image, { src: imgSource || "", alt: `Preview ${state}`, fill: true }) })] }));
+    };
+    useEffect(() => {
+        if (croppedImage) {
+            if (activeState) {
+                setAspectRatioWiseImages(Object.assign(Object.assign({}, aspectRatioWiseImages), { [activeState]: croppedImage }));
+            }
+            else {
+                setAspectRatioWiseImages({
+                    landscape: croppedImage,
+                    potrait: croppedImage,
+                    icon: croppedImage
+                });
+            }
+        }
+    }, [croppedImage]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: 'flex flex-col gap-3 h-full overflow-auto', children: [_jsxs("div", { className: 'flex flex-col lg:flex-row gap-3 justify-between', children: [_jsxs("div", { className: 'w-full flex flex-col gap-4', children: [_jsx(Label, { htmlFor: "imageName", children: "Image Name" }), _jsx(FileInput, { id: "inputImage", accept: "image/*", fileNamePlaceholder: "Enter image name", fileName: (originalImage === null || originalImage === void 0 ? void 0 : originalImage.name) || "", onChange: (e) => {
+                                        var _a;
+                                        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                        if (file) {
+                                            handleFileChange(file);
+                                        }
+                                    }, onFileNameChange: (e) => {
+                                        setOriginalImage(Object.assign(Object.assign({}, originalImage), { name: e.target.value }));
+                                    } })] }), _jsxs("div", { className: 'w-full flex flex-col gap-4', children: [_jsx(Label, { htmlFor: "imageDescription", children: "Image Description" }), _jsx(Input, { id: "imageDescription", placeholder: "Enter image Description", value: (originalImage === null || originalImage === void 0 ? void 0 : originalImage.description) || "", onChange: (e) => setOriginalImage(Object.assign(Object.assign({}, originalImage), { description: e.target.value })) })] })] }), _jsxs("div", { className: 'flex flex-col lg:flex-row gap-3', children: [_jsxs("div", { className: 'flex-grow flex flex-col gap-3', children: [_jsxs("div", { children: [_jsx("h3", { className: 'mb-3', children: "Original Image" }), _jsx(AspectRatio, { ratio: 4 / 3, className: 'flex justify-center items-center bg-muted text-muted-foreground', onDrop: handleDrop, onDragOver: (e) => e.preventDefault(), children: imageSrc ?
+                                                _jsx(ImageCropper, { src: imageSrc, onCroppedImage: setCroppedImage, aspectRatio: stateWiseAspectRatio[activeState || "icon"], rotationAngle: rotationAngle, zoomLevel: scale, moveDirection: moveDirection })
+                                                :
+                                                    _jsxs("div", { className: "text-center", children: [_jsx(Label, { htmlFor: "inputImage", children: "Drag and drop an image here" }), _jsx("div", { className: "mt-3", children: _jsx(TextButton, { variant: "outline", onClick: () => { var _a; return (_a = document.getElementById("inputImage")) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Browse Image" }) })] }) })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-3 justify-between", children: [_jsx("div", { children: _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: activeState, onValueChange: (value) => setActiveState(value), children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "landscape", children: _jsx(ImageIcon, {}) }), _jsx(ToggleGroupItem, { className: "rounded-none border-x-0", value: "potrait", children: _jsx(FileImage, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none', value: "icon", children: _jsx(Square, {}) })] }) }), _jsxs("div", { className: 'flex flex-col lg:flex-row gap-3 justify-between', children: [_jsxs(ToggleGroup, { type: "single", variant: 'outline', value: "", onValueChange: (value) => setRotationAngle(parseInt(value)), children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "90", children: _jsx(RotateCw, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none border-s-0', value: "-90", children: _jsx(RotateCcw, {}) })] }), _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: '', children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "up", onClick: () => setMoveDirection({ x: 0, y: -5 }), children: _jsx(ArrowUp, {}) }), _jsx(ToggleGroupItem, { className: "rounded-none border-x-0", value: "down", onClick: () => setMoveDirection({ x: 0, y: 5 }), children: _jsx(ArrowDown, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-none border-e-0', value: "left", onClick: () => setMoveDirection({ x: -5, y: 0 }), children: _jsx(ArrowLeft, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none', value: "right", onClick: () => setMoveDirection({ x: 5, y: 0 }), children: _jsx(ArrowRight, {}) })] }), _jsxs(ToggleGroup, { type: "single", variant: 'outline', value: "", onValueChange: (value) => setScale(pre => pre + parseFloat(value)), children: [_jsx(ToggleGroupItem, { className: "rounded-e-none", value: "0.1", children: _jsx(ZoomIn, {}) }), _jsx(ToggleGroupItem, { className: 'rounded-s-none border-s-0', value: "-0.1", children: _jsx(ZoomOut, {}) })] })] })] })] }), _jsxs("div", { className: "flex flex-row lg:flex-col gap-3 w-full lg:w-48", children: [_jsx("div", { className: 'w-5/5', children: getImagePreview("landscape") }), _jsx("div", { className: 'w-4/5', children: getImagePreview("potrait") }), _jsx("div", { className: 'w-3/5', children: getImagePreview("icon") })] })] })] }) }));
+}
+export const CropperForm = memo(CropperFormComponent);

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

@@ -0,0 +1,6 @@
+import { AspectRatioWiseImagesProps, OriginalImageProps } from '..';
+export declare function CropperFormWithModal({ open, onOpenChange, onCropperChange }: Readonly<{
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCropperChange: (originalImage: OriginalImageProps, aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/image-cropper-upload/cropper-form-with-modal/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../shadcn/dialog';
+import { CropperForm } from '../cropper-form';
+import { TextButton } from '../../buttons';
+import { useImageCropper } from '..';
+export function CropperFormWithModal({ open, onOpenChange, onCropperChange }) {
+    const { originalImage, aspectRatioWiseImages } = useImageCropper();
+    return (_jsx(Dialog, { modal: true, open: open, onOpenChange: (isOpen) => {
+            onOpenChange(isOpen);
+        }, children: _jsxs(DialogContent, { className: "max-w-full lg:max-w-5xl max-h-full overflow-auto", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Image to upload" }) }), _jsx(CropperForm, {}), _jsx(DialogFooter, { children: _jsx(TextButton, { onClick: () => {
+                            onCropperChange(originalImage, aspectRatioWiseImages);
+                            onOpenChange(false);
+                        }, children: "Save Changes" }) })] }) }));
+}

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

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