Alert

1import { type VariantProps, cva } from 'class-variance-authority';
2import * as React from 'react';
3 
4import { Button } from '@/components/ui/button';
5import { Icon } from '@/components/ui/icon';
6import { IconShell } from '@/components/ui/icon-shell';
7import { cn } from '@/lib/utils';
8 
9const alertVariants = cva(
10  'group/alert relative w-full bg-fill-onsurface-ui-3 shadow-elevation-2 flex items-center rounded-lg',
11  {
12    variants: {
13      layout: {
14        // Modal layout: vertical card (560px max-width)
15        modal: 'max-w-[560px] px-4 py-6 gap-4',
16        // Long layout: horizontal banner (full width)
17        long: 'p-4 gap-4',
18      },
19    },
20    defaultVariants: {
21      layout: 'modal',
22    },
23  },
24);
25 
26function Alert({
27  className,
28  layout,
29  ...props
30}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
31  return (
32    <div
33      data-slot="alert"
34      data-layout={layout}
35      role="alert"
36      className={cn(alertVariants({ layout }), className)}
37      {...props}
38    />
39  );
40}
41 
42function AlertIcon({ className, ...props }: React.ComponentProps<'div'>) {
43  return (
44    <div
45      data-slot="alert-icon"
46      className={cn(
47        'text-status-information flex size-8 shrink-0 items-center justify-center self-start',
48        className,
49      )}
50      {...props}
51    />
52  );
53}
54 
55function AlertContent({ className, ...props }: React.ComponentProps<'div'>) {
56  return (
57    <div
58      data-slot="alert-content"
59      className={cn(
60        'flex min-w-0 flex-1 flex-col gap-3 pt-1 align-baseline first:pl-4',
61        className,
62      )}
63      {...props}
64    />
65  );
66}
67 
68function AlertTitle({ className, ...props }: React.ComponentProps<'p'>) {
69  return (
70    <p
71      data-slot="alert-title"
72      className={cn(
73        'headings-h4-semibold text-fg-primary',
74        'group-data-[layout=long]/alert:paragraph-large-emphasised',
75        className,
76      )}
77      {...props}
78    />
79  );
80}
81 
82function AlertDescription({ className, ...props }: React.ComponentProps<'p'>) {
83  return (
84    <p
85      data-slot="alert-description"
86      className={cn('paragraph-large-primary text-fg-secondary', className)}
87      {...props}
88    />
89  );
90}
91 
92function AlertClose({ ...props }: React.ComponentProps<typeof Button>) {
93  return (
94    <Button
95      {...props}
96      className="self-start"
97      data-slot="alert-close"
98      size="icon"
99      variant="ghost">
100      <IconShell type="neutral" hoverable>
101        <Icon icon="close" />
102// … truncated