Aurora Empty State

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6// ---------------------------------------------------------------------------
7// Types
8// ---------------------------------------------------------------------------
9 
10export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
11  icon?: React.ReactNode;
12  title: string;
13  description?: React.ReactNode;
14  action?: React.ReactNode;
15  className?: string;
16  /** Heading level for the title. Defaults to "p" for flexibility; set to "h2"/"h3" when inside a section. */
17  as?: "h1" | "h2" | "h3" | "h4" | "p";
18}
19 
20// ---------------------------------------------------------------------------
21// Component
22// ---------------------------------------------------------------------------
23 
24export function EmptyState({
25  ref,
26  icon,
27  title,
28  description,
29  action,
30  className,
31  as: Heading = "p",
32  ...rest
33}: EmptyStateProps & { ref?: React.Ref<HTMLDivElement> }) {
34    const titleId = React.useId();
35    const descriptionId = React.useId();
36 
37    return (
38      <div
39        ref={ref}
40        className={cn(
41          "flex flex-col items-center justify-center gap-5 px-8 py-14 text-center",
42          className,
43        )}
44        style={{
45          border: `1.5px dashed var(--aurora-border-default)`,
46          borderRadius: "var(--aurora-radius-2)",
47        }}
48        aria-labelledby={titleId}
49        aria-describedby={description ? descriptionId : undefined}
50        {...rest}
51      >
52        {/* Icon slot */}
53        {icon && (
54          <span
55            aria-hidden
56            className="flex items-center justify-center"
57            style={{
58              width: 52,
59              height: 52,
60              background: "var(--aurora-control-surface)",
61              border: `1px solid var(--aurora-border-strong)`,
62              borderRadius: 14,
63              flexShrink: 0,
64              color: "var(--aurora-text-muted)",
65            }}
66          >
67            {icon}
68          </span>
69        )}
70 
71        <div className="flex flex-col items-center gap-2">
72          {/* Title */}
73          <Heading
74            id={titleId}
75            className="aurora-text-section"
76            style={{
77              fontWeight: "var(--aurora-weight-heading)",
78              lineHeight: "var(--aurora-line-dense)",
79              color: "var(--aurora-text-primary)",
80            }}
81          >
82            {title}
83          </Heading>
84 
85          {/* Description */}
86          {description && (
87// … truncated