@deepnoid/ui 0.1.79 → 0.1.80

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

@@ -1,11 +1,21 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-D5N7OBSO.mjs";
+} from "../../chunk-UWXCAR5C.mjs";
+import "../../chunk-DQRAFUDA.mjs";
+import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
+import "../../chunk-7B7LRG5J.mjs";
+import "../../chunk-CC2F5HQX.mjs";
+import "../../chunk-F3HENRVM.mjs";
+import "../../chunk-2GCSFWHD.mjs";
+import "../../chunk-5M7UDEMG.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-SKOCUCE5.mjs";
+import "../../chunk-ZYIIXWVY.mjs";
+import "../../chunk-JP4TEWP7.mjs";
+import "../../chunk-RRONV7YA.mjs";
 import "../../chunk-XOPCRI7Z.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";

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

@@ -1,7 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
-import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactElement, ReactNode, CSSProperties } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
 interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "height" | "defaultChecked" | "defaultValue"> {
@@ -189,6 +189,7 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
     td: string[];
     empty: string[];
 }, undefined, unknown, unknown, undefined>>;
+declare const getCellStyle: (column: TableColumn) => CSSProperties;
 type TableVariantProps = VariantProps<typeof tableStyle>;
 type TableSlots = keyof ReturnType<typeof tableStyle>;
 type TableReturnType = ReturnType<typeof tableStyle>;
@@ -220,4 +221,4 @@ type ValueFormatterParams<V = any> = {
     value: V;
 };
 
-export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };
+export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default, getCellStyle };

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

@@ -1,7 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as react from 'react';
-import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactElement, ReactNode, CSSProperties } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
 interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "height" | "defaultChecked" | "defaultValue"> {
@@ -189,6 +189,7 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
     td: string[];
     empty: string[];
 }, undefined, unknown, unknown, undefined>>;
+declare const getCellStyle: (column: TableColumn) => CSSProperties;
 type TableVariantProps = VariantProps<typeof tableStyle>;
 type TableSlots = keyof ReturnType<typeof tableStyle>;
 type TableReturnType = ReturnType<typeof tableStyle>;
@@ -220,4 +221,4 @@ type ValueFormatterParams<V = any> = {
     value: V;
 };
 
-export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };
+export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default, getCellStyle };

package/dist/components/table/table.js

