feat(ui): expand workflow-ready components

packages/ui/src/components/data-table.variants.ts

@@ -33,7 +33,7 @@ export const dataTableHeaderVariants = cva(
 
 export const dataTableHeaderCellVariants = cva(
   [
-    "px-4 py-3 text-sm font-medium uppercase tracking-[var(--tracking-caps)]",
+    "px-4 text-sm font-medium uppercase tracking-[var(--tracking-caps)]",
     "text-[var(--color-muted-foreground)]"
   ],
   {
@@ -43,6 +43,10 @@ export const dataTableHeaderCellVariants = cva(
         center: "text-center",
         end: "text-right"
       },
+      density: {
+        comfortable: "py-3",
+        compact: "py-2.5 text-xs"
+      },
       sortable: {
         false: "",
         true: "select-none"
@@ -50,6 +54,7 @@ export const dataTableHeaderCellVariants = cva(
     },
     defaultVariants: {
       align: "start",
+      density: "comfortable",
       sortable: false
     }
   }
@@ -81,17 +86,22 @@ export const dataTableRowVariants = cva(
 );
 
 export const dataTableCellVariants = cva(
-  "px-4 py-3 text-sm leading-6 text-[var(--color-card-foreground)]",
+  "px-4 text-[var(--color-card-foreground)]",
   {
     variants: {
       align: {
         start: "text-left",
         center: "text-center",
         end: "text-right"
+      },
+      density: {
+        comfortable: "py-3 text-sm leading-6",
+        compact: "py-2.5 text-[0.8125rem] leading-5"
       }
     },
     defaultVariants: {
-      align: "start"
+      align: "start",
+      density: "comfortable"
     }
   }
 );