@skalfa/skalfa-component 1.0.0 → 1.0.3

package/dist/supervision/FormSupervision.component.js

@@ -6,7 +6,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const InputCheckbox_component_1 = require("../input/InputCheckbox.component");
+const Input_component_1 = require("../input/Input.component");
+const InputCurrency_component_1 = require("../input/InputCurrency.component");
+const InputDate_component_1 = require("../input/InputDate.component");
+const InputNumber_component_1 = require("../input/InputNumber.component");
+const InputOtp_component_1 = require("../input/InputOtp.component");
+const InputPassword_component_1 = require("../input/InputPassword.component");
+const InputRadio_component_1 = require("../input/InputRadio.component");
+const Select_component_1 = require("../input/Select.component");
+const Button_component_1 = require("../button/Button.component");
+const ModalConfirm_component_1 = require("../modal/ModalConfirm.component");
+const Toast_component_1 = require("../modal/Toast.component");
+const InputTime_component_1 = require("../input/InputTime.component");
+const InputImage_component_1 = require("../input/InputImage.component");
+const InputDatetime_component_1 = require("../input/InputDatetime.component");
+const InputMap_component_1 = require("../input/InputMap.component");
 function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", }) {
     const [modal, setModal] = (0, react_1.useState)(false);
     const [fresh, setFresh] = (0, react_1.useState)(true);
@@ -122,19 +137,19 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
     }, [values, fields, mapGroups]);
     const generateColClass = (col) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
     const inputMap = {
-        default: _components_1.InputComponent,
-        check: _components_1.InputCheckboxComponent,
-        currency: _components_1.InputCurrencyComponent,
-        date: _components_1.InputDateComponent,
-        datetime: _components_1.InputDatetimeComponent,
-        time: _components_1.InputTimeComponent,
-        number: _components_1.InputNumberComponent,
-        radio: _components_1.InputRadioComponent,
-        select: _components_1.SelectComponent,
-        "enter-password": _components_1.InputPasswordComponent,
-        otp: _components_1.InputOtpComponent,
-        image: _components_1.InputImageComponent,
-        map: _components_1.InputMapComponent,
+        default: Input_component_1.InputComponent,
+        check: InputCheckbox_component_1.InputCheckboxComponent,
+        currency: InputCurrency_component_1.InputCurrencyComponent,
+        date: InputDate_component_1.InputDateComponent,
+        datetime: InputDatetime_component_1.InputDatetimeComponent,
+        time: InputTime_component_1.InputTimeComponent,
+        number: InputNumber_component_1.InputNumberComponent,
+        radio: InputRadio_component_1.InputRadioComponent,
+        select: Select_component_1.SelectComponent,
+        "enter-password": InputPassword_component_1.InputPasswordComponent,
+        otp: InputOtp_component_1.InputOtpComponent,
+        image: InputImage_component_1.InputImageComponent,
+        map: InputMap_component_1.InputMapComponent,
         cluster: () => null,
         custom: () => null,
     };
@@ -155,14 +170,14 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
                 setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
                 unregisterPrefix(`${groupKey}[${gIndex}]`);
             };
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
         }
         if (inputType === "custom") {
             const customRender = form.construction;
             return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix }) }, key));
         }
-        const Component = inputMap[inputType] || _components_1.InputComponent;
+        const Component = inputMap[inputType] || Input_component_1.InputComponent;
         return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name), disabled: ws?.disabled, readOnly: ws?.readonly }) }, key));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { type: "submit", label: "Simpan", icon: free_solid_svg_icons_1.faSave, loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) })) })] }), (0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), icon: free_solid_svg_icons_1.faQuestionCircle, title: "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-confirm-text", children: "Yakin semua data sudah benar?" }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: modal == "failed", onClose: () => setModal(false), title: "Gagal", className: "form-supervision-toast-error header::text-danger", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!" }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: modal == "success", onClose: () => setModal(false), title: "Berhasil", className: "form-supervision-toast-success header::text-success", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data berhasil disimpan!" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { type: "submit", label: "Simpan", icon: free_solid_svg_icons_1.faSave, loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) })) })] }), (0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), icon: free_solid_svg_icons_1.faQuestionCircle, title: "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-confirm-text", children: "Yakin semua data sudah benar?" }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: modal == "failed", onClose: () => setModal(false), title: "Gagal", className: "form-supervision-toast-error header::text-danger", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!" }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: modal == "success", onClose: () => setModal(false), title: "Berhasil", className: "form-supervision-toast-success header::text-success", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data berhasil disimpan!" }) })] }));
 }

