@deepnoid/ui 0.0.98 → 0.0.99

package/dist/{chunk-PNFR2J4Q.mjs → chunk-JMXQYSKY.mjs}

@@ -18,7 +18,7 @@ import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Table = forwardRef((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
-  const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const { classNames, rows, columns, className, emptyContent, loadingContent, onRowAction, ...tableComponentsProps } = props;
   const [checkedRows, setCheckedRows] = useState(/* @__PURE__ */ new Set());
   const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
@@ -38,10 +38,17 @@ var Table = forwardRef((originalProps, ref) => {
   const getTableProps = useCallback(
     (props2) => ({
       ...props2,
-      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table, className) })
+      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table) })
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const getLoadingWrapperProps = useCallback(
+    (props2) => ({
+      ...props2,
+      className: slots.loadingWrapper({ class: clsx(classNames == null ? void 0 : classNames.loadingWrapper) })
+    }),
+    [classNames == null ? void 0 : classNames.loadingWrapper, slots]
+  );
   const handleCheckAll = (isChecked) => {
     const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
     setCheckedRows(newCheckedRows);
@@ -79,53 +86,55 @@ var Table = forwardRef((originalProps, ref) => {
     setCheckedRows,
     setSelectedRows
   }));
-  return /* @__PURE__ */ jsx("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ jsxs("table", { ...getTableProps(tableComponentsProps), children: [
-    /* @__PURE__ */ jsx(
-      table_head_default,
-      {
-        classNames,
-        slots,
-        columns,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isChecked: originalProps.isChecked,
-        isExpanded: originalProps.isExpanded,
-        onCheckAll: handleCheckAll,
-        isCheckedAll: checkedRows.size === rows.length
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      table_body_default,
-      {
-        rows,
-        columns,
-        slots,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isSelected: originalProps.isSelected,
-        isChecked: originalProps.isChecked,
-        isCheckedRow: originalProps.isCheckedRow,
-        isExpanded: originalProps.isExpanded,
-        isLoading,
-        classNames,
-        emptyContent,
-        selectedRows,
-        checkedRows,
-        onCheckedRow: handleCheckRow,
-        onSelectedRow: handleSelectRow,
-        onRowAction
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxs("div", { ref, "data-table": "base", ...getBaseProps(), children: [
+    /* @__PURE__ */ jsxs("table", { ...getTableProps(tableComponentsProps), children: [
+      /* @__PURE__ */ jsx(
+        table_head_default,
+        {
+          classNames,
+          slots,
+          columns,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isChecked: originalProps.isChecked,
+          isExpanded: originalProps.isExpanded,
+          onCheckAll: handleCheckAll,
+          isCheckedAll: checkedRows.size === rows.length
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        table_body_default,
+        {
+          rows,
+          columns,
+          slots,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isSelected: originalProps.isSelected,
+          isChecked: originalProps.isChecked,
+          isCheckedRow: originalProps.isCheckedRow,
+          isExpanded: originalProps.isExpanded,
+          classNames,
+          emptyContent,
+          selectedRows,
+          checkedRows,
+          onCheckedRow: handleCheckRow,
+          onSelectedRow: handleSelectRow,
+          onRowAction
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { ...getLoadingWrapperProps(), children: loadingContent || "Loading..." })
+  ] });
 });
 Table.displayName = "Table";
 var table_default = Table;
 var table = tv({
   slots: {
-    base: "flex flex-col relative gap-4",
+    base: "flex flex-col relative gap-4 select-none",
     table: "w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "w-full",
+    tbody: "",
     tr: ["group", "outline-none", "w-full"],
     th: [
       "text-foreground",
@@ -164,7 +173,18 @@ var table = tv({
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-neutral-light align-middle text-center h-40",
-    loadingWrapper: "absolute inset-0 flex items-center justify-center"
+    loadingWrapper: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-black/40",
+      "text-white",
+      "transition-opacity",
+      "duration-300",
+      "ease-in-out"
+    ]
   },
   variants: {
     variant: {
@@ -210,6 +230,14 @@ var table = tv({
         expandedTr: "border-trans-light"
       }
     },
+    isLoading: {
+      true: {
+        loadingWrapper: "visible opacity-100"
+      },
+      false: {
+        loadingWrapper: "invisible opacity-0"
+      }
+    },
     isSelected: {
       true: {}
     },

package/dist/{chunk-B4KZBOGT.mjs → chunk-UGBBOYHB.mjs}

@@ -19,7 +19,7 @@ var Pagination = forwardRef((originalProps, ref) => {
     currentPage,
     groupSize,
     totalPage,
-    showPageNumber,
+    showPageNumber = true,
     showPageLabel,
     showFirstLastButtons,
     handleChangePage

package/dist/components/pagination/index.js

@@ -101,7 +101,7 @@ var Pagination = (0, import_react2.forwardRef)((originalProps, ref) => {
     currentPage,
     groupSize,
     totalPage,
-    showPageNumber,
+    showPageNumber = true,
     showPageLabel,
     showFirstLastButtons,
     handleChangePage

package/dist/components/pagination/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "../../chunk-B4KZBOGT.mjs";
+} from "../../chunk-UGBBOYHB.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";

package/dist/components/pagination/pagination.js

@@ -101,7 +101,7 @@ var Pagination = (0, import_react2.forwardRef)((originalProps, ref) => {
     currentPage,
     groupSize,
     totalPage,
-    showPageNumber,
+    showPageNumber = true,
     showPageLabel,
     showFirstLastButtons,
     handleChangePage

package/dist/components/pagination/pagination.mjs

@@ -3,7 +3,7 @@ import {
   Pagination,
   pagination,
   pagination_default
-} from "../../chunk-B4KZBOGT.mjs";
+} from "../../chunk-UGBBOYHB.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-J725QONZ.mjs";

package/dist/components/pagination/pagination.test.js

@@ -12946,7 +12946,7 @@ var Pagination = (0, import_react2.forwardRef)((originalProps, ref) => {
     currentPage,
     groupSize,
     totalPage,
-    showPageNumber,
+    showPageNumber = true,
     showPageLabel,
     showFirstLastButtons,
     handleChangePage

package/dist/components/pagination/pagination.test.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   pagination_default
-} from "../../chunk-B4KZBOGT.mjs";
+} from "../../chunk-UGBBOYHB.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import {
   render

package/dist/components/table/index.js

@@ -4052,7 +4052,7 @@ var import_tailwind_variants3 = require("tailwind-variants");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
-  const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const { classNames, rows, columns, className, emptyContent, loadingContent, onRowAction, ...tableComponentsProps } = props;
   const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   (0, import_react6.useEffect)(() => {
@@ -4072,10 +4072,17 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const getTableProps = (0, import_react6.useCallback)(
     (props2) => ({
       ...props2,
-      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table, className) })
+      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table) })
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const getLoadingWrapperProps = (0, import_react6.useCallback)(
+    (props2) => ({
+      ...props2,
+      className: slots.loadingWrapper({ class: clsx(classNames == null ? void 0 : classNames.loadingWrapper) })
+    }),
+    [classNames == null ? void 0 : classNames.loadingWrapper, slots]
+  );
   const handleCheckAll = (isChecked) => {
     const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
     setCheckedRows(newCheckedRows);
@@ -4113,53 +4120,55 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
     setCheckedRows,
     setSelectedRows
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      table_head_default,
-      {
-        classNames,
-        slots,
-        columns,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isChecked: originalProps.isChecked,
-        isExpanded: originalProps.isExpanded,
-        onCheckAll: handleCheckAll,
-        isCheckedAll: checkedRows.size === rows.length
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      table_body_default,
-      {
-        rows,
-        columns,
-        slots,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isSelected: originalProps.isSelected,
-        isChecked: originalProps.isChecked,
-        isCheckedRow: originalProps.isCheckedRow,
-        isExpanded: originalProps.isExpanded,
-        isLoading,
-        classNames,
-        emptyContent,
-        selectedRows,
-        checkedRows,
-        onCheckedRow: handleCheckRow,
-        onSelectedRow: handleSelectRow,
-        onRowAction
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, "data-table": "base", ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        table_head_default,
+        {
+          classNames,
+          slots,
+          columns,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isChecked: originalProps.isChecked,
+          isExpanded: originalProps.isExpanded,
+          onCheckAll: handleCheckAll,
+          isCheckedAll: checkedRows.size === rows.length
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        table_body_default,
+        {
+          rows,
+          columns,
+          slots,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isSelected: originalProps.isSelected,
+          isChecked: originalProps.isChecked,
+          isCheckedRow: originalProps.isCheckedRow,
+          isExpanded: originalProps.isExpanded,
+          classNames,
+          emptyContent,
+          selectedRows,
+          checkedRows,
+          onCheckedRow: handleCheckRow,
+          onSelectedRow: handleSelectRow,
+          onRowAction
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...getLoadingWrapperProps(), children: loadingContent || "Loading..." })
+  ] });
 });
 Table.displayName = "Table";
 var table_default = Table;
 var table = (0, import_tailwind_variants3.tv)({
   slots: {
-    base: "flex flex-col relative gap-4",
+    base: "flex flex-col relative gap-4 select-none",
     table: "w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "w-full",
+    tbody: "",
     tr: ["group", "outline-none", "w-full"],
     th: [
       "text-foreground",
@@ -4198,7 +4207,18 @@ var table = (0, import_tailwind_variants3.tv)({
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-neutral-light align-middle text-center h-40",
-    loadingWrapper: "absolute inset-0 flex items-center justify-center"
+    loadingWrapper: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-black/40",
+      "text-white",
+      "transition-opacity",
+      "duration-300",
+      "ease-in-out"
+    ]
   },
   variants: {
     variant: {
@@ -4244,6 +4264,14 @@ var table = (0, import_tailwind_variants3.tv)({
         expandedTr: "border-trans-light"
       }
     },
+    isLoading: {
+      true: {
+        loadingWrapper: "visible opacity-100"
+      },
+      false: {
+        loadingWrapper: "invisible opacity-0"
+      }
+    },
     isSelected: {
       true: {}
     },

package/dist/components/table/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-2UUH2MBF.mjs";
 import {
   table_default
-} from "../../chunk-PNFR2J4Q.mjs";
+} from "../../chunk-JMXQYSKY.mjs";
 import "../../chunk-QDDEQY63.mjs";
 import "../../chunk-PO3ADNA5.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/components/table/table-body.d.mts

@@ -12,7 +12,6 @@ type TableBodyProps = {
     slots: TableReturnType;
     rows: TableRow[];
     columns: TableColumn[];
-    isLoading?: boolean;
     isExpanded?: boolean;
     isSelected?: boolean;
     isChecked?: boolean;

package/dist/components/table/table-body.d.ts

@@ -12,7 +12,6 @@ type TableBodyProps = {
     slots: TableReturnType;
     rows: TableRow[];
     columns: TableColumn[];
-    isLoading?: boolean;
     isExpanded?: boolean;
     isSelected?: boolean;
     isChecked?: boolean;

package/dist/components/table/table.d.mts

@@ -9,6 +9,7 @@ interface Props extends Omit<React__default.ComponentPropsWithRef<"table">, "ref
     columns: TableColumn[];
     isLoading?: boolean;
     emptyContent?: ReactElement;
+    loadingContent?: ReactElement;
     classNames?: SlotsToClasses<TableSlots>;
     onRowAction?: (e: React__default.MouseEvent, params: TableRow) => void;
 }
@@ -64,6 +65,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -111,7 +120,7 @@ declare const table: tailwind_variants.TVReturnType<{
     expandedTr: string;
     sortIcon: string[];
     emptyWrapper: string;
-    loadingWrapper: string;
+    loadingWrapper: string[];
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     variant: {
         solid: {
@@ -156,6 +165,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -235,6 +252,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -314,6 +339,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -361,7 +394,7 @@ declare const table: tailwind_variants.TVReturnType<{
     expandedTr: string;
     sortIcon: string[];
     emptyWrapper: string;
-    loadingWrapper: string;
+    loadingWrapper: string[];
 }, tailwind_variants.TVReturnType<{
     variant: {
         solid: {
@@ -406,6 +439,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -453,7 +494,7 @@ declare const table: tailwind_variants.TVReturnType<{
     expandedTr: string;
     sortIcon: string[];
     emptyWrapper: string;
-    loadingWrapper: string;
+    loadingWrapper: string[];
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     variant: {
         solid: {
@@ -498,6 +539,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -577,6 +626,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };

package/dist/components/table/table.d.ts

@@ -9,6 +9,7 @@ interface Props extends Omit<React__default.ComponentPropsWithRef<"table">, "ref
     columns: TableColumn[];
     isLoading?: boolean;
     emptyContent?: ReactElement;
+    loadingContent?: ReactElement;
     classNames?: SlotsToClasses<TableSlots>;
     onRowAction?: (e: React__default.MouseEvent, params: TableRow) => void;
 }
@@ -64,6 +65,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -111,7 +120,7 @@ declare const table: tailwind_variants.TVReturnType<{
     expandedTr: string;
     sortIcon: string[];
     emptyWrapper: string;
-    loadingWrapper: string;
+    loadingWrapper: string[];
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     variant: {
         solid: {
@@ -156,6 +165,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -235,6 +252,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -314,6 +339,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -361,7 +394,7 @@ declare const table: tailwind_variants.TVReturnType<{
     expandedTr: string;
     sortIcon: string[];
     emptyWrapper: string;
-    loadingWrapper: string;
+    loadingWrapper: string[];
 }, tailwind_variants.TVReturnType<{
     variant: {
         solid: {
@@ -406,6 +439,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -453,7 +494,7 @@ declare const table: tailwind_variants.TVReturnType<{
     expandedTr: string;
     sortIcon: string[];
     emptyWrapper: string;
-    loadingWrapper: string;
+    loadingWrapper: string[];
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     variant: {
         solid: {
@@ -498,6 +539,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };
@@ -577,6 +626,14 @@ declare const table: tailwind_variants.TVReturnType<{
             expandedTr: string;
         };
     };
+    isLoading: {
+        true: {
+            loadingWrapper: string;
+        };
+        false: {
+            loadingWrapper: string;
+        };
+    };
     isSelected: {
         true: {};
     };

package/dist/components/table/table.js

@@ -4050,7 +4050,7 @@ var import_tailwind_variants3 = require("tailwind-variants");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
-  const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const { classNames, rows, columns, className, emptyContent, loadingContent, onRowAction, ...tableComponentsProps } = props;
   const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   (0, import_react6.useEffect)(() => {
@@ -4070,10 +4070,17 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const getTableProps = (0, import_react6.useCallback)(
     (props2) => ({
       ...props2,
-      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table, className) })
+      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table) })
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const getLoadingWrapperProps = (0, import_react6.useCallback)(
+    (props2) => ({
+      ...props2,
+      className: slots.loadingWrapper({ class: clsx(classNames == null ? void 0 : classNames.loadingWrapper) })
+    }),
+    [classNames == null ? void 0 : classNames.loadingWrapper, slots]
+  );
   const handleCheckAll = (isChecked) => {
     const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
     setCheckedRows(newCheckedRows);
@@ -4111,53 +4118,55 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
     setCheckedRows,
     setSelectedRows
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      table_head_default,
-      {
-        classNames,
-        slots,
-        columns,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isChecked: originalProps.isChecked,
-        isExpanded: originalProps.isExpanded,
-        onCheckAll: handleCheckAll,
-        isCheckedAll: checkedRows.size === rows.length
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      table_body_default,
-      {
-        rows,
-        columns,
-        slots,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isSelected: originalProps.isSelected,
-        isChecked: originalProps.isChecked,
-        isCheckedRow: originalProps.isCheckedRow,
-        isExpanded: originalProps.isExpanded,
-        isLoading,
-        classNames,
-        emptyContent,
-        selectedRows,
-        checkedRows,
-        onCheckedRow: handleCheckRow,
-        onSelectedRow: handleSelectRow,
-        onRowAction
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, "data-table": "base", ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        table_head_default,
+        {
+          classNames,
+          slots,
+          columns,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isChecked: originalProps.isChecked,
+          isExpanded: originalProps.isExpanded,
+          onCheckAll: handleCheckAll,
+          isCheckedAll: checkedRows.size === rows.length
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        table_body_default,
+        {
+          rows,
+          columns,
+          slots,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isSelected: originalProps.isSelected,
+          isChecked: originalProps.isChecked,
+          isCheckedRow: originalProps.isCheckedRow,
+          isExpanded: originalProps.isExpanded,
+          classNames,
+          emptyContent,
+          selectedRows,
+          checkedRows,
+          onCheckedRow: handleCheckRow,
+          onSelectedRow: handleSelectRow,
+          onRowAction
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...getLoadingWrapperProps(), children: loadingContent || "Loading..." })
+  ] });
 });
 Table.displayName = "Table";
 var table_default = Table;
 var table = (0, import_tailwind_variants3.tv)({
   slots: {
-    base: "flex flex-col relative gap-4",
+    base: "flex flex-col relative gap-4 select-none",
     table: "w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "w-full",
+    tbody: "",
     tr: ["group", "outline-none", "w-full"],
     th: [
       "text-foreground",
@@ -4196,7 +4205,18 @@ var table = (0, import_tailwind_variants3.tv)({
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-neutral-light align-middle text-center h-40",
-    loadingWrapper: "absolute inset-0 flex items-center justify-center"
+    loadingWrapper: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-black/40",
+      "text-white",
+      "transition-opacity",
+      "duration-300",
+      "ease-in-out"
+    ]
   },
   variants: {
     variant: {
@@ -4242,6 +4262,14 @@ var table = (0, import_tailwind_variants3.tv)({
         expandedTr: "border-trans-light"
       }
     },
+    isLoading: {
+      true: {
+        loadingWrapper: "visible opacity-100"
+      },
+      false: {
+        loadingWrapper: "invisible opacity-0"
+      }
+    },
     isSelected: {
       true: {}
     },

package/dist/components/table/table.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_default
-} from "../../chunk-PNFR2J4Q.mjs";
+} from "../../chunk-JMXQYSKY.mjs";
 import "../../chunk-QDDEQY63.mjs";
 import "../../chunk-PO3ADNA5.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/components/table/table.test.js

@@ -16887,7 +16887,7 @@ var import_tailwind_variants3 = require("tailwind-variants");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
-  const { classNames, rows: rows2, columns: columns2, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const { classNames, rows: rows2, columns: columns2, className, emptyContent, loadingContent, onRowAction, ...tableComponentsProps } = props;
   const [checkedRows, setCheckedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   (0, import_react6.useEffect)(() => {
@@ -16907,10 +16907,17 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const getTableProps = (0, import_react6.useCallback)(
     (props2) => ({
       ...props2,
-      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table, className) })
+      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table) })
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const getLoadingWrapperProps = (0, import_react6.useCallback)(
+    (props2) => ({
+      ...props2,
+      className: slots.loadingWrapper({ class: clsx(classNames == null ? void 0 : classNames.loadingWrapper) })
+    }),
+    [classNames == null ? void 0 : classNames.loadingWrapper, slots]
+  );
   const handleCheckAll = (isChecked) => {
     const newCheckedRows = isChecked ? new Set(rows2.map((_, index) => index)) : /* @__PURE__ */ new Set();
     setCheckedRows(newCheckedRows);
@@ -16948,53 +16955,55 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
     setCheckedRows,
     setSelectedRows
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      table_head_default,
-      {
-        classNames,
-        slots,
-        columns: columns2,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isChecked: originalProps.isChecked,
-        isExpanded: originalProps.isExpanded,
-        onCheckAll: handleCheckAll,
-        isCheckedAll: checkedRows.size === rows2.length
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      table_body_default,
-      {
-        rows: rows2,
-        columns: columns2,
-        slots,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isSelected: originalProps.isSelected,
-        isChecked: originalProps.isChecked,
-        isCheckedRow: originalProps.isCheckedRow,
-        isExpanded: originalProps.isExpanded,
-        isLoading,
-        classNames,
-        emptyContent,
-        selectedRows,
-        checkedRows,
-        onCheckedRow: handleCheckRow,
-        onSelectedRow: handleSelectRow,
-        onRowAction
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, "data-table": "base", ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        table_head_default,
+        {
+          classNames,
+          slots,
+          columns: columns2,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isChecked: originalProps.isChecked,
+          isExpanded: originalProps.isExpanded,
+          onCheckAll: handleCheckAll,
+          isCheckedAll: checkedRows.size === rows2.length
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        table_body_default,
+        {
+          rows: rows2,
+          columns: columns2,
+          slots,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isSelected: originalProps.isSelected,
+          isChecked: originalProps.isChecked,
+          isCheckedRow: originalProps.isCheckedRow,
+          isExpanded: originalProps.isExpanded,
+          classNames,
+          emptyContent,
+          selectedRows,
+          checkedRows,
+          onCheckedRow: handleCheckRow,
+          onSelectedRow: handleSelectRow,
+          onRowAction
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...getLoadingWrapperProps(), children: loadingContent || "Loading..." })
+  ] });
 });
 Table.displayName = "Table";
 var table_default = Table;
 var table = (0, import_tailwind_variants3.tv)({
   slots: {
-    base: "flex flex-col relative gap-4",
+    base: "flex flex-col relative gap-4 select-none",
     table: "w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "w-full",
+    tbody: "",
     tr: ["group", "outline-none", "w-full"],
     th: [
       "text-foreground",
@@ -17033,7 +17042,18 @@ var table = (0, import_tailwind_variants3.tv)({
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-neutral-light align-middle text-center h-40",
-    loadingWrapper: "absolute inset-0 flex items-center justify-center"
+    loadingWrapper: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-black/40",
+      "text-white",
+      "transition-opacity",
+      "duration-300",
+      "ease-in-out"
+    ]
   },
   variants: {
     variant: {
@@ -17079,6 +17099,14 @@ var table = (0, import_tailwind_variants3.tv)({
         expandedTr: "border-trans-light"
       }
     },
+    isLoading: {
+      true: {
+        loadingWrapper: "visible opacity-100"
+      },
+      false: {
+        loadingWrapper: "invisible opacity-0"
+      }
+    },
     isSelected: {
       true: {}
     },

package/dist/components/table/table.test.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_default
-} from "../../chunk-PNFR2J4Q.mjs";
+} from "../../chunk-JMXQYSKY.mjs";
 import "../../chunk-QDDEQY63.mjs";
 import "../../chunk-PO3ADNA5.mjs";
 import "../../chunk-QZ3LVYJW.mjs";

package/dist/index.js

@@ -5466,7 +5466,7 @@ var import_tailwind_variants8 = require("tailwind-variants");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Table = (0, import_react11.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
-  const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const { classNames, rows, columns, className, emptyContent, loadingContent, onRowAction, ...tableComponentsProps } = props;
   const [checkedRows, setCheckedRows] = (0, import_react11.useState)(/* @__PURE__ */ new Set());
   const [selectedRows, setSelectedRows] = (0, import_react11.useState)(/* @__PURE__ */ new Set());
   (0, import_react11.useEffect)(() => {
@@ -5486,10 +5486,17 @@ var Table = (0, import_react11.forwardRef)((originalProps, ref) => {
   const getTableProps = (0, import_react11.useCallback)(
     (props2) => ({
       ...props2,
-      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table, className) })
+      className: slots.table({ class: clsx(classNames == null ? void 0 : classNames.table) })
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const getLoadingWrapperProps = (0, import_react11.useCallback)(
+    (props2) => ({
+      ...props2,
+      className: slots.loadingWrapper({ class: clsx(classNames == null ? void 0 : classNames.loadingWrapper) })
+    }),
+    [classNames == null ? void 0 : classNames.loadingWrapper, slots]
+  );
   const handleCheckAll = (isChecked) => {
     const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
     setCheckedRows(newCheckedRows);
@@ -5527,53 +5534,55 @@ var Table = (0, import_react11.forwardRef)((originalProps, ref) => {
     setCheckedRows,
     setSelectedRows
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      table_head_default,
-      {
-        classNames,
-        slots,
-        columns,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isChecked: originalProps.isChecked,
-        isExpanded: originalProps.isExpanded,
-        onCheckAll: handleCheckAll,
-        isCheckedAll: checkedRows.size === rows.length
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      table_body_default,
-      {
-        rows,
-        columns,
-        slots,
-        size: originalProps.size,
-        color: originalProps.color === "neutral" ? "primary" : originalProps.color,
-        isSelected: originalProps.isSelected,
-        isChecked: originalProps.isChecked,
-        isCheckedRow: originalProps.isCheckedRow,
-        isExpanded: originalProps.isExpanded,
-        isLoading,
-        classNames,
-        emptyContent,
-        selectedRows,
-        checkedRows,
-        onCheckedRow: handleCheckRow,
-        onSelectedRow: handleSelectRow,
-        onRowAction
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, "data-table": "base", ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        table_head_default,
+        {
+          classNames,
+          slots,
+          columns,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isChecked: originalProps.isChecked,
+          isExpanded: originalProps.isExpanded,
+          onCheckAll: handleCheckAll,
+          isCheckedAll: checkedRows.size === rows.length
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        table_body_default,
+        {
+          rows,
+          columns,
+          slots,
+          size: originalProps.size,
+          color: originalProps.color === "neutral" ? "primary" : originalProps.color,
+          isSelected: originalProps.isSelected,
+          isChecked: originalProps.isChecked,
+          isCheckedRow: originalProps.isCheckedRow,
+          isExpanded: originalProps.isExpanded,
+          classNames,
+          emptyContent,
+          selectedRows,
+          checkedRows,
+          onCheckedRow: handleCheckRow,
+          onSelectedRow: handleSelectRow,
+          onRowAction
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...getLoadingWrapperProps(), children: loadingContent || "Loading..." })
+  ] });
 });
 Table.displayName = "Table";
 var table_default = Table;
 var table = (0, import_tailwind_variants8.tv)({
   slots: {
-    base: "flex flex-col relative gap-4",
+    base: "flex flex-col relative gap-4 select-none",
     table: "w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
-    tbody: "w-full",
+    tbody: "",
     tr: ["group", "outline-none", "w-full"],
     th: [
       "text-foreground",
@@ -5612,7 +5621,18 @@ var table = (0, import_tailwind_variants8.tv)({
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-neutral-light align-middle text-center h-40",
-    loadingWrapper: "absolute inset-0 flex items-center justify-center"
+    loadingWrapper: [
+      "absolute",
+      "inset-0",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-black/40",
+      "text-white",
+      "transition-opacity",
+      "duration-300",
+      "ease-in-out"
+    ]
   },
   variants: {
     variant: {
@@ -5658,6 +5678,14 @@ var table = (0, import_tailwind_variants8.tv)({
         expandedTr: "border-trans-light"
       }
     },
+    isLoading: {
+      true: {
+        loadingWrapper: "visible opacity-100"
+      },
+      false: {
+        loadingWrapper: "invisible opacity-0"
+      }
+    },
     isSelected: {
       true: {}
     },
@@ -6791,7 +6819,7 @@ var Pagination = (0, import_react19.forwardRef)((originalProps, ref) => {
     currentPage,
     groupSize,
     totalPage,
-    showPageNumber,
+    showPageNumber = true,
     showPageLabel,
     showFirstLastButtons,
     handleChangePage

package/dist/index.mjs

@@ -5,10 +5,6 @@ import {
 } from "./chunk-FY5YCQL5.mjs";
 import "./chunk-DSBSLSJW.mjs";
 import "./chunk-ODMRJXLJ.mjs";
-import "./chunk-3MY6LO7N.mjs";
-import {
-  tabs_default
-} from "./chunk-KRI5IALM.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -26,10 +22,14 @@ import "./chunk-LVFI2NOH.mjs";
 import {
   switch_default
 } from "./chunk-S3O52LLG.mjs";
+import "./chunk-3MY6LO7N.mjs";
+import {
+  tabs_default
+} from "./chunk-KRI5IALM.mjs";
 import "./chunk-2UUH2MBF.mjs";
 import {
   table_default
-} from "./chunk-PNFR2J4Q.mjs";
+} from "./chunk-JMXQYSKY.mjs";
 import "./chunk-QDDEQY63.mjs";
 import "./chunk-PO3ADNA5.mjs";
 import "./chunk-QCEKPS7U.mjs";
@@ -57,7 +57,7 @@ import {
 import "./chunk-7B7LRG5J.mjs";
 import {
   pagination_default
-} from "./chunk-B4KZBOGT.mjs";
+} from "./chunk-UGBBOYHB.mjs";
 import "./chunk-F3HENRVM.mjs";
 import "./chunk-2GCSFWHD.mjs";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.0.98",
+  "version": "0.0.99",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/index.js",