@deepnoid/ui 0.1.29 → 0.1.31

package/dist/components/table/index.mjs

@@ -1,28 +1,30 @@
 "use client";
 import "../../chunk-DX3KXNP6.mjs";
+import {
+  table_default
+} from "../../chunk-EBRCE7XY.mjs";
 import {
   definition_table_default
 } from "../../chunk-6TIIBU7J.mjs";
-import {
-  table_default
-} from "../../chunk-RCJOJPRS.mjs";
+import "../../chunk-LWRK5TPZ.mjs";
+import "../../chunk-P7YYNA6L.mjs";
 import "../../chunk-DQRAFUDA.mjs";
 import "../../chunk-M37VBNB3.mjs";
-import "../../chunk-A5KQHWS3.mjs";
-import "../../chunk-26MNALVL.mjs";
+import "../../chunk-MZ76AA76.mjs";
+import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-7B7LRG5J.mjs";
-import "../../chunk-KXA73VTJ.mjs";
+import "../../chunk-CVQM3T2X.mjs";
 import "../../chunk-F3HENRVM.mjs";
 import "../../chunk-2GCSFWHD.mjs";
-import "../../chunk-EHRFXDSN.mjs";
+import "../../chunk-AIIMJZ7L.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-YLRYHUTW.mjs";
+import "../../chunk-D6QI3DJG.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-2TKEWFGH.mjs";
 import "../../chunk-2SDYFOZL.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   definition_table_default as DefinitionTable,

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { SlotsToClasses } from '../../utils/types.mjs';
+import { Size, SlotsToClasses } from '../../utils/types.mjs';
 import { TableReturnType, TableRow, TableColumn, TableSlots } from './table.mjs';
 import 'tailwind-variants';
 
@@ -8,16 +8,18 @@ interface TableBodyProps {
     slots: TableReturnType;
     rows: TableRow[];
     columns: TableColumn[];
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: Size;
+    color?: "primary" | "secondary" | "neutral";
     rowCheckbox?: boolean;
     checkedRows: Set<number>;
     onCheckRow: (index: number, isChecked: boolean) => void;
     onRowClick?: (row: TableRow) => void;
-    emptyContent?: ReactNode;
     isLoading?: boolean;
+    emptyContent?: ReactNode;
+    skeletonRow?: number;
     classNames?: SlotsToClasses<TableSlots>;
     className?: string;
 }