package/dist/supervision/TableSupervision.component.d.ts

@@ -1,6 +1,11 @@
 import { ReactNode } from "react";
 import { conversion, FetchControlType, ShortcutHandler, UseResourceProps } from "@utils";
-import { FloatingPageProps, FormType, ButtonProps, ModalConfirmProps, TableProps, ControlBarOptionType } from "@components";
+import { FloatingPageProps } from "../modal/FloatingPage.component";
+import { ButtonProps } from "../button/Button.component";
+import { TableProps } from "../table/Table.component";
+import { FormType } from "./FormSupervision.component";
+import { ModalConfirmProps } from "../modal/ModalConfirm.component";
+import { ControlBarOptionType } from "../table/ControlBar.component";
 export interface TableSupervisionColumnProps {
     selector: string;
     label?: string;
@@ -75,4 +80,4 @@ export type TableSupervisionProps = {
     };
     importControl?: FetchControlType;
 };
-export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }: TableSupervisionProps): import("react").JSX.Element;
+export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }: TableSupervisionProps): import("@types/react").JSX.Element;

package/dist/supervision/TableSupervision.component.js

@@ -8,7 +8,13 @@ const free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
 const _contexts_1 = require("@contexts");
-const _components_1 = require("@components");
+const FloatingPage_component_1 = require("../modal/FloatingPage.component");
+const Button_component_1 = require("../button/Button.component");
+const Table_component_1 = require("../table/Table.component");
+const FormSupervision_component_1 = require("./FormSupervision.component");
+const ModalConfirm_component_1 = require("../modal/ModalConfirm.component");
+const TypographyColumn_component_1 = require("../typography/TypographyColumn.component");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const ExportExcel = _utils_1.registry.get("ExportExcel");
 const ImportExcel = _utils_1.registry.get("ImportExcel");
 function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }) {
@@ -99,19 +105,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
     const renderTableAction = (actions, item, options) => {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-supervision-action-list", options?.className), children: (Array.isArray(actions) ? actions : (actions || actions == undefined) ? ['EDIT', "DELETE"] : [])?.map((action, key) => {
                     if (action == "EDIT") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEdit, label: "Ubah", variant: "outline", paint: "warning", size: options?.size || "xs", rounded: true, onClick: () => {
+                        return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEdit, label: "Ubah", variant: "outline", paint: "warning", size: options?.size || "xs", rounded: true, onClick: () => {
                                 setToggle(`MODAL_FORM_${toggleKey}`);
                                 item && setSelected?.(item);
                             } }, key));
                     }
                     if (action == "DELETE") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTrash, label: "Hapus", variant: "outline", paint: "danger", size: options?.size || "xs", rounded: true, onClick: () => {
+                        return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTrash, label: "Hapus", variant: "outline", paint: "danger", size: options?.size || "xs", rounded: true, onClick: () => {
                                 setToggle(`MODAL_DELETE_${toggleKey}`);
                                 item && setSelected?.(item);
                             } }, key));
                     }
                     if (typeof action == "object") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: action.label, variant: "outline", paint: "primary", size: options?.size || "xs", rounded: true, onClick: () => {
+                        return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: action.label, variant: "outline", paint: "primary", size: options?.size || "xs", rounded: true, onClick: () => {
                                 setToggle(`MODAL_${_utils_1.conversion.strSnake(action.label).toUpperCase()}_${toggleKey}`);
                                 item && setSelected?.(item);
                             }, ...action.button }, key));
@@ -132,19 +138,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
             return null;
         return ((0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-container", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-body", children: !!selected && (typeof detailContent === "object" && Array.isArray(detailContent) ? detailContent?.map((column, key) => {
                     if (typeof column === "string") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
+                        return ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
                     }
                     else if (typeof column === "object" && column !== null) {
                         const colObj = column;
                         const rawContent = typeof colObj.item === "string" ? selected[colObj.item] : colObj.item(selected);
                         const conversionKey = colObj.conversion;
                         const content = conversionKey && _utils_1.conversion[conversionKey] ? _utils_1.conversion[conversionKey](rawContent) : rawContent;
-                        return ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: colObj.label, content: content }, key));
+                        return ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: colObj.label, content: content }, key));
                     }
                     else {
                         return column?.(selected);
                     }
