empty

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