@neynar/ui 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/context7.json +17 -0
- package/llm/components/accordion.llm.md +205 -0
- package/llm/components/alert-dialog.llm.md +289 -0
- package/llm/components/alert.llm.md +310 -0
- package/llm/components/aspect-ratio.llm.md +110 -0
- package/llm/components/avatar.llm.md +282 -0
- package/llm/components/badge.llm.md +185 -0
- package/llm/components/blockquote.llm.md +86 -0
- package/llm/components/breadcrumb.llm.md +245 -0
- package/llm/components/button-group.llm.md +248 -0
- package/llm/components/button.llm.md +247 -0
- package/llm/components/calendar.llm.md +252 -0
- package/llm/components/card.llm.md +356 -0
- package/llm/components/carousel.llm.md +281 -0
- package/llm/components/chart.llm.md +278 -0
- package/llm/components/checkbox.llm.md +234 -0
- package/llm/components/code.llm.md +75 -0
- package/llm/components/collapsible.llm.md +271 -0
- package/llm/components/color-mode.llm.md +196 -0
- package/llm/components/combobox.llm.md +346 -0
- package/llm/components/command.llm.md +353 -0
- package/llm/components/context-menu.llm.md +368 -0
- package/llm/components/dialog.llm.md +283 -0
- package/llm/components/drawer.llm.md +326 -0
- package/llm/components/dropdown-menu.llm.md +404 -0
- package/llm/components/empty.llm.md +282 -0
- package/llm/components/field.llm.md +303 -0
- package/llm/components/first-light.llm.md +129 -0
- package/llm/components/hover-card.llm.md +278 -0
- package/llm/components/input-group.llm.md +334 -0
- package/llm/components/input-otp.llm.md +270 -0
- package/llm/components/input.llm.md +197 -0
- package/llm/components/item.llm.md +347 -0
- package/llm/components/kbd.llm.md +221 -0
- package/llm/components/label.llm.md +219 -0
- package/llm/components/menubar.llm.md +378 -0
- package/llm/components/navigation-menu.llm.md +320 -0
- package/llm/components/pagination.llm.md +337 -0
- package/llm/components/popover.llm.md +278 -0
- package/llm/components/progress.llm.md +259 -0
- package/llm/components/radio-group.llm.md +269 -0
- package/llm/components/resizable.llm.md +222 -0
- package/llm/components/scroll-area.llm.md +290 -0
- package/llm/components/select.llm.md +338 -0
- package/llm/components/separator.llm.md +129 -0
- package/llm/components/sheet.llm.md +275 -0
- package/llm/components/sidebar.llm.md +528 -0
- package/llm/components/skeleton.llm.md +140 -0
- package/llm/components/slider.llm.md +213 -0
- package/llm/components/sonner.llm.md +299 -0
- package/llm/components/spinner.llm.md +187 -0
- package/llm/components/switch.llm.md +258 -0
- package/llm/components/table.llm.md +334 -0
- package/llm/components/tabs.llm.md +245 -0
- package/llm/components/text.llm.md +108 -0
- package/llm/components/textarea.llm.md +236 -0
- package/llm/components/title.llm.md +88 -0
- package/llm/components/toggle-group.llm.md +228 -0
- package/llm/components/toggle.llm.md +235 -0
- package/llm/components/tooltip.llm.md +191 -0
- package/llm/contributing.llm.md +273 -0
- package/llm/hooks.llm.md +91 -0
- package/llm/index.llm.md +178 -0
- package/llm/theming.llm.md +381 -0
- package/llm/utilities.llm.md +97 -0
- package/llms-full.txt +15995 -0
- package/llms.txt +182 -0
- package/package.json +5 -1
package/context7.json
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://context7.com/schema/context7.json",
|
|
3
|
+
"projectTitle": "@neynar/ui",
|
|
4
|
+
"description": "AI-first React component library for coding agents. LLM-optimized docs, sensible defaults, zero config. Built on shadcn patterns, Base UI, and Tailwind CSS v4.",
|
|
5
|
+
"folders": ["llm", "src/**"],
|
|
6
|
+
"excludeFolders": ["**/stories/**"],
|
|
7
|
+
"rules": [
|
|
8
|
+
"Import components from their dedicated paths: import { Button } from '@neynar/ui/button'",
|
|
9
|
+
"Import themes as CSS: import '@neynar/ui/themes/purple-dawn'",
|
|
10
|
+
"Base styles required: @import '@neynar/ui/styles' in your CSS file",
|
|
11
|
+
"Use ColorModeInitializer in <head> for SSR-safe dark mode",
|
|
12
|
+
"All components have data-slot attributes for CSS targeting",
|
|
13
|
+
"Use the render prop (not asChild) for component polymorphism",
|
|
14
|
+
"Compound components export multiple parts from the same path",
|
|
15
|
+
"Use cn() utility from '@neynar/ui/utils' for class merging"
|
|
16
|
+
]
|
|
17
|
+
}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
# Accordion
|
|
2
|
+
|
|
3
|
+
Collapsible content sections with expand/collapse controls for FAQs, documentation, and hierarchical content.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@neynar/ui/accordion"
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Anatomy
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<Accordion>
|
|
15
|
+
<AccordionItem value="item-1">
|
|
16
|
+
<AccordionTrigger>Question or title</AccordionTrigger>
|
|
17
|
+
<AccordionContent>Answer or content</AccordionContent>
|
|
18
|
+
</AccordionItem>
|
|
19
|
+
</Accordion>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Components
|
|
23
|
+
|
|
24
|
+
| Component | Description |
|
|
25
|
+
|-----------|-------------|
|
|
26
|
+
| Accordion | Root container, manages open/closed state and keyboard navigation |
|
|
27
|
+
| AccordionItem | Groups a trigger with its content panel, requires unique `value` |
|
|
28
|
+
| AccordionTrigger | Button that toggles the item, includes automatic chevron icons |
|
|
29
|
+
| AccordionContent | Collapsible panel with automatic slide animation |
|
|
30
|
+
|
|
31
|
+
## Props
|
|
32
|
+
|
|
33
|
+
### Accordion
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
|------|------|---------|-------------|
|
|
37
|
+
| defaultValue | any[] | - | Uncontrolled initial open items (single value or array) |
|
|
38
|
+
| value | any[] | - | Controlled open items (for managing state externally) |
|
|
39
|
+
| onValueChange | (value: any[]) => void | - | Called when items open/close |
|
|
40
|
+
| multiple | boolean | false | Allow multiple items open simultaneously |
|
|
41
|
+
| disabled | boolean | false | Disable all items |
|
|
42
|
+
| orientation | 'vertical' \| 'horizontal' | 'vertical' | Visual orientation, affects keyboard navigation |
|
|
43
|
+
| loopFocus | boolean | true | Loop focus when reaching end with arrow keys |
|
|
44
|
+
|
|
45
|
+
### AccordionItem
|
|
46
|
+
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
|------|------|---------|-------------|
|
|
49
|
+
| value | any | (auto) | Unique identifier for this item (required for controlled state) |
|
|
50
|
+
| disabled | boolean | false | Disable this specific item |
|
|
51
|
+
| onOpenChange | (open: boolean) => void | - | Called when this item opens/closes |
|
|
52
|
+
|
|
53
|
+
### AccordionTrigger
|
|
54
|
+
|
|
55
|
+
Accepts all Base UI Accordion.Trigger props. Automatically includes chevron icons that flip based on open state.
|
|
56
|
+
|
|
57
|
+
### AccordionContent
|
|
58
|
+
|
|
59
|
+
Accepts all Base UI Accordion.Panel props. Automatically animates height with slide down/up transitions.
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Default | Description |
|
|
62
|
+
|------|------|---------|-------------|
|
|
63
|
+
| keepMounted | boolean | false | Keep content in DOM when closed (for SEO/hydration) |
|
|
64
|
+
| hiddenUntilFound | boolean | false | Use `hidden="until-found"` for browser's find-in-page |
|
|
65
|
+
|
|
66
|
+
## Data Attributes
|
|
67
|
+
|
|
68
|
+
All components support data attributes for styling:
|
|
69
|
+
|
|
70
|
+
| Attribute | When Present |
|
|
71
|
+
|-----------|--------------|
|
|
72
|
+
| data-open | Item/panel is expanded |
|
|
73
|
+
| data-closed | Item/panel is collapsed |
|
|
74
|
+
| data-disabled | Item/accordion is disabled |
|
|
75
|
+
| data-orientation | Current orientation ('vertical' or 'horizontal') |
|
|
76
|
+
| data-index | Index of the item in the accordion |
|
|
77
|
+
| data-starting-style | Panel is animating in |
|
|
78
|
+
| data-ending-style | Panel is animating out |
|
|
79
|
+
|
|
80
|
+
## Examples
|
|
81
|
+
|
|
82
|
+
### Single Item Open (Default)
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<Accordion defaultValue={["faq-1"]}>
|
|
86
|
+
<AccordionItem value="faq-1">
|
|
87
|
+
<AccordionTrigger>How do I get started?</AccordionTrigger>
|
|
88
|
+
<AccordionContent>
|
|
89
|
+
Sign up for a free account and generate your API key from the dashboard.
|
|
90
|
+
</AccordionContent>
|
|
91
|
+
</AccordionItem>
|
|
92
|
+
|
|
93
|
+
<AccordionItem value="faq-2">
|
|
94
|
+
<AccordionTrigger>What are the rate limits?</AccordionTrigger>
|
|
95
|
+
<AccordionContent>
|
|
96
|
+
Free tier: 1,000 requests/day. Pro: 100,000 requests/day.
|
|
97
|
+
</AccordionContent>
|
|
98
|
+
</AccordionItem>
|
|
99
|
+
</Accordion>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Multiple Items Open
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
<Accordion defaultValue={["item-1", "item-2"]}>
|
|
106
|
+
<AccordionItem value="item-1">
|
|
107
|
+
<AccordionTrigger>API Features</AccordionTrigger>
|
|
108
|
+
<AccordionContent>
|
|
109
|
+
Real-time feeds, webhooks, and comprehensive user data.
|
|
110
|
+
</AccordionContent>
|
|
111
|
+
</AccordionItem>
|
|
112
|
+
|
|
113
|
+
<AccordionItem value="item-2">
|
|
114
|
+
<AccordionTrigger>Authentication</AccordionTrigger>
|
|
115
|
+
<AccordionContent>
|
|
116
|
+
Sign-in with Farcaster (SIWF) and API key authentication.
|
|
117
|
+
</AccordionContent>
|
|
118
|
+
</AccordionItem>
|
|
119
|
+
</Accordion>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Controlled State
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
function ControlledAccordion() {
|
|
126
|
+
const [openItems, setOpenItems] = useState(["item-1"])
|
|
127
|
+
|
|
128
|
+
return (
|
|
129
|
+
<Accordion value={openItems} onValueChange={setOpenItems}>
|
|
130
|
+
<AccordionItem value="item-1">
|
|
131
|
+
<AccordionTrigger>Controlled Item</AccordionTrigger>
|
|
132
|
+
<AccordionContent>
|
|
133
|
+
Open state is managed externally via React state.
|
|
134
|
+
</AccordionContent>
|
|
135
|
+
</AccordionItem>
|
|
136
|
+
</Accordion>
|
|
137
|
+
)
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### With Icons and Rich Content
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
<Accordion>
|
|
145
|
+
<AccordionItem value="feature-1">
|
|
146
|
+
<AccordionTrigger>
|
|
147
|
+
<div className="flex items-center gap-3">
|
|
148
|
+
<div className="bg-primary/10 text-primary rounded-md p-1.5">
|
|
149
|
+
<ZapIcon className="size-4" />
|
|
150
|
+
</div>
|
|
151
|
+
<span>Real-time Updates</span>
|
|
152
|
+
</div>
|
|
153
|
+
</AccordionTrigger>
|
|
154
|
+
<AccordionContent>
|
|
155
|
+
<p>Access real-time feeds with sub-second latency.</p>
|
|
156
|
+
<ul className="list-disc pl-5 space-y-1">
|
|
157
|
+
<li>Automatic pagination</li>
|
|
158
|
+
<li>Advanced filtering</li>
|
|
159
|
+
</ul>
|
|
160
|
+
</AccordionContent>
|
|
161
|
+
</AccordionItem>
|
|
162
|
+
</Accordion>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Disabled Items
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
<Accordion>
|
|
169
|
+
<AccordionItem value="active">
|
|
170
|
+
<AccordionTrigger>Active Item</AccordionTrigger>
|
|
171
|
+
<AccordionContent>This item can be toggled.</AccordionContent>
|
|
172
|
+
</AccordionItem>
|
|
173
|
+
|
|
174
|
+
<AccordionItem value="disabled" disabled>
|
|
175
|
+
<AccordionTrigger>Disabled Item</AccordionTrigger>
|
|
176
|
+
<AccordionContent>This content cannot be accessed.</AccordionContent>
|
|
177
|
+
</AccordionItem>
|
|
178
|
+
</Accordion>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## Keyboard
|
|
182
|
+
|
|
183
|
+
| Key | Action |
|
|
184
|
+
|-----|--------|
|
|
185
|
+
| Space / Enter | Toggle focused item |
|
|
186
|
+
| Tab | Move to next focusable element |
|
|
187
|
+
| Shift + Tab | Move to previous focusable element |
|
|
188
|
+
| ArrowDown | Move focus to next item trigger (vertical) |
|
|
189
|
+
| ArrowUp | Move focus to previous item trigger (vertical) |
|
|
190
|
+
| Home | Focus first item trigger |
|
|
191
|
+
| End | Focus last item trigger |
|
|
192
|
+
|
|
193
|
+
## Accessibility
|
|
194
|
+
|
|
195
|
+
- Full keyboard navigation with arrow keys and roving tabindex
|
|
196
|
+
- ARIA attributes automatically applied (`aria-expanded`, `aria-controls`, `aria-labelledby`)
|
|
197
|
+
- Screen readers announce expanded/collapsed state changes
|
|
198
|
+
- Focus management maintains expected tab order
|
|
199
|
+
- Supports `hiddenUntilFound` for browser find-in-page functionality
|
|
200
|
+
|
|
201
|
+
## Related
|
|
202
|
+
|
|
203
|
+
- [Collapsible](./collapsible.llm.md) - Single collapsible section without accordion semantics
|
|
204
|
+
- [Tabs](./tabs.llm.md) - Alternative for showing one section at a time
|
|
205
|
+
- [Dialog](./dialog.llm.md) - For overlay content instead of inline expansion
|
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
# AlertDialog
|
|
2
|
+
|
|
3
|
+
Modal dialog for critical confirmations requiring user attention, typically for destructive or irreversible actions.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import {
|
|
9
|
+
AlertDialog,
|
|
10
|
+
AlertDialogAction,
|
|
11
|
+
AlertDialogCancel,
|
|
12
|
+
AlertDialogContent,
|
|
13
|
+
AlertDialogDescription,
|
|
14
|
+
AlertDialogFooter,
|
|
15
|
+
AlertDialogHeader,
|
|
16
|
+
AlertDialogMedia,
|
|
17
|
+
AlertDialogTitle,
|
|
18
|
+
AlertDialogTrigger,
|
|
19
|
+
} from "@neynar/ui/alert-dialog"
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Anatomy
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
<AlertDialog>
|
|
26
|
+
<AlertDialogTrigger />
|
|
27
|
+
<AlertDialogContent>
|
|
28
|
+
<AlertDialogHeader>
|
|
29
|
+
<AlertDialogMedia />
|
|
30
|
+
<AlertDialogTitle />
|
|
31
|
+
<AlertDialogDescription />
|
|
32
|
+
</AlertDialogHeader>
|
|
33
|
+
<AlertDialogFooter>
|
|
34
|
+
<AlertDialogCancel />
|
|
35
|
+
<AlertDialogAction />
|
|
36
|
+
</AlertDialogFooter>
|
|
37
|
+
</AlertDialogContent>
|
|
38
|
+
</AlertDialog>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Components
|
|
42
|
+
|
|
43
|
+
| Component | Description |
|
|
44
|
+
|-----------|-------------|
|
|
45
|
+
| AlertDialog | Root container managing open state and accessibility |
|
|
46
|
+
| AlertDialogTrigger | Button that opens the dialog (supports `render` prop) |
|
|
47
|
+
| AlertDialogContent | Main dialog content with portal and backdrop |
|
|
48
|
+
| AlertDialogHeader | Container for title, description, and optional media |
|
|
49
|
+
| AlertDialogTitle | Dialog title (automatically announced to screen readers) |
|
|
50
|
+
| AlertDialogDescription | Description text with automatic link styling |
|
|
51
|
+
| AlertDialogMedia | Optional icon container for visual indicators |
|
|
52
|
+
| AlertDialogFooter | Container for action buttons |
|
|
53
|
+
| AlertDialogAction | Primary action button (inherits Button variants) |
|
|
54
|
+
| AlertDialogCancel | Cancel button that closes the dialog |
|
|
55
|
+
| AlertDialogPortal | Portal container (automatically used by AlertDialogContent) |
|
|
56
|
+
| AlertDialogOverlay | Backdrop overlay (automatically used by AlertDialogContent) |
|
|
57
|
+
|
|
58
|
+
## Props
|
|
59
|
+
|
|
60
|
+
### AlertDialog
|
|
61
|
+
|
|
62
|
+
| Prop | Type | Default | Description |
|
|
63
|
+
|------|------|---------|-------------|
|
|
64
|
+
| open | boolean | - | Controlled open state |
|
|
65
|
+
| defaultOpen | boolean | false | Uncontrolled default open state |
|
|
66
|
+
| onOpenChange | (open: boolean) => void | - | Called when open state changes |
|
|
67
|
+
|
|
68
|
+
### AlertDialogContent
|
|
69
|
+
|
|
70
|
+
Automatically renders portal and backdrop overlay. Centered with fade + zoom animations.
|
|
71
|
+
|
|
72
|
+
| Prop | Type | Default | Description |
|
|
73
|
+
|------|------|---------|-------------|
|
|
74
|
+
| size | "default" \| "sm" | "default" | Dialog size variant |
|
|
75
|
+
|
|
76
|
+
**Size Behavior:**
|
|
77
|
+
- `sm` - Compact dialog, footer buttons in 2-column grid on mobile
|
|
78
|
+
- `default` - Standard size, left-aligned on desktop when using media icon
|
|
79
|
+
|
|
80
|
+
### AlertDialogTrigger
|
|
81
|
+
|
|
82
|
+
Supports `render` prop to customize the trigger element:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<AlertDialogTrigger render={<Button variant="destructive" />}>
|
|
86
|
+
Delete Item
|
|
87
|
+
</AlertDialogTrigger>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### AlertDialogCancel
|
|
91
|
+
|
|
92
|
+
| Prop | Type | Default | Description |
|
|
93
|
+
|------|------|---------|-------------|
|
|
94
|
+
| variant | Button variant | "outline" | Button variant (inherits from Button) |
|
|
95
|
+
| size | Button size | "default" | Button size (inherits from Button) |
|
|
96
|
+
|
|
97
|
+
Automatically renders as a Button via `render` prop. Closes dialog when clicked.
|
|
98
|
+
|
|
99
|
+
### AlertDialogAction
|
|
100
|
+
|
|
101
|
+
Inherits all Button props and variants. Does not automatically close the dialog - handle close in `onClick`:
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<AlertDialogAction
|
|
105
|
+
variant="destructive"
|
|
106
|
+
onClick={() => {
|
|
107
|
+
deleteItem()
|
|
108
|
+
// Dialog closes via state change
|
|
109
|
+
}}
|
|
110
|
+
>
|
|
111
|
+
Delete
|
|
112
|
+
</AlertDialogAction>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Data Attributes
|
|
116
|
+
|
|
117
|
+
| Attribute | When Present |
|
|
118
|
+
|-----------|--------------|
|
|
119
|
+
| data-open | Dialog is open |
|
|
120
|
+
| data-closed | Dialog is closed |
|
|
121
|
+
| data-size | Size variant ("default" or "sm") |
|
|
122
|
+
| data-slot | Component identifier for styling |
|
|
123
|
+
|
|
124
|
+
## Examples
|
|
125
|
+
|
|
126
|
+
### Basic Destructive Action
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
<AlertDialog>
|
|
130
|
+
<AlertDialogTrigger render={<Button variant="destructive" />}>
|
|
131
|
+
Delete Item
|
|
132
|
+
</AlertDialogTrigger>
|
|
133
|
+
<AlertDialogContent>
|
|
134
|
+
<AlertDialogHeader>
|
|
135
|
+
<AlertDialogTitle>Delete this item?</AlertDialogTitle>
|
|
136
|
+
<AlertDialogDescription>
|
|
137
|
+
This action cannot be undone. The item will be permanently removed.
|
|
138
|
+
</AlertDialogDescription>
|
|
139
|
+
</AlertDialogHeader>
|
|
140
|
+
<AlertDialogFooter>
|
|
141
|
+
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
142
|
+
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
|
|
143
|
+
</AlertDialogFooter>
|
|
144
|
+
</AlertDialogContent>
|
|
145
|
+
</AlertDialog>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### With Media Icon
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
<AlertDialog>
|
|
152
|
+
<AlertDialogTrigger render={<Button variant="destructive" />}>
|
|
153
|
+
Revoke Key
|
|
154
|
+
</AlertDialogTrigger>
|
|
155
|
+
<AlertDialogContent size="default">
|
|
156
|
+
<AlertDialogHeader>
|
|
157
|
+
<AlertDialogMedia>
|
|
158
|
+
<ShieldAlertIcon className="text-destructive" />
|
|
159
|
+
</AlertDialogMedia>
|
|
160
|
+
<AlertDialogTitle>Revoke API Key?</AlertDialogTitle>
|
|
161
|
+
<AlertDialogDescription>
|
|
162
|
+
This will immediately invalidate the API key. Any applications using
|
|
163
|
+
this key will stop working. This action cannot be undone.
|
|
164
|
+
</AlertDialogDescription>
|
|
165
|
+
</AlertDialogHeader>
|
|
166
|
+
<AlertDialogFooter>
|
|
167
|
+
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
168
|
+
<AlertDialogAction variant="destructive">Revoke Key</AlertDialogAction>
|
|
169
|
+
</AlertDialogFooter>
|
|
170
|
+
</AlertDialogContent>
|
|
171
|
+
</AlertDialog>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Small Dialog for Quick Confirmations
|
|
175
|
+
|
|
176
|
+
```tsx
|
|
177
|
+
<AlertDialog>
|
|
178
|
+
<AlertDialogTrigger render={<Button variant="destructive" />}>
|
|
179
|
+
Delete Webhook
|
|
180
|
+
</AlertDialogTrigger>
|
|
181
|
+
<AlertDialogContent size="sm">
|
|
182
|
+
<AlertDialogHeader>
|
|
183
|
+
<AlertDialogMedia>
|
|
184
|
+
<AlertTriangleIcon className="text-destructive" />
|
|
185
|
+
</AlertDialogMedia>
|
|
186
|
+
<AlertDialogTitle>Delete webhook?</AlertDialogTitle>
|
|
187
|
+
<AlertDialogDescription>
|
|
188
|
+
You will no longer receive events at this endpoint.
|
|
189
|
+
</AlertDialogDescription>
|
|
190
|
+
</AlertDialogHeader>
|
|
191
|
+
<AlertDialogFooter>
|
|
192
|
+
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
193
|
+
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
|
|
194
|
+
</AlertDialogFooter>
|
|
195
|
+
</AlertDialogContent>
|
|
196
|
+
</AlertDialog>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Controlled State
|
|
200
|
+
|
|
201
|
+
```tsx
|
|
202
|
+
function ControlledExample() {
|
|
203
|
+
const [open, setOpen] = useState(false)
|
|
204
|
+
|
|
205
|
+
return (
|
|
206
|
+
<>
|
|
207
|
+
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
|
|
208
|
+
|
|
209
|
+
<AlertDialog open={open} onOpenChange={setOpen}>
|
|
210
|
+
<AlertDialogContent>
|
|
211
|
+
<AlertDialogHeader>
|
|
212
|
+
<AlertDialogTitle>Confirm action</AlertDialogTitle>
|
|
213
|
+
<AlertDialogDescription>
|
|
214
|
+
This dialog is controlled externally.
|
|
215
|
+
</AlertDialogDescription>
|
|
216
|
+
</AlertDialogHeader>
|
|
217
|
+
<AlertDialogFooter>
|
|
218
|
+
<AlertDialogCancel onClick={() => setOpen(false)}>
|
|
219
|
+
Cancel
|
|
220
|
+
</AlertDialogCancel>
|
|
221
|
+
<AlertDialogAction
|
|
222
|
+
onClick={() => {
|
|
223
|
+
performAction()
|
|
224
|
+
setOpen(false)
|
|
225
|
+
}}
|
|
226
|
+
>
|
|
227
|
+
Confirm
|
|
228
|
+
</AlertDialogAction>
|
|
229
|
+
</AlertDialogFooter>
|
|
230
|
+
</AlertDialogContent>
|
|
231
|
+
</AlertDialog>
|
|
232
|
+
</>
|
|
233
|
+
)
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### Complex Content with Lists
|
|
238
|
+
|
|
239
|
+
```tsx
|
|
240
|
+
<AlertDialog>
|
|
241
|
+
<AlertDialogTrigger render={<Button variant="destructive" />}>
|
|
242
|
+
Delete Multiple Items
|
|
243
|
+
</AlertDialogTrigger>
|
|
244
|
+
<AlertDialogContent>
|
|
245
|
+
<AlertDialogHeader>
|
|
246
|
+
<AlertDialogMedia>
|
|
247
|
+
<TrashIcon className="text-destructive" />
|
|
248
|
+
</AlertDialogMedia>
|
|
249
|
+
<AlertDialogTitle>Delete 3 items?</AlertDialogTitle>
|
|
250
|
+
<AlertDialogDescription>
|
|
251
|
+
The following items will be permanently deleted:
|
|
252
|
+
<ul className="mt-2 list-inside list-disc space-y-1">
|
|
253
|
+
<li>API Key: prod_****_8f3d</li>
|
|
254
|
+
<li>Webhook: https://api.example.com/hook</li>
|
|
255
|
+
<li>Team Member: jane@example.com</li>
|
|
256
|
+
</ul>
|
|
257
|
+
<p className="mt-2">This action cannot be undone.</p>
|
|
258
|
+
</AlertDialogDescription>
|
|
259
|
+
</AlertDialogHeader>
|
|
260
|
+
<AlertDialogFooter>
|
|
261
|
+
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
262
|
+
<AlertDialogAction variant="destructive">Delete All</AlertDialogAction>
|
|
263
|
+
</AlertDialogFooter>
|
|
264
|
+
</AlertDialogContent>
|
|
265
|
+
</AlertDialog>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## Keyboard
|
|
269
|
+
|
|
270
|
+
| Key | Action |
|
|
271
|
+
|-----|--------|
|
|
272
|
+
| Escape | Close dialog |
|
|
273
|
+
| Tab | Navigate between action and cancel buttons |
|
|
274
|
+
| Space/Enter | Activate focused button |
|
|
275
|
+
|
|
276
|
+
## Accessibility
|
|
277
|
+
|
|
278
|
+
- Title is announced to screen readers via `aria-labelledby`
|
|
279
|
+
- Description is associated via `aria-describedby`
|
|
280
|
+
- Focus is trapped within dialog when open
|
|
281
|
+
- Focus returns to trigger element when closed
|
|
282
|
+
- Escape key closes dialog
|
|
283
|
+
- Backdrop click closes dialog
|
|
284
|
+
|
|
285
|
+
## Related
|
|
286
|
+
|
|
287
|
+
- [Dialog](./dialog.llm.md) - For non-critical confirmations and general content
|
|
288
|
+
- [Button](./button.llm.md) - Used for action and cancel buttons
|
|
289
|
+
- [Popover](./popover.llm.md) - For non-modal contextual content
|