feat: add empty state and expand overlay qa

2026-03-19 19:00:36 +08:00
parent f318f94c9a
commit 132bb6961d
20 changed files with 1094 additions and 6 deletions
@@ -0,0 +1,50 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const emptyStateVariants = cva(
+  [
+    "grid gap-6 rounded-[var(--radius-lg)] border p-8 shadow-[var(--shadow-sm)] sm:p-10",
+    "justify-items-center text-center text-[var(--color-card-foreground)]",
+    getMotionRecipeClassNames("transition", "ring")
+  ],
+  {
+    variants: {
+      tone: {
+        default: "border-[var(--color-border)] bg-[var(--color-card)]",
+        subtle:
+          "border-[color-mix(in_oklch,var(--color-border)_82%,transparent)] bg-[var(--color-surface)] shadow-[var(--shadow-xs)]",
+        accent:
+          "border-[color-mix(in_oklch,var(--color-primary)_24%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
+      }
+    },
+    defaultVariants: {
+      tone: "default"
+    }
+  }
+);
+
+export const emptyStateMediaVariants = cva(
+  [
+    "grid min-h-20 min-w-20 place-items-center rounded-[var(--radius-lg)] border p-4",
+    "border-[color-mix(in_oklch,var(--color-border)_88%,transparent)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--color-surface))]",
+    "text-[var(--color-foreground)] shadow-[var(--shadow-xs)]"
+  ]
+);
+
+export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2 justify-items-center");
+
+export const emptyStateEyebrowVariants = cva(
+  "text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
+);
+
+export const emptyStateTitleVariants = cva(
+  "text-2xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
+);
+
+export const emptyStateDescriptionVariants = cva(
+  "max-w-[30rem] text-sm leading-6 text-[var(--color-muted-foreground)]"
+);
+
+export const emptyStateActionsVariants = cva(
+  "flex flex-wrap items-center justify-center gap-3"
+);