-declare const TableBody: ({ slots, columns, rows, size, rowCheckbox, checkedRows, onCheckRow, onRowClick, emptyContent, isLoading, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: ({ slots, rows, columns, size, color, rowCheckbox, checkedRows, onCheckRow, onRowClick, isLoading, emptyContent, skeletonRow, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 export { TableBody as default };

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { SlotsToClasses } from '../../utils/types.js';
+import { Size, SlotsToClasses } from '../../utils/types.js';
 import { TableReturnType, TableRow, TableColumn, TableSlots } from './table.js';
 import 'tailwind-variants';
 
@@ -8,16 +8,18 @@ interface TableBodyProps {
     slots: TableReturnType;
     rows: TableRow[];
     columns: TableColumn[];
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: Size;
+    color?: "primary" | "secondary" | "neutral";
     rowCheckbox?: boolean;
     checkedRows: Set<number>;
     onCheckRow: (index: number, isChecked: boolean) => void;
     onRowClick?: (row: TableRow) => void;
-    emptyContent?: ReactNode;
     isLoading?: boolean;
+    emptyContent?: ReactNode;
+    skeletonRow?: number;
     classNames?: SlotsToClasses<TableSlots>;
     className?: string;
 }
-declare const TableBody: ({ slots, columns, rows, size, rowCheckbox, checkedRows, onCheckRow, onRowClick, emptyContent, isLoading, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: ({ slots, rows, columns, size, color, rowCheckbox, checkedRows, onCheckRow, onRowClick, isLoading, emptyContent, skeletonRow, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 export { TableBody as default };

package/dist/components/table/table-body.js

@@ -105,7 +105,6 @@ __export(table_body_exports, {
   default: () => table_body_default
 });
 module.exports = __toCommonJS(table_body_exports);
-var import_react2 = require("react");
 
 // src/utils/clsx.ts
 function clsx(...args) {
@@ -593,84 +592,137 @@ var checkboxStyle = tv({
   }
 });
 
-// src/components/table/table-body.tsx
+// src/components/skeleton/skeleton.tsx
+var import_tailwind_variants3 = require("tailwind-variants");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var import_react3 = require("react");
+var Skeleton = ({ color = "primary", className, speed = "normal", rounded = "md" }) => {
+  const speedMap = {
+    fast: "0.7s",
+    normal: "1.2s",
+    slow: "2s"
+  };
+  const slots = skeletonStyle();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: clsx(slots.base({ color, rounded }), className),
+      style: {
+        "--shimmer-duration": speedMap[speed]
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `@keyframes shimmer {
+            100% {
+              transform: translateX(100%);
+            }
+          }
+          .skeleton-shimmer::before {
+            animation: shimmer var(--shimmer-duration) infinite linear;
+          }
+        ` })
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var skeleton_default = Skeleton;
+var skeletonStyle = (0, import_tailwind_variants3.tv)({
+  slots: {
+    base: [
+      "relative",
+      "overflow-hidden",
+      "w-full",
+      "h-[18px]",
+      "skeleton-shimmer",
+      "before:absolute",
+      "before:inset-0",
+      "before:-translate-x-full",
+      "before:bg-gradient-to-r",
+      "before:from-transparent",
+      "before:via-white/40",
+      "before:to-transparent",
+      "before:content-['']"
+    ]
+  },
+  variants: {
+    color: {
+      primary: { base: "bg-primary-soft" },
+      secondary: { base: "bg-secondary-soft" },
+      neutral: { base: "bg-neutral-soft" }
+    },
+    rounded: {
+      sm: { base: "rounded-sm" },
+      md: { base: "rounded-md" },
+      lg: { base: "rounded-lg" },
+      xl: { base: "rounded-xl" },
+      full: { base: "rounded-full" }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    rounded: "md"
+  }
+});
+
+// src/components/table/table-body.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var TableBody = ({
   slots,
-  columns,
   rows,
+  columns,
   size,
-  rowCheckbox,
+  color,
+  rowCheckbox = false,
   checkedRows,
   onCheckRow,
   onRowClick,
+  isLoading = false,
   emptyContent,
-  isLoading,
+  skeletonRow,
   classNames,
   className
 }) => {
-  const generateColumnStyles = (0, import_react2.useCallback)((column) => {
-    const alignClass = column.align ? `text-${column.align}` : "text-left";
-    return clsx(alignClass, column.className);
-  }, []);
-  const getCellProps = (0, import_react2.useCallback)(
-    (column, row) => {
-      if (!column || !row) {
-        return {
-          className: slots.td({ class: classNames == null ? void 0 : classNames.td })
-        };
-      }
+  const getCellStyle = (column) => ({
+    width: column.width ? `${column.width}px` : void 0,
+    minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center"
+  });
+  const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
+  const renderCheckboxCell = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    checkbox_default,
+    {
+      size,
+      checked: checkedRows.has(rowIndex),
+      onChange: (e) => onCheckRow(rowIndex, e.target.checked)
+    }
+  ) });
+  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
+    rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
+  ] }, `skeleton-${rowIndex}`);
+  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), onClick: () => onRowClick == null ? void 0 : onRowClick(row), children: [
+    columns.map((column, colIdx) => {
+      var _a;
       const value = row[column.field];
-      const formattedValue = column.valueFormatter ? column.valueFormatter({ id: column.field, field: column.field, value }) : value;
-      const children = column.renderCell ? column.renderCell({
-        id: column.field,
-        field: column.field,
-        value,
-        formattedValue,
-        row
-      }) : formattedValue;
-      const columnStyles = generateColumnStyles(column);
-      return {
-        children,
-        className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), columnStyles),
-        style: {
-          width: column.width ? `${column.width}px` : void 0,
-          minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
-          maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
-          height: column.height ? `${column.height}px` : void 0
-        }
-      };
-    },
-    [classNames == null ? void 0 : classNames.td, generateColumnStyles, slots]
-  );
-  const hasRows = rows.length > 0;
-  const colSpan = (columns.length || 1) + (rowCheckbox ? 1 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: [
-    !isLoading && hasRows && rows.map((row, rowIndex) => {
-      const isRowChecked = checkedRows.has(rowIndex);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "tr",
+      const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
+      const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "td",
         {
-          className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
-          "aria-checked": isRowChecked,
-          onClick: () => onRowClick ? onRowClick(row) : void 0,
-          children: [
-            columns.map((column) => /* @__PURE__ */ (0, import_react3.createElement)("td", { ...getCellProps(column, row), key: column.field })),
-            rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              checkbox_default,
-              {
-                size,
-                checked: isRowChecked,
-                onChange: (e) => onCheckRow(rowIndex, e.target.checked)
-              }
-            ) }) })
-          ]
+          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
+          style: getCellStyle(column),
+          children: content
         },
-        rowIndex
+        `${rowIndex}-${colIdx}`
       );
     }),
