Empty State

1"use client";
2 
3import { isValidElement, type ReactNode } from "react";
4import {
5  Inbox,
6  Lock,
7  SearchX,
8  Sparkles,
9  TriangleAlert,
10  WifiOff,
11} from "lucide-react";
12import { Button, buttonVariants } from "@/components/ui/button";
13import { cn } from "@/lib/utils";
14import type {
15  EmptyStateAction,
16  EmptyStateActionConfig,
17  EmptyStateProps,
18  EmptyStateSize,
19  EmptyStateVariant,
20} from "./types";
21 
22/** Per-variant default lucide icon (used when `icon`/`media` are both omitted). */
23const VARIANT_ICON: Record<EmptyStateVariant, typeof Inbox> = {
24  default: Inbox,
25  search: SearchX,
26  error: TriangleAlert,
27  offline: WifiOff,
28  permission: Lock,
29  "first-use": Sparkles,
30};
31 
32/** Variants that render `role="status" aria-live="polite"` — transient, state-change-driven (I4). */
33const TRANSIENT_VARIANTS: ReadonlySet<EmptyStateVariant> = new Set([
34  "search",
35  "error",
36  "offline",
37]);
38 
39const SIZE_ROOT_CLASS: Record<EmptyStateSize, string> = {
40  sm: "max-w-sm py-6",
41  md: "max-w-md py-10",
42  lg: "max-w-lg py-16",
43};
44 
45const SIZE_TILE_CLASS: Record<EmptyStateSize, string> = {
46  sm: "size-12 rounded-xl",
47  md: "size-14 rounded-2xl",
48  lg: "size-16 rounded-2xl",
49};
50 
51const SIZE_ICON_CLASS: Record<EmptyStateSize, string> = {
52  sm: "size-5",
53  md: "size-6",
54  lg: "size-7",
55};
56 
57const SIZE_TITLE_CLASS: Record<EmptyStateSize, string> = {
58  sm: "text-sm",
59  md: "text-base",
60  lg: "text-xl",
61};
62 
63const SIZE_DESCRIPTION_CLASS: Record<EmptyStateSize, string> = {
64  sm: "text-xs",
65  md: "text-sm",
66  lg: "text-base",
67};
68 
69/** 60ms-stagger entrance reveal (tw-animate-css). Never the app-level `reveal-up` keyframe — P-F5. */
70const REVEAL = "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-2";
71 
72function isActionConfig(action: EmptyStateAction): action is EmptyStateActionConfig {
73  return (
74    typeof action === "object" &&
75    action !== null &&
76    !isValidElement(action) &&
77    "label" in action
78  );
79}
80 
81function renderAction(action: EmptyStateAction | undefined, kind: "primary" | "secondary") {
82  // Also swallow `false`/`true`/`""` so the conditional-render idiom
83  // `action={isAdmin && {…}}` doesn't mount an empty actions row (C5 F2).
84  if (action == null || typeof action === "boolean" || action === "") return null;
85 
86  if (!isActionConfig(action)) {
87    return action as ReactNode;
88  }
89 
90  const { label, onClick, href, disabled } = action;
91  const variant = kind === "primary" ? "default" : "outline";
92 
93  if (href) {
94// … truncated