Alert

1'use client';
2 
3import { cva, type VariantProps } from 'class-variance-authority';
4import { X } from 'lucide-react';
5import { ComponentProps, useState } from 'react';
6 
7import { Body2, Headline6 } from '@/components/ui/typography';
8import { cn } from '@/lib/utils';
9 
10/*
11 * UX4G alert: border-radius 0.25rem, padding 1rem, border 1px solid.
12 * Colors use the --alert-{theme}-{color|bg|border} CSS variables defined in globals.css.
13 * Icons are inline (d-flex align-items-center) — use <AlertIcon> to wrap content.
14 * alert-link: font-weight 700. alert-dismissible: padding-right 3rem.
15 */
16const ALERT_VARIANTS = cva('relative w-full rounded border p-4 mb-4', {
17  variants: {
18    theme: {
19      primary:
20        'border-(--alert-primary-border) bg-(--alert-primary-bg) text-(--alert-primary-color)',
21      secondary:
22        'border-(--alert-secondary-border) bg-(--alert-secondary-bg) text-(--alert-secondary-color)',
23      success:
24        'border-(--alert-success-border) bg-(--alert-success-bg) text-(--alert-success-color)',
25      danger: 'border-(--alert-danger-border) bg-(--alert-danger-bg) text-(--alert-danger-color)',
26      warning:
27        'border-(--alert-warning-border) bg-(--alert-warning-bg) text-(--alert-warning-color)',
28      info: 'border-(--alert-info-border) bg-(--alert-info-bg) text-(--alert-info-color)',
29      light: 'border-(--alert-light-border) bg-(--alert-light-bg) text-(--alert-light-color)',
30      dark: 'border-(--alert-dark-border) bg-(--alert-dark-bg) text-(--alert-dark-color)',
31    },
32  },
33  defaultVariants: {
34    theme: 'primary',
35  },
36});
37 
38interface IAlertProps extends ComponentProps<'div'>, VariantProps<typeof ALERT_VARIANTS> {
39  dismissible?: boolean;
40  onDismiss?: () => void;
41}
42 
43/**
44 * Alert component for contextual feedback messages.
45 * Matches the UX4G 2.0 Alert specification.
46 *
47 * Themes: primary, secondary, success, danger, warning, info, light, dark.
48 * Icons render inline — compose with <AlertIcon> or place an icon before <AlertTitle>.
49 */
50function Alert({ className, theme, dismissible, onDismiss, children, ...props }: IAlertProps) {
51  const [visible, setVisible] = useState(true);
52 
53  if (!visible) return null;
54 
55  const handleDismiss = () => {
56    setVisible(false);
57    onDismiss?.();
58  };
59 
60  return (
61    <div
62      role='alert'
63      className={cn(ALERT_VARIANTS({ theme, className }), dismissible && 'pr-12')}
64      {...props}
65    >
66      {children}
67      {dismissible && (
68        <button
69          type='button'
70// … truncated