@deepnoid/ui 0.1.0 → 0.1.1

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

@@ -1,13 +1,10 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-5IQKKLZY.mjs";
+} from "../../chunk-M2IRRTFM.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-XTGRSVYO.mjs";
-import "../../chunk-ZYIIXWVY.mjs";
-import "../../chunk-24NQEB73.mjs";
-import "../../chunk-P2TMIZRH.mjs";
-import "../../chunk-IE2BRM7Z.mjs";
+import "../../chunk-J5WJD6XZ.mjs";
+import "../../chunk-2ZT6V4QR.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";

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

@@ -1,20 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Size, SlotsToClasses } from '../../utils/types.mjs';
-import { TableColumn, TableReturnType, TableSlots } from './table.mjs';
+import { TableReturnType, TableColumn, TableSlots } from './table.mjs';
 import 'tailwind-variants';
 import 'react';
 
 type TableHeadProps = {
-    columns: TableColumn[];
     slots: TableReturnType;
+    columns: TableColumn[];
     size?: Size;
-    color?: "primary" | "secondary";
-    isExpanded?: boolean;
-    isChecked?: boolean;
+    selectableRows?: boolean;
     isCheckedAll: boolean;
     classNames?: SlotsToClasses<TableSlots>;
     onCheckAll: (isChecked: boolean) => void;
 };
-declare const TableHead: ({ columns, slots, size, color, isExpanded, isChecked, isCheckedAll, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ columns, slots, size, selectableRows, isCheckedAll, classNames, onCheckAll }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -1,20 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Size, SlotsToClasses } from '../../utils/types.js';
-import { TableColumn, TableReturnType, TableSlots } from './table.js';
+import { TableReturnType, TableColumn, TableSlots } from './table.js';
 import 'tailwind-variants';
 import 'react';
 
 type TableHeadProps = {
-    columns: TableColumn[];
     slots: TableReturnType;
+    columns: TableColumn[];
     size?: Size;
-    color?: "primary" | "secondary";
-    isExpanded?: boolean;
-    isChecked?: boolean;
+    selectableRows?: boolean;
     isCheckedAll: boolean;
     classNames?: SlotsToClasses<TableSlots>;
     onCheckAll: (isChecked: boolean) => void;
 };
-declare const TableHead: ({ columns, slots, size, color, isExpanded, isChecked, isCheckedAll, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ columns, slots, size, selectableRows, isCheckedAll, classNames, onCheckAll }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -105,7 +105,6 @@ __export(table_head_exports, {
   default: () => table_head_default
 });
 module.exports = __toCommonJS(table_head_exports);
-var import_react2 = require("react");
 
 // src/utils/clsx.ts
 function clsx(...args) {
@@ -161,35 +160,30 @@ var fontSize = {
   h1: [
     "40px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h2: [
     "34px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h3: [
     "28px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h4: [
     "24px",
     {
-      letterSpacing: "-2%",
       fontWeight: "700"
     }
   ],
   h5: [
     "20px",
     {
-      letterSpacing: "-2%",
       fontWeight: "600"
     }
   ],
@@ -197,7 +191,6 @@ var fontSize = {
     "12px",
     {
       lineHeight: "18px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -205,7 +198,6 @@ var fontSize = {
     "14px",
     {
       lineHeight: "21px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -213,7 +205,6 @@ var fontSize = {
     "16px",
     {
       lineHeight: "24px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ],
@@ -221,7 +212,6 @@ var fontSize = {
     "18px",
     {
       lineHeight: "27px",
-      letterSpacing: "-2%",
       fontWeight: "400"
     }
   ]
@@ -604,44 +594,16 @@ var checkboxStyle = tv({
 
 // src/components/table/table-head.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var import_react3 = require("react");
-var TableHead = ({
-  columns,
-  slots,
-  size,
-  color,
-  isExpanded,
-  isChecked,
-  isCheckedAll,
-  classNames,
-  onCheckAll
-}) => {
-  const getTheadProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.thead({ class: clsx(classNames == null ? void 0 : classNames.thead) })
-    }),
-    [classNames == null ? void 0 : classNames.thead, slots]
-  );
-  const getTrProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.tr({ class: clsx(classNames == null ? void 0 : classNames.tr) })
-    }),
-    [classNames == null ? void 0 : classNames.tr, slots]
-  );
-  const getThProps = (0, import_react2.useCallback)(
-    ({ className }) => ({
-      className: slots.th({ class: clsx(classNames == null ? void 0 : classNames.th, className) })
-    }),
-    [classNames == null ? void 0 : classNames.th, slots]
-  );
+var TableHead = ({ columns, slots, size, selectableRows, isCheckedAll, classNames, onCheckAll }) => {
   const handleClickCheckAll = (e) => {
     e.preventDefault();
     onCheckAll(!isCheckedAll);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
-    isChecked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isCheckedAll, classNames: { wrapper: "bg-background" } }) }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
-    columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
+  const renderColumnHeaders = () => columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column), children: column.headerName }, `${column.field}${index}thead`));
+  const renderSelectAllCheckbox = () => selectableRows && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: clsx(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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: clsx(slots.thead({ class: classNames == null ? void 0 : classNames.thead })), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr })), children: [
+    renderColumnHeaders(),
+    renderSelectAllCheckbox()
   ] }) });
 };
 var table_head_default = TableHead;

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

