VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="contents" data-controller="ui--dialog">  <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-secondary text-secondary-foreground hover:bg-secondary/80 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-haspopup="dialog" aria-expanded="false" aria-controls="ui-dialog-6dce845b" data-ui--dialog-target="trigger" data-action="click->ui--dialog#open">Open policy dialog</button>
<dialog id="ui-dialog-6dce845b" class="fixed inset-0 m-0 p-0 max-w-none max-h-none w-full h-full bg-transparent border-0 overflow-visible open:flex open:items-center open:justify-center backdrop:bg-black/60 backdrop:backdrop-blur-[1px]" aria-labelledby="ui-dialog-6dce845b-title" aria-describedby="ui-dialog-6dce845b-description" data-ui--dialog-target="content" data-state="closed">
  <div class="relative flex flex-col w-full max-h-[calc(100vh-2rem)] overflow-hidden rounded-lg border bg-background p-6 shadow-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 max-w-2xl" data-state="closed" data-ui--dialog-part="panel">
    <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed absolute right-4 top-4 p-0" aria-label="Close" data-action="click->ui--dialog#close" data-ui-dialog-close="true">
      <i data-lucide="x" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
    </button>
    <header class="flex flex-col space-y-1.5 text-center sm:text-left">
      <h2 id="ui-dialog-6dce845b-title" class="text-lg font-semibold leading-none tracking-tight">Usage policy</h2>
      <p id="ui-dialog-6dce845b-description" class="text-sm text-muted-foreground">Long-form modal content should remain readable and keep actions pinned at the end.</p>
    </header>
    <div class="overflow-y-auto flex-1 min-h-0 mt-4">    
      <div class="space-y-4 text-sm leading-6 text-muted-foreground">
        <p>Dialogs are best reserved for focused tasks, decisions, or short forms.</p>
        <p>Because the component uses the native dialog element, focus is moved into the modal and restored to the opener when it closes.</p>
        <p>The content element is portaled under <code>body</code> at runtime so the backdrop and stacking context stay predictable.</p>
      </div>
    </div>
    <footer class="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">      <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed static" aria-label="Close" data-action="click->ui--dialog#close" data-ui-dialog-close="true">
        Close
      </button>
      <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! bg-secondary text-secondary-foreground hover:bg-secondary/80 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">Acknowledge</button>
    </footer>
  </div>
</dialog></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%= render(UI::Dialog.new) do |dialog| %>
  <% dialog.with_trigger(variant: :secondary) { "Open policy dialog" } %>
  <% dialog.with_content(size: :lg) do |content| %>
    <% content.with_title { "Usage policy" } %>
    <% content.with_description { "Long-form modal content should remain readable and keep actions pinned at the end." } %>
    <div class="space-y-4 text-sm leading-6 text-muted-foreground">
      <p>Dialogs are best reserved for focused tasks, decisions, or short forms.</p>
      <p>Because the component uses the native dialog element, focus is moved into the modal and restored to the opener when it closes.</p>
      <p>The content element is portaled under <code>body</code> at runtime so the backdrop and stacking context stay predictable.</p>
    </div>
    <% content.with_footer do %>
      <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Close" } %>
      <%= render(UI::Button.new(variant: :secondary)) { "Acknowledge" } %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

No params configured.