feat: create TableHeadRow component

Author: raky291

packages/ui/src/components/Table/Table.tsx

@@ -10,6 +10,7 @@ import { TableCell } from "./TableCell";
 import { TableContext } from "./TableContext";
 import { TableHead, type FlowbiteTableHeadTheme } from "./TableHead";
 import { TableHeadCell } from "./TableHeadCell";
+import { TableHeadRow } from "./TableHeadRow";
 import { TableRow, type FlowbiteTableRowTheme } from "./TableRow";
 
 export interface FlowbiteTableTheme {
@@ -52,6 +53,7 @@ TableComponent.displayName = "Table";
 
 export const Table = Object.assign(TableComponent, {
   Head: TableHead,
+  HeadRow: TableHeadRow,
   Body: TableBody,
   Row: TableRow,
   Cell: TableCell,

packages/ui/src/components/Table/TableHead.tsx

@@ -10,6 +10,7 @@ import { TableHeadContext } from "./TableHeadContext";
 
 export interface FlowbiteTableHeadTheme {
   base: string;
+  row: string;
   cell: FlowbiteTableHeadCellTheme;
 }
 
@@ -26,7 +27,7 @@ export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
     return (
       <TableHeadContext.Provider value={{ theme }}>
         <thead className={twMerge(theme.base, className)} ref={ref} {...props}>
-          <tr>{children}</tr>
+          {children}
         </thead>
       </TableHeadContext.Provider>
     );

packages/ui/src/components/Table/TableHeadRow.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithRef } from "react";
+import { twMerge } from "tailwind-merge";
+import { mergeDeep } from "../../helpers/merge-deep";
+import type { DeepPartial } from "../../types";
+import { useTableContext } from "./TableContext";
+import type { FlowbiteTableHeadTheme } from "./TableHead";
+
+export interface TableHeadRowProps extends ComponentPropsWithRef<"tr"> {
+  theme?: DeepPartial<FlowbiteTableHeadTheme>;
+}
+
+export const TableHeadRow = forwardRef<HTMLTableRowElement, TableHeadRowProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme } = useTableContext();
+
+    const theme = mergeDeep(rootTheme.head, customTheme);
+
+    return (
+      <tr className={twMerge(theme.row, className)} ref={ref} {...props}>
+        {children}
+      </tr>
+    );
+  },
+);
+
+TableHeadRow.displayName = "Table.HeadRow";