ikoncomponents 1.5.7 → 1.5.8

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

@@ -1,84 +0,0 @@
-"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

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

@@ -1,23 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-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/newImageUploadForm.d.ts

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

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-import { CropperUploadImagesInfoProps } from './utils';
-export interface ImageCropperContextProps {
-    originalImage: OriginalImageProps;
-    setOriginalImage: (originalImage: OriginalImageProps) => void;
-    aspectRatioWiseImages: AspectRatioWiseImagesProps;
-    setAspectRatioWiseImages: (aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
-}
-export interface AspectRatioWiseImagesProps {
-    landscape: string | null;
-    potrait: string | null;
-    icon: string | null;
-}
-export interface OriginalImageProps {
-    image: string | File | null;
-    name?: string;
-    description?: string;
-}
-export interface ImageCropperProps {
-    children: ReactNode;
-    uploadedImages: CropperUploadImagesInfoProps | null;
-    onCropperChange: (originalImage: OriginalImageProps, aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
-    modalOpen?: boolean;
-    onModalOpenChange?: (open: boolean) => void;
-}
-export declare function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }: ImageCropperProps): import("react/jsx-runtime").JSX.Element;
-export declare const useImageCropper: () => ImageCropperContextProps;

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

@@ -1,49 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from 'react';
-import { CropperFormWithModal } from './cropper-form-with-modal';
-import { uploadedImagesToCropperImgObj } from './utils';
-const ImageCropperContext = createContext(undefined);
-export function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }) {
-    const [aspectRatioWiseImages, setAspectRatioWiseImages] = useState({
-        landscape: null,
-        potrait: null,
-        icon: null
-    });
-    const [originalImage, setOriginalImage] = useState({
-        image: null,
-        name: "",
-        description: "",
-    });
-    useEffect(() => {
-        async function updateCropperImages() {
-            if (!uploadedImages)
-                return; // Prevent unnecessary processing
-            try {
-                const res = await uploadedImagesToCropperImgObj(uploadedImages);
-                if (res) {
-                    // Check if state is different before updating
-                    setOriginalImage((prev) => JSON.stringify(prev) === JSON.stringify(res.originalImage) ? prev : res.originalImage);
-                    setAspectRatioWiseImages((prev) => JSON.stringify(prev) === JSON.stringify(res.aspectRatioWiseImages) ? prev : res.aspectRatioWiseImages);
-                }
-            }
-            catch (error) {
-                console.error("Error processing uploaded images:", error);
-            }
-        }
-        updateCropperImages();
-    }, [uploadedImages]); // Runs only when `uploadedImages` changes
-    return (_jsxs(ImageCropperContext.Provider, { value: {
-            originalImage,
-            setOriginalImage,
-            aspectRatioWiseImages,
-            setAspectRatioWiseImages
-        }, children: [children, modalOpen && onModalOpenChange && _jsx(CropperFormWithModal, { open: modalOpen, onOpenChange: onModalOpenChange, onCropperChange: onCropperChange })] }));
-}
-export const useImageCropper = () => {
-    const context = useContext(ImageCropperContext);
-    if (!context) {
-        throw new Error("useImageCropper must be used within a ImageCropperProvider");
-    }
-    return context;
-};

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

@@ -1,16 +0,0 @@
-import { AspectRatioWiseImagesProps, OriginalImageProps } from "..";
-import { FileinfoProps } from "../../../utils/api/file-upload/type";
-export interface CropperUploadImagesInfoProps {
-    originalImageInfo?: FileinfoProps | null;
-    imageName?: string;
-    imageDescription?: string;
-    landscapeImageInfo?: FileinfoProps | null;
-    portaitImageInfo?: FileinfoProps | null;
-    iconImageInfo?: FileinfoProps | null;
-}
-export interface UploadedImagesToCropperImgObjProps {
-    originalImage: OriginalImageProps;
-    aspectRatioWiseImages: AspectRatioWiseImagesProps;
-}
-export declare function imageCropperFilesUpload(originalImage: OriginalImageProps, aspectRatioWiseImages?: AspectRatioWiseImagesProps, resourceId?: string): Promise<CropperUploadImagesInfoProps | null>;
-export declare function uploadedImagesToCropperImgObj(uploadedImages: CropperUploadImagesInfoProps | null): Promise<UploadedImagesToCropperImgObjProps | null>;

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

