Dialog

---
// src/components/ui/overlays/dialog/Dialog.astro — headless primitive (see ../../README.md).
// Native modal <dialog>. Open it with a DialogTrigger whose `for` matches this dialog's `id`; close
// with DialogClose, Escape (native), or a backdrop click. Compose DialogHeader / DialogTitle /
// DialogDescription / DialogFooter inside, and wire `aria-labelledby` / `aria-describedby` to their
// ids so the title and description are announced. Behavior is the shared `_dialog` controller; the
// fade/scale entry-exit animation, backdrop scrim, and modal scroll-lock live in `_overlay.css`
// (which also respects `prefers-reduced-motion`).
import "../../_overlay.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"dialog">;

const { class: className, ...rest } = Astro.props;
---

<dialog class={className} data-slot="dialog" {...rest}>
  <slot />
</dialog>

<script>
  import "../../_dialog";
</script>

---
// src/components/ui/overlays/dialog/DialogClose.astro — Dialog compound part (see ../../README.md).
// Button that closes its nearest <dialog> (Dialog or Sheet). Wired by the shared `_dialog`
// controller via the data-dialog-close hook. Same `data-variant`/`data-size` surface as Button.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

const { variant = "ghost", size = "md", class: className, ...rest } = Astro.props;
---

<button
  type="button"
  data-dialog-close
  data-slot="dialog-close"
  data-variant={variant}
  data-size={size}
  class={className}
  {...rest}
>
  <slot />
</button>

---
// src/components/ui/overlays/dialog/DialogDescription.astro — Dialog compound part (see ../../README.md).
// Give it an `id` and point the Dialog's `aria-describedby` at it so it's announced with the dialog.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"p">;

const { class: className, ...rest } = Astro.props;
---

<p class={className} data-slot="dialog-description" {...rest}>
  <slot />
</p>

---
// src/components/ui/overlays/dialog/DialogFooter.astro — Dialog compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="dialog-footer" {...rest}><slot /></div>

---
// src/components/ui/overlays/dialog/DialogHeader.astro — Dialog compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="dialog-header" {...rest}><slot /></div>

---
// src/components/ui/overlays/dialog/DialogTitle.astro — Dialog compound part (see ../../README.md).
// Give it an `id` and point the Dialog's `aria-labelledby` at it so the title names the dialog.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"h2">;

const { class: className, ...rest } = Astro.props;
---

<h2 class={className} data-slot="dialog-title" {...rest}><slot /></h2>

---
// src/components/ui/overlays/dialog/DialogTrigger.astro — Dialog compound part (see ../../README.md).
// Button that opens the dialog/sheet whose `id` equals this trigger's `for`. Wired by the shared
// `_dialog` controller via the data-dialog-open hook. It carries the same `data-variant`/`data-size`
// surface as Button, so a theme styles the two together in one selector list rather than by sharing
// a class config the way the Tailwind original did.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  for: string;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

const { for: target, variant = "primary", size = "md", class: className, ...rest } = Astro.props;
---

<button
  type="button"
  data-dialog-open={target}
  data-slot="dialog-trigger"
  data-variant={variant}
  data-size={size}
  class={className}
  {...rest}
>
  <slot />
</button>

import Dialog from "./Dialog.astro";
import DialogClose from "./DialogClose.astro";
import DialogDescription from "./DialogDescription.astro";
import DialogFooter from "./DialogFooter.astro";
import DialogHeader from "./DialogHeader.astro";
import DialogTitle from "./DialogTitle.astro";
import DialogTrigger from "./DialogTrigger.astro";

export {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
};
export default Dialog;