Empty

1// Base UI base empty — presentational, no headless primitive in any base.
2//
3// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
4// from upstream's `bases/base-ui/ui/empty.tsx`, which was not available at port time.
5// Diff the class strings against the upstream source before treating this as ported.
6import { cva, type VariantProps } from 'class-variance-authority';
7 
8import { cn } from '@/lib/utils';
9import type { DivProps, HostProps } from '@/lib/types';
10 
11export function Empty({ className, ...props }: DivProps) @{
12	<div
13		data-slot="empty"
14		className={cn(
15			'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
16			className,
17		)}
18		{...props}
19	/>
20}
21 
22export function EmptyHeader({ className, ...props }: DivProps) @{
23	<div
24		data-slot="empty-header"
25		className={cn('flex max-w-sm flex-col items-center gap-2', className)}
26		{...props}
27	/>
28}
29 
30export const emptyMediaVariants = cva(
31	'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
32	{
33		variants: {
34			variant: {
35				default: 'bg-transparent',
36				icon: 'flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*=\'size-\'])]:size-4',
37			},
38		},
39		defaultVariants: {
40			variant: 'default',
41		},
42	},
43);
44 
45export interface EmptyMediaProps extends DivProps {
46	variant?: VariantProps<typeof emptyMediaVariants>['variant'];
47}
48 
49export function EmptyMedia({ className, variant = 'default', ...props }: EmptyMediaProps) @{
50	<div
51		data-slot="empty-icon"
52		data-variant={variant}
53		className={cn(emptyMediaVariants({ variant, className }))}
54		{...props}
55	/>
56}
57 
58export function EmptyTitle({ className, ...props }: DivProps) @{
59	<div
60		data-slot="empty-title"
61		className={cn('text-sm font-medium tracking-tight', className)}
62		{...props}
63	/>
64}
65 
66// Upstream types this part as a `<p>` while rendering a `<div>`; the prop type is transcribed
67// as-authored rather than "corrected", so the surface matches upstream exactly.
68export function EmptyDescription({ className, ...props }: HostProps<'p'>) @{
69	<div
70		data-slot="empty-description"
71		className={cn(
72			'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
73			className,
74		)}
75		{...props}
76	/>
77}
78 
79export function EmptyContent({ className, ...props }: DivProps) @{
80	<div
81		data-slot="empty-content"
82		className={cn(
83// … truncated