@myrjfa/ui 1.1.0 → 1.1.2

package/dist/misc/image-compressor.d.ts

@@ -0,0 +1,29 @@
+export interface CompressOptions {
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+/**
+ * Compress an image File using Canvas API.
+ * Returns a new File object with the same name but compressed content.
+ */
+export declare function compressImage(file: File, options?: CompressOptions): Promise<File>;
+export interface ImageCompressorProps {
+    enableCompression?: boolean;
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    accept?: string;
+    multiple?: boolean;
+    onChange: (files: File[]) => void;
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+}
+/**
+ * #26 — Image Compressor Input Component
+ * Drop-in replacement for a file input that optionally compresses images
+ * before passing them to the onChange handler.
+ */
+export declare function ImageCompressorInput({ enableCompression, quality, maxWidth, maxHeight, accept, multiple, onChange, children, className, id, }: ImageCompressorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image-compressor.d.ts.map

package/dist/misc/image-compressor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-compressor.d.ts","sourceRoot":"","sources":["../../src/misc/image-compressor.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAsB,aAAa,CAC/B,IAAI,EAAE,IAAI,EACV,OAAO,GAAE,eAAoB,GAC9B,OAAO,CAAC,IAAI,CAAC,CAkDf;AAED,MAAM,WAAW,oBAAoB;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,iBAAwB,EACxB,OAAa,EACb,QAAe,EACf,SAAgB,EAChB,MAAoD,EACpD,QAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,EAAE,GACL,EAAE,oBAAoB,2CAmCtB"}

package/dist/misc/image-compressor.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+/**
+ * Compress an image File using Canvas API.
+ * Returns a new File object with the same name but compressed content.
+ */
+export async function compressImage(file, options = {}) {
+    const { quality = 0.8, maxWidth = 1920, maxHeight = 1920 } = options;
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const url = URL.createObjectURL(file);
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            let { width, height } = img;
+            if (width > maxWidth) {
+                height = Math.round((height * maxWidth) / width);
+                width = maxWidth;
+            }
+            if (height > maxHeight) {
+                width = Math.round((width * maxHeight) / height);
+                height = maxHeight;
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                resolve(file); // fallback: return original
+                return;
+            }
+            ctx.drawImage(img, 0, 0, width, height);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    resolve(file); // fallback
+                    return;
+                }
+                resolve(new File([blob], file.name, { type: 'image/webp', lastModified: Date.now() }));
+            }, 'image/webp', quality);
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error(`Failed to load image: ${file.name}`));
+        };
+        img.src = url;
+    });
+}
+/**
+ * #26 — Image Compressor Input Component
+ * Drop-in replacement for a file input that optionally compresses images
+ * before passing them to the onChange handler.
+ */
+export function ImageCompressorInput({ enableCompression = true, quality = 0.8, maxWidth = 1920, maxHeight = 1920, accept = 'image/jpeg,image/jpg,image/png,image/webp', multiple = false, onChange, children, className, id, }) {
+    const inputRef = useRef(null);
+    const handleChange = useCallback(async (e) => {
+        const rawFiles = Array.from(e.target.files || []);
+        if (!rawFiles.length)
+            return;
+        if (!enableCompression) {
+            onChange(rawFiles);
+            return;
+        }
+        const compressed = await Promise.all(rawFiles.map(f => compressImage(f, { quality, maxWidth, maxHeight }).catch(() => f)));
+        onChange(compressed);
+        // Reset input so the same file can be re-selected
+        if (inputRef.current)
+            inputRef.current.value = '';
+    }, [enableCompression, quality, maxWidth, maxHeight, onChange]);
+    return (_jsxs("label", { className: className, style: { cursor: 'pointer' }, children: [children, _jsx("input", { ref: inputRef, id: id, type: "file", accept: accept, multiple: multiple, onChange: handleChange, style: { display: 'none' } })] }));
+}

