Alert

<div class="grid w-full max-w-md items-start gap-4">
    <twig:Alert>
        <twig:ux:icon name="lucide:circle-check-big" />
        <twig:Alert:Title>Payment successful</twig:Alert:Title>
        <twig:Alert:Description>
            Your payment of $29.99 has been processed. A receipt has been sent to your email address.
        </twig:Alert:Description>
    </twig:Alert>
    <twig:Alert>
        <twig:ux:icon name="lucide:info" />
        <twig:Alert:Title>New feature available</twig:Alert:Title>
        <twig:Alert:Description>
            We've added dark mode support. You can enable it in your account settings.
        </twig:Alert:Description>
    </twig:Alert>
</div>

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

{# @prop variant 'default'|'destructive' The visual style variant. Defaults to `default` #}
{# @block content The alert content, typically includes `Alert:Title` and `Alert:Description` #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left rtl:text-start text-sm has-data-[slot=alert-action]:relative ltr:has-data-[slot=alert-action]:pr-18 rtl:has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
    variants: {
        variant: {
            default: 'bg-card text-card-foreground',
            destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
        },
    },
) -%}

<div
    data-slot="alert"
    role="alert"
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The action element, typically a button or link positioned at the top-right #}
<div
    data-slot="alert-action"
    class="{{ ('absolute top-2 ltr:right-2 rtl:end-2 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The descriptive text of the alert #}
<div
    data-slot="alert-description"
    class="{{ ('text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The title text of the alert #}
<div
    data-slot="alert-title"
    class="{{ ('font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

<twig:Alert class="max-w-md">
    <twig:ux:icon name="lucide:circle-check" />
    <twig:Alert:Title>Account updated successfully</twig:Alert:Title>
    <twig:Alert:Description>
        Your profile information has been saved. Changes will be reflected immediately.
    </twig:Alert:Description>
</twig:Alert>

<twig:Alert variant="destructive" class="max-w-md">
    <twig:ux:icon name="lucide:circle-alert" />
    <twig:Alert:Title>Payment failed</twig:Alert:Title>
    <twig:Alert:Description>
        Your payment could not be processed. Please check your payment method and try again.
    </twig:Alert:Description>
</twig:Alert>

<twig:Alert class="max-w-md">
    <twig:Alert:Title>Dark mode is now available</twig:Alert:Title>
    <twig:Alert:Description>
        Enable it under your profile settings to get started.
    </twig:Alert:Description>
    <twig:Alert:Action>
        <twig:Button size="xs" variant="default">
            Enable
        </twig:Button>
    </twig:Alert:Action>
</twig:Alert>

<twig:Alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
    <twig:ux:icon name="lucide:triangle-alert" />
    <twig:Alert:Title>Your subscription will expire in 3 days.</twig:Alert:Title>
    <twig:Alert:Description>
        Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
    </twig:Alert:Description>
</twig:Alert>

<div class="flex flex-col gap-8">
    <div dir="rtl">
        <div class="grid w-full max-w-md items-start gap-4">
            <twig:Alert>
                <twig:ux:icon name="lucide:circle-check-big" />
                <twig:Alert:Title>تم الدفع بنجاح</twig:Alert:Title>
                <twig:Alert:Description>
                    تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
                </twig:Alert:Description>
            </twig:Alert>
            <twig:Alert>
                <twig:ux:icon name="lucide:info" />
                <twig:Alert:Title>ميزة جديدة متاحة</twig:Alert:Title>
                <twig:Alert:Description>
                    لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.
                </twig:Alert:Description>
            </twig:Alert>
        </div>
    </div>
    <div dir="rtl">
        <div class="grid w-full max-w-md items-start gap-4">
            <twig:Alert>
                <twig:ux:icon name="lucide:circle-check-big" />
                <twig:Alert:Title>התשלום בוצע בהצלחה</twig:Alert:Title>
                <twig:Alert:Description>
                    התשלום שלך בסך 29.99 דולר עובד. קבלה נשלחה לכתובת האימייל שלך.
                </twig:Alert:Description>
            </twig:Alert>
            <twig:Alert>
                <twig:ux:icon name="lucide:info" />
                <twig:Alert:Title>תכונה חדשה זמינה</twig:Alert:Title>
                <twig:Alert:Description>
                    כעת יש תמיכה במצב כהה. ניתן לאשר זאת בהגדרות החשבון.
                </twig:Alert:Description>
            </twig:Alert>
        </div>
    </div>
</div>