-                }) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
+                }) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(TypographyColumn_component_1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
     }, [selected, detailContent, columns]);
     // ============================
     // ## Form preparation
@@ -163,7 +169,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
         }) : [];
     }, [formControl]);
     const formPage = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsx)(_components_1.FormSupervisionComponent, { fields: fields, defaultValue: formControl?.defaultValue, payload: formControl?.payload, submitControl: fetchControl, onSuccess: () => {
+        return ((0, jsx_runtime_1.jsx)(FormSupervision_component_1.FormSupervisionComponent, { fields: fields, defaultValue: formControl?.defaultValue, payload: formControl?.payload, submitControl: fetchControl, onSuccess: () => {
                 setToggle(`MODAL_FORM_${toggleKey}`, false);
                 reset();
             } }));
@@ -180,28 +186,28 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
         if (toggle[`REFRESH_${toggleKey}`] != undefined)
             reset();
     }, [toggle[`REFRESH_${toggleKey}`]]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "table-supervision-title", children: title }), (0, jsx_runtime_1.jsx)(_components_1.TableComponent, { id: tableKey, controlBar: controlBar?.map((cb) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "table-supervision-title", children: title }), (0, jsx_runtime_1.jsx)(Table_component_1.TableComponent, { id: tableKey, controlBar: controlBar?.map((cb) => {
                         if (cb == "CREATE") {
                             if (isSm)
                                 return;
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
+                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
                                         setToggle(`MODAL_FORM_${toggleKey}`);
                                         setSelected(null);
                                     } }) }, "button-add"));
                         }
                         if (cb == "IMPORT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Import", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
+                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Import", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
                         }
                         if (cb == "EXPORT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Export", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
+                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Export", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
                         }
                         if (cb == "PRINT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFilePdf, label: "Cetak", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
+                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFilePdf, label: "Cetak", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
                         }
                         return cb;
                     }) || [
                         ...(!isSm ? [
-                            (0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
+                            (0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
                                         setToggle(`MODAL_FORM_${toggleKey}`);
                                         setSelected(null);
                                     } }) }, "button-add")
@@ -230,19 +236,19 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                                 }
                             } : undefined
                         } : responsiveControl?.mobile || undefined,
-                    } : undefined, ...tableControl }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, className: "table-supervision-mobile-add-btn", size: "lg", rounded: true, onClick: () => {
+                    } : undefined, ...tableControl }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, className: "table-supervision-mobile-add-btn", size: "lg", rounded: true, onClick: () => {
                         setToggle(`MODAL_FORM_${toggleKey}`);
                         setSelected(null);
-                    } }), (detailContent !== false && detailContent !== undefined) && (isSm ? ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), size: "98vh", ...detailModalProps, children: detailPage })) : ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), ...detailModalProps, children: detailPage }))), isSm ? ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), size: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-mobile-container", children: formPage }) })) : ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? "Ubah Data" : "Tambah Data", className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-container", children: formPage }) })), ExportExcel && ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: "Export Ke Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "Export - " + title, columnControl: columns?.map((cc) => ({
+                    } }), (detailContent !== false && detailContent !== undefined) && (isSm ? ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), size: "98vh", ...detailModalProps, children: detailPage })) : ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), ...detailModalProps, children: detailPage }))), isSm ? ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), size: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-mobile-container", children: formPage }) })) : ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? "Ubah Data" : "Tambah Data", className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-container", children: formPage }) })), ExportExcel && ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: "Export Ke Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "Export - " + title, columnControl: columns?.map((cc) => ({
                             label: cc.label || "",
                             selector: cc.selector || "",
                             status: cc.exportable === false ? "hidden" : cc.exportable === true ? "default" : typeof cc.exportable === "string" ? cc.exportable : undefined,
