feat: add data table and release checks

2026-03-19 20:10:36 +08:00
parent d5e4d5ece3
commit 3f77070802
12 changed files with 2157 additions and 86 deletions
@@ -0,0 +1,119 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const dataTableRootVariants = cva("grid gap-4 text-[var(--color-foreground)]");
+
+export const dataTableToolbarVariants = cva(
+  "flex flex-wrap items-center justify-between gap-3"
+);
+
+export const dataTableContentVariants = cva(
+  [
+    "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)]",
+    "bg-[var(--color-card)] shadow-[var(--shadow-sm)]",
+    getMotionRecipeClassNames("transition", "ring")
+  ],
+  {
+    variants: {
+      loading: {
+        false: "",
+        true: "opacity-90"
+      }
+    },
+    defaultVariants: {
+      loading: false
+    }
+  }
+);
+
+export const dataTableTableVariants = cva("min-w-full border-collapse align-middle");
+
+export const dataTableHeaderVariants = cva(
+  "bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-card))]"
+);
+
+export const dataTableHeaderCellVariants = cva(
+  [
+    "px-4 py-3 text-sm font-medium uppercase tracking-[var(--tracking-caps)]",
+    "text-[var(--color-muted-foreground)]"
+  ],
+  {
+    variants: {
+      align: {
+        start: "text-left",
+        center: "text-center",
+        end: "text-right"
+      },
+      sortable: {
+        false: "",
+        true: "select-none"
+      }
+    },
+    defaultVariants: {
+      align: "start",
+      sortable: false
+    }
+  }
+);
+
+export const dataTableBodyVariants = cva("");
+
+export const dataTableRowVariants = cva(
+  [
+    "border-t border-[color-mix(in_oklch,var(--color-border)_88%,transparent)]",
+    "transition-colors duration-200"
+  ],
+  {
+    variants: {
+      interactive: {
+        false: "",
+        true: "hover:bg-[color-mix(in_oklch,var(--color-surface)_72%,var(--color-card))]"
+      },
+      selected: {
+        false: "",
+        true: "bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
+      }
+    },
+    defaultVariants: {
+      interactive: true,
+      selected: false
+    }
+  }
+);
+
+export const dataTableCellVariants = cva(
+  "px-4 py-3 text-sm leading-6 text-[var(--color-card-foreground)]",
+  {
+    variants: {
+      align: {
+        start: "text-left",
+        center: "text-center",
+        end: "text-right"
+      }
+    },
+    defaultVariants: {
+      align: "start"
+    }
+  }
+);
+
+export const dataTableSearchContainerVariants = cva(
+  "w-full max-w-[22rem] min-w-[14rem]"
+);
+
+export const dataTablePaginationVariants = cva(
+  "flex flex-wrap items-center justify-between gap-3 px-4 py-3"
+);
+
+export const dataTableSelectionBarVariants = cva(
+  [
+    "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-md)]",
+    "border border-[color-mix(in_oklch,var(--color-primary)_24%,var(--color-border))]",
+    "bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--color-card))] px-4 py-3",
+    "shadow-[var(--shadow-xs)]"
+  ]
+);
+
+export const dataTableStatusVariants = cva(
+  "grid min-h-52 place-items-center px-6 py-8"
+);