@@ -1,10 +1,10 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-PFYYYUJW.mjs";
+} from "../../chunk-OQS4LGZK.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
-import "../../chunk-XTGRSVYO.mjs";
-import "../../chunk-IE2BRM7Z.mjs";
+import "../../chunk-J5WJD6XZ.mjs";
+import "../../chunk-2ZT6V4QR.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-AC6TWLRT.mjs";

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

@@ -1,336 +1,191 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-import react__default, { ReactElement } from 'react';
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
-interface Props extends Omit<react__default.ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue"> {
+interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "color" | "slot" | "size" | "height" | "defaultChecked" | "defaultValue"> {
     rows: TableRow[];
     columns: TableColumn[];
-    isLoading?: boolean;
-    emptyContent?: ReactElement;
-    loadingContent?: ReactElement;
+    selectableRows?: boolean;
+    totalData?: number;
+    pagination?: {
+        page: number;
+        perPage: number;
+    };
+    onPageChange: (pagination: {
+        page: number;
+        perPage: number;
+    }) => void;
+    emptyContent?: ReactNode;
     classNames?: SlotsToClasses<TableSlots>;
-    onRowAction?: (e: react__default.MouseEvent, params: TableRow) => void;
 }
 interface TableRef {
     checkedRows: Set<number>;
     setCheckedRows: (rows: Set<number>) => void;
 }
-declare const Table: react__default.ForwardRefExoticComponent<Props & TableVariantProps & react__default.RefAttributes<TableRef>>;
+declare const Table: react.ForwardRefExoticComponent<TableBaseProps & TableVariantProps & react.RefAttributes<TableRef>>;
 
