ikoncomponents 1.6.9 → 1.7.1

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";
@@ -140,3 +138,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";
@@ -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";

package/dist/styles.css

@@ -273,6 +273,9 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .-top-1\.5 {
+    top: calc(var(--spacing) * -1.5);
+  }
   .-top-12 {
     top: calc(var(--spacing) * -12);
   }
@@ -303,6 +306,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-1\.5 {
+    right: calc(var(--spacing) * -1.5);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -444,6 +450,9 @@
   .my-auto {
     margin-block: auto;
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -686,6 +695,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
@@ -845,6 +857,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -908,6 +923,9 @@
   .max-w-20 {
     max-width: calc(var(--spacing) * 20);
   }
+  .max-w-\[64px\] {
+    max-width: 64px;
+  }
   .max-w-\[120px\] {
     max-width: 120px;
   }
@@ -1661,6 +1679,9 @@
       background-color: color-mix(in oklab, var(--primary) 10%, transparent);
     }
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-secondary {
     background-color: var(--secondary);
   }
@@ -2363,6 +2384,13 @@
       opacity: 100%;
     }
   }
+  .group-hover\:opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):hover *) {
       @media (hover: hover) {

package/dist/utils/api/file-upload copy/index.d.ts

@@ -0,0 +1,13 @@
+export declare const uploadFilePublic: (file: File) => Promise<any>;
+export declare const fetchImagePreview: (resourceId: string) => Promise<string>;
+export declare const fileUpload: (fileObjArray: Array<{
+    fileName: string;
+    type: string;
+    base64: string;
+}>) => Promise<any>;
+export declare const downloadFileByResourceId: (resourceId: string) => Promise<void>;
+export declare const fetchFileAsBase64: (resourceId: string) => Promise<{
+    base64: string;
+    fileSize: number;
+    fileType: string;
+}>;

package/dist/utils/api/file-upload copy/index.js

@@ -0,0 +1,120 @@
+import { getValidAccessToken } from "@/utils/token-management";
+const IKON_BASE_API_URL = "https://ikoncloud-dev.keross.com/ikon-api";
+export const uploadFilePublic = async (file) => {
+    const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
+    const formData = new FormData();
+    formData.append("file", file);
+    const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/upload/public`, {
+        method: "POST",
+        headers: Object.assign({}, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
+        body: formData,
+    });
+    if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Upload failed: ${errorText}`);
+    }
+    const data = await response.json();
+    if (data.files && data.files.length > 0) {
+        //just return the 1st resourceId
+        return data;
+    }
+    throw new Error("No files returned from upload");
+};
+export const fetchImagePreview = async (resourceId) => {
+    const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
+    const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/download/public/${resourceId}`, {
+        method: "GET",
+        headers: {
+            "Authorization": `Bearer ${accessToken}`
+        }
+    });
+    if (!response.ok)
+        throw new Error("Failed to load image");
+    // Convert binary response to a temporary URL
+    const imageBlob = await response.blob();
+    return URL.createObjectURL(imageBlob);
+};
+export const fileUpload = async (fileObjArray) => {
+    try {
+        const accessToken = await getValidAccessToken(process.env.IKON_API_URL || "");
+        console.log("Uploading files:", fileObjArray);
+        const response = await fetch(`${process.env.SALES_CRM_API_URL}/api/upload-base64`, {
+            method: "POST",
+            headers: Object.assign({ "Content-Type": "application/json" }, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
+            body: JSON.stringify({ files: fileObjArray }), // send array
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Upload failed: ${errorText}`);
+        }
+        const data = await response.json();
+        console.log("Server response:", data);
+        return data;
+    }
+    catch (err) {
+        console.error("File upload error:", err);
+        throw err;
+    }
+};
+export const downloadFileByResourceId = async (resourceId) => {
+    const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
+    const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/download/public/${resourceId}`, {
+        method: "GET",
+        headers: Object.assign({}, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
+    });
+    if (!response.ok) {
+        throw new Error("Failed to download file");
+    }
+    const blob = await response.blob();
+    const contentDisposition = response.headers.get("Content-Disposition");
+    let fileName = "downloaded-file";
+    if (contentDisposition) {
+        const match = contentDisposition.match(/filename="(.+)"/);
+        if (match)
+            fileName = match[1];
+    }
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    // cleanup
+    a.remove();
+    window.URL.revokeObjectURL(url);
+};
+export const fetchFileAsBase64 = async (resourceId) => {
+    const accessToken = await getValidAccessToken(IKON_BASE_API_URL || "");
+    const response = await fetch(`${IKON_BASE_API_URL}/platform/file-resource/download/public/${resourceId}`, {
+        method: "GET",
+        headers: Object.assign({}, (accessToken ? { Authorization: `Bearer ${accessToken}` } : {})),
+    });
+    if (!response.ok) {
+        throw new Error("Failed to fetch file");
+    }
+    const blob = await response.blob();
+    // ✅ Convert blob → base64
+    const base64 = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const result = reader.result;
+            const base64String = result.split(",")[1]; // remove data:*/*;base64,
+            resolve(base64String);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+    // ✅ Extract filename (if available)
+    const contentDisposition = response.headers.get("Content-Disposition");
+    let fileName = "unknown";
+    if (contentDisposition) {
+        const match = contentDisposition.match(/filename="(.+)"/);
+        if (match)
+            fileName = match[1];
+    }
+    return {
+        base64,
+        fileSize: blob.size,
+        fileType: blob.type,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikoncomponents",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "css": "dist/styles.css",
@@ -74,6 +74,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "tap": "^21.5.0",
+    "use-debounce": "^10.1.1",
     "uuid": "^13.0.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",

package/dist/ikoncomponents/table/component/DataTable.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-export interface ColumnDef<T> {
-    header: string | (() => React.ReactNode);
-    accessorKey?: keyof T;
-    cell?: (row: T) => React.ReactNode;
-}
-interface DataTableProps<T> {
-    data: T[];
-    columns: ColumnDef<T>[];
-    keyExtractor: (row: T) => string | number;
-    onRowClick?: (row: T) => void;
-}
-export declare function DataTable<T>({ data, columns, keyExtractor, onRowClick }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ikoncomponents/table/component/DataTable.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/shadcn/table";
-import { Table } from "lucide-react";
-export function DataTable({ data, columns, keyExtractor, onRowClick }) {
-    return (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "bg-muted border-b border-border", children: columns.map((col, index) => (_jsx(TableHead, { className: "font-semibold text-muted-foreground", children: typeof col.header === "function" ? col.header() : col.header }, index))) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (data.map((row) => (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(row), className: `hover:bg-muted/50 transition-colors border-b border-border ${onRowClick ? "cursor-pointer" : ""}`, children: columns.map((col, colIndex) => (_jsx(TableCell, { className: colIndex === 0 ? "font-medium" : "", children: col.cell
-                                ? col.cell(row)
-                                : col.accessorKey
-                                    ? String(row[col.accessorKey] || "N/A")
-                                    : null }, colIndex))) }, keyExtractor(onRowClick ? row : row))))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
-}

package/dist/ikoncomponents/table/component/DataTablePageSize.d.ts

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

package/dist/ikoncomponents/table/component/DataTablePageSize.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-export function DataTablePageSize() {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const currentSize = searchParams.get("size") || "10";
-    const handleSizeChange = (e) => {
-        const params = new URLSearchParams(searchParams.toString());
-        params.set("size", e.target.value);
-        params.set("page", "1");
-        router.push(`${pathname}?${params.toString()}`);
-    };
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }), _jsxs("select", { className: "h-9 rounded-md border border-border bg-background text-foreground px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary", value: currentSize, onChange: handleSizeChange, children: [_jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "20", children: "20" }), _jsx("option", { value: "50", children: "50" }), _jsx("option", { value: "100", children: "100" })] })] }));
-}

package/dist/ikoncomponents/table/component/DataTablePagination.d.ts

@@ -1,6 +0,0 @@
-interface PaginationProps {
-    totalPages: number;
-    currentPage: number;
-}
-export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ikoncomponents/table/component/DataTablePagination.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-export function DataTablePagination({ totalPages, currentPage }) {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const handlePageChange = (newPage) => {
-        const params = new URLSearchParams(searchParams.toString());
-        params.set("page", newPage.toString());
-        router.push(`${pathname}?${params.toString()}`);
-    };
-    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages, 1) })] }), _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
-}

package/dist/ikoncomponents/table/component/DataTableSearch.d.ts

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

package/dist/ikoncomponents/table/component/DataTableSearch.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { useState, useEffect } from "react";
-import { useDebounce } from "use-debounce";
-import { Search } from "lucide-react";
-export function DataTableSearch() {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
-    const [debouncedSearch] = useDebounce(searchTerm, 500);
-    useEffect(() => {
-        const params = new URLSearchParams(searchParams.toString());
-        if (debouncedSearch) {
-            params.set("search", debouncedSearch);
-        }
-        else {
-            params.delete("search");
-        }
-        if (params.get("search") !== searchParams.get("search")) {
-            params.set("page", "1");
-            router.push(`${pathname}?${params.toString()}`);
-        }
-    }, [debouncedSearch, pathname, router, searchParams]);
-    return (_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
-}