@skalfa/skalfa-component 1.0.8 → 1.0.10

package/dist/table/ControlBar.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ControlBarComponent = ControlBarComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const react_1 = require("react");
-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 InputCheckbox_component_1 = require("../input/InputCheckbox.component");
@@ -70,7 +69,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
         }
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar", className), children: (isSm ? [
-                    ...(options?.filter((op, iop) => iop == 0 || op == "REFRESH") || []),
+                    ...(options?.filter((op) => op == "SEARCH" || op == "REFRESH") || []),
                     ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
                 ] : options)?.map((option, key) => {
                     {
@@ -79,7 +78,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)(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"));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/plus", label: "Tambah Data", size: "sm", onClick: () => setToggle(`MODAL_FORM_${_utils_1.conversion.strSnake(id).toUpperCase()}`) }) }, "button-add"));
                     }
                     {
                         // =========================>
@@ -88,7 +87,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)(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));
+                        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: "solid/magnifying-glass", value: search, onChange: (e) => onSearch?.(e), className: (0, _utils_1.cn)("control-bar-search-input", searchable && "control-bar-search-input-searchable") }) }, key));
                     }
                     {
                         // =========================>
@@ -96,7 +95,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)(Select_component_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: "solid/search", options: searchableOptions?.map((column) => {
                                     return {
                                         label: column.label,
                                         value: column.selector,
@@ -109,7 +108,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)(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 ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/eye-low-vision", 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,
@@ -122,9 +121,9 @@ 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)(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) => {
+                        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: "solid/sort", 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));
+                                                    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)(skalfa_icon_1.Icon, { icon: sortBy == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z", 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, {});
                     }
                     {
@@ -133,7 +132,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)(Button_component_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: "solid/refresh", variant: "outline", className: "control-bar-icon-button", onClick: () => onRefresh?.(), size: "sm" }) }, key));
                     }
                     {
                         // =========================>
@@ -141,7 +140,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)(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));
+                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/sliders", label: "Filter", variant: "outline", className: "control-bar-filter-button", onClick: () => setToggle("FILTER"), size: "sm" }) }, key));
                     }
                     {
                         // =========================>
@@ -149,17 +148,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)(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 ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/ellipsis-v", variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("MOBILE_OPTION"), size: "sm" }) }, key));
                     }
                     return option;
