@skalfa/skalfa-component 1.0.0 → 1.0.3

package/dist/table/Pagination.component.js

@@ -7,7 +7,8 @@ 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");
+const Button_component_1 = require("../button/Button.component");
+const InputRadio_component_1 = require("../input/InputRadio.component");
 function PaginationComponent({ paginate = 10, page = 1, totalRow = 0, onChange, className = "", }) {
     const [pages, setPages] = (0, react_1.useState)([]);
     const lastPage = Math.ceil(totalRow / paginate);
@@ -25,8 +26,8 @@ function PaginationComponent({ paginate = 10, page = 1, totalRow = 0, onChange,
     }, [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) => ({
+    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)(_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" }))] }))] })] }));
+                        })), 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" }))] }))] })] }));
 }

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

@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
 import { ApiFilterType } from "@utils";
-import { ControlBarOptionType, PaginationProps, SwipeActionType } from "@components";
+import { ControlBarOptionType } from "./ControlBar.component";
+import { PaginationProps } from "./Pagination.component";
+import { SwipeActionType } from "../wrap/Swipe.component";
 export interface TableColumnType {
     selector: string;
     label: string | ReactNode;
@@ -58,4 +60,4 @@ export interface TableProps {
     /** 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;
+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("@types/react").JSX.Element;

package/dist/table/Table.component.js

@@ -7,7 +7,11 @@ 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");
+const ControlBar_component_1 = require("./ControlBar.component");
+const Pagination_component_1 = require("./Pagination.component");
+const ScrollContainer_component_1 = require("../wrap/ScrollContainer.component");
+const Checkbox_component_1 = require("../input/Checkbox.component");
+const Swipe_component_1 = require("../wrap/Swipe.component");
 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);
@@ -75,7 +79,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
         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 ? {
+            return ((0, jsx_runtime_1.jsx)(Swipe_component_1.SwipeComponent, { className: "rounded-lg", leftActionControl: !!responsiveControl?.mobile?.leftActionControl ? {
                     ...restLeftAction,
                     ...(onLeftAction ? { onAction: () => onLeftAction?.(item, itemKey) } : {})
                 } : undefined, rightActionControl: !!responsiveControl?.mobile?.rightActionControl ? {
@@ -84,18 +88,18 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
                 } : 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) => ({
+    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)(ControlBar_component_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) => {
+                })), 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)(ScrollContainer_component_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 &&
+                    }, 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));
                                     }) })] })) : ((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 }) }))] }));
+                            }) })) })) }) }), !!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/typography/TypographyArticle.component.d.ts

@@ -5,4 +5,4 @@ export interface TypographyArticleProps {
     header?: string | ReactNode;
     footer?: string | ReactNode;
 }
-export declare function TypographyArticleComponent({ title, content, header, footer, }: TypographyArticleProps): import("react").JSX.Element;
+export declare function TypographyArticleComponent({ title, content, header, footer, }: TypographyArticleProps): import("@types/react").JSX.Element;

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

@@ -3,4 +3,4 @@ export interface TypographyColumnProps {
     title: string | ReactNode;
     content: string | ReactNode;
 }
-export declare function TypographyColumnComponent({ title, content, }: TypographyColumnProps): import("react").JSX.Element;
+export declare function TypographyColumnComponent({ title, content, }: TypographyColumnProps): import("@types/react").JSX.Element;

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

@@ -3,4 +3,4 @@ export interface TypographyContentProps {
     title: string | ReactNode;
     content: string | ReactNode;
 }
-export declare function TypographyContentComponent({ title, content, }: TypographyContentProps): import("react").JSX.Element;
+export declare function TypographyContentComponent({ title, content, }: TypographyContentProps): import("@types/react").JSX.Element;

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

@@ -3,4 +3,4 @@ export interface TypographyTipsProps {
     title: string | ReactNode;
     content: string | ReactNode;
 }
-export declare function TypographyTipsComponent({ title, content, }: TypographyTipsProps): import("react").JSX.Element;
+export declare function TypographyTipsComponent({ title, content, }: TypographyTipsProps): import("@types/react").JSX.Element;

package/dist/wrap/Image.component.d.ts

@@ -1,2 +1,2 @@
 import { ImageProps } from "next/image";
-export declare function ImageComponent(props: ImageProps): import("react").JSX.Element;
+export declare function ImageComponent(props: ImageProps): import("@types/react").JSX.Element;

package/dist/wrap/ScrollContainer.component.d.ts

@@ -7,4 +7,4 @@ export interface ScrollContainerProps {
     /** Use custom class with: "container::", "floating-scroll::"". */
     className?: string;
 }
-export declare function ScrollContainerComponent({ children, footer, className, scrollFloating, onScroll, }: ScrollContainerProps): import("react").JSX.Element;
+export declare function ScrollContainerComponent({ children, footer, className, scrollFloating, onScroll, }: ScrollContainerProps): import("@types/react").JSX.Element;

package/dist/wrap/ShortcutProvider.d.ts

@@ -1 +1 @@
-export declare function ShortcutProvider(): import("react").JSX.Element;
+export declare function ShortcutProvider(): import("@types/react").JSX.Element;

package/dist/wrap/ShortcutProvider.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const _utils_1 = require("@utils");
 const _contexts_1 = require("@contexts");
-const _components_1 = require("@components");
+const Modal_component_1 = require("../modal/Modal.component");
 function ShortcutProvider() {
     const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
     const shortcuts = _utils_1.shortcut.list();
@@ -38,5 +38,5 @@ function ShortcutProvider() {
         })
             .join(" + ");
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_SHORTCUT_HELP"], onClose: () => setToggle("MODAL_SHORTCUT_HELP"), title: "Shortcut", children: (0, jsx_runtime_1.jsx)("div", { className: "shortcut-help-grid", children: shortcuts.map(({ key, description }) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "shortcut-key-badge", children: formatShortcutKey(key) }), (0, jsx_runtime_1.jsxs)("span", { children: [": ", description] })] }, key))) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: !!toggle["MODAL_SHORTCUT_HELP"], onClose: () => setToggle("MODAL_SHORTCUT_HELP"), title: "Shortcut", children: (0, jsx_runtime_1.jsx)("div", { className: "shortcut-help-grid", children: shortcuts.map(({ key, description }) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "shortcut-key-badge", children: formatShortcutKey(key) }), (0, jsx_runtime_1.jsxs)("span", { children: [": ", description] })] }, key))) }) }) }));
 }