@@ -102,7 +102,8 @@ var require_plugin = __commonJS({
 // src/components/table/table.tsx
 var table_exports = {};
 __export(table_exports, {
-  default: () => table_default
+  default: () => table_default,
+  getCellStyle: () => getCellStyle
 });
 module.exports = __toCommonJS(table_exports);
 var import_react5 = require("react");
@@ -692,17 +693,14 @@ var TableHead = ({
     "th",
     {
       className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
-      style: {
-        width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
-        minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
-        maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
-        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
-        ...isCheckbox || (column == null ? void 0 : column.width) ? {
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : {}
-      },
+      style: isCheckbox ? {
+        width: "40px",
+        minWidth: "40px",
+        maxWidth: "40px",
+        flexShrink: 0,
+        flexGrow: 0,
+        boxSizing: "border-box"
+      } : column ? getCellStyle(column) : void 0,
       children: content
     },
     key
@@ -750,21 +748,6 @@ var TableBody = ({
   classNames,
   className
 }) => {
-  const getCellStyle = (column) => ({
-    width: column.width ? `${column.width}px` : "auto",
-    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",
-    ...column.width && {
-      flexShrink: 0,
-      flexGrow: 0,
-      boxSizing: "border-box",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
-  });
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -6178,6 +6161,15 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0 && !isLoading;
   const [checkedRows, setCheckedRows] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
+  const tableMinWidth = (0, import_react5.useMemo)(() => {
+    const columnsWidth = columns.reduce((total, column) => {
+      if (column.width) return total + column.width;
+      if (column.minWidth) return total + column.minWidth;
+      return total + 100;
+    }, 0);
+    const checkboxWidth = rowCheckbox ? 40 : 0;
+    return columnsWidth + checkboxWidth;
+  }, [columns, rowCheckbox]);
   (0, import_react5.useEffect)(() => {
     onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRows));
   }, [checkedRows]);
@@ -6217,7 +6209,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
         className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
         style: {
           tableLayout: "fixed",
-          width: "100%"
+          width: "100%",
+          minWidth: `${tableMinWidth}px`
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -6487,3 +6480,22 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
     height: "narrow"
   }
 });
+var getCellStyle = (column) => {
+  const hasFixedWidth = column.width;
+  const hasMinWidth = column.minWidth;
+  return {
+    width: hasFixedWidth ? `${column.width}px` : "auto",
+    minWidth: hasMinWidth ? `${column.minWidth}px` : hasFixedWidth ? `${column.width}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getCellStyle
+});

package/dist/components/table/table.mjs

@@ -1,9 +1,8 @@
 "use client";
 import {
+  getCellStyle,
   table_default
-} from "../../chunk-AX3D6VFT.mjs";
-import "../../chunk-SIVCIIB6.mjs";
-import "../../chunk-D5N7OBSO.mjs";
+} from "../../chunk-UWXCAR5C.mjs";
 import "../../chunk-DQRAFUDA.mjs";
 import "../../chunk-M37VBNB3.mjs";
 import "../../chunk-MZ76AA76.mjs";
@@ -23,5 +22,6 @@ import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
-  table_default as default
+  table_default as default,
+  getCellStyle
 };

package/dist/index.js

@@ -7718,17 +7718,14 @@ var TableHead = ({
     "th",
     {
       className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
-      style: {
-        width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
-        minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
-        maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
-        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
-        ...isCheckbox || (column == null ? void 0 : column.width) ? {
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : {}
-      },
+      style: isCheckbox ? {
+        width: "40px",
+        minWidth: "40px",
+        maxWidth: "40px",
+        flexShrink: 0,
+        flexGrow: 0,
+        boxSizing: "border-box"
+      } : column ? getCellStyle(column) : void 0,
       children: content
     },
     key
@@ -7776,21 +7773,6 @@ var TableBody = ({
   classNames,
   className
 }) => {
-  const getCellStyle = (column) => ({
-    width: column.width ? `${column.width}px` : "auto",
-    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",
-    ...column.width && {
-      flexShrink: 0,
-      flexGrow: 0,
-      boxSizing: "border-box",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
-  });
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -8201,6 +8183,15 @@ var Table = (0, import_react15.forwardRef)((originalProps, ref) => {
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0 && !isLoading;
   const [checkedRows, setCheckedRows] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
+  const tableMinWidth = (0, import_react15.useMemo)(() => {
+    const columnsWidth = columns.reduce((total, column) => {
+      if (column.width) return total + column.width;
+      if (column.minWidth) return total + column.minWidth;
+      return total + 100;
+    }, 0);
+    const checkboxWidth = rowCheckbox ? 40 : 0;
+    return columnsWidth + checkboxWidth;
+  }, [columns, rowCheckbox]);
   (0, import_react15.useEffect)(() => {
     onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRows));
   }, [checkedRows]);
@@ -8240,7 +8231,8 @@ var Table = (0, import_react15.forwardRef)((originalProps, ref) => {
         className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
         style: {
           tableLayout: "fixed",
-          width: "100%"
+          width: "100%",
+          minWidth: `${tableMinWidth}px`
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -8510,6 +8502,21 @@ var tableStyle = (0, import_tailwind_variants16.tv)({
     height: "narrow"
   }
 });
+var getCellStyle = (column) => {
+  const hasFixedWidth = column.width;
+  const hasMinWidth = column.minWidth;
+  return {
+    width: hasFixedWidth ? `${column.width}px` : "auto",
+    minWidth: hasMinWidth ? `${column.minWidth}px` : hasFixedWidth ? `${column.width}px` : void 0,
+    maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
+    height: column.height ? `${column.height}px` : void 0,
+    textAlign: column.align || "center",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+};
 
 // src/components/table/definition-table.tsx
 var import_react16 = require("react");

package/dist/index.mjs

@@ -28,9 +28,7 @@ import {
 } from "./chunk-KCAGZUYM.mjs";
 import {
   table_default
-} from "./chunk-AX3D6VFT.mjs";
-import "./chunk-SIVCIIB6.mjs";
-import "./chunk-D5N7OBSO.mjs";
+} from "./chunk-UWXCAR5C.mjs";
 import "./chunk-3MY6LO7N.mjs";
 import {
   tabs_default
@@ -88,15 +86,15 @@ import {
 import "./chunk-75HLCORR.mjs";
 import {
   dateTimePicker_default
-} from "./chunk-YF2N2OBY.mjs";
-import "./chunk-WYHCK7XL.mjs";
+} from "./chunk-L65ETSUY.mjs";
+import "./chunk-ZYS4NSXT.mjs";
 import "./chunk-7MVEAQ7Z.mjs";
-import {
-  list_default
-} from "./chunk-B6XJNGQL.mjs";
 import {
   listItem_default
 } from "./chunk-QFIS6N5R.mjs";
+import {
+  list_default
+} from "./chunk-B6XJNGQL.mjs";
 import "./chunk-FWJ2ZKH6.mjs";
 import "./chunk-TUXYVNTY.mjs";
 import "./chunk-P732YGHO.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.1.79",
+  "version": "0.1.80",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/dist/chunk-D5N7OBSO.mjs

@@ -1,76 +0,0 @@
-"use client";
-import {
-  skeleton_default
-} from "./chunk-6PN3DGOE.mjs";
-import {
-  checkbox_default
-} from "./chunk-SKOCUCE5.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
-
-// src/components/table/table-head.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var TableHead = ({
-  slots,
-  columns,
-  color,
-  size,
-  rowCheckbox = false,
-  isCheckedAll,
-  isLoading = false,
-  classNames,
-  onCheckAll
-}) => {
-  const handleClickCheckAll = (e) => {
-    e.preventDefault();
-    onCheckAll(!isCheckedAll);
-  };
-  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
-      style: {
-        width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
-        minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
-        maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
-        height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
-        ...isCheckbox || (column == null ? void 0 : column.width) ? {
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : {}
-      },
-      children: content
-    },
-    key
-  );
-  const renderSkeletonRow = () => /* @__PURE__ */ jsx("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
-    columns.map(
-      (column, idx) => renderTh(/* @__PURE__ */ jsx(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
-    ),
-    rowCheckbox && renderTh(/* @__PURE__ */ jsx(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
-  ] }) });
-  const renderContentRow = () => /* @__PURE__ */ jsx("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx(
-        checkbox_default,
-        {
-          size,
-          checked: isCheckedAll,
-          onChange: (e) => onCheckAll(e.target.checked)
-        }
-      ) }),
-      "checkbox",
-      void 0,
-      true
-    )
-  ] }) });
-  return isLoading ? renderSkeletonRow() : renderContentRow();
-};
-var table_head_default = TableHead;
-
-export {
-  table_head_default
-};

package/dist/chunk-SIVCIIB6.mjs

@@ -1,112 +0,0 @@
-"use client";
-import {
-  skeleton_default
-} from "./chunk-6PN3DGOE.mjs";
-import {
-  checkbox_default
-} from "./chunk-SKOCUCE5.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
-
-// src/components/table/table-body.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TableBody = ({
-  slots,
-  rows,
-  columns,
-  size,
-  color,
-  rowCheckbox = false,
-  checkedRows,
-  onCheckRow,
-  isLoading = false,
-  emptyContent,
-  skeletonRow,
-  classNames,
-  className
-}) => {
-  const getCellStyle = (column) => ({
-    width: column.width ? `${column.width}px` : "auto",
-    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",
-    ...column.width && {
-      flexShrink: 0,
-      flexGrow: 0,
-      boxSizing: "border-box",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    }
-  });
-  const renderTdSkeleton = (key, column) => {
-    const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ jsx(
-      "td",
-      {
-        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
-        style: isCheckbox ? {
-          width: "40px",
-          minWidth: "40px",
-          maxWidth: "40px",
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : column ? getCellStyle(column) : void 0,
-        children: /* @__PURE__ */ jsx(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
-  };
-  const renderCheckboxCell = (rowId) => /* @__PURE__ */ jsx(
-    "td",
-    {
-      className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
-      style: {
-        width: "40px",
-        minWidth: "40px",
-        maxWidth: "40px",
-        flexShrink: 0,
-        flexGrow: 0,
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
-    }
-  );
-  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
-    rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
-  ] }, `skeleton-${rowIndex}`);
-  const renderEmptyRow = () => /* @__PURE__ */ jsx("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ 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__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => {
-      var _a;
-      const value = row[column.field];
-      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__ */ jsx(
-        "td",
-        {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
-          style: getCellStyle(column),
-          children: content
-        },
-        `${rowIndex}-${colIdx}`
-      );
-    }),
-    rowCheckbox && renderCheckboxCell(row.id)
-  ] }, rowIndex);
-  const renderRows = () => {
-    if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ jsx(Fragment, {});
-    if (!rows.length && emptyContent) return renderEmptyRow();
-    return rows.map((row, index) => renderDataRow(row, index));
-  };
-  return /* @__PURE__ */ jsx("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
-};
-var table_body_default = TableBody;
-
-export {
-  table_body_default
-};

package/dist/{chunk-WYHCK7XL.mjs → chunk-ZYS4NSXT.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  list_default
-} from "./chunk-B6XJNGQL.mjs";
 import {
   listItem_default
 } from "./chunk-QFIS6N5R.mjs";
+import {
+  list_default
+} from "./chunk-B6XJNGQL.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";