@rovula/ui 0.1.29 → 0.1.31

package/src/components/Table/Table.tsx

@@ -37,51 +37,61 @@ const Table = React.forwardRef<
      */
     scrollableWrapper?: boolean;
   } & React.HTMLAttributes<HTMLTableElement>
->(({ rootClassName, className, rootRef, bordered = false, scrollableWrapper = true, ...props }, ref) => {
-  const scrollClassName = cn(
-    "relative h-full w-full min-h-0 overflow-auto",
-    "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s",
-  );
+>(
+  (
+    {
+      rootClassName,
+      className,
+      rootRef,
+      bordered = false,
+      scrollableWrapper = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const scrollClassName = cn(
+      "relative h-full w-full min-h-0 overflow-auto",
+      "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s",
+    );
 
-  const tableClassName = cn(
-    "min-w-full caption-bottom border-separate border-spacing-0",
-    className,
-  );
+    const tableClassName = cn(
+      "min-w-full caption-bottom border-separate border-spacing-0",
+      className,
+    );
 
-  const tableEl = (
-    <table ref={ref} className={tableClassName} {...props} />
-  );
+    const tableEl = <table ref={ref} className={tableClassName} {...props} />;
 
-  if (!bordered && scrollableWrapper === false) {
-    return (
-      <table
-        ref={ref}
-        className={cn(tableClassName, rootClassName)}
-        {...props}
-      />
-    );
-  }
+    if (!bordered && scrollableWrapper === false) {
+      return (
+        <table
+          ref={ref}
+          className={cn(tableClassName, rootClassName)}
+          {...props}
+        />
+      );
+    }
+
+    if (bordered) {
+      return (
+        <div
+          className={cn(
+            "relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-md border border-table-c-border",
+            rootClassName,
+          )}
+          ref={rootRef}
+        >
+          <div className={scrollClassName}>{tableEl}</div>
+        </div>
+      );
+    }
 
-  if (bordered) {
     return (
-      <div
-        className={cn(
-          "relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-md border border-table-c-border",
-          rootClassName,
-        )}
-        ref={rootRef}
-      >
-        <div className={scrollClassName}>{tableEl}</div>
+      <div className={cn(scrollClassName, rootClassName)} ref={rootRef}>
+        {tableEl}
       </div>
     );
-  }
-
-  return (
-    <div className={cn(scrollClassName, rootClassName)} ref={rootRef}>
-      {tableEl}
-    </div>
-  );
-});
+  },
+);
 Table.displayName = "Table";
 
 // ---------------------------------------------------------------------------
@@ -99,7 +109,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "[&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line",
+      "[&_tr>th]:box-border [&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line",
       className,
     )}
     {...props}
@@ -179,7 +189,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "transition-colors",
+      "transition-colors  box-border",
       // Row separator — applied on cells because border-separate ignores tr borders
       divided && [
         "[&>td]:border-b [&>td]:border-b-table-c-row-line",
@@ -207,9 +217,10 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-[44px] box-border py-3 px-3 text-left align-middle",
+      "box-border py-3 px-3 text-left align-middle",
       "typography-body2 text-text-contrast-max",
       "bg-table-c-header-bg",
+      "leading-[20px]",
       // Prefer min-width only so callers (e.g. DataTable exactWidth) can set
       // a different width via inline style without fighting a fixed `w-10`.
       "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10",
@@ -230,8 +241,9 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "h-[42px] box-border py-3 px-3 text-left align-middle",
+      "box-border py-3 px-3 text-left align-middle",
       "typography-body3 text-text-contrast-max",
+      "leading-[18px]", // content สูง 18
       // Inherit row background from <tr> so every cell paints the same fill
       // (some table layouts / browsers leave the last column visually “empty”).
       "bg-inherit",