-                        })) }) })), ImportExcel && ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: "Import Dari Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: importControl, fetchControl: fetchControl.path ? {
+                        })) }) })), ImportExcel && ((0, jsx_runtime_1.jsx)(FloatingPage_component_1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: "Import Dari Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: importControl, fetchControl: fetchControl.path ? {
                             path: fetchControl.path,
                         } : undefined, columnControl: columns?.filter((cc) => cc.importable !== false).map((cc) => ({
                             label: cc.label || "",
                             selector: cc.selector || "",
-                        })) }) })), (0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `Menghapus Data?`, submitControl: {
+                        })) }) })), (0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `Menghapus Data?`, submitControl: {
                         onSubmit: {
                             ...(fetchControl.path
                                 ? { path: `${fetchControl.path}/${selected?.id || ""}` }
@@ -256,7 +262,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                         },
                     }, children: columns?.at(0)?.selector && selected ? ((0, jsx_runtime_1.jsxs)("p", { className: "table-supervision-confirm-text", children: ["Yakin menghapus ", (0, jsx_runtime_1.jsxs)("span", { className: "table-supervision-confirm-item-name", children: ["\"", selected[columns?.at(0)?.selector || ""], "\""] }), "?"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "table-supervision-confirm-text", children: "Yakin yang dihapus sudah benar?" })) }), actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
                     const submitControl = ac.modal?.submitControl?.onSubmit;
-                    return ((0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `${ac.label} Data?`, submitControl: {
+                    return ((0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `${ac.label} Data?`, submitControl: {
                             onSubmit: {
                                 ...(submitControl?.path
                                     ? { path: `${submitControl.path}/${selected?.id || ""}` }

package/dist/table/ControlBar.component.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ApiFilterType } from '@utils';
-import { FilterColumnOption } from '@components';
+import { FilterColumnOption } from "./FilterComponent";
 export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
 export interface ControlBarProps {
     id?: string;
@@ -31,4 +31,4 @@ export interface ControlBarProps {
     filter?: ApiFilterType[];
     onRefresh?: () => void;
 }
-export declare function ControlBarComponent({ id, options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }: ControlBarProps): import("react").JSX.Element;
+export declare function ControlBarComponent({ id, options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }: ControlBarProps): import("@types/react").JSX.Element;

package/dist/table/ControlBar.component.js

@@ -8,7 +8,13 @@ const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
 const _contexts_1 = require("@contexts");
-const _components_1 = require("@components");
+const InputCheckbox_component_1 = require("../input/InputCheckbox.component");
+const Input_component_1 = require("../input/Input.component");
+const Select_component_1 = require("../input/Select.component");
+const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
+const Button_component_1 = require("../button/Button.component");
+const BottomSheet_component_1 = require("../modal/BottomSheet.component");
+const FilterComponent_1 = require("./FilterComponent");
 function ControlBarComponent({ id = "", options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }) {
     const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
     const { isSm } = (0, _utils_1.useResponsive)();
@@ -73,7 +79,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "CREATE") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => setToggle(`MODAL_FORM_${_utils_1.conversion.strSnake(id).toUpperCase()}`) }) }, "button-add"));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => setToggle(`MODAL_FORM_${_utils_1.conversion.strSnake(id).toUpperCase()}`) }) }, "button-add"));
                     }
                     {
                         // =========================>
@@ -82,7 +88,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                     }
                     if (option == "SEARCH") {
                         const searchable = !!options?.find((option) => option == "SEARCHABLE");
-                        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar-search-wrapper", searchable ? "control-bar-search-wrapper-searchable" : "control-bar-search-wrapper-standalone"), children: (0, jsx_runtime_1.jsx)(_components_1.InputComponent, { ref: searchRef, name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e), className: (0, _utils_1.cn)("control-bar-search-input", searchable && "control-bar-search-input-searchable") }) }, key));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar-search-wrapper", searchable ? "control-bar-search-wrapper-searchable" : "control-bar-search-wrapper-standalone"), children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { ref: searchRef, name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e), className: (0, _utils_1.cn)("control-bar-search-input", searchable && "control-bar-search-input-searchable") }) }, key));
                     }
                     {
                         // =========================>
@@ -90,7 +96,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "SEARCHABLE") {
-                        return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-searchable-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
+                        return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-searchable-wrapper", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
                                     return {
                                         label: column.label,
                                         value: column.selector,
@@ -103,7 +109,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "SELECTABLE") {
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEyeLowVision, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SELECTABLE"), size: "sm" }), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SELECTABLE", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SELECTABLE && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(_components_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEyeLowVision, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SELECTABLE"), size: "sm" }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SELECTABLE", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SELECTABLE && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(InputCheckbox_component_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
                                                     return {
                                                         label: option.label,
                                                         value: option.selector,
@@ -116,7 +122,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "SORT") {
-                        return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSort, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SORT"), size: "sm" }), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SORT", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SORT && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "Urut Berdasarkan" }), (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-sort-list', children: sortableOptions?.map((option, key) => {
+                        return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSort, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SORT"), size: "sm" }), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SORT", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SORT && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "Urut Berdasarkan" }), (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-sort-list', children: sortableOptions?.map((option, key) => {
                                                     const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
                                                     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)('control-bar-sort-item', !!sortBy && "control-bar-sort-item-active"), onClick: () => onChangeSort(option.selector), children: [(0, jsx_runtime_1.jsx)("p", { children: option.label }), sortBy && ((0, jsx_runtime_1.jsxs)("div", { className: 'control-bar-sort-active-icon', children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: sortBy == "desc" ? free_solid_svg_icons_1.faArrowDownZA : free_solid_svg_icons_1.faArrowUpAZ, className: 'control-bar-sort-icon' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'control-bar-sort-badge', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
                                                 }) })] }) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
