Dialog

{#def
    className: str = ""
#}
<div
  x-data="{
        open: false,
        close() {
            this.open = false;
            document.body.classList.remove('overflow-hidden');
        },
        init() {
            this.$watch('open', value => {
                if (value) {
                    document.body.classList.add('overflow-hidden');
                } else {
                    document.body.classList.remove('overflow-hidden');
                }
            });
        },
        focusables() { return [...document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex=\'-1\'])')] },
        handleEscape(e) {
            if (e.key === 'Escape') this.close()
        },
        focusTrap(e) {
            if (!this.open) return
            let elements = this.focusables()
            let first = elements[0]
            let last = elements[elements.length - 1]

            if (e.shiftKey && e.key === 'Tab' && document.activeElement === first) {
                e.preventDefault()
                last.focus()
            } else if (!e.shiftKey && e.key === 'Tab' && document.activeElement === last) {
                e.preventDefault()
                first.focus()
            }
        }
    }"
  x-on:keydown.escape.window="handleEscape"
  x-on:keydown.tab.prevent="focusTrap"
  class="{{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>

{#def
    className: str = ""
#}
<div
  x-on:click="close"
  class="{{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>

{#def
    className: str = ""
#}
<DialogPortal>
  <DialogOverlay />
  <div
    class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg {{ className }}"
    x-on:click.stop
    role="dialog"
    aria-modal="true"
    x-show="open"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    {{ attrs.render() }}
  >
    {{ content }}
    <button
      x-on:click="close"
      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
    >
      <XIcon class="h-4 w-4"/>
      <span class="sr-only">Close</span>
    </button>
  </div>
</DialogPortal>

{#def
    className: str = ""
#}
<div
  class="text-sm text-muted-foreground {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>

{#def
    className: str = ""
#}
<div
  class="{{ cn(
        'flex flex-col-reverse sm:flex-row sm:space-x-2',
        'sm:justify-end' if 'sm:justify-start' not in className else '',
        className
    ) }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>

{#def
    className: str = ""
#}
<div
  class="flex flex-col space-y-1.5 text-center sm:text-left {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>

{#def
    className: str = ""
#}
<div
  class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 {{ className }}"
  x-show="open"
  x-on:click="close"
  x-transition:enter="transition ease-out duration-300"
  x-transition:enter-start="opacity-0"
  x-transition:enter-end="opacity-100"
  x-transition:leave="transition ease-in duration-200"
  x-transition:leave-start="opacity-100"
  x-transition:leave-end="opacity-0"
  {{ attrs.render() }}
></div>

{#def
    className: str = ""
#}
<template x-teleport="body">
  <div x-show="open" x-cloak {{ attrs.render() }}>
    {{ content }}
  </div>
</template>

{#def
    className: str = ""
#}
<h2
  class="text-lg font-semibold leading-none tracking-tight {{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</h2>

{#def
    className: str = ""
#}
<div
  x-on:click="open = true"
  class="{{ className }}"
  {{ attrs.render() }}
>
  {{ content }}
</div>