package/dist/wrap/Swipe.component.d.ts

@@ -11,4 +11,4 @@ export type SwipeProps = {
     children?: ReactNode;
     className?: string;
 };
-export declare function SwipeComponent({ leftActionControl, rightActionControl, children, className, }: SwipeProps): import("react").JSX.Element;
+export declare function SwipeComponent({ leftActionControl, rightActionControl, children, className, }: SwipeProps): import("@types/react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Core reusable UI components for Skalfa applications.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json"
+    "build": "tsc -p tsconfig.json",
+    "postbuild": "bun fix-exports.js"
   },
   "keywords": [
     "skalfa",
@@ -19,7 +20,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@skalfa/skalfa-app-core": "^1.0.0",
+    "@skalfa/skalfa-app-core": "^1.0.11",
     "next": "^15.0.0 || ^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/dist/src/accordion/Accordion.component.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-export interface AccordionProps {
-    setActive?: number | null;
-    items: {
-        head: ReactNode;
-        content: ReactNode;
-    }[];
-    horizontal?: boolean;
-    className?: string;
-}
-export declare function AccordionComponent({ items, setActive, horizontal, 
-/** Use custom class with: "container::", "head::", "active::". */
-className, }: AccordionProps): import("react").JSX.Element;

package/dist/src/accordion/Accordion.component.js

@@ -1,25 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionComponent = AccordionComponent;
-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");
-;
-function AccordionComponent({ items, setActive = null, horizontal = false, 
-/** Use custom class with: "container::", "head::", "active::". */
-className = "", }) {
-    const [isActive, setIsActive] = (0, react_1.useState)(setActive);
-    (0, react_1.useEffect)(() => {
-        setIsActive(setActive);
-    }, [setActive]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion", horizontal ? "accordion-horizontal" : "accordion-vertical", (0, _utils_1.pcn)(className, "container")), children: items.map(({ head, content }, key) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("accordion-item", horizontal ? "accordion-item-horizontal" : "accordion-item-vertical"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("accordion-head", horizontal ? "accordion-head-horizontal" : "accordion-head-vertical", (0, _utils_1.pcn)(className, "head")), onClick: () => setIsActive(isActive === key ? null : key), children: [(0, jsx_runtime_1.jsx)("div", { children: head }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-min transition-transform", isActive !== key && "rotate-180"), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: horizontal ? free_solid_svg_icons_1.faChevronLeft : free_solid_svg_icons_1.faChevronDown }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("accordion-content", horizontal
-                        ? isActive === key
-                            ? "accordion-content-horizontal-active"
-                            : "accordion-content-horizontal-inactive"
-                        : isActive === key
-                            ? "accordion-content-vertical-active"
-                            : "accordion-content-vertical-inactive", (0, _utils_1.pcn)(className, "base"), isActive === key && (0, _utils_1.pcn)(className, "active")), children: content })] }, key))) }));
-}