@@ -127,7 +133,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "REFRESH") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper-refresh", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRefresh, variant: "outline", className: "control-bar-icon-button", onClick: () => onRefresh?.(), size: "sm" }) }, key));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper-refresh", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRefresh, variant: "outline", className: "control-bar-icon-button", onClick: () => onRefresh?.(), size: "sm" }) }, key));
                     }
                     {
                         // =========================>
@@ -135,7 +141,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "FILTER") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSliders, label: "Filter", variant: "outline", className: "control-bar-filter-button", onClick: () => setToggle("FILTER"), size: "sm" }) }, key));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSliders, label: "Filter", variant: "outline", className: "control-bar-filter-button", onClick: () => setToggle("FILTER"), size: "sm" }) }, key));
                     }
                     {
                         // =========================>
@@ -143,17 +149,17 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         // =========================>
                     }
                     if (option == "MOBILE_OPTION") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisV, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("MOBILE_OPTION"), size: "sm" }) }, key));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisV, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("MOBILE_OPTION"), size: "sm" }) }, key));
                     }
                     return option;
-                }) }), !!filterableColumns && !!filterableColumns?.length && ((0, jsx_runtime_1.jsx)(_components_1.FilterComponent, { className: (0, _utils_1.cn)(!toggle.FILTER ? "control-bar-filter-panel-hidden" : "control-bar-filter-panel"), columns: filterableColumns, onChange: onFilter, value: filter, onMinimize: () => setToggle("FILTER") })), isSm && ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: !!toggle["MOBILE_OPTION"], onClose: () => setToggle("MOBILE_OPTION", false), maxSize: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-mobile-container', children: options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option, key) => {
+                }) }), !!filterableColumns && !!filterableColumns?.length && ((0, jsx_runtime_1.jsx)(FilterComponent_1.FilterComponent, { className: (0, _utils_1.cn)(!toggle.FILTER ? "control-bar-filter-panel-hidden" : "control-bar-filter-panel"), columns: filterableColumns, onChange: onFilter, value: filter, onMinimize: () => setToggle("FILTER") })), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: !!toggle["MOBILE_OPTION"], onClose: () => setToggle("MOBILE_OPTION", false), maxSize: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-mobile-container', children: options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option, key) => {
                         {
                             // =========================>
                             // ## Search Field
                             // =========================>
                         }
                         if (option == "SEARCH") {
-                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e) }) }, key));
+                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e) }) }, key));
                         }
                         {
                             // =========================>
@@ -161,7 +167,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                             // =========================>
                         }
                         if (option == "SEARCHABLE") {
-                            return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
+                            return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
                                         return {
                                             label: column.label,
                                             value: column.selector,
@@ -174,7 +180,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                             // =========================>
                         }
                         if (option == "SELECTABLE") {
-                            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(_components_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
+                            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(InputCheckbox_component_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
                                             return {
                                                 label: option.label,
                                                 value: option.selector,
@@ -198,7 +204,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                             // =========================>
                         }
                         if (option == "FILTER") {
-                            return ((0, jsx_runtime_1.jsx)("div", { children: filterableColumns && filterableColumns?.length && ((0, jsx_runtime_1.jsx)(_components_1.FilterComponent, { className: 'control-bar-mobile-filter title::text-xs', columns: filterableColumns, onChange: onFilter, value: filter })) }, key));
+                            return ((0, jsx_runtime_1.jsx)("div", { children: filterableColumns && filterableColumns?.length && ((0, jsx_runtime_1.jsx)(FilterComponent_1.FilterComponent, { className: 'control-bar-mobile-filter title::text-xs', columns: filterableColumns, onChange: onFilter, value: filter })) }, key));
                         }
                         return option;
                     }) }) }))] }));

