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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div class="flex flex-wrap gap-4"> <div class="contents" data-controller="ui--dialog"> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-haspopup="dialog" aria-expanded="false" aria-controls="ui-dialog-d6ccf92f" data-ui--dialog-target="trigger" data-action="click->ui--dialog#open">Open sm</button> <dialog id="ui-dialog-d6ccf92f" 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-d6ccf92f-title" aria-describedby="ui-dialog-d6ccf92f-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-md" 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-d6ccf92f-title" class="text-lg font-semibold leading-none tracking-tight">Small dialog</h2> <p id="ui-dialog-d6ccf92f-description" class="text-sm text-muted-foreground">This is the smallest dialog size, great for confirmations.</p> </header> <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"> Cancel </button> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap 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-primary text-primary-foreground hover:bg-primary/90 h-8 rounded-md px-3 text-xs disabled:cursor-not-allowed" aria-busy="false">Confirm</button> </footer> </div> </dialog></div> <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! 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="ui-dialog-9217a277" data-ui--dialog-target="trigger" data-action="click->ui--dialog#open">Open default</button> <dialog id="ui-dialog-9217a277" 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-9217a277-title" aria-describedby="ui-dialog-9217a277-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-lg" 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-9217a277-title" class="text-lg font-semibold leading-none tracking-tight">Default dialog</h2> <p id="ui-dialog-9217a277-description" class="text-sm text-muted-foreground">This is the default dialog size for most use cases.</p> </header> <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"> Cancel </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-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">Confirm</button> </footer> </div> </dialog></div> <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! 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="ui-dialog-27d95a57" data-ui--dialog-target="trigger" data-action="click->ui--dialog#open">Open lg</button> <dialog id="ui-dialog-27d95a57" 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-27d95a57-title" aria-describedby="ui-dialog-27d95a57-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-27d95a57-title" class="text-lg font-semibold leading-none tracking-tight">Large dialog</h2> <p id="ui-dialog-27d95a57-description" class="text-sm text-muted-foreground">This is a large dialog, useful for forms and detailed content.</p> </header> <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"> Cancel </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-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">Confirm</button> </footer> </div> </dialog></div> <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! 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="ui-dialog-262eceff" data-ui--dialog-target="trigger" data-action="click->ui--dialog#open">Open xl</button> <dialog id="ui-dialog-262eceff" 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-262eceff-title" aria-describedby="ui-dialog-262eceff-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-4xl" 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-262eceff-title" class="text-lg font-semibold leading-none tracking-tight">Extra large dialog</h2> <p id="ui-dialog-262eceff-description" class="text-sm text-muted-foreground">This is the largest dialog size, ideal for complex workflows.</p> </header> <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"> Cancel </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-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false">Confirm</button> </footer> </div> </dialog></div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="flex flex-wrap gap-4"> <%= render(UI::Dialog.new) do |dialog| %> <% dialog.with_trigger(variant: :outline, size: :sm) { "Open sm" } %> <% dialog.with_content(size: :sm) do |content| %> <% content.with_title { "Small dialog" } %> <% content.with_description { "This is the smallest dialog size, great for confirmations." } %> <% content.with_footer do %> <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %> <%= render(UI::Button.new(size: :sm)) { "Confirm" } %> <% end %> <% end %> <% end %> <%= render(UI::Dialog.new) do |dialog| %> <% dialog.with_trigger(variant: :outline) { "Open default" } %> <% dialog.with_content do |content| %> <% content.with_title { "Default dialog" } %> <% content.with_description { "This is the default dialog size for most use cases." } %> <% content.with_footer do %> <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %> <%= render(UI::Button.new) { "Confirm" } %> <% end %> <% end %> <% end %> <%= render(UI::Dialog.new) do |dialog| %> <% dialog.with_trigger(variant: :outline) { "Open lg" } %> <% dialog.with_content(size: :lg) do |content| %> <% content.with_title { "Large dialog" } %> <% content.with_description { "This is a large dialog, useful for forms and detailed content." } %> <% content.with_footer do %> <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %> <%= render(UI::Button.new) { "Confirm" } %> <% end %> <% end %> <% end %> <%= render(UI::Dialog.new) do |dialog| %> <% dialog.with_trigger(variant: :outline) { "Open xl" } %> <% dialog.with_content(size: :xl) do |content| %> <% content.with_title { "Extra large dialog" } %> <% content.with_description { "This is the largest dialog size, ideal for complex workflows." } %> <% content.with_footer do %> <%= render(UI::Dialog::Close.new(variant: :outline, class: "static")) { "Cancel" } %> <%= render(UI::Button.new) { "Confirm" } %> <% end %> <% end %> <% end %></div>No notes provided.
No params configured.