package/dist/src/breadcrumb/Breadcrumb.component.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-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 declare function BreadcrumbComponent({ items, className, square, separatorContent, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/src/breadcrumb/Breadcrumb.component.js

@@ -1,21 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BreadcrumbComponent = BreadcrumbComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const link_1 = __importDefault(require("next/link"));
-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");
-;
-;
-function BreadcrumbComponent({ items, className = "", square = false, separatorContent, }) {
-    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("breadcrumb", (0, _utils_1.pcn)(className, "container")), children: (0, jsx_runtime_1.jsx)("ol", { className: "breadcrumb-list", children: items.map((item, index) => {
-                const isActive = index === items.length - 1;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, className: (0, _utils_1.cn)("breadcrumb-link", square && "breadcrumb-link-square", isActive && !square && "breadcrumb-link-active", isActive && square && "breadcrumb-link-square-active", (0, _utils_1.pcn)(className, "base"), isActive && (0, _utils_1.pcn)(className, "active")), children: item.label }) }), !isActive && ((0, jsx_runtime_1.jsx)("li", { className: "breadcrumb-separator", children: separatorContent || ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight })) }))] }, item.path));
-            }) }) }));
-}

package/dist/src/button/Button.component.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-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?: any;
-    loading?: boolean;
-    hover?: boolean;
-    tips?: string;
-    title?: string;
-    /** Use custom class with: "icon::", "loading::". */
-    className?: string;
-}
-export declare function ButtonComponent({ type, label, variant, paint, rounded, block, disabled, size, onClick, href, icon, loading, tips, title, className, }: ButtonProps): import("react").JSX.Element;

package/dist/src/button/Button.component.js

@@ -1,19 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonComponent = ButtonComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-;
-function ButtonComponent({ type = "button", label, variant = "solid", paint = "primary", rounded, block, disabled, size = "md", onClick, href, icon, loading, tips, title, className = "", }) {
-    const isIconButton = icon && !label;
-    return ((0, jsx_runtime_1.jsxs)(ButtonComponentWrapper, { type: type, className: (0, _utils_1.cn)("button", `button-${variant}-${paint}`, isIconButton ? `icon-button-${size}` : `button-${size}`, rounded && "rounded-full", !isIconButton && block && "w-full justify-center", (0, _utils_1.pcn)(className, "base")), disabled: disabled || loading, onClick: onClick, href: href, title: tips || title, children: [loading ? ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("button-loading", (0, _utils_1.pcn)(className, "loading")) })) : (icon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon, className: (0, _utils_1.cn)("button-icon", (0, _utils_1.pcn)(className, "icon")) }))), !isIconButton && label] }));
-}
-const ButtonComponentWrapper = ({ children, href, ...props }) => {
-    return !href ? ((0, jsx_runtime_1.jsx)("button", { ...props, children: children })) : ((0, jsx_runtime_1.jsx)(link_1.default, { href: href, ...props, children: children }));
-};

package/dist/src/card/AlertCard.component.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-export interface AlertCardProps {
-    title?: string | ReactNode;
-    leftContent?: string | ReactNode;
-    badge?: string | ReactNode;
-    content?: string | ReactNode;
-    footer?: string | ReactNode;
-    /** Use custom class with: "badge::", "title::". */
-    className?: string;
-}
-export declare function AlertCardComponent({ title, leftContent, badge, content, footer, className, }: AlertCardProps): import("react").JSX.Element;

package/dist/src/card/AlertCard.component.js

