feat(ui): expand workflow-ready components

packages/ui/src/components/empty-state.variants.ts

@@ -3,8 +3,8 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const emptyStateVariants = cva(
   [
-    "grid gap-6 rounded-[var(--ui-card-radius)] border p-8 shadow-[var(--ui-card-default-shadow)] sm:p-10 [border-width:var(--ui-card-border-width)]",
-    "justify-items-center text-center text-[var(--color-card-foreground)]",
+    "grid gap-6 rounded-[var(--ui-card-radius)] border shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]",
+    "text-[var(--color-card-foreground)]",
     getMotionRecipeClassNames("transition", "ring")
   ],
   {
@@ -15,23 +15,58 @@ export const emptyStateVariants = cva(
           "border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
         accent:
           "border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
+      },
+      layout: {
+        default: "p-8 sm:p-10",
+        compact:
+          "gap-4 p-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center sm:[&>[data-slot=media]]:row-span-2 sm:[&>[data-slot=header]]:justify-items-start sm:[&>[data-slot=actions]]:col-start-2 sm:[&>[data-slot=actions]]:justify-start",
+        split:
+          "p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:[&>[data-slot=media]]:col-start-2 lg:[&>[data-slot=media]]:row-span-2 lg:[&>[data-slot=media]]:justify-self-end lg:[&>[data-slot=header]]:col-start-1 lg:[&>[data-slot=actions]]:col-start-1 lg:[&>[data-slot=actions]]:justify-start"
+      },
+      align: {
+        center: "justify-items-center text-center",
+        start: "justify-items-start text-left"
       }
     },
     defaultVariants: {
-      tone: "default"
+      tone: "default",
+      layout: "default",
+      align: "center"
     }
   }
 );
 
 export const emptyStateMediaVariants = cva(
   [
-    "grid min-h-20 min-w-20 place-items-center rounded-[var(--ui-card-radius)] border p-4 [border-width:var(--ui-card-border-width)]",
+    "grid place-items-center rounded-[var(--ui-card-radius)] border [border-width:var(--ui-card-border-width)]",
     "border-[var(--ui-card-subtle-border)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--ui-card-subtle-bg))]",
     "text-[var(--color-foreground)] shadow-[var(--ui-card-subtle-shadow)]"
-  ]
+  ],
+  {
+    variants: {
+      size: {
+        compact: "min-h-16 min-w-16 p-3",
+        default: "min-h-20 min-w-20 p-4",
+        hero: "min-h-28 min-w-28 p-6"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
 );
 
-export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2 justify-items-center");
+export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2", {
+  variants: {
+    align: {
+      center: "justify-items-center text-center",
+      start: "justify-items-start text-left"
+    }
+  },
+  defaultVariants: {
+    align: "center"
+  }
+});
 
 export const emptyStateEyebrowVariants = cva(
   "text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
@@ -45,6 +80,14 @@ 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"
-);
+export const emptyStateActionsVariants = cva("flex flex-wrap items-center gap-3", {
+  variants: {
+    layout: {
+      inline: "justify-center",
+      stack: "flex-col justify-start sm:flex-row"
+    }
+  },
+  defaultVariants: {
+    layout: "inline"
+  }
+});