Empty

1import { cva, type VariantProps } from "class-variance-authority";
2 
3import { cn } from "@/registry/lib/surface";
4 
5function Empty({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="empty"
9      className={cn(
10        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-md border border border-dashed p-6 text-center text-balance",
11        className,
12      )}
13      {...props}
14    />
15  );
16}
17 
18function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
19  return (
20    <div
21      data-slot="empty-header"
22      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
23      {...props}
24    />
25  );
26}
27 
28const emptyMediaVariants = cva(
29  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
30  {
31    variants: {
32      variant: {
33        default: "bg-transparent",
34        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
35      },
36    },
37    defaultVariants: {
38      variant: "default",
39    },
40  },
41);
42 
43function EmptyMedia({
44  className,
45  variant = "default",
46  ...props
47}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
48  return (
49    <div
50      data-slot="empty-icon"
51      data-variant={variant}
52      className={cn(emptyMediaVariants({ variant, className }))}
53      {...props}
54    />
55  );
56}
57 
58function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
59  return (
60    <div
61      data-slot="empty-title"
62      className={cn("font-mono text-sm font-medium tracking-tight", className)}
63      {...props}
64    />
65  );
66}
67 
68function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
69  return (
70    <div
71      data-slot="empty-description"
72      className={cn(
73        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
74        className,
75      )}
76      {...props}
77    />
78  );
79}
80 
81function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
82  return (
83    <div
84      data-slot="empty-content"
85      className={cn(
86        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
87        className,
88      )}
89      {...props}
90    />
91  );
92}
93 
94export {
95  Empty,
96  EmptyContent,
97  EmptyDescription,
98  EmptyHeader,
99  EmptyMedia,
100  EmptyTitle,
101};