@@ -1,9 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertCardComponent = AlertCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _utils_1 = require("@utils");
-function AlertCardComponent({ title, leftContent, badge, content, footer, className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("section", { className: (0, _utils_1.cn)("alert-card", (0, _utils_1.pcn)(className, "base")), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start sm:gap-8", children: [leftContent, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, _utils_1.cn)("alert-card-badge", (0, _utils_1.pcn)(className, "badge")), children: badge }), (0, jsx_runtime_1.jsx)("h3", { className: (0, _utils_1.cn)("alert-card-title", (0, _utils_1.pcn)(className, "title")), children: title }), content, footer && (0, jsx_runtime_1.jsx)("div", { className: "pt-4", children: footer })] })] }) }) }));
-}

package/dist/src/card/Card.component.d.ts

@@ -1,5 +0,0 @@
-export interface CardProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export declare function CardComponent({ children, className, }: CardProps): import("react").JSX.Element;

package/dist/src/card/Card.component.js

@@ -1,9 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardComponent = CardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const _utils_1 = require("@utils");
-function CardComponent({ children, className, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("card", className), children: children }) }));
-}

package/dist/src/card/DashboardCard.component.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-export interface DashboardCardProps {
-    content?: string | ReactNode;
-    title?: string | ReactNode;
-    rightContent?: string | ReactNode;
-    path?: string;
-    className?: string;
-}
-export declare function DashboardCardComponent({ content, title, rightContent, path, className, }: DashboardCardProps): import("react").JSX.Element;

package/dist/src/card/DashboardCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardCardComponent = DashboardCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const _utils_1 = require("@utils");
-function DashboardCardComponent({ content, title, rightContent, path, className, }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(link_1.default, { href: path || "", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("dashboard-card", className), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 items-center", children: content }), title] }), (0, jsx_runtime_1.jsx)("div", { children: rightContent })] }) }) }));
-}

package/dist/src/card/GalleryCard.component.d.ts

@@ -1,7 +0,0 @@
-export interface GalleryCardProps {
-    src: string;
-    alt?: string;
-    /** Use custom class with: "label::", "image::". */
-    className?: string;
-}
-export declare function GalleryCardComponent({ src, alt, className, }: GalleryCardProps): import("react").JSX.Element;

package/dist/src/card/GalleryCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GalleryCardComponent = GalleryCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const _utils_1 = require("@utils");
-function GalleryCardComponent({ src, alt = "", className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.pcn)(className, "base"), children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: src, alt: src, width: 400, height: 300, className: (0, _utils_1.cn)("gallery-card-image", (0, _utils_1.pcn)(className, "image")) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("gallery-card-label", (0, _utils_1.pcn)(className, "label")), children: alt })] }) }));
-}

package/dist/src/card/ProductCard.component.d.ts

@@ -1,9 +0,0 @@
-export interface ProductCardProps {
-    name: string;
-    price?: string;
-    image?: string;
-    description?: string | React.ReactNode;
-    /** Use custom class with: "image::", "content::". */
-    className?: string;
-}
-export declare function ProductCardComponent({ image, name, price, description, className, }: ProductCardProps): import("react").JSX.Element;

package/dist/src/card/ProductCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductCardComponent = ProductCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const _utils_1 = require("@utils");
-function ProductCardComponent({ image = "", name, price, description, className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("product-card", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: image, alt: image, width: 400, height: 300, className: (0, _utils_1.cn)("product-card-image", (0, _utils_1.pcn)(className, "image")) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("p-2", (0, _utils_1.pcn)(className, "content")), children: [(0, jsx_runtime_1.jsxs)("dl", { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("dt", { className: "sr-only", children: "Name" }), (0, jsx_runtime_1.jsx)("dd", { className: "text-sm", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("dt", { className: "sr-only", children: "Price" }), (0, jsx_runtime_1.jsx)("dd", { className: "font-semibold", children: price })] })] }), description && (0, jsx_runtime_1.jsx)("div", { children: description })] })] }) }));
-}

package/dist/src/card/ProfileCard.component.d.ts

@@ -1,10 +0,0 @@
-export interface ProfileCardProps {
-    name: string;
-    short?: string;
-    image?: string;
-    description?: string | React.ReactNode;
-    footer?: string | React.ReactNode;
-    /** Use custom class with: "image::", "content::". */
-    className?: string;
-}
-export declare function ProfileCardComponent({ image, name, short, description, footer, className, }: ProfileCardProps): import("react").JSX.Element;

package/dist/src/card/ProfileCard.component.js

