@ciridae/ui 0.5.0 → 0.6.0

package/dist/components/ui/data-table-grid.js

@@ -4,6 +4,8 @@ import { flexRender, } from "@tanstack/react-table";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+/** Font taken from the enclosing `TableHead`; see `DataTableHeaderCell`. */
+const inheritType = { fontSize: "inherit", fontWeight: "inherit", lineHeight: "inherit" };
 function DataTableGrid({ empty, getRowClassName, onRowClick, rows, table, }) {
     // One scroller, owned by `data-table-content` outside this: nesting an
     // `overflow-x-auto` inside it would give the sticky header a scrollport that
@@ -20,10 +22,13 @@ function DataTableHeaderCell({ header }) {
     const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ChevronsUpDownIcon;
     if (!header.column.getCanSort())
         return flexRender(header.column.columnDef.header, header.getContext());
-    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), 
-        // `TableHead`'s size and weight, restated rather than inherited --
-        // Tailwind has no font-size or font-weight `inherit` utility -- so a
-        // sortable column and a plain one read the same.
-        className: "-ml-2 h-auto px-2 py-0 text-sm font-normal text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
+    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "-ml-2 h-auto px-2 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", 
+        // Type taken from the `<th>` this sits in, whatever that turns out to be,
+        // so a caller restyling its headers moves the sortable ones with them.
+        // Inline because Tailwind has no font-size or font-weight `inherit`
+        // utility, and an arbitrary-value one would be a second utility in the
+        // same group as the Button recipe's own -- decided by stylesheet order
+        // rather than by this file.
+        style: inheritType, onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
 }
 export { DataTableGrid };

package/dist/components/ui/data-table.js

@@ -20,12 +20,16 @@ function DataTableEmpty({ className, ...props }) {
 function DataTableSkeleton({ className, ...props }) {
     return (_jsx(DataTableContent, { className: "border-t-0", children: _jsx(TableSkeleton, { className: cn("rounded-none border-x-0 border-b-0", className), ...props }) }));
 }
+/** Font taken from the enclosing `TableHead`; see `SortableTableHead`. */
+const inheritType = { fontSize: "inherit", fontWeight: "inherit", lineHeight: "inherit" };
 function SortableTableHead({ active = false, children, className, direction = "asc", onSort, align = "left", ...props }) {
     const Icon = active ? (direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
-    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn(
-            // `TableHead`'s size and weight, restated rather than inherited --
-            // Tailwind has no font-size or font-weight `inherit` utility -- so the
-            // two data tables in this package draw their header rows the same way.
-            "h-auto px-0 py-0 text-sm font-normal text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
+    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("h-auto px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", 
+            // Type taken from the `<th>`, including a `className` the caller put
+            // there, so a restyled header row stays one typeface. Inline rather
+            // than a utility: Tailwind has no font-size or font-weight `inherit`,
+            // and an arbitrary-value one would compete with the Button recipe's
+            // own on stylesheet order.
+            style: inheritType, type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
 }
 export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, TanStackDataTable, SortableTableHead, };

package/dist/components/ui/table.js

@@ -18,11 +18,12 @@ function TableRow({ className, ...props }) {
 }
 function TableHead({ className, ...props }) {
     return (_jsx("th", { "data-slot": "table-head", className: cn(
-        // A column name is a name, not metadata, so it is set at the table's
-        // own size. It lives here rather than on the sort button so that a
-        // table mixing sortable and plain columns draws one header row and
-        // not two typefaces side by side.
-        "h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-sm font-normal tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+        // A step down from the rows and a step up in weight, so the header
+        // reads as the label of the column rather than as its first entry.
+        // It lives here rather than on the sort button so that a table mixing
+        // sortable and plain columns draws one header row, not two typefaces
+        // side by side -- the sort buttons restate this pair to match.
+        "h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-xs font-medium tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
 }
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn("px-(--table-cell-padding-x) py-(--table-cell-padding-y) align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"type": "module",
 	"private": false,
 	"repository": {