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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<div class="flex flex-wrap gap-12 p-8 border rounded-lg bg-muted/30 items-center justify-center"> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">bottom-start</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-bb63b7c8" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-bb63b7c8" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-bb63b7c8" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="start" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">bottom-center</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-7c4fc6a4" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-7c4fc6a4" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-7c4fc6a4" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="center" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">bottom-end</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-4b68e6da" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-4b68e6da" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-4b68e6da" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="end" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">top-start</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-4fd4d186" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-4fd4d186" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-4fd4d186" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="top" data-align="start" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">top-center</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-88ae0752" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-88ae0752" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-88ae0752" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="top" data-align="center" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">top-end</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-77818b02" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-77818b02" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-77818b02" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="top" data-align="end" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">left-start</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-b48efec7" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-b48efec7" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-b48efec7" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="left" data-align="start" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">left-center</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-4c5d1c6f" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-4c5d1c6f" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-4c5d1c6f" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="left" data-align="center" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">left-end</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-55185242" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-55185242" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-55185242" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="left" data-align="end" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">right-start</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-ffd710a7" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-ffd710a7" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-ffd710a7" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="right" data-align="start" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">right-center</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-a3a8795d" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-a3a8795d" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-a3a8795d" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="right" data-align="center" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">right-end</p> <div class="relative inline-block" data-controller="ui--menu"><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-busy="false" id="ui-menu-trigger-ui-menu-d13c5369" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-d13c5369" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open</button> <div id="ui-menu-content-ui-menu-d13c5369" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="right" data-align="end" tabindex="-1"> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 1</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Item 2</button> </div> </div> </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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<div class="flex flex-wrap gap-12 p-8 border rounded-lg bg-muted/30 items-center justify-center"> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">bottom-start</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :bottom, align: :start) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">bottom-center</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :bottom, align: :center) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">bottom-end</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :bottom, align: :end) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">top-start</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :top, align: :start) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">top-center</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :top, align: :center) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">top-end</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :top, align: :end) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">left-start</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :left, align: :start) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">left-center</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :left, align: :center) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">left-end</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :left, align: :end) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">right-start</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :right, align: :start) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">right-center</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :right, align: :center) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div> <div class="text-center"> <p class="text-xs text-muted-foreground mb-2">right-end</p> <%= render(UI::Menu.new) do |menu| %> <% menu.with_trigger { "Open" } %> <% menu.with_content(side: :right, align: :end) do |content| %> <% content.with_item("Item 1") %> <% content.with_item("Item 2") %> <% end %> <% end %> </div></div>No notes provided.
No params configured.