dialog

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/Dialog.astro directly.
3/**
4 * @component Dialog
5 * @title Dialog
6 * @description An accessible modal window for focused content or user actions with customizable open/close behavior.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-9384&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <Dialog>
12 *   <DialogTrigger asChild>
13 *     <Button>Manage Cookies</Button>
14 *   </DialogTrigger>
15 *
16 *   <DialogContent class="sm:max-w-lg">
17 *     <DialogHeader>
18 *       <DialogTitle>Manage Cookies</DialogTitle>
19 *       <DialogDescription>
20 *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
21 *       </DialogDescription>
22 *     </DialogHeader>
23 *     <div class="mt-3">
24 *       <div class="flex items-center gap-3">
25 *         <Checkbox id="cookies-necessary" name="cookies-necessary" disabled checked />
26 *         <Label for="cookies-necessary">Strictly Necessary Cookies (always active)</Label>
27 *       </div>
28 *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies are essential for the site to function and cannot be toggled off. They assist with security, user authentication, customer support, etc.</p>
29 *     </div>
30 *     <div class="mt-3">
31 *       <div class="flex items-center gap-3">
32 *         <Checkbox id="cookies-analytics" name="cookies-analytics" />
33 *         <Label for="cookies-analytics">Analytics Cookies</Label>
34 *       </div>
35 *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us understand how visitors interact with our site. They allow us to measure traffic and improve site performance.</p>
36 *     </div>
37 *     <div class="mt-3">
38 *       <div class="flex items-center gap-3">
39 *         <Checkbox id="cookies-marketing-performance" name="cookies-marketing-performance" />
40 *         <Label for="cookies-marketing-performance">Marketing Performance Cookies</Label>
41 *       </div>
42 *       <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us measure the effectiveness of our marketing campaigns.</p>
43 *     </div>
44 *     <DialogFooter>
45 *       <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
46 *       <Button data-dialog-close class="mt-4">Save changes</Button>
47 *     </DialogFooter>
48 *   </DialogContent>
49 * </Dialog>
50 *
51 * @usage
52 *
53 * ```astro nocollapse
54// … truncated