{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "dependencies": [
    "@data-slot/dialog"
  ],
  "files": [
    {
      "path": "ui/dialog/Dialog.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/Dialog.astro directly.\n/**\n * @component Dialog\n * @title Dialog\n * @description An accessible modal window for focused content or user actions with customizable open/close behavior.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-9384&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Manage Cookies</Button>\n *   </DialogTrigger>\n *\n *   <DialogContent class=\"sm:max-w-lg\">\n *     <DialogHeader>\n *       <DialogTitle>Manage Cookies</DialogTitle>\n *       <DialogDescription>\n *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <div class=\"mt-3\">\n *       <div class=\"flex items-center gap-3\">\n *         <Checkbox id=\"cookies-necessary\" name=\"cookies-necessary\" disabled checked />\n *         <Label for=\"cookies-necessary\">Strictly Necessary Cookies (always active)</Label>\n *       </div>\n *       <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>\n *     </div>\n *     <div class=\"mt-3\">\n *       <div class=\"flex items-center gap-3\">\n *         <Checkbox id=\"cookies-analytics\" name=\"cookies-analytics\" />\n *         <Label for=\"cookies-analytics\">Analytics Cookies</Label>\n *       </div>\n *       <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>\n *     </div>\n *     <div class=\"mt-3\">\n *       <div class=\"flex items-center gap-3\">\n *         <Checkbox id=\"cookies-marketing-performance\" name=\"cookies-marketing-performance\" />\n *         <Label for=\"cookies-marketing-performance\">Marketing Performance Cookies</Label>\n *       </div>\n *       <p class=\"text-sm text-muted-foreground ml-8 mt-1\">These cookies help us measure the effectiveness of our marketing campaigns.</p>\n *     </div>\n *     <DialogFooter>\n *       <Button data-slot=\"dialog-close\" class=\"mt-4\" variant=\"outline\">Close</Button>\n *       <Button data-dialog-close class=\"mt-4\">Save changes</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Dialog, DialogTitle, DialogDescription, DialogContent, DialogFooter, DialogClose } from '@bejamas/ui/components/dialog';\n * import { Button } from '@bejamas/ui/components/button';\n * ---\n *\n *\n * <Dialog id=\"myDialog\">\n *   <DialogTrigger>Open Dialog</DialogTrigger>\n *   <DialogContent>\n *     <DialogTitle>Dialog Title</DialogTitle>\n *     <DialogDescription>Dialog description.</DialogDescription>\n *     Content here\n *     <DialogFooter>\n *       <DialogClose>Close</DialogClose>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The dialog emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `dialog:change` | `{ open: boolean }` | Fired when the open state changes |\n *\n * ```astro nocollapse\n * <Dialog id=\"my-dialog\">\n *   <DialogTrigger>Open Dialog</DialogTrigger>\n *   <DialogContent>\n *     <DialogTitle>Title</DialogTitle>\n *     <DialogDescription>Description</DialogDescription>\n *   </DialogContent>\n * </Dialog>\n * ```\n *\n * ```js nocollapse\n *   const dialog = document.getElementById('my-dialog');\n *\n *   dialog.addEventListener('dialog:change', (e) => {\n *     console.log('Is open:', e.detail.open);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the dialog programmatically by dispatching a `dialog:set` event:\n *\n * ```js nocollapse\n * const dialog = document.getElementById('my-dialog');\n *\n * // Open the dialog\n * dialog.dispatchEvent(new CustomEvent('dialog:set', {\n *   detail: { open: true }\n * }));\n *\n * // Close the dialog\n * dialog.dispatchEvent(new CustomEvent('dialog:set', {\n *   detail: { open: false }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The dialog sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | dialog | Current state (`open` or `closed`) |\n *\n * @examples\n *\n * ### Nested Dialogs\n *\n * <Dialog>\n *   <Button data-slot=\"dialog-trigger\" class=\"\">Open Nested Dialog</Button>\n *   <DialogContent class=\"sm:max-w-lg\">\n *     <DialogHeader>\n *       <DialogTitle>Nested Dialog</DialogTitle>\n *       <DialogDescription>\n *         Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <Button data-slot=\"dialog-close\" class=\"mt-4\" variant=\"outline\">Close</Button>\n *       <Dialog>\n *         <Button data-slot=\"dialog-trigger\" class=\"mt-4\">Open Nested Dialog</Button>\n *         <DialogContent class=\"sm:max-w-md border-red-800\">\n *           <DialogHeader>\n *             <DialogTitle>Nested Dialog</DialogTitle>\n *             <DialogDescription>\n *               Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.\n *             </DialogDescription>\n *           </DialogHeader>\n *         </DialogContent>\n *       </Dialog>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n */\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  defaultOpen?: boolean;\n  class?: string;\n  closeOnClickOutside?: boolean;\n  closeOnEscape?: boolean;\n  lockScroll?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  defaultOpen = false,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  lockScroll = true,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  data-slot=\"dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={cn(\"\", className)}\n  {...rest}\n>\n  <slot />\n</div>\n\n<script>\n  import { createDialog } from \"@data-slot/dialog\";\n\n  document\n    .querySelectorAll<HTMLElement>('[data-slot=\"dialog\"]')\n    .forEach((el) => createDialog(el));\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogClose.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogClose.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  data-slot=\"dialog-close\"\n  data-dialog-close\n  class={cn(\"absolute top-4 right-4 inline-flex items-center gap-2\", className)}\n>\n  <slot />\n  {!Astro.slots.has(\"default\") && <span class=\"sr-only\">Close</span>}\n</button>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogContent.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\nimport DialogClose from \"./DialogClose.astro\";\nimport DialogOverlay from \"./DialogOverlay.astro\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  showCloseButton?: boolean;\n}\n\nconst {\n  showCloseButton = true,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<div data-slot=\"dialog-portal\" class=\"z-50 isolate absolute\">\n  <DialogOverlay />\n  <div\n    data-slot=\"dialog-content\"\n    hidden\n    class={cn(\n      \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n      className,\n    )}\n    {...rest}\n  >\n    <slot />\n    {\n      showCloseButton && (\n        <DialogClose>\n          <SemanticIcon name=\"x\" />\n          <span class=\"sr-only\">Close</span>\n        </DialogClose>\n      )\n    }\n  </div>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogDescription.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogDescription.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"dialog-description\"\n  class={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogFooter.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogFooter.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"dialog-footer\"\n  class={cn(\"gap-2\", \"flex justify-end gap-2\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogHeader.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogHeader.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  data-slot=\"dialog-header\"\n  class={cn(\"gap-2 flex flex-col\", className)}\n  {...rest}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogOverlay.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogOverlay.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  hidden\n  data-slot=\"dialog-overlay\"\n  class={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n  {...rest}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogTitle.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogTitle.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"dialog-title\"\n  class={cn(\"leading-none font-medium cn-font-heading\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/DialogTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/DialogTrigger.astro directly.\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n  /** Radix-like: render wrapper so the child can be the interactive element */\n  asChild?: boolean;\n}\n\nconst {\n  class: className = \"\",\n  asChild = false,\n  type = \"button\",\n  ...rest\n} = Astro.props as Props;\n\nconst defaultClasses =\n  \"cursor-pointer select-none outline-none group-focus-within:pointer-events-none inline-flex items-center gap-1\";\n---\n\n{\n  asChild ? (\n    <div data-slot=\"dialog-trigger\" data-as-child class={cn(\"\", defaultClasses, className)}>\n      <slot />\n    </div>\n  ) : (\n    <button\n      {...rest}\n      type={type}\n      data-slot=\"dialog-trigger\"\n      class={cn(\"\", defaultClasses, className)}\n    >\n      <slot />\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/dialog/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/dialog/index.ts directly.\nexport { default as Dialog } from \"./Dialog.astro\";\nexport { default as DialogTitle } from \"./DialogTitle.astro\";\nexport { default as DialogDescription } from \"./DialogDescription.astro\";\nexport { default as DialogContent } from \"./DialogContent.astro\";\nexport { default as DialogFooter } from \"./DialogFooter.astro\";\nexport { default as DialogClose } from \"./DialogClose.astro\";\nexport { default as DialogHeader } from \"./DialogHeader.astro\";\nexport { default as DialogTrigger } from \"./DialogTrigger.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}