-                }) }), !!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) => {
+                }) }), !!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 != "SEARCH" && op != "REFRESH"))?.map((option, key) => {
                         {
                             // =========================>
                             // ## Search Field
                             // =========================>
                         }
                         if (option == "SEARCH") {
-                            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));
+                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Input_component_1.InputComponent, { name: "search", placeholder: "Cari disini...", rightIcon: "solid/magnifying-glass", value: search, onChange: (e) => onSearch?.(e) }) }, key));
                         }
                         {
                             // =========================>
@@ -167,7 +166,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)(Select_component_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: "solid/search", options: searchableOptions?.map((column) => {
                                         return {
                                             label: column.label,
                                             value: column.selector,
@@ -195,7 +194,7 @@ function ControlBarComponent({ id = "", options, className, search, onSearch, se
                         if (option == "SORT") {
                             return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Urut Berdasarkan" }), (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-col', 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-mobile-sort-item', !!sortBy && "control-bar-mobile-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: 'text-primary', 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: 'text-xs' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'text-[9px] ml-1', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
+                                            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)('control-bar-mobile-sort-item', !!sortBy && "control-bar-mobile-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: 'text-primary', children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: sortBy == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z", className: 'text-xs' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'text-[9px] ml-1', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
                                         }) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
                         {

package/dist/table/FilterComponent.js

@@ -5,7 +5,6 @@ exports.FilterComponent = FilterComponent;
 exports.InputFilterValueComponent = InputFilterValueComponent;
 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 Button_component_1 = require("../button/Button.component");
 const Chip_component_1 = require("../chip/Chip.component");
@@ -16,7 +15,6 @@ 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 = [
     { label: "Cari", value: "li" },
     { label: "Sama", value: "eq" },
@@ -65,16 +63,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)(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) => {
+    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: "solid/bookmark", 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: "solid/ellipsis-h", 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: "solid/rotate", 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: "solid/chevron-up", 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)(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)(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: () => {
+                                        })), 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: "solid/times", 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: "solid/times", paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" }))] }, i));
+                    }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Tambahkan", icon: "solid/plus", 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: "solid/plus", variant: "outline", paint: "primary", className: "", size: "xs", onClick: () => {
                                             setFilters(b.filters);
                                             setToggle("MODAL_BOOKMARK_LIST", false);
-                                        } }), (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: () => {
+                                        } }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", 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 = {

package/dist/table/Pagination.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaginationComponent = PaginationComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 const _utils_1 = require("@utils");
 const Button_component_1 = require("../button/Button.component");
 const InputRadio_component_1 = require("../input/InputRadio.component");
@@ -29,5 +28,5 @@ function PaginationComponent({ paginate = 10, page = 1, totalRow = 0, onChange,
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("pagination-container", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-wrapper", children: [(0, jsx_runtime_1.jsx)(InputRadio_component_1.InputRadioComponent, { name: "paginate", options: [10, 20, 50].map((val) => ({
                             value: val,
                             label: String(val),
-                        })), value: paginate, onChange: (e) => onChange?.(totalRow, Number(e), 1), className: "pagination-paginate-select" }), totalRow > paginate && ((0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-pages", children: [page > 1 && ((0, jsx_runtime_1.jsx)("button", { className: "pagination-overflow", onClick: () => onChange?.(totalRow, paginate, page - 1), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) })), page > 2 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item")), onClick: () => onChange?.(totalRow, paginate, 1), children: "1" }), page > 3 && (0, jsx_runtime_1.jsx)("span", { className: "pagination-overflow", children: "..." })] })), pages.map((p) => ((0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item"), p === page && (0, _utils_1.cn)("pagination-item-active", (0, _utils_1.pcn)(className, "active"))), onClick: () => onChange?.(totalRow, paginate, p), children: p }, p))), page < lastPage - 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [page < lastPage - 2 && ((0, jsx_runtime_1.jsx)("span", { className: "pagination-overflow", children: "..." })), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item")), onClick: () => onChange?.(totalRow, paginate, lastPage), children: lastPage })] })), page < lastPage && ((0, jsx_runtime_1.jsx)("button", { className: "pagination-overflow", onClick: () => onChange?.(totalRow, paginate, page + 1), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-info", children: [Math.min(totalRow, paginate * (page - 1) + 1), " - ", Math.min(totalRow, paginate * page), " / ", totalRow] }), (0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-info", children: [Math.min(totalRow, paginate * (page - 1) + 1), " - ", Math.min(totalRow, paginate * page), " / ", totalRow] }), totalRow > paginate && ((0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-controls", children: [page > 1 && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronLeft, onClick: () => onChange?.(totalRow, paginate, page - 1), size: "sm" })), page < lastPage && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronRight, onClick: () => onChange?.(totalRow, paginate, page + 1), size: "sm" }))] }))] })] }));
+                        })), value: paginate, onChange: (e) => onChange?.(totalRow, Number(e), 1), className: "pagination-paginate-select" }), totalRow > paginate && ((0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-pages", children: [page > 1 && ((0, jsx_runtime_1.jsx)("button", { className: "pagination-overflow", onClick: () => onChange?.(totalRow, paginate, page - 1), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left" }) })), page > 2 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item")), onClick: () => onChange?.(totalRow, paginate, 1), children: "1" }), page > 3 && (0, jsx_runtime_1.jsx)("span", { className: "pagination-overflow", children: "..." })] })), pages.map((p) => ((0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item"), p === page && (0, _utils_1.cn)("pagination-item-active", (0, _utils_1.pcn)(className, "active"))), onClick: () => onChange?.(totalRow, paginate, p), children: p }, p))), page < lastPage - 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [page < lastPage - 2 && ((0, jsx_runtime_1.jsx)("span", { className: "pagination-overflow", children: "..." })), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item")), onClick: () => onChange?.(totalRow, paginate, lastPage), children: lastPage })] })), page < lastPage && ((0, jsx_runtime_1.jsx)("button", { className: "pagination-overflow", onClick: () => onChange?.(totalRow, paginate, page + 1), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-right" }) }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-info", children: [Math.min(totalRow, paginate * (page - 1) + 1), " - ", Math.min(totalRow, paginate * page), " / ", totalRow] }), (0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-info", children: [Math.min(totalRow, paginate * (page - 1) + 1), " - ", Math.min(totalRow, paginate * page), " / ", totalRow] }), totalRow > paginate && ((0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-controls", children: [page > 1 && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/chevron-left", onClick: () => onChange?.(totalRow, paginate, page - 1), size: "sm" })), page < lastPage && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/chevron-right", onClick: () => onChange?.(totalRow, paginate, page + 1), size: "sm" }))] }))] })] }));
 }