package/dist/table/FilterComponent.d.ts

@@ -26,7 +26,7 @@ export interface AdvancedFilterProps {
     /** Use custom class with: "title::". */
     className?: string;
 }
-export declare function FilterComponent({ columns, onChange, value, onMinimize, className, }: AdvancedFilterProps): import("react").JSX.Element;
+export declare function FilterComponent({ columns, onChange, value, onMinimize, className, }: AdvancedFilterProps): import("@types/react").JSX.Element;
 interface FilterInputProps {
     type?: string | null;
     name: string;
@@ -41,5 +41,5 @@ interface FilterInputProps {
     between?: boolean;
     multiple?: boolean;
 }
-export declare function InputFilterValueComponent({ type, name, value, onChange, options, placeholder, className, between, multiple, }: FilterInputProps): import("react").JSX.Element;
+export declare function InputFilterValueComponent({ type, name, value, onChange, options, placeholder, className, between, multiple, }: FilterInputProps): import("@types/react").JSX.Element;
 export {};

package/dist/table/FilterComponent.js

@@ -7,7 +7,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
-const _components_1 = require("@components");
+const Button_component_1 = require("../button/Button.component");
+const Chip_component_1 = require("../chip/Chip.component");
+const Input_component_1 = require("../input/Input.component");
+const InputCurrency_component_1 = require("../input/InputCurrency.component");
+const InputDate_component_1 = require("../input/InputDate.component");
+const InputNumber_component_1 = require("../input/InputNumber.component");
+const Modal_component_1 = require("../modal/Modal.component");
+const Select_component_1 = require("../input/Select.component");
 const _contexts_1 = require("@contexts");
 const free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
 const FILTER_OPERATORS = [
@@ -58,16 +65,16 @@ function FilterComponent({ columns, onChange, value, onMinimize, className = "",
     (0, react_1.useEffect)(() => {
         localStorage.setItem(BOOKMARK_KEY, JSON.stringify(bookmarks));
     }, [bookmarks]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("filter-panel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-header", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)((0, _utils_1.pcn)(className, "title")), children: "Filter" }), (0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-bookmarks-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_regular_svg_icons_1.faBookmark, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" }) }), !!bookmarks?.length && ((0, jsx_runtime_1.jsx)(_components_1.ChipComponent, { items: bookmarks.slice(0, 5).map((b) => b.name), onClick: (_, index) => setFilters(bookmarks[index]?.filters), onDelete: (_, index) => setBookmarks(bookmarks.filter((_, bi) => bi != index)) })), bookmarks?.length > 5 && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisH, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK_LIST") }))] }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRotate, label: "Bersihkan", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setFilters([]) }), onMinimize && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronUp, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: onMinimize }))] })] }), filters.map((f, i) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("filter-panel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-header", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)((0, _utils_1.pcn)(className, "title")), children: "Filter" }), (0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-bookmarks-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_regular_svg_icons_1.faBookmark, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" }) }), !!bookmarks?.length && ((0, jsx_runtime_1.jsx)(Chip_component_1.ChipComponent, { items: bookmarks.slice(0, 5).map((b) => b.name), onClick: (_, index) => setFilters(bookmarks[index]?.filters), onDelete: (_, index) => setBookmarks(bookmarks.filter((_, bi) => bi != index)) })), bookmarks?.length > 5 && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisH, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK_LIST") }))] }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRotate, label: "Bersihkan", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setFilters([]) }), onMinimize && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronUp, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: onMinimize }))] })] }), filters.map((f, i) => {
                         const column = columns.find((c) => c.selector === f.column);
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-row", children: [i > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-logic", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_logic_${i}`, options: LOGIC_OPTIONS, placeholder: "Dan/Atau", value: f.logic, onChange: (e) => handleChange(i, "logic", e), className: "filter-input-field" }) })), (0, jsx_runtime_1.jsx)("div", { className: i > 0 ? "filter-col-column-with-logic" : "filter-col-column", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_column_${i}`, options: columns.map((c) => ({
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-row", children: [i > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-logic", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_logic_${i}`, options: LOGIC_OPTIONS, placeholder: "Dan/Atau", value: f.logic, onChange: (e) => handleChange(i, "logic", e), className: "filter-input-field" }) })), (0, jsx_runtime_1.jsx)("div", { className: i > 0 ? "filter-col-column-with-logic" : "filter-col-column", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_column_${i}`, options: columns.map((c) => ({
                                             label: c.label,
                                             value: c.selector,
-                                        })), placeholder: "Kolom", value: f.column, onChange: (e) => handleChange(i, "column", e), className: "filter-input-field" }) }), (0, jsx_runtime_1.jsx)("div", { className: "filter-col-operator", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_operator_${i}`, options: FILTER_OPERATORS, placeholder: "Operator", value: f.type, onChange: (e) => handleChange(i, "type", e), className: "filter-input-field" }) }), isSm && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" })), column && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-value", children: (0, jsx_runtime_1.jsx)(InputFilterValueComponent, { type: column.type, name: `filter_value_${i}`, placeholder: "...", value: f.value || "", onChange: (e) => handleChange(i, "value", e), options: column.type === "select" && column.options ? column.options : [], className: "filter-input-field", between: f.type === "bw", multiple: ["in", "ni"].includes(f.type || "") }) })), !isSm && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" }))] }, i));
-                    }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Tambahkan", icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", size: isSm ? "xs" : "sm", onClick: addFilter, className: "filter-add-btn" })] }), (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK_LIST"], onClose: () => setToggle("MODAL_BOOKMARK_LIST", false), title: "Bookmark Filter", children: (0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-list-container", children: bookmarks?.length ? bookmarks?.map((b, key) => ((0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-row", children: [(0, jsx_runtime_1.jsx)("p", { className: "filter-bookmark-name", children: b.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", className: "", size: "xs", onClick: () => {
+                                        })), placeholder: "Kolom", value: f.column, onChange: (e) => handleChange(i, "column", e), className: "filter-input-field" }) }), (0, jsx_runtime_1.jsx)("div", { className: "filter-col-operator", children: (0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `filter_operator_${i}`, options: FILTER_OPERATORS, placeholder: "Operator", value: f.type, onChange: (e) => handleChange(i, "type", e), className: "filter-input-field" }) }), isSm && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" })), column && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-value", children: (0, jsx_runtime_1.jsx)(InputFilterValueComponent, { type: column.type, name: `filter_value_${i}`, placeholder: "...", value: f.value || "", onChange: (e) => handleChange(i, "value", e), options: column.type === "select" && column.options ? column.options : [], className: "filter-input-field", between: f.type === "bw", multiple: ["in", "ni"].includes(f.type || "") }) })), !isSm && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" }))] }, i));
+                    }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Tambahkan", icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", size: isSm ? "xs" : "sm", onClick: addFilter, className: "filter-add-btn" })] }), (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK_LIST"], onClose: () => setToggle("MODAL_BOOKMARK_LIST", false), title: "Bookmark Filter", children: (0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-list-container", children: bookmarks?.length ? bookmarks?.map((b, key) => ((0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-row", children: [(0, jsx_runtime_1.jsx)("p", { className: "filter-bookmark-name", children: b.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", className: "", size: "xs", onClick: () => {
                                             setFilters(b.filters);
                                             setToggle("MODAL_BOOKMARK_LIST", false);
-                                        } }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "outline", paint: "danger", className: "", size: "xs", onClick: () => setBookmarks(bookmarks.filter((_, bi) => bi != key)) })] })] }, key))) : ((0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-empty-text", children: " -- Tidak ada Bookmark --" })) }) }), (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK"], onClose: () => setToggle("MODAL_BOOKMARK", false), title: "Bookmark Filter", footer: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Terapkan", onClick: () => {
+                                        } }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "outline", paint: "danger", className: "", size: "xs", onClick: () => setBookmarks(bookmarks.filter((_, bi) => bi != key)) })] })] }, key))) : ((0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-empty-text", children: " -- Tidak ada Bookmark --" })) }) }), (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK"], onClose: () => setToggle("MODAL_BOOKMARK", false), title: "Bookmark Filter", footer: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Terapkan", onClick: () => {
                             let updated = [];
                             if (toggle["MODAL_BOOKMARK"]?.bookmark_id == "new") {
                                 const newBookmark = {
@@ -85,7 +92,7 @@ function FilterComponent({ columns, onChange, value, onMinimize, className = "",
                             }
                             setBookmarks(updated);
                             setToggle("MODAL_BOOKMARK", false);
-                        } }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-form-container", children: [(0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `bookmark_id`, placeholder: "Pilih bookmark filter...", value: toggle["MODAL_BOOKMARK"]?.bookmark_id ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_id: e }), options: [
+                        } }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-form-container", children: [(0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: `bookmark_id`, placeholder: "Pilih bookmark filter...", value: toggle["MODAL_BOOKMARK"]?.bookmark_id ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_id: e }), options: [
                                 {
                                     label: "-- BOOKMARK BARU --",
                                     value: "new",
@@ -94,22 +101,22 @@ function FilterComponent({ columns, onChange, value, onMinimize, className = "",
                                     label: b.name,
                                     value: b.id,
                                 }))
-                            ] }), toggle["MODAL_BOOKMARK"]?.bookmark_id == "new" && ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: "bookmark_name", placeholder: "Masukkan nama bookmark...", value: toggle["MODAL_BOOKMARK"]?.bookmark_name ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_name: e }), className: "filter-bookmark-form-input" }))] }) })] }));
+                            ] }), toggle["MODAL_BOOKMARK"]?.bookmark_id == "new" && ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "bookmark_name", placeholder: "Masukkan nama bookmark...", value: toggle["MODAL_BOOKMARK"]?.bookmark_name ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_name: e }), className: "filter-bookmark-form-input" }))] }) })] }));
 }
 function InputFilterValueComponent({ type, name, value, onChange, options = [], placeholder = "", className = "", between, multiple, }) {
     const resolvedType = type || "text";
     if (!between) {
         switch (resolvedType) {
             case "select":
-                return ((0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: name, options: options, placeholder: placeholder, value: options.find((o) => o.value === value)?.label, onChange: onChange, className: className }));
+                return ((0, jsx_runtime_1.jsx)(Select_component_1.SelectComponent, { name: name, options: options, placeholder: placeholder, value: options.find((o) => o.value === value)?.label, onChange: onChange, className: className }));
             case "number":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputNumberComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
+                return ((0, jsx_runtime_1.jsx)(InputNumber_component_1.InputNumberComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
             case "currency":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputCurrencyComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className }));
+                return ((0, jsx_runtime_1.jsx)(InputCurrency_component_1.InputCurrencyComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className }));
             case "date":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputDateComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className }));
+                return ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDateComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className }));
             default:
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
+                return ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
         }
     }
     const val = Array.isArray(value) ? value : ["", ""];
@@ -119,13 +126,13 @@ function InputFilterValueComponent({ type, name, value, onChange, options = [],
         const handle = (v) => onChange(pos === "from" ? [v, to] : [from, v]);
         switch (resolvedType) {
             case "number":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputNumberComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
+                return ((0, jsx_runtime_1.jsx)(InputNumber_component_1.InputNumberComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
             case "currency":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputCurrencyComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
+                return ((0, jsx_runtime_1.jsx)(InputCurrency_component_1.InputCurrencyComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
             case "date":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputDateComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
+                return ((0, jsx_runtime_1.jsx)(InputDate_component_1.InputDateComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
             default:
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: (e) => handle(e.target.value), placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
+                return ((0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: (e) => handle(e.target.value), placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
         }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-between-container", children: [renderInput("from"), (0, jsx_runtime_1.jsx)("span", { children: "s/d" }), renderInput("to")] }));

package/dist/table/Pagination.component.d.ts

@@ -5,4 +5,4 @@ export interface PaginationProps {
     onChange?: (totalRow: number, paginate: number, page: number) => void;
     className?: string;
 }
-export declare function PaginationComponent({ paginate, page, totalRow, onChange, className, }: PaginationProps): import("react").JSX.Element;
+export declare function PaginationComponent({ paginate, page, totalRow, onChange, className, }: PaginationProps): import("@types/react").JSX.Element;