ikoncomponents 1.6.9 → 1.7.0

package/README.md

@@ -1,36 +1,36 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

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

@@ -1,15 +1,14 @@
-export interface FileUploaderProps {
+export declare const convertFileToObject: (file: File) => Promise<any>;
+interface FileUploaderProps {
     label?: string;
     isDrag?: boolean;
-    onFileSelect: (fileObj: any) => Promise<any> | void;
+    fileInput?: boolean;
+    isMultiple?: boolean;
+    tooltipContent?: string;
+    fileNamePlaceholder?: string;
+    showPreview?: boolean;
+    onFileSelect: (files: any[]) => Promise<any> | void;
 }
-export declare const convertFileToObject: (file: File) => Promise<{
-    message: string;
-    fileName: string;
-    size: number;
-    type: string;
-    lastModified: number;
-    base64: string;
-}>;
-export declare function FileUploader({ label, isDrag, onFileSelect, }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
-export declare function getImageFromObject(obj: any): string;
+export default function FileUploader({ label, isDrag, fileInput, isMultiple, tooltipContent, fileNamePlaceholder, showPreview, onFileSelect, }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function getFileUrlFromObject(obj: any): string;
+export {};

package/dist/ikoncomponents/fileUpload/index.js

@@ -1,69 +1,127 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { UploadCloud, FileUp } from "lucide-react";
-// --- Helper: Convert File to Object with Base64 ---
-export const convertFileToObject = async (file) => {
-    const arrayBuffer = await file.arrayBuffer();
-    const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
-    return {
-        message: "File processed successfully",
-        fileName: file.name,
-        size: file.size,
-        type: file.type,
-        lastModified: file.lastModified,
-        base64: base64,
-    };
-};
-export function FileUploader({ label = "Upload File", isDrag = false, onFileSelect, }) {
-    const [isDragging, setIsDragging] = useState(false);
-    const handleFile = async (file) => {
-        if (!file)
-            return;
-        const fileObj = await convertFileToObject(file); // convert to object
-        await onFileSelect(fileObj); // pass object to parent
-    };
-    // ---- DRAG HANDLERS ----
-    const handleDrop = (e) => {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { UploadCloud, FileUp, Upload, X } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+import { Input } from "@/shadcn/input";
+import { IconButtonWithTooltip } from "../buttons";
+/* ----------------------------------------------------
+   SAFE Base64 Converter
+---------------------------------------------------- */
+export const convertFileToObject = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
         var _a;
-        if (!isDrag)
-            return;
-        e.preventDefault();
-        setIsDragging(false);
-        const file = (_a = e.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file)
-            handleFile(file);
+        const result = reader.result;
+        const base64 = result.split(",")[1];
+        const nameParts = file.name.split(".");
+        const ext = nameParts.length >= 2 ? (_a = nameParts.pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase() : "";
+        const fileType = file.type || (ext ? `${ext}` : "application/octet-stream");
+        resolve({
+            resourceId: uuidv4(),
+            message: "File processed successfully",
+            fileName: file.name,
+            fileSize: file.size,
+            fileType, // ✅ FIXED
+            base64,
+        });
     };
-    const handleDragOver = (e) => {
-        if (!isDrag)
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+});
+/* ----------------------------------------------------
+   FileInput UI (Text + Button Input)
+---------------------------------------------------- */
+function FileInputUI({ tooltipContent, fileNames, fileNamePlaceholder, onFileNamesChange, onFileSelect, isMultiple, }) {
+    const inputRef = useRef(null);
+    const handleChange = async (e) => {
+        const files = e.target.files;
+        if (!(files === null || files === void 0 ? void 0 : files.length))
             return;
-        e.preventDefault();
-        setIsDragging(true);
+        const fileObjects = await Promise.all(Array.from(files).map((f) => convertFileToObject(f)));
+        const names = fileObjects.map((f) => f.fileName).join(", ");
+        onFileNamesChange === null || onFileNamesChange === void 0 ? void 0 : onFileNamesChange(names);
+        onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(fileObjects);
     };
-    const handleDragLeave = () => {
-        if (!isDrag)
-            return;
-        setIsDragging(false);
+    const filesCount = fileNames ? fileNames.split(", ").length : 0;
+    return (_jsxs("div", { className: "flex w-full", children: [_jsx(Input, { ref: inputRef, type: "file", multiple: isMultiple, className: "hidden", onChange: handleChange }), _jsx(Input, { className: "rounded-e-none", placeholder: fileNamePlaceholder, value: filesCount === 0
+                    ? ""
+                    : filesCount === 1
+                        ? fileNames
+                        : `${filesCount} files selected`, readOnly: true }), _jsx(IconButtonWithTooltip, { tooltipContent: tooltipContent || "Browse File", onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: "border-s-0 rounded-s-none", children: _jsx(Upload, {}) })] }));
+}
+/* ----------------------------------------------------
+   Image Preview Component
+---------------------------------------------------- */
+function ImagePreview({ previews, onRemove, }) {
+    if (!previews.length)
+        return null;
+    return (_jsx("div", { className: "flex flex-wrap gap-2 mt-2 justify-center", children: previews.map((preview, i) => (_jsxs("div", { className: "relative group", children: [_jsx("img", { src: preview.url, alt: preview.name, className: "h-16 w-16 object-cover rounded-md border p-1" }), onRemove && (_jsx("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        onRemove(i);
+                    }, className: "absolute -top-1.5 -right-1.5 bg-red-500 text-white rounded-full w-4 h-4 \r\n                         flex items-center justify-center opacity-0 group-hover:opacity-100 \r\n                         transition-opacity shadow-sm", children: _jsx(X, { className: "w-2.5 h-2.5" }) })), _jsx("p", { className: "text-xs text-gray-500 text-center mt-0.5 max-w-[64px] truncate", children: preview.name })] }, i))) }));
+}
+export default function FileUploader({ label = "Upload File", isDrag = false, fileInput = false, isMultiple = false, tooltipContent, fileNamePlaceholder = "Choose files...", showPreview = true, onFileSelect, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [fileNames, setFileNames] = useState("");
+    const [previews, setPreviews] = useState([]);
+    const filesCount = fileNames ? fileNames.split(", ").length : 0;
+    /* ------------ GENERATE PREVIEWS ------------ */
+    const generatePreviews = (files) => {
+        previews.forEach((p) => URL.revokeObjectURL(p.url));
+        const newPreviews = files
+            .filter((f) => f.type.startsWith("image/"))
+            .map((f) => ({ url: URL.createObjectURL(f), name: f.name }));
+        setPreviews(newPreviews);
     };
-    const handleInputChange = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file)
-            handleFile(file);
+    /* ------------ REMOVE A SINGLE PREVIEW ------------ */
+    const handleRemovePreview = (index) => {
+        URL.revokeObjectURL(previews[index].url);
+        setPreviews((prev) => prev.filter((_, i) => i !== index));
+    };
+    /* ------------ COMMON FILE HANDLER ------------ */
+    const handleFiles = async (files) => {
+        const fileArray = Array.from(files);
+        const fileList = isMultiple ? fileArray : [fileArray[0]];
+        const fileObjects = await Promise.all(fileList.map((file) => convertFileToObject(file)));
+        setFileNames(fileObjects.map((f) => f.fileName).join(", "));
+        if (showPreview)
+            generatePreviews(fileList);
+        onFileSelect(fileObjects);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsx("label", { className: "text-sm font-medium", children: label }), _jsx("input", { type: "file", id: "fileInput", className: "hidden", onChange: handleInputChange }), isDrag ? (_jsx("div", { className: `border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition
-            ${isDragging ? "border-blue-600 bg-blue-50" : "border-gray-300"}
-          `, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => { var _a; return (_a = document.getElementById("fileInput")) === null || _a === void 0 ? void 0 : _a.click(); }, children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx(UploadCloud, { className: "w-10 h-10 text-blue-600" }), _jsxs("p", { className: "text-gray-600", children: ["Drag & drop your file here or", " ", _jsx("span", { className: "text-blue-600 underline", children: "browse" })] })] }) })) : (
-            // ----- SIMPLE UPLOAD BOX -----
-            _jsxs("div", { className: "border rounded-lg p-4 flex flex-col items-center gap-2 cursor-pointer text-center", onClick: () => { var _a; return (_a = document.getElementById("fileInput")) === null || _a === void 0 ? void 0 : _a.click(); }, children: [_jsx(FileUp, { className: "w-8 h-8 text-blue-600" }), _jsx("span", { className: "text-blue-600 underline", children: "Browse File" })] }))] }));
+    /* ------------ DRAG HANDLERS ------------ */
+    const dragHandlers = isDrag
+        ? {
+            onDragOver: (e) => {
+                e.preventDefault();
+                setIsDragging(true);
+            },
+            onDragLeave: () => setIsDragging(false),
+            onDrop: (e) => {
+                e.preventDefault();
+                setIsDragging(false);
+                if (e.dataTransfer.files.length) {
+                    handleFiles(e.dataTransfer.files);
+                }
+            },
+        }
+        : {};
+    return (_jsxs("div", Object.assign({}, dragHandlers, { className: `flex flex-col ${fileInput ? "items-start text-left" : "items-center text-center"} justify-center gap-2 cursor-pointer px-4 pb-4 rounded-lg transition ${fileInput
+            ? ""
+            : `border-2 border-dashed ${isDragging ? "border-blue-600 bg-blue-50" : "border-gray-300"}`}`, children: [_jsx("label", { className: "text-md mt-4 font-bold", children: label }), fileInput && (_jsxs(_Fragment, { children: [_jsx(FileInputUI, { fileNames: fileNames, fileNamePlaceholder: fileNamePlaceholder, tooltipContent: tooltipContent, onFileNamesChange: setFileNames, onFileSelect: onFileSelect, isMultiple: isMultiple }), isDrag && (_jsx("p", { className: "text-sm text-gray-500", children: isDragging ? "Drop files here..." : "or drag & drop files here" })), filesCount > 1 && (_jsxs("p", { className: "text-sm font-medium", children: [filesCount, " files selected"] }))] })), !fileInput && (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", id: "fileInput", className: "hidden", multiple: isMultiple, onChange: (e) => e.target.files && handleFiles(e.target.files) }), isDrag ? (_jsxs("div", { className: "mt-3 p-6 w-full text-center cursor-pointer", onClick: () => { var _a; return (_a = document.getElementById("fileInput")) === null || _a === void 0 ? void 0 : _a.click(); }, children: [filesCount === 0 && (_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx(UploadCloud, { className: "w-10 h-10 text-blue-600" }), _jsxs("p", { className: "text-gray-600", children: ["Drag & drop ", isMultiple ? "files" : "a file", " or", " ", _jsx("span", { className: "text-blue-600 underline", children: "browse" })] })] })), filesCount > 0 && (_jsx("p", { className: "mt-3 text-sm font-medium", children: filesCount === 1
+                                    ? fileNames
+                                    : `${filesCount} files selected` }))] })) : (_jsxs("div", { className: "border rounded-lg p-4 flex flex-col items-center gap-2 cursor-pointer text-center", onClick: () => { var _a; return (_a = document.getElementById("fileInput")) === null || _a === void 0 ? void 0 : _a.click(); }, children: [filesCount === 0 && (_jsxs(_Fragment, { children: [_jsx(FileUp, { className: "w-8 h-8 text-blue-600" }), _jsx("span", { className: "text-blue-600 underline", children: isMultiple ? "Browse Files" : "Browse File" })] })), filesCount > 0 && (_jsx("p", { className: "text-sm font-medium", children: filesCount === 1
+                                    ? fileNames
+                                    : `${filesCount} files selected` }))] })), showPreview && (_jsx(ImagePreview, { previews: previews, onRemove: handleRemovePreview }))] }))] })));
 }