package/dist/misc/image-cropper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ImageCropperProps {
+    image: string;
+    onCancel: () => void;
+    onCropComplete: (croppedImage: Blob) => void;
+    open: boolean;
+}
+declare const ImageCropper: React.FC<ImageCropperProps>;
+export default ImageCropper;
+//# sourceMappingURL=image-cropper.d.ts.map

package/dist/misc/image-cropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../src/misc/image-cropper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/misc/image-cropper.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import Cropper from "react-easy-crop";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "./dialog";
+import { Slider } from "./slider";
+const ImageCropper = ({ image, onCancel, onCropComplete, open }) => {
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+    const onCropChange = (crop) => {
+        setCrop(crop);
+    };
+    const onZoomChange = (zoom) => {
+        setZoom(zoom);
+    };
+    const onCropCompleteCallback = useCallback((_, croppedAreaPixels) => {
+        setCroppedAreaPixels(croppedAreaPixels);
+    }, []);
+    const createCroppedImage = async () => {
+        if (!croppedAreaPixels || !image)
+            return;
+        const img = new Image();
+        img.src = image;
+        await new Promise((resolve) => {
+            img.onload = resolve;
+        });
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        canvas.width = croppedAreaPixels.width;
+        canvas.height = croppedAreaPixels.height;
+        ctx.drawImage(img, croppedAreaPixels.x, croppedAreaPixels.y, croppedAreaPixels.width, croppedAreaPixels.height, 0, 0, croppedAreaPixels.width, croppedAreaPixels.height);
+        canvas.toBlob((blob) => {
+            if (blob) {
+                onCropComplete(blob);
+            }
+        }, "image/jpeg");
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && onCancel(), children: _jsxs(DialogContent, { className: "sm:max-w-[500px] z-[300]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Crop Profile Picture" }) }), _jsx("div", { className: "relative h-[300px] w-full bg-gray-100 rounded-md overflow-hidden", children: _jsx(Cropper, { image: image, crop: crop, zoom: zoom, aspect: 1, cropShape: "round", showGrid: false, onCropChange: onCropChange, onCropComplete: onCropCompleteCallback, onZoomChange: onZoomChange }) }), _jsx("div", { className: "py-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium", children: "Zoom" }), _jsx(Slider, { value: [zoom], min: 1, max: 5, step: 0.1, onValueChange: (values) => { var _a; return setZoom((_a = values[0]) !== null && _a !== void 0 ? _a : 1); }, className: "flex-1" })] }) }), _jsxs(DialogFooter, { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: "Cancel" }), _jsx(Button, { onClick: createCroppedImage, children: "Set Profile Picture" })] })] }) }));
+};
+export default ImageCropper;

package/dist/misc/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/misc/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/misc/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAgB1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/misc/input.js

@@ -1,29 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 "@myrjfa/state/dist/lib/utils";
-function Input(_a) {
-    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
-    return (_jsx("input", __assign({ type: type, "data-slot": "input", className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
+function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", onWheel: (e) => e.currentTarget.blur(), className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", className), ...props }));
 }
 export { Input };

package/dist/misc/label.js

@@ -1,31 +1,8 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 LabelPrimitive from "@radix-ui/react-label";
 import { cn } from "@myrjfa/state/dist/lib/utils";