@@ -1,73 +0,0 @@
-import { base64FileUpload, singleFileUpload, } from "../../../utils/api/file-upload";
-import { getResourceUrl } from "../../../utils/actions/common/utils";
-export async function imageCropperFilesUpload(originalImage, aspectRatioWiseImages, resourceId) {
-    if (!originalImage.image) {
-        return null;
-    }
-    const originalImageInfo = await singleFileUpload(originalImage.image, resourceId);
-    const cropperUploadImagesInfo = {
-        originalImageInfo: originalImageInfo,
-        imageName: originalImage.name,
-        imageDescription: originalImage.description,
-        landscapeImageInfo: null,
-        portaitImageInfo: null,
-        iconImageInfo: null,
-    };
-    if (aspectRatioWiseImages) {
-        if (aspectRatioWiseImages.landscape) {
-            try {
-                cropperUploadImagesInfo["landscapeImageInfo"] = await base64FileUpload(aspectRatioWiseImages.landscape, originalImage.name + "_L.webp", "image/webp");
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-        if (aspectRatioWiseImages.potrait) {
-            try {
-                cropperUploadImagesInfo["portaitImageInfo"] = await base64FileUpload(aspectRatioWiseImages.potrait, originalImage.name + "_P.webp", "image/webp");
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-        if (aspectRatioWiseImages.icon) {
-            try {
-                cropperUploadImagesInfo["iconImageInfo"] = await base64FileUpload(aspectRatioWiseImages.icon, originalImage.name + "_I.webp", "image/webp");
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-    }
-    return cropperUploadImagesInfo;
-}
-export async function uploadedImagesToCropperImgObj(uploadedImages) {
-    if (!uploadedImages) {
-        return null;
-    }
-    const originalImageUrl = uploadedImages.originalImageInfo
-        ? await getResourceUrl(uploadedImages.originalImageInfo)
-        : null;
-    const landscapeImageUrl = uploadedImages.landscapeImageInfo
-        ? await getResourceUrl(uploadedImages.landscapeImageInfo)
-        : null;
-    const portaitImageUrl = uploadedImages.portaitImageInfo
-        ? await getResourceUrl(uploadedImages.portaitImageInfo)
-        : null;
-    const iconImageUrl = uploadedImages.iconImageInfo
-        ? await getResourceUrl(uploadedImages.iconImageInfo)
-        : null;
-    const obj = {
-        originalImage: {
-            image: originalImageUrl,
-            name: uploadedImages.imageName,
-            description: uploadedImages.imageDescription,
-        },
-        aspectRatioWiseImages: {
-            landscape: landscapeImageUrl,
-            potrait: portaitImageUrl,
-            icon: iconImageUrl,
-        },
-    };
-    return obj;
-}

package/dist/ikoncomponents/loading-spinner/index.d.ts

@@ -1,9 +0,0 @@
-import * as React from "react";
-export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
-    size?: number;
-    className?: string;
-}
-export interface LoadingSpinnerProps extends ISVGProps {
-    visible?: boolean;
-}
-export declare const LoadingSpinner: ({ size, className, visible, ...props }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ikoncomponents/loading-spinner/index.js

@@ -1,19 +0,0 @@
-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 { cn } from "../../utils/cn";
-export const LoadingSpinner = (_a) => {
-    var { size = 48, className, visible = true } = _a, props = __rest(_a, ["size", "className", "visible"]);
-    if (!visible)
-        return null;
-    return (_jsx("div", { className: "h-full w-full", children: _jsx("div", { className: "absolute inset-0 flex justify-center items-center z-50", children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size }, props, { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("animate-spin", className), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })) }) }));
-};