-    !isLoading && !hasRows && emptyContent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "border-none"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { colSpan, className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) })
-  ] });
+    rowCheckbox && renderCheckboxCell(rowIndex)
+  ] }, rowIndex);
+  const renderRows = () => {
+    if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    if (!rows.length && emptyContent) return renderEmptyRow();
+    return rows.map((row, index) => renderDataRow(row, index));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
 };
 var table_body_default = TableBody;

package/dist/components/table/table-body.mjs

@@ -1,12 +1,14 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-A5KQHWS3.mjs";
+} from "../../chunk-LWRK5TPZ.mjs";
+import "../../chunk-MZ76AA76.mjs";
+import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-YLRYHUTW.mjs";
+import "../../chunk-D6QI3DJG.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   table_body_default as default

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

@@ -7,12 +7,14 @@ import 'react';
 type TableHeadProps = {
     slots: TableReturnType;
     columns: TableColumn[];
+    color?: "primary" | "secondary" | "neutral";
     size?: Size;
     rowCheckbox?: boolean;
     isCheckedAll: boolean;
+    isLoading?: boolean;
     classNames?: SlotsToClasses<TableSlots>;
     onCheckAll: (isChecked: boolean) => void;
 };
-declare const TableHead: ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames, onCheckAll }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ slots, columns, color, size, rowCheckbox, isCheckedAll, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -7,12 +7,14 @@ import 'react';
 type TableHeadProps = {
     slots: TableReturnType;
     columns: TableColumn[];
+    color?: "primary" | "secondary" | "neutral";
     size?: Size;
     rowCheckbox?: boolean;
     isCheckedAll: boolean;
+    isLoading?: boolean;
     classNames?: SlotsToClasses<TableSlots>;
     onCheckAll: (isChecked: boolean) => void;
 };
-declare const TableHead: ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames, onCheckAll }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ slots, columns, color, size, rowCheckbox, isCheckedAll, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

package/dist/components/table/table-head.js

@@ -592,38 +592,124 @@ var checkboxStyle = tv({
   }
 });
 
