alert

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/alert/Alert.astro directly.
3/**
4 * @component Alert
5 * @title Alert
6 * @description A prominent message that draws user attention to important information.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2536-3189&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <div class="grid w-full max-w-xl items-start gap-4">
12 *   <Alert>
13 *     <CircleCheckIcon size={32} />
14 *     <AlertTitle>Success! Your changes have been saved</AlertTitle>
15 *     <AlertDescription>This is an alert with title and description.</AlertDescription>
16 *   </Alert>
17 *
18 *   <Alert>
19 *     <AlertTitle>This Alert has a title and an icon. No description.</AlertTitle>
20 *   </Alert>
21 *
22 *   <Alert variant="destructive">
23 *     <AlertTitle>Unable to process your payment.</AlertTitle>
24 *     <AlertDescription>
25 *       <p>Please verify your billing information and try again.</p>
26 *       <ul class="list-inside list-disc text-sm">
27 *         <li>Check your card details</li>
28 *         <li>Ensure sufficient funds</li>
29 *         <li>Verify billing address</li>
30 *       </ul>
31 *     </AlertDescription>
32 *   </Alert>
33 * </div>
34 *
35 * @usage
36 *
37 * ```astro nocollapse
38 * ---
39 * import { Alert, AlertTitle, AlertDescription } from '@bejamas/ui/components/alert';
40 * ---
41 * <Alert variant="default">
42 *   <CircleCheckIcon size={32} />
43 *   <AlertTitle>Heads up!</AlertTitle>
44 *   <AlertDescription>Something happened successfully.</AlertDescription>
45 * </Alert>
46 * ```
47 */
48import { cva } from "class-variance-authority";
49import { cn } from "@/lib/utils";
50import type { HTMLAttributes } from "astro/types";
51 
52type AlertVariant = "default" | "destructive";
53 
54interface Props extends HTMLAttributes<"div"> {
55  variant?: AlertVariant;
56  class?: string;
57}
58 
59const {
60  class: className = "",
61  variant = "default",
62  ...rest
63} = Astro.props as Props;
64 
65const alertVariants = cva(
66  "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 gap-y-0.5 rounded-xl border-border bg-card has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current group/alert relative w-full",
67  {
68    variants: {
69// … truncated