Alert Dialog

<twig:AlertDialog id="delete_account">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content>
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                This action cannot be undone. This will permanently delete your
                account from our servers.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

composer require twig/extra-bundle twig/html-extra:^3.24.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0 symfony/ux-twig-component:^3.1

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['trigger', 'dialog'];

    static values = {
        open: Boolean,
    };

    connect() {
        if (this.openValue) {
            this.open();
        }
    }

    open() {
        this.dialogTarget.showModal();

        if (this.hasTriggerTarget) {
            if (this.dialogTarget.getAnimations().length > 0) {
                this.dialogTarget.addEventListener('transitionend', () => {
                    this.triggerTarget.setAttribute('aria-expanded', 'true');
                });
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'true');
            }
        }
    }

    close() {
        this.dialogTarget.close();

        if (this.hasTriggerTarget) {
            if (this.dialogTarget.getAnimations().length > 0) {
                this.dialogTarget.addEventListener('transitionend', () => {
                    this.triggerTarget.setAttribute('aria-expanded', 'false');
                });
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'false');
            }
        }
    }
}

{# @prop id string Unique identifier used to generate internal AlertDialog IDs #}
{# @prop open boolean Whether the dialog is open on initial render. Defaults to `false` #}
{# @block content The dialog structure, typically includes `AlertDialog:Trigger` and `AlertDialog:Content` #}
{%- props id, open = false -%}

{%- set _alertDialog_id = 'alert-dialog-' ~ id -%}
{%- set _alertDialog_titleId = _alertDialog_id ~ '-title' -%}
{%- set _alertDialog_descriptionId = _alertDialog_id ~ '-description' -%}
{%- do provide('alertDialog.id', _alertDialog_id) -%}
{%- do provide('alertDialog.titleId', _alertDialog_titleId) -%}
{%- do provide('alertDialog.descriptionId', _alertDialog_descriptionId) -%}
<div {{ attributes.defaults({
    'data-controller': 'alert-dialog',
    'data-alert-dialog-open-value': open,
    'aria-labelledby': _alertDialog_titleId,
    'aria-describedby': _alertDialog_descriptionId,
}) }}>
    {% block content %}{% endblock %}
</div>

{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The button style variant. Defaults to `default` #}
{# @prop size 'default'|'sm'|'lg'|'xs'|'icon' The button size. Defaults to `default` #}
{# @block content The action button label #}
{%- props variant = 'default', size = 'default' -%}
<twig:Button variant="{{ variant }}" size="{{ size }}" data-slot="alert-dialog-action" {{ ...attributes }}>
    {{- block(outerBlocks.content) -}}
</twig:Button>

{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The button style variant. Defaults to `outline` #}
{# @prop size 'default'|'sm'|'lg'|'xs'|'icon' The button size. Defaults to `default` #}
{# @block content The cancel button label #}
{%- props variant = 'outline', size = 'default' -%}
<twig:Button variant="{{ variant }}" size="{{ size }}" data-slot="alert-dialog-cancel" data-action="click->alert-dialog#close" {{ ...attributes }}>
    {{- block(outerBlocks.content) -}}
</twig:Button>

{# @prop size 'default'|'sm' The size of the dialog. Defaults to `default` #}
{# @block content The dialog content, typically includes `AlertDialog:Header` and `AlertDialog:Footer` #}
{%- props size = 'default' -%}
{%- set _alertDialog_id = inject('alertDialog.id') -%}
<dialog
    id="{{ _alertDialog_id }}"
    data-size="{{ size }}"
    class="{{ ('group/alert-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none transition-all transition-discrete backdrop:transition-discrete backdrop:duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/10 open:backdrop:backdrop-blur-xs scale-95 opacity-0 starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class'))|tailwind_merge }}"
    data-alert-dialog-target="dialog"
    data-action="keydown.esc->alert-dialog#close:prevent"
    {{ attributes.defaults({'data-slot': 'alert-dialog-content'}).without('id') }}
>
    {%- block content %}{% endblock -%}
</dialog>

{# @block content The descriptive text explaining the alert dialog purpose #}
{%- set _alertDialog_descriptionId = inject('alertDialog.descriptionId') -%}
<p
    id="{{ _alertDialog_descriptionId }}"
    data-slot="alert-dialog-description"
    class="{{ ('text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes.without('id') }}
>
    {%- block content %}{% endblock -%}
</p>

{# @block content The footer area, typically contains `AlertDialog:Cancel` and `AlertDialog:Action` buttons #}
<div
    data-slot="alert-dialog-footer"
    class="{{ ('-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The header area, typically contains `AlertDialog:Title` and `AlertDialog:Description` #}
<div
    data-slot="alert-dialog-header"
    class="{{ ('grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start ltr:sm:group-data-[size=default]/alert-dialog-content:text-left rtl:sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The media element (icon or image) to display in the alert dialog header #}
<div
    data-slot="alert-dialog-media"
    class="{{ ("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6 " ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The title text of the alert dialog #}
{%- set _alertDialog_titleId = inject('alertDialog.titleId') -%}
<h2
    id="{{ _alertDialog_titleId }}"
    data-slot="alert-dialog-title"
    class="{{ ('cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes.without('id') }}
>
    {%- block content %}{% endblock -%}
</h2>

{# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked #}
{%- set alert_dialog_trigger_attrs = {
    'data-action': 'click->alert-dialog#open'|html_attr_type('sst'),
    'data-alert-dialog-target': 'trigger',
    'aria-haspopup': 'dialog',
    'aria-expanded': 'false',
} -%}
{%- block content %}{% endblock -%}

{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant. Defaults to `default` #}
{# @prop size 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size. Defaults to `default` #}
{# @prop as 'button' The HTML tag to render. Defaults to `button` #}
{# @block content The button label and/or icon #}
{%- props variant = 'default', size = 'default', as = 'button' -%}
{%- set style = html_cva(
    base: "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    variants: {
        variant: {
            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
            ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
            link: 'text-primary underline-offset-4 hover:underline',
        },
        size: {
            default: 'h-8 gap-1.5 px-2.5 ltr:has-data-[icon=inline-end]:pr-2 rtl:has-data-[icon=inline-end]:pe-2 ltr:has-data-[icon=inline-start]:pl-2 rtl:has-data-[icon=inline-start]:ps-2',
            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl:has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg ltr:has-data-[icon=inline-end]:pr-1.5 rtl:has-data-[icon=inline-end]:pe-1.5 ltr:has-data-[icon=inline-start]:pl-1.5 rtl:has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
            lg: 'h-9 gap-1.5 px-2.5 ltr:has-data-[icon=inline-end]:pr-2 rtl:has-data-[icon=inline-end]:pe-2 ltr:has-data-[icon=inline-start]:pl-2 rtl:has-data-[icon=inline-start]:ps-2',
            icon: 'size-8',
            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
            'icon-lg': 'size-9',
        },
    },
) -%}
<{{ as }}
    data-slot="button"
    data-variant="{{ variant }}"
    data-size="{{ size }}"
    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

<twig:AlertDialog id="alert-dialog-basic">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content>
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

<twig:AlertDialog id="alert-dialog-small">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content size="sm">
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Title>Allow accessory to connect?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                Do you want to allow the USB accessory to connect to this device?
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Don't allow</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Allow</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

<twig:AlertDialog id="alert-dialog-media">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Share Project</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content>
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Media>
                <twig:ux:icon name="lucide:circle-fading-plus" />
            </twig:AlertDialog:Media>
            <twig:AlertDialog:Title>Share this project?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                Anyone with the link will be able to view and edit this project.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Share</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

<twig:AlertDialog id="alert-dialog-small-with-media">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content size="sm">
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Media>
                <twig:ux:icon name="lucide:bluetooth" />
            </twig:AlertDialog:Media>
            <twig:AlertDialog:Title>Allow accessory to connect?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                Do you want to allow the USB accessory to connect to this device?
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Don't allow</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Allow</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

<twig:AlertDialog id="alert-dialog-destructive">
    <twig:AlertDialog:Trigger>
        <twig:Button variant="destructive" {{ ...alert_dialog_trigger_attrs }}>Delete Chat</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content size="sm">
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Media class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                <twig:ux:icon name="lucide:trash-2" />
            </twig:AlertDialog:Media>
            <twig:AlertDialog:Title>Delete chat?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                This will permanently delete this chat conversation. View
                <a href="#">Settings</a> delete any memories saved during this chat.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action variant="destructive">Delete</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

<div class="flex flex-col gap-8">
    <div dir="rtl" class="flex gap-4">
        <twig:AlertDialog id="rtl-ar-default">
            <twig:AlertDialog:Trigger>
                <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>إظهار الحوار</twig:Button>
            </twig:AlertDialog:Trigger>
            <twig:AlertDialog:Content dir="rtl">
                <twig:AlertDialog:Header>
                    <twig:AlertDialog:Title>هل أنت متأكد تمامًا؟</twig:AlertDialog:Title>
                    <twig:AlertDialog:Description>
                        لا يمكن التراجع عن هذا الإجراء. سيتم حذف حسابك نهائيًا من خوادمنا.
                    </twig:AlertDialog:Description>
                </twig:AlertDialog:Header>
                <twig:AlertDialog:Footer>
                    <twig:AlertDialog:Cancel>إلغاء</twig:AlertDialog:Cancel>
                    <twig:AlertDialog:Action>متابعة</twig:AlertDialog:Action>
                </twig:AlertDialog:Footer>
            </twig:AlertDialog:Content>
        </twig:AlertDialog>
        <twig:AlertDialog id="rtl-ar-sm">
            <twig:AlertDialog:Trigger>
                <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>إظهار الحوار (صغير)</twig:Button>
            </twig:AlertDialog:Trigger>
            <twig:AlertDialog:Content size="sm" dir="rtl">
                <twig:AlertDialog:Header>
                    <twig:AlertDialog:Media>
                        <twig:ux:icon name="lucide:bluetooth" />
                    </twig:AlertDialog:Media>
                    <twig:AlertDialog:Title>السماح للملحق بالاتصال؟</twig:AlertDialog:Title>
                    <twig:AlertDialog:Description>
                        هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
                    </twig:AlertDialog:Description>
                </twig:AlertDialog:Header>
                <twig:AlertDialog:Footer>
                    <twig:AlertDialog:Cancel>عدم السماح</twig:AlertDialog:Cancel>
                    <twig:AlertDialog:Action>السماح</twig:AlertDialog:Action>
                </twig:AlertDialog:Footer>
            </twig:AlertDialog:Content>
        </twig:AlertDialog>
    </div>
    <div dir="rtl" class="flex gap-4">
        <twig:AlertDialog id="rtl-he-default">
            <twig:AlertDialog:Trigger>
                <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>הצג דיאלוג</twig:Button>
            </twig:AlertDialog:Trigger>
            <twig:AlertDialog:Content dir="rtl">
                <twig:AlertDialog:Header>
                    <twig:AlertDialog:Title>האם אתה בטוח לחלוטין?</twig:AlertDialog:Title>
                    <twig:AlertDialog:Description>
                        לא ניתן לבטל. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.
                    </twig:AlertDialog:Description>
                </twig:AlertDialog:Header>
                <twig:AlertDialog:Footer>
                    <twig:AlertDialog:Cancel>ביטול</twig:AlertDialog:Cancel>
                    <twig:AlertDialog:Action>המשך</twig:AlertDialog:Action>
                </twig:AlertDialog:Footer>
            </twig:AlertDialog:Content>
        </twig:AlertDialog>
        <twig:AlertDialog id="rtl-he-sm">
            <twig:AlertDialog:Trigger>
                <twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>הצג דיאלוג (קטן)</twig:Button>
            </twig:AlertDialog:Trigger>
            <twig:AlertDialog:Content size="sm" dir="rtl">
                <twig:AlertDialog:Header>
                    <twig:AlertDialog:Media>
                        <twig:ux:icon name="lucide:bluetooth" />
                    </twig:AlertDialog:Media>
                    <twig:AlertDialog:Title>לחבר התקן?</twig:AlertDialog:Title>
                    <twig:AlertDialog:Description>
                        חבר התקן USB למכשיר זה?
                    </twig:AlertDialog:Description>
                </twig:AlertDialog:Header>
                <twig:AlertDialog:Footer>
                    <twig:AlertDialog:Cancel>דחה</twig:AlertDialog:Cancel>
                    <twig:AlertDialog:Action>אשר</twig:AlertDialog:Action>
                </twig:AlertDialog:Footer>
            </twig:AlertDialog:Content>
        </twig:AlertDialog>
    </div>
</div>