@skalfa/skalfa-component 1.0.7 → 1.0.9

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.7",
+  "version": "1.0.9",
   "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"],
+  "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

@@ -0,0 +1,87 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import { ReactNode, useEffect, useState } from "react";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "container" | "head" | "active" | "base";
+
+export interface AccordionProps {
+  setActive   ?:  number | null;
+  items        :  { head: ReactNode; content: ReactNode }[];
+  horizontal  ?:  boolean;
+  className   ?:  string;
+};
+
+
+
+export function AccordionComponent({
+  items,
+  setActive = null,
+  horizontal = false,
+
+  /** Use custom class with: "container::", "head::", "active::". */
+  className = "",
+}: AccordionProps) {
+  const [isActive, setIsActive] = useState<number | null>(setActive);
+
+  useEffect(() => {
+    setIsActive(setActive);
+  }, [setActive]);
+
+  return (
+    <div
+      className={cn(
+        "accordion",
+        horizontal ? "accordion-horizontal" : "accordion-vertical",
+        pcn<CT>(className, "container"),
+      )}
+    >
+      {items.map(({ head, content }, key) => (
+        <div
+          key={key}
+          className={cn(
+            "accordion-item",
+            horizontal ? "accordion-item-horizontal" : "accordion-item-vertical",
+          )}
+        >
+          <div
+            className={cn(
+              "accordion-head",
+              horizontal ? "accordion-head-horizontal" : "accordion-head-vertical",
+              pcn<CT>(className, "head"),
+            )}
+            onClick={() => setIsActive(isActive === key ? null : key)}
+          >
+            <div>{head}</div>
+            <div
+              className={cn(
+                "w-min transition-transform",
+                isActive !== key && "rotate-180",
+              )}
+            >
+              <Icon icon={horizontal ? "solid/chevron-left" : "solid/chevron-down"} />
+            </div>
+          </div>
+          <div
+            className={cn(
+              "accordion-content",
+              horizontal
+                ? isActive === key
+                  ? "accordion-content-horizontal-active"
+                  : "accordion-content-horizontal-inactive"
+                : isActive === key
+                ? "accordion-content-vertical-active"
+                : "accordion-content-vertical-inactive",
+              pcn<CT>(className, "base"),
+              isActive === key && pcn<CT>(className, "active"),
+            )}
+          >{content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/breadcrumb/Breadcrumb.component.tsx

@@ -0,0 +1,79 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import { Fragment, ReactNode } from "react";
+import Link from "next/link";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "container" | "active" | "base";
+
+export interface BreadcrumbItemProps {
+  path        :  string;
+  label       :  string;
+  className  ?:  string;
+};
+
+export interface BreadcrumbProps {
+  items              :  BreadcrumbItemProps[];
+  square            ?:  boolean;
+  separatorContent  ?:  string | ReactNode;
+
+  /** Use custom class with: "container::", "active::". */
+  className  ?:  string;
+};
+
+
+export function BreadcrumbComponent({
+  items,
+  className  =  "",
+  square     =  false,
+  separatorContent,
+}: BreadcrumbProps) {
+  return (
+    <nav
+      className={cn(
+        "breadcrumb",
+        pcn<CT>(className, "container"),
+      )}
+    >
+      <ol className="breadcrumb-list">
+        {items.map((item, index) => {
+          const isActive = index === items.length - 1;
+
+          return (
+            <Fragment key={item.path}>
+              <li>
+                <Link
+                  href={item.path}
+                  className={cn(
+                    "breadcrumb-link",
+                    square && "breadcrumb-link-square",
+                    isActive && !square && "breadcrumb-link-active",
+                    isActive && square && "breadcrumb-link-square-active",
+                    pcn<CT>(className, "base"),
+                    isActive && pcn<CT>(className, "active"),
+                  )}
+                >
+                  {item.label}
+                </Link>
+              </li>
+              
+              {!isActive && (
+                <li className="breadcrumb-separator">
+                  {separatorContent || (
+                    <Icon
+                      icon="solid/chevron-right"
+                    />
+                  )}
+                </li>
+              )}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/button/Button.component.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { ReactNode } from "react";
+import Link from "next/link";
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+import { cn, pcn } from "@utils";
+
+type CT = "icon" | "loading" | "base";
+
+export interface ButtonProps {
+  type      ?:  "submit" | "button";
+  label     ?:  string | ReactNode;
+  variant   ?:  "solid" | "outline" | "light" | "simple";
+  paint     ?:  "primary" | "secondary" | "success" | "danger" | "warning";
+  rounded   ?:  boolean | string;
+  block     ?:  boolean;
+  disabled  ?:  boolean;
+  size      ?:  "xs" | "sm" | "md" | "lg";
+  onClick   ?:  any;
+  href      ?:  string;
+  icon      ?:  IconName;
+  loading   ?:  boolean;
+  hover     ?:  boolean;
+  tips      ?:  string; // Tooltip / title attribute
+  title     ?:  string;
+
+  /** Use custom class with: "icon::", "loading::". */
+  className?: string;
+};
+
+export function ButtonComponent({
+  type       =  "button",
+  label,
+  variant    =  "solid",
+  paint      =  "primary",
+  rounded,
+  block,
+  disabled,
+  size       =  "md",
+  onClick,
+  href,
+  icon,
+  loading,
+  tips,
+  title,
+  className  =  "",
+}: ButtonProps) {
+  const isIconButton = icon && !label;
+
+  return (
+    <ButtonComponentWrapper
+      type={type}
+      className={cn(
+        "button",
+        `button-${variant}-${paint}`,
+        isIconButton ? `icon-button-${size}` : `button-${size}`,
+        rounded && "rounded-full",
+        !isIconButton && block && "w-full justify-center",
+        pcn<CT>(className, "base"),
+      )}
+      disabled={disabled || loading}
+      onClick={onClick}
+      href={href}
+      title={tips || title}
+    >
+      {loading ? (
+        <div className={cn("button-loading", pcn<CT>(className, "loading"))}></div>
+      ) : (
+        icon && (
+          <Icon
+            icon={icon}
+            className={cn("button-icon", pcn<CT>(className, "icon"))}
+          />
+        )
+      )}
+      {!isIconButton && label}
+    </ButtonComponentWrapper>
+  );
+}
+
+const ButtonComponentWrapper = ({ children, href, ...props }: ButtonProps & { children?: ReactNode }) => {
+  return !href ? (
+    <button {...(props as any)}>{children}</button>
+  ) : (
+    <Link href={href} {...(props as any)}>
+      {children}
+    </Link>
+  );
+};