@skalfa/skalfa-component 1.0.2 → 1.0.3

package/dist/src/table/FilterComponent.js

@@ -1,132 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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 _components_1 = require("@components");
-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" },
-    { label: "Tidak Sama", value: "ne" },
-    { label: "Termasuk", value: "in" },
-    { label: "Tidak Termasuk", value: "ni" },
-    { label: "Antara", value: "bw" },
-];
-const LOGIC_OPTIONS = [
-    { label: "Dan", value: "and" },
-    { label: "Atau", value: "or" },
-];
-const BOOKMARK_KEY = "filter-bookmarks";
-function FilterComponent({ columns, onChange, value, onMinimize, className = "", }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
-    const [filters, setFilters] = (0, react_1.useState)([]);
-    const [bookmarks, setBookmarks] = (0, react_1.useState)([]);
-    const handleChange = (index, key, value) => {
-        const updated = [...filters];
-        updated[index][key] = value;
-        if (key === "column") {
-            updated[index].type = "";
-            updated[index].value = "";
-        }
-        setFilters(updated);
-    };
-    const addFilter = () => {
-        setFilters([
-            ...filters,
-            { column: "", type: "", value: "", logic: filters.length ? "and" : undefined },
-        ]);
-    };
-    const removeFilter = (index) => {
-        const updated = filters.filter((_, i) => i !== index);
-        setFilters(updated);
-    };
-    (0, react_1.useEffect)(() => {
-        if (onChange)
-            onChange(filters);
-    }, [filters]);
-    (0, react_1.useEffect)(() => { }, [value]);
-    (0, react_1.useEffect)(() => {
-        setBookmarks(JSON.parse(localStorage.getItem(BOOKMARK_KEY) || "[]"));
-    }, []);
-    (0, react_1.useEffect)(() => {
-        localStorage.setItem(BOOKMARK_KEY, JSON.stringify(bookmarks));
-    }, [bookmarks]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("filter-panel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-header", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)((0, _utils_1.pcn)(className, "title")), children: "Filter" }), (0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-bookmarks-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_regular_svg_icons_1.faBookmark, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" }) }), !!bookmarks?.length && ((0, jsx_runtime_1.jsx)(_components_1.ChipComponent, { items: bookmarks.slice(0, 5).map((b) => b.name), onClick: (_, index) => setFilters(bookmarks[index]?.filters), onDelete: (_, index) => setBookmarks(bookmarks.filter((_, bi) => bi != index)) })), bookmarks?.length > 5 && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisH, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK_LIST") }))] }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRotate, label: "Bersihkan", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setFilters([]) }), onMinimize && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronUp, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: onMinimize }))] })] }), filters.map((f, i) => {
-                        const column = columns.find((c) => c.selector === f.column);
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-row", children: [i > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-logic", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_logic_${i}`, options: LOGIC_OPTIONS, placeholder: "Dan/Atau", value: f.logic, onChange: (e) => handleChange(i, "logic", e), className: "filter-input-field" }) })), (0, jsx_runtime_1.jsx)("div", { className: i > 0 ? "filter-col-column-with-logic" : "filter-col-column", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_column_${i}`, options: columns.map((c) => ({
-                                            label: c.label,
-                                            value: c.selector,
-                                        })), placeholder: "Kolom", value: f.column, onChange: (e) => handleChange(i, "column", e), className: "filter-input-field" }) }), (0, jsx_runtime_1.jsx)("div", { className: "filter-col-operator", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_operator_${i}`, options: FILTER_OPERATORS, placeholder: "Operator", value: f.type, onChange: (e) => handleChange(i, "type", e), className: "filter-input-field" }) }), isSm && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" })), column && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-value", children: (0, jsx_runtime_1.jsx)(InputFilterValueComponent, { type: column.type, name: `filter_value_${i}`, placeholder: "...", value: f.value || "", onChange: (e) => handleChange(i, "value", e), options: column.type === "select" && column.options ? column.options : [], className: "filter-input-field", between: f.type === "bw", multiple: ["in", "ni"].includes(f.type || "") }) })), !isSm && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" }))] }, i));
-                    }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Tambahkan", icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", size: isSm ? "xs" : "sm", onClick: addFilter, className: "filter-add-btn" })] }), (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK_LIST"], onClose: () => setToggle("MODAL_BOOKMARK_LIST", false), title: "Bookmark Filter", children: (0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-list-container", children: bookmarks?.length ? bookmarks?.map((b, key) => ((0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-row", children: [(0, jsx_runtime_1.jsx)("p", { className: "filter-bookmark-name", children: b.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", className: "", size: "xs", onClick: () => {
-                                            setFilters(b.filters);
-                                            setToggle("MODAL_BOOKMARK_LIST", false);
-                                        } }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "outline", paint: "danger", className: "", size: "xs", onClick: () => setBookmarks(bookmarks.filter((_, bi) => bi != key)) })] })] }, key))) : ((0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-empty-text", children: " -- Tidak ada Bookmark --" })) }) }), (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK"], onClose: () => setToggle("MODAL_BOOKMARK", false), title: "Bookmark Filter", footer: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Terapkan", onClick: () => {
-                            let updated = [];
-                            if (toggle["MODAL_BOOKMARK"]?.bookmark_id == "new") {
-                                const newBookmark = {
-                                    id: crypto.randomUUID(),
-                                    name: toggle["MODAL_BOOKMARK"]?.bookmark_name || "Tanpa Nama",
-                                    filters,
-                                    createdAt: Date.now(),
-                                };
-                                updated = [newBookmark, ...bookmarks];
-                            }
-                            else {
-                                updated = bookmarks.map(b => b.id === toggle["MODAL_BOOKMARK"]?.bookmark_id
-                                    ? { ...b, filters, createdAt: Date.now() }
-                                    : b);
-                            }
-                            setBookmarks(updated);
-                            setToggle("MODAL_BOOKMARK", false);
-                        } }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-form-container", children: [(0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `bookmark_id`, placeholder: "Pilih bookmark filter...", value: toggle["MODAL_BOOKMARK"]?.bookmark_id ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_id: e }), options: [
-                                {
-                                    label: "-- BOOKMARK BARU --",
-                                    value: "new",
-                                },
-                                ...bookmarks.map((b) => ({
-                                    label: b.name,
-                                    value: b.id,
-                                }))
-                            ] }), toggle["MODAL_BOOKMARK"]?.bookmark_id == "new" && ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: "bookmark_name", placeholder: "Masukkan nama bookmark...", value: toggle["MODAL_BOOKMARK"]?.bookmark_name ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_name: e }), className: "filter-bookmark-form-input" }))] }) })] }));
-}
-function InputFilterValueComponent({ type, name, value, onChange, options = [], placeholder = "", className = "", between, multiple, }) {
-    const resolvedType = type || "text";
-    if (!between) {
-        switch (resolvedType) {
-            case "select":
-                return ((0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: name, options: options, placeholder: placeholder, value: options.find((o) => o.value === value)?.label, onChange: onChange, className: className }));
-            case "number":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputNumberComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
-            case "currency":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputCurrencyComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className }));
-            case "date":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputDateComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className }));
-            default:
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
-        }
-    }
-    const val = Array.isArray(value) ? value : ["", ""];
-    const [from, to] = val;
-    const renderInput = (pos) => {
-        const currentValue = pos === "from" ? from : to;
-        const handle = (v) => onChange(pos === "from" ? [v, to] : [from, v]);
-        switch (resolvedType) {
-            case "number":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputNumberComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-            case "currency":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputCurrencyComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-            case "date":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputDateComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-            default:
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: (e) => handle(e.target.value), placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-between-container", children: [renderInput("from"), (0, jsx_runtime_1.jsx)("span", { children: "s/d" }), renderInput("to")] }));
-}

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

@@ -1,8 +0,0 @@
-export interface PaginationProps {
-    totalRow: number;
-    paginate: number;
-    page: number;
-    onChange?: (totalRow: number, paginate: number, page: number) => void;
-    className?: string;
-}
-export declare function PaginationComponent({ paginate, page, totalRow, onChange, className, }: PaginationProps): import("react").JSX.Element | null;

package/dist/src/table/Pagination.component.js

@@ -1,32 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationComponent = PaginationComponent;
-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 react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-function PaginationComponent({ paginate = 10, page = 1, totalRow = 0, onChange, className = "", }) {
-    const [pages, setPages] = (0, react_1.useState)([]);
-    const lastPage = Math.ceil(totalRow / paginate);
-    (0, react_1.useEffect)(() => {
-        let newPages = [];
-        if (totalRow > paginate) {
-            const start = Math.max(1, page - 1);
-            const end = Math.min(lastPage, page + 1);
-            newPages = Array.from({ length: end - start + 1 }, (_, i) => start + i);
-        }
-        else {
-            newPages = [1];
-        }
-        setPages(newPages);
-    }, [totalRow, page, paginate]);
-    if (!totalRow)
-        return null;
-    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)(_components_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)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronLeft, onClick: () => onChange?.(totalRow, paginate, page - 1), size: "sm" })), page < lastPage && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronRight, onClick: () => onChange?.(totalRow, paginate, page + 1), size: "sm" }))] }))] })] }));
-}

package/dist/src/table/Table.component.d.ts

@@ -1,61 +0,0 @@
-import { ReactNode } from "react";
-import { ApiFilterType } from "@utils";
-import { ControlBarOptionType, PaginationProps, SwipeActionType } from "@components";
-export interface TableColumnType {
-    selector: string;
-    label: string | ReactNode;
-    width?: string;
-    sortable?: boolean;
-    searchable?: boolean;
-    filterable?: boolean | {
-        type: "text" | "number" | "currency" | "date";
-    } | {
-        type: "select";
-        options: {
-            label: string;
-            value: any;
-        }[];
-    };
-    className?: string;
-    item?: (data: any) => string | ReactNode;
-    tip?: string | ((data: any) => string);
-}
-export interface TableProps {
-    id?: string;
-    controlBar?: false | ControlBarOptionType[];
-    columns: TableColumnType[];
-    data: Record<string, any>[];
-    pagination?: PaginationProps | false;
-    loading?: boolean;
-    sortBy?: string[];
-    onChangeSortBy?: (sort: string[]) => void;
-    search?: string;
-    onChangeSearch?: (search: string) => void;
-    searchableColumn?: string[];
-    onChangeSearchableColumn?: (column: string) => void;
-    filter?: ApiFilterType[];
-    onChangeFilter?: (filters: ApiFilterType[]) => void;
-    checks?: (string | number)[];
-    onChangeChecks?: (checks: (string | number)[]) => void;
-    actionBulking?: ((checks: (string | number)[]) => ReactNode) | false;
-    focus?: number | null;
-    setFocus?: (focus: number | null) => void;
-    onRowClick?: (data: Record<string, any>, key: number) => void;
-    onRefresh?: () => void;
-    block?: boolean;
-    noIndex?: boolean;
-    responsiveControl?: {
-        mobile?: {
-            item?: (item: Record<string, any>, key: number) => ReactNode;
-            leftActionControl?: Omit<SwipeActionType, "onAction"> & {
-                onAction?: (item: Record<string, any>, key?: number) => void;
-            };
-            rightActionControl?: Omit<SwipeActionType, "onAction"> & {
-                onAction?: (item: Record<string, any>, key?: number) => void;
-            };
-        };
-    };
-    /** Use custom class with: "controller-bar::", "head-column::", "column::", "floating-action::", "row::". */
-    className?: string;
-}
-export declare function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className, }: TableProps): import("react").JSX.Element;

package/dist/src/table/Table.component.js

@@ -1,101 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableComponent = TableComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-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 _components_1 = require("@components");
-function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
-    const [displayColumns, setDisplayColumns] = (0, react_1.useState)([]);
-    const [showFloatingAction, setShowFloatingAction] = (0, react_1.useState)(false);
-    const [floatingActionActive, setFloatingActionActive] = (0, react_1.useState)(false);
-    const [keyword, setKeyword] = (0, react_1.useState)("");
-    const [keywordSearch] = (0, _utils_1.useLazySearch)(keyword);
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const actionColumnRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (columns)
-            setDisplayColumns([...columns.map((column) => column.selector)]);
-    }, [columns]);
-    (0, react_1.useEffect)(() => {
-        setKeyword(search || "");
-    }, [search]);
-    (0, react_1.useEffect)(() => {
-        keywordSearch ? onChangeSearch?.(keywordSearch) : onChangeSearch?.("");
-        if (pagination != false) {
-            pagination?.onChange?.(pagination.totalRow, pagination.paginate, 1);
-        }
-    }, [keywordSearch]);
-    const columnMapping = (0, react_1.useMemo)(() => {
-        return (columns?.filter((column) => displayColumns.includes(column.selector)) || []);
-    }, [columns, displayColumns]);
-    const numberOfRow = (key) => pagination && (pagination?.page || 1) != 1 ? pagination?.paginate * ((pagination?.page || 1) - 1) + key + 1 : key + 1;
-    function renderHead() {
-        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));
-            }) }));
-    }
-    function renderItem(item, itemKey) {
-        const itemMapping = columnMapping.map((column) => {
-            if (column?.item) {
-                return column.item(item);
-            }
-            const value = item[column.selector];
-            if ((0, react_1.isValidElement)(value)) {
-                return value;
-            }
-            if (value === null || value === undefined) {
-                return "-";
-            }
-            if (typeof value === "object") {
-                return JSON.stringify(value);
-            }
-            return value;
-        });
-        if (!isSm || !responsiveControl?.mobile) {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: itemMapping?.map((one, key) => {
-                    const column = columnMapping?.[key];
-                    let title = one;
-                    if (column?.tip) {
-                        if (typeof column.tip === "string") {
-                            title = item[column.tip]?.toString() || "-";
-                        }
-                        else if (typeof column.tip === "function") {
-                            title = column.tip(item);
-                        }
-                    }
-                    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column", onRowClick && "cursor-pointer", (0, _utils_1.pcn)(className, "column")), style: { width: columnMapping?.at(key)?.width || 200 }, onClick: () => onRowClick?.(item, itemKey), title: title, children: one }, key));
-                }) }));
-        }
-        else {
-            const { onAction: onLeftAction, ...restLeftAction } = responsiveControl?.mobile?.leftActionControl || {};
-            const { onAction: onRightAction, ...restRightAction } = responsiveControl?.mobile?.rightActionControl || {};
-            return ((0, jsx_runtime_1.jsx)(_components_1.SwipeComponent, { className: "rounded-lg", leftActionControl: !!responsiveControl?.mobile?.leftActionControl ? {
-                    ...restLeftAction,
-                    ...(onLeftAction ? { onAction: () => onLeftAction?.(item, itemKey) } : {})
-                } : undefined, rightActionControl: !!responsiveControl?.mobile?.rightActionControl ? {
-                    ...restRightAction,
-                    ...(onRightAction ? { onAction: () => onRightAction?.(item, itemKey) } : {})
-                } : undefined, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => onRowClick?.(item, itemKey), children: responsiveControl?.mobile?.item ? responsiveControl?.mobile?.item(item, itemKey) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: Object.values(itemMapping)[0] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: Object.values(itemMapping)[1] })] })) }) }));
-        }
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative", (0, _utils_1.pcn)(className, "base")), children: [controlBar != false && ((0, jsx_runtime_1.jsx)(_components_1.ControlBarComponent, { id: id, options: !controlBar ? ["SEARCH", "SELECTABLE", "REFRESH"] : controlBar, searchableOptions: columns?.filter((c) => c.searchable), onSearchable: (e) => onChangeSearchableColumn?.(String(e)), searchable: searchableColumn || [], onSearch: (e) => setKeyword(e), search: keyword, selectableOptions: columns, onSelectable: (e) => setDisplayColumns(e), selectable: displayColumns, sortableOptions: columns?.filter((c) => c.sortable), sort: sortBy, onSort: (sort) => onChangeSortBy?.(sort), onRefresh: () => onRefresh?.(), filterableColumns: columns?.filter((c) => !!c?.filterable)?.map((c) => ({
-                    label: c.label,
-                    selector: c.selector,
-                    type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
-                    options: typeof c?.filterable == "object" && c?.filterable?.type == "select" ? c?.filterable?.options : undefined
-                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(_components_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: "w-full", onScroll: (e) => {
-                        actionColumnRef.current?.clientWidth && e.scrollLeft &&
-                            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)(_components_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)(_components_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)(_components_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));
-                                    }) })] })) : ((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)(_components_1.PaginationComponent, { ...pagination }) })), pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-mobile", children: (0, jsx_runtime_1.jsx)(_components_1.PaginationComponent, { ...pagination }) }))] }));
-}

package/dist/src/typography/TypographyArticle.component.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-export interface TypographyArticleProps {
-    title: string | ReactNode;
-    content: string | ReactNode;
-    header?: string | ReactNode;
-    footer?: string | ReactNode;
-}
-export declare function TypographyArticleComponent({ title, content, header, footer, }: TypographyArticleProps): import("react").JSX.Element;

package/dist/src/typography/TypographyArticle.component.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypographyArticleComponent = TypographyArticleComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function TypographyArticleComponent({ title, content, header, footer, }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h4", { className: "typography-article-header", children: header }), (0, jsx_runtime_1.jsx)("h1", { className: "typography-article-title", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "typography-article-content", children: content }), (0, jsx_runtime_1.jsx)("div", { className: "typography-article-footer", children: footer })] }));
-}

package/dist/src/typography/TypographyColumn.component.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export interface TypographyColumnProps {
-    title: string | ReactNode;
-    content: string | ReactNode;
-}
-export declare function TypographyColumnComponent({ title, content, }: TypographyColumnProps): import("react").JSX.Element;

package/dist/src/typography/TypographyColumn.component.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypographyColumnComponent = TypographyColumnComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function TypographyColumnComponent({ title, content, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "typography-column-title", children: title }), (0, jsx_runtime_1.jsx)("div", { children: content })] }) }));
-}

package/dist/src/typography/TypographyContent.component.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export interface TypographyContentProps {
-    title: string | ReactNode;
-    content: string | ReactNode;
-}
-export declare function TypographyContentComponent({ title, content, }: TypographyContentProps): import("react").JSX.Element;

package/dist/src/typography/TypographyContent.component.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypographyContentComponent = TypographyContentComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function TypographyContentComponent({ title, content, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "typography-content-title", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "typography-content-body", children: content })] }) }));
-}

package/dist/src/typography/TypographyTips.component.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export interface TypographyTipsProps {
-    title: string | ReactNode;
-    content: string | ReactNode;
-}
-export declare function TypographyTipsComponent({ title, content, }: TypographyTipsProps): import("react").JSX.Element;

package/dist/src/typography/TypographyTips.component.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypographyTipsComponent = TypographyTipsComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function TypographyTipsComponent({ title, content, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "typography-tips", children: [(0, jsx_runtime_1.jsx)("p", { className: "typography-tips-title", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "typography-tips-body", children: content })] }) }));
-}

package/dist/src/wrap/Draggable.component.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-type SpringConfig = {
-    stiffness?: number;
-    damping?: number;
-    mass?: number;
-    stopThreshold?: number;
-};
-type Bounds = {
-    left?: number;
-    top?: number;
-    right?: number;
-    bottom?: number;
-};
-type DraggableProps = {
-    children?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-    initial?: {
-        x?: number;
-        y?: number;
-    };
-    bounds?: Bounds;
-    spring?: SpringConfig;
-    onDrag?: (state: {
-        x: number;
-        y: number;
-        vx: number;
-        vy: number;
-        dragging: boolean;
-    }) => void;
-    useTranslate3d?: boolean;
-};
-export declare const DraggableComponent: import("react").ForwardRefExoticComponent<DraggableProps & import("react").RefAttributes<unknown>>;
-export {};