-function Label(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(LabelPrimitive.Root, __assign({ "data-slot": "label", className: cn("flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className) }, props)));
+function Label({ className, ...props }) {
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
 }
 export { Label };

package/dist/misc/line-carousel.js

@@ -1,15 +1,5 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function LineCarousel(_a) {
-    var skillsData = _a.skillsData;
-    var loopedSkills = __spreadArray(__spreadArray(__spreadArray([], skillsData, true), skillsData, true), skillsData, true);
-    return (_jsxs("section", { className: "relative w-full pt-10 pb-5 bg-background text-white", children: [_jsx("h2", { className: "text-2xl font-bold text-left mx-10 md:mx-15 lg:mx-25 tracking-tight text-foreground", children: "Popular Skills Offered" }), _jsx("p", { className: "text-muted-foreground mx-10 md:mx-15 lg:mx-25 mb-10", children: "Discover In-Demand Creative Skills for the Modern World." }), _jsxs("div", { className: "relative w-full overflow-hidden", children: [_jsx("div", { className: "absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background to-transparent z-10" }), _jsx("div", { className: "absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background to-transparent z-10" }), _jsx("div", { className: "flex animate-scroll items-center space-x-10", children: loopedSkills.map(function (item, i) { return (_jsxs("div", { className: "flex items-center space-x-3 px-5 text-lg", children: [_jsx(item.icon, { className: "w-6 h-6 text-foreground" }), _jsx("span", { className: "text-muted-foreground font-semibold", children: item.title })] }, i)); }) })] })] }));
+export default function LineCarousel({ skillsData }) {
+    const loopedSkills = [...skillsData, ...skillsData, ...skillsData];
+    return (_jsxs("section", { className: "relative w-full pt-10 pb-5 bg-background text-white", children: [_jsx("h2", { className: "text-2xl font-bold text-left mx-10 md:mx-15 lg:mx-25 tracking-tight text-foreground", children: "Popular Skills Offered" }), _jsx("p", { className: "text-muted-foreground mx-10 md:mx-15 lg:mx-25 mb-10", children: "Discover In-Demand Creative Skills for the Modern World." }), _jsxs("div", { className: "relative w-full overflow-hidden", children: [_jsx("div", { className: "absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background to-transparent z-10" }), _jsx("div", { className: "absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background to-transparent z-10" }), _jsx("div", { className: "flex animate-scroll items-center space-x-10", children: loopedSkills.map((item, i) => (_jsxs("div", { className: "flex items-center space-x-3 px-5 text-lg", children: [_jsx(item.icon, { className: "w-6 h-6 text-foreground" }), _jsx("span", { className: "text-muted-foreground font-semibold", children: item.title })] }, i))) })] })] }));
 }

package/dist/misc/multiImageUploader.d.ts

@@ -3,7 +3,8 @@ type multiImageUploaderType = {
     handleImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
     handleRemoveImage: (index: number) => void;
     message: string;
+    enableCompression?: boolean;
 };
-export default function MultiImageUploader({ previewImages, handleImageUpload, handleRemoveImage, message }: multiImageUploaderType): import("react/jsx-runtime").JSX.Element;
+export default function MultiImageUploader({ previewImages, handleImageUpload, handleRemoveImage, message, enableCompression }: multiImageUploaderType): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=multiImageUploader.d.ts.map

package/dist/misc/multiImageUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiImageUploader.d.ts","sourceRoot":"","sources":["../../src/misc/multiImageUploader.tsx"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC1B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAuDlI"}
+{"version":3,"file":"multiImageUploader.d.ts","sourceRoot":"","sources":["../../src/misc/multiImageUploader.tsx"],"names":[],"mappings":"AASA,KAAK,sBAAsB,GAAG;IAC1B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,iBAAwB,EAAE,EAAE,sBAAsB,2CAgF5J"}

package/dist/misc/multiImageUploader.js

@@ -5,7 +5,30 @@ import { Input } from "./input";
 import { Card, CardHeader, CardTitle, CardContent } from "./card";
 import { Trash2, Upload } from "lucide-react";
 import Image from "next/image";
-export default function MultiImageUploader(_a) {
-    var previewImages = _a.previewImages, handleImageUpload = _a.handleImageUpload, handleRemoveImage = _a.handleRemoveImage, message = _a.message;
-    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { children: ["Images", _jsx(FormDescription, { children: message })] }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4", children: [previewImages.map(function (image, index) { return (_jsxs("div", { className: "relative rounded-lg overflow-hidden h-40", children: [_jsx(Image, { id: "image-" + index, src: image, alt: "Opportunity image ".concat(index + 1), fill: true, className: "object-cover" }), _jsx(Button, { type: "button", onClick: function () { return handleRemoveImage(index); }, className: "absolute top-2 right-2 bg-white/80 rounded-full hover:bg-white", children: _jsx(Trash2, { className: "text-red-500" }) })] }, index)); }), _jsxs("div", { className: "flex flex-col items-center justify-center w-full space-y-4", children: [_jsx("label", { htmlFor: "image", className: "cursor-pointer w-full", children: _jsxs("div", { className: "border-2 border-dashed border-slate-300 rounded-lg p-6 flex flex-col items-center justify-center text-slate-500 hover:border-primary hover:text-primary transition-colors", children: [_jsx(Upload, { className: "h-12 w-12 text-gray-500 mb-4" }), _jsx("span", { className: "text-lg font-semibold mb-2", children: "Upload Image" }), _jsx("span", { className: "text-sm", children: "Click or drag to upload" })] }) }), _jsx(Input, { id: "image", type: "file", accept: "image/*", multiple: true, onChange: handleImageUpload, placeholder: "Upload Image", className: "hidden" })] })] }), _jsx(FormDescription, { children: "Images should be in Valid format. Maximum file size: 5MB." })] })] }));
+import { showAlert } from "./alertdialogclaude";
+import { compressImage } from "./image-compressor";
+export default function MultiImageUploader({ previewImages, handleImageUpload, handleRemoveImage, message, enableCompression = true }) {
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { children: ["Images", _jsx(FormDescription, { children: message })] }) }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4", children: [previewImages.map((image, index) => (_jsxs("div", { className: "relative rounded-lg overflow-hidden h-40", children: [_jsx(Image, { id: "image-" + index, src: image, alt: `Opportunity image ${index + 1}`, fill: true, className: "object-cover" }), _jsx(Button, { type: "button", onClick: () => handleRemoveImage(index), className: "absolute top-2 right-2 bg-white/80 rounded-full hover:bg-white", children: _jsx(Trash2, { className: "text-red-500" }) })] }, index))), _jsxs("div", { className: "flex flex-col items-center justify-center w-full space-y-4", children: [_jsx("label", { htmlFor: "image", className: "cursor-pointer w-full", children: _jsxs("div", { className: "border-2 border-dashed border-slate-300 rounded-lg p-6 flex flex-col items-center justify-center text-slate-500 hover:border-primary hover:text-primary transition-colors", children: [_jsx(Upload, { className: "h-12 w-12 text-gray-500 mb-4" }), _jsx("span", { className: "text-lg font-semibold mb-2", children: "Upload Image" }), _jsx("span", { className: "text-sm", children: "Click or drag to upload" })] }) }), _jsx(Input, { id: "image", type: "file", accept: "image/*", multiple: true, onChange: async (e) => {
+                                            const files = Array.from(e.target.files || []);
+                                            const allowedType = 'image/';
+                                            const invalid = files.filter(f => !f.type.includes(allowedType));
+                                            if (invalid.length > 0) {
+                                                showAlert(`Invalid file type(s): ${invalid.map(f => f.name).join(', ')}. Only Images are allowed.`);
+                                                e.target.value = '';
+                                                return;
+                                            }
+                                            if (enableCompression && files.length > 0) {
+                                                try {
+                                                    const compressed = await Promise.all(files.map(f => compressImage(f)));
+                                                    // Rebuild FileList via DataTransfer
+                                                    const dt = new DataTransfer();
+                                                    compressed.forEach(f => dt.items.add(f));
+                                                    e.target.files = dt.files;
+                                                }
+                                                catch (_a) {
+                                                    // compression failed — proceed with originals
+                                                }
+                                            }
+                                            handleImageUpload(e);
+                                        }, placeholder: "Upload Image", className: "hidden" })] })] }), _jsx(FormDescription, { children: "Images should be in Valid format. Maximum file size: 5MB." })] })] }));
 }

package/dist/misc/newsLetter.js

@@ -1,54 +1,7 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { subscribeToNewsLetter } from "@myrjfa/state/dist/lib/actions";
+import { subscribeToNewsLetter } from "@myrjfa/state/dist/lib/actions/actions";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
@@ -57,45 +10,32 @@ import { showAlert } from "./alertdialogclaude";
 import { Button } from "./button";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "./form";
 import { Input } from "./input";
-var formSchema = z.object({
+const formSchema = z.object({
     email: z.string().email("Please enter a valid email address"),
 });
-var NewsletterSubscribe = function () {
-    var pathname = usePathname();
-    var form = useForm({
+const NewsletterSubscribe = () => {
+    const pathname = usePathname();
+    const form = useForm({
         resolver: zodResolver(formSchema),
         defaultValues: {
             email: "",
         },
     });
-    useEffect(function () {
+    useEffect(() => {
         form.reset();
     }, [pathname]);
-    var isSubmitting = form.formState.isSubmitting;
-    var onSubmit = function (values) { return __awaiter(void 0, void 0, void 0, function () {
-        var res;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, subscribeToNewsLetter(values.email)];
-                case 1:
-                    res = _a.sent();
-                    if (!(res === null || res === void 0 ? void 0 : res.error)) return [3 /*break*/, 2];
-                    form.setError("email", { message: res.error });
-                    return [3 /*break*/, 4];
-                case 2:
-                    form.reset();
-                    form.setValue("email", "");
-                    return [4 /*yield*/, showAlert(res.message || "Subscribed successfully!")];
-                case 3:
-                    _a.sent();
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (_jsx(Form, __assign({}, form, { children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), noValidate: true, className: "mt-4 flex flex-col sm:flex-row gap-3", children: [_jsx(FormField, { control: form.control, name: "email", render: function (_a) {
-                        var field = _a.field;
-                        return (_jsxs(FormItem, { className: "flex-1", children: [_jsx(FormControl, { children: _jsx(Input, __assign({ placeholder: "Your email address", type: "email", disabled: isSubmitting }, field)) }), _jsx(FormMessage, {})] }));
-                    } }), _jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting ? "Subscribing..." : "Subscribe" })] }) })));
+    const { isSubmitting } = form.formState;
+    const onSubmit = async (values) => {
+        const res = await subscribeToNewsLetter(values.email);
+        if (res === null || res === void 0 ? void 0 : res.error) {
+            form.setError("email", { message: res.error });
+        }
+        else {
+            form.reset();
+            form.setValue("email", "");
+            await showAlert(res.message || "Subscribed successfully!");
+        }
+    };
+    return (_jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), noValidate: true, className: "mt-4 flex flex-col sm:flex-row gap-3", children: [_jsx(FormField, { control: form.control, name: "email", render: ({ field }) => (_jsxs(FormItem, { className: "flex-1", children: [_jsx(FormControl, { children: _jsx(Input, { placeholder: "Your email address", type: "email", disabled: isSubmitting, ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting ? "Subscribing..." : "Subscribe" })] }) }));
 };
 export default NewsletterSubscribe;

package/dist/misc/notification.d.ts

@@ -1,5 +1,4 @@
-export declare function NotificationBell({ id, navItemColor }: {
-    id: string | null;
+export declare function NotificationBell({ navItemColor }: {
     navItemColor: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function MobileNotificationBell(): import("react/jsx-runtime").JSX.Element;

package/dist/misc/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/misc/notification.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,2CA8GjG;AAED,wBAAgB,sBAAsB,4CAerC"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/misc/notification.tsx"],"names":[],"mappings":"AAkDA,wBAAgB,gBAAgB,CAAC,EAAE,YAAY,EAAE,EAAE;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,2CA8I1E;AAED,wBAAgB,sBAAsB,4CAUrC"}