Empty State

1import { cva, type VariantProps } from "class-variance-authority";
2import * as React from "react";
3import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
4import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
5import { cn } from "@/lib/utils";
6 
7/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
8const emptyStateVariants = cva("", {
9  variants: {
10    variant: {
11      default: "bg-card text-card-foreground border shadow-sm",
12      glass: "text-foreground",
13    },
14  },
15  defaultVariants: {
16    variant: "glass",
17  },
18});
19 
20/* Role: borderless adaptive glass. */
21const ROLE = {};
22 
23export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyStateVariants>, MaterialAxisProps {
24  effect?: HoverEffect;
25}
26 
27const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(({ className, variant = "glass", effect, children, ...props }, ref) => {
28  const [axes, rest] = splitAxisProps(props);
29  const m = materialSurface(variant === "default" ? null : ROLE, axes);
30 
31  return (
32    <div
33      ref={ref}
34      data-material={m?.["data-material"]}
35      className={cn(
36        m?.className,
37        "flex flex-col items-center justify-center rounded-xl p-12 text-center",
38        emptyStateVariants({
39          variant,
40        }),
41        effect &&
42          hoverEffects({
43            hover: effect,
44          }),
45        className,
46      )}
47      {...rest}
48    >
49      {children}
50    </div>
51  );
52});
53EmptyState.displayName = "EmptyState";
54 
55function EmptyStateIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
56  return <div className={cn("mb-4 text-foreground-ui", className)} {...props} />;
57}
58 
59function EmptyStateTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
60  return <h3 className={cn("text-lg font-semibold text-foreground mb-2", className)} {...props} />;
61}
62 
63function EmptyStateDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
64  return <p className={cn("text-sm text-muted-foreground max-w-sm", className)} {...props} />;
65}
66 
67export { EmptyState, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };