@dogsbay/ui 0.2.0-beta.0

package/src/dialog/DialogClose.astro

@@ -0,0 +1,32 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogClose = tv({
+  base: "inline-flex items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+});
+
+interface Props {
+  asChild?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { asChild = false, class: className, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <span data-part="close" data-as-child>
+      <slot />
+    </span>
+  ) : (
+    <button
+      class={dialogClose({ class: className })}
+      data-part="close"
+      type="button"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/dialog/DialogContent.astro

@@ -0,0 +1,37 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogBackdrop = tv({
+  base: "fixed inset-0 z-50 bg-black/80",
+});
+
+const dialogContent = tv({
+  base: "fixed left-1/2 top-1/2 z-[51] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-lg",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={dialogBackdrop()}
+  data-part="backdrop"
+  data-state="closed"
+  hidden
+>
+</div>
+<div
+  class={dialogContent({ class: className })}
+  data-part="content"
+  role="dialog"
+  aria-modal="true"
+  data-state="closed"
+  hidden
+  {...rest}
+>
+  <slot />
+</div>

package/src/dialog/DialogDescription.astro

@@ -0,0 +1,22 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogDescription = tv({
+  base: "text-sm text-muted-foreground",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<p
+  class={dialogDescription({ class: className })}
+  data-part="description"
+  {...rest}
+>
+  <slot />
+</p>

package/src/dialog/DialogFooter.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogFooter = tv({
+  base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={dialogFooter({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/dialog/DialogHeader.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogHeader = tv({
+  base: "flex flex-col space-y-1.5 text-center sm:text-left",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class={dialogHeader({ class: className })} {...rest}>
+  <slot />
+</div>

package/src/dialog/DialogTitle.astro

@@ -0,0 +1,18 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogTitle = tv({
+  base: "text-lg font-semibold leading-none tracking-tight",
+});
+
+interface Props {
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h2 class={dialogTitle({ class: className })} data-part="title" {...rest}>
+  <slot />
+</h2>

package/src/dialog/DialogTrigger.astro

@@ -0,0 +1,33 @@
+---
+import { tv } from "tailwind-variants";
+
+const dialogTrigger = tv({
+  base: "inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+});
+
+interface Props {
+  asChild?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { asChild = false, class: className, ...rest } = Astro.props;
+---
+
+{
+  asChild ? (
+    <span data-part="trigger" data-as-child>
+      <slot />
+    </span>
+  ) : (
+    <button
+      class={dialogTrigger({ class: className })}
+      data-part="trigger"
+      type="button"
+      aria-haspopup="dialog"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/dialog/dialog.ts

@@ -0,0 +1,291 @@
+import { FocusTrap } from "@dogsbay/primitives/focus-trap";
+import { ScrollLock } from "@dogsbay/primitives/scroll-lock";
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { markOthersInert } from "@dogsbay/primitives/inert";
+import { createPortal } from "@dogsbay/primitives/portal";
+
+interface DialogInstance {
+  root: HTMLElement;
+  trigger: HTMLElement | null;
+  content: HTMLElement;
+  backdrop: HTMLElement;
+  focusTrap: FocusTrap;
+  dismiss: DismissController;
+  cleanupPortal: (() => void) | null;
+  cleanupInert: (() => void) | null;
+  open: boolean;
+  /** The element that opened the dialog (may differ from trigger if opened externally). */
+  openedBy: HTMLElement | null;
+}
+
+/** Map from dialog content ID to its root element, for external trigger lookup. */
+const dialogById = new Map<string, HTMLElement>();
+
+const instances = new WeakMap<HTMLElement, DialogInstance>();
+
+let idCounter = 0;
+function uniqueId(prefix: string) {
+  return `${prefix}-${++idCounter}`;
+}
+
+function resolveAsChild(wrapper: HTMLElement): HTMLElement {
+  // When asChild is used, the wrapper is a <span data-as-child>.
+  // Find the first element child and forward the data-part attribute to it.
+  const child = wrapper.firstElementChild as HTMLElement | null;
+  if (child) {
+    const part = wrapper.getAttribute("data-part");
+    if (part) child.setAttribute("data-part", part);
+    return child;
+  }
+  return wrapper;
+}
+
+function initDialog(root: HTMLElement) {
+  if (instances.has(root)) return;
+
+  // Find parts that belong to THIS dialog root, not nested ones.
+  // A part belongs to us if its closest dialog root ancestor is this root.
+  const ownParts = (selector: string) => {
+    const all = root.querySelectorAll(selector);
+    for (let i = 0; i < all.length; i++) {
+      const el = all[i] as HTMLElement;
+      if (el.closest("[data-component='dialog']") === root) return el;
+    }
+    return null;
+  };
+
+  const content = ownParts("[data-part='content']");
+  const backdrop = ownParts("[data-part='backdrop']");
+  if (!content || !backdrop) return;
+
+  // Resolve trigger — handle asChild
+  const triggerWrapper = ownParts("[data-part='trigger']");
+  let trigger = triggerWrapper;
+  if (triggerWrapper?.hasAttribute("data-as-child")) {
+    trigger = resolveAsChild(triggerWrapper);
+  }
+
+  // Generate unique IDs for ARIA linkage
+  const dialogId = content.id || uniqueId("base-dialog");
+  content.id = dialogId;
+
+  if (trigger) {
+    trigger.setAttribute("aria-controls", dialogId);
+    trigger.setAttribute("aria-expanded", "false");
+    if (!trigger.hasAttribute("aria-haspopup")) {
+      trigger.setAttribute("aria-haspopup", "dialog");
+    }
+  }
+
+  // Link title and description
+  const title = content.querySelector(
+    "[data-part='title']",
+  ) as HTMLElement | null;
+  const description = content.querySelector(
+    "[data-part='description']",
+  ) as HTMLElement | null;
+
+  if (title) {
+    const titleId = title.id || uniqueId("base-dialog-title");
+    title.id = titleId;
+    content.setAttribute("aria-labelledby", titleId);
+  }
+  if (description) {
+    const descId = description.id || uniqueId("base-dialog-desc");
+    description.id = descId;
+    content.setAttribute("aria-describedby", descId);
+  }
+
+  const instance: DialogInstance = {
+    root,
+    trigger,
+    content,
+    backdrop,
+    focusTrap: new FocusTrap(content),
+    dismiss: new DismissController(content, {
+      onDismiss: (reason) => closeDialog(root, reason),
+    }),
+    cleanupPortal: null,
+    cleanupInert: null,
+    open: false,
+    openedBy: null,
+  };
+
+  instances.set(root, instance);
+  dialogById.set(dialogId, root);
+
+  // Trigger click
+  if (trigger) {
+    trigger.addEventListener("click", () => {
+      if (instance.open) {
+        closeDialog(root, "trigger-press");
+      } else {
+        openDialog(root, trigger);
+      }
+    });
+  }
+
+  // Close button handlers — only bind buttons that belong to THIS dialog,
+  // not close buttons inside nested dialogs
+  content.querySelectorAll("[data-part='close']").forEach((el) => {
+    // Skip if this close button is inside a nested dialog's content
+    const parentContent = el.closest("[data-part='content']");
+    if (parentContent !== content) return;
+
+    let closeEl = el as HTMLElement;
+    if (closeEl.hasAttribute("data-as-child")) {
+      closeEl = resolveAsChild(closeEl);
+    }
+    closeEl.addEventListener("click", () => {
+      closeDialog(root, "close-press");
+    });
+  });
+}
+
+function openDialog(root: HTMLElement, opener?: HTMLElement) {
+  const instance = instances.get(root);
+  if (!instance || instance.open) return;
+  instance.open = true;
+  instance.openedBy = opener ?? instance.trigger;
+
+  // Portal: move content and backdrop to body
+  const contentPortalCleanup = createPortal(
+    instance.content,
+    instance.content.id,
+  );
+  const backdropPortalCleanup = createPortal(
+    instance.backdrop,
+    `${instance.content.id}-backdrop`,
+  );
+  instance.cleanupPortal = () => {
+    contentPortalCleanup();
+    backdropPortalCleanup();
+  };
+
+  // Show
+  instance.content.hidden = false;
+  instance.backdrop.hidden = false;
+  instance.content.setAttribute("data-state", "open");
+  instance.backdrop.setAttribute("data-state", "open");
+  if (instance.openedBy) {
+    instance.openedBy.setAttribute("aria-expanded", "true");
+  }
+
+  // Scroll lock
+  ScrollLock.activate();
+
+  // Inert siblings
+  instance.cleanupInert = markOthersInert(instance.content);
+
+  // Focus trap
+  instance.focusTrap.activate();
+
+  // Dismiss
+  instance.dismiss.activate();
+
+  // Dispatch open event
+  root.dispatchEvent(new CustomEvent("base-dialog:open", { bubbles: true }));
+}
+
+function closeDialog(root: HTMLElement, reason: string) {
+  const instance = instances.get(root);
+  if (!instance || !instance.open) {
+    return;
+  }
+  instance.open = false;
+
+  // Deactivate in reverse order
+  instance.dismiss.deactivate();
+  instance.focusTrap.deactivate();
+
+  if (instance.cleanupInert) {
+    instance.cleanupInert();
+    instance.cleanupInert = null;
+  }
+
+  ScrollLock.deactivate();
+
+  // Update state attributes
+  instance.content.setAttribute("data-state", "closed");
+  instance.backdrop.setAttribute("data-state", "closed");
+  if (instance.openedBy) {
+    instance.openedBy.setAttribute("aria-expanded", "false");
+  }
+
+  // Wait for exit animations before hiding/removing portals
+  const animations = instance.content.getAnimations?.() ?? [];
+  const cleanup = () => {
+    instance.content.hidden = true;
+    instance.backdrop.hidden = true;
+    if (instance.cleanupPortal) {
+      instance.cleanupPortal();
+      instance.cleanupPortal = null;
+    }
+  };
+
+  if (animations.length > 0) {
+    Promise.all(animations.map((a) => a.finished))
+      .then(cleanup)
+      .catch(cleanup);
+  } else {
+    cleanup();
+  }
+
+  // Dispatch close event
+  root.dispatchEvent(
+    new CustomEvent("base-dialog:close", {
+      detail: { reason },
+      bubbles: true,
+    }),
+  );
+}
+
+/**
+ * Bind external triggers — elements with `data-dialog-for="dialogId"` anywhere
+ * on the page can open a dialog without being inside its component tree.
+ */
+function bindExternalTriggers() {
+  document.querySelectorAll("[data-dialog-for]").forEach((el) => {
+    const btn = el as HTMLElement;
+    // Skip if already bound
+    if (btn.hasAttribute("data-dialog-external-bound")) return;
+    btn.setAttribute("data-dialog-external-bound", "");
+
+    const targetId = btn.getAttribute("data-dialog-for")!;
+    // Set ARIA attributes on the external trigger
+    btn.setAttribute("aria-haspopup", "dialog");
+    btn.setAttribute("aria-controls", targetId);
+    btn.setAttribute("aria-expanded", "false");
+
+    btn.addEventListener("click", () => {
+      const root = dialogById.get(targetId);
+      if (!root) return;
+      const instance = instances.get(root);
+      if (!instance) return;
+
+      if (instance.open) {
+        closeDialog(root, "trigger-press");
+      } else {
+        openDialog(root, btn);
+      }
+    });
+  });
+}
+
+// Auto-initialize all dialog roots on the page
+function init() {
+  document.querySelectorAll("[data-component='dialog']").forEach((el) => {
+    initDialog(el as HTMLElement);
+  });
+  bindExternalTriggers();
+}
+
+// Run on load and after Astro View Transitions
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}
+document.addEventListener("astro:page-load", init);
+
+export { initDialog, openDialog, closeDialog };

package/src/dialog/index.ts

@@ -0,0 +1,8 @@
+export { default as Dialog } from "./Dialog.astro";
+export { default as DialogTrigger } from "./DialogTrigger.astro";
+export { default as DialogContent } from "./DialogContent.astro";
+export { default as DialogHeader } from "./DialogHeader.astro";
+export { default as DialogTitle } from "./DialogTitle.astro";
+export { default as DialogDescription } from "./DialogDescription.astro";
+export { default as DialogFooter } from "./DialogFooter.astro";
+export { default as DialogClose } from "./DialogClose.astro";

package/src/docs-footer/DocsFooter.astro

@@ -0,0 +1,50 @@
+---
+import { tv } from "tailwind-variants";
+
+const docsFooter = tv({
+  base: "mt-12 border-t pt-6",
+});
+
+const footerMeta = tv({
+  base: "mb-6 flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
+});
+
+interface Props {
+  /** URL to edit this page on GitHub */
+  editUrl?: string;
+  /** Last updated date string */
+  lastUpdated?: string;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { editUrl, lastUpdated, class: className, ...rest } = Astro.props;
+
+const showMeta = !!editUrl || !!lastUpdated;
+---
+
+<footer
+  class={docsFooter({ class: className })}
+  data-component="docs-footer"
+  {...rest}
+>
+  {showMeta && (
+    <div class={footerMeta()}>
+      {editUrl && (
+        <a
+          href={editUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-1 hover:text-foreground"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+          Edit this page
+        </a>
+      )}
+      {lastUpdated && (
+        <span>Last updated: {lastUpdated}</span>
+      )}
+    </div>
+  )}
+  <slot />
+</footer>

package/src/docs-header/DocsHeader.astro

@@ -0,0 +1,32 @@
+---
+import { tv } from "tailwind-variants";
+
+const docsHeader = tv({
+  base: "z-40 flex h-14 items-center gap-4 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+  variants: {
+    sticky: {
+      true: "sticky top-0",
+    },
+  },
+  defaultVariants: {
+    sticky: true,
+  },
+});
+
+interface Props {
+  /** Stick to top of viewport while scrolling (default: true) */
+  sticky?: boolean;
+  class?: string;
+  [key: string]: unknown;
+}
+
+const { sticky = true, class: className, ...rest } = Astro.props;
+---
+
+<header
+  class={docsHeader({ sticky, class: className })}
+  data-component="docs-header"
+  {...rest}
+>
+  <slot />
+</header>