-// src/components/table/table-head.tsx
+// src/components/skeleton/skeleton.tsx
+var import_tailwind_variants3 = require("tailwind-variants");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var TableHead = ({ columns, slots, size, rowCheckbox, isCheckedAll, classNames, onCheckAll }) => {
+var Skeleton = ({ color = "primary", className, speed = "normal", rounded = "md" }) => {
+  const speedMap = {
+    fast: "0.7s",
+    normal: "1.2s",
+    slow: "2s"
+  };
+  const slots = skeletonStyle();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: clsx(slots.base({ color, rounded }), className),
+      style: {
+        "--shimmer-duration": speedMap[speed]
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `@keyframes shimmer {
+            100% {
+              transform: translateX(100%);
+            }
+          }
+          .skeleton-shimmer::before {
+            animation: shimmer var(--shimmer-duration) infinite linear;
+          }
+        ` })
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var skeleton_default = Skeleton;
+var skeletonStyle = (0, import_tailwind_variants3.tv)({
+  slots: {
+    base: [
+      "relative",
+      "overflow-hidden",
+      "w-full",
+      "h-[18px]",
+      "skeleton-shimmer",
+      "before:absolute",
+      "before:inset-0",
+      "before:-translate-x-full",
+      "before:bg-gradient-to-r",
+      "before:from-transparent",
+      "before:via-white/40",
+      "before:to-transparent",
+      "before:content-['']"
+    ]
+  },
+  variants: {
+    color: {
+      primary: { base: "bg-primary-soft" },
+      secondary: { base: "bg-secondary-soft" },
+      neutral: { base: "bg-neutral-soft" }
+    },
+    rounded: {
+      sm: { base: "rounded-sm" },
+      md: { base: "rounded-md" },
+      lg: { base: "rounded-lg" },
+      xl: { base: "rounded-xl" },
+      full: { base: "rounded-full" }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    rounded: "md"
+  }
+});
+
+// src/components/table/table-head.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  isCheckedAll,
+  isLoading = false,
+  classNames,
+  onCheckAll
+}) => {
   const handleClickCheckAll = (e) => {
     e.preventDefault();
     onCheckAll(!isCheckedAll);
   };
-  const renderColumnHeaders = () => columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "th",
     {
       className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
       style: {
-        width: column.width ? `${column.width}px` : void 0,
-        minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
-        maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
-        height: column.height ? `${column.height}px` : void 0
+        width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
+        minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
+        maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
+        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
       },
-      children: column.headerName
+      children: content
     },
-    `${column.field}${index}thead`
-  ));
-  const renderSelectAllCheckbox = () => rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: slots.th({ class: classNames == null ? void 0 : classNames.th }), onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    checkbox_default,
-    {
-      size,
-      checked: isCheckedAll,
-      onChange: (e) => onCheckAll(e.target.checked)
-    }
-  ) }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    renderColumnHeaders(),
-    renderSelectAllCheckbox()
+    key
+  );
+  const renderSkeletonRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
+    columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
+    rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
+  ] }) });
+  const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
+    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
+    rowCheckbox && renderTh(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        checkbox_default,
+        {
+          size,
+          checked: isCheckedAll,
+          onChange: (e) => onCheckAll(e.target.checked)
+        }
+      ) }),
+      "checkbox"
+    )
   ] }) });
+  return isLoading ? renderSkeletonRow() : renderContentRow();
 };
 var table_head_default = TableHead;

package/dist/components/table/table-head.mjs

@@ -1,12 +1,14 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-26MNALVL.mjs";
+} from "../../chunk-P7YYNA6L.mjs";
+import "../../chunk-MZ76AA76.mjs";
+import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-YLRYHUTW.mjs";
+import "../../chunk-D6QI3DJG.mjs";
+import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-4ZJFD3L3.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   table_head_default as default

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

@@ -20,6 +20,7 @@ interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "c
     }) => void;
     emptyContent?: ReactNode;
     isLoading?: boolean;
+    skeletonRow?: number;
     classNames?: SlotsToClasses<TableSlots>;
 }
 interface TableRef {
@@ -205,10 +206,11 @@ type ValueFormatterParams<V = any> = {
     value: V;
 };
 type TableRow<R extends RowValue = RowValue> = R;
+type Align = "center" | "left" | "right";
 type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     field: string;
     headerName?: string | ReactElement;
-    align?: "left" | "center" | "right";
+    align?: Align;
     width?: number;
     minWidth?: number;
     maxWidth?: number;

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

@@ -20,6 +20,7 @@ interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "c
     }) => void;
     emptyContent?: ReactNode;
     isLoading?: boolean;
+    skeletonRow?: number;
     classNames?: SlotsToClasses<TableSlots>;
 }
 interface TableRef {
@@ -205,10 +206,11 @@ type ValueFormatterParams<V = any> = {
     value: V;
 };
 type TableRow<R extends RowValue = RowValue> = R;
+type Align = "center" | "left" | "right";
 type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     field: string;
     headerName?: string | ReactElement;
-    align?: "left" | "center" | "right";
+    align?: Align;
     width?: number;
     minWidth?: number;
     maxWidth?: number;