@deepnoid/ui 0.0.98 → 0.0.100

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-200",
+      "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-YVBOTJAH.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-200",
+      "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-YVBOTJAH.mjs";
 import "../../chunk-QDDEQY63.mjs";
 import "../../chunk-PO3ADNA5.mjs";
 import "../../chunk-QZ3LVYJW.mjs";