Aurora AI Shimmer

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { cn } from "@/lib/utils"
6 
7// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
8 
9// ---------------------------------------------------------------------------
10// CVA variants
11// ---------------------------------------------------------------------------
12 
13const shimmerVariants = cva("aurora-ai-shimmer-bar shrink-0 overflow-hidden", {
14  variants: {
15    variant: {
16      // Single skeleton line.
17      line: "h-3 w-full rounded-full",
18      // Stack of skeleton lines (rendered as a flex column wrapper).
19      lines: "",
20      // Solid block / media placeholder.
21      block: "h-24 w-full rounded-[var(--aurora-radius-1)]",
22      // Circular avatar placeholder.
23      avatar: "size-10 rounded-full",
24      // Card composition (avatar + text rows in an elevated panel).
25      card: "",
26    },
27  },
28  defaultVariants: {
29    variant: "line",
30  },
31})
32 
33type ShimmerBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> &
34  VariantProps<typeof shimmerVariants> & {
35    /** Number of lines to render when `variant="lines"`. */
36    lines?: number
37  }
38 
39export type ShimmerProps = ShimmerBaseProps
40 
41function ShimmerBar({
42  className,
43  style,
44}: {
45  className?: string
46  style?: React.CSSProperties
47}) {
48  return (
49    <div
50      aria-hidden="true"
51      className={cn("aurora-ai-shimmer-bar shrink-0 overflow-hidden", className)}
52      style={style}
53    />
54  )
55}
56 
57const Shimmer = ({ ref, className, style, variant = "line", lines = 3, role, ...props }: ShimmerProps & { ref?: React.Ref<HTMLDivElement> }) => {
58    const a11y = {
59      role: role ?? "status",
60      "aria-busy": true as const,
61      "aria-live": "polite" as const,
62      "aria-label": props["aria-label"] ?? "Loading content",
63    }
64 
65    // Multiple stacked lines; the final line is shortened to read as a paragraph.
66    if (variant === "lines") {
67      return (
68        <div
69          ref={ref}
70          className={cn("flex w-full flex-col gap-2.5", className)}
71          style={style}
72          {...a11y}
73          {...props}
74        >
75          {Array.from({ length: Math.max(1, lines) }).map((_, i) => (
76            <ShimmerBar
77              key={i}
78              className="h-3 rounded-full"
79              style={{ width: i === lines - 1 ? "62%" : "100%" }}
80            />
81          ))}
82        </div>
83      )
84    }
85 
86// … truncated