package/dist/table/Table.component.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableComponent = TableComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const react_1 = require("react");
-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 ControlBar_component_1 = require("./ControlBar.component");
 const Pagination_component_1 = require("./Pagination.component");
@@ -41,7 +40,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: columnMapping?.map((column, key) => {
                 const sortColumn = sortBy?.find((e) => e.split(" ")?.at(0) == column.selector)?.split(" ")?.at(0) || "";
                 const sortDirection = sortBy?.find((e) => e.split(" ")?.at(0) == column.selector)?.split(" ")?.at(1) || "";
-                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-column", column.sortable && "cursor-pointer", (0, _utils_1.pcn)(className, "head-column")), style: { width: column.width ? column.width : 200 }, onClick: () => column.sortable && onChangeSortBy?.([`${column.selector} ${sortDirection == "desc" ? "asc" : "desc"}`]), children: [column.label, !!sortColumn && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: sortDirection == "desc" ? free_solid_svg_icons_1.faArrowDownZA : free_solid_svg_icons_1.faArrowUpAZ, className: "text-light-foreground/70" }))] }, key));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-column", column.sortable && "cursor-pointer", (0, _utils_1.pcn)(className, "head-column")), style: { width: column.width ? column.width : 200 }, onClick: () => column.sortable && onChangeSortBy?.([`${column.selector} ${sortDirection == "desc" ? "asc" : "desc"}`]), children: [column.label, !!sortColumn && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: sortDirection == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z", className: "text-light-foreground/70" }))] }, key));
             }) }));
     }
     function renderItem(item, itemKey) {
@@ -101,7 +100,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
                             setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
                     }, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: "Memuat data..." }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: "Belum Ada Data" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {
                                         return ((0, jsx_runtime_1.jsxs)("div", { style: { animationDelay: `${(key + 1) * 0.05}s` }, className: (0, _utils_1.cn)("table-body-row", key % 2 ? "bg-light-primary/10" : "bg-white", focus == key && "bg-light-primary/30", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column w-max", (0, _utils_1.pcn)(className, "column")), children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: checks?.includes(item?.id), onChange: () => checks?.includes(item?.id) ? onChangeChecks?.(checks.filter((i) => i !== item?.id)) : onChangeChecks?.([...(checks || []), item?.id]) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column w-8", (0, _utils_1.pcn)(className, "column")), children: numberOfRow(key) }), renderItem(item, key), (0, jsx_runtime_1.jsx)("div", { ref: actionColumnRef, className: "table-action-column", children: item["action"] }), item["action"] && showFloatingAction && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-floating-action", (0, _utils_1.pcn)(className, "floating-action")), onClick: () => floatingActionActive !== false &&
-                                                        floatingActionActive == key ? setFloatingActionActive(false) : setFloatingActionActive(key), children: [(0, jsx_runtime_1.jsx)("div", { className: "table-floating-action-icon-wrapper", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: floatingActionActive === false || floatingActionActive != key ? free_solid_svg_icons_1.faChevronLeft : free_solid_svg_icons_1.faChevronRight }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-floating-action-content", floatingActionActive === key && "table-floating-action-content-active"), children: item["action"] })] }))] }, key));
+                                                        floatingActionActive == key ? setFloatingActionActive(false) : setFloatingActionActive(key), children: [(0, jsx_runtime_1.jsx)("div", { className: "table-floating-action-icon-wrapper", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: floatingActionActive === false || floatingActionActive != key ? "solid/chevron-left" : "solid/chevron-right" }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-floating-action-content", floatingActionActive === key && "table-floating-action-content-active"), children: item["action"] })] }))] }, key));
                                     }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-mobile-list", children: data.map((item, key) => {
                                 return ((0, jsx_runtime_1.jsx)("div", { style: { animationDelay: `${(key + 1) * 0.05}s` }, children: renderItem(item, key) }, key));
                             }) })) })) }) }), !!actionBulking && !!checks?.length && ((0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-bar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-title", children: [checks?.length, " Data Terpilih"] }), (0, jsx_runtime_1.jsx)("div", { className: "table-bulk-actions-buttons", children: actionBulking?.(checks) })] })), !block && pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-desktop", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })), pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-mobile", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) }))] }));