-// --- Helper Function: Recreate Image from File Object ---
-export function getImageFromObject(obj) {
+/* ----------------------------------------------------
+   Convert Base64 back to Blob URL
+---------------------------------------------------- */
+export function getFileUrlFromObject(obj) {
     const byteCharacters = atob(obj.base64);
-    const byteNumbers = new Array(byteCharacters.length)
-        .fill(0)
-        .map((_, i) => byteCharacters.charCodeAt(i));
-    const byteArray = new Uint8Array(byteNumbers);
-    const blob = new Blob([byteArray], { type: obj.type });
-    return URL.createObjectURL(blob); // usable in <img src="..." />
+    const byteNumbers = Array.from(byteCharacters).map((c) => c.charCodeAt(0));
+    const blob = new Blob([new Uint8Array(byteNumbers)], {
+        type: obj.resourceType,
+    });
+    return URL.createObjectURL(blob);
 }

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

@@ -0,0 +1,31 @@
+import React from "react";
+export declare const convertFileToObject: (file: File) => Promise<any>;
+export interface FileUploader2Ref {
+    /** Triggers the upload for already-selected files. Resolves when done. */
+    upload: () => Promise<void>;
+}
+export interface FileUploader2Props {
+    label?: string;
+    isDrag?: boolean;
+    onUploadComplete?: (response: any | any[]) => void;
+    imageUrl?: string;
+    fileInput?: boolean;
+    isMultiple?: boolean;
+    tooltipContent?: string;
+    fileNamePlaceholder?: string;
+    /** Called with the raw File objects before upload */
+    onFileSelect?: (files: File[]) => void;
+    /**
+     * Custom upload endpoint. When provided, files are POSTed as multipart/form-data
+     * and the full JSON response is passed to onUploadComplete.
+     * Falls back to uploadFilePublic() when omitted.
+     */
+    apiUrl?: string;
+    /**
+     * When true, the upload does NOT start automatically on file selection.
+     * Instead, call ref.upload() to trigger it manually.
+     */
+    manual?: boolean;
+}
+export declare const FileUploaderApi: React.ForwardRefExoticComponent<FileUploader2Props & React.RefAttributes<FileUploader2Ref>>;
+export declare function getFileUrlFromObject(obj: any): string;

package/dist/ikoncomponents/fileUploadApi/index.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useImperativeHandle, forwardRef } from "react";
+import { UploadCloud, FileUp, Upload } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+import { Input } from "@/shadcn/input";
+import { IconButtonWithTooltip } from "../buttons";
+import { uploadFilePublic } from "../../utils/api/file-upload copy";
+/* ----------------------------------------------------
+   SAFE Base64 Converter (kept for local preview use)
+---------------------------------------------------- */
+export const convertFileToObject = (file) => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+        const result = reader.result;
+        const base64 = result.split(",")[1];
+        resolve({
+            resourceId: uuidv4(),
+            message: "File processed successfully",
+            resourceName: file.name,
+            resourceSize: file.size,
+            resourceType: file.type,
+            base64,
+        });
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+});
+/* ----------------------------------------------------
+   FileInput UI (Text + Button Input)
+---------------------------------------------------- */
+function FileInputUI({ tooltipContent, fileNames, fileNamePlaceholder, onFileNamesChange, onFileSelect, isMultiple, inputId, }) {
+    const inputRef = useRef(null);
+    const handleChange = (e) => {
+        const files = e.target.files;
+        if (!(files === null || files === void 0 ? void 0 : files.length))
+            return;
+        const fileList = isMultiple ? Array.from(files) : [files[0]];
+        const names = fileList.map((f) => f.name).join(", ");
+        onFileNamesChange === null || onFileNamesChange === void 0 ? void 0 : onFileNamesChange(names);
+        onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(fileList);
+    };
+    const filesCount = fileNames ? fileNames.split(", ").length : 0;
+    return (_jsxs("div", { className: "flex w-full", children: [_jsx(Input, { ref: inputRef, type: "file", multiple: isMultiple, className: "hidden", onChange: handleChange, id: inputId }), _jsx(Input, { className: "rounded-e-none", placeholder: fileNamePlaceholder, value: filesCount === 0
+                    ? ""
+                    : filesCount === 1
+                        ? fileNames
+                        : `${filesCount} files selected`, readOnly: true }), _jsx(IconButtonWithTooltip, { tooltipContent: tooltipContent || "Browse File", onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: "border-s-0 rounded-s-none", children: _jsx(Upload, {}) })] }));
+}
+/* ----------------------------------------------------
+   Main FileUploader2 Component
+---------------------------------------------------- */
+export const FileUploaderApi = forwardRef(function FileUploaderApi({ label = "Upload File", isDrag = false, onUploadComplete, imageUrl, fileInput = false, isMultiple = false, tooltipContent, fileNamePlaceholder = "Choose files...", onFileSelect, apiUrl, manual = false, }, ref) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [previews, setPreviews] = useState([]);
+    const [fileNames, setFileNames] = useState("");
+    const [loading, setLoading] = useState(false);
+    // Holds files pending upload when manual=true
+    const pendingFilesRef = useRef([]);
+    const inputId = `fileInput-${label.replace(/\s+/g, "-").toLowerCase()}`;
+    const filesCount = fileNames ? fileNames.split(", ").length : 0;
+    /* ------------ UPLOAD EXECUTOR ------------ */
+    const executeUpload = async (fileList) => {
+        try {
+            setLoading(true);
+            const responses = await Promise.all(fileList.map((f) => {
+                if (apiUrl) {
+                    const formData = new FormData();
+                    formData.append("file", f);
+                    return fetch(apiUrl, { method: "POST", body: formData })
+                        .then((res) => {
+                        if (!res.ok)
+                            throw new Error(`Upload failed: ${res.statusText}`);
+                        return res.json();
+                    })
+                        .then((data) => data);
+                }
+                return uploadFilePublic(f);
+            }));
+            onUploadComplete === null || onUploadComplete === void 0 ? void 0 : onUploadComplete(isMultiple ? responses : responses[0]);
+        }
+        catch (err) {
+            console.error("Upload failed:", err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    /* ------------ EXPOSE upload() TO PARENT ------------ */
+    useImperativeHandle(ref, () => ({
+        upload: async () => {
+            if (!pendingFilesRef.current.length) {
+                console.warn("FileUploader2: no files selected to upload.");
+                return;
+            }
+            await executeUpload(pendingFilesRef.current);
+        },
+    }));
+    /* ------------ CORE FILE HANDLER ------------ */
+    const handleFiles = async (files) => {
+        const fileList = isMultiple ? files : [files[0]];
+        // Local previews for images
+        const newPreviews = fileList.map((f) => f.type.startsWith("image/") ? URL.createObjectURL(f) : "");
+        setPreviews(newPreviews.filter(Boolean));
+        setFileNames(fileList.map((f) => f.name).join(", "));
+        // Notify parent of raw files
+        onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(fileList);
+        if (manual) {
+            // Store files for later — upload() will consume them
+            pendingFilesRef.current = fileList;
+        }
+        else {
+            await executeUpload(fileList);
+        }
+    };
+    /* ------------ INPUT CHANGE ------------ */
+    const handleInputChange = (e) => {
+        const files = e.target.files;
+        if (files === null || files === void 0 ? void 0 : files.length)
+            handleFiles(Array.from(files));
+    };
+    /* ------------ DRAG HANDLERS ------------ */
+    const dragHandlers = isDrag
+        ? {
+            onDragOver: (e) => {
+                e.preventDefault();
+                setIsDragging(true);
+            },
+            onDragLeave: () => setIsDragging(false),
+            onDrop: (e) => {
+                e.preventDefault();
+                setIsDragging(false);
+                if (e.dataTransfer.files.length) {
+                    handleFiles(Array.from(e.dataTransfer.files));
+                }
+            },
+        }
+        : {};
+    /* ------------ DISPLAY PREVIEWS ------------ */
+    const displayPreviews = previews.length > 0 ? previews : imageUrl ? [imageUrl] : [];
+    return (_jsxs("div", Object.assign({}, dragHandlers, { className: `flex flex-col ${fileInput ? "items-start text-left" : "items-center text-center"} justify-center gap-2 cursor-pointer px-4 pb-4 rounded-lg transition ${fileInput
+            ? ""
+            : `border-2 border-dashed ${isDragging ? "border-blue-600 bg-blue-50" : "border-gray-300"}`}`, children: [_jsx("label", { className: "text-md mt-4 font-bold", children: label }), _jsx("input", { type: "file", id: inputId, className: "hidden", multiple: isMultiple, onChange: handleInputChange }), fileInput && (_jsxs(_Fragment, { children: [_jsx(FileInputUI, { fileNames: fileNames, fileNamePlaceholder: fileNamePlaceholder, tooltipContent: tooltipContent, onFileNamesChange: setFileNames, onFileSelect: (files) => handleFiles(files), isMultiple: isMultiple, inputId: `${inputId}-fileinput` }), isDrag && (_jsx("p", { className: "text-sm text-gray-500", children: isDragging ? "Drop files here..." : "or drag & drop files here" })), loading && (_jsx("p", { className: "text-sm text-blue-500 animate-pulse", children: "Uploading..." })), filesCount > 1 && !loading && (_jsxs("p", { className: "text-sm font-medium", children: [filesCount, " files selected"] }))] })), !fileInput && (_jsx(_Fragment, { children: isDrag ? (_jsxs("div", { className: "mt-3 p-6 w-full text-center cursor-pointer", onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.click(); }, children: [filesCount === 0 && !loading && (_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx(UploadCloud, { className: "w-10 h-10 text-blue-600" }), _jsxs("p", { className: "text-gray-600", children: ["Drag & drop ", isMultiple ? "files" : "a file", " or", " ", _jsx("span", { className: "text-blue-600 underline", children: "browse" })] })] })), loading && (_jsx("p", { className: "text-sm text-blue-500 animate-pulse", children: "Uploading..." })), filesCount > 0 && !loading && (_jsx("p", { className: "mt-3 text-sm font-medium", children: filesCount === 1
+                                ? fileNames
+                                : `${filesCount} files selected` }))] })) : (_jsxs("div", { className: "border rounded-lg p-4 flex flex-col items-center gap-2 cursor-pointer text-center", onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.click(); }, children: [filesCount === 0 && !loading && (_jsxs(_Fragment, { children: [_jsx(FileUp, { className: "w-8 h-8 text-blue-600" }), _jsx("span", { className: "text-blue-600 underline", children: isMultiple ? "Browse Files" : "Browse File" })] })), loading && (_jsx("p", { className: "text-sm text-blue-500 animate-pulse", children: "Uploading..." })), filesCount > 0 && !loading && (_jsx("p", { className: "text-sm font-medium", children: filesCount === 1
+                                ? fileNames
+                                : `${filesCount} files selected` }))] })) })), !fileInput && displayPreviews.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-1 justify-center", children: displayPreviews.map((src, i) => (_jsx("img", { src: src, alt: `preview-${i}`, className: "h-10 object-cover rounded-md border p-1" }, i))) }))] })));
+});
+/* ----------------------------------------------------
+   Convert Base64 back to Blob URL (utility, kept for compat)
+---------------------------------------------------- */
+export function getFileUrlFromObject(obj) {
+    const byteCharacters = atob(obj.base64);
+    const byteNumbers = Array.from(byteCharacters).map((c) => c.charCodeAt(0));
+    const blob = new Blob([new Uint8Array(byteNumbers)], {
+        type: obj.resourceType,
+    });
+    return URL.createObjectURL(blob);
+}

package/dist/ikoncomponents/main-layout/nav-main.js

@@ -5,13 +5,15 @@ import { ChevronRight } from "lucide-react";
 import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from "../../shadcn/sidebar";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../shadcn/collapsible";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useSidebarNav } from "./SidebarNavContext";
 export function NavMain() {
     const { navItems } = useSidebarNav();
+    const pathname = usePathname();
     // if (!navItems || navItems.length === 0) {
     //   return null;
     // }
-    return (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: navItems.map((item) => item.items && item.items.length > 0 ? (_jsx(Collapsible, { asChild: true, defaultOpen: item.isActive, className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: item.title, children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, children: _jsx(Link, { href: subItem.url, children: _jsx("span", { children: subItem.title }) }) }) }, subItem.title))) }) })] }) }, item.title)) : (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, children: _jsxs(Link, { href: item.url, className: "flex items-center gap-2 w-full", children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }) }, item.title))) }) }));
+    return (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: navItems.map((item) => item.items && item.items.length > 0 ? (_jsx(Collapsible, { asChild: true, defaultOpen: item.isActive || item.items.some(sub => pathname.startsWith(sub.url)), className: "group/collapsible", children: _jsxs(SidebarMenuItem, { children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { tooltip: item.title, isActive: pathname.startsWith(item.url) || item.items.some(sub => pathname.startsWith(sub.url)), children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { asChild: true, isActive: pathname === subItem.url || pathname.startsWith(`${subItem.url}/`), children: _jsx(Link, { href: subItem.url, children: _jsx("span", { children: subItem.title }) }) }) }, subItem.title))) }) })] }) }, item.title)) : (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, tooltip: item.title, isActive: pathname === item.url || pathname.startsWith(`${item.url}/`), children: _jsxs(Link, { href: item.url, className: "flex items-center gap-2 w-full", children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title })] }) }) }, item.title))) }) }));
 }
 // Helper component to set nav items from pages
 export function RenderSidebarNav({ items, sidebarHeader, sidebarFooter }) {

package/dist/index.d.ts

@@ -53,8 +53,6 @@ export type { ComboBoxInputProps, ComboboxItemProps, } from "./ikoncomponents/co
 export { DataTableColumnFilter } from "./ikoncomponents/data-table/datatable-column-filter";
 export { DataTableFacetedFilter } from "./ikoncomponents/data-table/datatable-faceted-filter";
 export { DataTableFilterMenu } from "./ikoncomponents/data-table/datatable-filter-menu";
-export { convertFileToObject, FileUploader, getImageFromObject, } from "./ikoncomponents/fileUpload";
-export type { FileUploaderProps } from "./ikoncomponents/fileUpload";
 export { DataTablePagination } from "./ikoncomponents/data-table/datatable-pagination";
 export { DataTableToolbar } from "./ikoncomponents/data-table/datatable-toolbar";
 export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
@@ -129,7 +127,6 @@ export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/n
 export type { ImageFormProps } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
 export { WorkInProgress } from "./ikoncomponents/work-in-progress";
 export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
-export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
 export { ThemeProvider } from "./utils/theme-provider";
 export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
 export { FontProvider, useFont } from "./utils/font-provider";
@@ -140,3 +137,11 @@ export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } fr
 export type { TokenResponse } from "./utils/token-management/types";
 export { useIsMobile } from "./hooks/use-mobile";
 export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