-declare const table: tailwind_variants.TVReturnType<{
+declare const tableStyle: tailwind_variants.TVReturnType<{
     variant: {
         solid: {
-            tbody: string;
+            tbody: string[];
         };
-        stripe: {
-            thead: string;
+        outline: {
+            tbody: string[];
+            th: string[];
+            td: string[];
         };
-        line: {
-            tr: string;
-            thead: string;
+        underline: {
+            tbody: string[];
+            th: string[];
         };
     };
     size: {
         sm: {
-            tr: string;
+            tr: string[];
         };
         md: {
-            tr: string;
+            tr: string[];
         };
         lg: {
-            tr: string;
+            tr: string[];
         };
         xl: {
-            tr: string;
+            tr: string[];
         };
     };
     color: {
         primary: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
         secondary: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
         neutral: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
     };
-    isLoading: {
-        true: {
-            loadingWrapper: string;
-        };
-        false: {
-            loadingWrapper: string;
-        };
-    };
-    isSelected: {
-        true: {};
-    };
-    isMultiSelect: {
-        true: {};
-    };
-    isChecked: {
-        true: {};
-    };
-    isCheckedRow: {
-        true: {
-            tr: string;
-        };
-    };
-    hideHeader: {
-        true: {
-            thead: string;
-        };
-    };
-    isCompact: {
-        true: {
-            td: string;
-        };
-        false: {};
-    };
-    isHeaderSticky: {
-        true: {
-            thead: string;
-        };
-    };
-    isExpanded: {
-        true: {
-            tr: string;
-        };
+    height: {
+        narrow: {};
+        wide: {};
     };
 }, {
-    base: string;
-    table: string;
-    thead: string;
-    tbody: string;
+    base: string[];
+    table: string[];
+    thead: string[];
+    tbody: string[];
     tr: string[];
     th: string[];
     td: string[];
-    tfoot: string;
-    expandedTr: string;
-    sortIcon: string[];
-    emptyWrapper: string;
-    loadingWrapper: string[];
 }, undefined, {
     variant: {
         solid: {
-            tbody: string;
+            tbody: string[];
         };
-        stripe: {
-            thead: string;
+        outline: {
+            tbody: string[];
+            th: string[];
+            td: string[];
         };
-        line: {
-            tr: string;
-            thead: string;
+        underline: {
+            tbody: string[];
+            th: string[];
         };
     };
     size: {
         sm: {
-            tr: string;
+            tr: string[];
         };
         md: {
-            tr: string;
+            tr: string[];
         };
         lg: {
-            tr: string;
+            tr: string[];
         };
         xl: {
-            tr: string;
+            tr: string[];
         };
     };
     color: {
         primary: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
         secondary: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
         neutral: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
-        };
-    };
-    isLoading: {
-        true: {
-            loadingWrapper: string;
-        };
-        false: {
-            loadingWrapper: string;
+            tbody: string[];
         };
     };
-    isSelected: {
-        true: {};
-    };
-    isMultiSelect: {
-        true: {};
-    };
-    isChecked: {
-        true: {};
-    };
-    isCheckedRow: {
-        true: {
-            tr: string;
-        };
-    };
-    hideHeader: {
-        true: {
-            thead: string;
-        };
-    };
-    isCompact: {
-        true: {
-            td: string;
-        };
-        false: {};
-    };
-    isHeaderSticky: {
-        true: {
-            thead: string;
-        };
-    };
-    isExpanded: {
-        true: {
-            tr: string;
-        };
+    height: {
+        narrow: {};
+        wide: {};
     };
 }, {
-    base: string;
-    table: string;
-    thead: string;
-    tbody: string;
+    base: string[];
+    table: string[];
+    thead: string[];
+    tbody: string[];
     tr: string[];
     th: string[];
     td: string[];
-    tfoot: string;
-    expandedTr: string;
-    sortIcon: string[];
-    emptyWrapper: string;
-    loadingWrapper: string[];
 }, tailwind_variants.TVReturnType<{
     variant: {
         solid: {
-            tbody: string;
+            tbody: string[];
         };
-        stripe: {
-            thead: string;
+        outline: {
+            tbody: string[];
+            th: string[];
+            td: string[];
         };
-        line: {
-            tr: string;
-            thead: string;
+        underline: {
+            tbody: string[];
+            th: string[];
         };
     };
     size: {
         sm: {
-            tr: string;
+            tr: string[];
         };
         md: {
-            tr: string;
+            tr: string[];
         };
         lg: {
-            tr: string;
+            tr: string[];
         };
         xl: {
-            tr: string;
+            tr: string[];
         };
     };
     color: {
         primary: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
         secondary: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
+            tbody: string[];
         };
         neutral: {
-            thead: string;
-            tr: string;
-            td: string;
-            expandedTr: string;
-        };
-    };
-    isLoading: {
-        true: {
-            loadingWrapper: string;
-        };
-        false: {
-            loadingWrapper: string;
-        };
-    };
-    isSelected: {
-        true: {};
-    };
-    isMultiSelect: {
-        true: {};
-    };
-    isChecked: {
-        true: {};
-    };
-    isCheckedRow: {
-        true: {
-            tr: string;
-        };
-    };
-    hideHeader: {
-        true: {
-            thead: string;
+            tbody: string[];
         };
     };
-    isCompact: {
-        true: {
-            td: string;
-        };
-        false: {};
-    };
-    isHeaderSticky: {
-        true: {
-            thead: string;
-        };
-    };
-    isExpanded: {
-        true: {
-            tr: string;
-        };
+    height: {
+        narrow: {};
+        wide: {};
     };
 }, {
-    base: string;
-    table: string;
-    thead: string;
-    tbody: string;
+    base: string[];
+    table: string[];
+    thead: string[];
+    tbody: string[];
     tr: string[];
     th: string[];
     td: string[];
-    tfoot: string;
-    expandedTr: string;
-    sortIcon: string[];
-    emptyWrapper: string;
-    loadingWrapper: string[];
 }, undefined, unknown, unknown, undefined>>;
-type TableVariantProps = VariantProps<typeof table>;
-type TableSlots = keyof ReturnType<typeof table>;
-type TableReturnType = ReturnType<typeof table>;
+type TableVariantProps = VariantProps<typeof tableStyle>;
+type TableSlots = keyof ReturnType<typeof tableStyle>;
+type TableReturnType = ReturnType<typeof tableStyle>;
 type RowValue = Record<string | symbol, any>;
 type CellParams<R extends RowValue = any, V = any, F = V> = {
     id: string | number;
@@ -348,9 +203,14 @@ type TableRow<R extends RowValue = RowValue> = R;
 type TableColumn<R extends RowValue = RowValue, V = any, F = V> = {
     field: string;
     headerName?: string | ReactElement;
+    align?: "left" | "center" | "right";
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    height?: number;
     className?: string;
+    renderCell?: (params: CellParams<R, V, F>) => ReactNode;
     valueFormatter?: (params: ValueFormatterParams<V>) => F;
-    renderCell?: (params: CellParams<R, V, F>) => react__default.ReactNode;
 };
 
 export { type TableColumn, type TableRef, type TableReturnType, type TableRow, type TableSlots, type TableVariantProps, Table as default };