package/dist/wrap/Swipe.component.js

@@ -5,7 +5,7 @@ exports.SwipeComponent = SwipeComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const _utils_1 = require("@utils");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 function SwipeComponent({ leftActionControl, rightActionControl, children, className, }) {
     const startX = (0, react_1.useRef)(0);
     const [offset, setOffset] = (0, react_1.useState)(0);
@@ -49,7 +49,7 @@ function SwipeComponent({ leftActionControl, rightActionControl, children, class
         control?.onAction?.();
         setOffset(0);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("swipe-container", className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: () => handleAction('left'), className: (0, _utils_1.cn)("swipe-left-action", leftActionControl?.className, offset > 0 ? "opacity-100" : "opacity-0"), children: [leftActionControl?.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: leftActionControl?.icon }), " ", leftActionControl?.label] }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => handleAction('right'), className: (0, _utils_1.cn)("swipe-right-action", rightActionControl?.className, offset < 0 ? "opacity-100" : "opacity-0"), children: [rightActionControl?.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: rightActionControl?.icon }), " ", rightActionControl?.label] }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("swipe-content", className), style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("swipe-container", className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: () => handleAction('left'), className: (0, _utils_1.cn)("swipe-left-action", leftActionControl?.className, offset > 0 ? "opacity-100" : "opacity-0"), children: [leftActionControl?.icon && (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: leftActionControl?.icon }), " ", leftActionControl?.label] }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => handleAction('right'), className: (0, _utils_1.cn)("swipe-right-action", rightActionControl?.className, offset < 0 ? "opacity-100" : "opacity-0"), children: [rightActionControl?.icon && (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: rightActionControl?.icon }), " ", rightActionControl?.label] }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("swipe-content", className), style: {
                     transform: `translateX(${offset}px)`,
                     transition: dragging ? "none" : "transform 0.2s ease",
                 }, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onClickCapture: (e) => {

package/package.json

@@ -1,30 +1,38 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
-  "keywords": ["skalfa", "skalfa-app", "skalfa-component", "next-framework", "next-template"],
+  "keywords": [
+    "skalfa",
+    "skalfa-app",
+    "skalfa-component",
+    "next-framework",
+    "next-template"
+  ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "postbuild": "bun fix-exports.js"
   },
   "peerDependencies": {
     "@skalfa/skalfa-app-core": "*",
-    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@skalfa/skalfa-lang": "*",
+    "@skalfa/skalfa-icon": "*",
     "next": "^15.0.0 || ^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@skalfa/skalfa-app-core": "*",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@skalfa/skalfa-lang": "*",
+    "@skalfa/skalfa-icon": "*",
+    "moment": "^2.30.1",
     "@react-google-maps/api": "^2.20.7",
     "@types/google.maps": "^3.58.1",
     "@types/node": "^20.0.0",
@@ -35,4 +43,4 @@
     "react-dom": "^19.2.1",
     "typescript": "^6.0.3"
   }
-}
+}

package/src/accordion/Accordion.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { ReactNode, useEffect, useState } from "react";
-import { faChevronDown, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cn, pcn } from "@utils";
 
 
@@ -63,7 +63,7 @@ export function AccordionComponent({
                 isActive !== key && "rotate-180",
               )}
             >
-              <FontAwesomeIcon icon={horizontal ? faChevronLeft : faChevronDown} />
+              <Icon icon={horizontal ? "solid/chevron-left" : "solid/chevron-down"} />
             </div>
           </div>
           <div

package/src/breadcrumb/Breadcrumb.component.tsx

@@ -1,9 +1,9 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { Fragment, ReactNode } from "react";
 import Link from "next/link";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cn, pcn } from "@utils";
 
 
@@ -64,8 +64,8 @@ export function BreadcrumbComponent({
               {!isActive && (
                 <li className="breadcrumb-separator">
                   {separatorContent || (
-                    <FontAwesomeIcon
-                      icon={faChevronRight}
+                    <Icon
+                      icon="solid/chevron-right"
                     />
                   )}
                 </li>

package/src/button/Button.component.tsx

@@ -2,7 +2,7 @@
 
 import { ReactNode } from "react";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
 import { cn, pcn } from "@utils";
 
 type CT = "icon" | "loading" | "base";
@@ -18,7 +18,7 @@ export interface ButtonProps {
   size      ?:  "xs" | "sm" | "md" | "lg";
   onClick   ?:  any;
   href      ?:  string;
-  icon      ?:  any;
+  icon      ?:  IconName;
   loading   ?:  boolean;
   hover     ?:  boolean;
   tips      ?:  string; // Tooltip / title attribute
@@ -67,7 +67,7 @@ export function ButtonComponent({
         <div className={cn("button-loading", pcn<CT>(className, "loading"))}></div>
       ) : (
         icon && (
-          <FontAwesomeIcon
+          <Icon
             icon={icon}
             className={cn("button-icon", pcn<CT>(className, "icon"))}
           />

package/src/carousel/Carousel.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { useState, useRef, useEffect } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { cn, pcn } from "@utils";
 
 
@@ -96,13 +96,13 @@ export function CarouselComponent({
             className={cn("carousel-btn carousel-prev-btn", pcn<CT>(className, "prev-button"))}
             onClick={handlePrev}
           >
-            <FontAwesomeIcon icon={faChevronLeft} />
+            <Icon icon="solid/chevron-left" />
           </button>
           <button
             className={cn("carousel-btn carousel-next-btn", pcn<CT>(className, "next-button"))}
             onClick={handleNext}
           >
-            <FontAwesomeIcon icon={faChevronRight} />
+            <Icon icon="solid/chevron-right" />
           </button>
         </>
       )}

package/src/chip/Chip.component.tsx

@@ -1,5 +1,4 @@
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
 import { cn } from "@utils";
 
 export function ChipComponent({ 
@@ -25,8 +24,8 @@ export function ChipComponent({
             <span>{item}</span>
             
             {onDelete && (
-              <FontAwesomeIcon
-                icon={faTimes}
+              <Icon
+                icon="solid/times"
                 className="chip-delete"
                 onClick={() =>  onDelete?.(item, key)}
               />

package/src/contexts-mock.ts

@@ -0,0 +1,6 @@
+export function useToggleContext(): any {
+  return { toggle: {}, setToggle: () => {} };
+}
+export function useAuthContext(): any {
+  return { setUser: () => {}, setAccessToken: () => {} };
+}

package/src/input/Checkbox.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { ReactNode, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { cn, pcn, useInputRandomId } from "@utils";
 
 type CT  =  "label" | "checked" | "error" | "base";
@@ -78,7 +78,7 @@ export function CheckboxComponent({
               pcn<CT>(className, "base"),
             )}
           >
-            {checked && <FontAwesomeIcon icon={faCheck} className="text-sm" />}
+            {checked && <Icon icon="solid/check" className="text-sm" />}
           </div>
         </div>
         <span

package/src/input/Input.component.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { InputHTMLAttributes, ReactNode, Ref, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
 import { InputValues } from "./InputValues.component";
 
@@ -12,8 +12,8 @@ type CT = "label" | "tip" | "error" | "base" | "icon" | "suggest" | "suggest-ite
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   label      ?:  string;
   tip        ?:  string | ReactNode;
-  leftIcon   ?:  any;
-  rightIcon  ?:  any;
+  leftIcon   ?:  IconName;
+  rightIcon  ?:  IconName;
 
   value        ?:  any;
   invalid      ?:  string;
@@ -72,7 +72,7 @@ export function InputComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler      =  useInputHandler(props.name, value, validations, register, unregister, props.type == "file")
+  const inputHandler      =  useInputHandler(props.name, value, validations, register, props.type == "file")
   const randomId          =  useInputRandomId()
 
 
@@ -256,7 +256,7 @@ export function InputComponent({
           )}
 
           {leftIcon && (
-            <FontAwesomeIcon
+            <Icon
               className={cn(
                 "input-icon",
                 "input-icon-left",
@@ -271,7 +271,7 @@ export function InputComponent({
           )}
 
           {rightIcon && (
-            <FontAwesomeIcon
+            <Icon
               className={cn(
                 "input-icon",
                 "input-icon-right",

package/src/input/InputCheckbox.component.tsx

@@ -70,7 +70,7 @@ export function InputCheckboxComponent({
   // =========================>
   // ## initial
   // =========================>
-  const inputHandler = useInputHandler(name, value, validations, register, unregister, false)
+  const inputHandler = useInputHandler(name, value, validations, register, false)
 
 
   // =========================>

package/src/input/InputCurrency.component.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { InputHTMLAttributes, ReactNode } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
 import { cn, conversion, pcn, useInputHandler, useInputRandomId, useValidation, validation, ValidationRules } from "@utils";
 
 
@@ -11,8 +11,8 @@ type CT = "label" | "tip" | "error" | "input" | "icon";
 export interface InputCurrencyProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   label      ?:  string;
   tip        ?:  string | ReactNode;
-  leftIcon   ?:  any;
-  rightIcon  ?:  any;
+  leftIcon   ?:  IconName;
+  rightIcon  ?:  IconName;
 
   value        ?:  number;
   invalid      ?:  string;
@@ -55,7 +55,7 @@ export function InputCurrencyComponent({
   // =========================>
   // ## Initial
   // =========================>
-  const inputHandler = useInputHandler(props.name, value, validations, register, unregister, false)
+  const inputHandler = useInputHandler(props.name, value, validations, register, false)
   const randomId = useInputRandomId()
 
 
@@ -128,7 +128,7 @@ export function InputCurrencyComponent({
         />
 
         {leftIcon && (
-          <FontAwesomeIcon
+          <Icon
             className={cn(
               "input-icon",
               "input-icon-left",
@@ -142,7 +142,7 @@ export function InputCurrencyComponent({
           />
         )}
         {rightIcon && (
-          <FontAwesomeIcon
+          <Icon
             className={cn(
               "input-icon",
               "input-icon-right",