+export { FileUploaderApi } from "./ikoncomponents/fileUploadApi";
+export type { FileUploader2Ref, FileUploader2Props } from "./ikoncomponents/fileUploadApi";
+export { fetchFileAsBase64 } from "./utils/api/file-upload copy/index";
+export { downloadFileByResourceId } from "./utils/api/file-upload copy/index";
+export { fetchImagePreview } from "./utils/api/file-upload copy/index";
+export { convertFileToObject } from "./ikoncomponents/fileUpload";
+export { getFileUrlFromObject } from "./ikoncomponents/fileUpload";
+export { default as FileUploader } from "./ikoncomponents/fileUpload";

package/dist/index.js

@@ -50,7 +50,6 @@ export { ComboboxInput } from "./ikoncomponents/combobox-input";
 export { DataTableColumnFilter } from "./ikoncomponents/data-table/datatable-column-filter";
 export { DataTableFacetedFilter } from "./ikoncomponents/data-table/datatable-faceted-filter";
 export { DataTableFilterMenu } from "./ikoncomponents/data-table/datatable-filter-menu";
-export { convertFileToObject, FileUploader, getImageFromObject, } from "./ikoncomponents/fileUpload";
 export { DataTablePagination } from "./ikoncomponents/data-table/datatable-pagination";
 export { DataTableToolbar } from "./ikoncomponents/data-table/datatable-toolbar";
 export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
@@ -108,7 +107,7 @@ export { NewCropperImg } from "./ikoncomponents/image-cropper-upload/components/
 export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
 export { WorkInProgress } from "./ikoncomponents/work-in-progress";
 export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
-export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
+// export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
 export { ThemeProvider } from "./utils/theme-provider";
 export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
 export { FontProvider, useFont } from "./utils/font-provider";
@@ -117,3 +116,10 @@ export { setCookieSession, getCookieSession, clearCookieSession, clearAllCookieS
 export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } from "./utils/token-management";
 export { useIsMobile } from "./hooks/use-mobile";
 export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
+export { FileUploaderApi } from "./ikoncomponents/fileUploadApi";
+export { fetchFileAsBase64 } from "./utils/api/file-upload copy/index";
+export { downloadFileByResourceId } from "./utils/api/file-upload copy/index";
+export { fetchImagePreview } from "./utils/api/file-upload copy/index";
+export { convertFileToObject } from "./ikoncomponents/fileUpload";
+export { getFileUrlFromObject } from "./ikoncomponents/fileUpload";
+export { default as FileUploader } from "./ikoncomponents/fileUpload";