@@ -1,13 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileCardComponent = ProfileCardComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const image_1 = __importDefault(require("next/image"));
-const _utils_1 = require("@utils");
-function ProfileCardComponent({ image = "", name, short, description, footer, className = "", }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("profile-card", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute inset-x-0 bottom-0 h-1 bg-primary" }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:flex sm:gap-4 sm:items-center", children: [image && ((0, jsx_runtime_1.jsx)("div", { className: "hidden sm:block sm:shrink-0", children: (0, jsx_runtime_1.jsx)(image_1.default, { src: image, alt: image, width: 400, height: 400, className: (0, _utils_1.cn)("profile-card-image", (0, _utils_1.pcn)(className, "image")) }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.pcn)(className, "content"), children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold sm:text-xl", children: name }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs font-medium text-light-foreground", children: short })] })] }), description, footer && (0, jsx_runtime_1.jsx)("dl", { className: "mt-4", children: footer })] }) }));
-}

package/dist/src/carousel/Carousel.component.d.ts

@@ -1,13 +0,0 @@
-interface CarouselItem {
-    background: string;
-    content?: string;
-}
-interface CarouselProps {
-    items: CarouselItem[];
-    noButton?: boolean;
-    noNavigation?: boolean;
-    /** Use custom class with: "item::", "prev-button::", "next-button::", "navigation::". */
-    className?: string;
-}
-export declare function CarouselComponent({ items, className, noButton, noNavigation, }: CarouselProps): import("react").JSX.Element;
-export {};

package/dist/src/carousel/Carousel.component.js

@@ -1,37 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselComponent = CarouselComponent;
-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");
-function CarouselComponent({ items, className = "", noButton, noNavigation, }) {
-    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
-    const touchStartX = (0, react_1.useRef)(null);
-    const touchEndX = (0, react_1.useRef)(null);
-    const intervalRef = (0, react_1.useRef)(null);
-    const handlePrev = () => setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
-    const handleNext = () => setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
-    const handleTouchStart = (e) => {
-        touchStartX.current = e.touches[0].clientX;
-    };
-    const handleTouchEnd = (e) => {
-        touchEndX.current = e.changedTouches[0].clientX;
-        if (touchStartX.current !== null && touchEndX.current !== null) {
-            if (touchStartX.current - touchEndX.current > 50)
-                handleNext();
-            if (touchEndX.current - touchStartX.current > 50)
-                handlePrev();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        intervalRef.current = setInterval(handleNext, 10000);
-        return () => {
-            if (intervalRef.current)
-                clearInterval(intervalRef.current);
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("carousel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: "carousel-inner", style: { transform: `translateX(-${currentIndex * 100}%)` }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-item", (0, _utils_1.pcn)(className, "item")), style: { backgroundImage: `url(${item.background})` }, children: item.content }, index))) }), !noNavigation && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("carousel-navigation", (0, _utils_1.pcn)(className, "navigation")), children: items.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { className: `carousel-indicator ${currentIndex === index ? "carousel-indicator-active" : ""}`, onClick: () => setCurrentIndex(index) }, index))) })), !noButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-prev-btn", (0, _utils_1.pcn)(className, "prev-button")), onClick: handlePrev, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) }), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("carousel-btn carousel-next-btn", (0, _utils_1.pcn)(className, "next-button")), onClick: handleNext, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) })] }))] }));
-}

package/dist/src/chip/Chip.component.d.ts

@@ -1,6 +0,0 @@
-export declare function ChipComponent({ items, onClick, onDelete, className, }: {
-    items: Record<string, any>;
-    onClick?: (item: any, index: number) => void;
-    onDelete?: (item: any, index: number) => void;
-    className?: string;
-}): import("react").JSX.Element;

package/dist/src/chip/Chip.component.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChipComponent = ChipComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-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");
-function ChipComponent({ items, onClick, onDelete, className, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("chip-group", className), children: items?.map((item, key) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "chip", onClick: () => onClick?.(item, key), children: [(0, jsx_runtime_1.jsx)("span", { children: item }), onDelete && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "chip-delete", onClick: () => onDelete?.(item, key) }))] }, key));
-        }) }));
-}

package/dist/src/index.d.ts

@@ -1,13 +0,0 @@
-export * from "./accordion";
-export * from "./breadcrumb";
-export * from "./button";
-export * from "./card";
-export * from "./carousel";
-export * from "./chip";
-export * from "./input";
-export * from "./modal";
-export * from "./nav";
-export * from "./supervision";
-export * from "./table";
-export * from "./typography";
-export * from "./wrap";